@capillarytech/creatives-library 8.0.186 → 8.0.187

package/config/app.js

@@ -21,7 +21,6 @@ const config = {
   },
   development: {
     api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
-    // api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/package.json

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

package/services/api.js

@@ -264,7 +264,6 @@ export const getUserData = () => {
 
 export const createTemplate = ({template}) => {
   const url = `${API_ENDPOINT}/templates/SMS`;
-  console.log("creating template",template);
   return request(url, getAPICallObject('POST', template));
 };
 

package/v2Components/CapActionButton/index.js

@@ -83,7 +83,9 @@ export const CapActionButton = (props) => {
   const onButtonTextChange = ({target}) => {
     const { value, id } = target;
     let errorMessage = '';
-    if (!isValidText(value)) {
+    if (value.length > BTN_MAX_LENGTH) {
+      errorMessage = formatMessage(messages.ctaButtonTextLengthError);
+    } if (!isValidText(value)) {
       errorMessage = formatMessage(messages.ctaButtonErrorMessage);
     }
     setButtonError(errorMessage);

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -378,7 +378,6 @@ export function SlideBoxContent(props) {
         };
       }
       case constants.RCS: {
-        console.log("in slidebox content .js");
         const template = cloneDeep(templateDataObject);
         const { description = "", media: { mediaUrl = "" } = {}, title = "", suggestions = [] } = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0]', {});
         return {
@@ -393,10 +392,7 @@ export function SlideBoxContent(props) {
         };
       }
       default:
-        {
-        console.log("in default case");
         return get(templateDataObject, `versions.base.content`);
-        }
     }
   };
 

package/v2Containers/CreativesContainer/index.js

@@ -633,34 +633,7 @@ export class Creatives extends React.Component {
             channel = constants.RCS,
           } = templateData || {};
           const cardContent = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
-          const cardVarMapped = cardContent.cardVarMapped || {};
-          const reverseMapText = (text, cardVarMapped) => {
-            if (!text || !cardVarMapped || Object.keys(cardVarMapped).length === 0) {
-              return text;
-            }
-            
-            let reversedText = text;
-            Object.entries(cardVarMapped).forEach(([key, value]) => {
-              const cleanValue = value.replace(/^\{\{|\}\}$/g, '');
-              const valuePattern = new RegExp(`\\{\\{${cleanValue}\\}\\}`, 'g');
-              reversedText = reversedText.replace(valuePattern, `{{${key}}}`);
-            });
-            return reversedText;
-          };
-          
-          const updatedRcsContent = {
-            ...rcsContent,
-            cardContent: [
-              {
-                ...cardContent,
-                Status: RCS_STATUSES.approved,
-                title: reverseMapText(cardContent.title, cardVarMapped),
-                description: reverseMapText(cardContent.description, cardVarMapped),
-                cardVarMapped: {},
-              },
-              ...(rcsContent.cardContent?.slice(1) || []),
-            ],
-          };
+          const Status = RCS_STATUSES.approved || '';
         
           creativesTemplateData = {
             type: channel,
@@ -670,7 +643,15 @@ export class Creatives extends React.Component {
               base: {
                 content: {
                   RCS: {
-                    rcsContent: updatedRcsContent,
+                    rcsContent: {
+                      ...rcsContent,
+                      cardContent: [
+                        {
+                          ...cardContent,
+                          Status,
+                        },
+                      ],
+                    },
                     smsFallBackContent,
                   },
                 },

package/v2Containers/Rcs/index.js

@@ -298,7 +298,7 @@ export const Rcs = (props) => {
     //   );
     // }
     if (type === titletype) {
-      const error =
+      const errorMsg =
         (unsupportedTagsLengthCheck &&
           formatMessage(globalMessages.unsupportedTagsValidationError, {
             unsupportedTags: validationResponse.unsupportedTags,
@@ -306,10 +306,10 @@ export const Rcs = (props) => {
         (validationResponse.isBraceError &&
           formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
         false;
-    
-      setTemplateTitleError(error);
+      // Only update if changed to prevent flicker
+      setTemplateTitleError((prev) => (prev !== errorMsg ? errorMsg : prev));
     } else if (type === descType) {
-      const error =
+      const errorMsg =
         (unsupportedTagsLengthCheck &&
           formatMessage(globalMessages.unsupportedTagsValidationError, {
             unsupportedTags: validationResponse.unsupportedTags,
@@ -317,18 +317,29 @@ export const Rcs = (props) => {
         (validationResponse.isBraceError &&
           formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
         false;
-    
-      setTemplateDescError(error);
+      setTemplateDescError((prev) => (prev !== errorMsg ? errorMsg : prev));
     }    
   };
 
   useEffect(() => {
-    tagValidation(templateTitle, titletype);
-  }, [templateTitle, tags, injectedTags]);
+    const hasInteraction = !isEmpty(cardVarMapped) || Object.values(rcsTextVariables || {}).some(group => Object.values(group || {}).some(v => (v || '').trim() !== ''));
+    if (!hasInteraction) {
+      setTemplateTitleError(false);
+      return;
+    }
+    const mapped = getMappedDesc(templateTitle, cardVarMapped);
+    tagValidation(mapped, titletype);
+  }, [templateTitle, tags, injectedTags, cardVarMapped, rcsTextVariables]);
   
   useEffect(() => {
-    tagValidation(templateDesc, descType);
-  }, [templateDesc, tags, injectedTags]);
+    const hasInteraction = !isEmpty(cardVarMapped) || Object.values(rcsTextVariables || {}).some(group => Object.values(group || {}).some(v => (v || '').trim() !== ''));
+    if (!hasInteraction) {
+      setTemplateDescError(false);
+      return;
+    }
+    const mapped = getMappedDesc(templateDesc, cardVarMapped);
+    tagValidation(mapped, descType);
+  }, [templateDesc, tags, injectedTags, cardVarMapped, rcsTextVariables]);
 
 
   const RcsLabel = styled.div`
@@ -384,6 +395,33 @@ export const Rcs = (props) => {
         return updated;
       });
     }, [templateTitle]);
+
+    // Prefill variable inputs from existing mapping on load/edit
+    useEffect(() => {
+      if (!templateTitle && !templateDesc) return;
+      const buildPrefill = (targetString) => {
+        const arr = splitTemplateVarString(targetString);
+        const pre = {};
+        arr.forEach((elem, idx) => {
+          if (rcsVarTestRegex.test(elem)) {
+            const varName = elem.replace(/^\{\{|\}\}$/g, '');
+            const mapped = cardVarMapped[varName] ?? cardVarMapped[elem];
+            if (mapped) {
+              pre[idx] = /^\{\{[\s\S]*\}\}$/.test(mapped) ? mapped : `{{${mapped}}}`;
+            }
+          }
+        });
+        return pre;
+      };
+      const prefilledTitle = buildPrefill(templateTitle);
+      const prefilledDesc = buildPrefill(templateDesc);
+      if (Object.keys(prefilledTitle).length === 0 && Object.keys(prefilledDesc).length === 0) return;
+      setRcsTextVariables(prev => ({
+        ...prev,
+        [TITLE_TEXT]: { ...(prev[TITLE_TEXT] || {}), ...prefilledTitle },
+        [MESSAGE_TEXT]: { ...(prev[MESSAGE_TEXT] || {}), ...prefilledDesc },
+      }));
+    }, [templateTitle, templateDesc, cardVarMapped]);
     
     useEffect(() => {
       if(!isEditFlow && isFullMode){
@@ -477,8 +515,13 @@ export const Rcs = (props) => {
       }
       setEditFlow(true);
       setTemplateName(details.name || '');
-      setTemplateTitle(get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].title', ''));
-      setTemplateDesc(get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].description', ''));
+      const loadedTitle = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].title', '');
+      const loadedDesc = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].description', '');
+      const loadedMap = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].cardVarMapped', {});
+      const normalizedTitle = (!isFullMode && !isEmpty(loadedMap)) ? getUnmappedDesc(loadedTitle, loadedMap) : loadedTitle;
+      const normalizedDesc = (!isFullMode && !isEmpty(loadedMap)) ? getUnmappedDesc(loadedDesc, loadedMap) : loadedDesc;
+      setTemplateTitle(normalizedTitle);
+      setTemplateDesc(normalizedDesc);
       setSuggestions(get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].suggestions', []));
       templateStatusHelper(details);
       const mediaData = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].media', '');
@@ -556,44 +599,99 @@ export const Rcs = (props) => {
   };
 
   const onTagSelect = (tag) => {
+    // Determine target input (index and type). If nothing focused, pick the first available variable slot.
+    let targetType = focusedVarType;
+    let targetIndex;
+    let tokenAtIndex = '';
     if (!focusedVarId) {
-      CapNotification.error({
-        message: formatMessage(messages.noVariableFocused) || "Please select a variable to insert the label.",
-      });
-      return;
+      // Try description first
+      const descArray = splitTemplateVarString(templateDesc);
+      let found = false;
+      for (let i = 0; i < descArray.length; i += 1) {
+        const elem = descArray[i];
+        if (rcsVarTestRegex.test(elem)) {
+          const currentVal = (rcsTextVariables?.[MESSAGE_TEXT]?.[i]) || '';
+          if (!currentVal) {
+            targetType = MESSAGE_TEXT;
+            targetIndex = i;
+            tokenAtIndex = elem;
+            found = true;
+            break;
+          }
+        }
+      }
+      // If no empty slot in description, try title
+      if (!found) {
+        const titleArray = splitTemplateVarString(templateTitle);
+        for (let i = 0; i < titleArray.length; i += 1) {
+          const elem = titleArray[i];
+          if (rcsVarTestRegex.test(elem)) {
+            const currentVal = (rcsTextVariables?.[TITLE_TEXT]?.[i]) || '';
+            if (!currentVal) {
+              targetType = TITLE_TEXT;
+              targetIndex = i;
+              tokenAtIndex = elem;
+              found = true;
+              break;
+            }
+          }
+        }
+      }
+      if (!targetType || targetIndex === undefined) {
+        CapNotification.error({
+          message: formatMessage(messages.noVariableFocused) || "Please select a variable to insert the label.",
+        });
+        return;
+      }
+    } else {
+      targetIndex = parseInt(focusedVarId.split('_').pop(), 10);
+      const arr = splitTemplateVarString(targetType === TITLE_TEXT ? templateTitle : templateDesc);
+      tokenAtIndex = arr[targetIndex] || '';
     }
-    const index = parseInt(focusedVarId.split("_").pop(), 10);
-    console.log('tags---> focusedVarType', focusedVarType); 
-    console.log('tags---> index', index);
-    console.log('tags---> tag', tag);
-    console.log('tags---> rcsTextVariables', rcsTextVariables);
-    setRcsTextVariables((prev) => {
-      const newState = {
-        ...prev,
-        [focusedVarType]: {
-          ...(prev[focusedVarType] || {}),
-          [index]: `{{${tag}}}`,
-        },
-      };
-      return newState;
-    });  
+
+    // Update the visual input field
+    setRcsTextVariables((prev) => ({
+      ...prev,
+      [targetType]: {
+        ...(prev[targetType] || {}),
+        [targetIndex]: `{{${tag}}}`,
+      },
+    }));
+
     // Store the variable-to-tag mapping
-    setCardVarMapped(prev => {
-      console.log("tags---> ------------- setCardVarMapped START -------------");
-      console.log("tags---> prev:", prev);
-      console.log("tags---> focusedVarId:", focusedVarId);
-      console.log("tags---> tag:", tag);
-      console.log("tags---> isFullMode:", isFullMode);
-    
-      const variableName = focusedVarId.replace(/^\{\{|\}\}_\d+$/g, '');
-      const newCardVarMapped = {
-        ...prev,
-        // In non-full mode store the mapped tag with braces: {{tagName}}
-        [variableName]: isFullMode ? tag : `{{${tag}}}`,
+    setCardVarMapped((prev) => {
+      // Determine stable variable name
+      const defaultVarName = (focusedVarId ? focusedVarId.split('_')[0] : tokenAtIndex).replace(/^\{\{|\}\}$/g, '');
+      const tokenName = tokenAtIndex.replace(/^\{\{|\}\}$/g, '');
+
+      // If this template had been saved with resolved tags, infer original key via inverse lookup
+      let variableName = defaultVarName;
+      if (prev && Object.keys(prev).length > 0) {
+        const entry = Object.entries(prev).find(([, v]) => {
+          const val = v || '';
+          const braced = /^\{\{[\s\S]*\}\}$/.test(val) ? val : `{{${val}}}`;
+          return braced === `{{${tokenName}}}`;
+        });
+        if (entry) {
+          const [keyFromMap] = entry;
+          variableName = keyFromMap;
+        }
+      }
+
+      const mappedValue = isFullMode ? tag : `{{${tag}}}`;
+
+      // Clean up any accidental keys equal to the tag token name (e.g., 'gt') to avoid duplicates
+      const cleaned = { ...prev };
+      if (tokenName && Object.prototype.hasOwnProperty.call(cleaned, tokenName)) {
+        delete cleaned[tokenName];
+      }
+
+      return {
+        ...cleaned,
+        [variableName]: mappedValue,
       };
-      return newCardVarMapped;
-    });    
-    
+    });
+
   };
 
   const onTagSelectFallback = (data) => {
@@ -907,15 +1005,32 @@ const splitTemplateVarString = (str) => {
     });
 
     if (type === TITLE_TEXT) {
-      const error = templateHeaderErrorHandler(reconstructed);
-      setTemplateTitleError(error);
+      // Only run tag-based validation to avoid flicker from multiple setters
+      tagValidation(reconstructed, titletype);
     } else {
-      const error = templateDescErrorHandler(reconstructed);
-      setTemplateDescError(error);
+      // Only run tag-based validation to avoid flicker from multiple setters
+      tagValidation(reconstructed, descType);
     }
 
     return updated;
   });
+
+  // Keep mapping in sync with what user types in the variable input
+  const targetStringForMap = type === TITLE_TEXT ? templateTitle : templateDesc;
+  const arrForMap = splitTemplateVarString(targetStringForMap);
+  const token = arrForMap[index] || '';
+  if (rcsVarTestRegex.test(token)) {
+    const variableName = token.replace(/^\{\{|\}\}$/g, '');
+    const normalized = value
+      ? (/^\{\{[\s\S]*\}\}$/.test(value) ? value : `{{${value}}}`)
+      : '';
+    setCardVarMapped(prev => {
+      const next = { ...prev };
+      // Keep the variable key even when empty; store empty string as value
+      next[variableName] = (normalized && normalized.trim() !== '') ? normalized : '';
+      return next;
+    });
+  }
   };
 
   const setTextAreaId = (e, type) => {
@@ -1055,6 +1170,11 @@ const splitTemplateVarString = (str) => {
     />
   )}
 </div>
+{(isEditFlow || !isFullMode) && templateTitleError && (
+  <CapError className="rcs-template-title-error">
+    {templateTitleError}
+  </CapError>
+)}
     </>
   )}
 
@@ -1138,6 +1258,11 @@ const splitTemplateVarString = (str) => {
               )
             }
           </div>
+          {(isEditFlow || !isFullMode) && templateDescError && (
+            <CapError className="rcs-template-message-error">
+              {templateDescError}
+            </CapError>
+          )}
         </CapRow>
         {renderButtonComponent()}
       </>
@@ -1674,8 +1799,9 @@ const splitTemplateVarString = (str) => {
   const getRcsPreview = () => {
     
     const dimensionObj = RCS_IMAGE_DIMENSIONS[selectedDimension];
-    const mappedDesc = !isFullMode ? getMappedDesc(templateDesc, cardVarMapped) : templateDesc;
-    const mappedTitle = !isFullMode ? getMappedDesc(templateTitle, cardVarMapped) : templateTitle;
+    // Always show resolved values in preview
+    const mappedDesc = getMappedDesc(templateDesc, cardVarMapped);
+    const mappedTitle = getMappedDesc(templateTitle, cardVarMapped);
     return (
       <TemplatePreview
         channel={RCS}
@@ -1712,6 +1838,21 @@ const splitTemplateVarString = (str) => {
       return elem;
     }).join('');
   };
+  
+  const getUnmappedDesc = (str, mapping) => {
+    if (!str) return '';
+    if (!mapping || Object.keys(mapping).length === 0) return str;
+    let result = str;
+    Object.keys(mapping).forEach((key) => {
+      const value = mapping[key];
+      if (!value) return;
+      const bracedValue = /^\{\{[\s\S]*\}\}$/.test(value) ? value : `{{${value}}}`;
+      const escaped = bracedValue.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+      const regex = new RegExp(escaped, 'g');
+      result = result.replace(regex, `{{${key}}}`);
+    });
+    return result;
+  };
 
   const createPayload = () => {
     const base = get(dltEditData, `versions.base`, {});
@@ -1843,6 +1984,37 @@ const splitTemplateVarString = (str) => {
       }
     }
 
+    if(!isFullMode){
+      const titleVars = splitTemplateVarString(templateTitle).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
+      const descVars = splitTemplateVarString(templateDesc).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
+      const allVars = Array.from(new Set([ ...titleVars, ...descVars ]));
+
+      if (allVars.length > 0 && isEmpty(cardVarMapped)) {
+        return true;
+      }
+
+      const hasEmptyMapping =
+        cardVarMapped &&
+        Object.keys(cardVarMapped).length > 0 &&
+        Object.entries(cardVarMapped).some(([_, v]) => {
+          if (typeof v !== 'string') return !v; // null/undefined
+          return v.trim() === ''; // empty string
+        });
+
+      if (hasEmptyMapping) {
+        return true;
+      }
+
+      const anyMissing = allVars.some(name => {
+        const v = cardVarMapped?.[name];
+        if (typeof v !== 'string') return !v;
+        return v.trim() === '';
+      });
+      if (anyMissing) {
+        return true;
+      }
+    }
+
       if (isMediaTypeText && templateDesc.trim() === '') {
         console.log("isMediaTypeText", isMediaTypeText);
         console.log("templateDesc", templateDesc);
@@ -1869,7 +2041,7 @@ const splitTemplateVarString = (str) => {
         return true;
       }
     }
-    if (templateDescError || fallbackMessageError) {
+    if (templateDescError || templateTitleError || fallbackMessageError) {
       console.log("disabled becuase template desc or fallback message has error");
       return true;
     }
@@ -1887,7 +2059,36 @@ const splitTemplateVarString = (str) => {
         return true;
       }
     }
+    if(!isFullMode){
+      const titleVars = splitTemplateVarString(templateTitle).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
+      const descVars = splitTemplateVarString(templateDesc).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
+      const allVars = Array.from(new Set([ ...titleVars, ...descVars ]));
+
+      if (allVars.length > 0 && isEmpty(cardVarMapped)) {
+        return true;
+      }
 
+      const hasEmptyMapping =
+        cardVarMapped &&
+        Object.keys(cardVarMapped).length > 0 &&
+        Object.entries(cardVarMapped).some(([_, v]) => {
+          if (typeof v !== 'string') return !v; // null/undefined
+          return v.trim() === ''; // empty string
+        });
+
+      if (hasEmptyMapping) {
+        return true;
+      }
+
+      const anyMissing = allVars.some(name => {
+        const v = cardVarMapped?.[name];
+        if (typeof v !== 'string') return !v;
+        return v.trim() === '';
+      });
+      if (anyMissing) {
+        return true;
+      }
+    }
     if (isMediaTypeText && templateDesc.trim() === '') {
       console.log('disabled becuase template desc is empty');
       return true;
@@ -1910,6 +2111,9 @@ const splitTemplateVarString = (str) => {
         return true;
       }
     }
+    if (templateTitleError || templateDescError || fallbackMessageError) {
+      return true;
+    }
     return false;
   };