@capillarytech/creatives-library 8.0.120 → 8.0.121

package/package.json

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

package/v2Components/mockdata.js

@@ -69,8 +69,8 @@ export default {
             status: 'approved',
             templateId: 'HTee0274fb8dfdd45427bb678f875b0d54',
             hostName: 'twiliowhatsapptrans',
-            accessToken: '4676323eb5d1f975b0987070c03a8efc',
-            accountId: 'AC41030cebba9e2f1ce37c78235da0ee18',
+            accessToken: 'asdf', //false positive
+            accountId: 'asdf', //false positive
             templateEditor: false,
             mediaType: 'TEXT',
             languages: [

package/v2Containers/Whatsapp/index.js

@@ -250,7 +250,7 @@ export const Whatsapp = (props) => {
     margin-left: -32px;
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
     z-index: 1;
-    
+
     .ant-btn {
       margin-right: ${CAP_SPACE_16};
     }
@@ -602,7 +602,7 @@ export const Whatsapp = (props) => {
   //     } else {
   //       setPreviewUrl('');
   //     }
-  //   } 
+  //   }
   // }, [updatedSmsEditor])
 
   // const debounceFn = useCallback(
@@ -697,7 +697,7 @@ export const Whatsapp = (props) => {
             }
             handleCarouselValueChange(carouselIndex, [...tagFields, {fieldName: "varMap", value: carouselVarMap}, {fieldName: "updatedBodyText", value: arr}])
             break;
-          default: 
+          default:
             varMap[areaId] = messageData;
             setUpdatedSmsEditor(arr);
         }
@@ -845,7 +845,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         return overallLength;
     }
   };
-  
+
   //used by create and edit
   const renderMessageLength = (type, currentLength, carousel) => (
     <CapHeading type="label1" className="whatsapp-render-message-length">
@@ -1306,7 +1306,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     } else {
       errorMessage = variableErrorHandling(value, MESSAGE_TEXT);
     }
-    //we are not allowing user input incase of authentication flow 
+    //we are not allowing user input incase of authentication flow
     if(isAuthenticationTemplate){
       errorMessage = false;
     }
@@ -1596,7 +1596,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     });
   };
   const isMediatypeValid =()=> ((isMediaTypeImage && whatsappImageSrc === "") || (isMediaTypeVideo && whatsappVideoSrcAndPreview?.whatsappVideoSrc === "") || (isMediaTypeDoc && whatsappDocSource === ""));
