Use compose component for Send Message action

src/components/flow/actions/helpers.tsx

@@ -5,16 +5,22 @@ import {
   RecipientsAction,
   FlowIssue,
   FlowIssueType,
-  BroadcastMsg
+  BroadcastMsg,
+  SendMsg,
+  ComposeAttachment
 } from 'flowTypes';
 import * as React from 'react';
 import { Asset, AssetType } from 'store/flowContext';
-import { FormEntry, NodeEditorSettings, ValidationFailure } from 'store/nodeEditor';
+import { FormEntry, NodeEditorSettings, StringEntry, ValidationFailure } from 'store/nodeEditor';
 import { createUUID } from 'utils';
 import { Trans } from 'react-i18next';
 import shared from 'components/shared.module.scss';
 import { showHelpArticle } from 'external';
 import { IssueProps } from '../props';
+import { SendBroadcastFormState } from './sendbroadcast/SendBroadcastForm';
+import { SendMsgFormState } from './sendmsg/SendMsgForm';
+import { MaxOf640Chars, MaxOfThreeItems, shouldRequireIf, validate } from 'store/validators';
+import i18n from 'config/i18n';
 
 export const renderIssues = (issueProps: IssueProps): JSX.Element => {
   const { issues, helpArticles } = issueProps;
@@ -102,7 +108,11 @@ export const getActionUUID = (nodeSettings: NodeEditorSettings, currentType: str
   return createUUID();
 };
 
-export const getCompose = (action: BroadcastMsg = null): string => {
+export const getEmptyComposeValue = (): string => {
+  return JSON.stringify({ text: '', attachments: [] });
+};
+
+export const getComposeActionToState = (action: SendMsg | BroadcastMsg = null): string => {
   if (!action) {
     return getEmptyComposeValue();
   }
@@ -112,8 +122,67 @@ export const getCompose = (action: BroadcastMsg = null): string => {
   return action.compose;
 };
 
-export const getEmptyComposeValue = (): string => {
-  return JSON.stringify({ text: '', attachments: [] });
+export const validateCompose = (composeValue: string, submitting: boolean = false): StringEntry => {
+  let composeUpdate: StringEntry;
+
+  // validate empty compose value
+  if (composeValue === getEmptyComposeValue()) {
+    composeUpdate = validate(i18n.t('forms.compose', 'Compose'), '', [shouldRequireIf(submitting)]);
+    composeUpdate.value = composeValue;
+    if (composeUpdate.validationFailures.length > 0) {
+      let composeErrMsg = composeUpdate.validationFailures[0].message;
+      composeErrMsg = composeErrMsg.replace('Compose is', 'Text or attachments are');
+      composeUpdate.validationFailures[0].message = composeErrMsg;
+    }
+    return composeUpdate;
+  }
+
+  // validate populated compose value
+  composeUpdate = validate(i18n.t('forms.compose', 'Compose'), composeValue, [
+    shouldRequireIf(submitting)
+  ]);
+  // validate inner text value
+  const composeTextValue = getComposeByAsset(composeValue, AssetType.ComposeText);
+  const composeTextResult = validate(i18n.t('forms.compose', 'Compose'), composeTextValue, [
+    MaxOf640Chars
+  ]);
+  if (composeTextResult.validationFailures.length > 0) {
+    let textErrMsg = composeTextResult.validationFailures[0].message;
+    textErrMsg = textErrMsg.replace('Compose cannot be more than', 'Maximum allowed text is');
+    composeTextResult.validationFailures[0].message = textErrMsg;
+    composeUpdate.validationFailures = [
+      ...composeUpdate.validationFailures,
+      ...composeTextResult.validationFailures
+    ];
+  }
+  // validate inner attachments value
+  const composeAttachmentsValue = getComposeByAsset(composeValue, AssetType.ComposeAttachments);
+  const composeAttachmentsResult = validate(
+    i18n.t('forms.compose', 'Compose'),
+    composeAttachmentsValue,
+    [MaxOfThreeItems]
+  );
+  if (composeAttachmentsResult.validationFailures.length > 0) {
+    let attachmentsErrMsg = composeAttachmentsResult.validationFailures[0].message;
+    attachmentsErrMsg = attachmentsErrMsg
+      .replace('Compose cannot have more than', 'Maximum allowed attachments is')
+      .replace('entries', 'files');
+    composeAttachmentsResult.validationFailures[0].message = attachmentsErrMsg;
+    composeUpdate.validationFailures = [
+      ...composeUpdate.validationFailures,
+      ...composeAttachmentsResult.validationFailures
+    ];
+  }
+  return composeUpdate;
+};
+
+export const getComposeStateToAction = (state: SendMsgFormState | SendBroadcastFormState): any => {
+  const compose = state.compose.value;
+  const text = getComposeByAsset(compose, AssetType.ComposeText);
+  const attachments = getComposeByAsset(compose, AssetType.ComposeAttachments).map(
+    (attachment: ComposeAttachment) => `${attachment.content_type}:${attachment.url}`
+  );
+  return [compose, text, attachments];
 };
 
 export const getRecipients = (action: RecipientsAction): Asset[] => {
@@ -140,6 +209,13 @@ export const getRecipients = (action: RecipientsAction): Asset[] => {
   return selected;
 };
 
+export const getRecipientsStateToAction = (state: SendBroadcastFormState): any => {
+  const legacy_vars = getExpressions(state.recipients.value);
+  const contacts = getRecipientsByAsset(state.recipients.value, AssetType.Contact);
+  const groups = getRecipientsByAsset(state.recipients.value, AssetType.Group);
+  return [legacy_vars, contacts, groups];
+};
+
 export const renderAssetList = (
   assets: Asset[],
   max: number = 10,

src/components/flow/actions/sendbroadcast/SendBroadcastForm.tsx

@@ -6,11 +6,11 @@ import AssetSelector from 'components/form/assetselector/AssetSelector';
 import TypeList from 'components/nodeeditor/TypeList';
 import { fakePropType } from 'config/ConfigProvider';
 import * as React from 'react';
-import { Asset, AssetType } from 'store/flowContext';
+import { Asset } from 'store/flowContext';
 import { AssetArrayEntry, FormState, mergeForm, StringEntry } from 'store/nodeEditor';
-import { MaxOf640Chars, MaxOfThreeItems, shouldRequireIf, validate } from 'store/validators';
+import { shouldRequireIf, validate } from 'store/validators';
 import i18n from 'config/i18n';
-import { getComposeByAsset, getEmptyComposeValue, renderIssues } from '../helpers';
+import { renderIssues, validateCompose } from '../helpers';
 import ComposeElement from 'components/form/compose/ComposeElement';
 
 export interface SendBroadcastFormState extends FormState {
@@ -51,57 +51,7 @@ export default class SendBroadcastForm extends React.Component<
     const updates: Partial<SendBroadcastFormState> = {};
 
     if (keys.hasOwnProperty('compose')) {
-      // validate empty compose value
-      if (keys.compose === getEmptyComposeValue()) {
-        updates.compose = validate(i18n.t('forms.compose', 'Compose'), '', [
-          shouldRequireIf(submitting)
-        ]);
-        updates.compose.value = keys.compose;
-        if (updates.compose.validationFailures.length > 0) {
-          let composeErrMsg = updates.compose.validationFailures[0].message;
-          composeErrMsg = composeErrMsg.replace('Compose is', 'Text or attachments are');
-          updates.compose.validationFailures[0].message = composeErrMsg;
-        }
-      } else {
-        updates.compose = validate(i18n.t('forms.compose', 'Compose'), keys.compose, [
-          shouldRequireIf(submitting)
-        ]);
-        // validate inner compose text value
-        const composeTextValue = getComposeByAsset(keys.compose, AssetType.ComposeText);
-        const composeTextResult = validate(i18n.t('forms.compose', 'Compose'), composeTextValue, [
-          MaxOf640Chars
-        ]);
-        if (composeTextResult.validationFailures.length > 0) {
-          let textErrMsg = composeTextResult.validationFailures[0].message;
-          textErrMsg = textErrMsg.replace('Compose cannot be more than', 'Maximum allowed text is');
-          composeTextResult.validationFailures[0].message = textErrMsg;
-          updates.compose.validationFailures = [
-            ...updates.compose.validationFailures,
-            ...composeTextResult.validationFailures
-          ];
-        }
-        // validate inner compose attachments value
-        const composeAttachmentsValue = getComposeByAsset(
-          keys.compose,
-          AssetType.ComposeAttachments
-        );
-        const composeAttachmentsResult = validate(
-          i18n.t('forms.compose', 'Compose'),
-          composeAttachmentsValue,
-          [MaxOfThreeItems]
-        );
-        if (composeAttachmentsResult.validationFailures.length > 0) {
-          let attachmentsErrMsg = composeAttachmentsResult.validationFailures[0].message;
-          attachmentsErrMsg = attachmentsErrMsg
-            .replace('Compose cannot have more than', 'Maximum allowed attachments is')
-            .replace('entries', 'files');
-          composeAttachmentsResult.validationFailures[0].message = attachmentsErrMsg;
-          updates.compose.validationFailures = [
-            ...updates.compose.validationFailures,
-            ...composeAttachmentsResult.validationFailures
-          ];
-        }
-      }
+      updates.compose = validateCompose(keys.compose, submitting);
     }
 
     if (keys.hasOwnProperty('recipients')) {

src/components/flow/actions/sendbroadcast/helpers.ts

@@ -1,15 +1,13 @@
 import {
   getActionUUID,
-  getCompose,
-  getComposeByAsset,
-  getExpressions,
+  getComposeActionToState,
+  getComposeStateToAction,
   getRecipients,
-  getRecipientsByAsset
+  getRecipientsStateToAction
 } from 'components/flow/actions/helpers';
 import { SendBroadcastFormState } from 'components/flow/actions/sendbroadcast/SendBroadcastForm';
 import { Types } from 'config/interfaces';
-import { BroadcastMsg, ComposeAttachment } from 'flowTypes';
-import { AssetType } from 'store/flowContext';
+import { BroadcastMsg } from 'flowTypes';
 import { NodeEditorSettings } from 'store/nodeEditor';
 
 export const initializeForm = (settings: NodeEditorSettings): SendBroadcastFormState => {
@@ -23,22 +21,22 @@ export const initializeForm = (settings: NodeEditorSettings): SendBroadcastFormS
         action = settings.localizations[0].getObject() as BroadcastMsg;
       } else {
         return {
-          compose: { value: getCompose() },
+          compose: { value: getComposeActionToState() },
           recipients: { value: [] },
           valid: true
         };
       }
     }
 
     return {
-      compose: { value: getCompose(action) },
+      compose: { value: getComposeActionToState(action) },
       recipients: { value: getRecipients(action) },
       valid: true
     };
   }
 
   return {
-    compose: { value: getCompose() },
+    compose: { value: getComposeActionToState() },
     recipients: { value: [] },
     valid: false
   };
@@ -48,16 +46,13 @@ export const stateToAction = (
   settings: NodeEditorSettings,
   formState: SendBroadcastFormState
 ): BroadcastMsg => {
-  const compose = formState.compose.value;
-  const text = getComposeByAsset(compose, AssetType.ComposeText);
-  const attachments = getComposeByAsset(compose, AssetType.ComposeAttachments).map(
-    (attachment: ComposeAttachment) => `${attachment.content_type}:${attachment.url}`
-  );
+  const [compose, text, attachments] = getComposeStateToAction(formState);
+  const [legacy_vars, contacts, groups] = getRecipientsStateToAction(formState);
 
   return {
-    legacy_vars: getExpressions(formState.recipients.value),
-    contacts: getRecipientsByAsset(formState.recipients.value, AssetType.Contact),
-    groups: getRecipientsByAsset(formState.recipients.value, AssetType.Group),
+    legacy_vars: legacy_vars,
+    contacts: contacts,
+    groups: groups,
     compose: compose,
     text: text,
     attachments: attachments,

src/components/flow/actions/sendmsg/SendMsg.tsx

@@ -4,51 +4,53 @@ import * as React from 'react';
 
 import styles from './SendMsg.module.scss';
 import i18n from 'config/i18n';
+import { ellipsize } from 'utils';
 
 export const PLACEHOLDER = i18n.t('actions.send_msg.placeholder', 'Send a message to the contact');
 
 const SendMsgComp: React.SFC<SendMsg> = (action: SendMsg): JSX.Element => {
-  if (action.text) {
-    let replies = null;
+  let replies = null;
 
-    let quickReplies = action.quick_replies || [];
-    if (quickReplies.length > 0) {
-      replies = (
-        <div className={styles.quick_replies}>
-          {quickReplies.map(reply => (
-            <Pill
-              style={{ marginLeft: 4, marginTop: 4 }}
-              maxLength={20}
-              advanced={true}
-              key={action.uuid + reply}
-              text={reply}
-            />
-          ))}
-        </div>
-      );
-    }
+  let quickReplies = action.quick_replies || [];
+  if (quickReplies.length > 0) {
+    replies = (
+      <div className={styles.quick_replies}>
+        {quickReplies.map(reply => (
+          <Pill
+            style={{ marginLeft: 4, marginTop: 4 }}
+            maxLength={20}
+            advanced={true}
+            key={action.uuid + reply}
+            text={reply}
+          />
+        ))}
+      </div>
+    );
+  }
 
-    return (
-      <>
-        <div>
-          {action.text.split(/\r?\n/).map((line: string, idx: number) => (
+  return (
+    <>
+      <div>
+        {action.text && action.text.length > 0 ? (
+          action.text.split(/\r?\n/).map((line: string, idx: number) => (
             <div key={action.uuid + idx} className={styles.line}>
-              {line}
+              {ellipsize(line, 125)}
             </div>
-          ))}
-          {action.attachments && action.attachments.length > 0 ? (
-            <div className={`${styles.attachment} fe-paperclip`} />
-          ) : null}
-          {action.templating && action.templating.template ? (
-            <div className={`${styles.whatsapp} fe-whatsapp`} />
-          ) : null}
-          {action.topic ? <div className={`${styles.facebook} fe-facebook`} /> : null}
-        </div>
-        <div className={styles.summary}>{replies}</div>
-      </>
-    );
-  }
-  return <div className="placeholder">{PLACEHOLDER}</div>;
+          ))
+        ) : (
+          <div className="placeholder">{PLACEHOLDER}</div>
+        )}
+        {action.attachments && action.attachments.length > 0 ? (
+          <div className={`${styles.attachment} fe-paperclip`} />
+        ) : null}
+        {action.templating && action.templating.template ? (
+          <div className={`${styles.whatsapp} fe-whatsapp`} />
+        ) : null}
+        {action.topic ? <div className={`${styles.facebook} fe-facebook`} /> : null}
+      </div>
+      <div className={styles.summary}>{replies}</div>
+    </>
+  );
 };
 
 export default SendMsgComp;