Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Map form placement data to new structure on load

Browse Source 
[MAILPOET-3072]
This commit is contained in:
Pavel Dohnal
2020-08-20 15:30:06 +02:00
committed by Veljko V
parent 9e44c557fb
commit a1b0fe5916
2 changed files with 133 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
assets/js/src/form_editor/store/map_form_data_after_loading.jsx
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import asNum from './server_value_as_num'; import asNum from './server_value_as_num';
import * as defaults from './defaults'; import * as defaults from './defaults';
@ -6,28 +7,74 @@ export default function mapFormDataAfterLoading(data) {
...data, ...data,
settings: { settings: {
...data.settings, ...data.settings,
placeFormBellowAllPages: data.settings.place_form_bellow_all_pages === '1', formPlacement: {
placeFormBellowAllPosts: data.settings.place_form_bellow_all_posts === '1', popup: {
placementBellowAllPostsEnabled: data.settings.form_placement_bellow_posts_enabled === '1', enabled: data.settings.form_placement?.popup?.enabled === '1',
placePopupFormOnAllPages: data.settings.place_popup_form_on_all_pages === '1', delay: data.settings.form_placement?.popup?.delay !== undefined
placePopupFormOnAllPosts: data.settings.place_popup_form_on_all_posts === '1', ? asNum(data.settings.form_placement?.popup?.delay)
placementPopupEnabled: data.settings.form_placement_popup_enabled === '1', : defaults.popupForm.formDelay,
popupFormDelay: data.settings.popup_form_delay !== undefined styles: { ...defaults.popupForm.styles, ...data.settings.form_placement?.popup?.styles },
? asNum(data.settings.popup_form_delay) : defaults.popupForm.formDelay, posts: {
placeFixedBarFormOnAllPages: data.settings.place_fixed_bar_form_on_all_pages === '1', all: data.settings.form_placement?.popup?.posts?.all === '1',
placeFixedBarFormOnAllPosts: data.settings.place_fixed_bar_form_on_all_posts === '1', },
placementFixedBarEnabled: data.settings.form_placement_fixed_bar_enabled === '1', pages: {
fixedBarFormDelay: data.settings.fixed_bar_form_delay !== undefined all: data.settings.form_placement?.popup?.pages?.all === '1',
? asNum(data.settings.fixed_bar_form_delay) },
: defaults.fixedBarForm.formDelay, },
fixedBarFormPosition: data.settings.fixed_bar_form_position ?? defaults.fixedBarForm.position, fixedBar: {
placeSlideInFormOnAllPages: data.settings.place_slide_in_form_on_all_pages === '1', enabled: data.settings.form_placement?.fixed_bar?.enabled === '1',
placeSlideInFormOnAllPosts: data.settings.place_slide_in_form_on_all_posts === '1', delay: data.settings.form_placement?.fixed_bar?.delay !== undefined
placementSlideInEnabled: data.settings.form_placement_slide_in_enabled === '1', ? asNum(data.settings.form_placement?.fixed_bar?.delay)
slideInFormDelay: data.settings.slide_in_form_delay !== undefined : defaults.fixedBarForm.formDelay,
? asNum(data.settings.slide_in_form_delay) styles: {
: defaults.slideInForm.formDelay, ...defaults.fixedBarForm.styles,
slideInFormPosition: data.settings.slide_in_form_position ?? defaults.slideInForm.position, ...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, alignment: data.settings.alignment ?? defaults.formStyles.alignment,
borderRadius: data.settings.border_radius !== undefined borderRadius: data.settings.border_radius !== undefined
? asNum(data.settings.border_radius) ? asNum(data.settings.border_radius)
@ -48,19 +95,25 @@ export default function mapFormDataAfterLoading(data) {
backgroundImageUrl: data.settings.background_image_url, backgroundImageUrl: data.settings.background_image_url,
backgroundImageDisplay: data.settings.background_image_display, backgroundImageDisplay: data.settings.background_image_display,
closeButton: data.settings.close_button ?? defaults.formStyles.closeButton, 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.formPlacement.belowPosts.styles.width.value = asNum(
mapped.settings.slideInStyles.width.value = asNum(mapped.settings.slideInStyles.width.value); mapped.settings.formPlacement.belowPosts.styles.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.formPlacement.slideIn.styles.width.value = asNum(
mapped.settings.otherStyles.width.value = asNum(mapped.settings.otherStyles.width.value); 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; return mapped;
} }

74
tests/javascript/form_editor/store/map_form_data_after_loading.spec.js
View File

@ -10,9 +10,17 @@ const data = {
success_message: 'Check your inbox or spam folder to confirm your subscription.', success_message: 'Check your inbox or spam folder to confirm your subscription.',
success_page: '5', success_page: '5',
segments_selected_by: 'admin', segments_selected_by: 'admin',
place_form_bellow_all_pages: '1', form_placement: {
place_form_bellow_all_posts: '', below_posts: {
form_placement_bellow_posts_enabled: '1', enabled: '1',
posts: {
all: '',
},
pages: {
all: '1',
},
},
},
}, },
styles: 'styles definition', styles: 'styles definition',
created_at: '2020-01-15 07:39:15', created_at: '2020-01-15 07:39:15',
@ -56,9 +64,21 @@ describe('Form Data Load Mapper', () => {
}); });
it('Maps placement', () => { it('Maps placement', () => {
expect(map(data).settings).to.have.property('placeFormBellowAllPages', true); const result = map(data).settings;
expect(map(data).settings).to.have.property('placeFormBellowAllPosts', false); expect(result)
expect(map(data).settings).to.have.property('placementBellowAllPostsEnabled', true); .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', () => { it('Sets default form styles', () => {
@ -83,19 +103,19 @@ describe('Form Data Load Mapper', () => {
}); });
it('Sets default placements styles', () => { 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.formPlacement.belowPosts).to.have.property('styles').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.formPlacement.popup).to.have.property('styles').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.formPlacement.fixedBar).to.have.property('styles').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.formPlacement.slideIn).to.have.property('styles').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.others).to.have.property('styles').that.deep.eq({ width: { unit: 'percent', value: 100 } });
}); });
it('Sets default delays and positions', () => { it('Sets default delays and positions', () => {
expect(map(data).settings).to.have.property('popupFormDelay').eq(15); expect(map(data).settings.formPlacement.popup).to.have.property('delay').eq(15);
expect(map(data).settings).to.have.property('fixedBarFormDelay').eq(15); expect(map(data).settings.formPlacement.fixedBar).to.have.property('delay').eq(15);
expect(map(data).settings).to.have.property('slideInFormDelay').eq(15); expect(map(data).settings.formPlacement.slideIn).to.have.property('delay').eq(15);
expect(map(data).settings).to.have.property('slideInFormPosition').eq('right'); expect(map(data).settings.formPlacement.slideIn).to.have.property('position').eq('right');
expect(map(data).settings).to.have.property('fixedBarFormPosition').eq('top'); expect(map(data).settings.formPlacement.fixedBar).to.have.property('position').eq('top');
}); });
it('Keeps set placement styles', () => { it('Keeps set placement styles', () => {
@ -103,18 +123,20 @@ describe('Form Data Load Mapper', () => {
...data, ...data,
settings: { settings: {
...data.settings, ...data.settings,
below_post_styles: { width: { unit: 'percent', value: 101 } }, form_placement: {
popup_styles: { width: { unit: 'percent', value: 102 } }, below_posts: { styles: { width: { unit: 'percent', value: 101 } } },
fixed_bar_styles: { width: { unit: 'percent', value: 103 } }, popup: { styles: { width: { unit: 'percent', value: 102 } } },
slide_in_styles: { width: { unit: 'percent', value: 104 } }, fixed_bar: { styles: { width: { unit: 'percent', value: 103 } } },
other_styles: { width: { unit: 'percent', value: 105 } }, 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.formPlacement.belowPosts).to.have.property('styles').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.formPlacement.popup).to.have.property('styles').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.formPlacement.fixedBar).to.have.property('styles').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.formPlacement.slideIn).to.have.property('styles').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.others).to.have.property('styles').that.deep.eq({ width: { unit: 'percent', value: 105 } });
}); });
}); });
}); });