@capillarytech/creatives-library 9.0.33 → 9.0.35-alpha.0

package/package.json

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

package/v2Containers/CreativesContainer/index.js

@@ -91,6 +91,7 @@ import {EXTERNAL_URL, SITE_URL, WEBPUSH_MEDIA_TYPES} from '../WebPush/constants'
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { RCS_STATUSES, contentType as RCS_CONTENT_TYPE, EMBEDDED } from '../Rcs/constants';
 import { pickRcsCardVarMappedEntries } from '../Rcs/rcsLibraryHydrationUtils';
+import { resolveRcsCardPreviewStrings, isRcsTextOnlyCardMediaType } from '../Rcs/utils';
 import { RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../../v2Components/CommonTestAndPreview/constants';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
@@ -1444,7 +1445,28 @@ export class Creatives extends React.Component {
           const firstCardFromSubmit = Array.isArray(cardContentFromSubmit)
             ? cardContentFromSubmit[0]
             : null;
-          const cardContent = cardContentFromSubmit;
+          const isLibraryModeForRcsConsumerPayload = isFullModeForRcsConsumerPayload !== true;
+          // Consumers (e.g. campaigns) display `cardDisplayTitle`/`cardDisplayDescription` in
+          // preference to `title`/`description` when present (see getRcsCardDisplayTitle/
+          // Description) but getTemplateData strips them before re-hydrating this editor — so
+          // populating them here with resolved tag values is display-only and never feeds back
+          // into `templateTitle`/`templateDesc` on reopen. Keep raw `title`/`description` as-is.
+          const cardContent = Array.isArray(cardContentFromSubmit)
+            ? cardContentFromSubmit.map((card = {}) => {
+                const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
+                  card.title || '',
+                  card.description || '',
+                  card.cardVarMapped || {},
+                  isLibraryModeForRcsConsumerPayload,
+                  isRcsTextOnlyCardMediaType(card.mediaType),
+                );
+                return {
+                  ...card,
+                  cardDisplayTitle: rcsTitle,
+                  cardDisplayDescription: rcsDesc,
+                };
+              })
+            : cardContentFromSubmit;
           const rcsContent = {
             contentType,
             cardType,

package/v2Containers/Rcs/index.js

@@ -1066,9 +1066,9 @@ export const Rcs = (props) => {
       if (mediaType) {
       setTemplateMediaType(mediaType);
     }
-    const tempOrientation = cardSettings.cardOrientation;
-    const tempAlignment = cardSettings.mediaAlignment;
-    const tempHeight = mediaData.height;
+    const tempOrientation = cardSettings?.cardOrientation;
+    const tempAlignment = cardSettings?.mediaAlignment;
+    const tempHeight = mediaData?.height;
     
     // Map to actual RCS_IMAGE_DIMENSIONS keys
     let tempDimension;
@@ -1432,6 +1432,31 @@ export const Rcs = (props) => {
     return templateStr.replace(placeholderRegex, `{{${tagName}}}`);
   };
 
+  /**
+   * Replaces only the var token at `slotOrdinalZeroBased` (the field-local ordinal among
+   * `{{...}}` tokens, left to right) with `{{tagName}}`. Unlike a name-based regex replace,
+   * this targets a single slot even when the same tag name appears in other slots of the field.
+   */
+  const replaceTagAtFieldSlotOrdinal = (templateStr, slotOrdinalZeroBased, tagName) => {
+    if (!templateStr || slotOrdinalZeroBased === null || slotOrdinalZeroBased === undefined || !tagName) {
+      return templateStr;
+    }
+    let varOrdinal = 0;
+    let replaced = false;
+    const updatedSegments = splitTemplateVarStringRcs(templateStr).map((segment) => {
+      if (rcsVarTestRegex.test(segment)) {
+        const currentOrdinal = varOrdinal;
+        varOrdinal += 1;
+        if (currentOrdinal === slotOrdinalZeroBased) {
+          replaced = true;
+          return `{{${tagName}}}`;
+        }
+      }
+      return segment;
+    });
+    return replaced ? updatedSegments.join('') : templateStr;
+  };
+
   const onTagSelect = (selectedTagNameFromPicker, varSegmentCompositeDomId, tagAreaField) => {
     if (!varSegmentCompositeDomId) return;
     const underscoreIndexInCompositeId = varSegmentCompositeDomId.lastIndexOf('_');
@@ -1497,36 +1522,47 @@ export const Rcs = (props) => {
       return updatedCardVarMapped;
     });
 
-    if (
-      isNumericPlaceholderSlot
-      && (tagAreaField === RCS_TAG_AREA_FIELD_TITLE || tagAreaField === RCS_TAG_AREA_FIELD_DESC)
-    ) {
+    if (tagAreaField === RCS_TAG_AREA_FIELD_TITLE || tagAreaField === RCS_TAG_AREA_FIELD_DESC) {
+      // A numeric slot (e.g. {{1}}) is replaced by its unique placeholder text; a slot that
+      // already holds a named tag (e.g. {{first_name}}) is replaced by field-local position,
+      // since a name-based replace would also overwrite other slots sharing that same tag name.
+      const fieldOffsetForSlot = tagAreaField === RCS_TAG_AREA_FIELD_TITLE
+        ? 0
+        : (templateTitle?.match(rcsVarRegex) ?? []).length;
+      const localSlotOrdinal = (globalVarSlotIndexZeroBased !== null && globalVarSlotIndexZeroBased !== undefined)
+        ? globalVarSlotIndexZeroBased - fieldOffsetForSlot
+        : null;
+
       if (tagAreaField === RCS_TAG_AREA_FIELD_TITLE) {
         setTemplateTitle((previousTitle) => {
-          const titleAfterReplacingNumericPlaceholder = replaceNumericPlaceholderWithTagInTemplate(
-            previousTitle || '',
-            semanticOrNumericVarName,
-            selectedTagNameFromPicker,
-          );
-          if (titleAfterReplacingNumericPlaceholder === previousTitle) return previousTitle;
-          setTemplateTitleError(variableErrorHandling(titleAfterReplacingNumericPlaceholder));
+          const titleAfterReplacingTag = isNumericPlaceholderSlot
+            ? replaceNumericPlaceholderWithTagInTemplate(
+                previousTitle || '',
+                semanticOrNumericVarName,
+                selectedTagNameFromPicker,
+              )
+            : replaceTagAtFieldSlotOrdinal(previousTitle || '', localSlotOrdinal, selectedTagNameFromPicker);
+          if (titleAfterReplacingTag === previousTitle) return previousTitle;
+          setTemplateTitleError(variableErrorHandling(titleAfterReplacingTag));
           // Remount segment editor: tag insert replaces {{n}} with e.g. {{tag.FORMAT_1}} — slot ids change; avoids stale UI vs manual typing in full-mode TextArea
           setRcsVarSegmentEditorRemountKey((remountKey) => remountKey + 1);
-          return titleAfterReplacingNumericPlaceholder;
+          return titleAfterReplacingTag;
         });
       } else {
         setTemplateDesc((previousDescription) => {
-          const descriptionAfterReplacingNumericPlaceholder = replaceNumericPlaceholderWithTagInTemplate(
-            previousDescription || '',
-            semanticOrNumericVarName,
-            selectedTagNameFromPicker,
-          );
-          if (descriptionAfterReplacingNumericPlaceholder === previousDescription) {
+          const descriptionAfterReplacingTag = isNumericPlaceholderSlot
+            ? replaceNumericPlaceholderWithTagInTemplate(
+                previousDescription || '',
+                semanticOrNumericVarName,
+                selectedTagNameFromPicker,
+              )
+            : replaceTagAtFieldSlotOrdinal(previousDescription || '', localSlotOrdinal, selectedTagNameFromPicker);
+          if (descriptionAfterReplacingTag === previousDescription) {
             return previousDescription;
           }
-          setTemplateDescError(variableErrorHandling(descriptionAfterReplacingNumericPlaceholder));
+          setTemplateDescError(variableErrorHandling(descriptionAfterReplacingTag));
           setRcsVarSegmentEditorRemountKey((remountKey) => remountKey + 1);
-          return descriptionAfterReplacingNumericPlaceholder;
+          return descriptionAfterReplacingTag;
         });
       }
     }

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

@@ -239,6 +239,7 @@ exports[`Test Templates container Should render sms illustration when no templat
                     <CapButton
                       className="create-new-sms margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -813,6 +814,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -1223,6 +1225,7 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -1696,6 +1699,7 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -2169,6 +2173,7 @@ exports[`Test Templates container Test max templates warning 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
+                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -10,7 +10,6 @@ export default css`
 
   .component-wrapper {
     ${(props) => props.isFullMode ? `
-      max-width: 71.25rem;
       margin: 0 auto;
       width: 100%;
       padding: 0;

package/v2Containers/TemplatesV2/index.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
-import { CapTab, CapCustomCard, CapButton, CapHeader, CapIcon, CapSpin, CapTooltip } from '@capillarytech/cap-ui-library';
+import { CapTab, CapCustomCard, CapButton, CapIcon, CapSpin, CapTooltip } from '@capillarytech/cap-ui-library';
 import { find, get, pick } from 'lodash';
 import Helmet from 'react-helmet';
 
@@ -443,14 +443,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
             />
           )}
           <section className="component-wrapper">
-            {isFullMode && (
-              <CapHeader
-                title={<FormattedMessage {...messages.creatives} />}
-                {...(!useLocalTemplates && {
-                  description: <FormattedMessage {...messages.creativesDesc} />,
-                })}
-              />
-            )}
             {hideChannelTabsForLocalSms ? (
               <section className="templates-v2-local-sms-pane">{activeLocalPane?.content}</section>
             ) : (