@capillarytech/creatives-library 9.0.28 → 9.0.29-alpha.2

package/v2Containers/Email/index.js

@@ -237,41 +237,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.props.actions.getCmsSetting(BEE_PLUGIN, dragDropId, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
-    // The <Email> direct path (SlideBoxContent routes here when
-    // templateData.base.is_drag_drop is true) bypasses EmailWrapper/useEmailWrapper,
-    // so Templates.BEETemplate is never seeded and a created/edited drag-drop would
-    // open as the HTML editor. Seed isDragDrop + the BEE plugin from the inline
-    // templateData so it opens as BEE.
-    if (_.isEmpty(this.props.Templates.BEETemplate) && !_.isEmpty(this.props.templateData)) {
-      const td = this.props.templateData;
-      const activeTab = _.get(td, 'versions.base.activeTab', 'en');
-      const inlineIsDragDrop = _.get(td, 'base.is_drag_drop')
-        || _.get(td, `versions.base.${activeTab}.is_drag_drop`)
-        || _.get(td, 'versions.base.is_drag_drop')
-        || _.get(td, 'is_drag_drop');
-      // BEE-ONLY: everything below is gated on is_drag_drop so this fallback
-      // never touches the HTML/CKEditor flow (which also has an empty BEETemplate).
-      if ((inlineIsDragDrop === true || inlineIsDragDrop === 1) && isBEEAppEnable) {
-        this.setState({ isDragDrop: true });
-        // This path bypasses setEditData, so seed the subject from the inline
-        // templateData too (otherwise the title is empty for a created drag-drop).
-        const inlineSubject = _.get(td, 'base.subject')
-          || _.get(td, `versions.base.${activeTab}.subject`)
-          || _.get(td, 'versions.base.subject')
-          || _.get(td, 'emailSubject')
-          || _.get(td, 'subject');
-        if (inlineSubject) {
-          formData['template-subject'] = inlineSubject;
-        }
-        const inlineDragDropId = _.get(td, 'base.drag_drop_id')
-          || _.get(td, 'base.id')
-          || _.get(td, `versions.base.${activeTab}.drag_drop_id`)
-          || _.get(td, `versions.base.${activeTab}.id`)
-          || _.get(td, 'drag_drop_id')
-          || _.get(td, 'id');
-        this.props.actions.getCmsSetting(BEE_PLUGIN, inlineDragDropId, this.props.params.id ? 'open' : 'create', undefined, isBEESupport, isBEEAppEnable);
-      }
-    }
     const hasUploadedContent = !this.props.params?.id && this.props.Templates?.selectedEmailLayout && !_.isEmpty(formData);
     this.setState({
       content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''),
@@ -588,21 +553,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           const beeToken = `BEEeditor${currentTab > 1 ? currentTab : ''}token`;
           let beeJsonValue = '';
           const selectedId = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate.versions.base.drag_drop_id', '');
-
-          // Embedded journey content: the inline templateData carries the user's
-          // edited BEE json (base.json_content), which is more current than the
-          // reusable template fetched via getTemplateDetails. Prefer it so a
-          // re-edit shows the saved edit instead of the original template. For
-          // the create/gallery flow this key is absent, so we fall through to the
-          // existing sources (template details / BEETemplate) unchanged.
-          beeJsonValue = _.get(nextProps, 'templateData.base.json_content', '')
-            || _.get(nextProps, 'templateData.json_content', '');
-
+          
           // Get beeJsonValue from template data - check multiple sources
           // First check if it's already in formData (from setEditData)
-          if (!beeJsonValue) {
-            beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
-          }
+          beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
           
           // Also check formData.base
           if (!beeJsonValue) {
@@ -1185,21 +1139,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const type = this.props.location.query.type;
 
     formData['template-name'] = editData.name;
-    // BEE-ONLY: for embedded drag-drop content, prefer the inline edited subject
-    // (base.subject / emailSubject) over the fetched template's subject so subject
-    // edits persist on re-open. Gated on is_drag_drop so the HTML/CKEditor flow is
-    // untouched (it keeps using editData.versions.base.subject as before).
-    // setEditData runs once (editDataSet), so this is a one-time load-time override.
-    const tdIsDragDrop = _.get(this.props, 'templateData.base.is_drag_drop') === true
-      || _.get(this.props, 'templateData.base.is_drag_drop') === 1
-      || _.get(this.props, 'templateData.is_drag_drop') === true
-      || _.get(this.props, 'templateData.is_drag_drop') === 1;
-    const inlineSubject = tdIsDragDrop
-      ? (_.get(this.props, 'templateData.base.subject', '')
-        || _.get(this.props, 'templateData.emailSubject', '')
-        || _.get(this.props, 'templateData.subject', ''))
-      : '';
-    const subject = inlineSubject || _.get(editData, 'versions.base.subject', '');
+    const subject = _.get(editData, 'versions.base.subject', '');
     formData['template-subject'] = subject;
     formData.base = editData.versions.base;
 

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -234,18 +234,13 @@ const useEmailWrapper = ({
     // New flow: When template details are loaded and it's a BEE template, set it in Templates.BEETemplate
     // This allows Email component to properly initialize and call getCmsSetting
     const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
-    // Inline templateData (e.g. a freshly-created drag-drop content, or a
-    // library add-creative -> select-template) is authoritative when no template
-    // details were fetched. Without seeding BEETemplate from it, setBEETemplate
-    // never fires for that flow and a BEE template opens as the HTML editor.
-    const hasTemplateDataProp = templateData && !isEmpty(templateData);
     // Note: We check Email?.BEETemplate as a proxy, but the actual BEETemplate is in Templates reducer
     // The Email component will detect it via this.props.Templates.BEETemplate
     const hasBEETemplate = Email?.BEETemplate && !isEmpty(Email.BEETemplate);
 
-    if ((hasTemplateDetails || hasTemplateDataProp) && !hasBEETemplate && templatesActions?.setBEETemplate && !beeTemplateSetRef.current) {
+    if (hasTemplateDetails && !hasBEETemplate && templatesActions?.setBEETemplate && !beeTemplateSetRef.current) {
       // Check if it's a BEE template
-      const editTemplateData = hasTemplateDetails ? Email.templateDetails : templateData;
+      const editTemplateData = Email.templateDetails;
       const getIsDragDrop = (data) => {
         if (!data) return false;
         const baseDragDrop = get(data, 'versions.base.is_drag_drop', false);
@@ -301,10 +296,10 @@ const useEmailWrapper = ({
     }
 
     // Reset ref when template changes (template details cleared)
-    if (!hasTemplateDetails && !hasTemplateDataProp && beeTemplateSetRef.current) {
+    if (!hasTemplateDetails && beeTemplateSetRef.current) {
       beeTemplateSetRef.current = false;
     }
-  }, [Email?.templateDetails, Email?.BEETemplate, Email?.getTemplateDetailsInProgress, Email?.fetchingCmsSettings, templatesActions, emailActions, params?.id, location?.query, checkBeeEditorEnabled, isFullMode, templateData]);
+  }, [Email?.templateDetails, Email?.BEETemplate, Email?.getTemplateDetailsInProgress, Email?.fetchingCmsSettings, templatesActions, emailActions, params?.id, location?.query, checkBeeEditorEnabled, isFullMode]);
 
   const onChange = useCallback((e) => {
     const { target: { value } } = e;

package/v2Containers/MobilePush/Create/test/saga.test.js

@@ -7,12 +7,12 @@ import {
 
 describe("MPUSH Sagas", () => {
   describe("v2MobilePushCreateSagas Combined", () => {
-    it.concurrent("should initialize all mpush-related watcher sagas without error", () => {
+    it("should initialize all mpush-related watcher sagas without error", () => {
       return expectSaga(v2MobilePushCreateSagas).run();
     });
   });
   describe("v2MobilePushWatchDuplicateTemplateSaga Combined", () => {
-    it.concurrent("should initialize all mpush-related watcher sagas without error", () => {
+    it("should initialize all mpush-related watcher sagas without error", () => {
       return expectSaga(v2MobilePushWatchDuplicateTemplateSaga).run();
     });
   });

package/v2Containers/Rcs/carouselUtils.js

@@ -0,0 +1,256 @@
+import cloneDeep from 'lodash/cloneDeep';
+import { isUrl, isValidText } from '../Line/Container/Wrapper/utils';
+import {
+  invalidVarRegex,
+  RCS_CTA_URL_TYPE,
+  URL_MAX_LENGTH,
+} from '../../v2Components/CapActionButton/constants';
+import {
+  RCS_MEDIA_TYPES,
+  RCS_BUTTON_TYPES,
+  TEMPLATE_TITLE_MAX_LENGTH,
+  RCS_RICH_CARD_MAX_LENGTH,
+  RCS_NUMERIC_VAR_TOKEN_REGEX,
+  RCS_CAROUSEL_ASSET_INDEX_BASE,
+  RCS_CAROUSEL_FIRST_CARD_DEFAULT_SUGGESTIONS,
+  MEDIUM,
+} from './constants';
+import { sanitizeCardVarMappedValue } from './utils';
+
+const getVarNameFromToken = (token = '') => token.replace(/^\{\{|\}\}$/g, '');
+
+/**
+ * Assigns every variable token across the whole carousel a stable `cardVarMapped` key (a plain
+ * number, title then description, per card, in encounter order) — {cardIndex: {title: [key, …],
+ * description: [key, …]}}. Each occurrence is its own independent slot — even two tokens sharing
+ * the same literal tag name (e.g. "{{name}}" in both a card's title and description) get separate
+ * keys and are filled independently. A slot's key depends only on where its token sits in the
+ * template text, never on which tag currently fills it, so re-picking a different tag for the
+ * same slot never changes its key.
+ */
+export const computeCarouselVarSlotKeys = (carouselData, rcsVarRegex) => {
+  let nextNumber = 1;
+  return (carouselData || []).map((card = {}) => {
+    const keysForField = (fieldStr) => (fieldStr || '').match(rcsVarRegex)?.map(() => {
+      const key = String(nextNumber);
+      nextNumber += 1;
+      return key;
+    }) ?? [];
+    return {
+      title: keysForField(card.title),
+      description: keysForField(card.description),
+    };
+  });
+};
+
+export const getCarouselImageAssetIndex = (cardIndex) =>
+  RCS_CAROUSEL_ASSET_INDEX_BASE + (cardIndex * 3);
+export const getCarouselVideoAssetIndex = (cardIndex) =>
+  RCS_CAROUSEL_ASSET_INDEX_BASE + (cardIndex * 3) + 1;
+export const getCarouselThumbnailAssetIndex = (cardIndex) =>
+  RCS_CAROUSEL_ASSET_INDEX_BASE + (cardIndex * 3) + 2;
+
+export const isThumbnailAssetIndex = (index) => {
+  if (index === 1) return true; // standalone thumbnail
+  if (index >= RCS_CAROUSEL_ASSET_INDEX_BASE) {
+    return ((index - RCS_CAROUSEL_ASSET_INDEX_BASE) % 3) === 2; // carousel thumbnail slot
+  }
+  return false;
+};
+
+/** Carousel dimension key: `${HEIGHT}_${WIDTH}` (e.g., SHORT_SMALL) */
+export const getCarouselDimensionKey = (selectedCarouselHeight, selectedCarouselWidth) =>
+  `${selectedCarouselHeight}_${selectedCarouselWidth}`;
+
+export const ensureFirstCardDefaultPhoneSuggestions = (cards) => {
+  const next = cloneDeep(cards || []);
+  if (next.length === 0) return next;
+  const suggestions = next[0].suggestions;
+  if (!Array.isArray(suggestions) || suggestions.length === 0) {
+    next[0] = {
+      ...next[0],
+      suggestions: cloneDeep(RCS_CAROUSEL_FIRST_CARD_DEFAULT_SUGGESTIONS),
+    };
+  }
+  return next;
+};
+
+export const carouselButtonTextHasForbiddenChars = (value) => {
+  if (!value) return false;
+  if (value.includes('[') || value.includes(']')) return true;
+  const withoutValidVariables = value.replace(/\{\{[^}]*\}\}/g, '');
+  if (withoutValidVariables.includes('{') || withoutValidVariables.includes('}')) return true;
+  return false;
+};
+
+export const isCompleteSavedCarouselSuggestion = (suggestion) => {
+  if (!suggestion || !suggestion.isSaved) return false;
+  const text = (suggestion.text || '').trim();
+  if (!text || !isValidText(text) || carouselButtonTextHasForbiddenChars(text)) return false;
+  if (suggestion.type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
+    return String(suggestion.phoneNumber || '').length >= 5;
+  }
+  if (suggestion.type === RCS_BUTTON_TYPES.CTA) {
+    const url = String(suggestion.url || '').trim();
+    if (!url || url.length > URL_MAX_LENGTH) return false;
+    const subtype = suggestion.urlType || RCS_CTA_URL_TYPE.STATIC;
+    if (subtype === RCS_CTA_URL_TYPE.DYNAMIC) {
+      return true;
+    }
+    if (!isUrl(url)) return false;
+    const varMatches = url.match(invalidVarRegex);
+    return !(varMatches && varMatches.length > 0);
+  }
+  if (suggestion.type === RCS_BUTTON_TYPES.QUICK_REPLY) {
+    return true;
+  }
+  return false;
+};
+
+export const isCarouselCardValid = (card, cardIndex) => {
+  if (!card) return false;
+  if (!card.title || !card.title.trim()) return false;
+  if ((card.title || '').length > TEMPLATE_TITLE_MAX_LENGTH) return false;
+  if (!card.description || !card.description.trim()) return false;
+  if ((card.description || '').length > RCS_RICH_CARD_MAX_LENGTH) return false;
+  let mediaOk = false;
+  if (card.mediaType === RCS_MEDIA_TYPES.IMAGE) {
+    mediaOk = !!(card.imageSrc && String(card.imageSrc).trim());
+  } else if (card.mediaType === RCS_MEDIA_TYPES.VIDEO) {
+    const hasVideo = !!(card.videoAsset && card.videoAsset.videoSrc && String(card.videoAsset.videoSrc).trim());
+    const hasThumb = !!(card.thumbnailSrc && String(card.thumbnailSrc).trim());
+    mediaOk = hasVideo && hasThumb;
+  } else {
+    return false;
+  }
+  if (!mediaOk) return false;
+  if (cardIndex === 0) {
+    const sugg = Array.isArray(card.suggestions) ? card.suggestions : [];
+    if (!sugg.some(isCompleteSavedCarouselSuggestion)) return false;
+  }
+  return true;
+};
+
+export const checkDisableAddCarouselButton = (carouselData, activeCarouselIndex) => {
+  const idx = parseInt(activeCarouselIndex, 10);
+  const activeCard = carouselData?.[idx];
+  return !isCarouselCardValid(activeCard, idx);
+};
+
+/** Carousel: global variables across the whole carousel (all cards, title+body) */
+export const getNextCarouselVarToken = (carouselData) => {
+  const nums = [];
+  (carouselData || []).forEach((card = {}) => {
+    const titleMatches = (card.title || '').match(RCS_NUMERIC_VAR_TOKEN_REGEX) || [];
+    const descMatches = (card.description || '').match(RCS_NUMERIC_VAR_TOKEN_REGEX) || [];
+    [...titleMatches, ...descMatches].forEach((tok) => {
+      const num = parseInt((tok.match(/\d+/) || [])[0], 10);
+      if (!Number.isNaN(num)) nums.push(num);
+    });
+  });
+  const existing = new Set(nums);
+  let nextNumber = 1;
+  while (existing.has(nextNumber)) nextNumber++;
+  if (nextNumber > 19) return '';
+  return `{{${nextNumber}}}`;
+};
+
+/** Carousel: per-card character counts (same limits as rich card) */
+export const getCarouselTitleCharacterCount = (carouselData, cardIndex) => {
+  const titleText = carouselData?.[cardIndex]?.title || '';
+  return titleText ? titleText.length : 0;
+};
+
+export const getCarouselDescriptionCharacterCount = (carouselData, cardIndex) => {
+  const descriptionText = carouselData?.[cardIndex]?.description || '';
+  return descriptionText ? descriptionText.length : 0;
+};
+
+/**
+ * Preview (TestAndPreviewSlidebox / listing preview): resolve each card's title/desc through
+ * `resolveCarouselTemplateWithMap(str, cardIndex, isDescField)` — each variable slot's key is its
+ * global position across the whole carousel (see `getCarouselGlobalVarSlotKey`), so two cards can
+ * never collide even when they pick the same tag name for their own slot.
+ */
+export const buildCarouselCardsForPreview = (cards = [], { isFullMode, resolveCarouselTemplateWithMap }) =>
+  (cards || []).map((card = {}, cardIndex) => {
+    const rawTitle = card.title || '';
+    const rawDesc = card.description || '';
+    const titleVarCount = (rawTitle.match(rcsVarRegex) || []).length;
+    const descVarCount = (rawDesc.match(rcsVarRegex) || []).length;
+    const resolvedTitle = !isFullMode
+      ? resolveCarouselTemplateWithMap(rawTitle, cardIndex, false)
+      : rawTitle;
+    const resolvedDesc = !isFullMode
+      ? resolveCarouselTemplateWithMap(rawDesc, cardIndex, true)
+      : rawDesc;
+    if (!isFullMode) {
+      slotOffset += titleVarCount + descVarCount;
+    }
+    const videoThumb = card.thumbnailSrc || card.videoAsset?.videoThumbnail || '';
+    const videoSrc = card.videoAsset?.videoSrc || '';
+    return {
+      mediaType: (card.mediaType || '').toLowerCase(),
+      imageSrc: card.imageSrc || '',
+      videoSrc,
+      videoPreviewImg: videoThumb,
+      title: resolvedTitle,
+      bodyText: resolvedDesc,
+      suggestions: card.suggestions || [],
+    };
+  });
+};
+
+/** Payload (create/edit RCS template): build `cardContent` for the carousel case. */
+export const buildCarouselCardContentForPayload = (carouselData, {
+  isSlotMappingMode,
+  cardVarMapped,
+  selectedCarouselHeight,
+  rcsVarRegex,
+}) => {
+  const slotKeysByCard = computeCarouselVarSlotKeys(carouselData, rcsVarRegex);
+  return (carouselData || []).map((card = {}, cardIndex) => {
+    const cardMediaType = card.mediaType;
+    const isCardVideo = cardMediaType === RCS_MEDIA_TYPES.VIDEO;
+    const isCardImage = cardMediaType === RCS_MEDIA_TYPES.IMAGE;
+    const mediaUrl = isCardVideo
+      ? (card.videoAsset?.videoSrc || '')
+      : (card.imageSrc || '');
+    const thumbnailUrl = isCardVideo
+      ? (card.thumbnailSrc || card.videoAsset?.videoThumbnail || '')
+      : '';
+    const cardVarTokens = [
+      ...((card.title || '').match(rcsVarRegex) ?? []),
+      ...((card.description || '').match(rcsVarRegex) ?? []),
+    ];
+    const cardSlotKeys = [
+      ...(slotKeysByCard[cardIndex]?.title ?? []),
+      ...(slotKeysByCard[cardIndex]?.description ?? []),
+    ];
+    const cardVarMappedForCard = {};
+    cardVarTokens.forEach((token, tokenIndex) => {
+      const varName = getVarNameFromToken(token);
+      const slotKey = cardSlotKeys[tokenIndex];
+      if (!varName || !isSlotMappingMode) return;
+      const scopedValue = cardVarMapped?.[slotKey] ?? '';
+      cardVarMappedForCard[slotKey] = sanitizeCardVarMappedValue(scopedValue);
+    });
+    return {
+      title: card.title || '',
+      description: card.description || '',
+      mediaType: cardMediaType,
+      ...((isCardImage || isCardVideo) && {
+        media: {
+          mediaUrl,
+          thumbnailUrl,
+          height: selectedCarouselHeight || MEDIUM,
+          ...(isCardVideo && card.videoAsset?.videoName && { videoName: card.videoAsset.videoName }),
+        },
+      }),
+      ...(Array.isArray(card.suggestions) && card.suggestions.length > 0 && {
+        suggestions: card.suggestions,
+      }),
+      ...(Object.keys(cardVarMappedForCard).length > 0 && { cardVarMapped: cardVarMappedForCard }),
+    };
+  });
+};