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

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,12 @@ 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
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -87,10 +94,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 +137,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('');
@@ -159,14 +172,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 [isPreviewUrl, setIsPreviewUrl] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState('');
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
+  const headerValidVarRegex = /{{(1)}}/g;
+  const urlMatchingRegex = /(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 +241,7 @@ export const Whatsapp = (props) => {
     return () => {
       actions.resetEditTemplate();
       varMap = {};
+      setHeaderVarMappedData({});
     };
   }, [paramObj.id]);
 
@@ -241,6 +270,8 @@ export const Whatsapp = (props) => {
         buttons = [],
         videoPreviewImg = '',
         whatsappDocParams = {},
+        whatsappMedia: { header = '', footer = '' } = {},
+        isPreviewUrl: showUrlPreview = false,
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -262,6 +293,9 @@ export const Whatsapp = (props) => {
       });
       setKarixFileHandle(karixFileHandle);
       setButtonType(btnType);
+      setTemplateFooter(footer);
+      setTemplateHeader(header);
+      setIsPreviewUrl(showUrlPreview);
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
         setCtadata(
           buttons.map((cta) => {
@@ -288,16 +322,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 +405,8 @@ 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;
-      }
-    }
+    //conerting msg string to variable arr
+    const templateMessageArray = converStringToVarArr(validVarArr, msg);
     updateTempMsgArray(templateMessageArray.filter((i) => i === 0 || i));
   };
 
@@ -353,15 +430,21 @@ export const Whatsapp = (props) => {
           arr[key.slice(key.indexOf('_') + 1)] = varMap[key];
         }
       }
+      if (arr?.length) {
+        const validUrls = arr.join("").match(urlMatchingRegex) || [];
+        if (validUrls && validUrls?.length) {
+          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 +476,66 @@ 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)) {
+      let validationResponse =
         validateTags({
-          content: updatedSmsEditor.join(''),
+          content: contentData.join(""),
           tagsParam: tags,
           injectedTagsParams: injectedTags,
           location,
           tagModule: getDefaultTags,
         }) || {};
-      updateIsTagValidationError(
-        tagValidationResponse.unsupportedTags.length > 0,
-      );
+      if (type === HEADER_TEXT) {
+        headerTagValidationResponse = validationResponse;
+        updateIsHeaderTagValidationError(
+          validationResponse?.unsupportedTags?.length > 0
+        );
+      } else {
+        tagValidationResponse = validationResponse;
+        updateIsTagValidationError(
+          validationResponse?.unsupportedTags?.length > 0
+        );
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (updatedSmsEditor?.length > 0) {
+      const previewUrlArr = updatedSmsEditor.join("").match(urlMatchingRegex) || [];
+      if (previewUrlArr && previewUrlArr?.length) {
+        setPreviewUrl(previewUrlArr[0]);
+      } else {
+        setPreviewUrl('');
+      }
+    } 
+  }, [updatedSmsEditor])
+
+  useEffect(() => {
+    if (!isEmpty(previewUrl) && isPreviewUrl) {
+      const watingTimeFn = setTimeout(() => {
+        actions.getMetaTags({
+          previewUrl,
+          callBack: actionCallback,
+        })
+      }, 1000);
+      return () => clearTimeout(watingTimeFn);
+    } else {
+      actions.resetMetaTags();
     }
+  }, [previewUrl, isPreviewUrl])
+
+  //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 +551,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
 
@@ -532,6 +696,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 +722,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 +792,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
     },
   ];
 
@@ -625,6 +827,10 @@ export const Whatsapp = (props) => {
     setTemplateMessageError(error);
   };
 
+  const previewUrlHandler = ({ target: { checked } }) => {
+    setIsPreviewUrl(checked);
+  }
+
   const renderUnsubscribeText = () => {
     const isDisabled =
       isEditFlow ||
@@ -664,25 +870,18 @@ 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 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
@@ -858,18 +1057,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) => {
@@ -882,41 +1119,54 @@ 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(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);
         }
       }
     }
@@ -965,13 +1215,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 +1252,7 @@ export const Whatsapp = (props) => {
       default:
         break;
     }
-    return ({
+    return {
       name: templateName,
       versions: {
         base: {
@@ -1012,16 +1272,33 @@ 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
+              })
             },
           },
         },
       },
       type: WHATSAPP,
