From 980fb06991fa0357fca39d12aef977f9ec275f8b Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Tue, 19 Oct 2021 15:51:39 +0530 Subject: [PATCH 1/5] added label in send message node --- .../flow/actions/sendmsg/SendMsg.tsx | 22 ++++++++++ .../flow/actions/sendmsg/SendMsgForm.tsx | 41 +++++++++++++++++++ .../flow/actions/sendmsg/helpers.ts | 19 ++++++++- src/flowTypes.ts | 1 + 4 files changed, 81 insertions(+), 2 deletions(-) diff --git a/src/components/flow/actions/sendmsg/SendMsg.tsx b/src/components/flow/actions/sendmsg/SendMsg.tsx index 4ae058442..4bfe0fc67 100644 --- a/src/components/flow/actions/sendmsg/SendMsg.tsx +++ b/src/components/flow/actions/sendmsg/SendMsg.tsx @@ -4,10 +4,14 @@ import * as React from 'react'; import styles from './SendMsg.module.scss'; import i18n from 'config/i18n'; +import { renderAssetList } from '../helpers'; +import { AssetType } from 'store/flowContext'; +import { MAX_TO_SHOW } from '../addlabels/AddLabels'; export const PLACEHOLDER = i18n.t('actions.send_msg.placeholder', 'Send a message to the contact'); const SendMsgComp: React.SFC = (action: SendMsg): JSX.Element => { + const endpoints: any = {}; if (action.text) { let replies = null; @@ -43,6 +47,24 @@ const SendMsgComp: React.SFC = (action: SendMsg): JSX.Element => {
) : null} {action.topic ?
: null} + {renderAssetList( + action.labels.map((label: any) => { + if (label.name_match) { + return { + id: label.name_match, + name: label.name_match, + type: AssetType.NameMatch + }; + } + return { + id: label.uuid, + name: label.name, + type: AssetType.Label + }; + }), + MAX_TO_SHOW, + endpoints + )}
{replies}
diff --git a/src/components/flow/actions/sendmsg/SendMsgForm.tsx b/src/components/flow/actions/sendmsg/SendMsgForm.tsx index 301a24a67..a7665d827 100644 --- a/src/components/flow/actions/sendmsg/SendMsgForm.tsx +++ b/src/components/flow/actions/sendmsg/SendMsgForm.tsx @@ -45,6 +45,7 @@ import { FeatureFilter } from 'config/interfaces'; import i18n from 'config/i18n'; import { Trans } from 'react-i18next'; import { Attachment, renderAttachments, validateURL } from './attachments'; +import { AddLabelsFormState } from '../addlabels/AddLabelsForm'; export interface SendMsgFormState extends FormState { message: StringEntry; @@ -56,6 +57,7 @@ export interface SendMsgFormState extends FormState { topic: SelectOptionEntry; templateVariables: StringEntry[]; templateTranslation?: TemplateTranslation; + labels?: any; } export default class SendMsgForm extends React.Component { @@ -346,6 +348,16 @@ export default class SendMsgForm extends React.Component = { + labels: validate(i18n.t('forms.labels', 'Labels'), selected, [shouldRequireIf(submitting)]) + }; + + const updated = mergeForm(this.state, updates); + this.setState(updated); + return updated.valid; + } + private handleAttachmentRemoved(index: number) { const attachments: any = mutate(this.state.attachments, { $splice: [[index, 1]] @@ -353,6 +365,17 @@ export default class SendMsgForm extends React.Component +

Select the labels to apply to the message.

+ + {renderIssues(this.props)} ); diff --git a/src/components/flow/actions/sendmsg/helpers.ts b/src/components/flow/actions/sendmsg/helpers.ts index aa52432c7..4253f6581 100644 --- a/src/components/flow/actions/sendmsg/helpers.ts +++ b/src/components/flow/actions/sendmsg/helpers.ts @@ -2,7 +2,7 @@ import { getActionUUID } from 'components/flow/actions/helpers'; import { SendMsgFormState } from 'components/flow/actions/sendmsg/SendMsgForm'; import { Types } from 'config/interfaces'; -import { MsgTemplating, SendMsg } from 'flowTypes'; +import { Label, MsgTemplating, SendMsg } from 'flowTypes'; import { AssetStore } from 'store/flowContext'; import { FormEntry, NodeEditorSettings, StringEntry } from 'store/nodeEditor'; import { SelectOption } from 'components/form/select/SelectElement'; @@ -60,6 +60,14 @@ export const initializeForm = ( template, templateVariables, attachments, + labels: { + value: action.labels.map((label: Label) => { + if (label.name_match) { + return { name: label.name_match, expression: true }; + } + return label; + }) + }, message: { value: action.text }, quickReplies: { value: action.quick_replies || [] }, quickReplyEntry: { value: '' }, @@ -77,7 +85,8 @@ export const initializeForm = ( quickReplies: { value: [] }, quickReplyEntry: { value: '' }, sendAll: false, - valid: false + valid: false, + labels: { value: [] } }; }; @@ -116,6 +125,12 @@ export const stateToAction = (settings: NodeEditorSettings, state: SendMsgFormSt text: state.message.value, type: Types.send_msg, all_urns: state.sendAll, + labels: state.labels.value.map((label: any) => { + if (label.expression) { + return { name_match: label.name }; + } + return label; + }), quick_replies: state.quickReplies.value, uuid: getActionUUID(settings, Types.send_msg) }; diff --git a/src/flowTypes.ts b/src/flowTypes.ts index 893ae13c9..3b582d777 100644 --- a/src/flowTypes.ts +++ b/src/flowTypes.ts @@ -354,6 +354,7 @@ export interface SendMsg extends Action { attachments?: string[]; topic?: string; templating?: MsgTemplating; + labels?: any; } export interface SendInteractiveMsg extends Action { From 7b7959ba8797678ff5210b147c5b0c0174c32b40 Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Tue, 19 Oct 2021 16:25:08 +0530 Subject: [PATCH 2/5] added label option in whatsapp tab as well --- .../flow/actions/sendmsg/SendMsg.tsx | 55 ++++++++++++------- .../actions/sendmsg/SendMsgForm.module.scss | 4 ++ .../flow/actions/sendmsg/SendMsgForm.tsx | 45 +++++++++------ .../flow/actions/sendmsg/helpers.ts | 16 ++++-- 4 files changed, 76 insertions(+), 44 deletions(-) diff --git a/src/components/flow/actions/sendmsg/SendMsg.tsx b/src/components/flow/actions/sendmsg/SendMsg.tsx index 4bfe0fc67..0bac0e6e6 100644 --- a/src/components/flow/actions/sendmsg/SendMsg.tsx +++ b/src/components/flow/actions/sendmsg/SendMsg.tsx @@ -12,6 +12,28 @@ export const PLACEHOLDER = i18n.t('actions.send_msg.placeholder', 'Send a messag const SendMsgComp: React.SFC = (action: SendMsg): JSX.Element => { const endpoints: any = {}; + let labels = null; + + if (action.labels) { + labels = renderAssetList( + action.labels.map((label: any) => { + if (label.name_match) { + return { + id: label.name_match, + name: label.name_match, + type: AssetType.NameMatch + }; + } + return { + id: label.uuid, + name: label.name, + type: AssetType.Label + }; + }), + MAX_TO_SHOW, + endpoints + ); + } if (action.text) { let replies = null; @@ -47,34 +69,27 @@ const SendMsgComp: React.SFC = (action: SendMsg): JSX.Element => {
) : null} {action.topic ?
: null} - {renderAssetList( - action.labels.map((label: any) => { - if (label.name_match) { - return { - id: label.name_match, - name: label.name_match, - type: AssetType.NameMatch - }; - } - return { - id: label.uuid, - name: label.name, - type: AssetType.Label - }; - }), - MAX_TO_SHOW, - endpoints - )} + {labels}
{replies}
); } if (action.attachments && action.attachments.length > 0) { - return
; + return ( + <> +
+ {labels} + + ); } if (action.templating && action.templating.template) { - return
; + return ( + <> +
+ {labels} + + ); } return
{PLACEHOLDER}
; }; diff --git a/src/components/flow/actions/sendmsg/SendMsgForm.module.scss b/src/components/flow/actions/sendmsg/SendMsgForm.module.scss index 5a092d0dc..645a66670 100644 --- a/src/components/flow/actions/sendmsg/SendMsgForm.module.scss +++ b/src/components/flow/actions/sendmsg/SendMsgForm.module.scss @@ -77,3 +77,7 @@ temba-completion { --textarea-height: 120px; } + +.label_container { + margin-top: 16px; +} diff --git a/src/components/flow/actions/sendmsg/SendMsgForm.tsx b/src/components/flow/actions/sendmsg/SendMsgForm.tsx index a7665d827..6cdcf0521 100644 --- a/src/components/flow/actions/sendmsg/SendMsgForm.tsx +++ b/src/components/flow/actions/sendmsg/SendMsgForm.tsx @@ -257,6 +257,31 @@ export default class SendMsgForm extends React.Component +

Select the labels to apply to the outgoing message.

+ + +
+ ); + } + private renderTemplateConfig(): JSX.Element { return ( <> @@ -301,6 +326,7 @@ export default class SendMsgForm extends React.Component ) : null} + {this.renderLabelOption()} ); } @@ -424,24 +450,7 @@ export default class SendMsgForm extends React.Component -