-  
+
   const isDisableDone = () => {
     //if template name is not entered
     if (templateName.trim() === '' || templateNameError) {
@@ -1615,7 +1615,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       return true;
     }
     //if media type is image, video or document and the mediaType file is not uploaded
-    
+
     if (!isMediaTypeText && isMediatypeValid() ) {
       return true;
     }
@@ -1643,16 +1643,16 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       return true;
     }
     if (isBtnTypeQuickReply) {
-      // Disable button if there are no quick reply buttons or if any button is not saved  
+      // Disable button if there are no quick reply buttons or if any button is not saved
       return !quickReplyData?.length || !quickReplyData.every(qr => qr?.isSaved);
     }
 		if (isMediaTypeCarousel) {
 			const carouselDisableCheck = carouselData.some((data) => {
 				return (
-					data?.bodyError || 
-					data?.bodyText === "" || 
-					(carouselMediaType === IMAGE.toLowerCase() && !data?.imageSrc) || 
-					(carouselMediaType === VIDEO.toLowerCase() && !data?.videoSrc) || 
+					data?.bodyError ||
+					data?.bodyText === "" ||
+					(carouselMediaType === IMAGE.toLowerCase() && !data?.imageSrc) ||
+					(carouselMediaType === VIDEO.toLowerCase() && !data?.videoSrc) ||
 					!data?.buttons.every((button) => button?.isSaved === true)
 				);
 			});
@@ -1672,7 +1672,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 
   const handleCarouselMediaOptions = ({ target: { value = ''} = {} }) => {
 		setCarouselData(CAROUSEL_INITIAL_DATA);
-    setCarouselMediaType(value); 
+    setCarouselMediaType(value);
   }
 
   const onTabChange = (index) => {
@@ -1874,7 +1874,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   const addContent = () => {
     const updatedCarouselData = cloneDeep(carouselData);  // Shallow copy, assuming carouselData isn't deeply nested
     const firstCarouselButtonData = updatedCarouselData[0]?.buttons;
-  
+
     const buttonArray = firstCarouselButtonData.map((button) => {
       switch (button?.buttonType) {
         case PHONE_NUMBER:
@@ -1889,7 +1889,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     newCard.buttons = buttonArray;
     setCarouselData([...updatedCarouselData, newCard]);
   };
-  
+
   const checkDisableAddCarouselButton = () => {
     return carouselData?.[0]?.buttons.some((button) => button?.isSaved === true);
   }
@@ -1954,7 +1954,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             options={getCategoryOptions(host)}
             onChange={onTemplateCategoryChange}
             value={templateCategory}
-          />    
+          />
         </CapColumn>
         {/* template media type */}
         <CapColumn span={12}>
@@ -2352,6 +2352,15 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   // on change event of Text Area
   const textAreaValueChange = ({ target: { value, id } }, type, carousel) => {
     const numId = Number(id.slice(id.indexOf("_") + 1));
+    // Validation: Prevent empty or only-space values
+    const isInvalidValue = value.trim() === "";
+    let errorMsg = false;
+    if (isInvalidValue) {
+      errorMsg = formatMessage(messages.emptyVariableValueErrorMessage || {
+        id: 'whatsapp.emptyVariableValueErrorMessage',
+        defaultMessage: 'Variable value cannot be empty or only spaces.'
+      });
+    }
     //assign entered value to varMap
     if (type === HEADER_TEXT) {
       const arr = [...updatedHeaderData];
@@ -2359,16 +2368,19 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         ...prevState,
         [id]: value,
       }));
-      if (value === "") {
+      if (isInvalidValue) {
         arr[numId] = id.slice(0, id.indexOf("_"));
       } else {
         arr[numId] = value;
       }
       setUpdatedHeaderData(arr);
+      // Set error for header variable if needed
+      if (errorMsg) setTemplateHeaderError(errorMsg);
+      else setTemplateHeaderError(false);
     } else if (type === CAROUSEL_TEXT) {
       const carouselUpdatedBodyTextData = carousel?.data?.updatedBodyText || [];
       const arr = [...carouselUpdatedBodyTextData];
-      if (value === "") {
+      if (isInvalidValue) {
         arr[numId] = id.slice(0, id.indexOf("_"));
       } else {
         arr[numId] = value;
@@ -2380,16 +2392,21 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         tagFields = tagValidation(arr, carouselBodyVarRegex, CAROUSEL_TEXT) || [];
       }
       handleCarouselValueChange(carousel?.carouselIndex, [...tagFields, {fieldName: "varMap", value: bodyVarMapData}, {fieldName: 'updatedBodyText', value: arr}])
+      // Set error for carousel variable if needed
+      // (You may want to add a state for carousel variable errors if not present)
     } else {
       const arr = [...updatedSmsEditor];
       varMap[id] = value;
       //based on entered value update updatedSmsEditor
-      if (value === "") {
+      if (isInvalidValue) {
         arr[numId] = id.slice(0, id.indexOf("_"));
       } else {
         arr[numId] = value;
       }
       setUpdatedSmsEditor(arr);
+      // Set error for message variable if needed
+      if (errorMsg) setTemplateMessageError(errorMsg);
+      else setTemplateMessageError(false);
     }
   };
 
@@ -2796,10 +2813,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     if (isMediaTypeCarousel) {
       carouselDisableCheck = carouselData.some((data) => {
 				return (
-					data.carouselTagValidationErr || 
-					Object.values(data.varMap).some((inputValue) => inputValue === "") || 
+					data.carouselTagValidationErr ||
+					Object.values(data.varMap).some((inputValue) => inputValue === "") ||
           computeTextLength(CAROUSEL_TEXT, data) > TEMPLATE_MESSAGE_MAX_LENGTH ||
-          (carouselMediaType === IMAGE.toLowerCase() && !data.imageSrc) || 
+          (carouselMediaType === IMAGE.toLowerCase() && !data.imageSrc) ||
 					(carouselMediaType === VIDEO.toLowerCase() && !data.videoSrc) ||
 					data?.buttons.some((btn) => btn?.url?.includes("{{1}}"))
 				);