Merge pull request #118 from glific/enhancement/consent-status

Dropdown for optin/optout status
glific · Jul 18, 2024 · f75ad3a · f75ad3a
2 parents 7a66d8b + 146784f
commit f75ad3a
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@glific/flow-editor",
   "license": "AGPL-3.0",
   "repository": "git://github.com/glific/floweditor.git",
-  "version": "1.26.3-9",
+  "version": "1.26.3-10",
   "description": "'Standalone flow editing tool designed for use within the Glific suite of messaging tools'",
   "browser": "umd/flow-editor.min.js",
   "unpkg": "umd/flow-editor.min.js",

diff --git a/src/components/flow/actions/updatecontact/UpdateContact.tsx b/src/components/flow/actions/updatecontact/UpdateContact.tsx
@@ -38,7 +38,7 @@ const UpdateContactComp: React.SFC<SetContactAttribute> = (
   action: SetContactAttribute
 ): JSX.Element => {
   if (action.type === Types.set_contact_field) {
-    return renderSetText(action.field.key, action.value, true);
+    return renderSetText(action.field.name, action.value, true);
   }
 
   if (action.type === Types.set_contact_channel) {

diff --git a/src/components/flow/actions/updatecontact/UpdateContactForm.tsx b/src/components/flow/actions/updatecontact/UpdateContactForm.tsx
@@ -53,6 +53,18 @@ export const CONTACT_STATUS_OPTIONS: SelectOption[] = [
   CONTACT_STATUS_ARCHIVED
 ];
 
+export const CONTACT_OPTIN: SelectOption = {
+  name: i18n.t('contact_settings.optin', 'Opt in'),
+  value: 'optin'
+};
+
+export const CONTACT_OPTOUT: SelectOption = {
+  name: i18n.t('contact_settings.optout', 'Opt out'),
+  value: 'optout'
+};
+
+export const CONTACT_CONSENT_OPTIONS: SelectOption[] = [CONTACT_OPTIN, CONTACT_OPTOUT];
+
 export default class UpdateContactForm extends React.Component<
   ActionFormProps,
   UpdateContactFormState
@@ -79,6 +91,7 @@ export default class UpdateContactForm extends React.Component<
       language?: Asset;
       status?: SelectOption;
       field?: Asset;
+      settings?: SelectOption;
       fieldValue?: string;
     },
     submitting = false
@@ -113,10 +126,13 @@ export default class UpdateContactForm extends React.Component<
       updates.field = { value: keys.field };
     }
 
+    if (keys.hasOwnProperty('settings')) {
+      updates.settings = { value: keys.settings, validationFailures: [] };
+    }
+
     if (keys.hasOwnProperty('fieldValue')) {
       updates.fieldValue = { value: keys.fieldValue, validationFailures: [] };
     }
-
     const updated = mergeForm(this.state, updates);
     this.setState(updated);
     return updated.valid;
@@ -172,6 +188,10 @@ export default class UpdateContactForm extends React.Component<
     return this.handleUpdate({ fieldValue, name: '' });
   }
 
+  private handleSettingsUpdate(settings: SelectOption): boolean {
+    return this.handleUpdate({ settings, name: '' });
+  }
+
   private handleNameUpdate(name: string): boolean {
     return this.handleUpdate({ name, fieldValue: '' });
   }
@@ -279,11 +299,26 @@ export default class UpdateContactForm extends React.Component<
           focus={true}
         />
       );
