added interactive dynamic message

src/components/flow/actions/sendinteractivemsg/SendInteractiveMsg.module.scss

@@ -28,3 +28,28 @@
   align-items: center;
   margin-bottom: 6px;
 }
+
+.expression {
+  margin-top: 10px;
+}
+
+.listItem {
+  width: 48% !important;
+  margin: 4px 4px;
+}
+
+.list_container {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.variable_count {
+  width: 100%;
+  margin: 4px 8px;
+}
+
+.variables_title {
+  margin: 8px 8px;
+}

src/components/flow/actions/sendinteractivemsg/SendInteractiveMsg.tsx

@@ -23,12 +23,14 @@ const SendInteractiveMsgComp: React.SFC<SendInteractiveMsg> = ({
   labels,
   language,
   id,
-  addAsset
+  addAsset,
+  expression
 }: SendInteractiveMsg): JSX.Element => {
   const [body, setBody] = useState(null);
   const [header, setHeader] = useState(null);
   const { endpoint, type, items } = assetStore.interactives;
 
+  console.log(expression);
   let languageId = language.id;
 
   if (language.id === 'base') {
@@ -50,6 +52,8 @@ const SendInteractiveMsgComp: React.SFC<SendInteractiveMsg> = ({
 
     if (interactive) {
       setNode(interactive);
+    } else if (expression || expression === '') {
+      setBody('Expressions used here');
     } else {
       getAsset(endpoint, type, id.toString()).then(response => {
         if (response.error) {

src/components/flow/actions/sendinteractivemsg/SendInteractiveMsgForm.tsx

@@ -22,12 +22,23 @@ import AssetSelector from 'components/form/assetselector/AssetSelector';
 import { Asset } from 'store/flowContext';
 import { AddLabelsFormState } from '../addlabels/AddLabelsForm';
 import { getAsset } from 'external';
+import TextInputElement, { TextInputStyle } from 'components/form/textinput/TextInputElement';
+import mutate from 'immutability-helper';
 
+// const MAX_ATTACHMENTS = 10;
 export interface SendInteractiveMsgFormState extends FormState {
   interactives: FormEntry;
   labels?: any;
+  expression?: null | FormEntry;
+  listValues?: Array<any>;
+  listValuesCount?: string;
 }
 
+const additionalOption = {
+  name: 'Expression',
+  text: 'Expression'
+};
+
 export default class SendMsgForm extends React.Component<
   ActionFormProps,
   SendInteractiveMsgFormState
@@ -46,12 +57,21 @@ export default class SendMsgForm extends React.Component<
 
   private handleInteractivesChanged(selected: any[]): void {
     const interactiveMsg = selected ? selected[0] : null;
-
-    this.setState({
-      interactives: {
-        value: interactiveMsg
-      }
-    });
+    if (interactiveMsg.name === 'Expression') {
+      this.setState({
+        expression: { value: '' },
+        interactives: {
+          value: { name: 'Expression' }
+        }
+      });
+    } else {
+      this.setState({
+        expression: null,
+        interactives: {
+          value: interactiveMsg
+        }
+      });
+    }
   }
 
   private handleUpdate(
@@ -110,6 +130,10 @@ export default class SendMsgForm extends React.Component<
     // make sure we validate untouched text fields and contact fields
     let valid = this.handleMessageUpdate(this.state.interactives.value, null, true);
 
+    if (this.state.expression) {
+      valid = true;
+    }
+
     if (valid) {
       this.props.updateAction(stateToAction(this.props.nodeSettings, this.state));
       // notify our modal we are done
@@ -153,6 +177,60 @@ export default class SendMsgForm extends React.Component<
       </div>
     );
   }
+
+  private handleAttachmentChanged(index: number, value: string): void {
+    let { listValues }: any = this.state;
+    listValues = mutate(listValues, {
+      [index]: {
+        $set: { value }
+      }
+    });
+
+    this.setState({ listValues });
+  }
+
+  private renderListOptions(): JSX.Element {
+    const { listValues } = this.state;
+
+    const renderListOption = (value: any, index: number) => (
+      <div className={styles.listItem}>
+        <TextInputElement
+          placeholder={`variable ${index + 1}`}
+          name={i18n.t('forms.list_item', 'variable')}
+          style={TextInputStyle.normal}
+          onChange={(value: string) => {
+            this.handleAttachmentChanged(index, value);
+          }}
+          entry={value}
+          autocomplete={true}
+        />
+      </div>
+    );
+
+    const values = listValues.map((value, index) => renderListOption(value, index));
+
+    return (
+      <div>
+        <div className={styles.variables_title}>List variables</div>
+
+        <div className={styles.list_container}>
+          <div className={styles.variable_count}>
+            <TextInputElement
+              placeholder={`Number of variables`}
+              name={i18n.t('forms.list_item', '')}
+              style={TextInputStyle.normal}
+              onChange={(value: string) => {
+                this.setState({ listValuesCount: value });
+              }}
+              entry={{ value: this.state.listValuesCount }}
+              autocomplete={true}
+            />
+          </div>
+          {values}
+        </div>
+      </div>
+    );
+  }
   async componentDidMount(): Promise<any> {
     const id = this.state.interactives.value.id;
 
@@ -192,9 +270,11 @@ export default class SendMsgForm extends React.Component<
 
     const currentMessage = this.state.interactives.value;
     let body;
+    let isListType = false;
     if (currentMessage && currentMessage.interactive_content) {
       const message = currentMessage.interactive_content;
       body = getMsgBody(message);
+      isListType = message.type === 'list';
     }
     return (
       <Dialog
@@ -205,6 +285,7 @@ export default class SendMsgForm extends React.Component<
       >
         <TypeList __className="" initialType={typeConfig} onChange={this.props.onTypeChange} />
         <AssetSelector
+          additionalOptions={[additionalOption]}
           name={i18n.t('forms.interactive', 'interactive')}
           noOptionsMessage="No interactive messages found"
           placeholder={'Select interactive message'}
@@ -214,7 +295,23 @@ export default class SendMsgForm extends React.Component<
           searchable={true}
           formClearable={true}
         />
+        {this.state.expression && (
+          <div className={styles.expression}>
+            <TextInputElement
+              name="Expression"
+              showLabel={false}
+              placeholder="Expression"
+              onChange={(updatedText: string) => {
+                this.setState({ expression: { value: updatedText } });
+              }}
+              entry={this.state.expression}
+              autocomplete={true}
+            />
+          </div>
+        )}
         <div className={styles.body}> {body}</div>
+
+        {isListType && this.renderListOptions()}
         {this.renderLabelOption()}
       </Dialog>
     );

src/components/flow/actions/sendinteractivemsg/helpers.tsx

@@ -16,7 +16,7 @@ export const initializeForm = (
 ): SendInteractiveMsgFormState => {
   if (settings.originalAction && settings.originalAction.type === Types.send_interactive_msg) {
     const action = settings.originalAction as SendInteractiveMsg;
-    let { id, name } = action;
+    let { id, name, expression, params, paramsCount } = action;
 
     const labels = action.labels
       ? action.labels.map((label: Label) => {
@@ -27,30 +27,73 @@ export const initializeForm = (
         })
       : [];
 
-    return {
+    const listValues = params.map((param: string) => {
+      return { value: param };
+    });
+
+    while (listValues.length < 10) {
+      listValues.push({ value: '' });
+    }
+
+    const returnValue: any = {
       interactives: { value: { id, interactive_content: {}, name } },
       labels: {
         value: labels
       },
-      valid: true
+      valid: true,
+      listValues,
+      listValuesCount: paramsCount
     };
+
+    if (expression || expression === '') {
+      returnValue.expression = {
+        value: expression
+      };
+    }
+
+    return returnValue;
   }
 
   return {
+    expression: null,
     interactives: { value: '' },
     labels: {
       value: []
     },
-    valid: false
+    listValues: Array(10).fill({ value: '' }),
+    valid: false,
+    listValuesCount: ''
   };
 };
 
 export const stateToAction = (
   settings: NodeEditorSettings,
   state: SendInteractiveMsgFormState
 ): SendInteractiveMsg => {
-  const result: SendInteractiveMsg = {
+  let result: any = {};
+
+  const params = state.listValues
+    .filter(listItem => listItem.value !== '')
+    .map(listItem => listItem.value);
+
+  const paramsCount = state.listValuesCount;
+
+  if (state.expression) {
+    result = {
+      params,
+      paramsCount,
+      name: state.interactives.value.name,
+      expression: state.expression.value,
+      type: Types.send_interactive_msg,
+      uuid: getActionUUID(settings, Types.send_interactive_msg)
+    };
+    return result;
+  }
+
+  result = {
     id: state.interactives.value.id,
+    params,
+    paramsCount,
     text: JSON.stringify(state.interactives.value.interactive_content),
     name: state.interactives.value.name,
     labels: state.labels.value.map((label: any) => {

src/flowTypes.ts

@@ -381,9 +381,12 @@ export interface SendInteractiveMsg extends Action {
   id: number;
   name: string;
   labels?: Label[];
+  expression?: any;
   assetStore?: AssetStore;
   language?: any;
   addAsset?: any;
+  params?: any;
+  paramsCount?: any;
 }
 
 export interface Delay extends Action {