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

package/v2Containers/Whatsapp/index.js

@@ -70,10 +70,11 @@ import {
   DOCUMENT_FORMAT,
   DOCUMENT_SIZE,
   TEMPLATE_HEADER_MAX_LENGTH,
-  TEMPLATE_BUTTON_TEXT_MAX_LENGTH,
+  QUICK_REPLY_BUTTON_TEXT_MAX_LENGTH,
   HEADER_TEXT,
   FOOTER_TEXT,
-  MESSAGE_TEXT
+  MESSAGE_TEXT,
+  BUTTON_TEXT
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -135,11 +136,11 @@ export const Whatsapp = (props) => {
     WHATSAPP_MEDIA_TYPES.TEXT,
   );
   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 [templateMessageError, setTemplateMessageError] = useState(false);
   const [addedVarCount, setAddedVarCount] = useState(0);
   const [accountId, setAccountId] = useState('');
   const [accessToken, setAccessToken] = useState('');
@@ -177,11 +178,15 @@ export const Whatsapp = (props) => {
   const [tempHeaderData, setTempHeaderData] = useState([]);
   const [headerVarMappedData, setHeaderVarMappedData] = useState({});
   const [updatedHeaderData, setUpdatedHeaderData] = useState([]);
-  const [headerTextAreaId, setHeaderTextAreaId] = 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;
@@ -189,6 +194,7 @@ export const Whatsapp = (props) => {
   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;
@@ -265,6 +271,7 @@ export const Whatsapp = (props) => {
         videoPreviewImg = '',
         whatsappDocParams = {},
         whatsappMedia: { header = '', footer = '' } = {},
+        isPreviewUrl: showUrlPreview = false,
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -288,6 +295,7 @@ export const Whatsapp = (props) => {
       setButtonType(btnType);
       setTemplateFooter(footer);
       setTemplateHeader(header);
+      setIsPreviewUrl(showUrlPreview);
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
         setCtadata(
           buttons.map((cta) => {
@@ -314,35 +322,41 @@ export const Whatsapp = (props) => {
           }),
         );
       }
-      if (btnType === WHATSAPP_BUTTON_TYPES.QUICK_REPLY && buttons.length > 0) {
+      if (btnType === WHATSAPP_BUTTON_TYPES.QUICK_REPLY && buttons?.length > 0) {
         setQuickReplyData(buttons);
       }
       computeTempMsgArray();
-      if (header) {
+      if (header && (mediaType === WHATSAPP_MEDIA_TYPES.TEXT && isHostIsNotTwilio)) {
         computeHeaderMsgArray();
       }
     }
   }, [editData.templateDetails || templateData]);
 
-  const computeHeaderMsgArray = () => {
-    let msg = get(editContent, `whatsappMedia.header`, '');
-    const validVarArr = msg.match(validVarRegex) || [];
-    const templateHeaderArray = [];
-    while (msg.length !== 0) {
+  const converStringToVarArr = (validVarArr, content) => {
+    const templateVarArray = [];
+    while (content?.length !== 0) {
       //converting content string to an array split at var
-      const index = msg.indexOf(validVarArr[0]);
+      const index = content.indexOf(validVarArr?.[0]);
       if (index !== -1) {
-        templateHeaderArray.push(msg.substring(0, index)); //push string before var
-        templateHeaderArray.push(validVarArr[0]); //push var
-        msg = msg.substring(index + validVarArr[0].length, msg.length); //remaining str
-        validVarArr.shift(); //remove considered var
+        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 {
-        templateHeaderArray.push(msg); //remaining str
+        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) {
+    if (templateHeaderArray?.length !== 0) {
       let headerVarMap = {};
       const {
         whatsappMedia: { headerVarMapped = {} },
@@ -350,11 +364,11 @@ export const Whatsapp = (props) => {
       if (!isEmpty(headerVarMapped)) {
         headerVarMap = cloneDeep(headerVarMapped);
       } else {
-        for (let i = 0; i < templateHeaderArray.length; i += 1) {
-          if (templateHeaderArray[i].match(validVarRegex)?.length > 0) {
-            headerVarMap[`${templateHeaderArray[i]}_${i}`] = '';
+        templateHeaderArray?.forEach((headerValue, i) => {
+          if (headerValue?.match(headerValidVarRegex)?.length > 0) {
+            headerVarMap[`${headerValue}_${i}`] = '';
           }
-        }
+        })
       }
       const arr = [...templateHeaderArray];
       for (const key in headerVarMap) {
@@ -372,7 +386,6 @@ export const Whatsapp = (props) => {
     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 (
@@ -392,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));
   };
 
@@ -428,6 +430,12 @@ 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]);
@@ -468,45 +476,64 @@ 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
+        );
+      }
     }
-  }, [updatedSmsEditor, tags]);
+  };
 
   useEffect(() => {
-    if (
-      !isFullMode &&
-      updatedHeaderData?.length > 0 &&
-      !updatedHeaderData.join('').match(validVarRegex)
-    ) {
-      headerTagValidationResponse =
-        validateTags({
-          content: updatedHeaderData.join(''),
-          tagsParam: tags,
-          injectedTagsParams: injectedTags,
-          location,
-          tagModule: getDefaultTags,
-        }) || {};
-      updateIsHeaderTagValidationError(
-        headerTagValidationResponse.unsupportedTags.length > 0
-      );
+    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) => {
@@ -524,43 +551,59 @@ 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) => {
-    if (headerVarMappedData && updatedHeaderData) {
-      const numId = Number(
-        headerTextAreaId?.slice(headerTextAreaId?.indexOf('_') + 1)
-      );
-      if (!isNaN(numId)) {
-        const arr = [...updatedHeaderData];
-        //when trying to insert tag in empty textarea,{#var#} is replaced with "" and then tag is added
-        if (arr[numId]?.match(validVarRegex)?.length > 0) {
-          arr[numId] = '';
-        }
-        const messageData = `${arr[numId]}{{${data}}}`;
-        arr[numId] = messageData;
-        setHeaderVarMappedData((prevState) => ({
-          ...prevState,
-          [textAreaId]: messageData,
-        }));
-        setUpdatedHeaderData(arr);
-      }
-    }
+    onTagSelect({
+      data,
+      type: HEADER_TEXT,
+      mapData: headerVarMappedData,
+      updatedData: updatedHeaderData,
+      areaId: headerTextAreaId,
+      regex: headerValidVarRegex,
+    });
   };
 
   //setting the id of currently selected text area, is used onTagSelect
@@ -679,6 +722,32 @@ 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">
@@ -726,9 +795,6 @@ export const Whatsapp = (props) => {
         <>
           <div
             className="whatsapp-button-quick-reply"
-            style={{
-              marginTop: "24px",
-            }}
           >
             <CapHeading type="h4">
               {formatMessage(messages.btnTypeQuickReply)}
@@ -745,6 +811,7 @@ export const Whatsapp = (props) => {
           )}
         </>
       ),
+      disabled: host === HOST_TWILIO
     },
   ];
 
@@ -760,6 +827,10 @@ export const Whatsapp = (props) => {
     setTemplateMessageError(error);
   };
 
+  const previewUrlHandler = ({ target: { checked } }) => {
+    setIsPreviewUrl(checked);
+  }
+
   const renderUnsubscribeText = () => {
     const isDisabled =
       isEditFlow ||
@@ -799,32 +870,6 @@ 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;
-    }
-  };
-
   const maxLengthByType = (type) => {
     switch (type) {
       case MESSAGE_TEXT:
@@ -832,8 +877,8 @@ export const Whatsapp = (props) => {
       case HEADER_TEXT:
       case FOOTER_TEXT:
         return TEMPLATE_HEADER_MAX_LENGTH;
-      case "buttonText":
-        return TEMPLATE_BUTTON_TEXT_MAX_LENGTH;
+      case BUTTON_TEXT:
+        return QUICK_REPLY_BUTTON_TEXT_MAX_LENGTH;
     }
   };
 
@@ -1012,33 +1057,38 @@ 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 onHeaderAddVar = () => {
-    const validVarArr = templateHeader.match(validVarRegex) || [];
-    const tempMsg = `${templateHeader}{{${validVarArr.length + 1}}}`;
-    const error = templateHeaderErrorHandler(tempMsg);
-    setTemplateHeader(tempMsg);
-    setTemplateHeaderError(error);
+    onAddVar(HEADER_TEXT, templateHeader, headerValidVarRegex);
   };
 
-  const onTemplateMessageChange = ({ target: { value } }) => {
-    const error = templateMessageErrorHandler(value);
-    setTemplateMessage(value);
-    setTemplateMessageError(error);
-  };
+  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 onTemplateHeaderChanges = ({ target: { value } }) => {
-    const error = templateHeaderErrorHandler(value);
-    setTemplateHeader(value);
-    setTemplateHeaderError(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;
@@ -1076,7 +1126,7 @@ export const Whatsapp = (props) => {
 
   const variableErrorHandling = (value, type) => {
     let errorMessage = false;
-    const validVarArr = value.match(validVarRegex) || [];
+    const validVarArr = value.match(type === HEADER_TEXT ? headerValidVarRegex : validVarRegex) || [];
     const validVarSet = [...new Set(validVarArr)];
 
     const invalidVarRegex = /{{(.*?)}}/g;
@@ -1094,10 +1144,14 @@ export const Whatsapp = (props) => {
         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}}",
-        });
+        if (type === HEADER_TEXT) {
+          errorMessage = formatMessage(messages.headerUnknownVars);
+        } else {
+          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);
@@ -1227,10 +1281,18 @@ export const Whatsapp = (props) => {
                 buttons: getQuickReplyData(),
               }),
               whatsappMedia: {
-                header: isEditFlow && !isFullMode ? updatedHeaderData.join("") : templateHeader,
-                headerVarMapped: !isFullMode ? headerVarMappedData : {},
-                footer: templateFooter || "",
+                ...(isMediaTypeText && isHostIsNotTwilio && {
+                  header: isEditFlow && !isFullMode ? updatedHeaderData.join("") : templateHeader,
+                  headerVarMapped: !isFullMode ? headerVarMappedData : {},
+                  headerTemplate: !isFullMode && tempHeaderData.join(""),
+                }),
+                ...(isHostIsNotTwilio && {
+                  footer: templateFooter || ""
+                }),
               },
+              ...(isEditFlow && !isFullMode && {
+                isPreviewUrl
+              })
             },
           },
         },
@@ -1302,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) {
@@ -1320,7 +1385,7 @@ export const Whatsapp = (props) => {
     }
 
     if (isBtnTypeQuickReply) {
-      return !quickReplyData.every((quickReply) => quickReply.isSaved === true);    
+      return !quickReplyData.every((quickReply) => quickReply?.isSaved === true);    
     }
     return false;
   };
@@ -1354,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} />}
             />
