@capillarytech/creatives-library 7.17.81 → 7.17.82-alpha.0

package/v2Containers/Whatsapp/index.js

@@ -57,6 +57,7 @@ import {
   WHATSAPP_MEDIA_TYPES,
   WHATSAPP_BUTTON_TYPES,
   INITIAL_CTA_DATA,
+  INITIAL_QUICK_REPLY_DATA,
   ALLOWED_IMAGE_EXTENSIONS_REGEX,
   WHATSAPP_IMG_SIZE,
   HOST_TWILIO,
@@ -68,6 +69,11 @@ import {
   WHATSAPP_VIDEO_SIZE,
   DOCUMENT_FORMAT,
   DOCUMENT_SIZE,
+  TEMPLATE_HEADER_MAX_LENGTH,
+  TEMPLATE_BUTTON_TEXT_MAX_LENGTH,
+  HEADER_TEXT,
+  FOOTER_TEXT,
+  MESSAGE_TEXT
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -87,10 +93,12 @@ import { getCdnUrl } from '../../utils/cdnTransformation';
 import CapVideoUpload from '../../v2Components/CapVideoUpload';
 import CapDocumentUpload from '../../v2Components/CapDocumentUpload';
 import { getWhatsappDocPreview } from './utils';
+import CapWhatsappQuickReply from '../../v2Components/CapWhatsappQuickReply';
 
 let varMap = {};
 let editContent = {};
 let tagValidationResponse = {};
+let headerTagValidationResponse = {};
 
 export const Whatsapp = (props) => {
   const {
@@ -127,6 +135,10 @@ export const Whatsapp = (props) => {
     WHATSAPP_MEDIA_TYPES.TEXT,
   );
   const [templateMessage, setTemplateMessage] = useState('');
+  const [templateHeader, setTemplateHeader] = useState('');
+  const [templateHeaderError, setTemplateHeaderError] = useState(false);
+  const [templateFooter, setTemplateFooter] = useState('');
+  const [templateFooterError, setTemplateFooterError] = useState(false);
   const [templateMessageError, setTemplateMessageError] = useState(false);
   const [addedVarCount, setAddedVarCount] = useState(0);
   const [accountId, setAccountId] = useState('');
@@ -159,10 +171,20 @@ export const Whatsapp = (props) => {
   //buttons
   const [buttonType, setButtonType] = useState(WHATSAPP_BUTTON_TYPES.NONE);
   const [ctaData, setCtadata] = useState(INITIAL_CTA_DATA);
+  const [quickReplyData, setQuickReplyData] = useState(
+    INITIAL_QUICK_REPLY_DATA
+  );
+  const [tempHeaderData, setTempHeaderData] = useState([]);
+  const [headerVarMappedData, setHeaderVarMappedData] = useState({});
+  const [updatedHeaderData, setUpdatedHeaderData] = useState([]);
+  const [headerTextAreaId, setHeaderTextAreaId] = useState();
+  const [isHeaderTagValidationError, updateIsHeaderTagValidationError] =
+    useState(false);
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
 
   const isBtnTypeCta = buttonType === WHATSAPP_BUTTON_TYPES.CTA;
+  const isBtnTypeQuickReply = buttonType === WHATSAPP_BUTTON_TYPES.QUICK_REPLY;
   const isMediaTypeText = templateMediaType === WHATSAPP_MEDIA_TYPES.TEXT;
   const isMediaTypeImage = templateMediaType === WHATSAPP_MEDIA_TYPES.IMAGE;
   const isMediaTypeVideo = templateMediaType === WHATSAPP_MEDIA_TYPES.VIDEO;
@@ -213,6 +235,7 @@ export const Whatsapp = (props) => {
     return () => {
       actions.resetEditTemplate();
       varMap = {};
+      setHeaderVarMappedData({});
     };
   }, [paramObj.id]);
 
@@ -241,6 +264,7 @@ export const Whatsapp = (props) => {
         buttons = [],
         videoPreviewImg = '',
         whatsappDocParams = {},
+        whatsappMedia: { header = '', footer = '' } = {},
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -262,6 +286,8 @@ export const Whatsapp = (props) => {
       });
       setKarixFileHandle(karixFileHandle);
       setButtonType(btnType);
+      setTemplateFooter(footer);
+      setTemplateHeader(header);
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
         setCtadata(
           buttons.map((cta) => {
@@ -288,10 +314,59 @@ export const Whatsapp = (props) => {
           }),
         );
       }
+      if (btnType === WHATSAPP_BUTTON_TYPES.QUICK_REPLY && buttons.length > 0) {
+        setQuickReplyData(buttons);
+      }
       computeTempMsgArray();
+      if (header) {
+        computeHeaderMsgArray();
+      }
     }
   }, [editData.templateDetails || templateData]);
 
+  const computeHeaderMsgArray = () => {
+    let msg = get(editContent, `whatsappMedia.header`, '');
+    const validVarArr = msg.match(validVarRegex) || [];
+    const templateHeaderArray = [];
+    while (msg.length !== 0) {
+      //converting content string to an array split at var
+      const index = msg.indexOf(validVarArr[0]);
+      if (index !== -1) {
+        templateHeaderArray.push(msg.substring(0, index)); //push string before var
+        templateHeaderArray.push(validVarArr[0]); //push var
+        msg = msg.substring(index + validVarArr[0].length, msg.length); //remaining str
+        validVarArr.shift(); //remove considered var
+      } else {
+        templateHeaderArray.push(msg); //remaining str
+        break;
+      }
+    }
+    setTempHeaderData(templateHeaderArray);
+    if (templateHeaderArray.length !== 0) {
+      let headerVarMap = {};
+      const {
+        whatsappMedia: { headerVarMapped = {} },
+      } = editContent;
+      if (!isEmpty(headerVarMapped)) {
+        headerVarMap = cloneDeep(headerVarMapped);
+      } else {
+        for (let i = 0; i < templateHeaderArray.length; i += 1) {
+          if (templateHeaderArray[i].match(validVarRegex)?.length > 0) {
+            headerVarMap[`${templateHeaderArray[i]}_${i}`] = '';
+          }
+        }
+      }
+      const arr = [...templateHeaderArray];
+      for (const key in headerVarMap) {
+        if (headerVarMap[key] !== '') {
+          arr[key.slice(key.indexOf('_') + 1)] = headerVarMap[key];
+        }
+      }
+      setHeaderVarMappedData(headerVarMap);
+      setUpdatedHeaderData(arr);
+    }
+  };
+
   const computeTempMsgArray = () => {
     let msg = get(editContent, `languages[0].content`, '');
     const validVarArr = msg.match(validVarRegex) || [];
@@ -358,10 +433,10 @@ export const Whatsapp = (props) => {
   }, [tempMsgArray]);
 
   useEffect(() => {
-    if (tempMsgArray?.length && !loadingTags) {
+    if ((tempMsgArray?.length || tempHeaderData?.length) && !loadingTags) {
       setSpin(false);
     }
-  }, [tempMsgArray, loadingTags]);
+  }, [tempMsgArray, loadingTags, tempHeaderData]);
 
   // tag Code start from here
   useEffect(() => {
@@ -414,6 +489,26 @@ export const Whatsapp = (props) => {
     }
   }, [updatedSmsEditor, tags]);
 
