fix(SFT-2597): property editor not saving option based field values correctly

packages/builder/src/components/Composer/FieldTypes/CheckboxGroup.jsx

@@ -20,6 +20,7 @@ export default class CheckboxGroup extends HtmlInput {
       required: PropTypes.bool.isRequired,
       oneLine: PropTypes.bool,
       options: PropTypes.array,
+      value: PropTypes.string,
       values: PropTypes.array,
       source: PropTypes.string,
     }).isRequired,

packages/builder/src/components/Composer/FieldTypes/MultipleSelect.jsx

@@ -18,6 +18,7 @@ export default class Select extends HtmlInput {
       label: PropTypes.string.isRequired,
       required: PropTypes.bool.isRequired,
       options: PropTypes.array.isRequired,
+      value: PropTypes.string,
       values: PropTypes.array,
     }).isRequired,
     isFetchingOptions: PropTypes.bool.isRequired,

packages/builder/src/components/Composer/FieldTypes/RadioGroup.jsx

@@ -19,7 +19,8 @@ export default class RadioGroup extends HtmlInput {
       label: PropTypes.node.isRequired,
       required: PropTypes.bool.isRequired,
       options: PropTypes.array,
-      value: PropTypes.node,
+      value: PropTypes.string,
+      values: PropTypes.array,
     }).isRequired,
     isFetchingOptions: PropTypes.bool.isRequired,
   };

packages/builder/src/components/Composer/FieldTypes/Select.jsx

@@ -18,7 +18,8 @@ export default class Select extends HtmlInput {
       label: PropTypes.string.isRequired,
       required: PropTypes.bool.isRequired,
       options: PropTypes.array.isRequired,
-      value: PropTypes.node,
+      value: PropTypes.string,
+      values: PropTypes.array,
     }).isRequired,
     isFetchingOptions: PropTypes.bool.isRequired,
   };

packages/builder/src/components/PropertyEditor/CheckboxGroup.jsx

