@capillarytech/creatives-library 9.0.29 → 9.0.30

package/v2Containers/Rcs/carouselUtils.js

@@ -0,0 +1,224 @@
+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, '');
+
+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 `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 = {}) => {
+    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)
+      : rawTitle;
+    const resolvedDesc = !isFullMode
+      ? resolveTemplateWithMap(rawDesc, slotOffset + titleVarCount)
+      : 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,
+}) => (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 varName = getVarNameFromToken(token);
+      if (!varName) return;
+      cardVarMappedForCard[varName] = sanitizeCardVarMappedValue(cardVarMapped?.[varName] ?? '');
+    });
+  }
+  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

@@ -0,0 +1,317 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapCard from '@capillarytech/cap-ui-library/CapCard';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import TagList from '../../TagList';
+import globalMessages from '../../Cap/messages';
+import messages from '../messages';
+import CarouselCardMedia from './CarouselCardMedia';
+import CarouselCardButtons from './CarouselCardButtons';
+import CarouselCharacterCount from './CarouselCharacterCount';
+
+const { TextArea } = CapInput;
+
+/** One carousel card's editor: media, title, description, buttons — used as a tab pane in the carousel editor. */
+const CarouselCard = ({
+  cardIndex,
+  card,
+  carouselLength,
+  isEditFlow,
+  isFullMode,
+  mediaRadioOptions,
+  cardError,
+  location,
+  tagsForPicker,
+  injectedTags,
+  selectedOfferDetails,
+  formatMessage,
+  titleMaxLength,
+  descriptionMaxLength,
+  titleCharCount,
+  descriptionCharCount,
+  dimKey,
+  rcsData,
+  uploadRcsImage,
+  uploadRcsVideo,
+  hostName,
+  onDelete,
+  onMediaTypeChange,
+  onTitleChange,
+  onDescriptionChange,
+  onTitleAddVar,
+  onDescriptionAddVar,
+  onTagSelect,
+  onContextChange,
+  renderEditMessage,
+  onFieldChange,
+  onSuggestionsChange,
+}) => (
+  <CapCard
+    title={`Card ${cardIndex + 1}`}
+    extra={
+      !isEditFlow &&
+      (carouselLength === 1 ? (
+        <CapTooltip title={formatMessage(messages.rcsCarouselMinCardDeleteTooltip)}>
+          <span className="button-disabled-tooltip-wrapper rcs-carousel-delete-tooltip-wrap">
+            <CapButton
+              className="rcs-carousel-card-delete"
+              type="flat"
+              onClick={onDelete}
+              disabled
+              aria-label={formatMessage(messages.rcsCarouselMinCardDeleteTooltip)}
+            >
+              <CapIcon type="delete" />
+            </CapButton>
+          </span>
+        </CapTooltip>
+      ) : (
+        <CapButton
+          className="rcs-carousel-card-delete"
+          type="flat"
+          onClick={onDelete}
+          aria-label={formatMessage(globalMessages.delete)}
+        >
+          <CapIcon type="delete" />
+        </CapButton>
+      ))
+    }
+    className="rcs-carousel-card"
+  >
+    {/* Media selection should be at top of card */}
+    {isEditFlow ? (
+      <div className="rcs-creative-name-readonly">
+        <CapHeading type="h4">{formatMessage(messages.mediaTypeLabel)}</CapHeading>
+        <CapHeading type="h5" className="rcs-creative-name-value">
+          {mediaRadioOptions.find((option) => option.value === card.mediaType)?.label || '-'}
+        </CapHeading>
+      </div>
+    ) : (
+      <CapRow className="rcs-carousel-media-selection">
+        <CapColumn className="rcs-carousel-media-selection-heading">
+          <CapHeading type="h4">{formatMessage(messages.mediaTypeLabel)}</CapHeading>
+        </CapColumn>
+        <CapColumn>
+          <CapRadioGroup
+            id={`rcs-carousel-media-radio-${cardIndex}`}
+            options={mediaRadioOptions}
+            value={card.mediaType}
+            onChange={({ target: { value } }) => onMediaTypeChange(value)}
+            disabled={!isFullMode}
+            className="rcs-radio"
+          />
+        </CapColumn>
+      </CapRow>
+    )}
+
+    <CapRow className={`rcs-carousel-media-upload ${isEditFlow ? 'rcs-carousel-media-upload--readonly-above' : ''}`}>
+      <CarouselCardMedia
+        cardIndex={cardIndex}
+        card={card}
+        dimKey={dimKey}
+        isFullMode={isFullMode}
+        isEditFlow={isEditFlow}
+        rcsData={rcsData}
+        uploadRcsImage={uploadRcsImage}
+        uploadRcsVideo={uploadRcsVideo}
+        formatMessage={formatMessage}
+        onFieldChange={onFieldChange}
+      />
+    </CapRow>
+
+    {/* Title after media */}
+    <CapRow className="rcs-carousel-card-row">
+      <CapHeader
+        className="rcs-template-title-label"
+        title={<CapHeading type="h4">Card title</CapHeading>}
+        suffix={
+          (isEditFlow || !isFullMode) ? (
+            <TagList
+              label={formatMessage(globalMessages.addLabels)}
+              onTagSelect={onTagSelect}
+              location={location}
+              tags={tagsForPicker}
+              onContextChange={onContextChange}
+              injectedTags={injectedTags || {}}
+              selectedOfferDetails={selectedOfferDetails}
+            />
+          ) : (
+            <CapButton
+              data-testid={`rcs-carousel-title-add-var-${cardIndex}`}
+              type="flat"
+              isAddBtn
+              onClick={onTitleAddVar}
+              disabled={!!cardError?.title}
+            >
+              {formatMessage(messages.addVar)}
+            </CapButton>
+          )
+        }
+      />
+      <CapRow className="rcs_text_area_wrapper">
+        {(isEditFlow || !isFullMode) ? (
+          renderEditMessage(card.title || '')
+        ) : (
+          <CapInput
+            value={card.title || ''}
+            placeholder={formatMessage(messages.templateTitlePlaceholder)}
+            onChange={onTitleChange}
+            disabled={isEditFlow || !isFullMode}
+            errorMessage={cardError?.title}
+          />
+        )}
+      </CapRow>
+    </CapRow>
+    {!isEditFlow && (
+      <CapRow className="rcs-carousel-character-count-row">
+        <CarouselCharacterCount
+          formatMessage={formatMessage}
+          currentLength={titleCharCount}
+          maxLength={titleMaxLength}
+        />
+      </CapRow>
+    )}
+
+    {/* Description after title */}
+    <CapRow className="rcs-carousel-card-row">
+      <CapHeader
+        title={<CapHeading type="h4">Card body text</CapHeading>}
+        suffix={
+          (isEditFlow || !isFullMode) ? (
+            <TagList
+              label={formatMessage(globalMessages.addLabels)}
+              onTagSelect={onTagSelect}
+              location={location}
+              tags={tagsForPicker}
+              onContextChange={onContextChange}
+              injectedTags={injectedTags || {}}
+              selectedOfferDetails={selectedOfferDetails}
+            />
+          ) : (
+            <CapButton
+              data-testid={`rcs-carousel-desc-add-var-${cardIndex}`}
+              type="flat"
+              isAddBtn
+              onClick={onDescriptionAddVar}
+              disabled={!!cardError?.description}
+            >
+              {formatMessage(messages.addVar)}
+            </CapButton>
+          )
+        }
+      />
+      <CapRow className="rcs_text_area_wrapper">
+        {(isEditFlow || !isFullMode) ? (
+          renderEditMessage(card.description || '')
+        ) : (
+          <TextArea
+            autosize={{ minRows: 3, maxRows: 5 }}
+            value={card.description || ''}
+            placeholder={formatMessage(messages.templateDescPlaceholder)}
+            onChange={onDescriptionChange}
+            disabled={isEditFlow || !isFullMode}
+            errorMessage={
+              cardError?.description && (
+                <CapError className="rcs-template-message-error">
+                  {cardError.description}
+                </CapError>
+              )
+            }
+          />
+        )}
+      </CapRow>
+    </CapRow>
+    {!isEditFlow && (
+      <CapRow className="rcs-carousel-character-count-row">
+        <CarouselCharacterCount
+          formatMessage={formatMessage}
+          currentLength={descriptionCharCount}
+          maxLength={descriptionMaxLength}
+        />
+      </CapRow>
+    )}
+
+    <CapDivider className="rcs-carousel-card-divider" />
+    <CarouselCardButtons
+      cardIndex={cardIndex}
+      suggestions={card.suggestions || []}
+      isEditFlow={isEditFlow}
+      isFullMode={isFullMode}
+      hostName={hostName}
+      formatMessage={formatMessage}
+      onSuggestionsChange={onSuggestionsChange}
+      location={location}
+      tags={tagsForPicker}
+      injectedTags={injectedTags}
+      selectedOfferDetails={selectedOfferDetails}
+      onContextChange={onContextChange}
+    />
+  </CapCard>
+);
+
+CarouselCard.propTypes = {
+  cardIndex: PropTypes.number.isRequired,
+  card: PropTypes.object,
+  carouselLength: PropTypes.number,
+  isEditFlow: PropTypes.bool,
+  isFullMode: PropTypes.bool,
+  mediaRadioOptions: PropTypes.array,
+  cardError: PropTypes.object,
+  location: PropTypes.object,
+  tagsForPicker: PropTypes.array,
+  injectedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
+  formatMessage: PropTypes.func.isRequired,
+  titleMaxLength: PropTypes.number,
+  descriptionMaxLength: PropTypes.number,
+  titleCharCount: PropTypes.number,
+  descriptionCharCount: PropTypes.number,
+  dimKey: PropTypes.string,
+  rcsData: PropTypes.object,
+  uploadRcsImage: PropTypes.func.isRequired,
+  uploadRcsVideo: PropTypes.func.isRequired,
+  hostName: PropTypes.string,
+  onDelete: PropTypes.func.isRequired,
+  onMediaTypeChange: PropTypes.func.isRequired,
+  onTitleChange: PropTypes.func.isRequired,
+  onDescriptionChange: PropTypes.func.isRequired,
+  onTitleAddVar: PropTypes.func.isRequired,
+  onDescriptionAddVar: PropTypes.func.isRequired,
+  onTagSelect: PropTypes.func.isRequired,
+  onContextChange: PropTypes.func,
+  renderEditMessage: PropTypes.func.isRequired,
+  onFieldChange: PropTypes.func.isRequired,
+  onSuggestionsChange: PropTypes.func.isRequired,
+};
+
+CarouselCard.defaultProps = {
+  card: {},
+  carouselLength: 1,
+  isEditFlow: false,
+  isFullMode: false,
+  mediaRadioOptions: [],
+  cardError: {},
+  location: {},
+  tagsForPicker: [],
+  injectedTags: {},
+  selectedOfferDetails: [],
+  titleMaxLength: 0,
+  descriptionMaxLength: 0,
+  titleCharCount: 0,
+  descriptionCharCount: 0,
+  dimKey: '',
+  rcsData: {},
+  hostName: '',
+  onContextChange: () => {},
+};
+
+export default React.memo(CarouselCard);

package/v2Containers/Rcs/components/CarouselCardButtons.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cloneDeep from 'lodash/cloneDeep';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapActionButton from '../../../v2Components/CapActionButton';
+import { MAX_BUTTONS, RCS_BUTTON_TYPES } from '../constants';
+import messages from '../messages';
+
+/** Reuse rich-card buttons UI per carousel card. */
+const CarouselCardButtons = ({
+  cardIndex,
+  suggestions,
+  isEditFlow,
+  isFullMode,
+  hostName,
+  formatMessage,
+  onSuggestionsChange,
+  location,
+  tags,
+  injectedTags,
+  selectedOfferDetails,
+  onContextChange,
+}) => {
+  const suggestionsForCard = suggestions || [];
+  return (
+    <>
+      <CapHeader
+        className="rcs-button-cta"
+        title={(
+          <CapRow type="flex">
+            <CapHeading type="h4">
+              {formatMessage(messages.btnLabel)}
+            </CapHeading>
+          </CapRow>
+        )}
+        description={!isEditFlow && (
+          <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
+        )}
+      />
+      <CapActionButton
+        buttonType={RCS_BUTTON_TYPES.NONE}
+        updateButtonChange={(data, btnIndex) => {
+          // Match existing behavior: allow CapActionButton to manage save gating.
+          const updated = cloneDeep(suggestionsForCard);
+          if (btnIndex === MAX_BUTTONS) {
+            onSuggestionsChange(data);
+            return;
+          }
+          updated[btnIndex] = data;
+          onSuggestionsChange(updated);
+        }}
+        deleteButtonHandler={(btnIndex) => {
+          if (cardIndex === 0 && btnIndex === 0) {
+            return;
+          }
+          const savedCount = (suggestionsForCard || []).filter((suggestion) => suggestion && suggestion.isSaved).length;
+          const target = (suggestionsForCard || []).find((suggestion) => suggestion && suggestion.index === btnIndex);
+          if (cardIndex === 0 && target?.isSaved && savedCount <= 1) {
+            return;
+          }
+          const updated = cloneDeep(suggestionsForCard)
+            .filter((i) => i.index !== btnIndex)
+            .map((i, idx) => ({ ...i, index: idx }));
+          onSuggestionsChange(updated);
+        }}
+        suggestions={suggestionsForCard}
+        isEditFlow={isEditFlow}
+        isFullMode={isFullMode}
+        maxButtons={MAX_BUTTONS}
+        host={hostName}
+        minSavedSuggestions={cardIndex === 0 ? 1 : 0}
+        hideDeleteSuggestionIndexes={cardIndex === 0 ? [0] : []}
+        location={location}
+        tags={tags}
+        injectedTags={injectedTags}
+        selectedOfferDetails={selectedOfferDetails}
+        onContextChange={onContextChange}
+      />
+    </>
+  );
+};
+
+CarouselCardButtons.propTypes = {
+  cardIndex: PropTypes.number.isRequired,
+  suggestions: PropTypes.array,
+  isEditFlow: PropTypes.bool,
+  isFullMode: PropTypes.bool,
+  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 = {
+  suggestions: [],
+  isEditFlow: false,
+  isFullMode: false,
+  hostName: '',
+  location: {},
+  tags: [],
+  injectedTags: {},
+  selectedOfferDetails: [],
+  onContextChange: () => {},
+};
+
+export default React.memo(CarouselCardButtons);