+  useEffect(() => {
+    if (
+      !isFullMode &&
+      updatedHeaderData?.length > 0 &&
+      !updatedHeaderData.join('').match(validVarRegex)
+    ) {
+      headerTagValidationResponse =
+        validateTags({
+          content: updatedHeaderData.join(''),
+          tagsParam: tags,
+          injectedTagsParams: injectedTags,
+          location,
+          tagModule: getDefaultTags,
+        }) || {};
+      updateIsHeaderTagValidationError(
+        headerTagValidationResponse.unsupportedTags.length > 0
+      );
+    }
+  }, [updatedHeaderData, tags]);
+
   const handleOnTagsContextChange = (data) => {
     const { type } = location.query || {};
     const isEmbedded = type === EMBEDDED;
@@ -446,9 +541,35 @@ export const Whatsapp = (props) => {
     }
   };
 
+  const onHeaderTagSelect = (data) => {
+    if (headerVarMappedData && updatedHeaderData) {
+      const numId = Number(
+        headerTextAreaId?.slice(headerTextAreaId?.indexOf('_') + 1)
+      );
+      if (!isNaN(numId)) {
+        const arr = [...updatedHeaderData];
+        //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;
+        setHeaderVarMappedData((prevState) => ({
+          ...prevState,
+          [textAreaId]: messageData,
+        }));
+        setUpdatedHeaderData(arr);
+      }
+    }
+  };
+
   //setting the id of currently selected text area, is used onTagSelect