@@ -18,6 +18,7 @@ export default class CheckboxGroup extends BasePropertyEditor {
       required: PropTypes.bool.isRequired,
       showCustomValues: PropTypes.bool.isRequired,
       oneLine: PropTypes.bool,
+      value: PropTypes.string,
       values: PropTypes.array,
       options: PropTypes.array.isRequired,
       source: PropTypes.string,
@@ -70,6 +71,8 @@ export default class CheckboxGroup extends BasePropertyEditor {
         <hr />
 
         <ExternalOptionsProperty
+          showEmptyOptionInput={true}
+          value={''}
           values={values}
           customOptions={options}
           showCustomValues={showCustomValues}

packages/builder/src/components/PropertyEditor/Components/OptionTable/OptionTable.jsx

@@ -63,7 +63,7 @@ export default class OptionTable extends Component {
     let showCustomValueToggler = true;
     if (showCustomValues === undefined) {
       showCustomValues = true;
-      showCustomValueToggler = false;
+      showCustomValueToggler = true;
     }
 
     return (

packages/builder/src/components/PropertyEditor/Confirmation.jsx

@@ -6,7 +6,6 @@ import * as FieldTypes from '../../constants/FieldTypes';
 import BasePropertyEditor from './BasePropertyEditor';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import SelectProperty from './PropertyItems/SelectProperty';
 import TextareaProperty from './PropertyItems/TextareaProperty';
 import TextProperty from './PropertyItems/TextProperty';

packages/builder/src/components/PropertyEditor/DynamicRecipients.jsx

@@ -6,12 +6,9 @@ import * as ExternalOptions from '../../constants/ExternalOptions';
 import PropertyHelper from '../../helpers/PropertyHelper';
 import BasePropertyEditor from './BasePropertyEditor';
 import AddNewNotification from './Components/AddNewNotification';
-import OptionTable from './Components/OptionTable/OptionTable';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
-import CustomProperty from './PropertyItems/CustomProperty';
 import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
-import RadioProperty from './PropertyItems/RadioProperty';
 import SelectProperty from './PropertyItems/SelectProperty';
 import TextareaProperty from './PropertyItems/TextareaProperty';
 import TextProperty from './PropertyItems/TextProperty';
@@ -33,8 +30,10 @@ export default class DynamicRecipients extends BasePropertyEditor {
       handle: PropTypes.string.isRequired,
       label: PropTypes.string.isRequired,
       required: PropTypes.bool,
-      value: PropTypes.node,
-      options: PropTypes.array,
+      showCustomValues: PropTypes.bool,
+      value: PropTypes.string,
+      values: PropTypes.array,
+      options: PropTypes.array.isRequired,
       notificationId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
       oneLine: PropTypes.bool,
       showAsRadio: PropTypes.bool,
@@ -63,6 +62,7 @@ export default class DynamicRecipients extends BasePropertyEditor {
       showAsCheckboxes,
       notificationId,
       instructions,
+      showCustomValues,
     } = properties;
     const { source, target, configuration = {} } = properties;
 
@@ -152,9 +152,10 @@ export default class DynamicRecipients extends BasePropertyEditor {
 
         <ExternalOptionsProperty
           showEmptyOptionInput={true}
+          value={''}
           values={values}
           customOptions={options}
-          showCustomValues={true}
+          showCustomValues={showCustomValues}
           source={source}
           target={target}
           configuration={configuration}

packages/builder/src/components/PropertyEditor/Email.jsx

@@ -7,7 +7,6 @@ import BasePropertyEditor from './BasePropertyEditor';
 import AddNewNotification from './Components/AddNewNotification';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import SelectProperty from './PropertyItems/SelectProperty';
 import TextareaProperty from './PropertyItems/TextareaProperty';
 import TextProperty from './PropertyItems/TextProperty';

packages/builder/src/components/PropertyEditor/Hidden.jsx

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import BasePropertyEditor from './BasePropertyEditor';
-import { AttributeEditorProperty } from './PropertyItems';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import TextProperty from './PropertyItems/TextProperty';
 
 export default class Hidden extends BasePropertyEditor {

packages/builder/src/components/PropertyEditor/Invisible.jsx

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import BasePropertyEditor from './BasePropertyEditor';
-import { AttributeEditorProperty } from './PropertyItems';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import TextProperty from './PropertyItems/TextProperty';
 
 export default class Invisible extends BasePropertyEditor {

packages/builder/src/components/PropertyEditor/MailingList.jsx

@@ -9,7 +9,6 @@ import IntegrationMappingTable from './Components/IntegrationMappingTable/Integr
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
 import CustomProperty from './PropertyItems/CustomProperty';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import SelectProperty from './PropertyItems/SelectProperty';
 import TextareaProperty from './PropertyItems/TextareaProperty';
 import TextProperty from './PropertyItems/TextProperty';

packages/builder/src/components/PropertyEditor/MultipleSelect.jsx

@@ -17,6 +17,7 @@ export default class MultipleSelect extends BasePropertyEditor {
       label: PropTypes.string.isRequired,
       required: PropTypes.bool.isRequired,
       showCustomValues: PropTypes.bool.isRequired,
+      value: PropTypes.string,
       values: PropTypes.array,
       options: PropTypes.array.isRequired,
       source: PropTypes.string,
@@ -69,6 +70,8 @@ export default class MultipleSelect extends BasePropertyEditor {
         <hr />
 
         <ExternalOptionsProperty
+          showEmptyOptionInput={true}
+          value={''}
           values={values}
           customOptions={options}
           showCustomValues={showCustomValues}

packages/builder/src/components/PropertyEditor/Password.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import BasePropertyEditor from './BasePropertyEditor';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import TextareaProperty from './PropertyItems/TextareaProperty';
 import TextProperty from './PropertyItems/TextProperty';
 

packages/builder/src/components/PropertyEditor/Phone.jsx

@@ -4,7 +4,6 @@ import { translate } from '../../app';
 import BasePropertyEditor from './BasePropertyEditor';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import TextareaProperty from './PropertyItems/TextareaProperty';
 import TextProperty from './PropertyItems/TextProperty';
 

packages/builder/src/components/PropertyEditor/PropertyItems/ExternalOptionsProperty.jsx

@@ -47,6 +47,8 @@ export default class ExternalOptionsProperty extends BasePropertyItem {
       valueType: PropTypes.string,
       emptyOption: PropTypes.string,
     }),
+    value: PropTypes.string,
+    values: PropTypes.array,
     showCustomValues: PropTypes.bool,
     customOptions: PropTypes.arrayOf(
       PropTypes.shape({

packages/builder/src/components/PropertyEditor/RadioGroup.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { translate } from '../../app';
 import BasePropertyEditor from './BasePropertyEditor';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
@@ -20,7 +19,8 @@ export default class RadioGroup extends BasePropertyEditor {
       showCustomValues: PropTypes.bool.isRequired,
       oneLine: PropTypes.bool,
       value: PropTypes.node,
-      options: PropTypes.array,
+      values: PropTypes.array,
+      options: PropTypes.array.isRequired,
       source: PropTypes.string,
       target: PropTypes.node,
       configuration: PropTypes.object,
@@ -78,7 +78,9 @@ export default class RadioGroup extends BasePropertyEditor {
         <hr />
 
         <ExternalOptionsProperty
+          showEmptyOptionInput={true}
           value={value}
+          values={null}
           customOptions={options}
           showCustomValues={showCustomValues}
           source={source}

packages/builder/src/components/PropertyEditor/Rating.jsx

@@ -5,7 +5,6 @@ import BasePropertyEditor from './BasePropertyEditor';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
 import ColorProperty from './PropertyItems/ColorProperty';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import SelectProperty from './PropertyItems/SelectProperty';
 import TextareaProperty from './PropertyItems/TextareaProperty';
 import TextProperty from './PropertyItems/TextProperty';

packages/builder/src/components/PropertyEditor/Regex.jsx

@@ -4,7 +4,6 @@ import { translate } from '../../app';
 import BasePropertyEditor from './BasePropertyEditor';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import TextareaProperty from './PropertyItems/TextareaProperty';
 import TextProperty from './PropertyItems/TextProperty';
 

packages/builder/src/components/PropertyEditor/Select.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { translate } from '../../app';
 import BasePropertyEditor from './BasePropertyEditor';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
@@ -18,8 +17,9 @@ export default class Select extends BasePropertyEditor {
       label: PropTypes.string.isRequired,
       required: PropTypes.bool.isRequired,
       showCustomValues: PropTypes.bool.isRequired,
-      value: PropTypes.node,
-      options: PropTypes.array,
+      value: PropTypes.string,
+      values: PropTypes.array,
+      options: PropTypes.array.isRequired,
       source: PropTypes.string,
       target: PropTypes.node,
       configuration: PropTypes.object,
@@ -70,6 +70,7 @@ export default class Select extends BasePropertyEditor {
         <ExternalOptionsProperty
           showEmptyOptionInput={true}
           value={value}
+          values={null}
           customOptions={options}
           showCustomValues={showCustomValues}
           source={source}

packages/builder/src/components/PropertyEditor/Submit.jsx

@@ -8,7 +8,6 @@ import DualPositionProperty from './Components/Submit/DualPositionProperty';
 import PositionProperty from './Components/Submit/PositionProperty';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import TextProperty from './PropertyItems/TextProperty';
 
 @connect((state) => ({

packages/builder/src/components/PropertyEditor/Textarea.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import BasePropertyEditor from './BasePropertyEditor';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import TextareaProperty from './PropertyItems/TextareaProperty';
 import TextProperty from './PropertyItems/TextProperty';
 

packages/builder/src/components/PropertyEditor/Website.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import BasePropertyEditor from './BasePropertyEditor';
 import { AttributeEditorProperty } from './PropertyItems';
 import CheckboxProperty from './PropertyItems/CheckboxProperty';
-import ExternalOptionsProperty from './PropertyItems/ExternalOptionsProperty';
 import TextareaProperty from './PropertyItems/TextareaProperty';
 import TextProperty from './PropertyItems/TextProperty';