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

package/package.json

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

package/utils/rcsPayloadUtils.js

@@ -59,12 +59,9 @@ export const normalizeRcsMessageContentForApi = messageContentItem => {
     rcsCardPayloadOnly.cardContent.forEach(card => {
       if (Array.isArray(card?.suggestions)) {
         card.suggestions.forEach(suggestion => {
-          // isSaved and urlType are UI-only editor state: campaigns' send-for-approval API
-          // rejects them, and they aren't part of the persisted payload shape. The dynamic tag
-          // (if any) already lives inline in `url` (e.g. "https://x.com{{first_name}}") — no
-          // separate dynamicUrlPayload field is sent for RCS.
+          // isSaved is UI-only editor state: campaigns' send-for-approval API rejects it, and it
+          // isn't part of the persisted payload shape.
           delete suggestion?.isSaved;
-          delete suggestion?.urlType;
         });
       }
     });

package/utils/tests/rcsPayloadUtils.test.js

@@ -209,7 +209,7 @@ describe('normalizeRcsMessageContentForApi', () => {
     expect(item.rcsContent.cardContent).toEqual([{ title: 'Card' }]);
   });
 
-  it('strips isSaved and urlType from each suggestion in cardContent', () => {
+  it('strips isSaved from each suggestion in cardContent', () => {
     const item = {
       rcsContent: {
         cardContent: [
@@ -217,9 +217,7 @@ describe('normalizeRcsMessageContentForApi', () => {
             title: 'Card 1',
             suggestions: [
               { type: 'QUICK_REPLY', text: 'Yes', isSaved: true },
-              {
-                type: 'CTA', text: 'Go', url: 'https://example.com', urlType: 'STATIC', isSaved: false,
-              },
+              { type: 'CTA', text: 'Go', url: 'https://example.com', isSaved: false },
             ],
           },
         ],
@@ -232,56 +230,6 @@ describe('normalizeRcsMessageContentForApi', () => {
     ]);
   });
 
-  it('keeps type "CTA" and the inline tag in url, but drops urlType, for a dynamic-URL suggestion', () => {
-    const item = {
-      rcsContent: {
-        cardContent: [
-          {
-            title: 'Card 1',
-            suggestions: [
-              {
-                type: 'CTA',
-                text: 'Visit here',
-                url: 'https://example.com/{{first_name}}',
-                urlType: 'DYNAMIC',
-                isSaved: true,
-              },
-            ],
-          },
-        ],
-      },
-    };
-    normalizeRcsMessageContentForApi(item);
-    expect(item.rcsContent.cardContent[0].suggestions).toEqual([
-      {
-        type: 'CTA',
-        text: 'Visit here',
-        url: 'https://example.com/{{first_name}}',
-      },
-    ]);
-  });
-
-  it('leaves phone number and quick reply suggestions untouched by the urlType stripping', () => {
-    const item = {
-      rcsContent: {
-        cardContent: [
-          {
-            title: 'Card 1',
-            suggestions: [
-              {
-                type: 'PHONE_NUMBER', text: 'Call', phoneNumber: '918987678', isSaved: true,
-              },
-            ],
-          },
-        ],
-      },
-    };
-    normalizeRcsMessageContentForApi(item);
-    expect(item.rcsContent.cardContent[0].suggestions).toEqual([
-      { type: 'PHONE_NUMBER', text: 'Call', phoneNumber: '918987678' },
-    ]);
-  });
-
   it('handles cardContent with no suggestions gracefully', () => {
     const item = {
       rcsContent: {

package/v2Components/CapActionButton/constants.js

@@ -43,7 +43,6 @@ export const RCS_CTA_URL_TYPE = {
 export const BTN_MAX_LENGTH = 20;
 export const PHONE_NUMBER_MAX_LENGTH = 15;
 export const URL_MAX_LENGTH = 2000;
-export const DYNAMIC_URL_SUFFIX = '{{1}}';
 
 export const CTA_TYPE_RADIO_OPTIONS = [
   { label: <FormattedMessage {...messages.ctaPhoneNo} />, value: RCS_BUTTON_TYPES.PHONE_NUMBER },

package/v2Components/CapActionButton/index.js

@@ -17,8 +17,7 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
 import { CAP_SPACE_04 } from '@capillarytech/cap-ui-library/styled/variables';
-import globalMessages from '../../v2Containers/Cap/messages';
-import TagList from '../../v2Containers/TagList';
+import globalMessages from '../../v2Containers/Cap/messages';import CapTagListWithInput from '../CapTagListWithInput';
 
 import { isUrl, isValidText } from '../../v2Containers/Line/Container/Wrapper/utils';
 import messages from './messages';
@@ -31,7 +30,6 @@ import {
   RCS_CTA_URL_TYPE,
   CTA_TYPE_RADIO_OPTIONS,
   CTA_URL_TYPE_SELECT_OPTIONS,
-  DYNAMIC_URL_SUFFIX,
 } from './constants';
 import './index.scss';
 import { INITIAL_SUGGESTIONS, RCS_BUTTON_TYPES, HOST_ICS} from '../../v2Containers/Rcs/constants';
@@ -58,7 +56,6 @@ export const CapActionButton = (props) => {
     minSavedSuggestions = 0,
     hideDeleteSuggestionIndexes = [],
   } = props;
-  const { formatMessage } = intl;
   const isHostIcs = host === HOST_ICS;
   const [urlError, setUrlError] = useState(false);
   const [buttonError, setButtonError] = useState(false);
@@ -125,8 +122,7 @@ export const CapActionButton = (props) => {
       return formatMessage(messages.ctaWebsiteUrlErrorMessage);
     }
     if (urlSubtype === RCS_CTA_URL_TYPE.DYNAMIC) {
-      const baseUrl = trimmedUrl.replace(invalidVarRegex, '');
-      return isUrl(baseUrl) ? false : formatMessage(messages.ctaWebsiteUrlErrorMessage);
+      return false;
     }
     if (!isUrl(trimmedUrl)) {
       return formatMessage(messages.ctaWebsiteUrlErrorMessage);
@@ -138,12 +134,9 @@ export const CapActionButton = (props) => {
   };
 
   const onUrlChange = ({ target }) => {
-    const { id } = target;
+    const { value, id } = target;
     const row = suggestions[id] || {};
     const subtype = row.urlType || RCS_CTA_URL_TYPE.STATIC;
-    const value = subtype === RCS_CTA_URL_TYPE.DYNAMIC
-      ? target.value.replace(invalidVarRegex, '')
-      : target.value;
     setUrlError(validateCtaUrlValue(value, subtype));
     updateHandler(HANDLERS.URL, value, id);
   };
@@ -156,14 +149,6 @@ export const CapActionButton = (props) => {
     updateButtonChange(cloned, index);
   };
 
-  const onTagSelect = (data, index, url) => {
-    updateHandler(HANDLERS.URL, (url || '').replace(DYNAMIC_URL_SUFFIX, `{{${data}}}`), index);
-  };
-
-  const revertTagSelect = (index, url) => {
-    updateHandler(HANDLERS.URL, (url || '').replace(invalidVarRegex, DYNAMIC_URL_SUFFIX), index);
-  };
-
   const onPhoneNoChange = (value, index) => {
     updateHandler(HANDLERS.PHONE_NUMBER, value, index);
   };
@@ -176,25 +161,12 @@ export const CapActionButton = (props) => {
       return true;
     } if (type === RCS_BUTTON_TYPES.CTA) {
       const subtype = urlType || RCS_CTA_URL_TYPE.STATIC;
-      if (validateCtaUrlValue(url, subtype)) {
-        return true;
-      }
-      // A dynamic URL still holding the unresolved {{1}} placeholder has no real
-      // personalization tag assigned yet — block save until one is picked via "Add URL label".
-      return subtype === RCS_CTA_URL_TYPE.DYNAMIC && (url || '').includes(DYNAMIC_URL_SUFFIX);
+      return !!validateCtaUrlValue(url, subtype);
     }
     return false;
   };
 
   const saveCta = (index) => {
-    const cta = suggestions[index];
-    if (
-      cta?.type === RCS_BUTTON_TYPES.CTA
-      && cta?.urlType === RCS_CTA_URL_TYPE.DYNAMIC
-      && !(cta?.url || '').includes(DYNAMIC_URL_SUFFIX)
-    ) {
-      cta.url = `${cta.url || ''}${DYNAMIC_URL_SUFFIX}`;
-    }
     updateHandler(HANDLERS.IS_SAVED, true, index);
   };
 
@@ -208,6 +180,8 @@ export const CapActionButton = (props) => {
     updateButtonChange(newSuggestion, suggestions?.length);
   };
 
+  const { formatMessage } = intl;
+
   const hideDeleteForSuggestionIndex = (idx) =>
     Array.isArray(hideDeleteSuggestionIndexes) && hideDeleteSuggestionIndexes.includes(idx);
 
@@ -341,32 +315,13 @@ export const CapActionButton = (props) => {
                   </CapColumn>
                   <CapColumn span={18} className="rcs-cta-url-value-col">
                     <CapHeading type="h4" className="cta-label">
-                      {formatMessage(messages.ctaWebsiteUrl)}
-                      {urlSubtype === RCS_CTA_URL_TYPE.DYNAMIC && (
-                        <CapTooltipWithInfo
-                          infoIconProps={{
-                            style: { marginLeft: CAP_SPACE_04 },
-                          }}
-                          autoAdjustOverflow
-                          placement="right"
-                          title={formatMessage(messages.ctaDynamicUrlTooltip, { one: DYNAMIC_URL_SUFFIX })}
-                        />
-                      )}
+                      {formatMessage(messages.ctaUrlField)}
                     </CapHeading>
                     <CapInput
                       id={index}
-                      addonAfter={
-                        urlSubtype === RCS_CTA_URL_TYPE.DYNAMIC
-                        && !(url || '').includes(DYNAMIC_URL_SUFFIX)
-                        && DYNAMIC_URL_SUFFIX
-                      }
                       className="rcs-cta-url"
                       onChange={onUrlChange}
-                      placeholder={
-                        urlSubtype === RCS_CTA_URL_TYPE.DYNAMIC
-                          ? formatMessage(messages.ctaDynamicPlaceholder)
-                          : formatMessage(messages.ctaEnterUrlPlaceholder)
-                      }
+                      placeholder={formatMessage(messages.ctaEnterUrlPlaceholder)}
                       value={url || ''}
                       size="large"
                       maxLength={URL_MAX_LENGTH}
@@ -448,7 +403,7 @@ export const CapActionButton = (props) => {
               span={1}
               className={`${ctaIsPhone ? 'whatsapp-saved-cta-phone-icon' : ''}`}
             >
-              <CapIcon size="s" type={ctaIsPhone ? 'call' : (ctaIsReply ? 'small-link' : 'open-in-new')} />
+              <CapIcon size="s" type={ctaIsPhone ? 'call' : (ctaIsReply ? 'small-link' : 'launch')} />
             </CapColumn>
             <CapColumn span={6}>
               <CapLabel
@@ -475,28 +430,6 @@ export const CapActionButton = (props) => {
                     </CapTooltip>
                   </>
                 )}
-                {isEditFlow && urlSubtype === RCS_CTA_URL_TYPE.DYNAMIC && (url || '').includes(DYNAMIC_URL_SUFFIX) && (
-                  <TagList
-                    className="rcs-cta-taglist"
-                    label={formatMessage(messages.ctaTagListLabel)}
-                    onTagSelect={(data) => onTagSelect(data, index, url)}
-                    location={location}
-                    tags={tags}
-                    injectedTags={injectedTags}
-                    selectedOfferDetails={selectedOfferDetails}
-                    onContextChange={onContextChange}
-                  />
-                )}
-                {isEditFlow && urlSubtype === RCS_CTA_URL_TYPE.DYNAMIC && !(url || '').includes(DYNAMIC_URL_SUFFIX) && (
-                  <CapTooltip title={formatMessage(messages.ctaTagListRevert)} placement="top">
-                    <CapIcon
-                      size="s"
-                      type="return"
-                      className="rcs-cta-tag-revert"
-                      onClick={() => revertTagSelect(index, url)}
-                    />
-                  </CapTooltip>
-                )}
                 {(isFullMode && !isEditFlow) && (
                   <div className="rcs-saved-cta-action-icons">
                     <CapIcon

package/v2Components/CapActionButton/index.scss

@@ -84,19 +84,6 @@
     .rcs-saved-cta-delete-icon {
         cursor: pointer;
     }
-
-    // Dynamic-URL tag controls: keep them from stretching the flex row's
-    // height/width — same treatment as the edit/delete icons above.
-    .rcs-cta-tag-revert {
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-        cursor: pointer;
-    }
-
-    .rcs-cta-taglist {
-        flex-shrink: 0;
-    }
 }
 
 // Button text / URL: count via CapInput `suffix` (antd affix, right-aligned inside field).

package/v2Components/CapActionButton/messages.js

@@ -199,17 +199,4 @@ export default defineMessages({
     id: `${prefix}.addLabels`,
     defaultMessage: 'Add Labels',
   },
-  ctaDynamicUrlTooltip: {
-    id: `${prefix}.ctaDynamicUrlTooltip`,
-    defaultMessage:
-      'Only one variable can be added to a URL. No need to add {one} to the end of the URL',
-  },
-  ctaTagListLabel: {
-    id: `${prefix}.ctaTagListLabel`,
-    defaultMessage: 'Add URL label',
-  },
-  ctaTagListRevert: {
-    id: `${prefix}.ctaTagListRevert`,
-    defaultMessage: 'Reset website URL label to default value',
-  },
 });

package/v2Components/CapActionButton/tests/index.test.js

@@ -4,9 +4,7 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { waitFor } from '@testing-library/react';
 import { CapActionButton } from '../index';
-import {
-  BTN_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH, URL_MAX_LENGTH, RCS_CTA_URL_TYPE, DYNAMIC_URL_SUFFIX,
-} from '../constants';
+import { BTN_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH, URL_MAX_LENGTH } from '../constants';
 import { RCS_BUTTON_TYPES, HOST_ICS } from '../../../v2Containers/Rcs/constants';
 
 const updateHandler = jest.fn();
@@ -29,7 +27,6 @@ const initializeComponent = (
     text: d.displayText ?? d.text ?? '',
     phoneNumber: d.phoneNumber ?? '',
     url: d.url ?? '',
-    urlType: d.urlType,
     postback: d.postback ?? '',
     isSaved: d.isSaved ?? false,
   }));
@@ -554,34 +551,6 @@ describe('CapActionButton', () => {
     expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
   });
 
-  it('should disable save for a dynamic-URL CTA still holding the unresolved {{1}} placeholder', () => {
-    const initial = {
-      index: 0,
-      type: RCS_BUTTON_TYPES.CTA,
-      text: 'Visit here',
-      url: `https://example.com${DYNAMIC_URL_SUFFIX}`,
-      urlType: RCS_CTA_URL_TYPE.DYNAMIC,
-      postback: 'Visit here',
-      isSaved: false,
-    };
-    initializeComponent([initial]);
-    expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
-  });
-
-  it('should enable save for a dynamic-URL CTA once the placeholder has been replaced with a real tag', () => {
-    const initial = {
-      index: 0,
-      type: RCS_BUTTON_TYPES.CTA,
-      text: 'Visit here',
-      url: 'https://example.com{{first_name}}',
-      urlType: RCS_CTA_URL_TYPE.DYNAMIC,
-      postback: 'Visit here',
-      isSaved: false,
-    };
-    initializeComponent([initial]);
-    expect(screen.getByRole('button', { name: /save/i })).not.toBeDisabled();
-  });
-
   it('should render edit and delete icons in edit mode (renderedContent)', () => {
     const button = {
       index: 1,

package/v2Containers/Rcs/carouselUtils.js

@@ -19,6 +19,30 @@ 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) =>
@@ -142,22 +166,23 @@ export const getCarouselDescriptionCharacterCount = (carouselData, cardIndex) =>
   return descriptionText ? descriptionText.length : 0;
 };
 
-/** Preview (TestAndPreviewSlidebox / listing preview): resolve each card's title/desc through `resolveTemplateWithMap`. */
-export const buildCarouselCardsForPreview = (cards = [], { isFullMode, rcsVarRegex, resolveTemplateWithMap }) => {
-  // Track cumulative variable slot index across all cards so resolveTemplateWithMap
-  // uses the correct globalSlot → slotKey for each token (e.g. card 1's {{3}} needs
-  // slotOffset=2 so slotKey becomes "3", not "1").
-  let slotOffset = 0;
-  return (cards || []).map((card = {}) => {
+/**
+ * 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
-      ? resolveTemplateWithMap(rawTitle, slotOffset)
+      ? resolveCarouselTemplateWithMap(rawTitle, cardIndex, false)
       : rawTitle;
     const resolvedDesc = !isFullMode
-      ? resolveTemplateWithMap(rawDesc, slotOffset + titleVarCount)
+      ? resolveCarouselTemplateWithMap(rawDesc, cardIndex, true)
       : rawDesc;
     if (!isFullMode) {
       slotOffset += titleVarCount + descVarCount;
@@ -182,43 +207,50 @@ export const buildCarouselCardContentForPayload = (carouselData, {
   cardVarMapped,
   selectedCarouselHeight,
   rcsVarRegex,
-}) => (carouselData || []).map((card = {}) => {
-  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 cardVarMappedForCard = {};
-  if (isSlotMappingMode && cardVarTokens.length > 0) {
-    cardVarTokens.forEach((token) => {
+}) => {
+  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);
-      if (!varName) return;
-      cardVarMappedForCard[varName] = sanitizeCardVarMappedValue(cardVarMapped?.[varName] ?? '');
+      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 }),
-  };
-});
+    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 }),
+    };
+  });
+};

package/v2Containers/Rcs/components/CarouselCard.js

@@ -15,6 +15,7 @@ import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import TagList from '../../TagList';
 import globalMessages from '../../Cap/messages';
 import messages from '../messages';
+import { RCS_TAG_AREA_FIELD_TITLE, RCS_TAG_AREA_FIELD_DESC } from '../constants';
 import CarouselCardMedia from './CarouselCardMedia';
 import CarouselCardButtons from './CarouselCardButtons';
 import CarouselCharacterCount from './CarouselCharacterCount';
@@ -50,7 +51,8 @@ const CarouselCard = ({
   onDescriptionChange,
   onTitleAddVar,
   onDescriptionAddVar,
-  onTagSelect,
+  onTitleTagSelect,
+  onDescTagSelect,
   onContextChange,
   renderEditMessage,
   onFieldChange,
@@ -137,7 +139,7 @@ const CarouselCard = ({
           (isEditFlow || !isFullMode) ? (
             <TagList
               label={formatMessage(globalMessages.addLabels)}
-              onTagSelect={onTagSelect}
+              onTagSelect={onTitleTagSelect}
               location={location}
               tags={tagsForPicker}
               onContextChange={onContextChange}
@@ -159,7 +161,7 @@ const CarouselCard = ({
       />
       <CapRow className="rcs_text_area_wrapper">
         {(isEditFlow || !isFullMode) ? (
-          renderEditMessage(card.title || '')
+          renderEditMessage(card.title || '', cardIndex, RCS_TAG_AREA_FIELD_TITLE)
         ) : (
           <CapInput
             value={card.title || ''}
@@ -189,7 +191,7 @@ const CarouselCard = ({
           (isEditFlow || !isFullMode) ? (
             <TagList
               label={formatMessage(globalMessages.addLabels)}
-              onTagSelect={onTagSelect}
+              onTagSelect={onDescTagSelect}
               location={location}
               tags={tagsForPicker}
               onContextChange={onContextChange}
@@ -211,7 +213,7 @@ const CarouselCard = ({
       />
       <CapRow className="rcs_text_area_wrapper">
         {(isEditFlow || !isFullMode) ? (
-          renderEditMessage(card.description || '')
+          renderEditMessage(card.description || '', cardIndex, RCS_TAG_AREA_FIELD_DESC)
         ) : (
           <TextArea
             autosize={{ minRows: 3, maxRows: 5 }}
@@ -249,11 +251,6 @@ const CarouselCard = ({
       hostName={hostName}
       formatMessage={formatMessage}
       onSuggestionsChange={onSuggestionsChange}
-      location={location}
-      tags={tagsForPicker}
-      injectedTags={injectedTags}
-      selectedOfferDetails={selectedOfferDetails}
-      onContextChange={onContextChange}
     />
   </CapCard>
 );
@@ -286,7 +283,8 @@ CarouselCard.propTypes = {
   onDescriptionChange: PropTypes.func.isRequired,
   onTitleAddVar: PropTypes.func.isRequired,
   onDescriptionAddVar: PropTypes.func.isRequired,
-  onTagSelect: PropTypes.func.isRequired,
+  onTitleTagSelect: PropTypes.func.isRequired,
+  onDescTagSelect: PropTypes.func.isRequired,
   onContextChange: PropTypes.func,
   renderEditMessage: PropTypes.func.isRequired,
   onFieldChange: PropTypes.func.isRequired,

package/v2Containers/Rcs/components/CarouselCardButtons.js

@@ -18,11 +18,6 @@ const CarouselCardButtons = ({
   hostName,
   formatMessage,
   onSuggestionsChange,
-  location,
-  tags,
-  injectedTags,
-  selectedOfferDetails,
-  onContextChange,
 }) => {
   const suggestionsForCard = suggestions || [];
   return (
@@ -73,11 +68,6 @@ const CarouselCardButtons = ({
         host={hostName}
         minSavedSuggestions={cardIndex === 0 ? 1 : 0}
         hideDeleteSuggestionIndexes={cardIndex === 0 ? [0] : []}
-        location={location}
-        tags={tags}
-        injectedTags={injectedTags}
-        selectedOfferDetails={selectedOfferDetails}
-        onContextChange={onContextChange}
       />
     </>
   );
@@ -91,11 +81,6 @@ CarouselCardButtons.propTypes = {
   hostName: PropTypes.string,
   formatMessage: PropTypes.func.isRequired,
   onSuggestionsChange: PropTypes.func.isRequired,
-  location: PropTypes.object,
-  tags: PropTypes.array,
-  injectedTags: PropTypes.object,
-  selectedOfferDetails: PropTypes.array,
-  onContextChange: PropTypes.func,
 };
 
 CarouselCardButtons.defaultProps = {
@@ -103,11 +88,6 @@ CarouselCardButtons.defaultProps = {
   isEditFlow: false,
   isFullMode: false,
   hostName: '',
-  location: {},
-  tags: [],
-  injectedTags: {},
-  selectedOfferDetails: [],
-  onContextChange: () => {},
 };
 
 export default React.memo(CarouselCardButtons);