@@ -5,11 +5,24 @@ import MultiSelect from 'react-multiple-select-dropdown-lite'
55import  Loader  from  '../../Loaders/Loader' 
66import  {  addFieldMap  }  from  '../IntegrationHelpers/IntegrationHelpers' 
77import  ActiveCampaignActions  from  './ActiveCampaignActions' 
8- import  {  refreshActiveCampaingAccounts ,  refreshActiveCampaingHeader ,  refreshActiveCampaingList ,  refreshActiveCampaingTags  }  from  './ActiveCampaignCommonFunc' 
8+ import  { 
9+   refreshActiveCampaingAccounts , 
10+   refreshActiveCampaingHeader , 
11+   refreshActiveCampaingList , 
12+   refreshActiveCampaingTags 
13+ }  from  './ActiveCampaignCommonFunc' 
914import  ActiveCampaignFieldMap  from  './ActiveCampaignFieldMap' 
1015import  {  create  }  from  'mutative' 
1116
12- export  default  function  ActiveCampaignIntegLayout ( {  formID,  formFields,  activeCampaingConf,  setActiveCampaingConf,  isLoading,  setIsLoading,  setSnackbar } )  { 
17+ export  default  function  ActiveCampaignIntegLayout ( { 
18+   formID, 
19+   formFields, 
20+   activeCampaingConf, 
21+   setActiveCampaingConf, 
22+   isLoading, 
23+   setIsLoading, 
24+   setSnackbar
25+ } )  { 
1326  const  setTags  =  ( val )  =>  { 
1427    const  newConf  =  {  ...activeCampaingConf  } 
1528    if  ( val )  { 
@@ -19,21 +32,25 @@ export default function ActiveCampaignIntegLayout({ formID, formFields, activeCa
1932    } 
2033    setActiveCampaingConf ( {  ...newConf  } ) 
2134  } 
22-   const  setAccount  =  val  =>  { 
35+   const  setAccount  =  ( val )  =>  { 
2336    console . log ( val ) 
24-     setActiveCampaingConf ( prevConf  =>  create ( prevConf ,  draftConf  =>  { 
25-       if  ( val )  { 
26-         draftConf . selectedAccount  =  val 
27-       }  else  { 
28-         delete  draftConf . selectedAccount 
29-       } 
30-     } ) ) 
37+     setActiveCampaingConf ( ( prevConf )  => 
38+       create ( prevConf ,  ( draftConf )  =>  { 
39+         if  ( val )  { 
40+           draftConf . selectedAccount  =  val 
41+         }  else  { 
42+           delete  draftConf . selectedAccount 
43+         } 
44+       } ) 
45+     ) 
3146  } 
3247
33-   const  setJobTitle  =  val  =>  { 
34-     setActiveCampaingConf ( prevConf  =>  create ( prevConf ,  draftConf  =>  { 
35-       draftConf [ 'job_title' ]  =  val 
36-     } ) ) 
48+   const  setJobTitle  =  ( val )  =>  { 
49+     setActiveCampaingConf ( ( prevConf )  => 
50+       create ( prevConf ,  ( draftConf )  =>  { 
51+         draftConf [ 'job_title' ]  =  val 
52+       } ) 
53+     ) 
3754  } 
3855
3956  const  handleInput  =  ( e )  =>  { 
@@ -52,110 +69,222 @@ export default function ActiveCampaignIntegLayout({ formID, formFields, activeCa
5269  const  activeCampaignLists  =  activeCampaingConf ?. default ?. activeCampaignLists 
5370
5471  useEffect ( ( )  =>  { 
55-     activeCampaignLists  &&  refreshActiveCampaingTags ( activeCampaingConf ,  setActiveCampaingConf ,  setIsLoading ,  setSnackbar ) 
72+     activeCampaignLists  && 
73+       refreshActiveCampaingTags ( 
74+         activeCampaingConf , 
75+         setActiveCampaingConf , 
76+         setIsLoading , 
77+         setSnackbar 
78+       ) 
5679    // eslint-disable-next-line react-hooks/exhaustive-deps 
5780  } ,  [ activeCampaignLists ] ) 
5881
5982  return  ( 
6083    < > 
6184      < br  /> 
6285      < b  className = "wdt-200 d-in-b" > { __ ( 'List:' ,  'bit-integrations' ) } </ b > 
63-       < select  value = { activeCampaingConf ?. listId }  name = "listId"  id = ""  className = "btcd-paper-inp w-5"  onChange = { handleInput } > 
86+       < select 
87+         value = { activeCampaingConf ?. listId } 
88+         name = "listId" 
89+         id = "" 
90+         className = "btcd-paper-inp w-5" 
91+         onChange = { handleInput } > 
6492        < option  value = "" > { __ ( 'Select List' ,  'bit-integrations' ) } </ option > 
65-         { 
66-           activeCampaingConf ?. default ?. activeCampaignLists  &&  Object . keys ( activeCampaingConf . default . activeCampaignLists ) . map ( listname  =>  ( 
67-             < option  key = { `${ listname  +  1 }  }  value = { activeCampaingConf . default . activeCampaignLists [ listname ] . listId } > 
93+         { activeCampaingConf ?. default ?. activeCampaignLists  && 
94+           Object . keys ( activeCampaingConf . default . activeCampaignLists ) . map ( ( listname )  =>  ( 
95+             < option 
96+               key = { `${ listname  +  1 }  } 
97+               value = { activeCampaingConf . default . activeCampaignLists [ listname ] . listId } > 
6898              { activeCampaingConf . default . activeCampaignLists [ listname ] . listName } 
6999            </ option > 
70-           ) ) 
71-         } 
100+           ) ) } 
72101      </ select > 
73-       < button  onClick = { ( )  =>  refreshActiveCampaingList ( activeCampaingConf ,  setActiveCampaingConf ,  setIsLoading ,  setSnackbar ) }  className = "icn-btn sh-sm ml-2 mr-2 tooltip"  style = { {  '--tooltip-txt' : '"Refresh Activecapmaign list"'  } }  type = "button"  disabled = { isLoading } > ↻</ button > 
102+       < button 
103+         onClick = { ( )  => 
104+           refreshActiveCampaingList ( 
105+             activeCampaingConf , 
106+             setActiveCampaingConf , 
107+             setIsLoading , 
108+             setSnackbar 
109+           ) 
110+         } 
111+         className = "icn-btn sh-sm ml-2 mr-2 tooltip" 
112+         style = { {  '--tooltip-txt' : '"Refresh Activecapmaign list"'  } } 
113+         type = "button" 
114+         disabled = { isLoading } > 
115+         ↻
116+       </ button > 
74117      < br  /> 
75118      < br  /> 
76119      < div  className = "d-flx" > 
77-         < b  style = { {  marginTop : '15px'  } }  className = "wdt-200 d-in-b" > { __ ( 'Tags: ' ,  'bit-integrations' ) } </ b > 
120+         < b  style = { {  marginTop : '15px'  } }  className = "wdt-200 d-in-b" > 
121+           { __ ( 'Tags: ' ,  'bit-integrations' ) } 
122+         </ b > 
78123        < MultiSelect 
79124          defaultValue = { activeCampaingConf ?. tagIds } 
80125          className = "btcd-paper-drpdwn w-5" 
81-           options = { activeCampaingConf ?. default ?. activeCampaignTags  &&  Object . keys ( activeCampaingConf . default . activeCampaignTags ) . map ( tag  =>  ( {  label : activeCampaingConf . default . activeCampaignTags [ tag ] . tagName ,  value : activeCampaingConf . default . activeCampaignTags [ tag ] . tagId  } ) ) } 
82-           onChange = { val  =>  setTags ( val ) } 
126+           options = { 
127+             activeCampaingConf ?. default ?. activeCampaignTags  && 
128+             Object . keys ( activeCampaingConf . default . activeCampaignTags ) . map ( ( tag )  =>  ( { 
129+               label : activeCampaingConf . default . activeCampaignTags [ tag ] . tagName , 
130+               value : activeCampaingConf . default . activeCampaignTags [ tag ] . tagId 
131+             } ) ) 
132+           } 
133+           onChange = { ( val )  =>  setTags ( val ) } 
83134        /> 
84-         < button  onClick = { ( )  =>  refreshActiveCampaingTags ( activeCampaingConf ,  setActiveCampaingConf ,  setIsLoading ,  setSnackbar ) }  className = "icn-btn sh-sm ml-2 mr-2 tooltip"  style = { {  '--tooltip-txt' : `'${ __ ( 'Refresh Activecapmaign Tags' ,  'bit-integrations' ) }   } }  type = "button"  disabled = { isLoading } > ↻</ button > 
135+         < button 
136+           onClick = { ( )  => 
137+             refreshActiveCampaingTags ( 
138+               activeCampaingConf , 
139+               setActiveCampaingConf , 
140+               setIsLoading , 
141+               setSnackbar 
142+             ) 
143+           } 
144+           className = "icn-btn sh-sm ml-2 mr-2 tooltip" 
145+           style = { {  '--tooltip-txt' : `'${ __ ( 'Refresh Activecapmaign Tags' ,  'bit-integrations' ) }   } } 
146+           type = "button" 
147+           disabled = { isLoading } > 
148+           ↻
149+         </ button > 
85150      </ div > 
86151      < br  /> 
87-       { activeCampaingConf ?. accounts  && 
152+       { activeCampaingConf ?. accounts  &&   ( 
88153        < > 
89154          < div  className = "d-flx" > 
90-             < b  style = { {  marginTop : '15px'  } }  className = "wdt-200 d-in-b" > { __ ( 'Account: ' ,  'bit-integrations' ) } </ b > 
155+             < b  style = { {  marginTop : '15px'  } }  className = "wdt-200 d-in-b" > 
156+               { __ ( 'Account: ' ,  'bit-integrations' ) } 
157+             </ b > 
91158            < MultiSelect 
92159              defaultValue = { activeCampaingConf ?. selectedAccount } 
93160              className = "btcd-paper-drpdwn w-5" 
94-               options = { activeCampaingConf ?. accounts  &&  activeCampaingConf . accounts . map ( account  =>  ( {  label : account . name ,  value : account . id  } ) ) } 
161+               options = { 
162+                 activeCampaingConf ?. accounts  && 
163+                 activeCampaingConf . accounts . map ( ( account )  =>  ( { 
164+                   label : account . name , 
165+                   value : account . id 
166+                 } ) ) 
167+               } 
95168              onChange = { setAccount } 
96169              singleSelect 
97170            /> 
98-             < button  onClick = { ( )  =>  refreshActiveCampaingAccounts ( activeCampaingConf ,  setActiveCampaingConf ,  setIsLoading ,  setSnackbar ) }  className = "icn-btn sh-sm ml-2 mr-2 tooltip"  style = { {  '--tooltip-txt' : `'${ __ ( 'Refresh Activecapmaign Tags' ,  'bit-integrations' ) }   } }  type = "button"  disabled = { isLoading } > ↻</ button > 
171+             < button 
172+               onClick = { ( )  => 
173+                 refreshActiveCampaingAccounts ( 
174+                   activeCampaingConf , 
175+                   setActiveCampaingConf , 
176+                   setIsLoading , 
177+                   setSnackbar 
178+                 ) 
179+               } 
180+               className = "icn-btn sh-sm ml-2 mr-2 tooltip" 
181+               style = { { 
182+                 '--tooltip-txt' : `'${ __ ( 'Refresh Activecapmaign Tags' ,  'bit-integrations' ) }  
183+               } } 
184+               type = "button" 
185+               disabled = { isLoading } > 
186+               ↻
187+             </ button > 
99188          </ div > 
100189          < br  /> 
101190        </ > 
102-       } 
103-       { activeCampaingConf ?. selectedAccount  && 
191+       ) } 
192+       { activeCampaingConf ?. selectedAccount  &&   ( 
104193        < > 
105194          < div  className = "d-flx" > 
106-             < b  style = { {  marginTop : '15px'  } }  className = "wdt-200 d-in-b" > { __ ( 'Job Title:' ,  'bit-integrations' ) } </ b > 
107-             < input  className = "btcd-paper-inp w-5 mt-1"  onChange = { e  =>  setJobTitle ( e . target . value ) }  name = "job_title"  value = { activeCampaingConf . job_title }  type = "text"  placeholder = { __ ( 'Job Title...' ,  'bit-integrations' ) }  /> 
195+             < b  style = { {  marginTop : '15px'  } }  className = "wdt-200 d-in-b" > 
196+               { __ ( 'Job Title:' ,  'bit-integrations' ) } 
197+             </ b > 
198+             < input 
199+               className = "btcd-paper-inp w-5 mt-1" 
200+               onChange = { ( e )  =>  setJobTitle ( e . target . value ) } 
201+               name = "job_title" 
202+               value = { activeCampaingConf . job_title } 
203+               type = "text" 
204+               placeholder = { __ ( 'Job Title...' ,  'bit-integrations' ) } 
205+             /> 
108206          </ div > 
109207          < br  /> 
110208        </ > 
111-       } 
209+       ) } 
112210      { isLoading  &&  ( 
113-         < Loader  style = { { 
114-           display : 'flex' , 
115-           justifyContent : 'center' , 
116-           alignItems : 'center' , 
117-           height : 100 , 
118-           transform : 'scale(0.7)' , 
119-         } } 
211+         < Loader 
212+           style = { { 
213+             display : 'flex' , 
214+             justifyContent : 'center' , 
215+             alignItems : 'center' , 
216+             height : 100 , 
217+             transform : 'scale(0.7)' 
218+           } } 
120219        /> 
121220      ) } 
122221
123222      < div  className = "mt-4" > 
124223        < b  className = "wdt-100" > { __ ( 'Map Fields' ,  'bit-integrations' ) } </ b > 
125-         < button  onClick = { ( )  =>  refreshActiveCampaingHeader ( activeCampaingConf ,  setActiveCampaingConf ,  setIsLoading ,  setSnackbar ) }  className = "icn-btn sh-sm ml-2 mr-2 tooltip"  style = { {  '--tooltip-txt' : `'${ __ ( 'Refresh Activecapmaign Field' ,  'bit-integrations' ) }   } }  type = "button"  disabled = { isLoading } > ↻</ button > 
224+         < button 
225+           onClick = { ( )  => 
226+             refreshActiveCampaingHeader ( 
227+               activeCampaingConf , 
228+               setActiveCampaingConf , 
229+               setIsLoading , 
230+               setSnackbar 
231+             ) 
232+           } 
233+           className = "icn-btn sh-sm ml-2 mr-2 tooltip" 
234+           style = { {  '--tooltip-txt' : `'${ __ ( 'Refresh Activecapmaign Field' ,  'bit-integrations' ) }   } } 
235+           type = "button" 
236+           disabled = { isLoading } > 
237+           ↻
238+         </ button > 
126239      </ div > 
127-       { 
128-         ( activeCampaingConf ?. listId  ||  activeCampaingConf ?. default ?. fields )  &&  ( 
129-           < > 
130-             < div  className = "btcd-hr mt-1"  /> 
131-             < div  className = "flx flx-around mt-2 mb-2 btcbi-field-map-label" > 
132-               < div  className = "txt-dp" > < b > { __ ( 'Form Fields' ,  'bit-integrations' ) } </ b > </ div > 
133-               < div  className = "txt-dp" > < b > { __ ( 'ActiveCampaign Fields' ,  'bit-integrations' ) } </ b > </ div > 
240+       { ( activeCampaingConf ?. listId  ||  activeCampaingConf ?. default ?. fields )  &&  ( 
241+         < > 
242+           < div  className = "btcd-hr mt-1"  /> 
243+           < div  className = "flx flx-around mt-2 mb-2 btcbi-field-map-label" > 
244+             < div  className = "txt-dp" > 
245+               < b > { __ ( 'Form Fields' ,  'bit-integrations' ) } </ b > 
246+             </ div > 
247+             < div  className = "txt-dp" > 
248+               < b > { __ ( 'ActiveCampaign Fields' ,  'bit-integrations' ) } </ b > 
134249            </ div > 
250+           </ div > 
135251
136-             { activeCampaingConf . field_map . map ( ( itm ,  i )  =>  ( 
137-               < ActiveCampaignFieldMap 
138-                 key = { `Activecampaign-m-${ i  +  9 }  } 
139-                 i = { i } 
140-                 field = { itm } 
141-                 activeCampaingConf = { activeCampaingConf } 
142-                 formFields = { formFields } 
143-                 setActiveCampaingConf = { setActiveCampaingConf } 
144-               /> 
145-             ) ) } 
146-             < div  className = "txt-center btcbi-field-map-button mt-2" > < button  onClick = { ( )  =>  addFieldMap ( activeCampaingConf . field_map . length ,  activeCampaingConf ,  setActiveCampaingConf ) }  className = "icn-btn sh-sm"  type = "button" > +</ button > </ div > 
147-             < br  /> 
148-             < br  /> 
149-             < div  className = "mt-4" > < b  className = "wdt-100" > { __ ( 'Actions' ,  'bit-integrations' ) } </ b > </ div > 
150-             < div  className = "btcd-hr mt-1"  /> 
151-             < ActiveCampaignActions 
252+           { activeCampaingConf . field_map . map ( ( itm ,  i )  =>  ( 
253+             < ActiveCampaignFieldMap 
254+               key = { `Activecampaign-m-${ i  +  9 }  } 
255+               i = { i } 
256+               field = { itm } 
152257              activeCampaingConf = { activeCampaingConf } 
258+               formFields = { formFields } 
153259              setActiveCampaingConf = { setActiveCampaingConf } 
154260            /> 
155-           </ > 
156-         ) 
157-       } 
158- 
261+           ) ) } 
262+           < div  className = "txt-center btcbi-field-map-button mt-2" > 
263+             < button 
264+               onClick = { ( )  => 
265+                 addFieldMap ( 
266+                   activeCampaingConf . field_map . length , 
267+                   activeCampaingConf , 
268+                   setActiveCampaingConf 
269+                 ) 
270+               } 
271+               className = "icn-btn sh-sm" 
272+               type = "button" > 
273+               +
274+             </ button > 
275+           </ div > 
276+           < br  /> 
277+           < br  /> 
278+           < div  className = "mt-4" > 
279+             < b  className = "wdt-100" > { __ ( 'Utilities' ,  'bit-integrations' ) } </ b > 
280+           </ div > 
281+           < div  className = "btcd-hr mt-1"  /> 
282+           < ActiveCampaignActions 
283+             activeCampaingConf = { activeCampaingConf } 
284+             setActiveCampaingConf = { setActiveCampaingConf } 
285+           /> 
286+         </ > 
287+       ) } 
159288    </ > 
160289  ) 
161290} 
0 commit comments