-  const setTextAreaId = ({ target: { id } }) => {
-    updateTextAreaId(id);
+  const setTextAreaId = ({ target: { id } }, type) => {
+    if (type === HEADER_TEXT) {
+      setHeaderTextAreaId(id);
+    } else {
+      updateTextAreaId(id);
+    }
   };
   // tag Code end
 
@@ -532,6 +653,7 @@ export const Whatsapp = (props) => {
   const onChangeButtonType = ({ target: { value } }) => {
     setButtonType(value);
     setCtadata(INITIAL_CTA_DATA);
+    setQuickReplyData(INITIAL_QUICK_REPLY_DATA);
   };
 
   const updateHandler = (data, index, full) => {
@@ -557,6 +679,16 @@ export const Whatsapp = (props) => {
     });
   };
 
+  //used by create and edit
+  const renderMessageLength = (type, currentLength) => (
+    <CapHeading type="label1" className="whatsapp-render-message-length">
+      {formatMessage(messages.templateMessageLength, {
+        currentLength: currentLength ? currentLength : computeTextLength(type),
+        maxLength: maxLengthByType(type),
+      })}
+    </CapHeading>
+  );
+
   const buttonRadioOptions = [
     {
       value: WHATSAPP_BUTTON_TYPES.NONE,
@@ -591,15 +723,11 @@ export const Whatsapp = (props) => {
     {
       value: WHATSAPP_BUTTON_TYPES.QUICK_REPLY,
       label: (
-        <CapTooltip
-          placement="bottom"
-          title={!isEditFlow && formatMessage(messages.disabledFeatureTooltip)}
-        >
+        <>
           <div
             className="whatsapp-button-quick-reply"
             style={{
-              marginTop: isBtnTypeCta ? '0px' : '24px',
-              opacity: isEditFlow ? '' : '0.4',
+              marginTop: "24px",
             }}
           >
             <CapHeading type="h4">
@@ -607,9 +735,16 @@ export const Whatsapp = (props) => {
             </CapHeading>
             <CapLabel>{formatMessage(messages.quickReplyDesc)}</CapLabel>
           </div>
-        </CapTooltip>
+          {isBtnTypeQuickReply && (
+            <CapWhatsappQuickReply
+              quickReplyData={quickReplyData}
+              isEditFlow={isEditFlow}
+              renderMessageLength={renderMessageLength}
+              setQuickReplyData={setQuickReplyData}
+            />
+          )}
+        </>
       ),
-      disabled: true,
     },
   ];
 
@@ -664,24 +799,43 @@ export const Whatsapp = (props) => {
     );
   };
 
-  const computeTextLength = () => {
-    let whatsappContentLen = 0;
-    whatsappContentLen = isEditFlow
-      ? updatedSmsEditor.join('').length
-      : templateMessage.length;
-    whatsappContentLen += unsubscribeRequired ? UNSUBSCRIBE_TEXT_LENGTH : 0;
-    return whatsappContentLen;
+  const computeTextLength = (type) => {
+    switch (type) {
+      case MESSAGE_TEXT:
+        let whatsappContentLen = 0;
+        whatsappContentLen = isEditFlow
+          ? updatedSmsEditor.join("").length
+          : templateMessage.length;
+        whatsappContentLen += unsubscribeRequired ? UNSUBSCRIBE_TEXT_LENGTH : 0;
+        return whatsappContentLen;
+      case HEADER_TEXT:
+        let headerContentLen = 0;
+        headerContentLen = isEditFlow
+          ? updatedHeaderData.join("").length
+          : templateHeader.length;
+        return headerContentLen || 0;
+      case FOOTER_TEXT:
+        return templateFooter.length || 0;
+      default:
+        let overallLength =
+          computeTextLength(MESSAGE_TEXT) +
+          computeTextLength(HEADER_TEXT) +
+          computeTextLength(FOOTER_TEXT);
+        return overallLength;
+    }
   };
 
-  //used by create and edit
-  const renderMessageLength = () => (
-    <CapHeading type="label1" className="whatsapp-render-message-length">
-      {formatMessage(messages.templateMessageLength, {
-        currentLength: computeTextLength(),
-        maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
-      })}
-    </CapHeading>
-  );
+  const maxLengthByType = (type) => {
+    switch (type) {
+      case MESSAGE_TEXT:
+        return TEMPLATE_MESSAGE_MAX_LENGTH;
+      case HEADER_TEXT:
+      case FOOTER_TEXT:
+        return TEMPLATE_HEADER_MAX_LENGTH;
+      case "buttonText":
+        return TEMPLATE_BUTTON_TEXT_MAX_LENGTH;
+    }
+  };
 
   const renderButtonsSection = () => (
     <>
@@ -866,12 +1020,45 @@ export const Whatsapp = (props) => {
     setTemplateMessageError(error);
   };
 
+  const onHeaderAddVar = () => {
+    const validVarArr = templateHeader.match(validVarRegex) || [];
+    const tempMsg = `${templateHeader}{{${validVarArr.length + 1}}}`;
+    const error = templateHeaderErrorHandler(tempMsg);
+    setTemplateHeader(tempMsg);
+    setTemplateHeaderError(error);
+  };
+
   const onTemplateMessageChange = ({ target: { value } }) => {
     const error = templateMessageErrorHandler(value);
     setTemplateMessage(value);
     setTemplateMessageError(error);
   };
 
+  const onTemplateHeaderChanges = ({ target: { value } }) => {
+    const error = templateHeaderErrorHandler(value);
+    setTemplateHeader(value);
+    setTemplateHeaderError(error);
+  };
+
+  const onTemplateFooterChanges = ({ target: { value } }) => {
+    let error = false;
+    if (value?.length > TEMPLATE_HEADER_MAX_LENGTH) {
+      error = formatMessage(messages.templateFooterLengthError);
+    }
+    setTemplateFooter(value);
+    setTemplateFooterError(error);
+  };
+
+  const templateHeaderErrorHandler = (value) => {
+    let errorMessage = false;
+    if (value?.length > TEMPLATE_HEADER_MAX_LENGTH) {
+      errorMessage = formatMessage(messages.templateHeaderLengthError);
+    } else {
+      errorMessage = variableErrorHandling(value, HEADER_TEXT);
+    }
+    return errorMessage;
+  };
+
   const templateMessageErrorHandler = (value) => {
     let errorMessage = false;
     if (value === '') {
@@ -882,41 +1069,50 @@ export const Whatsapp = (props) => {
     ) {
       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 = /}}\s*{{/g;
-      const moreThanTwoBrackets = /{{3,}([1-9]|1[0-9])}{3,}/g;
-      const consecutiveNewLines = /\n\s*\n\s*\n/;
-      if (value.match(consecutiveNewLines)) {
-        errorMessage = formatMessage(messages.removeMultinewlineChars);
-      } else 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, {one: '{{1}}', nineteen: '{{19}}'});
-        } else if (value.match(noContentBetweenVars)?.length > 0) {
-          //checks for text between vars like Hi {{1}}{{2}}
-          errorMessage = formatMessage(messages.noContentBetweenVars);
-        } else if (value.match(moreThanTwoBrackets)?.length > 0) {
-          //checks for >2 brackets {{{1}}}
-          errorMessage = formatMessage(messages.useTwoBracketsOnly);
+      errorMessage = variableErrorHandling(value, MESSAGE_TEXT);
+    }
+    return errorMessage;
+  };
+
+  const variableErrorHandling = (value, type) => {
+    let errorMessage = false;
+    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 = /}}\s*{{/g;
+    const moreThanTwoBrackets = /{{3,}([1-9]|1[0-9])}{3,}/g;
+    const consecutiveNewLines = /\n\s*\n\s*\n/;
+    if (value.match(consecutiveNewLines)) {
+      errorMessage = formatMessage(messages.removeMultinewlineChars);
+    } else 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, {
+          one: "{{1}}",
+          nineteen: "{{19}}",
+        });
+      } else if (value.match(noContentBetweenVars)?.length > 0) {
+        //checks for text between vars like Hi {{1}}{{2}}
+        errorMessage = formatMessage(messages.noContentBetweenVars);
+      } else if (value.match(moreThanTwoBrackets)?.length > 0) {
+        //checks for >2 brackets {{{1}}}
+        errorMessage = formatMessage(messages.useTwoBracketsOnly);
+      } 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, { one: "{{1}}" });
         } 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, {one: '{{1}}'});
-          } else {
-            setAddedVarCount(validVarSet?.length || 0);
-          }
+          if (type === MESSAGE_TEXT) setAddedVarCount(validVarSet?.length || 0);
         }
       }
     }
