Simplify template configuration

nyaruka · May 3, 2024 · dec11ff · dec11ff
1 parent 979542a
commit dec11ff
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 24 deletions.
diff --git a/src/components/flow/actions/sendmsg/SendMsgForm.tsx b/src/components/flow/actions/sendmsg/SendMsgForm.tsx
@@ -25,8 +25,7 @@ import {
   mergeForm,
   StringArrayEntry,
   StringEntry,
-  SelectOptionEntry,
-  FormEntry
+  SelectOptionEntry
 } from 'store/nodeEditor';
 import { MaxOfTenItems, shouldRequireIf, validate } from 'store/validators';
 
@@ -51,8 +50,8 @@ export interface SendMsgFormState extends FormState {
   templateTranslation?: TemplateTranslation;
 
   // template uuid to dict of component key to array
-  template: FormEntry;
-  templateVariables: StringArrayEntry;
+  template: { uuid: string; name: string };
+  templateVariables: string[];
 }
 
 export default class SendMsgForm extends React.Component<ActionFormProps, SendMsgFormState> {
@@ -135,9 +134,8 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
         const originalTemplate = (this.props.nodeSettings.originalAction as any).template;
         if (originalTemplate) {
           if (
-            (this.state.template.value &&
-              this.state.template.value.uuid !== originalTemplate.uuid) ||
-            !this.state.template.value
+            (this.state.template && this.state.template.uuid !== originalTemplate.uuid) ||
+            !this.state.template
           ) {
             this.props.removeLocalizations(this.props.nodeSettings.originalAction.uuid, [
               'template_variables'
@@ -163,16 +161,15 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
 
   private handleTemplateChanged(event: any): void {
     const { template, translation, variables } = event.detail;
-
     this.setState({
-      template: { value: template ? { uuid: template.uuid, name: template.name } : null },
-      templateVariables: { value: variables },
+      template: template ? { uuid: template.uuid, name: template.name } : null,
+      templateVariables: variables,
       templateTranslation: translation
     });
   }
 
   private handleTemplateVariableChanged(event: any): void {
-    this.setState({ templateVariables: { value: event.detail.variables } });
+    this.setState({ templateVariables: event.detail.variables });
   }
 
   private renderTopicConfig(): JSX.Element {
@@ -205,7 +202,7 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
   }
 
   private renderTemplateConfig(): JSX.Element {
-    const uuid = this.state.template.value ? this.state.template.value.uuid : null;
+    const uuid = this.state.template ? this.state.template.uuid : null;
     return (
       <>
         <p>
@@ -222,7 +219,7 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
           }}
           template={uuid}
           url={this.props.assetStore.templates.endpoint}
-          variables={JSON.stringify(this.state.templateVariables.value)}
+          variables={JSON.stringify(this.state.templateVariables)}
           lang={
             this.props.language
               ? this.props.language.id !== 'base'
@@ -380,7 +377,7 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
       const templates: Tab = {
         name: 'WhatsApp',
         body: this.renderTemplateConfig(),
-        checked: this.state.template.value != null
+        checked: this.state.template !== null
       };
       tabs.splice(0, 0, templates);
     }

diff --git a/src/components/flow/actions/sendmsg/helpers.ts b/src/components/flow/actions/sendmsg/helpers.ts
@@ -4,7 +4,7 @@ import { getActionUUID } from 'components/flow/actions/helpers';
 import { SendMsgFormState } from 'components/flow/actions/sendmsg/SendMsgForm';
 import { Types } from 'config/interfaces';
 import { SendMsg } from 'flowTypes';
-import { FormEntry, NodeEditorSettings } from 'store/nodeEditor';
+import { NodeEditorSettings } from 'store/nodeEditor';
 import { SelectOption } from 'components/form/select/SelectElement';
 import { Attachment } from './attachments';
 
@@ -16,10 +16,18 @@ export const TOPIC_OPTIONS: SelectOption[] = [
 ];
 
 export const initializeForm = (settings: NodeEditorSettings): SendMsgFormState => {
-  let template: FormEntry = { value: null };
+  let template: { uuid: string; name: string } = null;
+  let templateVariables: string[] = [];
+
   if (settings.originalAction && settings.originalAction.type === Types.send_msg) {
     const action = settings.originalAction as SendMsg;
     const attachments: Attachment[] = [];
+
+    if (action.template) {
+      template = action.template;
+      templateVariables = action.template_variables || [];
+    }
+
     (action.attachments || []).forEach((attachmentString: string) => {
       const splitPoint = attachmentString.indexOf(':');
 
@@ -35,8 +43,8 @@ export const initializeForm = (settings: NodeEditorSettings): SendMsgFormState =
 
     return {
       topic: { value: TOPIC_OPTIONS.find(option => option.value === action.topic) },
-      template: { value: action.template },
-      templateVariables: { value: action.template_variables },
+      template,
+      templateVariables,
       attachments,
       uploadInProgress: false,
       uploadError: '',
@@ -50,14 +58,14 @@ export const initializeForm = (settings: NodeEditorSettings): SendMsgFormState =
 
   return {
     topic: { value: null },
-    template: { value: template },
+    template,
+    templateVariables,
     attachments: [],
     uploadInProgress: false,
     uploadError: '',
     message: { value: '' },
     quickReplies: { value: [] },
     quickReplyEntry: { value: '' },
-    templateVariables: { value: [] },
     sendAll: false,
     valid: false
   };
@@ -77,9 +85,9 @@ export const stateToAction = (settings: NodeEditorSettings, state: SendMsgFormSt
     uuid: getActionUUID(settings, Types.send_msg)
   };
 
-  if (state.template.value) {
-    result.template = state.template.value;
-    result.template_variables = state.templateVariables.value;
+  if (state.template) {
+    result.template = state.template;
+    result.template_variables = state.templateVariables;
   }
 
   if (state.topic.value) {

diff --git a/src/index.js b/src/index.js
@@ -20,7 +20,6 @@ window.showFlowEditor = (ele, config) => {
   if (config.httpTimeout) {
     setHTTPTimeout(config.httpTimeout);
   }
-
   ReactDOM.unmountComponentAtNode(ele);
   ReactDOM.render(<FlowEditor config={config} />, ele);
 };