diff --git a/assets/js/src/form_editor/store/map_form_data_after_loading.jsx b/assets/js/src/form_editor/store/map_form_data_after_loading.jsx index ae6bd5aa74..8b3479c4c0 100644 --- a/assets/js/src/form_editor/store/map_form_data_after_loading.jsx +++ b/assets/js/src/form_editor/store/map_form_data_after_loading.jsx @@ -1,3 +1,4 @@ +/* eslint-disable camelcase */ import asNum from './server_value_as_num'; import * as defaults from './defaults'; @@ -6,28 +7,74 @@ export default function mapFormDataAfterLoading(data) { ...data, settings: { ...data.settings, - placeFormBellowAllPages: data.settings.place_form_bellow_all_pages === '1', - placeFormBellowAllPosts: data.settings.place_form_bellow_all_posts === '1', - placementBellowAllPostsEnabled: data.settings.form_placement_bellow_posts_enabled === '1', - placePopupFormOnAllPages: data.settings.place_popup_form_on_all_pages === '1', - placePopupFormOnAllPosts: data.settings.place_popup_form_on_all_posts === '1', - placementPopupEnabled: data.settings.form_placement_popup_enabled === '1', - popupFormDelay: data.settings.popup_form_delay !== undefined - ? asNum(data.settings.popup_form_delay) : defaults.popupForm.formDelay, - placeFixedBarFormOnAllPages: data.settings.place_fixed_bar_form_on_all_pages === '1', - placeFixedBarFormOnAllPosts: data.settings.place_fixed_bar_form_on_all_posts === '1', - placementFixedBarEnabled: data.settings.form_placement_fixed_bar_enabled === '1', - fixedBarFormDelay: data.settings.fixed_bar_form_delay !== undefined - ? asNum(data.settings.fixed_bar_form_delay) - : defaults.fixedBarForm.formDelay, - fixedBarFormPosition: data.settings.fixed_bar_form_position ?? defaults.fixedBarForm.position, - placeSlideInFormOnAllPages: data.settings.place_slide_in_form_on_all_pages === '1', - placeSlideInFormOnAllPosts: data.settings.place_slide_in_form_on_all_posts === '1', - placementSlideInEnabled: data.settings.form_placement_slide_in_enabled === '1', - slideInFormDelay: data.settings.slide_in_form_delay !== undefined - ? asNum(data.settings.slide_in_form_delay) - : defaults.slideInForm.formDelay, - slideInFormPosition: data.settings.slide_in_form_position ?? defaults.slideInForm.position, + formPlacement: { + popup: { + enabled: data.settings.form_placement?.popup?.enabled === '1', + delay: data.settings.form_placement?.popup?.delay !== undefined + ? asNum(data.settings.form_placement?.popup?.delay) + : defaults.popupForm.formDelay, + styles: { ...defaults.popupForm.styles, ...data.settings.form_placement?.popup?.styles }, + posts: { + all: data.settings.form_placement?.popup?.posts?.all === '1', + }, + pages: { + all: data.settings.form_placement?.popup?.pages?.all === '1', + }, + }, + fixedBar: { + enabled: data.settings.form_placement?.fixed_bar?.enabled === '1', + delay: data.settings.form_placement?.fixed_bar?.delay !== undefined + ? asNum(data.settings.form_placement?.fixed_bar?.delay) + : defaults.fixedBarForm.formDelay, + styles: { + ...defaults.fixedBarForm.styles, + ...data.settings.form_placement?.fixed_bar?.styles, + }, + position: data.settings.form_placement?.fixed_bar?.position + ?? defaults.fixedBarForm.position, + posts: { + all: data.settings.form_placement?.fixed_bar?.posts?.all === '1', + }, + pages: { + all: data.settings.form_placement?.fixed_bar?.pages?.all === '1', + }, + }, + belowPosts: { + enabled: data.settings.form_placement?.below_posts?.enabled === '1', + styles: { + ...defaults.belowPostForm.styles, + ...data.settings.form_placement?.below_posts?.styles, + }, + posts: { + all: data.settings.form_placement?.below_posts?.posts?.all === '1', + }, + pages: { + all: data.settings.form_placement?.below_posts?.pages?.all === '1', + }, + }, + slideIn: { + enabled: data.settings.form_placement?.slide_in?.enabled === '1', + delay: data.settings.form_placement?.slide_in?.delay !== undefined + ? asNum(data.settings.form_placement?.slide_in?.delay) + : defaults.slideInForm.formDelay, + position: data.settings.form_placement?.slide_in?.position + ?? defaults.slideInForm.position, + styles: { + ...defaults.slideInForm.styles, + ...data.settings.form_placement?.slide_in?.styles, + }, + posts: { + all: data.settings.form_placement?.slide_in?.posts?.all === '1', + }, + pages: { + all: data.settings.form_placement?.slide_in?.pages?.all === '1', + }, + }, + others: { + styles: { ...defaults.otherForm.styles, ...data.settings.form_placement?.others?.styles }, + }, + }, + alignment: data.settings.alignment ?? defaults.formStyles.alignment, borderRadius: data.settings.border_radius !== undefined ? asNum(data.settings.border_radius) @@ -48,19 +95,25 @@ export default function mapFormDataAfterLoading(data) { backgroundImageUrl: data.settings.background_image_url, backgroundImageDisplay: data.settings.background_image_display, closeButton: data.settings.close_button ?? defaults.formStyles.closeButton, - belowPostStyles: { ...defaults.belowPostForm.styles, ...data.settings.below_post_styles }, - slideInStyles: { ...defaults.slideInForm.styles, ...data.settings.slide_in_styles }, - fixedBarStyles: { ...defaults.fixedBarForm.styles, ...data.settings.fixed_bar_styles }, - popupStyles: { ...defaults.popupForm.styles, ...data.settings.popup_styles }, - otherStyles: { ...defaults.otherForm.styles, ...data.settings.other_styles }, + }, }; - mapped.settings.belowPostStyles.width.value = asNum(mapped.settings.belowPostStyles.width.value); - mapped.settings.slideInStyles.width.value = asNum(mapped.settings.slideInStyles.width.value); - mapped.settings.fixedBarStyles.width.value = asNum(mapped.settings.fixedBarStyles.width.value); - mapped.settings.popupStyles.width.value = asNum(mapped.settings.popupStyles.width.value); - mapped.settings.otherStyles.width.value = asNum(mapped.settings.otherStyles.width.value); + mapped.settings.formPlacement.belowPosts.styles.width.value = asNum( + mapped.settings.formPlacement.belowPosts.styles.width.value + ); + mapped.settings.formPlacement.slideIn.styles.width.value = asNum( + mapped.settings.formPlacement.slideIn.styles.width.value + ); + mapped.settings.formPlacement.fixedBar.styles.width.value = asNum( + mapped.settings.formPlacement.fixedBar.styles.width.value + ); + mapped.settings.formPlacement.popup.styles.width.value = asNum( + mapped.settings.formPlacement.popup.styles.width.value + ); + mapped.settings.formPlacement.others.styles.width.value = asNum( + mapped.settings.formPlacement.others.styles.width.value + ); return mapped; } diff --git a/tests/javascript/form_editor/store/map_form_data_after_loading.spec.js b/tests/javascript/form_editor/store/map_form_data_after_loading.spec.js index a8136624bb..cbfefc02e9 100644 --- a/tests/javascript/form_editor/store/map_form_data_after_loading.spec.js +++ b/tests/javascript/form_editor/store/map_form_data_after_loading.spec.js @@ -10,9 +10,17 @@ const data = { success_message: 'Check your inbox or spam folder to confirm your subscription.', success_page: '5', segments_selected_by: 'admin', - place_form_bellow_all_pages: '1', - place_form_bellow_all_posts: '', - form_placement_bellow_posts_enabled: '1', + form_placement: { + below_posts: { + enabled: '1', + posts: { + all: '', + }, + pages: { + all: '1', + }, + }, + }, }, styles: 'styles definition', created_at: '2020-01-15 07:39:15', @@ -56,9 +64,21 @@ describe('Form Data Load Mapper', () => { }); it('Maps placement', () => { - expect(map(data).settings).to.have.property('placeFormBellowAllPages', true); - expect(map(data).settings).to.have.property('placeFormBellowAllPosts', false); - expect(map(data).settings).to.have.property('placementBellowAllPostsEnabled', true); + const result = map(data).settings; + expect(result) + .to.have.property('formPlacement') + .that.is.an('object') + .that.have.property('belowPosts') + .that.is.an('object'); + expect(result.formPlacement.belowPosts).to.have.property('enabled', true); + expect(result.formPlacement.belowPosts) + .to.have.property('posts') + .that.is.an('object') + .that.have.property('all', false); + expect(result.formPlacement.belowPosts) + .to.have.property('pages') + .that.is.an('object') + .that.have.property('all', true); }); it('Sets default form styles', () => { @@ -83,19 +103,19 @@ describe('Form Data Load Mapper', () => { }); it('Sets default placements styles', () => { - expect(map(data).settings).to.have.property('belowPostStyles').that.deep.eq({ width: { unit: 'percent', value: 100 } }); - expect(map(data).settings).to.have.property('popupStyles').that.deep.eq({ width: { unit: 'pixel', value: 560 } }); - expect(map(data).settings).to.have.property('fixedBarStyles').that.deep.eq({ width: { unit: 'percent', value: 100 } }); - expect(map(data).settings).to.have.property('slideInStyles').that.deep.eq({ width: { unit: 'pixel', value: 560 } }); - expect(map(data).settings).to.have.property('otherStyles').that.deep.eq({ width: { unit: 'percent', value: 100 } }); + expect(map(data).settings.formPlacement.belowPosts).to.have.property('styles').that.deep.eq({ width: { unit: 'percent', value: 100 } }); + expect(map(data).settings.formPlacement.popup).to.have.property('styles').that.deep.eq({ width: { unit: 'pixel', value: 560 } }); + expect(map(data).settings.formPlacement.fixedBar).to.have.property('styles').that.deep.eq({ width: { unit: 'percent', value: 100 } }); + expect(map(data).settings.formPlacement.slideIn).to.have.property('styles').that.deep.eq({ width: { unit: 'pixel', value: 560 } }); + expect(map(data).settings.formPlacement.others).to.have.property('styles').that.deep.eq({ width: { unit: 'percent', value: 100 } }); }); it('Sets default delays and positions', () => { - expect(map(data).settings).to.have.property('popupFormDelay').eq(15); - expect(map(data).settings).to.have.property('fixedBarFormDelay').eq(15); - expect(map(data).settings).to.have.property('slideInFormDelay').eq(15); - expect(map(data).settings).to.have.property('slideInFormPosition').eq('right'); - expect(map(data).settings).to.have.property('fixedBarFormPosition').eq('top'); + expect(map(data).settings.formPlacement.popup).to.have.property('delay').eq(15); + expect(map(data).settings.formPlacement.fixedBar).to.have.property('delay').eq(15); + expect(map(data).settings.formPlacement.slideIn).to.have.property('delay').eq(15); + expect(map(data).settings.formPlacement.slideIn).to.have.property('position').eq('right'); + expect(map(data).settings.formPlacement.fixedBar).to.have.property('position').eq('top'); }); it('Keeps set placement styles', () => { @@ -103,18 +123,20 @@ describe('Form Data Load Mapper', () => { ...data, settings: { ...data.settings, - below_post_styles: { width: { unit: 'percent', value: 101 } }, - popup_styles: { width: { unit: 'percent', value: 102 } }, - fixed_bar_styles: { width: { unit: 'percent', value: 103 } }, - slide_in_styles: { width: { unit: 'percent', value: 104 } }, - other_styles: { width: { unit: 'percent', value: 105 } }, + form_placement: { + below_posts: { styles: { width: { unit: 'percent', value: 101 } } }, + popup: { styles: { width: { unit: 'percent', value: 102 } } }, + fixed_bar: { styles: { width: { unit: 'percent', value: 103 } } }, + slide_in: { styles: { width: { unit: 'percent', value: 104 } } }, + others: { styles: { width: { unit: 'percent', value: 105 } } }, + }, }, }; - expect(map(mapData).settings).to.have.property('belowPostStyles').that.deep.eq({ width: { unit: 'percent', value: 101 } }); - expect(map(mapData).settings).to.have.property('popupStyles').that.deep.eq({ width: { unit: 'percent', value: 102 } }); - expect(map(mapData).settings).to.have.property('fixedBarStyles').that.deep.eq({ width: { unit: 'percent', value: 103 } }); - expect(map(mapData).settings).to.have.property('slideInStyles').that.deep.eq({ width: { unit: 'percent', value: 104 } }); - expect(map(mapData).settings).to.have.property('otherStyles').that.deep.eq({ width: { unit: 'percent', value: 105 } }); + expect(map(mapData).settings.formPlacement.belowPosts).to.have.property('styles').that.deep.eq({ width: { unit: 'percent', value: 101 } }); + expect(map(mapData).settings.formPlacement.popup).to.have.property('styles').that.deep.eq({ width: { unit: 'percent', value: 102 } }); + expect(map(mapData).settings.formPlacement.fixedBar).to.have.property('styles').that.deep.eq({ width: { unit: 'percent', value: 103 } }); + expect(map(mapData).settings.formPlacement.slideIn).to.have.property('styles').that.deep.eq({ width: { unit: 'percent', value: 104 } }); + expect(map(mapData).settings.formPlacement.others).to.have.property('styles').that.deep.eq({ width: { unit: 'percent', value: 105 } }); }); }); });