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

Add mapping of block styles attribute to API data format

Browse Source 
[MAILPOET-2599]
This commit is contained in:
Rostislav Wolny
2020-03-03 17:26:31 +01:00
committed by Veljko V
parent 251c9ffd38
commit e6ceb97b18
5 changed files with 86 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/js/src/form_editor/store/blocks_to_form_body.jsx
View File

@@ -1,5 +1,16 @@
import { has } from 'lodash';
const mapBlockStyles = (styles) => {
const mappedStyles = {
full_width: styles.fullWidth ? '1' : '0',
};
if (styles.inheritFromTheme) {
return mappedStyles;
}
mappedStyles.bold = styles.bold ? '1' : '0';
return mappedStyles;
};
const mapCustomField = (block, customFields, mappedCommonProperties) => {
const customField = customFields.find((cf) => cf.id === block.attributes.customFieldId);
if (!customField) return null;
@@ -13,9 +24,11 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => {
}
if (block.name.startsWith('mailpoet-form/custom-text')) {
mapped.type = 'text';
mapped.styles = mapBlockStyles(block.attributes.styles);
}
if (block.name.startsWith('mailpoet-form/custom-textarea')) {
mapped.type = 'textarea';
mapped.styles = mapBlockStyles(block.attributes.styles);
}
if (block.name.startsWith('mailpoet-form/custom-radio')) {
mapped.type = 'radio';
@@ -74,6 +87,9 @@ export const mapColorSlugToValue = (colorDefinitions, colorSlug, colorValue = nu
* @param customFields - list of all custom Fields
*/
export const blocksToFormBodyFactory = (colorDefinitions, customFields = []) => {
if (!Array.isArray(customFields)) {
throw new Error('Mapper expects customFields to be an array.');
}
/**
* @param blocks
* @param parent - parent block of nested block
@@ -83,9 +99,6 @@ export const blocksToFormBodyFactory = (colorDefinitions, customFields = []) =>
if (!Array.isArray(blocks)) {
throw new Error('Mapper expects blocks to be an array.');
}
if (!Array.isArray(customFields)) {
throw new Error('Mapper expects customFields to be an array.');
}
return blocks.map((block) => {
const mapped = {
@@ -158,18 +171,21 @@ export const blocksToFormBodyFactory = (colorDefinitions, customFields = []) =>
...mapped.params,
required: '1',
},
styles: mapBlockStyles(block.attributes.styles),
};
case 'mailpoet-form/first-name-input':
return {
...mapped,
id: 'first_name',
name: 'First name',
styles: mapBlockStyles(block.attributes.styles),
};
case 'mailpoet-form/last-name-input':
return {
...mapped,
id: 'last_name',
name: 'Last name',
styles: mapBlockStyles(block.attributes.styles),
};
case 'mailpoet-form/segment-select':
return {

15
assets/js/src/form_editor/store/form_body_to_blocks.jsx
View File

@@ -167,7 +167,10 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
return {
...mapped,
name: 'mailpoet-form/email-input',
styles: backwardCompatibleBlockStyles,
attributes: {
...mapped.attributes,
styles: backwardCompatibleBlockStyles,
},
};
case 'heading':
if (item.params && has(item.params, 'level')) {
@@ -192,13 +195,19 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
return {
...mapped,
name: 'mailpoet-form/first-name-input',
styles: backwardCompatibleBlockStyles,
attributes: {
...mapped.attributes,
styles: backwardCompatibleBlockStyles,
},
};
case 'last_name':
return {
...mapped,
name: 'mailpoet-form/last-name-input',
styles: backwardCompatibleBlockStyles,
attributes: {
...mapped.attributes,
styles: backwardCompatibleBlockStyles,
},
};
case 'segments':
if (

16
tests/javascript/form_editor/store/block_to_form_test_data.js
View File

@@ -6,6 +6,10 @@ export const emailBlock = {
attributes: {
label: 'Email Address',
labelWithinInput: false,
styles: {
fullWidth: false,
inheritFromTheme: true,
},
},
};
@@ -45,6 +49,10 @@ export const firstNameBlock = {
label: 'First Name',
labelWithinInput: false,
mandatory: false,
styles: {
fullWidth: false,
inheritFromTheme: true,
},
},
};
@@ -57,6 +65,10 @@ export const lastNameBlock = {
label: 'Last Name',
labelWithinInput: false,
mandatory: false,
styles: {
fullWidth: false,
inheritFromTheme: true,
},
},
};
@@ -71,6 +83,10 @@ export const customTextBlock = {
mandatory: false,
validate: 'alphanum',
customFieldId: 1,
styles: {
fullWidth: false,
inheritFromTheme: true,
},
},
};

36
tests/javascript/form_editor/store/blocks_to_form_body.spec.js
View File

@@ -63,6 +63,42 @@ describe('Blocks to Form Body', () => {
expect(input.params.label_within).to.be.equal('1');
});
it('Should map input block styles', () => {
const blockWithThemeStyles = {
...emailBlock,
attributes: {
...emailBlock.attributes,
styles: {
fullWidth: true,
inheritFromTheme: true,
bold: true,
},
},
};
const blockWithCustomStyles = {
...firstNameBlock,
attributes: {
...firstNameBlock.attributes,
styles: {
fullWidth: false,
inheritFromTheme: false,
bold: true,
},
},
};
const [
inputWithThemeStyles,
inputWithCustomStyles,
] = formBlocksToBody([blockWithThemeStyles, blockWithCustomStyles]);
expect(inputWithThemeStyles.styles).to.eql({
full_width: '1',
});
expect(inputWithCustomStyles.styles).to.eql({
full_width: '0',
bold: '1',
});
});
it('Should map last name block to input data', () => {
const [input] = formBlocksToBody([lastNameBlock]);
checkBodyInputBasics(input);

5
tests/javascript/form_editor/store/form_body_to_blocks.spec.js
View File

@@ -92,13 +92,14 @@ describe('Form Body To Blocks', () => {
updated_at: '2019-12-10T15:05:06+00:00',
};
const [email, firstName, lastName, customText, customTextArea] = formBodyToBlocks([
const map = formBodyToBlocksFactory(colorDefinitions, [customFieldText, customFieldTextarea]);
const [email, firstName, lastName, customText, customTextArea] = map([
{ ...emailInput, position: '1' },
{ ...firstNameInput, position: '2' },
{ ...lastNameInput, position: '3' },
{ ...customTextInput, position: '4' },
{ ...customTextareaInput, position: '5', id: 2 },
], [customFieldText, customFieldTextarea]);
]);
const defaultStyles = {
fullWidth: false,
inheritFromTheme: true,