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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.82-alpha.1",
+  "version": "7.17.83",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/TemplatePreview/index.js

@@ -346,28 +346,29 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     const renderUrlPreview = (metaTags) => {
       const renderArray = [];
       if (!isEmpty(metaTags)) {
-        if (metaTags?.image) {
+        const { image = '', title = '', description = '', url = '' } = metaTags || {};
+        if (image) {
           renderArray.push(
             <CapImage
-              src={metaTags?.image}
+              src={image}
               alt={formatMessage(messages.previewUrlMetaImage)}
               className="url-preview-image"
             />
           );
         }
-        if (metaTags?.title) {
+        if (title) {
           renderArray.push(
-            <CapLabel type="label8">{metaTags?.title}</CapLabel>
+            <CapLabel type="label8">{title}</CapLabel>
           );
         }
-        if (metaTags?.description) {
+        if (description) {
           renderArray.push(
-            <CapLabel className="url-preview-description">{metaTags?.description}</CapLabel>
+            <CapLabel className="url-preview-description">{description}</CapLabel>
           );
         }
-        if (metaTags?.url) {
+        if (url) {
           renderArray.push(
-            <CapLabel className="url-preview">{metaTags?.url}</CapLabel>
+            <CapLabel className="url-preview">{url}</CapLabel>
           );
         }
       }
@@ -788,7 +789,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                     <div className="msg-container whatsapp-message-container">
                       <div className="message-pop align-left" style={whatsappSectionStyle}>
                         <div className="whatsapp-content">
-                          {content?.isPreviewUrl && (
+                          {content?.showUrlPreview && (
                             renderUrlPreview(content?.metaTagsDetails)
                           )}
                           {content?.whatsappImageSrc && (

package/v2Containers/Whatsapp/index.js

@@ -25,6 +25,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 debounce from 'lodash/debounce';
 import {
   CAP_SPACE_04,
   CAP_SPACE_16,
@@ -181,12 +182,12 @@ export const Whatsapp = (props) => {
   const [headerTextAreaId, setHeaderTextAreaId] = useState('');
   const [isHeaderTagValidationError, updateIsHeaderTagValidationError] =
     useState(false);
-  const [isPreviewUrl, setIsPreviewUrl] = useState(false);
+  const [showUrlPreview, setShowUrlPreview] = 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 previewUrlMatchingRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/g;
 
   const isBtnTypeCta = buttonType === WHATSAPP_BUTTON_TYPES.CTA;
   const isBtnTypeQuickReply = buttonType === WHATSAPP_BUTTON_TYPES.QUICK_REPLY;
@@ -271,7 +272,7 @@ export const Whatsapp = (props) => {
         videoPreviewImg = '',
         whatsappDocParams = {},
         whatsappMedia: { header = '', footer = '' } = {},
-        isPreviewUrl: showUrlPreview = false,
+        isPreviewUrl = false,
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -295,7 +296,7 @@ export const Whatsapp = (props) => {
       setButtonType(btnType);
       setTemplateFooter(footer);
       setTemplateHeader(header);
-      setIsPreviewUrl(showUrlPreview);
+      setShowUrlPreview(isPreviewUrl);
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
         setCtadata(
           buttons.map((cta) => {
@@ -430,11 +431,10 @@ 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(urlMatchingRegex) || [];
-        if (validUrls && validUrls?.length) {
-          setPreviewUrl(validUrls?.[0] || '')
-        }
+        const validUrls = arr.join("").match(previewUrlMatchingRegex) || [];
+        setPreviewUrl(validUrls?.[0] || '')
       }
       setUpdatedSmsEditor(arr);
     }
@@ -478,7 +478,7 @@ export const Whatsapp = (props) => {
 
   const tagValidation = (contentData, regex, type) => {
     if (contentData?.length > 0 && !contentData.join("").match(regex)) {
-      let validationResponse =
+      const validationResponse =
         validateTags({
           content: contentData.join(""),
           tagsParam: tags,
@@ -486,24 +486,23 @@ export const Whatsapp = (props) => {
           location,
           tagModule: getDefaultTags,
         }) || {};
+      const unsupportedTagsLengthCheck =
+        validationResponse?.unsupportedTags?.length > 0;
       if (type === HEADER_TEXT) {
         headerTagValidationResponse = validationResponse;
-        updateIsHeaderTagValidationError(
-          validationResponse?.unsupportedTags?.length > 0
-        );
+        updateIsHeaderTagValidationError(unsupportedTagsLengthCheck);
       } else {
         tagValidationResponse = validationResponse;
-        updateIsTagValidationError(
-          validationResponse?.unsupportedTags?.length > 0
-        );
+        updateIsTagValidationError(unsupportedTagsLengthCheck);
       }
     }
   };
 
+  // as per change in message body we filter out url using regex
   useEffect(() => {
     if (updatedSmsEditor?.length > 0) {
-      const previewUrlArr = updatedSmsEditor.join("").match(urlMatchingRegex) || [];
-      if (previewUrlArr && previewUrlArr?.length) {
+      const previewUrlArr = updatedSmsEditor.join("").match(previewUrlMatchingRegex) || [];
+      if (previewUrlArr?.length > 0) {
         setPreviewUrl(previewUrlArr[0]);
       } else {
         setPreviewUrl('');
@@ -511,19 +510,24 @@ export const Whatsapp = (props) => {
     } 
   }, [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
   useEffect(() => {
-    if (!isEmpty(previewUrl) && isPreviewUrl) {
-      const watingTimeFn = setTimeout(() => {
-        actions.getMetaTags({
-          previewUrl,
-          callBack: actionCallback,
-        })
-      }, 1000);
-      return () => clearTimeout(watingTimeFn);
+    if (!isEmpty(previewUrl) && showUrlPreview) {
+      debounceFn(previewUrl);
     } else {
       actions.resetMetaTags();
     }
-  }, [previewUrl, isPreviewUrl])
+  }, [previewUrl, showUrlPreview])
 
   //performs tag validation
   useEffect(() => {
@@ -828,7 +832,7 @@ export const Whatsapp = (props) => {
   };
 
   const previewUrlHandler = ({ target: { checked } }) => {
-    setIsPreviewUrl(checked);
+    setShowUrlPreview(checked);
   }
 
   const renderUnsubscribeText = () => {
@@ -1291,7 +1295,7 @@ export const Whatsapp = (props) => {
                 }),
               },
               ...(isEditFlow && !isFullMode && {
-                isPreviewUrl
+                isPreviewUrl: showUrlPreview
               })
             },
           },
@@ -1910,11 +1914,11 @@ export const Whatsapp = (props) => {
         <CapCheckbox
           className={`whatsapp-unsubscribe-checkbox ${'whatsapp-create-unsubscribe-checkbox'}`}
           onChange={previewUrlHandler}
-          checked={isPreviewUrl}
+          checked={showUrlPreview}
           disabled={!isMediaTypeText}
           autoFocus={true}
         >
-          <span className="whatsapp-render-url-preview-textt">
+          <span className="whatsapp-render-url-preview-text">
             {formatMessage(messages.showUrlPreview)}
           </span>
         </CapCheckbox>
@@ -2034,8 +2038,8 @@ export const Whatsapp = (props) => {
           ...(isBtnTypeQuickReply && {
             quickReplyData,
           }),
-          ...(isMediaTypeText && isPreviewUrl && {
-            isPreviewUrl,
+          ...(isMediaTypeText && showUrlPreview && {
+            showUrlPreview,
             metaTagsDetails,
           }),
         }}

package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap

@@ -127365,7 +127365,7 @@ T&C'
                                             type="h4"
                                           >
                                             <span
-                                              className="whatsapp-render-url-preview-textt"
+                                              className="whatsapp-render-url-preview-text"
                                             />
                                           </span>
                                         </CapHeading__CapHeadingSpan>
@@ -141131,7 +141131,7 @@ T&C'
                                             type="h4"
                                           >
                                             <span
-                                              className="whatsapp-render-url-preview-textt"
+                                              className="whatsapp-render-url-preview-text"
                                             />
                                           </span>
                                         </CapHeading__CapHeadingSpan>
@@ -152929,7 +152929,7 @@ new message content.",
                                             type="h4"
                                           >
                                             <span
-                                              className="whatsapp-render-url-preview-textt"
+                                              className="whatsapp-render-url-preview-text"
                                             />
                                           </span>
                                         </CapHeading__CapHeadingSpan>
@@ -167284,7 +167284,7 @@ T&C'
                                             type="h4"
                                           >
                                             <span
-                                              className="whatsapp-render-url-preview-textt"
+                                              className="whatsapp-render-url-preview-text"
                                             />
                                           </span>
                                         </CapHeading__CapHeadingSpan>
@@ -187132,7 +187132,7 @@ Click {{unsubscribe}} to unsubscribe",
                                             type="h4"
                                           >
                                             <span
-                                              className="whatsapp-render-url-preview-textt"
+                                              className="whatsapp-render-url-preview-text"
                                             />
                                           </span>
                                         </CapHeading__CapHeadingSpan>
@@ -199514,7 +199514,7 @@ new message content.",
                                             type="h4"
                                           >
                                             <span
-                                              className="whatsapp-render-url-preview-textt"
+                                              className="whatsapp-render-url-preview-text"
                                             />
                                           </span>
                                         </CapHeading__CapHeadingSpan>