Select the labels to apply to the message.

- - + {this.renderLabelOption()} {renderIssues(this.props)} ); diff --git a/src/components/flow/actions/sendmsg/helpers.ts b/src/components/flow/actions/sendmsg/helpers.ts index 4253f6581..8488db663 100644 --- a/src/components/flow/actions/sendmsg/helpers.ts +++ b/src/components/flow/actions/sendmsg/helpers.ts @@ -55,18 +55,22 @@ export const initializeForm = ( }); } + const labels = action.labels + ? action.labels.map((label: Label) => { + if (label.name_match) { + return { name: label.name_match, expression: true }; + } + return label; + }) + : []; + return { topic: { value: TOPIC_OPTIONS.find(option => option.value === action.topic) }, template, templateVariables, attachments, labels: { - value: action.labels.map((label: Label) => { - if (label.name_match) { - return { name: label.name_match, expression: true }; - } - return label; - }) + value: labels }, message: { value: action.text }, quickReplies: { value: action.quick_replies || [] }, From 27cd103b6ffb688f439067e2b7804669e687e72a Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Tue, 19 Oct 2021 17:57:16 +0530 Subject: [PATCH 3/5] added for interactive message --- .../sendinteractivemsg/SendInteractiveMsg.tsx | 27 ++++++++++ .../SendInteractiveMsgForm.tsx | 50 +++++++++++++++++++ .../actions/sendinteractivemsg/helpers.tsx | 22 +++++++- src/flowTypes.ts | 1 + 4 files changed, 99 insertions(+), 1 deletion(-) diff --git a/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsg.tsx b/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsg.tsx index 6db022bdb..fe6cfcf1b 100644 --- a/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsg.tsx +++ b/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsg.tsx @@ -3,6 +3,9 @@ import * as React from 'react'; import i18n from 'config/i18n'; import { getMsgBody } from './helpers'; +import { renderAssetList } from '../helpers'; +import { AssetType } from 'store/flowContext'; +import { MAX_TO_SHOW } from '../addlabels/AddLabels'; export const PLACEHOLDER = i18n.t( 'actions.send_msg.placeholder', @@ -14,6 +17,29 @@ const SendInteractiveMsgComp: React.SFC = ( ): JSX.Element => { const message = JSON.parse(action.text); const body = getMsgBody(message); + const endpoints: any = {}; + let labels = null; + + if (action.labels) { + labels = renderAssetList( + action.labels.map((label: any) => { + if (label.name_match) { + return { + id: label.name_match, + name: label.name_match, + type: AssetType.NameMatch + }; + } + return { + id: label.uuid, + name: label.name, + type: AssetType.Label + }; + }), + MAX_TO_SHOW, + endpoints + ); + } if (action.name) { return (
@@ -21,6 +47,7 @@ const SendInteractiveMsgComp: React.SFC = ( {action.name}
{body}
+ {labels}
); } diff --git a/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsgForm.tsx b/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsgForm.tsx index 30e919d24..3239ffe8d 100644 --- a/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsgForm.tsx +++ b/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsgForm.tsx @@ -19,9 +19,12 @@ import styles from './SendInteractiveMsg.module.scss'; import i18n from 'config/i18n'; import AssetSelector from 'components/form/assetselector/AssetSelector'; +import { Asset } from 'store/flowContext'; +import { AddLabelsFormState } from '../addlabels/AddLabelsForm'; export interface SendInteractiveMsgFormState extends FormState { interactives: FormEntry; + labels?: any; } export default class SendMsgForm extends React.Component< @@ -77,6 +80,27 @@ export default class SendMsgForm extends React.Component< return this.handleUpdate({ text: message }, submitting); } + public handleLabelsChanged(selected: Asset[], submitting: boolean = false): boolean { + const updates: Partial = { + labels: validate(i18n.t('forms.labels', 'Labels'), selected, [shouldRequireIf(submitting)]) + }; + + const updated = mergeForm(this.state, updates); + this.setState(updated); + return updated.valid; + } + + public handleCreateAssetFromInput(input: string): any { + return { name: input }; + } + + public handleLabelCreated(label: Asset): void { + // update our store with our new group + this.props.addAsset('labels', label); + + this.handleLabelsChanged(this.state.labels.value!.concat(label)); + } + private handleSave(): void { // don't continue if our message already has errors if (hasErrors(this.state.interactives)) { @@ -104,6 +128,31 @@ export default class SendMsgForm extends React.Component< }; } + private renderLabelOption(): JSX.Element { + return ( +
+

Select the labels to apply to the interactive message.

+ + +
+ ); + } + public render(): JSX.Element { const typeConfig = this.props.typeConfig; @@ -132,6 +181,7 @@ export default class SendMsgForm extends React.Component< formClearable={true} />
{body}
+ {this.renderLabelOption()} ); } diff --git a/src/components/flow/actions/sendinteractivemsg/helpers.tsx b/src/components/flow/actions/sendinteractivemsg/helpers.tsx index e536e60ab..de0ade969 100644 --- a/src/components/flow/actions/sendinteractivemsg/helpers.tsx +++ b/src/components/flow/actions/sendinteractivemsg/helpers.tsx @@ -2,7 +2,7 @@ import { getActionUUID } from 'components/flow/actions/helpers'; import { Types } from 'config/interfaces'; import * as React from 'react'; -import { SendInteractiveMsg } from 'flowTypes'; +import { Label, SendInteractiveMsg } from 'flowTypes'; import { AssetStore } from 'store/flowContext'; import { NodeEditorSettings } from 'store/nodeEditor'; import styles from './SendInteractiveMsg.module.scss'; @@ -18,14 +18,28 @@ export const initializeForm = ( const action = settings.originalAction as SendInteractiveMsg; let { id, text, name } = action; text = JSON.parse(text); + const labels = action.labels + ? action.labels.map((label: Label) => { + if (label.name_match) { + return { name: label.name_match, expression: true }; + } + return label; + }) + : []; return { interactives: { value: { id, interactive_content: text, name } }, + labels: { + value: labels + }, valid: true }; } return { interactives: { value: '' }, + labels: { + value: [] + }, valid: false }; }; @@ -38,6 +52,12 @@ export const stateToAction = ( id: state.interactives.value.id, text: JSON.stringify(state.interactives.value.interactive_content), name: state.interactives.value.name, + labels: state.labels.value.map((label: any) => { + if (label.expression) { + return { name_match: label.name }; + } + return label; + }), type: Types.send_interactive_msg, uuid: getActionUUID(settings, Types.send_interactive_msg) }; diff --git a/src/flowTypes.ts b/src/flowTypes.ts index 3b582d777..11842d780 100644 --- a/src/flowTypes.ts +++ b/src/flowTypes.ts @@ -361,6 +361,7 @@ export interface SendInteractiveMsg extends Action { text: string; id: number; name: string; + labels?: Label[]; } export interface Delay extends Action { From 9b96fab6f1ee1dfbabd257a62c52bdd9f1bb9599 Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Tue, 19 Oct 2021 18:01:01 +0530 Subject: [PATCH 4/5] added types --- src/flowTypes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/flowTypes.ts b/src/flowTypes.ts index 11842d780..6e7f2e478 100644 --- a/src/flowTypes.ts +++ b/src/flowTypes.ts @@ -354,7 +354,7 @@ export interface SendMsg extends Action { attachments?: string[]; topic?: string; templating?: MsgTemplating; - labels?: any; + labels?: Label[]; } export interface SendInteractiveMsg extends Action { From 62a8173e035a64b128f68f534f716b8921848854 Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Wed, 20 Oct 2021 09:50:08 +0530 Subject: [PATCH 5/5] updated package --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index abe72a360..201b1e6e5 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-2", + "version": "1.14.0-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",