@@ -965,13 +1161,23 @@ export const Whatsapp = (props) => {
       };
     });
 
+  const getQuickReplyData = () =>
+    quickReplyData.map((quickReply) => {
+      const { index, text, type } = quickReply;
+      return {
+        index,
+        text,
+        type,
+      };
+    });
+
   const createPayload = () => {
     let mediaParams = {};
     const { whatsappVideoSrc = '', whatsappVideoPreviewImg = '' } = whatsappVideoSrcAndPreview;
     switch (templateMediaType) {
       case WHATSAPP_MEDIA_TYPES.IMAGE:
         mediaParams = {
-          imageUrl: getCdnUrl({url: whatsappImageSrc, channelName: WHATSAPP }),
+          imageUrl: getCdnUrl({ url: whatsappImageSrc, channelName: WHATSAPP }),
           karixFileHandle,
         };
         break;
@@ -992,7 +1198,7 @@ export const Whatsapp = (props) => {
       default:
         break;
     }
-    return ({
+    return {
       name: templateName,
       versions: {
         base: {
@@ -1012,16 +1218,25 @@ export const Whatsapp = (props) => {
               mediaType: templateMediaType,
               ...mediaParams,
               varMapped: !isFullMode ? varMap : {},
-              templateEditor: !isFullMode && tempMsgArray.join(''),
+              templateEditor: !isFullMode && tempMsgArray.join(""),
               accountId,
               accessToken,
               hostName: host,
+              ...(isBtnTypeQuickReply && {
+                buttonType,
+                buttons: getQuickReplyData(),
+              }),
+              whatsappMedia: {
+                header: isEditFlow && !isFullMode ? updatedHeaderData.join("") : templateHeader,
+                headerVarMapped: !isFullMode ? headerVarMappedData : {},
+                footer: templateFooter || "",
+              },
             },
           },
         },
       },
       type: WHATSAPP,
-    });
+    };
   };
 
   const actionCallback = ({ errorMessage }) => {
@@ -1103,6 +1318,10 @@ export const Whatsapp = (props) => {
       //if button type is cta and there are no buttons saved
       return true;
     }
+
+    if (isBtnTypeQuickReply) {
+      return !quickReplyData.every((quickReply) => quickReply.isSaved === true);    
+    }
     return false;
   };
 
