@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.1

package/v2Containers/Whatsapp/index.js

@@ -5,10 +5,11 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import { get, isEmpty, cloneDeep } from 'lodash';
+import { get, isEmpty, cloneDeep, isEqual } from 'lodash';
 import styled from 'styled-components';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
@@ -25,6 +26,7 @@ import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
 import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import CapLink from '@capillarytech/cap-ui-library/CapLink';
 import moment from 'moment';
+
 import {
   CAP_SPACE_04,
   CAP_SPACE_16,
@@ -57,6 +59,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 +71,14 @@ import {
   WHATSAPP_VIDEO_SIZE,
   DOCUMENT_FORMAT,
   DOCUMENT_SIZE,
+  TEMPLATE_HEADER_MAX_LENGTH,
+  QUICK_REPLY_BUTTON_TEXT_MAX_LENGTH,
+  HEADER_TEXT,
+  FOOTER_TEXT,
+  MESSAGE_TEXT,
+  BUTTON_TEXT,
+  OTP_CONFIG_URI,
+  WHATSAPP_CATEGORIES,
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -87,10 +98,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 {
@@ -128,6 +141,10 @@ export const Whatsapp = (props) => {
   );
   const [templateMessage, setTemplateMessage] = useState('');
   const [templateMessageError, setTemplateMessageError] = useState(false);
+  const [templateHeader, setTemplateHeader] = useState('');
+  const [templateHeaderError, setTemplateHeaderError] = useState(false);
+  const [templateFooter, setTemplateFooter] = useState('');
+  const [templateFooterError, setTemplateFooterError] = useState(false);
   const [addedVarCount, setAddedVarCount] = useState(0);
   const [accountId, setAccountId] = useState('');
   const [accessToken, setAccessToken] = useState('');
@@ -135,6 +152,8 @@ export const Whatsapp = (props) => {
   const [host, setHost] = useState('');
   const [spin, setSpin] = useState(false);
   const [unsubscribeRequired, setUnsubscribeRequired] = useState(false);
+  const [securityWarningReqd, setSecurityWarningReqd] = useState(false);
+  const [expiryMinutes, setExpiryMinutes] = useState(0);
   const [whatsappImageSrc, setWhatsappImageSrc] = useState('');
   const [whatsappVideoSrcAndPreview, setWhatsappVideoSrcAndPreview] = useState({
     whatsappVideoSrc: '',
@@ -159,14 +178,29 @@ 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 [showUrlPreview, setShowUrlPreview] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState('');
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
+  const headerValidVarRegex = /{{(1)}}/g;
+  const previewUrlMatchingRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/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;
   const isMediaTypeDoc = templateMediaType === WHATSAPP_MEDIA_TYPES.DOCUMENT;
+  const isHostIsNotTwilio = host !== HOST_TWILIO;
   const WhatsappFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -213,6 +247,7 @@ export const Whatsapp = (props) => {
     return () => {
       actions.resetEditTemplate();
       varMap = {};
+      setHeaderVarMappedData({});
     };
   }, [paramObj.id]);
 
@@ -241,6 +276,8 @@ export const Whatsapp = (props) => {
         buttons = [],
         videoPreviewImg = '',
         whatsappDocParams = {},
+        whatsappMedia: { header = '', footer = '' } = {},
+        isPreviewUrl = false,
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -262,6 +299,9 @@ export const Whatsapp = (props) => {
       });
       setKarixFileHandle(karixFileHandle);
       setButtonType(btnType);
+      setTemplateFooter(footer);
+      setTemplateHeader(header);
+      setShowUrlPreview(isPreviewUrl);
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
         setCtadata(
           buttons.map((cta) => {
@@ -288,16 +328,70 @@ export const Whatsapp = (props) => {
           }),
         );
       }
+      if (btnType === WHATSAPP_BUTTON_TYPES.QUICK_REPLY && buttons?.length > 0) {
+        setQuickReplyData(buttons);
+      }
       computeTempMsgArray();
+      if (header && (mediaType === WHATSAPP_MEDIA_TYPES.TEXT && isHostIsNotTwilio)) {
+        computeHeaderMsgArray();
+      }
     }
   }, [editData.templateDetails || templateData]);
 
+  const converStringToVarArr = (validVarArr, content) => {
+    const templateVarArray = [];
+    while (content?.length !== 0) {
+      //converting content string to an array split at var
+      const index = content.indexOf(validVarArr?.[0]);
+      if (index !== -1) {
+        templateVarArray.push(content.substring(0, index)); //push string before var
+        templateVarArray.push(validVarArr?.[0]); //push var
+        content = content.substring(index + validVarArr?.[0]?.length, content?.length); //remaining str
+        validVarArr?.shift(); //remove considered var
+      } else {
+        templateVarArray.push(content); //remaining str
+        break;
+      }
+    }
+    return templateVarArray;
+  }
+
+  const computeHeaderMsgArray = () => {
+    let msg = get(editContent, `whatsappMedia.header`, '');
+    const validVarArr = msg?.match(headerValidVarRegex) || [];
+    //conerting msg string to variable arr
+    const templateHeaderArray = converStringToVarArr(validVarArr, msg);
+    setTempHeaderData(templateHeaderArray);
+    if (templateHeaderArray?.length !== 0) {
+      let headerVarMap = {};
+      const {
+        whatsappMedia: { headerVarMapped = {} },
+      } = editContent;
+      if (!isEmpty(headerVarMapped)) {
+        headerVarMap = cloneDeep(headerVarMapped);
+      } else {
+        templateHeaderArray?.forEach((headerValue, i) => {
+          if (headerValue?.match(headerValidVarRegex)?.length > 0) {
+            headerVarMap[`${headerValue}_${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) || [];
     const unsubscribeRegex1 = /Click {{([1-9]|1[0-9])}} to unsubscribe/g;
     const unsubscribeRegex2 = /Click {{unsubscribe}} to unsubscribe/g;
-    const templateMessageArray = [];
     //removing $'' which was added for twilio enter handling
     // msg = msg.slice(2, -1);
     if (
@@ -317,19 +411,11 @@ export const Whatsapp = (props) => {
       }
       setUnsubscribeRequired(true);
     }
-    while (msg.length !== 0) {
-      //converting content string to an array split at var
-      const index = msg.indexOf(validVarArr[0]);
-      if (index !== -1) {
-        templateMessageArray.push(msg.substring(0, index)); //push string before var
-        templateMessageArray.push(validVarArr[0]); //push var
-        msg = msg.substring(index + validVarArr[0].length, msg.length); //remaining str
-        validVarArr.shift(); //remove considered var
-      } else {
-        templateMessageArray.push(msg); //remaining str
-        break;
-      }
+    if(msg?.includes(formatMessage(messages.securitySuffix))){
+      setUnsubscribeRequired(true);
     }
+    //converting msg string to variable arr
+    const templateMessageArray = converStringToVarArr(validVarArr, msg);
     updateTempMsgArray(templateMessageArray.filter((i) => i === 0 || i));
   };
 
@@ -353,15 +439,20 @@ export const Whatsapp = (props) => {
           arr[key.slice(key.indexOf('_') + 1)] = varMap[key];
         }
       }
+      // extract preview url from message
+      if (arr?.length) {
+        const validUrls = arr.join("").match(previewUrlMatchingRegex) || [];
+        setPreviewUrl(validUrls?.[0] || '')
+      }
       setUpdatedSmsEditor(arr);
     }
   }, [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(() => {
@@ -393,27 +484,72 @@ export const Whatsapp = (props) => {
     }
   }, [metaEntities, isEditFlow]);
 
-  //performs tag validation
-  useEffect(() => {
-    if (
-      !isFullMode &&
-      updatedSmsEditor?.length > 0 &&
-      !updatedSmsEditor.join('').match(validVarRegex)
-    ) {
-      tagValidationResponse =
+  const tagValidation = (contentData, regex, type) => {
+    if (contentData?.length > 0 && !contentData.join("").match(regex)) {
+      const validationResponse =
         validateTags({
-          content: updatedSmsEditor.join(''),
+          content: contentData.join(""),
           tagsParam: tags,
           injectedTagsParams: injectedTags,
           location,
           tagModule: getDefaultTags,
         }) || {};
-      updateIsTagValidationError(
-        tagValidationResponse.unsupportedTags.length > 0,
-      );
+      const unsupportedTagsLengthCheck =
+        validationResponse?.unsupportedTags?.length > 0;
+      if (type === HEADER_TEXT) {
+        headerTagValidationResponse = validationResponse;
+        updateIsHeaderTagValidationError(unsupportedTagsLengthCheck);
+      } else {
+        tagValidationResponse = validationResponse;
+        updateIsTagValidationError(unsupportedTagsLengthCheck);
+      }
     }
+  };
+
+  // as per change in message body we filter out url using regex
+  // preview URL is not supported by the Gateway (Karix/Gupshup), show hiding it for now. once the Gateway support is available, previewUrl option would be shown.
+  // useEffect(() => {
+  //   if (updatedSmsEditor?.length > 0) {
+  //     const previewUrlArr = updatedSmsEditor.join("").match(previewUrlMatchingRegex) || [];
+  //     if (previewUrlArr?.length > 0) {
+  //       setPreviewUrl(previewUrlArr[0]);
+  //     } else {
+  //       setPreviewUrl('');
+  //     }
+  //   } 
+  // }, [updatedSmsEditor])
+
+  // const debounceFn = useCallback(
+  //   debounce(url => {
+  //     actions.getMetaTags({
+  //       previewUrl: url,
+  //       callBack: actionCallback,
+  //     })
+  //   }, 500),
+  //   [],
+  // );
+
+  // as per change in url and preview checkbox we call api and extract the meta information of url
+  // we will open once preview url support
+  // useEffect(() => {
+  //   if (!isEmpty(previewUrl) && showUrlPreview) {
+  //     debounceFn(previewUrl);
+  //   } else {
+  //     actions.resetMetaTags();
+  //   }
+  // }, [previewUrl, showUrlPreview])
+
+  //performs tag validation
+  useEffect(() => {
+    if (!isFullMode)
+      tagValidation(updatedSmsEditor, validVarRegex, MESSAGE_TEXT);
   }, [updatedSmsEditor, tags]);
 
+  useEffect(() => {
+    if (!isFullMode)
+      tagValidation(updatedHeaderData, headerValidVarRegex, HEADER_TEXT);
+  }, [updatedHeaderData, tags]);
+
   const handleOnTagsContextChange = (data) => {
     const { type } = location.query || {};
     const isEmbedded = type === EMBEDDED;
@@ -429,26 +565,68 @@ export const Whatsapp = (props) => {
     globalActions.fetchSchemaForEntity(query);
   };
 
-  const onTagSelect = (data) => {
-    if (varMap && updatedSmsEditor) {
-      const numId = Number(textAreaId?.slice(textAreaId?.indexOf('_') + 1));
-      if (numId != NaN) {
-        const arr = [...updatedSmsEditor];
+  const onTagSelect = (tagSelectData) => {
+    const {
+      data = "",
+      type = MESSAGE_TEXT,
+      mapData = {},
+      updatedData = [],
+      areaId = "",
+      regex,
+    } = tagSelectData;
+    if (mapData && updatedData) {
+      const numId = Number(areaId?.slice(areaId?.indexOf("_") + 1));
+      if (!isNaN(numId)) {
+        const arr = [...updatedData];
         //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] = '';
+        if (arr?.[numId]?.match(regex)?.length > 0) {
+          arr[numId] = "";
         }
         const messageData = `${arr[numId]}{{${data}}}`;
         arr[numId] = messageData;
-        varMap[textAreaId] = messageData;
-        setUpdatedSmsEditor(arr);
+        if (type === HEADER_TEXT) {
+          setHeaderVarMappedData((prevState) => ({
+            ...prevState,
+            [areaId]: messageData,
+          }));
+          setUpdatedHeaderData(arr);
+        } else {
+          varMap[areaId] = messageData;
+          setUpdatedSmsEditor(arr);
+        }
       }
     }
   };
 
+  const onMessageTagSelect = (data) => {
+    onTagSelect({
+      data,
+      type: MESSAGE_TEXT,
+      mapData: varMap,
+      updatedData: updatedSmsEditor,
+      areaId: textAreaId,
+      regex: validVarRegex,
+    });
+  };
+
+  const onHeaderTagSelect = (data) => {
+    onTagSelect({
+      data,
+      type: HEADER_TEXT,
+      mapData: headerVarMappedData,
+      updatedData: updatedHeaderData,
+      areaId: headerTextAreaId,
+      regex: headerValidVarRegex,
+    });
+  };
+
   //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
 
@@ -528,10 +706,11 @@ export const Whatsapp = (props) => {
       disabled: host === HOST_TWILIO,
     },
   ];
-
+const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.authentication);
   const onChangeButtonType = ({ target: { value } }) => {
     setButtonType(value);
     setCtadata(INITIAL_CTA_DATA);
+    setQuickReplyData(INITIAL_QUICK_REPLY_DATA);
   };
 
   const updateHandler = (data, index, full) => {
@@ -557,6 +736,42 @@ export const Whatsapp = (props) => {
     });
   };
 
+  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 = (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,25 +806,26 @@ 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',
-            }}
           >
             <CapHeading type="h4">
               {formatMessage(messages.btnTypeQuickReply)}
             </CapHeading>
             <CapLabel>{formatMessage(messages.quickReplyDesc)}</CapLabel>
           </div>
-        </CapTooltip>
+          {isBtnTypeQuickReply && (
+            <CapWhatsappQuickReply
+              quickReplyData={quickReplyData}
+              isEditFlow={isEditFlow}
+              renderMessageLength={renderMessageLength}
+              setQuickReplyData={setQuickReplyData}
+            />
+          )}
+        </>
       ),
-      disabled: true,
+      disabled: host === HOST_TWILIO
     },
   ];
 
@@ -621,15 +837,45 @@ export const Whatsapp = (props) => {
 
   const unsubscribeHandler = ({ target: { checked } }) => {
     setUnsubscribeRequired(checked);
+    if (isAuthenticationTemplate) {
+      if (checked && !templateMessage?.includes(formatMessage(messages.securitySuffix))) {
+        setTemplateMessage(`${templateMessage} ${formatMessage(messages.securitySuffix)}`);
+      } else {
+        setTemplateMessage(formatMessage(messages.authenticationMsg));
+      }
+    }
+    const error = templateMessageErrorHandler(templateMessage);
+    setTemplateMessageError(error);
+  };
+
+  const extraSecurityFooter = ({ target: { checked = false } } = {}) => {
+    setSecurityWarningReqd(checked);
+    setExpiryMinutes(0);
+    if (checked) {
+      setTemplateFooter(formatMessage(messages.codeExpiryNumMinutes).replace(formatMessage(messages.numMinutes), ''));
+    } else {
+      setTemplateFooter("");
+    }
     const error = templateMessageErrorHandler(templateMessage);
     setTemplateMessageError(error);
   };
 
+  const changeExpiryMinutes =(event) => {
+    setExpiryMinutes(event);
+    const footerContent =`${formatMessage(
+      messages.codeExpiryNumMinutes,
+    )}` ;
+    setTemplateFooter(footerContent.replace(formatMessage(messages.numMinutes), event));
+  }
+
   const renderUnsubscribeText = () => {
     const isDisabled =
       isEditFlow ||
-      templateMessage.length + UNSUBSCRIBE_TEXT_LENGTH >
+      templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH >
         TEMPLATE_MESSAGE_MAX_LENGTH;
+    const messageFooter = isAuthenticationTemplate ?
+      formatMessage(messages.templateSecurityDisclaimer):
+      formatMessage(messages.templateMessageUnsubscribeText, { unsubscribe: '{{unsubscribe}}' });
     return (
       <>
         <CapColumn span={12}>
@@ -654,35 +900,27 @@ export const Whatsapp = (props) => {
               }
             >
               <span className="whatsapp-render-unsubscribe-text">
-                {formatMessage(messages.templateMessageUnsubscribeText, { unsubscribe: '{{unsubscribe}}'})}
+                {messageFooter}
               </span>
             </CapTooltip>
           </CapCheckbox>
         </CapColumn>
-        <CapColumn span={12}></CapColumn>
       </>
     );
   };
 
-  const computeTextLength = () => {
-    let whatsappContentLen = 0;
-    whatsappContentLen = isEditFlow
-      ? updatedSmsEditor.join('').length
-      : templateMessage.length;
-    whatsappContentLen += unsubscribeRequired ? UNSUBSCRIBE_TEXT_LENGTH : 0;
-    return whatsappContentLen;
+  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 BUTTON_TEXT:
+        return QUICK_REPLY_BUTTON_TEXT_MAX_LENGTH;
+    }
   };
 
-  //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 renderButtonsSection = () => (
     <>
       <CapHeader
@@ -692,21 +930,25 @@ export const Whatsapp = (props) => {
             <CapHeading type="h4">
               {formatMessage(messages.btnLabel)}
             </CapHeading>
-            <CapHeading className="whatsapp-optional-label">
+            {!isAuthenticationTemplate && <CapHeading className="whatsapp-optional-label">
               {formatMessage(messages.optional)}
-            </CapHeading>
+            </CapHeading>}
           </CapRow>
         }
         description={
           <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
         }
       />
-      <CapRadioGroup
-        options={buttonRadioOptions}
-        value={buttonType}
-        onChange={onChangeButtonType}
-        className="whatsapp-btn-radio-group"
-      />
+      {isAuthenticationTemplate ?
+        <CapWhatsappQuickReply
+          authenticationFlow={true}
+        /> :
+        <CapRadioGroup
+          options={buttonRadioOptions}
+          value={buttonType}
+          onChange={onChangeButtonType}
+          className="whatsapp-btn-radio-group"
+        />}
     </>
   );
 
@@ -838,13 +1080,33 @@ export const Whatsapp = (props) => {
       errorMessage = formatMessage(
         globalMessages.emptyTemplateNameErrorMessage,
       );
+    } else if (value.length < 3 && host === HOST_GUPSHUP) {
+      errorMessage = formatMessage(messages.templateNameMinCharacters);
     } else if (!templateNameRegex.test(value)) {
       errorMessage = formatMessage(messages.templateNameRegexErrorMessage);
     }
     setTemplateNameError(errorMessage);
   };
 
+  const resetCategoryRelatedStates = () => {
+    setTemplateHeader('');
+    setTemplateFooter('');
+    setExpiryMinutes(0);
+    setUnsubscribeRequired(false);
+    setCtadata({});
+    setQuickReplyData({});
+    setTemplateMediaType(WHATSAPP_MEDIA_TYPES.TEXT)
+    setGupshupMediaFile();
+    setKarixFileHandle('');
+  };
+
   const onTemplateCategoryChange = (value) => {
+    if (value === WHATSAPP_CATEGORIES.authentication) {
+      resetCategoryRelatedStates();
+      setTemplateMessage(formatMessage(messages.authenticationMsg));
+    } else {
+      setTemplateMessage('');
+    }
     setTemplateCategory(value);
   };
 
@@ -856,18 +1118,56 @@ export const Whatsapp = (props) => {
     setTemplateMediaType(value);
   };
 
-  const onAddVar = () => {
-    const validVarArr = templateMessage.match(validVarRegex) || [];
-    const tempMsg = `${templateMessage}{{${validVarArr.length + 1}}}`;
-    const error = templateMessageErrorHandler(tempMsg);
-    setTemplateMessage(tempMsg);
-    setTemplateMessageError(error);
+  const onMessageAddVar = () => {
+    onAddVar(MESSAGE_TEXT, templateMessage, validVarRegex);
   };
 
-  const onTemplateMessageChange = ({ target: { value } }) => {
-    const error = templateMessageErrorHandler(value);
-    setTemplateMessage(value);
-    setTemplateMessageError(error);
+  const onHeaderAddVar = () => {
+    onAddVar(HEADER_TEXT, templateHeader, headerValidVarRegex);
+  };
+
+  const onAddVar = (type, messageContent, regex) => {
+    const validVarArr = messageContent.match(regex) || [];
+    const tempMsg = `${messageContent}{{${validVarArr.length + 1}}}`;
+    const error = type === HEADER_TEXT ? templateHeaderErrorHandler(tempMsg) : templateMessageErrorHandler(tempMsg);
+    if (type === HEADER_TEXT) {
+      setTemplateHeader(tempMsg);
+      setTemplateHeaderError(error);
+    } else {
+      setTemplateMessage(tempMsg);
+      setTemplateMessageError(error);
+    }
+  }
+
+  const onTemplateValueChange = ({ target: { value } }, type) => {
+    if (type === HEADER_TEXT) {
+      const error = templateHeaderErrorHandler(value);
+      setTemplateHeader(value);
+      setTemplateHeaderError(error);
+    } else {
+      const error = templateMessageErrorHandler(value);
+      setTemplateMessage(value);
+      setTemplateMessageError(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) => {
@@ -880,41 +1180,58 @@ 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);
+    }
+    //we are not allowing user input incase of authentication flow 
+    if(isAuthenticationTemplate){
+      errorMessage = false;
+    }
+    return errorMessage;
+  };
+
+  const variableErrorHandling = (value, type) => {
+    let errorMessage = false;
+    const validVarArr = value.match(type === HEADER_TEXT ? headerValidVarRegex : 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 {{^_^}}
+        if (type === HEADER_TEXT) {
+          errorMessage = formatMessage(messages.headerUnknownVars);
         } 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);
-          }
+          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 {
+          if (type === MESSAGE_TEXT) setAddedVarCount(validVarSet?.length || 0);
         }
       }
     }
@@ -927,11 +1244,12 @@ export const Whatsapp = (props) => {
       if (unsubscribeRequired) {
         return `${updatedSmsEditor.join('')}\n${formatMessage(
           messages.templateMessageUnsubscribeText,
+          { unsubscribe: "{{unsubscribe}}" }
         )}`;
       }
       //campaigns edit flow + unsubscribeNotRequired
       return updatedSmsEditor.join('');
-    } else if (unsubscribeRequired) {
+    } else if (unsubscribeRequired && !isAuthenticationTemplate) {
       //creatives create and edit flow + unsubscribeRequired
       return `${templateMessage}\n${formatMessage(
         messages.modifiedUnsubscribeText,
@@ -963,13 +1281,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;
@@ -990,7 +1318,7 @@ export const Whatsapp = (props) => {
       default:
         break;
     }
-    return ({
+    return {
       name: templateName,
       versions: {
         base: {
@@ -1010,16 +1338,35 @@ 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: {
+                ...(isMediaTypeText && isHostIsNotTwilio && {
+                  header: isEditFlow && !isFullMode ? updatedHeaderData.join("") : templateHeader,
+                  headerVarMapped: !isFullMode ? headerVarMappedData : {},
+                  headerTemplate: !isFullMode && tempHeaderData.join(""),
+                }),
+                ...(isHostIsNotTwilio && {
+                  footer: templateFooter || ""
+                }),
+              },
+              ...(isEditFlow && !isFullMode && {
+                isPreviewUrl: showUrlPreview
+              }),
+              securityRecommendation: unsubscribeRequired,
+              codeExpiryMinutes: expiryMinutes,
             },
           },
         },
       },
       type: WHATSAPP,
-    });
+    };
   };
 
   const actionCallback = ({ errorMessage }) => {
@@ -1063,7 +1410,8 @@ export const Whatsapp = (props) => {
       type: WHATSAPP,
     });
   };
-
+  const isMediatypeValid =()=> ((isMediaTypeImage && whatsappImageSrc === "") || (isMediaTypeVideo && whatsappVideoSrcAndPreview?.whatsappVideoSrc === "") || (isMediaTypeDoc && whatsappDocSource === ""));
+  
   const isDisableDone = () => {
     //if template name is not entered
     if (templateName.trim() === '' || templateNameError) {
@@ -1078,11 +1426,15 @@ export const Whatsapp = (props) => {
       return true;
     }
     //if template message is not entered
-    if (templateMessage.trim() === '' || templateMessageError) {
+    if (templateMessage?.trim() === '' || templateMessageError) {
       return true;
     }
     //if media type is image, video or document and the mediaType file is not uploaded
-    if (!isMediaTypeText && host === HOST_KARIX && karixFileHandle === '') {
+    
+    if (!isMediaTypeText && isMediatypeValid() ) {
+      return true;
+    }
+    if (templateHeaderError || templateFooterError) {
       return true;
     }
     //cta
@@ -1101,19 +1453,27 @@ export const Whatsapp = (props) => {
       //if button type is cta and there are no buttons saved
       return true;
     }
+
+    if(isAuthenticationTemplate && securityWarningReqd && !expiryMinutes){
+      return true;
+    }
+    if (isBtnTypeQuickReply) {
+      return !quickReplyData.every((quickReply) => quickReply?.isSaved === true);    
+    }
     return false;
   };
 
   const renderMediaSection = () => (
     <>
-      {renderLabel('mediaLabel')}
-      <CapRadioGroup
-        id="whatsapp-media-radio"
-        options={mediaRadioOptions}
-        value={templateMediaType}
-        onChange={onTemplateMediaTypeChange}
-        className="whatsapp-media-radio"
-      />
+      {!isAuthenticationTemplate && <>{renderLabel('mediaLabel')}
+        <CapRadioGroup
+          id="whatsapp-media-radio"
+          options={mediaRadioOptions}
+          value={templateMediaType}
+          onChange={onTemplateMediaTypeChange}
+          className="whatsapp-media-radio"
+        />
+      </>}
     </>
   );
 
@@ -1133,9 +1493,7 @@ export const Whatsapp = (props) => {
           <CapHeading type="h4">
             {formatMessage(globalMessages.templateNameLabel)}
             <CapTooltipWithInfo
-              infoIconProps={{
-                style: { marginLeft: CAP_SPACE_04 },
-              }}
+              className="whatsapp-text-field_spacing"
               autoAdjustOverflow
               title={<FormattedMessage {...messages.templateNameTooltip} />}
             />
@@ -1152,22 +1510,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 || []}
@@ -1177,24 +1537,77 @@ export const Whatsapp = (props) => {
       {/* template media type */}
       {renderMediaSection()}
       {renderMediaComponent()}
+      {/* this section is for header section in create mode */}
+      {isMediaTypeText && isHostIsNotTwilio && !isAuthenticationTemplate && (
+        <>
+          <CapHeader
+            title={
+              <CapHeading type="h4" className="whatsapp-create-mode-heading">
+                {formatMessage(messages.templateHeaderLabel)}
+                <CapTooltipWithInfo
+                  placement="right"
+                  className="whatsapp-text-field_spacing"
+                  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={
+                  ((templateHeader.match(headerValidVarRegex) || []).length >
+                    0 ||
+                    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={(e) => onTemplateValueChange(e, HEADER_TEXT)}
+              errorMessage={
+                templateHeaderError && (
+                  <CapError className="whatsapp-template-message-error">
+                    {templateHeaderError}
+                  </CapError>
+                )
+              }
+              value={templateHeader || ""}
+            />
+          </CapRow>
+          {renderMessageLength(HEADER_TEXT)}
+        </>
+      )}
       {/* template message create flow */}
       <CapHeader
-        className={`${isMediaTypeImage ? 'whatsapp-heading-spacing' : ''}`}
+        className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
         title={
           <CapHeading type="h4" className="whatsapp-render-heading">
             {formatMessage(messages.templateMessageLabel)}
             <CapTooltipWithInfo
               placement="right"
-              infoIconProps={{
-                style: { marginLeft: CAP_SPACE_04 },
-              }}
+              className="whatsapp-text-field_spacing"
               autoAdjustOverflow
               title={
                 <FormattedMessage
                   {...messages.templateMessageTooltip}
                   values={{
                     br: <br />,
-                    var: '{{1}}',
+                    var: "{{1}}",
                   }}
                 />
               }
@@ -1202,16 +1615,22 @@ export const Whatsapp = (props) => {
           </CapHeading>
         }
         suffix={
-          <CapButton
-            type="flat"
-            isAddBtn
-            onClick={onAddVar}
-            disabled={
-              (addedVarCount >= 19 || templateMessageError) && templateMessage
-            }
-          >
-            {formatMessage(messages.addVar)}
-          </CapButton>
+          <>
+            {!isAuthenticationTemplate && (
+              <CapButton
+                data-testid="suffix-button"
+                type="flat"
+                isAddBtn
+                onClick={onMessageAddVar}
+                disabled={
+                  (addedVarCount >= 19 || templateMessageError) &&
+                  templateMessage
+                }
+              >
+                {formatMessage(messages.addVar)}
+              </CapButton>
+            )}
+          </>
         }
       />
       <CapRow className="whatsapp-create-template-message-input">
@@ -1219,7 +1638,7 @@ export const Whatsapp = (props) => {
           id="whatsapp-create-template-message-input"
           autosize={{ minRows: 3, maxRows: 5 }}
           placeholder={formatMessage(messages.templateMessagePlaceholder)}
-          onChange={onTemplateMessageChange}
+          onChange={(e) => onTemplateValueChange(e, MESSAGE_TEXT)}
           errorMessage={
             templateMessageError && (
               <CapError className="whatsapp-template-message-error">
@@ -1227,11 +1646,120 @@ export const Whatsapp = (props) => {
               </CapError>
             )
           }
-          value={templateMessage || ''}
+          value={templateMessage || ""}
+          disabled={isAuthenticationTemplate}
         />
         {renderUnsubscribeText()}
       </CapRow>
-      {renderMessageLength()}
+      {renderMessageLength(MESSAGE_TEXT)}
+      {/* this section if for footer in create mode */}
+      {isHostIsNotTwilio && (
+        <>
+          <CapHeader
+            className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
+            title={
+              <CapHeading type="h4" className="whatsapp-create-mode-heading">
+                {formatMessage(messages.templateFooterLabel)}
+                <CapTooltipWithInfo
+                  placement="right"
+                  className="whatsapp-text-field_spacing"
+                  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">
+            {isAuthenticationTemplate ? (
+              <CapRow className="whatsapp-extra-security-footer">
+                <CapCheckbox
+                  onChange={extraSecurityFooter}
+                  checked={securityWarningReqd}
+                  disabled={isEditFlow}
+                  autoFocus={true}
+                  className="whatsapp-unsubscribe-checkbox"
+                >
+                  <CapLabel.CapLabelInline
+                    type="label2"
+                    className="whatsapp-render-unsubscribe-text"
+                  >
+                    {formatMessage(messages.expirationWarning)}
+                  </CapLabel.CapLabelInline>
+                </CapCheckbox>
+                {securityWarningReqd && (
+                  <>
+                    <CapRow className="whatsapp-extra-security-footer-input">
+                      {formatMessage(messages.codeExpiresIn)}
+                      <CapInput.Number
+                        min={0}
+                        max={90}
+                        placeholder={formatMessage(messages.enterExpiryTime)}
+                        onChange={(event) => changeExpiryMinutes(event)}
+                      />
+                      {formatMessage(messages.minutes)}
+                    </CapRow>
+                    <CapRow className="whatsapp-extra-security-footer-note">
+                      {formatMessage(messages.expiryCodeNote)}
+                      <CapTooltip
+                        title={
+                          <CapHeader
+                            titleClass="whatsapp-tooltip-header"
+                            descriptionClass="whatsapp-tooltip-header"
+                            size="regular"
+                            title={formatMessage(
+                              messages.checkExpiryTooltipHeader
+                            )}
+                            description={formatMessage(
+                              messages.checkExpiryTooltipDesc
+                            )}
+                          />
+                        }
+                      >
+                        
+                        <CapButton
+                          type="flat"
+                          className="add-btn"
+                          onClick={() =>
+                            window.open(
+                              `${window.location.origin}${OTP_CONFIG_URI}`,
+                              "_blank"
+                            )
+                          }
+                        >
+                          {formatMessage(messages.checkExpiryCode)}
+                          <CapIcon size="s" type="launch"/>
+                        </CapButton>
+                      </CapTooltip>
+                    </CapRow>
+                  </>
+                )}
+              </CapRow>
+            ) : (
+              <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 || ""}
+                disabled={isAuthenticationTemplate}
+              />
+            )}
+          </CapRow>
+          {renderMessageLength(FOOTER_TEXT)}
+        </>
+      )}
       {renderButtonsSection()}
     </>
   );
@@ -1315,39 +1843,55 @@ 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) {
+      if (value && (value.match(type === HEADER_TEXT ? headerValidVarRegex : 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) {
+        if (elem.match(type === HEADER_TEXT ? headerValidVarRegex : validVarRegex)?.length > 0) {
           varCount += 1;
           renderArray.push(
             <TextArea
@@ -1357,11 +1901,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(
@@ -1371,19 +1915,21 @@ export const Whatsapp = (props) => {
               className="whatsapp-edit-template-message-heading"
             >
               {elem}
-            </CapHeading>,
+            </CapHeading>
           );
         }
       });
     }
-    renderArray.push(renderUnsubscribeText());
+    if (type !== HEADER_TEXT) {
+      renderArray.push(renderUnsubscribeText());
+    }
     return renderArray;
   };
 
   const disabledEditTooltipRender = () => {
     switch (templateStatus) {
       case WHATSAPP_STATUSES.approved:
-        return '';
+        return "";
       case WHATSAPP_STATUSES.rejected:
         return formatMessage(messages.disabledEditTooltip, {
           status: templateStatus,
@@ -1395,9 +1941,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,
@@ -1418,9 +1965,53 @@ export const Whatsapp = (props) => {
         />
       )}
       {/* template media type */}
-      {renderLabel('mediaLabel')}
+      {renderLabel("mediaLabel")}
       <CapLabel type="label15">{capitalizeString(templateMediaType)}</CapLabel>
       {renderMediaComponent()}
+      {/* this section is for render header section */}
+      {(templateHeader && isMediaTypeText && isHostIsNotTwilio) && (
+        <>
+          <CapRow className="whatsapp-render-heading">
+            <CapHeader
+              title={
+                <CapHeading type="h4">
+                  {formatMessage(messages.templateHeaderLabel)}
+                </CapHeading>
+              }
+              suffix={
+                templateStatus === WHATSAPP_STATUSES.approved && !isAuthenticationTemplate && (
+                  <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.templateHeaderLengthError)}
+            </CapError>
+          )}
+        </>
+      )}
       <CapRow className="whatsapp-render-heading">
         <CapHeader
           title={
@@ -1429,10 +2020,10 @@ export const Whatsapp = (props) => {
             </CapHeading>
           }
           suffix={
-            templateStatus === WHATSAPP_STATUSES.approved && (
+            templateStatus === WHATSAPP_STATUSES.approved && !isAuthenticationTemplate && (
               <TagList
                 label={formatMessage(globalMessages.addLabels)}
-                onTagSelect={onTagSelect}
+                onTagSelect={onMessageTagSelect}
                 location={location}
                 tags={tags || []}
                 onContextChange={handleOnTagsContextChange}
@@ -1450,29 +2041,76 @@ 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>
       ) : (
-        ''
+        ""
+      )}
+      {/* preview URL is not supported by the Gateway (Karix/Gupshup), show hiding it for now. once the Gateway support is available, previewUrl option would be shown.
+      <CapRow>
+        <CapCheckbox
+          className={`whatsapp-unsubscribe-checkbox ${'whatsapp-create-unsubscribe-checkbox'}`}
+          onChange={previewUrlHandler}
+          checked={showUrlPreview}
+          disabled={!isMediaTypeText}
+          autoFocus={true}
+        >
+          <span className="whatsapp-render-url-preview-text">
+            {formatMessage(messages.showUrlPreview)}
+          </span>
+        </CapCheckbox>
+      </CapRow> */}
+      {templateFooter && isHostIsNotTwilio && (
+        <>
+          <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)
+                : !isAuthenticationTemplate && formatMessage(messages.btnTypeNone)}
+            </CapLabel>
+          </>
+        )}
+        {isAuthenticationTemplate && (
+          <CapLabel type="label15">
+            <CapWhatsappQuickReply
+              authenticationFlow={true}
+            />
+          </CapLabel>
+        )}
         {isBtnTypeCta && (
           <CapWhatsappCTA
             ctaData={ctaData}
@@ -1485,6 +2123,14 @@ export const Whatsapp = (props) => {
             selectedOfferDetails={selectedOfferDetails}
           />
         )}
+        {isBtnTypeQuickReply && (
+          <CapWhatsappQuickReply
+            quickReplyData={quickReplyData}
+            isEditFlow={isEditFlow}
+            renderMessageLength={renderMessageLength}
+            setQuickReplyData={setQuickReplyData}
+          />
+        )}
       </CapRow>
     </>
   );
@@ -1492,25 +2138,37 @@ export const Whatsapp = (props) => {
 
   //used by create and edit
   const getPreviewSection = () => {
+    const { metaTagsDetails = {} } = editData || {};
     const templateMsg = (
       <>
         <CapLabel type="label5">
-          {isEditFlow ? updatedSmsEditor.join('') : templateMessage}
+          {isEditFlow ? updatedSmsEditor.join("") : templateMessage}
         </CapLabel>
-        {unsubscribeRequired && (
+        {unsubscribeRequired &&  !isAuthenticationTemplate  && (
           <CapLabel type="label5">
             {formatMessage(messages.templateMessageUnsubscribeText)}
           </CapLabel>
         )}
       </>
     );
+    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;
@@ -1524,9 +2182,21 @@ export const Whatsapp = (props) => {
         content={{
           ...mediaPreview,
           templateMsg,
+          templateHeaderPreview,
+          templateFooterPreview,
           ...(isBtnTypeCta && {
             ctaData,
           }),
+          ...(isAuthenticationTemplate && {
+            ctaData : [{text: formatMessage(globalMessages.autofill), type: WHATSAPP_CATEGORIES.authentication}]
+          }),
+          ...(isBtnTypeQuickReply && {
+            quickReplyData,
+          }),
+          ...(isMediaTypeText && showUrlPreview && {
+            showUrlPreview,
+            metaTagsDetails,
+          }),
         }}
         whatsappContentLen={computeTextLength()}
         whatsappAccountName={accountName}
@@ -1536,12 +2206,12 @@ 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}}"))) || isMediatypeValid();
 
   return (
     <CapSpin spinning={spin}>
@@ -1561,9 +2231,9 @@ export const Whatsapp = (props) => {
               title={
                 isDisableDone()
                   ? formatMessage(messages.btnDisabledTooltip)
-                  : ''
+                  : ""
               }
-              placement={'right'}
+              placement={"right"}
             >
               <div className="button-disabled-tooltip-wrapper">
                 <CapButton
@@ -1589,9 +2259,9 @@ export const Whatsapp = (props) => {
             title={
               isEditDoneDisabled()
                 ? formatMessage(messages.btnDisabledTooltip)
-                : ''
+                : ""
             }
-            placement={'right'}
+            placement={"right"}
           >
             <div className="button-disabled-tooltip-wrapper">
               <CapButton