@capillarytech/creatives-library 7.10.40 → 7.10.42

package/v2Containers/Whatsapp/index.js

@@ -1,8 +1,9 @@
 /* eslint-disable no-undef */
-import React, { useState } from 'react';
+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';
@@ -15,8 +16,11 @@ 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,
@@ -24,7 +28,7 @@ import {
   CAP_SPACE_32,
   CAP_WHITE,
 } from '@capillarytech/cap-ui-library/styled/variables';
-import {} from './selectors';
+import { makeSelectWhatsapp, makeSelectAccount } from './selectors';
 import * as WhatsappActions from './actions';
 import './index.scss';
 import {
@@ -32,28 +36,42 @@ import {
   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,
-    actions,
-    onCreateComplete,
-    selectedWeChatAccount = {},
+    getDefaultTags,
+    supportedTags,
+    metaEntities,
+    injectedTags,
   } = props || {};
   const { formatMessage } = intl;
-  const {
-    name: accountName = '',
-    configs: accountConfigs = {},
-    sourceAccountIdentifier: accountId = '',
-  } = selectedWeChatAccount;
-  const { accessToken = '' } = accountConfigs;
   const { TextArea } = CapInput;
   const [templateName, setTemplateName] = useState('');
   const [templateNameError, setTemplateNameError] = useState(false);
@@ -63,11 +81,23 @@ export const Whatsapp = (props) => {
   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 StyledSelect = styled(CapSelect)`
-    margin-top: ${CAP_SPACE_16};
-  `;
+  const validVarRegex = /{{([1-9]|1[0-9])}}/g;
 
   const WhatsappFooter = styled.div`
     background-color: ${CAP_WHITE};
@@ -82,7 +112,177 @@ export const Whatsapp = (props) => {
     }
     }
 `;
+  //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 () => {
+      if (isEditFlow) {
+        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
+    if (isEditFlow) {
+      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(() => {
+    if (isEditFlow) {
+      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>
@@ -129,6 +329,46 @@ export const Whatsapp = (props) => {
     },
   ];
 
+  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>
+    </>
+  );
+
+  //used by create and edit
+  const renderMessageLength = () => (
+    <CapHeading type="h6" className="whatsapp-render-message-length">
+      {formatMessage(messages.templateMessageLength, {
+        currentLength: isEditFlow
+          ? updatedSmsEditor?.join('')?.length + UNSUBSCRIBE_TEXT_LENGTH
+          : templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH,
+        maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
+      })}
+    </CapHeading>
+  );
+
   const onTemplateNameChange = ({ target: { value } }) => {
     setTemplateName(value);
     templateNameErrorHandler(value);
@@ -149,11 +389,6 @@ export const Whatsapp = (props) => {
   const onTemplateCategoryChange = (value) => {
     setTemplateCategory(value);
   };
-  const renderHeading = (value) => (
-    <CapHeading type="h4" className="whatsapp-render-heading">
-      {formatMessage(messages[value])}
-    </CapHeading>
-  );
 
   const onTemplateMessageChange = ({ target: { value } }) => {
     const error = templateMessageErrorHandler(value);
@@ -171,7 +406,6 @@ export const Whatsapp = (props) => {
     ) {
       errorMessage = formatMessage(messages.templateMessageLengthError);
     } else {
-      const validVarRegex = /{{([1-9]|1[0-9])}}/g;
       const validVarArr = value.match(validVarRegex) || [];
       const validVarSet = [...new Set(validVarArr)];
 
@@ -179,7 +413,7 @@ export const Whatsapp = (props) => {
       const invalidVarArr = value.match(invalidVarRegex) || [];
       const invalidVarSet = [...new Set(invalidVarArr)];
 
-      const spamVar = /}}[^a-zA-Z]*{{/g;
+      const noContentBetweenVars = /}}[^a-zA-Z]*{{/g;
 
       if (validVarArr?.length > 0 || invalidVarArr?.length > 0) {
         if (validVarArr?.length !== validVarSet?.length) {
@@ -188,7 +422,7 @@ export const Whatsapp = (props) => {
         } else if (invalidVarSet?.length !== validVarSet?.length) {
           //checks for invalid vars like Hi {{abcd}}, offer for you {{^_^}}
           errorMessage = formatMessage(messages.unknownVars);
-        } else if (value.match(spamVar)?.length > 0) {
+        } else if (value.match(noContentBetweenVars)?.length > 0) {
           //checks for text between vars like Hi {{1}}{{2}}
           errorMessage = formatMessage(messages.noContentBetweenVars);
         } else {
@@ -207,44 +441,6 @@ export const Whatsapp = (props) => {
     return errorMessage;
   };
 
-  const renderUnsubscribeText = () => (
-    <>
-      <CapColumn span={12}>
-        <CapTooltip
-          placement="bottom"
-          title={formatMessage(messages.unsubscribeTextTooltip)}
-        >
-          <CapHeading className="whatsapp-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 generateVarMapped = () => {
-    const varMappedObj = {};
-    const finalIndex = addedVarCount + 1;
-    for (let i = 1; i <= finalIndex; i += 1) {
-      if (i === addedVarCount + 1) {
-        varMappedObj[i] = '{{unsubscribe}}';
-      } else {
-        varMappedObj[i] = '';
-      }
-    }
-    return varMappedObj;
-  };
-
   const createPayload = () => ({
     name: templateName,
     versions: {
@@ -261,7 +457,7 @@ export const Whatsapp = (props) => {
               },
             ],
             mediaType: 'text',
-            'var-mapped': generateVarMapped(),
+            varMapped: {},
             accountId,
             accessToken,
             accountName,
@@ -322,10 +518,270 @@ export const Whatsapp = (props) => {
     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
+        placement="bottom"
+        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
+
+  //used by create and edit
   const getPreviewSection = () => {
-    const templateMsg = `${templateMessage}\n${formatMessage(
-      messages.templateMessageUnsubscribeText,
-    )}`;
+    const templateMsg = (
+      <>
+        <CapLabel type="label5">
+          {isEditFlow ? updatedSmsEditor.join('') : templateMessage}
+        </CapLabel>
+        <CapLabel type="label11">
+          {formatMessage(messages.templateMessageUnsubscribeText)}
+        </CapLabel>
+      </>
+    );
     return (
       <TemplatePreview
         channel={WHATSAPP}
@@ -334,101 +790,16 @@ export const Whatsapp = (props) => {
       />
     );
   };
+
   return (
     <CapSpin spinning={spin}>
       <CapRow>
         <CapColumn span={14}>
-          <CapInput
-            id={`whatsapp_template_name_input`}
-            onChange={onTemplateNameChange}
-            errorMessage={templateNameError}
-            placeholder={formatMessage(messages.templateNamePlaceholder)}
-            defaultValue={templateName || ''}
-            value={templateName || ''}
-            size="default"
-            label={
-              <CapHeader
-                title={
-                  <>
-                    {formatMessage(messages.templateNameLabel)}
-                    <CapTooltipWithInfo
-                      infoIconProps={{
-                        style: { marginLeft: CAP_SPACE_04 },
-                      }}
-                      autoAdjustOverflow
-                      title={
-                        <FormattedMessage {...messages.templateNameTooltip} />
-                      }
-                    />
-                  </>
-                }
-                description={formatMessage(messages.templateNameDesc)}
-                size="regular"
-              />
-            }
-          />
-          <StyledSelect
-            id={'select-whatsapp-category'}
-            label={formatMessage(messages.templateCategoryLabel)}
-            options={templateCategoryOptions || []}
-            onChange={onTemplateCategoryChange}
-            value={templateCategory}
-          />
-          {renderHeading('messageLanguageLabel')}
-          <CapInput
-            id={`whatsapp_template_language_input`}
-            defaultValue={'English'}
-            size="default"
-            disabled={true}
-          />
-          {renderHeading('mediaLabel')}
-          <CapRadioGroup
-            options={mediaRadioOptions || []}
-            defaultValue={'text'}
-          />
-          <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-template-message-input">
-            <TextArea
-              id={`whatsapp-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()}
+          {isEditFlow ? editModeContent : createModeContent}
           <div className="whatsapp-scroll-div" />
         </CapColumn>
         <CapColumn span={6}>
-          <CapRow>
+          <CapRow className={isEditFlow ? 'whatsapp-edit-alert-margin' : ''}>
             <CapColumn span={24} offset={9}>
               {getPreviewSection()}
             </CapColumn>
@@ -436,26 +807,35 @@ export const Whatsapp = (props) => {
         </CapColumn>
       </CapRow>
       <WhatsappFooter>
-        <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>
+        {!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({});
+const mapStateToProps = createStructuredSelector({
+  editData: makeSelectWhatsapp(),
+  accountData: makeSelectAccount(),
+  metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
+});
 
 const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators(WhatsappActions, dispatch),