@@ -1154,22 +1373,24 @@ export const Whatsapp = (props) => {
         onChange={onTemplateNameChange}
         errorMessage={templateNameError}
         placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
-        defaultValue={templateName || ''}
-        value={templateName || ''}
+        defaultValue={templateName || ""}
+        value={templateName || ""}
         size="default"
       />
       {/* template category */}
-      {renderLabel('templateCategoryLabel')}
+      {renderLabel("templateCategoryLabel")}
       <CapSelect
         id="select-whatsapp-category"
         options={
-          host === HOST_TWILIO ? twilioCategoryOptions : karixGupshupCategoryOptions
+          host === HOST_TWILIO
+            ? twilioCategoryOptions
+            : karixGupshupCategoryOptions
         }
         onChange={onTemplateCategoryChange}
         value={templateCategory}
       />
       {/* template language */}
-      {renderLabel('messageLanguageLabel')}
+      {renderLabel("messageLanguageLabel")}
       <CapSelect
         id="select-whatsapp-language"
         options={LANGUAGE_OPTIONS || []}
@@ -1181,7 +1402,53 @@ export const Whatsapp = (props) => {
       {renderMediaComponent()}
       {/* template message create flow */}
       <CapHeader
-        className={`${isMediaTypeImage ? 'whatsapp-heading-spacing' : ''}`}
+        className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
+        title={
+          <CapHeading type="h4" className="whatsapp-create-mode-heading">
+            {formatMessage(messages.templateHeaderLabel)}
+            <CapTooltipWithInfo
+              placement="right"
+              infoIconProps={{
+                style: { marginLeft: CAP_SPACE_04 },
+              }}
+              autoAdjustOverflow
+              title={<FormattedMessage {...messages.templateHeaderTooltip} />}
+            />
+            <CapHeading className="whatsapp-optional-label1 align-item-center">
+              {formatMessage(messages.optional)}
+            </CapHeading>
+          </CapHeading>
+        }
+        suffix={
+          <CapButton
+            type="flat"
+            isAddBtn
+            onClick={onHeaderAddVar}
+            disabled={templateHeaderError && templateHeader}
+          >
+            {formatMessage(messages.addVar)}
+          </CapButton>
+        }
+      />
+      <CapRow className="whatsapp-create-template-message-input whatsapp-create-template-header-input">
+        <TextArea
+          id="whatsapp-create-template-message-input"
+          autosize={{ minRows: 1, maxRows: 5 }}
+          placeholder={formatMessage(messages.templateMessagePlaceholder)}
+          onChange={onTemplateHeaderChanges}
+          errorMessage={
+            templateHeaderError && (
+              <CapError className="whatsapp-template-message-error">
+                {templateHeaderError}
+              </CapError>
+            )
+          }
+          value={templateHeader || ""}
+        />
+      </CapRow>
+      {renderMessageLength(HEADER_TEXT)}
+      <CapHeader
+        className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
         title={
           <CapHeading type="h4" className="whatsapp-render-heading">
             {formatMessage(messages.templateMessageLabel)}
@@ -1196,7 +1463,7 @@ export const Whatsapp = (props) => {
                   {...messages.templateMessageTooltip}
                   values={{
                     br: <br />,
-                    var: '{{1}}',
+                    var: "{{1}}",
                   }}
                 />
               }
@@ -1229,11 +1496,47 @@ export const Whatsapp = (props) => {
               </CapError>
             )
           }
-          value={templateMessage || ''}
+          value={templateMessage || ""}
         />
         {renderUnsubscribeText()}
       </CapRow>
-      {renderMessageLength()}
+      {renderMessageLength(MESSAGE_TEXT)}
+      <CapHeader
+        className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
+        title={
+          <CapHeading type="h4" className="whatsapp-create-mode-heading">
+            {formatMessage(messages.templateFooterLabel)}
+            <CapTooltipWithInfo
+              placement="right"
+              infoIconProps={{
+                style: { marginLeft: CAP_SPACE_04 },
+              }}
+              autoAdjustOverflow
+              title={<FormattedMessage {...messages.templateFooterTooltip} />}
+            />
+            <CapHeading className="whatsapp-optional-label1 align-item-center">
+              {formatMessage(messages.optional)}
+            </CapHeading>
+          </CapHeading>
+        }
+      />
+      <CapRow className="whatsapp-create-template-message-input whatsapp-create-template-header-input">
+        <TextArea
+          id="whatsapp-create-template-message-input"
+          autosize={{ minRows: 1, maxRows: 5 }}
+          placeholder={formatMessage(messages.templateMessagePlaceholder)}
+          onChange={onTemplateFooterChanges}
+          errorMessage={
+            templateFooterError && (
+              <CapError className="whatsapp-template-message-error">
+                {templateFooterError}
+              </CapError>
+            )
+          }
+          value={templateFooter || ""}
+        />
+      </CapRow>
+      {renderMessageLength(FOOTER_TEXT)}
       {renderButtonsSection()}
     </>
   );
@@ -1317,37 +1620,53 @@ export const Whatsapp = (props) => {
   };
 
   // on change event of Text Area
-  const textAreaValueChange = ({ target: { value, id } }) => {
-    const numId = Number(id.slice(id.indexOf('_') + 1));
-    const arr = [...updatedSmsEditor];
-
+  const textAreaValueChange = ({ target: { value, id } }, type) => {
+    const numId = Number(id.slice(id.indexOf("_") + 1));
     //assign entered value to varMap
-    varMap[id] = value;
-    //based on entered value update updatedSmsEditor
-    if (value === '') {
-      arr[numId] = id.slice(0, id.indexOf('_'));
+    if (type === HEADER_TEXT) {
+      const arr = [...updatedHeaderData];
+      setHeaderVarMappedData((prevState) => ({
+        ...prevState,
+        [id]: value,
+      }));
+      if (value === "") {
+        arr[numId] = id.slice(0, id.indexOf("_"));
+      } else {
+        arr[numId] = value;
+      }
+      setUpdatedHeaderData(arr);
     } else {
-      arr[numId] = value;
+      const arr = [...updatedSmsEditor];
+      varMap[id] = value;
+      //based on entered value update updatedSmsEditor
+      if (value === "") {
+        arr[numId] = id.slice(0, id.indexOf("_"));
+      } else {
+        arr[numId] = value;
+      }
+      setUpdatedSmsEditor(arr);
     }
-    setUpdatedSmsEditor(arr);
   };
 
-  const textAreaValue = (idValue) => {
-    if (idValue >= 0 && updatedSmsEditor) {
-      const value = updatedSmsEditor[idValue];
+  const textAreaValue = (idValue, type) => {
+    if (idValue >= 0) {
+      const value =
+        type === HEADER_TEXT
+          ? updatedHeaderData[idValue]
+          : updatedSmsEditor[idValue];
       //if value is there and it is not a variable return it
       if (value && (value.match(validVarRegex) || []).length === 0) {
         return value;
       }
     }
-    return '';
+    return "";
   };
 
-  const renderedEditMessage = () => {
+  const renderedEditMessage = (messageData, type) => {
     const renderArray = [];
-    if (tempMsgArray?.length !== 0) {
+    if (messageData?.length !== 0) {
       let varCount = 0;
-      tempMsgArray.forEach((elem, index) => {
+      messageData.forEach((elem, index) => {
         // if var return textarea else return text
         if (elem.match(validVarRegex)?.length > 0) {
           varCount += 1;
@@ -1359,11 +1678,11 @@ export const Whatsapp = (props) => {
                 value: `{{${varCount}}}`,
               })}
               autosize={{ minRows: 1, maxRows: 3 }}
-              onChange={textAreaValueChange}
-              value={textAreaValue(index)}
-              onFocus={setTextAreaId}
+              onChange={(e) => textAreaValueChange(e, type)}
+              value={textAreaValue(index, type)}
+              onFocus={(e) => setTextAreaId(e, type)}
               disabled={templateStatus !== WHATSAPP_STATUSES.approved}
-            />,
+            />
           );
         } else {
           renderArray.push(
@@ -1373,7 +1692,7 @@ export const Whatsapp = (props) => {
               className="whatsapp-edit-template-message-heading"
             >
               {elem}
-            </CapHeading>,
+            </CapHeading>
           );
         }
       });
@@ -1385,7 +1704,7 @@ export const Whatsapp = (props) => {
   const disabledEditTooltipRender = () => {
     switch (templateStatus) {
       case WHATSAPP_STATUSES.approved:
-        return '';
+        return "";
       case WHATSAPP_STATUSES.rejected:
         return formatMessage(messages.disabledEditTooltip, {
           status: templateStatus,
@@ -1397,9 +1716,10 @@ export const Whatsapp = (props) => {
     }
   };
 
-  const tagValidationErrorMessage = () => {
-    const { unsupportedTags = [], isBraceError} = tagValidationResponse;
-    let tagError = '';
+  const tagValidationErrorMessage = (type) => {
+    const { unsupportedTags = [], isBraceError } =
+      type === HEADER_TEXT ? headerTagValidationResponse : tagValidationResponse;
+    let tagError = "";
     if (unsupportedTags.length > 0) {
       tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
         unsupportedTags,
@@ -1420,9 +1740,54 @@ export const Whatsapp = (props) => {
         />
       )}
       {/* template media type */}
-      {renderLabel('mediaLabel')}
+      {renderLabel("mediaLabel")}
       <CapLabel type="label15">{capitalizeString(templateMediaType)}</CapLabel>
       {renderMediaComponent()}
+      {templateHeader && (
+        <>
+          <CapRow className="whatsapp-render-heading">
+            <CapHeader
+              title={
+                <CapHeading type="h4">
+                  {formatMessage(messages.templateHeaderLabel)}
+                </CapHeading>
+              }
+              suffix={
+                templateStatus === WHATSAPP_STATUSES.approved && (
+                  <TagList
+                    label={formatMessage(globalMessages.addLabels)}
+                    onTagSelect={onHeaderTagSelect}
+                    location={location}
+                    tags={tags || []}
+                    onContextChange={handleOnTagsContextChange}
+                    injectedTags={injectedTags || {}}
+                    selectedOfferDetails={selectedOfferDetails}
+                  />
+                )
+              }
+            />
+          </CapRow>
+          <CapTooltip placement="bottom" title={disabledEditTooltipRender()}>
+            <CapRow
+              className={`whatsapp-edit-template-message-input ${
+                templateStatus !== WHATSAPP_STATUSES.approved &&
+                "whatsapp-edit-disabled"
+              }`}
+            >
+              {renderedEditMessage(tempHeaderData, HEADER_TEXT)}
+            </CapRow>
+          </CapTooltip>
+          {renderMessageLength(HEADER_TEXT)}
+          {isHeaderTagValidationError && tagValidationErrorMessage(HEADER_TEXT)}
+          {computeTextLength(HEADER_TEXT) > TEMPLATE_HEADER_MAX_LENGTH ? (
+            <CapError>
+              {formatMessage(messages.templateMessageLengthError)}
+            </CapError>
+          ) : (
+            ""
+          )}
+        </>
+      )}
       <CapRow className="whatsapp-render-heading">
         <CapHeader
           title={
@@ -1452,29 +1817,55 @@ export const Whatsapp = (props) => {
             'whatsapp-edit-disabled'
           }`}
         >
-          {renderedEditMessage()}
+          {renderedEditMessage(tempMsgArray)}
         </CapRow>
       </CapTooltip>
 
-      {renderMessageLength()}
-      {isTagValidationError && tagValidationErrorMessage()}
-      {computeTextLength() > TEMPLATE_MESSAGE_MAX_LENGTH ? (
+      {renderMessageLength(MESSAGE_TEXT)}
+      {isTagValidationError && tagValidationErrorMessage(MESSAGE_TEXT)}
+      {computeTextLength(MESSAGE_TEXT) > TEMPLATE_MESSAGE_MAX_LENGTH ? (
         <CapError>
           {formatMessage(messages.templateMessageLengthError)}
         </CapError>
       ) : (
-        ''
+        ""
+      )}
+      {templateFooter && (
+        <>
+          <CapHeader
+            className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
+            title={
+              <CapHeading type="h4" className="whatsapp-render-heading">
+                {formatMessage(messages.templateFooterLabel)}
+              </CapHeading>
+            }
+          />
+          <CapRow className="whatsapp-footer-edit-container">
+            <CapHeading type="h4" className="whatsapp-footer-edit-text">
+              {templateFooter}
+            </CapHeading>
+          </CapRow>
+          {renderMessageLength(FOOTER_TEXT)}
+        </>
       )}
       {/* button section view in edit mode*/}
       <CapRow>
-        <CapHeading type="h4" className="whatsapp-render-heading">
-          {formatMessage(messages.btnLabel)}
-        </CapHeading>
-        <CapLabel type="label15">
-          {isBtnTypeCta
-            ? formatMessage(messages.btnTypeCTA)
-            : formatMessage(messages.btnTypeNone)}
-        </CapLabel>
+        {isBtnTypeQuickReply ? (
+          <CapHeading type="h4" className="whatsapp-render-heading">
+            {formatMessage(messages.quickReplyButtons)}
+          </CapHeading>
+        ) : (
+          <>
+            <CapHeading type="h4" className="whatsapp-render-heading">
+              {formatMessage(messages.btnLabel)}
+            </CapHeading>
+            <CapLabel type="label15">
+              {isBtnTypeCta
+                ? formatMessage(messages.btnTypeCTA)
+                : formatMessage(messages.btnTypeNone)}
+            </CapLabel>
+          </>
+        )}
         {isBtnTypeCta && (
           <CapWhatsappCTA
             ctaData={ctaData}
@@ -1487,6 +1878,14 @@ export const Whatsapp = (props) => {
             selectedOfferDetails={selectedOfferDetails}
           />
         )}
+        {isBtnTypeQuickReply && (
+          <CapWhatsappQuickReply
+            quickReplyData={quickReplyData}
+            isEditFlow={isEditFlow}
+            renderMessageLength={renderMessageLength}
+            setQuickReplyData={setQuickReplyData}
+          />
+        )}
       </CapRow>
     </>
   );
@@ -1497,7 +1896,7 @@ export const Whatsapp = (props) => {
     const templateMsg = (
       <>
         <CapLabel type="label5">
-          {isEditFlow ? updatedSmsEditor.join('') : templateMessage}
+          {isEditFlow ? updatedSmsEditor.join("") : templateMessage}
         </CapLabel>
         {unsubscribeRequired && (
           <CapLabel type="label5">
@@ -1506,13 +1905,24 @@ export const Whatsapp = (props) => {
         )}
       </>
     );
+    const templateHeaderPreview = (
+      <CapLabel className="whatsapp-template-header-preview">
+        {isEditFlow ? updatedHeaderData.join("") : templateHeader}
+      </CapLabel>
+    );
+    const templateFooterPreview = (
+      <CapLabel className="whatsapp-template-footer-preview">
+        {templateFooter}
+      </CapLabel>
+    );
     const mediaPreview = {};
     switch (templateMediaType) {
       case WHATSAPP_MEDIA_TYPES.IMAGE:
         mediaPreview.whatsappImageSrc = whatsappImageSrc;
         break;
       case WHATSAPP_MEDIA_TYPES.VIDEO:
-        mediaPreview.whatsappVideoPreviewImg = whatsappVideoSrcAndPreview?.whatsappVideoPreviewImg;
+        mediaPreview.whatsappVideoPreviewImg =
+          whatsappVideoSrcAndPreview?.whatsappVideoPreviewImg;
         break;
       case WHATSAPP_MEDIA_TYPES.DOCUMENT:
         mediaPreview.docPreview = docPreview;
@@ -1526,9 +1936,14 @@ export const Whatsapp = (props) => {
         content={{
           ...mediaPreview,
           templateMsg,
+          templateHeaderPreview,
+          templateFooterPreview,
           ...(isBtnTypeCta && {
             ctaData,
           }),
+          ...(isBtnTypeQuickReply && {
+            quickReplyData,
+          }),
         }}
         whatsappContentLen={computeTextLength()}
         whatsappAccountName={accountName}
@@ -1538,12 +1953,15 @@ export const Whatsapp = (props) => {
 
   const isEditDoneDisabled = () =>
     isTagValidationError ||
-    Object.values(varMap).some((inputValue) => inputValue === '') ||
-    computeTextLength() > TEMPLATE_MESSAGE_MAX_LENGTH ||
-    (isBtnTypeCta && ctaData.some((btn) => btn?.url?.includes('{{1}}'))) ||
-    (isMediaTypeImage && whatsappImageSrc === '') ||
-    (isMediaTypeVideo && whatsappVideoSrcAndPreview?.whatsappVideoSrc === '') ||
-    (isMediaTypeDoc && whatsappDocSource === '');
+    isHeaderTagValidationError ||
+    Object.values(varMap).some((inputValue) => inputValue === "") ||
+    Object.values(headerVarMappedData).some((inputValue) => inputValue === "") ||
+    computeTextLength(MESSAGE_TEXT) > TEMPLATE_MESSAGE_MAX_LENGTH ||
+    computeTextLength(HEADER_TEXT) > TEMPLATE_HEADER_MAX_LENGTH ||
+    (isBtnTypeCta && ctaData.some((btn) => btn?.url?.includes("{{1}}"))) ||
+    (isMediaTypeImage && whatsappImageSrc === "") ||
+    (isMediaTypeVideo && whatsappVideoSrcAndPreview?.whatsappVideoSrc === "") ||
+    (isMediaTypeDoc && whatsappDocSource === "");
 
   return (
     <CapSpin spinning={spin}>
@@ -1563,9 +1981,9 @@ export const Whatsapp = (props) => {
               title={
                 isDisableDone()
                   ? formatMessage(messages.btnDisabledTooltip)
-                  : ''
+                  : ""
               }
-              placement={'right'}
+              placement={"right"}
             >
               <div className="button-disabled-tooltip-wrapper">
                 <CapButton
@@ -1591,9 +2009,9 @@ export const Whatsapp = (props) => {
             title={
               isEditDoneDisabled()
                 ? formatMessage(messages.btnDisabledTooltip)
-                : ''
+                : ""
             }
-            placement={'right'}
+            placement={"right"}
           >
             <div className="button-disabled-tooltip-wrapper">
               <CapButton