diff --git a/package.json b/package.json index 201b1e6e5..42862cec7 100644 --- 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.14.0-3", + "version": "1.14.0-4", "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/sendmsg/SendMsgForm.module.scss b/src/components/flow/actions/sendmsg/SendMsgForm.module.scss index 645a66670..e9b718fe3 100644 --- a/src/components/flow/actions/sendmsg/SendMsgForm.module.scss +++ b/src/components/flow/actions/sendmsg/SendMsgForm.module.scss @@ -81,3 +81,7 @@ temba-completion { .label_container { margin-top: 16px; } + +.expression { + margin-top: 10px; +} diff --git a/src/components/flow/actions/sendmsg/SendMsgForm.tsx b/src/components/flow/actions/sendmsg/SendMsgForm.tsx index 6cdcf0521..15788764b 100644 --- a/src/components/flow/actions/sendmsg/SendMsgForm.tsx +++ b/src/components/flow/actions/sendmsg/SendMsgForm.tsx @@ -58,8 +58,22 @@ export interface SendMsgFormState extends FormState { templateVariables: StringEntry[]; templateTranslation?: TemplateTranslation; labels?: any; + expression?: any; } +// this is an additonal item in templates that need to have a same format as other list items +const additionalOption = { + name: 'Expression', + translations: [ + { + channel: { + name: 'WhatsApp' + }, + status: 'approved' + } + ] +}; + export default class SendMsgForm extends React.Component { private filePicker: any; private timeout: any; @@ -71,7 +85,7 @@ export default class SendMsgForm extends React.Component { if (asset !== null) { @@ -192,6 +206,7 @@ export default class SendMsgForm extends React.Component + {this.state.expression && ( +
+ { + this.setState({ expression: { value: updatedText } }); + }} + entry={{ value: this.state.expression.value }} + autocomplete={true} + /> +
+ )} {this.state.templateTranslation ? ( <> -
{this.state.templateTranslation.content}
+ {this.state.templateTranslation.content && ( +
{this.state.templateTranslation.content}
+ )} {range(0, this.state.templateTranslation.variable_count).map((num: number) => { return (
diff --git a/src/components/flow/actions/sendmsg/helpers.ts b/src/components/flow/actions/sendmsg/helpers.ts index 8488db663..b4a2ea81e 100644 --- a/src/components/flow/actions/sendmsg/helpers.ts +++ b/src/components/flow/actions/sendmsg/helpers.ts @@ -26,6 +26,7 @@ export const initializeForm = ( if (settings.originalAction && settings.originalAction.type === Types.send_msg) { const action = settings.originalAction as SendMsg; const attachments: Attachment[] = []; + let expressionValue = null; (action.attachments || []).forEach((attachmentString: string) => { const splitPoint = attachmentString.indexOf(':'); @@ -42,6 +43,9 @@ export const initializeForm = ( if (action.templating) { const msgTemplate = action.templating.template; + if (action.templating.expression) { + expressionValue = { value: action.templating.expression }; + } template = { value: { uuid: msgTemplate.uuid, @@ -65,6 +69,7 @@ export const initializeForm = ( : []; return { + expression: expressionValue, topic: { value: TOPIC_OPTIONS.find(option => option.value === action.topic) }, template, templateVariables, @@ -122,6 +127,10 @@ export const stateToAction = (settings: NodeEditorSettings, state: SendMsgFormSt }, variables: state.templateVariables.map((variable: StringEntry) => variable.value) }; + + if (state.expression && state.expression.value) { + templating.expression = state.expression.value; + } } const result: SendMsg = { diff --git a/src/flowTypes.ts b/src/flowTypes.ts index 6e7f2e478..d3cbbafff 100644 --- a/src/flowTypes.ts +++ b/src/flowTypes.ts @@ -342,6 +342,7 @@ export interface MsgTemplate { } export interface MsgTemplating { + expression?: string; uuid: string; template: MsgTemplate; variables: string[];