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

package/v2Containers/Email/index.js

@@ -237,39 +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');
-      // 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 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');
-      if ((inlineIsDragDrop === true || inlineIsDragDrop === 1) && isBEEAppEnable) {
-        this.setState({ isDragDrop: true });
-        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 : ''),
@@ -586,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) {
@@ -1183,14 +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;
-    // Prefer the inline edited subject (embedded journey content: base.subject /
-    // emailSubject) over the fetched template's subject, so subject edits persist
-    // on re-open. setEditData runs once (guarded by editDataSet), so this is a
-    // one-time load-time override and won't fight typing in the subject field.
-    const inlineSubject = _.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,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);