@@ -12,14 +12,12 @@ import {
12
12
SelectControl ,
13
13
Spinner ,
14
14
Placeholder ,
15
- Disabled ,
16
15
} from '@wordpress/components' ;
17
16
import { useEffect , useState } from '@wordpress/element' ;
18
17
import apiFetch from '@wordpress/api-fetch' ;
19
18
import { useDispatch , useSelect } from '@wordpress/data' ;
20
19
import { createBlock } from '@wordpress/blocks' ;
21
20
import Icon from './icon' ;
22
- import { InterestGroups } from './interest-groups' ;
23
21
24
22
const SelectListPlaceholder = ( ) => {
25
23
return (
@@ -40,6 +38,7 @@ export const BlockEdit = (props) => {
40
38
const {
41
39
lists,
42
40
merge_fields_visibility,
41
+ interest_groups_visibility,
43
42
list_id : listId ,
44
43
header_text,
45
44
sub_header_text,
@@ -54,7 +53,6 @@ export const BlockEdit = (props) => {
54
53
update_existing_subscribers,
55
54
show_unsubscribe_link,
56
55
unsubscribe_link_text,
57
- interest_groups_visibility,
58
56
show_required_indicator = true ,
59
57
required_indicator_text,
60
58
} = attributes ;
@@ -70,7 +68,8 @@ export const BlockEdit = (props) => {
70
68
( select ) => select ( blockEditorStore ) . getBlocksByClientId ( clientId ) ?. [ 0 ] ?. innerBlocks || [ ] ,
71
69
[ clientId ] ,
72
70
) ;
73
- const exisingTags = innerBlocks . map ( ( block ) => block ?. attributes ?. tag ) ;
71
+ const exisingTags = innerBlocks . map ( ( block ) => block ?. attributes ?. tag ) . filter ( Boolean ) ;
72
+ const exisingGroups = innerBlocks . map ( ( block ) => block ?. attributes ?. id ) . filter ( Boolean ) ;
74
73
const visibleFieldsCount = innerBlocks . filter ( ( block ) => block ?. attributes ?. visible ) . length ;
75
74
76
75
const listOptions = [ ] ;
@@ -99,43 +98,60 @@ export const BlockEdit = (props) => {
99
98
// Fetch data from API.
100
99
apiFetch ( { path : `/mailchimp/v1/list-data/${ listId } ` } )
101
100
. then ( ( data ) => {
101
+ if ( ! data ) {
102
+ setError ( __ ( 'Error fetching list data.' , 'mailchimp' ) ) ;
103
+ setIsLoading ( false ) ;
104
+ return ;
105
+ }
106
+
102
107
if ( replaceBlocks ) {
103
108
// Replace all innerBlocks with new ones on list change.
104
- const listInnerBlocks = data ?. merge_fields ?. map ( ( field ) =>
105
- createBlock ( 'mailchimp/mailchimp-form-field' , {
106
- tag : field . tag ,
107
- label : field . name ,
108
- type : field . type ,
109
- visible :
110
- ( field . required || merge_fields_visibility ?. [ field . tag ] === 'on' ) &&
111
- field . public ,
112
- } ) ,
113
- ) ;
114
- replaceInnerBlocks ( clientId , [ ...listInnerBlocks ] , false ) ;
115
-
116
- // Reset groups visibility settings on list change.
117
- if ( data ?. interest_groups ?. length > 0 ) {
118
- const newVisibility = data ?. interest_groups ?. reduce ( ( acc , field ) => {
119
- acc [ field . id ] = 'off' ;
120
- return acc ;
121
- } , { } ) ;
122
- setAttributes ( { interest_groups_visibility : newVisibility } ) ;
123
- } else {
124
- setAttributes ( { interest_groups_visibility : { } } ) ;
125
- }
109
+ const listFieldsBlocks =
110
+ data ?. merge_fields ?. map ( ( field ) =>
111
+ createBlock ( 'mailchimp/mailchimp-form-field' , {
112
+ tag : field . tag ,
113
+ label : field . name ,
114
+ type : field . type ,
115
+ visible :
116
+ ( field . required ||
117
+ merge_fields_visibility ?. [ field . tag ] === 'on' ) &&
118
+ field . public ,
119
+ } ) ,
120
+ ) || [ ] ;
121
+ const listGroupsBlocks =
122
+ data ?. interest_groups ?. map ( ( group ) =>
123
+ createBlock ( 'mailchimp/mailchimp-audience-group' , {
124
+ id : group . id ,
125
+ label : group . title ,
126
+ visible :
127
+ interest_groups_visibility ?. [ group . id ] === 'on' &&
128
+ group . type !== 'hidden' ,
129
+ } ) ,
130
+ ) || [ ] ;
131
+ replaceInnerBlocks ( clientId , [ ...listFieldsBlocks , ...listGroupsBlocks ] , false ) ;
126
132
} else if ( exisingTags && exisingTags . length > 0 ) {
127
133
// Update existing innerBlocks with if new fields are added to the list or removed from the list.
128
- const newFormFields = data ?. merge_fields ?. filter (
129
- ( field ) => ! exisingTags . includes ( field . tag ) ,
130
- ) ;
134
+ const newFormFields =
135
+ data ?. merge_fields ?. filter ( ( field ) => ! exisingTags . includes ( field . tag ) ) ||
136
+ [ ] ;
137
+ const newFormGroups =
138
+ data ?. interest_groups ?. filter (
139
+ ( group ) => ! exisingGroups . includes ( group . id ) ,
140
+ ) || [ ] ;
131
141
const updatedInnerBlocks = innerBlocks . filter ( ( block ) => {
132
- const { tag } = block . attributes ;
133
- return data ?. merge_fields ?. find ( ( field ) => field . tag === tag ) ;
142
+ const { tag, id } = block . attributes ;
143
+ if ( tag ) {
144
+ return data ?. merge_fields ?. find ( ( field ) => field . tag === tag ) ;
145
+ }
146
+ return data ?. interest_groups ?. find ( ( group ) => group . id === id ) ;
134
147
} ) ;
148
+
135
149
if (
136
150
newFormFields . length > 0 ||
151
+ newFormGroups . length > 0 ||
137
152
updatedInnerBlocks . length !== innerBlocks . length
138
153
) {
154
+ // Create new blocks for newly added fields and groups.
139
155
const newBlocks = newFormFields . map ( ( field ) =>
140
156
createBlock ( 'mailchimp/mailchimp-form-field' , {
141
157
tag : field . tag ,
@@ -147,7 +163,22 @@ export const BlockEdit = (props) => {
147
163
field . public ,
148
164
} ) ,
149
165
) ;
150
- replaceInnerBlocks ( clientId , [ ...updatedInnerBlocks , ...newBlocks ] , false ) ;
166
+ const newGroupBlocks = newFormGroups . map ( ( group ) =>
167
+ createBlock ( 'mailchimp/mailchimp-audience-group' , {
168
+ id : group . id ,
169
+ label : group . title ,
170
+ visible :
171
+ interest_groups_visibility ?. [ group . id ] === 'on' &&
172
+ group . type !== 'hidden' ,
173
+ } ) ,
174
+ ) ;
175
+
176
+ // Replace innerBlocks with updated ones.
177
+ replaceInnerBlocks (
178
+ clientId ,
179
+ [ ...updatedInnerBlocks , ...newBlocks , ...newGroupBlocks ] ,
180
+ false ,
181
+ ) ;
151
182
}
152
183
}
153
184
@@ -157,10 +188,17 @@ export const BlockEdit = (props) => {
157
188
if ( ! window . mailchimpListData ) {
158
189
window . mailchimpListData = { } ;
159
190
}
160
- window . mailchimpListData [ listId ] = data ?. merge_fields ?. reduce ( ( acc , field ) => {
161
- acc [ field . tag ] = field ;
162
- return acc ;
163
- } , { } ) ;
191
+ const mergeFields =
192
+ data ?. merge_fields ?. reduce ( ( acc , field ) => {
193
+ acc [ field . tag ] = field ;
194
+ return acc ;
195
+ } , { } ) || { } ;
196
+ const interestGroups =
197
+ data ?. interest_groups ?. reduce ( ( acc , group ) => {
198
+ acc [ group . id ] = group ;
199
+ return acc ;
200
+ } , { } ) || { } ;
201
+ window . mailchimpListData [ listId ] = { mergeFields, interestGroups } ;
164
202
setIsLoading ( false ) ;
165
203
} )
166
204
. catch ( ( error ) => {
@@ -226,16 +264,28 @@ export const BlockEdit = (props) => {
226
264
}
227
265
228
266
// Create a template for innerBlocks based on list data and visibility settings.
229
- const template = listData ?. merge_fields ?. map ( ( field ) => [
230
- 'mailchimp/mailchimp-form-field' ,
231
- {
232
- tag : field . tag ,
233
- label : field . name ,
234
- type : field . type ,
235
- visible :
236
- ( field . required || merge_fields_visibility ?. [ field . tag ] === 'on' ) && field . public ,
237
- } ,
238
- ] ) ;
267
+ const templateFields =
268
+ listData ?. merge_fields ?. map ( ( field ) => [
269
+ 'mailchimp/mailchimp-form-field' ,
270
+ {
271
+ tag : field . tag ,
272
+ label : field . name ,
273
+ type : field . type ,
274
+ visible :
275
+ ( field . required || merge_fields_visibility ?. [ field . tag ] === 'on' ) &&
276
+ field . public ,
277
+ } ,
278
+ ] ) || [ ] ;
279
+ const templateGroups =
280
+ listData ?. interest_groups ?. map ( ( group ) => [
281
+ 'mailchimp/mailchimp-audience-group' ,
282
+ {
283
+ id : group . id ,
284
+ label : group . title ,
285
+ visible : interest_groups_visibility ?. [ group . id ] === 'on' && group . type !== 'hidden' ,
286
+ } ,
287
+ ] ) || [ ] ;
288
+ const template = [ ...templateFields , ...templateGroups ] ;
239
289
240
290
return (
241
291
< >
@@ -280,12 +330,6 @@ export const BlockEdit = (props) => {
280
330
template = { template }
281
331
templateLock = "insert"
282
332
/>
283
- < Disabled >
284
- < InterestGroups
285
- listData = { listData }
286
- visibility = { interest_groups_visibility }
287
- />
288
- </ Disabled >
289
333
{ show_required_indicator && (
290
334
< div id = "mc-indicates-required" >
291
335
< RichText
@@ -345,28 +389,6 @@ export const BlockEdit = (props) => {
345
389
) }
346
390
__nextHasNoMarginBottom
347
391
/>
348
- { listData ?. interest_groups ?. length > 0 && (
349
- < div style = { { marginTop : '20px' } } >
350
- < h3 > { __ ( 'Groups Settings' , 'mailchimp' ) } </ h3 >
351
- { listData ?. interest_groups ?. map ( ( group ) => (
352
- < ToggleControl
353
- key = { group . id }
354
- label = { group . title }
355
- className = "mailchimp-interest-groups"
356
- checked = { interest_groups_visibility ?. [ group . id ] === 'on' }
357
- onChange = { ( checked ) => {
358
- setAttributes ( {
359
- interest_groups_visibility : {
360
- ...interest_groups_visibility ,
361
- [ group . id ] : checked ? 'on' : 'off' ,
362
- } ,
363
- } ) ;
364
- } }
365
- __nextHasNoMarginBottom
366
- />
367
- ) ) }
368
- </ div >
369
- ) }
370
392
</ PanelBody >
371
393
< PanelBody title = { __ ( 'Form Settings' , 'mailchimp' ) } initialOpen = { false } >
372
394
< ToggleControl
0 commit comments