@capillarytech/creatives-library 8.0.88-alpha.4 → 8.0.88

package/package.json

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

package/v2Containers/Zalo/index.js

@@ -53,6 +53,7 @@ import injectReducer from '../../utils/injectReducer';
 import * as globalActions from '../Cap/actions';
 import v2ZaloReducer from './reducer';
 import { v2ZaloSagas } from './saga';
+import { CapIcon } from '@capillarytech/cap-ui-library';
 
 export const Zalo = (props) => {
   const {
@@ -234,24 +235,19 @@ export const Zalo = (props) => {
     if (data && textAreaId) {
       const updatedZaloTemplateInfo = templateListParams?.map((listParams) => {
         const { name = '', value = '', minLength = '', maxLength = '' } = listParams;
-        console.log('******237',listParams);
         if (name === textAreaId) {
           const text = `${value}{{${data}}}`;
-          const isLengthError =
-            text.length <= minLength || text.length > maxLength;
-          const containsTags = text && text.includes('{{') && text.includes('}}');
-          const isExceedingLength = text.length > maxLength;
+          const hasTag = text.includes('{{') && text.includes('}}');
+          const isLengthError = !hasTag && (text.length <= minLength || text.length > maxLength);
           return {
             ...listParams,
             value: text,
-            error: isLengthError && !containsTags
+            error: isLengthError
               ? formatMessage(messages.maxMinLengthMessage, {
                   minLength,
                   maxLength,
                 })
-              : containsTags && isExceedingLength ? formatMessage(messages.tagLengthWarning, {
-                  maxLength,
-                }) : '',
+              : '',
           };
         }
         return listParams;
@@ -288,19 +284,13 @@ export const Zalo = (props) => {
     const { minLength = '', maxLength = '' } = field;
     let error = e ? tagValidationErrorMessage(e) : '';
     
-    // Check if the value contains any tags
-    const containsTags = e && e.includes('{{') && e.includes('}}');
-    console.log('***Length***288',containsTags);
-    if (!e || e.length <= minLength) {
+    // Only check length validation if there are no tags in the content
+    const hasTag = e && e.includes('{{') && e.includes('}}');
+    if (!hasTag && (!e || e.length <= minLength || e.length > maxLength)) {
       error = formatMessage(messages.maxMinLengthMessage, {
         minLength,
         maxLength,
       });
-    } else if (e.length > maxLength && !containsTags) {
-        error = formatMessage(messages.maxMinLengthMessage, {
-          minLength,
-          maxLength,
-        });
     }
     return error;
   };
@@ -325,11 +315,7 @@ export const Zalo = (props) => {
   };
 
   const renderTextBoxesForListParams = (listParam) => {
-    const { name = '', error = '', value = '', maxLength = '' } = listParam;
-    console.log('******324',listParam);
-    const containsTags = value && value.includes('{{') && value.includes('}}');
-    const isExceedingLength = value.length > maxLength;
-    console.log('***Length***326',containsTags, isExceedingLength);
+    const { name = '', error = '', value = '' } = listParam;
     return (
       <CapInput
         id={`zalo-${name}`}
@@ -370,14 +356,11 @@ export const Zalo = (props) => {
     let disableCheck = false;
     templateListParams?.forEach((listParams) => {
       const { error = '', value = '' } = listParams;
-      console.log('******367',listParams);
-      const errorMessage = !error
+      const hasTag = value && value.includes('{{') && value.includes('}}');
+      const errorMessage = !error && !hasTag
         ? handleErrorValidation(value, listParams)
         : error;
-      
-      // Only disable if there's an error and the value doesn't contain tags
-      const containsTags = value && value.includes('{{') && value.includes('}}');
-      if (errorMessage && !containsTags) {
+      if (errorMessage) {
         disableCheck = true;
       }
     });
@@ -387,7 +370,6 @@ export const Zalo = (props) => {
     const varMap = {};
     templateListParams?.forEach((listParam) => {
       const { name = '', value = '' } = listParam;
-      console.log('******390',listParam);
       varMap[name] = value;
     }
     );
@@ -421,10 +403,8 @@ export const Zalo = (props) => {
   const renderContent = () =>
     templateListParams?.map((listParam) => {
       const { name = '', value = '', maxLength = '' } = listParam;
-      console.log('******418',listParam);
-      const containsTags = value && value.includes('{{') && value.includes('}}');
-      const isExceedingLength = value.length > maxLength;
-      console.log('***Length***418',containsTags, isExceedingLength);
+      const hasTag = value && value.includes('{{') && value.includes('}}');
+      
       return (
         <>
           {renderTextBoxesForListParams(listParam)}
@@ -434,21 +414,13 @@ export const Zalo = (props) => {
                 name,
               })}
             </CapLabel>
-            <CapLabel 
-              className={`variable-field-length ${containsTags && isExceedingLength ? 'tag-length-warning' : ''}`}
-            > 
-              {
-                containsTags && isExceedingLength ? (
-                  formatMessage(messages.tagLengthWarning, {
-                    maxLength,
-                  })
-                ) : (
-                  formatMessage(messages.charactersCount, {
-                    variableLength: value.length,
-                    maxLength,
-                  })
-                )
-              }
+            <CapLabel className="variable-field-length">
+              {!hasTag && (
+                formatMessage(messages.charactersCount, {
+                  variableLength: value.length,
+                  maxLength,
+                })
+              )}
             </CapLabel>
           </CapRow>
         </>
@@ -495,7 +467,21 @@ export const Zalo = (props) => {
                 }
               />
             </CapRow>
-            <CapRow className="zalo-variable-list">{renderContent()}</CapRow>
+            <CapRow className="zalo-variable-list">
+              {renderContent()}
+            </CapRow>
+            <CapAlert
+              message={
+                <CapRow>
+                  <CapIcon type="warning" />
+                  <CapLabel type="label2">
+                    {formatMessage(messages.tagLengthWarning)}
+                  </CapLabel>
+                </CapRow>
+              }
+              type="warning"
+              className="zalo-warning-message"
+            />
           </CapRow>
         </CapColumn>
         <CapColumn span={10}>

package/v2Containers/Zalo/index.scss

@@ -27,6 +27,10 @@
     }
   }
 
+  .zalo-warning-message {
+    margin-bottom: $CAP_SPACE_16;
+  }
+
   .variable-field-container {
     display: flex;
     margin-top: $CAP_SPACE_08;
@@ -38,10 +42,6 @@
     .variable-field-length {
       position: absolute;
       right: 0;
-
-      &.tag-length-warning {
-        color: $FONT_COLOR_02;
-      }
     }
   }
 

package/v2Containers/Zalo/messages.js

@@ -85,6 +85,6 @@ export default defineMessages({
   },
   tagLengthWarning: {
     id: `${prefix}.tagLengthWarning`,
-    defaultMessage: "If the character count of the tag value exceeds {maxLength}, the campaign will fail.",
+    defaultMessage: "If the resolved tag values in the variables exceed their character count limit, the message will fail to go out.",
   },
 });