@capillarytech/creatives-library 8.0.120 → 8.0.122-alpha.0

package/containers/MobilePush/Create/_mobilePushCreate.scss

@@ -17,9 +17,11 @@
   flex-direction: row-reverse;
   justify-content: flex-end;
 }
-.ant-tabs-tabpane{
-  padding: 16px 16px 16px 0;
-  border: solid 1px #D6D6D6;
+.creatives-templates-container {
+  .ant-tabs-tabpane{
+    padding: 16px 16px 16px 0;
+    border: solid 1px #D6D6D6;
+  }
 }
 .ant-radio-wrapper{
   font-size: 14px;

package/containers/MobilePush/Edit/_mobilePushCreate.scss

@@ -17,9 +17,11 @@
   flex-direction: row-reverse;
   justify-content: flex-end;
 }
-.ant-tabs-tabpane{
-  padding: 16px 16px 16px 0;
-  border: solid 1px #D6D6D6;
+.creatives-templates-container {
+  .ant-tabs-tabpane{
+    padding: 16px 16px 16px 0;
+    border: solid 1px #D6D6D6;
+  }
 }
 .ant-radio-wrapper{
   font-size: 14px;

package/containers/Sms/Create/_smsCreate.scss

@@ -16,11 +16,14 @@
   flex-direction: row-reverse;
   justify-content: flex-end;
 }
-.ant-tabs-tabpane{
-  border: 1px solid #d9d9d9;
-  border-top: none;
-  margin-top: -0.2%;
-  min-height: calc(70vh);
+
+.creatives-templates-container {
+  .ant-tabs-tabpane{
+    border: solid 1px #d9d9d9;
+    border-top: none;
+    margin-top: -0.2%;
+    min-height: calc(70vh); 
+  }
 }
 
 .ant-tabs-extra-content{

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.120",
+  "version": "8.0.122-alpha.0",
   "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,8 @@ 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() === "";
     //assign entered value to varMap
     if (type === HEADER_TEXT) {
       const arr = [...updatedHeaderData];
@@ -2359,17 +2361,20 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         ...prevState,
         [id]: value,
       }));
-      if (value === "") {
+      if (isInvalidValue) {
         arr[numId] = id.slice(0, id.indexOf("_"));
+        setTemplateHeaderError(formatMessage(messages.emptyVariableValueErrorMessage));
       } else {
         arr[numId] = value;
+        setTemplateHeaderError(false);
       }
       setUpdatedHeaderData(arr);
     } else if (type === CAROUSEL_TEXT) {
       const carouselUpdatedBodyTextData = carousel?.data?.updatedBodyText || [];
       const arr = [...carouselUpdatedBodyTextData];
-      if (value === "") {
+      if (isInvalidValue) {
         arr[numId] = id.slice(0, id.indexOf("_"));
+        // (You may want to add a state for carousel variable errors if not present)
       } else {
         arr[numId] = value;
       }
@@ -2380,14 +2385,18 @@ 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("_"));
+        setTemplateMessageError(formatMessage(messages.emptyVariableValueErrorMessage));
       } else {
         arr[numId] = value;
+        setTemplateMessageError(false);
       }
       setUpdatedSmsEditor(arr);
     }
@@ -2796,10 +2805,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}}"))
 				);

package/v2Containers/Whatsapp/messages.js

@@ -265,8 +265,7 @@ export default defineMessages({
   },
   tagContentMismatchError: {
     id: `${prefix}.tagContentMismatchError`,
-    defaultMessage:
-      'TAG CONTENT MISMATCH: The language and/or template category selected don’t match the template content.',
+    defaultMessage: "TAG CONTENT MISMATCH: The language and/or template category selected do not match the template content.",
   },
   invalidFormatError: {
     id: `${prefix}.invalidFormatError`,
@@ -697,37 +696,37 @@ export default defineMessages({
     id: `${prefix}.checkExpiryCode`,
     defaultMessage: 'OTP settings',
   },
-  expiryCodeNote:{
+  expiryCodeNote: {
     id: `${prefix}.expiryCodeNote`,
     defaultMessage: 'We suggest using the same expiry time as specified in the OTP settings.',
   },
-  codeExpiresIn:{
+  codeExpiresIn: {
     id: `${prefix}.codeExpiresIn`,
     defaultMessage: 'This code expires in',
   },
-  minutes:{
+  minutes: {
     id: `${prefix}.minutes`,
     defaultMessage: 'minutes',
   },
-  codeExpiryNumMinutes:{
+  codeExpiryNumMinutes: {
     id: `${prefix}.codeExpiryNumMinutes`,
     defaultMessage: 'This code expires in <num_minutes> minutes.',
   },
-  authenticationMsg:{
+  authenticationMsg: {
     id: `${prefix}.authenticationMsg`,
     defaultMessage: "{{verification_code}} is your verification code.",
   },
-  securitySuffix:{
+  securitySuffix: {
     id: `${prefix}.securitySuffix`,
     defaultMessage: 'For your security, do not share this code.',
   },
-  numMinutes:{
+  numMinutes: {
     id: `${prefix}.numMinutes`,
     defaultMessage: '<num_minutes>',
   },
-  enterExpiryTime:{
+  enterExpiryTime: {
     id: `${prefix}.enterExpiryTime`,
-    defaultMessage: "Enter expiry time"
+    defaultMessage: "Enter expiry time",
   },
   checkExpiryTooltipHeader: {
     id: `${prefix}.checkExpiryTooltipHeader`,
@@ -773,4 +772,8 @@ export default defineMessages({
     id: `${prefix}.paused`,
     defaultMessage: 'Paused',
   },
+  emptyVariableValueErrorMessage: {
+    id: `${prefix}.emptyVariableValueErrorMessage`,
+    defaultMessage: 'Variable value cannot be empty or only spaces.',
+  },
 });

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

@@ -227089,7 +227089,7 @@ new message content.",
             ],
             Array [
               Object {
-                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected don’t match the template content.",
+                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected do not match the template content.",
                 "id": "creatives.containersV2.Whatsapp.tagContentMismatchError",
               },
             ],
@@ -227201,7 +227201,7 @@ new message content.",
             ],
             Array [
               Object {
-                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected don’t match the template content.",
+                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected do not match the template content.",
                 "id": "creatives.containersV2.Whatsapp.tagContentMismatchError",
               },
             ],
@@ -235685,7 +235685,7 @@ Click {{3}} to unsubscribe'",
             ],
             Array [
               Object {
-                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected don’t match the template content.",
+                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected do not match the template content.",
                 "id": "creatives.containersV2.Whatsapp.tagContentMismatchError",
               },
             ],
@@ -235797,7 +235797,7 @@ Click {{3}} to unsubscribe'",
             ],
             Array [
               Object {
-                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected don’t match the template content.",
+                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected do not match the template content.",
                 "id": "creatives.containersV2.Whatsapp.tagContentMismatchError",
               },
             ],
@@ -248917,7 +248917,7 @@ new message content.",
             ],
             Array [
               Object {
-                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected don’t match the template content.",
+                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected do not match the template content.",
                 "id": "creatives.containersV2.Whatsapp.tagContentMismatchError",
               },
             ],
@@ -249029,7 +249029,7 @@ new message content.",
             ],
             Array [
               Object {
-                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected don’t match the template content.",
+                "defaultMessage": "TAG CONTENT MISMATCH: The language and/or template category selected do not match the template content.",
                 "id": "creatives.containersV2.Whatsapp.tagContentMismatchError",
               },
             ],