added dynamic attachment

package.json

@@ -2,7 +2,7 @@
   "name": "@glific/flow-editor",
   "license": "AGPL-3.0",
   "repository": "git://github.com/glific/floweditor.git",
-  "version": "1.17.1-2",
+  "version": "1.17.1-3",
   "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",

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

@@ -39,6 +39,8 @@
 }
 
 .list_container {
+  max-height: 200px;
+  overflow: auto;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;

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

@@ -12,7 +12,7 @@ import { ActionFormProps } from 'components/flow/props';
 import TypeList from 'components/nodeeditor/TypeList';
 import { fakePropType } from 'config/ConfigProvider';
 import * as React from 'react';
-import { FormEntry, FormState, mergeForm } from 'store/nodeEditor';
+import { FormEntry, FormState, mergeForm, StringEntry } from 'store/nodeEditor';
 import { shouldRequireIf, validate } from 'store/validators';
 import styles from './SendInteractiveMsg.module.scss';
 
@@ -34,6 +34,8 @@ export interface SendInteractiveMsgFormState extends FormState {
   listValues?: Array<any>;
   listValuesCount?: string;
   isChecked?: boolean;
+  attachment_type?: StringEntry;
+  attachment_url?: StringEntry;
 }
 
 const additionalOption = {
@@ -228,6 +230,30 @@ export default class SendMsgForm extends React.Component<
             />
           </div>
           {values}
+          <div className={styles.variable_count}>
+            <TextInputElement
+              placeholder={`Attachment type`}
+              name={i18n.t('forms.attachment_type', 'attachment_type')}
+              style={TextInputStyle.normal}
+              onChange={(value: string) => {
+                this.setState({ attachment_type: { value } });
+              }}
+              entry={this.state.attachment_type}
+              autocomplete={true}
+            />
+          </div>
+          <div className={styles.variable_count}>
+            <TextInputElement
+              placeholder={`Attachment url`}
+              name={i18n.t('forms.attachment_url', 'attachment_url')}
+              style={TextInputStyle.normal}
+              onChange={(value: string) => {
+                this.setState({ attachment_url: { value } });
+              }}
+              entry={this.state.attachment_url}
+              autocomplete={true}
+            />
+          </div>
         </div>
       </div>
     );

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

@@ -37,14 +37,16 @@ export const initializeForm = (
       listValues.push({ value: '' });
     }
 
-    const returnValue: any = {
+    const returnValue: SendInteractiveMsgFormState = {
       interactives: { value: { id, interactive_content: {}, name } },
       labels: {
         value: labels
       },
       valid: true,
       listValues,
-      listValuesCount: paramsCount
+      listValuesCount: paramsCount,
+      attachment_url: { value: action.attachment_url || '' },
+      attachment_type: { value: action.attachment_type || '' }
     };
 
     if (paramsCount) {
@@ -69,7 +71,9 @@ export const initializeForm = (
     },
     listValues: Array(10).fill({ value: '' }),
     valid: false,
-    listValuesCount: ''
+    listValuesCount: '',
+    attachment_url: { value: '' },
+    attachment_type: { value: '' }
   };
 };
 
@@ -116,6 +120,13 @@ export const stateToAction = (
     result.paramsCount = paramsCount;
   }
 
+  if (state.attachment_type) {
+    result.attachment_type = state.attachment_type.value;
+  }
+  if (state.attachment_url) {
+    result.attachment_url = state.attachment_url.value;
+  }
+
   return result;
 };
 

src/components/flow/routers/contactprofile/ContactProfileRouterForm.tsx

@@ -1,16 +1,16 @@
 import { react as bindCallbacks } from 'auto-bind';
 import Dialog, { ButtonSet } from 'components/dialog/Dialog';
-import { hasErrors } from 'components/flow/actions/helpers';
+
 import { RouterFormProps } from 'components/flow/props';
 import TypeList from 'components/nodeeditor/TypeList';
 import * as React from 'react';
-import { FormEntry, FormState, StringEntry } from 'store/nodeEditor';
-import { Numeric, Required, shouldRequireIf, validate } from 'store/validators';
+import { FormEntry, FormState } from 'store/nodeEditor';
+import { shouldRequireIf, validate } from 'store/validators';
 
 import { nodeToState, stateToNode } from './helpers';
 import styles from './ContactProfileRouterForm.module.scss';
 import i18n from 'config/i18n';
-import TextInputElement, { TextInputStyle } from 'components/form/textinput/TextInputElement';
+import TextInputElement from 'components/form/textinput/TextInputElement';
 import AssetSelector from 'components/form/assetselector/AssetSelector';
 import { AssetType } from 'store/flowContext';
 

src/flowTypes.ts

@@ -387,6 +387,8 @@ export interface SendInteractiveMsg extends Action {
   addAsset?: any;
   params?: any;
   paramsCount?: any;
+  attachment_url?: string;
+  attachment_type?: string;
 }
 
 export interface Delay extends Action {