+    } else if (
+      this.state.type === Types.set_contact_field &&
+      this.state.field.value.key === 'settings'
+    ) {
+      return (
+        <SelectElement
+          key="contact_field_select"
+          name={i18n.t('forms.settings', 'Consent Status')}
+          entry={this.state.settings}
+          onChange={this.handleSettingsUpdate}
+          options={CONTACT_CONSENT_OPTIONS}
+        />
+      );
     } else {
       return (
         <TextInputElement
           name={i18n.t('forms.field_value', 'Field Value')}
-          placeholder={i18n.t('forms.enter_field_value', { field: this.state.field.value.label })}
+          placeholder={i18n.t('forms.enter_field_value', {
+            field: this.state.field.value.label
+          })}
           onChange={this.handleFieldValueUpdate}
           entry={this.state.fieldValue}
           autocomplete={true}

diff --git a/src/components/flow/actions/updatecontact/__snapshots__/UpdateContact.test.ts.snap b/src/components/flow/actions/updatecontact/__snapshots__/UpdateContact.test.ts.snap
@@ -7,7 +7,7 @@ exports[`UpdateContactComp render should render clearing the value 1`] = `
   <span
     className="emphasize"
   >
-    age
+    Age
   </span>
   .
 </div>
@@ -37,7 +37,7 @@ exports[`UpdateContactComp render should render set field 1`] = `
   <span
     className="emphasize"
   >
-    age
+    Age
   </span>
    to 
   <span

diff --git a/src/components/flow/actions/updatecontact/__snapshots__/UpdateContactForm.test.ts.snap b/src/components/flow/actions/updatecontact/__snapshots__/UpdateContactForm.test.ts.snap
@@ -224,6 +224,12 @@ Object {
   "name": Object {
     "value": "",
   },
+  "settings": Object {
+    "value": Object {
+      "name": "Opt in",
+      "value": "optin",
+    },
+  },
   "status": Object {
     "value": Object {
       "name": "Active",
@@ -282,6 +288,12 @@ Object {
   "name": Object {
     "value": "",
   },
+  "settings": Object {
+    "value": Object {
+      "name": "Opt in",
+      "value": "optin",
+    },
+  },
   "status": Object {
     "value": Object {
       "name": "Active",
@@ -330,6 +342,12 @@ Object {
   "name": Object {
     "value": "",
   },
+  "settings": Object {
+    "value": Object {
+      "name": "Opt in",
+      "value": "optin",
+    },
+  },
   "status": Object {
     "value": Object {
       "name": "Active",
@@ -374,6 +392,12 @@ Object {
   "name": Object {
     "value": "",
   },
+  "settings": Object {
+    "value": Object {
+      "name": "Opt in",
+      "value": "optin",
+    },
+  },
   "status": Object {
     "value": Object {
       "name": "Active",
@@ -422,6 +446,12 @@ Object {
   "name": Object {
     "value": "",
   },
+  "settings": Object {
+    "value": Object {
+      "name": "Opt in",
+      "value": "optin",
+    },
+  },
   "status": Object {
     "value": Object {
       "name": "Active",
@@ -466,6 +496,12 @@ Object {
   "name": Object {
     "value": "",
   },
+  "settings": Object {
+    "value": Object {
+      "name": "Opt in",
+      "value": "optin",
+    },
+  },
   "status": Object {
     "value": Object {
       "name": "Active",
@@ -510,6 +546,12 @@ Object {
   "name": Object {
     "value": "",
   },
+  "settings": Object {
+    "value": Object {
+      "name": "Opt in",
+      "value": "optin",
+    },
+  },
   "status": Object {
     "value": Object {
       "name": "Active",
@@ -554,6 +596,12 @@ Object {
   "name": Object {
     "value": "Rowan Seymour",
   },
+  "settings": Object {
+    "value": Object {
+      "name": "Opt in",
+      "value": "optin",
+    },
+  },
   "status": Object {
     "value": Object {
       "name": "Active",
@@ -598,6 +646,12 @@ Object {
   "name": Object {
     "value": "",
   },
+  "settings": Object {
+    "value": Object {
+      "name": "Opt in",
+      "value": "optin",
+    },
+  },
   "status": Object {
     "value": Object {
       "name": "Blocked - remove from groups, ignore forever",
@@ -646,6 +700,12 @@ Object {
   "name": Object {
     "value": "",
   },
+  "settings": Object {
+    "value": Object {
+      "name": "Opt in",
+      "value": "optin",
+    },
+  },
   "status": Object {
     "value": Object {
       "name": "Active",

diff --git a/src/components/flow/actions/updatecontact/helpers.ts b/src/components/flow/actions/updatecontact/helpers.ts
@@ -26,7 +26,9 @@ import {
 } from 'store/nodeEditor';
 import {
   CONTACT_STATUS_OPTIONS,
-  CONTACT_STATUS_ACTIVE
+  CONTACT_STATUS_ACTIVE,
+  CONTACT_OPTIN,
+  CONTACT_CONSENT_OPTIONS
 } from 'components/flow/actions/updatecontact/UpdateContactForm';
 
 export interface UpdateContactFormState extends FormState {
@@ -36,6 +38,7 @@ export interface UpdateContactFormState extends FormState {
   language: FormEntry;
   status: SelectOptionEntry;
   field: FormEntry;
+  settings: SelectOptionEntry;
   fieldValue: StringEntry;
 }
 
@@ -51,6 +54,7 @@ export const initializeForm = (
     language: { value: null },
     status: { value: CONTACT_STATUS_ACTIVE },
     field: { value: null },
+    settings: { value: CONTACT_OPTIN },
     fieldValue: { value: '' }
   };
 
@@ -64,8 +68,15 @@ export const initializeForm = (
         case Types.set_contact_field:
           const fieldAction = settings.originalAction as SetContactField;
           state.field = { value: { key: fieldAction.field.key, label: fieldAction.field.name } };
-          state.fieldValue = { value: fieldAction.value };
           state.valid = true;
+          if (fieldAction.field.key === 'settings') {
+            state.settings = {
+              value: CONTACT_CONSENT_OPTIONS.find(o => o.value === fieldAction.value)
+            };
+          } else {
+            state.fieldValue = { value: fieldAction.value };
+          }
+
           return state;
         case Types.set_contact_channel:
           const channelAction = settings.originalAction as SetContactChannel;
@@ -118,12 +129,21 @@ export const stateToAction = (
   /* istanbul ignore else */
   const field = state.field.value;
   if (state.type === Types.set_contact_field) {
-    return {
-      uuid: getActionUUID(settings, Types.set_contact_field),
-      type: state.type,
-      field: { name: field.label, key: field.key },
-      value: state.fieldValue.value
-    };
+    if (state.field.value.key === 'settings') {
+      return {
+        uuid: getActionUUID(settings, Types.set_contact_field),
+        type: state.type,
+        field: { name: field.label, key: field.key },
+        value: state.settings.value.value
+      };
+    } else {
+      return {
+        uuid: getActionUUID(settings, Types.set_contact_field),
+        type: state.type,
+        field: { name: field.label, key: field.key },
+        value: state.fieldValue.value
+      };
+    }
   } else if (state.type === Types.set_contact_channel) {
     if (state.channel.value.type === REMOVE_VALUE_ASSET.type) {
       return {
-Original file line number
+Diff line change
@@ Expand Up @@
       <span
         className="emphasize"
       >
-        age
+        Age
       </span>
       .
     </div>
@@ Expand Down Expand Up @@
       <span
         className="emphasize"
       >
-        age
+        Age
       </span>
        to
       <span
@@ Expand Down @@