@@ -1400,53 +1463,62 @@ export const Whatsapp = (props) => {
       {/* template media type */}
       {renderMediaSection()}
       {renderMediaComponent()}
-      {/* template message create flow */}
-      <CapHeader
-        className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
-        title={
-          <CapHeading type="h4" className="whatsapp-create-mode-heading">
-            {formatMessage(messages.templateHeaderLabel)}
-            <CapTooltipWithInfo
-              placement="right"
-              infoIconProps={{
-                style: { marginLeft: CAP_SPACE_04 },
-              }}
-              autoAdjustOverflow
-              title={<FormattedMessage {...messages.templateHeaderTooltip} />}
+      {/* 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 || ""}
             />
-            <CapHeading className="whatsapp-optional-label1 align-item-center">
-              {formatMessage(messages.optional)}
-            </CapHeading>
-          </CapHeading>
-        }
-        suffix={
-          <CapButton
-            type="flat"
-            isAddBtn
-            onClick={onHeaderAddVar}
-            disabled={templateHeaderError && templateHeader}
-          >
-            {formatMessage(messages.addVar)}
-          </CapButton>
-        }
-      />
-      <CapRow className="whatsapp-create-template-message-input whatsapp-create-template-header-input">
-        <TextArea
-          id="whatsapp-create-template-message-input"
-          autosize={{ minRows: 1, maxRows: 5 }}
-          placeholder={formatMessage(messages.templateMessagePlaceholder)}
-          onChange={onTemplateHeaderChanges}
-          errorMessage={
-            templateHeaderError && (
-              <CapError className="whatsapp-template-message-error">
-                {templateHeaderError}
-              </CapError>
-            )
-          }
-          value={templateHeader || ""}
-        />
-      </CapRow>
-      {renderMessageLength(HEADER_TEXT)}
+          </CapRow>
+          {renderMessageLength(HEADER_TEXT)}
+        </>
+      )}
+      {/* template message create flow */}
       <CapHeader
         className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
         title={
@@ -1454,9 +1526,7 @@ export const Whatsapp = (props) => {
             {formatMessage(messages.templateMessageLabel)}
             <CapTooltipWithInfo
               placement="right"
-              infoIconProps={{
-                style: { marginLeft: CAP_SPACE_04 },
-              }}
+              className="whatsapp-text-field_spacing"
               autoAdjustOverflow
               title={
                 <FormattedMessage
@@ -1474,7 +1544,7 @@ export const Whatsapp = (props) => {
           <CapButton
             type="flat"
             isAddBtn
-            onClick={onAddVar}
+            onClick={onMessageAddVar}
             disabled={
               (addedVarCount >= 19 || templateMessageError) && templateMessage
             }
@@ -1488,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">
@@ -1501,42 +1571,47 @@ export const Whatsapp = (props) => {
         {renderUnsubscribeText()}
       </CapRow>
       {renderMessageLength(MESSAGE_TEXT)}
-      <CapHeader
-        className={`${isMediaTypeImage ? "whatsapp-heading-spacing" : ""}`}
-        title={
-          <CapHeading type="h4" className="whatsapp-create-mode-heading">
-            {formatMessage(messages.templateFooterLabel)}
-            <CapTooltipWithInfo
-              placement="right"
-              infoIconProps={{
-                style: { marginLeft: CAP_SPACE_04 },
-              }}
-              autoAdjustOverflow
-              title={<FormattedMessage {...messages.templateFooterTooltip} />}
+      {/* 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 || ""}
             />
-            <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)}
+          </CapRow>
+          {renderMessageLength(FOOTER_TEXT)}
+        </>
+      )}
       {renderButtonsSection()}
     </>
   );
@@ -1655,7 +1730,7 @@ export const Whatsapp = (props) => {
           ? 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;
       }
     }
@@ -1668,7 +1743,7 @@ export const Whatsapp = (props) => {
       let varCount = 0;
       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
@@ -1697,7 +1772,9 @@ export const Whatsapp = (props) => {
         }
       });
     }
-    renderArray.push(renderUnsubscribeText());
+    if (type !== HEADER_TEXT) {
+      renderArray.push(renderUnsubscribeText());
+    }
     return renderArray;
   };
 
@@ -1743,7 +1820,8 @@ export const Whatsapp = (props) => {
       {renderLabel("mediaLabel")}
       <CapLabel type="label15">{capitalizeString(templateMediaType)}</CapLabel>
       {renderMediaComponent()}
-      {templateHeader && (
+      {/* this section is for render header section */}
+      {(templateHeader && isMediaTypeText && isHostIsNotTwilio) && (
         <>
           <CapRow className="whatsapp-render-heading">
             <CapHeader
@@ -1779,12 +1857,10 @@ export const Whatsapp = (props) => {
           </CapTooltip>
           {renderMessageLength(HEADER_TEXT)}
           {isHeaderTagValidationError && tagValidationErrorMessage(HEADER_TEXT)}
-          {computeTextLength(HEADER_TEXT) > TEMPLATE_HEADER_MAX_LENGTH ? (
+          {computeTextLength(HEADER_TEXT) > TEMPLATE_HEADER_MAX_LENGTH && (
             <CapError>
-              {formatMessage(messages.templateMessageLengthError)}
+              {formatMessage(messages.templateHeaderLengthError)}
             </CapError>
-          ) : (
-            ""
           )}
         </>
       )}
@@ -1799,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}
@@ -1830,7 +1906,20 @@ export const Whatsapp = (props) => {
       ) : (
         ""
       )}
-      {templateFooter && (
+      <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" : ""}`}
@@ -1893,6 +1982,7 @@ export const Whatsapp = (props) => {
 
   //used by create and edit
   const getPreviewSection = () => {
+    const { metaTagsDetails = {} } = editData || {};
     const templateMsg = (
       <>
         <CapLabel type="label5">
@@ -1944,6 +2034,10 @@ export const Whatsapp = (props) => {
           ...(isBtnTypeQuickReply && {
             quickReplyData,
           }),
+          ...(isMediaTypeText && isPreviewUrl && {
+            isPreviewUrl,
+            metaTagsDetails,
+          }),
         }}
         whatsappContentLen={computeTextLength()}
         whatsappAccountName={accountName}