@capillarytech/creatives-library 7.10.39 → 7.10.41

package/v2Containers/Whatsapp/index.js

@@ -0,0 +1,831 @@
+/* eslint-disable no-undef */
+import React, { useState, useEffect } from 'react';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import { get, isEmpty, cloneDeep } from 'lodash';
+import styled from 'styled-components';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import moment from 'moment';
+import {
+  CAP_SPACE_04,
+  CAP_SPACE_16,
+  CAP_SPACE_24,
+  CAP_SPACE_32,
+  CAP_WHITE,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import { makeSelectWhatsapp, makeSelectAccount } from './selectors';
+import * as WhatsappActions from './actions';
+import './index.scss';
+import {
+  UNSUBSCRIBE_TEXT_LENGTH,
+  TEMPLATE_MESSAGE_MAX_LENGTH,
+  WHATSAPP,
+  CATEGORY_OPTIONS,
+  WHATSAPP_STATUSES,
+  TAG,
+  EMBEDDED,
+  DEFAULT,
+  FULL,
+  ALL,
+  LIBRARY,
+} from './constants';
+import messages from './messages';
+import withCreatives from '../../hoc/withCreatives';
+import TemplatePreview from '../../v2Components/TemplatePreview';
+import TagList from '../TagList';
+import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
+
+let varMap = {};
+let editContent = {};
+
+export const Whatsapp = (props) => {
+  const {
+    intl,
+    actions,
+    isFullMode,
+    onCreateComplete,
+    handleClose,
+    params,
+    templateData = {},
+    editData = {},
+    accountData = {},
+    globalActions,
+    location,
+    getDefaultTags,
+    supportedTags,
+    metaEntities,
+    injectedTags,
+  } = props || {};
+  const { formatMessage } = intl;
+  const { TextArea } = CapInput;
+  const [templateName, setTemplateName] = useState('');
+  const [templateNameError, setTemplateNameError] = useState(false);
+  const [templateCategory, setTemplateCategory] = useState(
+    formatMessage(messages.select),
+  );
+  const [templateMessage, setTemplateMessage] = useState('');
+  const [templateMessageError, setTemplateMessageError] = useState(false);
+  const [addedVarCount, setAddedVarCount] = useState(0);
+  const [accountId, setAccountId] = useState('');
+  const [accessToken, setAccessToken] = useState('');
+  const [accountName, setAccountName] = useState('');
+  const [spin, setSpin] = useState(false);
+  //for edit only
+  const [isEditFlow, setEditFlow] = useState(false);
+  const [templateDate, setTemplateDate] = useState('');
+  const [templateStatus, setTemplateStatus] = useState(
+    WHATSAPP_STATUSES.unsubmitted,
+  );
+  const [tempMsgArray, updateTempMsgArray] = useState([]);
+  const [updatedSmsEditor, setUpdatedSmsEditor] = useState([]);
+  //for tag only
+  const [tags, updateTags] = useState([]);
+  const [textAreaId, updateTextAreaId] = useState();
+
+  const validVarRegex = /{{([1-9]|1[0-9])}}/g;
+
+  const WhatsappFooter = styled.div`
+    background-color: ${CAP_WHITE};
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    margin-left: -32px;
+    padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
+
+    .ant-btn {
+      margin-right: ${CAP_SPACE_16};
+    }
+    }
+`;
+  //edit
+  //gets account details
+  useEffect(() => {
+    const accountObj = accountData.selectedWhatsappAccount || {};
+    if (!isEmpty(accountObj)) {
+      setAccountId(get(accountObj, `sourceAccountIdentifier`, ''));
+      setAccessToken(get(accountObj, `configs.accessToken`, ''));
+      setAccountName(get(accountObj, `name`, ''));
+    }
+  }, [accountData.selectedWhatsappAccount]);
+
+  //gets template details
+  const paramObj = params || {};
+  useEffect(() => {
+    const { id } = paramObj;
+    if (id && !get(templateData, `versions.base.content`)) {
+      setSpin(true);
+      actions.getTemplateDetails(id);
+      setEditFlow(true);
+    }
+    //cleanup code
+    return () => {
+      actions.resetEditTemplate();
+      varMap = {};
+    };
+  }, [paramObj.id]);
+
+  useEffect(() => {
+    editContent =
+      get(templateData, `versions.base.content.whatsapp`) ||
+      get(editData, `templateDetails.versions.base.content.whatsapp`) ||
+      {};
+    if (editContent && !isEmpty(editContent)) {
+      const editMessageTitle =
+        (templateData || {}).name || get(editData, 'templateDetails.name');
+      const createdAt =
+        (templateData || {}).createdAt ||
+        get(editData, 'templateDetails.createdAt');
+      setTemplateName(editMessageTitle);
+      setTemplateDate(createdAt);
+      setTemplateCategory(get(editContent, `category`, ''));
+      setTemplateStatus(
+        get(editContent, `status`, WHATSAPP_STATUSES.unsubmitted),
+      );
+      computeTempMsgArray();
+    }
+  }, [editData.templateDetails || templateData]);
+
+  const computeTempMsgArray = () => {
+    let msg = get(editContent, `languages[0].content`, '');
+    const validVarArr = msg.match(validVarRegex) || [];
+    const templateMessageArray = [];
+    msg = msg.slice(2, -1);
+    msg = msg.replace(
+      `Click ${validVarArr[validVarArr.length - 1]} to unsubscribe`,
+      '',
+    );
+    validVarArr.pop();
+    while (msg.length !== 0) {
+      const index = msg.indexOf(validVarArr[0]);
+      if (index !== -1) {
+        templateMessageArray.push(msg.substring(0, index));
+        templateMessageArray.push(validVarArr[0]);
+        msg = msg.substring(index + validVarArr[0].length, msg.length);
+        validVarArr.shift();
+      } else {
+        templateMessageArray.push(msg);
+        break;
+      }
+    }
+    updateTempMsgArray(templateMessageArray.filter((i) => i === 0 || i));
+    //stop spinner
+    setSpin(false);
+  };
+
+  useEffect(() => {
+    if (tempMsgArray.length !== 0) {
+      const { varMapped = {} } = editContent;
+      if (!isEmpty(varMapped)) {
+        varMap = cloneDeep(varMapped);
+      } else {
+        //computing and setting varMap for first edit
+        for (let i = 0; i < tempMsgArray.length; i += 1) {
+          if (tempMsgArray[i].match(validVarRegex)?.length > 0) {
+            varMap[`${tempMsgArray[i]}_${i}`] = '';
+          }
+        }
+      }
+      //setting updatedSmsEditor based on varMap
+      const arr = [...tempMsgArray];
+      for (const key in varMap) {
+        if (varMap[key] !== '') {
+          arr[key.slice(key.indexOf('_') + 1)] = varMap[key];
+        }
+      }
+      setUpdatedSmsEditor(arr);
+    }
+  }, [tempMsgArray]);
+
+  // tag Code start from here
+  useEffect(() => {
+    //fetching tags
+    const { type, module } = location.query || {};
+    const isEmbedded = type === EMBEDDED;
+    const query = {
+      layout: 'SMS',
+      type: TAG,
+      context: isEmbedded ? module : DEFAULT,
+      embedded: isEmbedded ? type : FULL,
+    };
+    if (getDefaultTags) {
+      query.context = getDefaultTags;
+    }
+    globalActions.fetchSchemaForEntity(query);
+  }, []);
+
+  useEffect(() => {
+    let tag =
+      metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
+    const { type, module } = location.query || {};
+    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
+      tag = supportedTags;
+    }
+    updateTags(tag);
+  }, [metaEntities]);
+
+  const handleOnTagsContextChange = (data) => {
+    const { type } = location.query || {};
+    const isEmbedded = type === EMBEDDED;
+    const query = {
+      layout: 'SMS',
+      type: TAG,
+      context:
+        (data || '').toLowerCase() === ALL
+          ? DEFAULT
+          : (data || '').toLowerCase(),
+      embedded: isEmbedded ? type : FULL,
+    };
+    globalActions.fetchSchemaForEntity(query);
+  };
+
+  const onTagSelect = (data) => {
+    if (varMap && updatedSmsEditor) {
+      let numId = Number(textAreaId?.slice(textAreaId?.indexOf('_') + 1));
+      if (numId !== NaN) {
+        const arr = [...updatedSmsEditor];
+        //when trying to insert tag in empty textarea,{#var#} is replaced with "" and then tag is added
+        if (arr[numId]?.match(validVarRegex)?.length > 0) {
+          arr[numId] = '';
+        }
+        const messageData = `${arr[numId]}{{${data}}}`;
+        arr[numId] = messageData;
+        varMap[textAreaId] = messageData;
+        setUpdatedSmsEditor(arr);
+      }
+    }
+  };
+
+  //setting the id of currently selected text area, is used onTagSelect
+  const setTextAreaId = ({ target: { id } }) => {
+    updateTextAreaId(id);
+  };
+  // tag Code end
+
+  //create methods start
+  const renderTemplateCategoryLabel = (tooltipLabel, title) => (
+    <CapRow>
+      <CapColumn span={23}>{title}</CapColumn>
+      <CapColumn span={1}>
+        <CapTooltipWithInfo
+          infoIconProps={{
+            style: { marginLeft: CAP_SPACE_16 },
+          }}
+          autoAdjustOverflow
+          placement="right"
+          title={tooltipLabel}
+        />
+      </CapColumn>
+    </CapRow>
+  );
+
+  const templateCategoryOptions = CATEGORY_OPTIONS.map((option) => ({
+    value: option.value,
+    label: renderTemplateCategoryLabel(option.tooltipLabel, option.label),
+  }));
+
+  const mediaRadioOptions = [
+    {
+      value: 'text',
+      label: formatMessage(messages.mediaTextMessage),
+    },
+    {
+      value: 'image',
+      label: (
+        <CapTooltip title={formatMessage(messages.disabledMediaTooltip)}>
+          {formatMessage(messages.mediaImage)}
+        </CapTooltip>
+      ),
+      disabled: true,
+    },
+    {
+      value: 'video',
+      label: (
+        <CapTooltip title={formatMessage(messages.disabledMediaTooltip)}>
+          {formatMessage(messages.mediaVideo)}
+        </CapTooltip>
+      ),
+      disabled: true,
+    },
+  ];
+
+  const renderLabel = (value) => (
+    <CapHeading type="h4" className="whatsapp-render-heading">
+      {formatMessage(messages[value])}
+    </CapHeading>
+  );
+
+  const renderUnsubscribeText = () => (
+    <>
+      <CapColumn span={12}>
+        <CapTooltip
+          placement="bottom"
+          title={formatMessage(messages.unsubscribeTextTooltip)}
+        >
+          <CapHeading
+            className={
+              !isEditFlow
+                ? 'whatsapp-create-render-unsubscribe-text'
+                : 'whatsapp-edit-render-unsubscribe-text'
+            }
+          >
+            {formatMessage(messages.templateMessageUnsubscribeText)}
+          </CapHeading>
+        </CapTooltip>
+      </CapColumn>
+      <CapColumn span={12}></CapColumn>
+    </>
+  );
+
+  const renderMessageLength = () => (
+    <CapHeading type="h6" className="whatsapp-render-message-length">
+      {formatMessage(messages.templateMessageLength, {
+        currentLength: UNSUBSCRIBE_TEXT_LENGTH + templateMessage?.length,
+        maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
+      })}
+    </CapHeading>
+  );
+
+  const onTemplateNameChange = ({ target: { value } }) => {
+    setTemplateName(value);
+    templateNameErrorHandler(value);
+  };
+
+  const templateNameErrorHandler = (value) => {
+    let errorMessage = false;
+    //regex to accept only lowercase alphanumeric characters and underscores
+    const templateNameRegex = /^[a-z0-9_]+$/;
+    if (value === '') {
+      errorMessage = formatMessage(messages.emptyTemplateNameErrorMessage);
+    } else if (!templateNameRegex.test(value)) {
+      errorMessage = formatMessage(messages.templateNameRegexErrorMessage);
+    }
+    setTemplateNameError(errorMessage);
+  };
+
+  const onTemplateCategoryChange = (value) => {
+    setTemplateCategory(value);
+  };
+
+  const onTemplateMessageChange = ({ target: { value } }) => {
+    const error = templateMessageErrorHandler(value);
+    setTemplateMessage(value);
+    setTemplateMessageError(error);
+  };
+
+  const templateMessageErrorHandler = (value) => {
+    let errorMessage = false;
+    if (value === '') {
+      errorMessage = formatMessage(messages.emptyTemplateMessageErrorMessage);
+    } else if (
+      UNSUBSCRIBE_TEXT_LENGTH + value?.length >
+      TEMPLATE_MESSAGE_MAX_LENGTH
+    ) {
+      errorMessage = formatMessage(messages.templateMessageLengthError);
+    } else {
+      const validVarArr = value.match(validVarRegex) || [];
+      const validVarSet = [...new Set(validVarArr)];
+
+      const invalidVarRegex = /{{(.+?)}}/g;
+      const invalidVarArr = value.match(invalidVarRegex) || [];
+      const invalidVarSet = [...new Set(invalidVarArr)];
+
+      const noContentBetweenVars = /}}[^a-zA-Z]*{{/g;
+
+      if (validVarArr?.length > 0 || invalidVarArr?.length > 0) {
+        if (validVarArr?.length !== validVarSet?.length) {
+          //checks for repetations like Hi {{1}}, offer for you {{1}}
+          errorMessage = formatMessage(messages.repetativeVars);
+        } else if (invalidVarSet?.length !== validVarSet?.length) {
+          //checks for invalid vars like Hi {{abcd}}, offer for you {{^_^}}
+          errorMessage = formatMessage(messages.unknownVars);
+        } else if (value.match(noContentBetweenVars)?.length > 0) {
+          //checks for text between vars like Hi {{1}}{{2}}
+          errorMessage = formatMessage(messages.noContentBetweenVars);
+        } else {
+          //checks if vars are added sequentially like, Hi {{1}}, offer for you {{2}} today {{3}}
+          const checkSequence = [...validVarSet].filter(
+            (validVar, index) => `{{${index + 1}}}` !== validVar,
+          );
+          if (checkSequence?.length > 0) {
+            errorMessage = formatMessage(messages.sequenceVars);
+          } else {
+            setAddedVarCount(validVarSet?.length || 0);
+          }
+        }
+      }
+    }
+    return errorMessage;
+  };
+
+  const createPayload = () => ({
+    name: templateName,
+    versions: {
+      base: {
+        content: {
+          whatsapp: {
+            category: templateCategory,
+            languages: [
+              {
+                language: 'en',
+                content: `$'${templateMessage}\nClick {{${
+                  addedVarCount + 1
+                }}} to unsubscribe'`,
+              },
+            ],
+            mediaType: 'text',
+            varMapped: {},
+            accountId,
+            accessToken,
+            accountName,
+          },
+        },
+      },
+    },
+    type: WHATSAPP,
+  });
+
+  const actionCallback = ({ errorMessage, resp }) => {
+    const error = errorMessage?.message || errorMessage;
+    if (!error) {
+      CapNotification.success({
+        message: formatMessage(messages.whatsappCreateNotification, {
+          name: templateName,
+        }),
+      });
+      actions.clearCreateResponse();
+    } else {
+      CapNotification.error({
+        message: error,
+      });
+    }
+  };
+
+  const createApprovalHandler = () => {
+    setSpin(true);
+    actions.createWhatsappTemplate(createPayload(), (resp, errorMessage) => {
+      actionCallback({ resp, errorMessage });
+      if (!errorMessage) {
+        onCreateComplete();
+      } else {
+        setSpin(false);
+      }
+    });
+  };
+
+  const onDoneCallback = () => {
+    if (isFullMode) {
+      return createApprovalHandler;
+    }
+  };
+
+  const isDisableDone = () => {
+    //if template name is not entered
+    if (templateName.trim() === '' || templateNameError) {
+      return true;
+    }
+    //if template category is not selected
+    if (templateCategory === 'Select') {
+      return true;
+    }
+    //if template message is not entered
+    if (templateMessage.trim() === '' || templateMessageError) {
+      return true;
+    }
+    return false;
+  };
+
+  const createModeContent = (
+    <>
+      {/* template name */}
+      <CapHeader
+        title={
+          <CapHeading type="h4">
+            {formatMessage(messages.templateNameLabel)}
+            <CapTooltipWithInfo
+              infoIconProps={{
+                style: { marginLeft: CAP_SPACE_04 },
+              }}
+              autoAdjustOverflow
+              title={<FormattedMessage {...messages.templateNameTooltip} />}
+            />
+          </CapHeading>
+        }
+        description={
+          <CapLabel className="whatsapp-template-name-desc">
+            {formatMessage(messages.templateNameDesc)}
+          </CapLabel>
+        }
+      />
+      <CapInput
+        id={`whatsapp_template_name_input`}
+        onChange={onTemplateNameChange}
+        errorMessage={templateNameError}
+        placeholder={formatMessage(messages.templateNamePlaceholder)}
+        defaultValue={templateName || ''}
+        value={templateName || ''}
+        size="default"
+      />
+      {/* template category */}
+      {renderLabel('templateCategoryLabel')}
+      <CapSelect
+        id={'select-whatsapp-category'}
+        options={templateCategoryOptions || []}
+        onChange={onTemplateCategoryChange}
+        value={templateCategory}
+      />
+      {/* template language */}
+      {renderLabel('messageLanguageLabel')}
+      <CapInput
+        id={`whatsapp_template_language_input`}
+        defaultValue={'English'}
+        size="default"
+        disabled={true}
+      />
+      {/* template mdeia type */}
+      {renderLabel('mediaLabel')}
+      <CapRadioGroup options={mediaRadioOptions || []} defaultValue={'text'} />
+      {/* template message create flow */}
+      <CapHeading type="h4" className="whatsapp-render-heading">
+        {formatMessage(messages.templateMessageLabel)}
+        <CapTooltipWithInfo
+          placement="right"
+          infoIconProps={{
+            style: { marginLeft: CAP_SPACE_04 },
+          }}
+          autoAdjustOverflow
+          title={
+            <FormattedMessage
+              {...messages.templateMessageTooltip}
+              values={{
+                br: <br />,
+                var: '{{1}}',
+              }}
+            />
+          }
+        />
+      </CapHeading>
+      <CapRow className="whatsapp-create-template-message-input">
+        <TextArea
+          id={`whatsapp-create-template-message-input`}
+          autosize={{ minRows: 3, maxRows: 5 }}
+          placeholder={formatMessage(messages.templateMessagePlaceholder)}
+          onChange={onTemplateMessageChange}
+          errorMessage={
+            templateMessageError && (
+              <CapError className="whatsapp-template-message-error">
+                {templateMessageError}
+              </CapError>
+            )
+          }
+          value={templateMessage || ''}
+        />
+        {renderUnsubscribeText()}
+      </CapRow>
+      {renderMessageLength()}
+    </>
+  );
+  //create methods end
+
+  //edit methods start
+  const getAlertType = () => {
+    if (templateStatus === WHATSAPP_STATUSES.approved) {
+      return 'success';
+    } else if (templateStatus === WHATSAPP_STATUSES.rejected) {
+      return 'error';
+    }
+    return 'warning';
+  };
+
+  const getAlertMessage = () => {
+    if (templateStatus === WHATSAPP_STATUSES.approved) {
+      return (
+        <CapLabel type="label2">
+          {formatMessage(messages.approvedStatusMsg)}
+        </CapLabel>
+      );
+    } else if (templateStatus === WHATSAPP_STATUSES.rejected) {
+      return (
+        <CapLabel type="label2">
+          {formatMessage(messages.rejectedStatusMsg)}
+        </CapLabel>
+      );
+    }
+    return (
+      <>
+        <CapLabel type="label2" style={{ fontWeight: 500 }}>
+          {formatMessage(messages.awaitingStatusMsg)}
+        </CapLabel>
+        <CapLabel
+          type="label2"
+          style={{ marginTop: CAP_SPACE_04, marginBottom: CAP_SPACE_04 }}
+        >
+          {formatMessage(messages.awaitingStatusDesc, {
+            date: moment(templateDate).format('D MMM YYYY'),
+            time: moment(templateDate).format('hh:mm A'),
+          })}
+        </CapLabel>
+      </>
+    );
+  };
+
+  // on change event of Text Area
+  const textAreaValueChange = ({ target: { value, id } }) => {
+    const numId = Number(id.slice(id.indexOf('_') + 1));
+    const arr = [...updatedSmsEditor];
+
+    //assign entered value to varMap
+    varMap[id] = value;
+    //based on entered value update updatedSmsEditor
+    if (value === '') {
+      arr[numId] = id.slice(0, id.indexOf('_'));
+    } else {
+      arr[numId] = value;
+    }
+    setUpdatedSmsEditor(arr);
+  };
+
+  const textAreaValue = (idValue) => {
+    if (idValue >= 0 && updatedSmsEditor) {
+      const value = updatedSmsEditor[idValue];
+      if (value && (value.match(validVarRegex) || []).length === 0) {
+        return value;
+      }
+      return '';
+    }
+    return '';
+  };
+
+  const renderedEditMessage = () => {
+    const renderArray = [];
+    if (tempMsgArray?.length !== 0) {
+      let varCount = 0;
+      tempMsgArray.forEach((elem, index) => {
+        if (elem.match(validVarRegex)?.length > 0) {
+          varCount += 1;
+          renderArray.push(
+            <TextArea
+              id={`${elem}_${index}`}
+              key={`${elem}_${index}`}
+              placeholder={formatMessage(messages.inputplaceHolderText, {
+                value: `{{${varCount}}}`,
+              })}
+              autosize={{ minRows: 1, maxRows: 3 }}
+              onChange={textAreaValueChange}
+              value={textAreaValue(index)}
+              onFocus={setTextAreaId}
+              disabled={templateStatus !== WHATSAPP_STATUSES.approved}
+            />,
+          );
+        } else {
+          renderArray.push(
+            <CapHeading
+              key={`${elem}_${index}`}
+              type="h4"
+              className="whatsapp-edit-template-message-heading"
+            >
+              {elem}
+            </CapHeading>,
+          );
+        }
+      });
+    }
+    renderArray.push(renderUnsubscribeText());
+    return renderArray;
+  };
+
+  const editModeContent = (
+    <>
+      <CapAlert message={getAlertMessage()} type={getAlertType()} />
+      <CapRow className="whatsapp-render-heading">
+        <CapHeader
+          title={
+            <CapHeading type="h4">
+              {formatMessage(messages.templateMessageLabel)}
+            </CapHeading>
+          }
+          suffix={
+            templateStatus === WHATSAPP_STATUSES.approved && (
+              <TagList
+                label={formatMessage(messages.addLabels)}
+                onTagSelect={onTagSelect}
+                location={location}
+                tags={tags || []}
+                onContextChange={handleOnTagsContextChange}
+                injectedTags={injectedTags || {}}
+              />
+            )
+          }
+        />
+      </CapRow>
+      <CapTooltip
+        title={
+          templateStatus === WHATSAPP_STATUSES.approved
+            ? ''
+            : templateStatus === WHATSAPP_STATUSES.rejected
+            ? formatMessage(messages.disabledEditTooltip, {
+                status: templateStatus,
+              })
+            : formatMessage(messages.disabledEditTooltip, {
+                status: 'awaiting for approval',
+              })
+        }
+      >
+        <CapRow
+          className={`whatsapp-edit-template-message-input ${
+            templateStatus !== WHATSAPP_STATUSES.approved &&
+            'whatsapp-edit-disabled'
+          }`}
+        >
+          {renderedEditMessage()}
+        </CapRow>
+      </CapTooltip>
+
+      {renderMessageLength()}
+    </>
+  );
+  //edit methods end
+
+  const getPreviewSection = () => {
+    const templateMsg = `${
+      isEditFlow ? updatedSmsEditor.join('') : templateMessage
+    }\n${formatMessage(messages.templateMessageUnsubscribeText)}`;
+    return (
+      <TemplatePreview
+        channel={WHATSAPP}
+        content={{ templateMsg }}
+        whatsappAccountName={accountName}
+      />
+    );
+  };
+
+  return (
+    <CapSpin spinning={spin}>
+      <CapRow>
+        <CapColumn span={14}>
+          {isEditFlow ? editModeContent : createModeContent}
+          <div className="whatsapp-scroll-div" />
+        </CapColumn>
+        <CapColumn span={6}>
+          <CapRow className={isEditFlow ? 'whatsapp-edit-alert-margin' : ''}>
+            <CapColumn span={24} offset={9}>
+              {getPreviewSection()}
+            </CapColumn>
+          </CapRow>
+        </CapColumn>
+      </CapRow>
+      <WhatsappFooter>
+        {!isEditFlow && (
+          <>
+            <CapButton
+              onClick={onDoneCallback()}
+              disabled={isDisableDone()}
+              className="whatsapp-create-btn"
+            >
+              <FormattedMessage {...messages.sendForApprovalButtonLabel} />
+            </CapButton>
+            <CapButton
+              onClick={handleClose}
+              className="whatsapp-cancel-btn"
+              type="secondary"
+            >
+              <FormattedMessage {...messages.cancelButtonLabel} />
+            </CapButton>
+          </>
+        )}
+      </WhatsappFooter>
+    </CapSpin>
+  );
+};
+
+const mapStateToProps = createStructuredSelector({
+  editData: makeSelectWhatsapp(),
+  accountData: makeSelectAccount(),
+  metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(WhatsappActions, dispatch),
+});
+
+export default withCreatives({
+  WrappedComponent: injectIntl(Whatsapp),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});