-    });
+    };
   };
 
   const actionCallback = ({ errorMessage }) => {
@@ -1087,6 +1364,9 @@ export const Whatsapp = (props) => {
     if (!isMediaTypeText && host === HOST_KARIX && karixFileHandle === '') {
       return true;
     }
+    if (templateHeaderError || templateFooterError) {
+      return true;
+    }
     //cta
     if (isBtnTypeCta) {
       if (ctaData.length === 1 && ctaData[0].isSaved) {
@@ -1103,6 +1383,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;
   };
 
@@ -1135,9 +1419,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} />}
             />
@@ -1154,22 +1436,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 || []}
@@ -1179,24 +1463,77 @@ export const Whatsapp = (props) => {
       {/* template media type */}
       {renderMediaSection()}
       {renderMediaComponent()}
+      {/* this section is for header section in create mode */}
+      {isMediaTypeText && isHostIsNotTwilio && (
+        <>
+          <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}}",
                   }}
                 />
               }
@@ -1207,7 +1544,7 @@ export const Whatsapp = (props) => {
           <CapButton
             type="flat"
             isAddBtn
-            onClick={onAddVar}
+            onClick={onMessageAddVar}
             disabled={
               (addedVarCount >= 19 || templateMessageError) && templateMessage
             }
@@ -1221,7 +1558,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">
@@ -1229,11 +1566,52 @@ export const Whatsapp = (props) => {
               </CapError>
             )
           }
-          value={templateMessage || ''}
+          value={templateMessage || ""}
         />
         {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">
+            <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,39 +1695,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
@@ -1359,11 +1753,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,19 +1767,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,
@@ -1397,9 +1793,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 +1817,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 && (
+                  <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={
@@ -1434,7 +1875,7 @@ export const Whatsapp = (props) => {
             templateStatus === WHATSAPP_STATUSES.approved && (
               <TagList
                 label={formatMessage(globalMessages.addLabels)}
-                onTagSelect={onTagSelect}
+                onTagSelect={onMessageTagSelect}
                 location={location}
                 tags={tags || []}
                 onContextChange={handleOnTagsContextChange}
@@ -1452,29 +1893,68 @@ 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>
       ) : (
-        ''
+        ""
+      )}
+      <CapRow>
+        <CapCheckbox
+          className={`whatsapp-unsubscribe-checkbox ${'whatsapp-create-unsubscribe-checkbox'}`}
+          onChange={previewUrlHandler}
+          checked={isPreviewUrl}
+          disabled={!isMediaTypeText}
+          autoFocus={true}
+        >
+          <span className="whatsapp-render-url-preview-textt">
+            {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)
+                : formatMessage(messages.btnTypeNone)}
+            </CapLabel>
+          </>
+        )}
         {isBtnTypeCta && (
           <CapWhatsappCTA
             ctaData={ctaData}
@@ -1487,6 +1967,14 @@ export const Whatsapp = (props) => {
             selectedOfferDetails={selectedOfferDetails}
           />
         )}
+        {isBtnTypeQuickReply && (
+          <CapWhatsappQuickReply
+            quickReplyData={quickReplyData}
+            isEditFlow={isEditFlow}
+            renderMessageLength={renderMessageLength}
+            setQuickReplyData={setQuickReplyData}
+          />
+        )}
       </CapRow>
     </>
   );
@@ -1494,10 +1982,11 @@ 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 && (
           <CapLabel type="label5">
@@ -1506,13 +1995,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 +2026,18 @@ export const Whatsapp = (props) => {
         content={{
           ...mediaPreview,
           templateMsg,
+          templateHeaderPreview,
+          templateFooterPreview,
           ...(isBtnTypeCta && {
             ctaData,
           }),
+          ...(isBtnTypeQuickReply && {
+            quickReplyData,
+          }),
+          ...(isMediaTypeText && isPreviewUrl && {
+            isPreviewUrl,
+            metaTagsDetails,
+          }),
         }}
         whatsappContentLen={computeTextLength()}
         whatsappAccountName={accountName}
@@ -1538,12 +2047,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 +2075,9 @@ export const Whatsapp = (props) => {
               title={
                 isDisableDone()
                   ? formatMessage(messages.btnDisabledTooltip)
-                  : ''
+                  : ""
               }
-              placement={'right'}
+              placement={"right"}
             >
               <div className="button-disabled-tooltip-wrapper">
                 <CapButton
@@ -1591,9 +2103,9 @@ export const Whatsapp = (props) => {
             title={
               isEditDoneDisabled()
                 ? formatMessage(messages.btnDisabledTooltip)
-                : ''
+                : ""
             }
-            placement={'right'}
+            placement={"right"}
           >
             <div className="button-disabled-tooltip-wrapper">
               <CapButton