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

package/v2Containers/Rcs/components/CarouselCard.js

@@ -0,0 +1,315 @@
+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 { RCS_TAG_AREA_FIELD_TITLE, RCS_TAG_AREA_FIELD_DESC } from '../constants';
+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,
+  onTitleTagSelect,
+  onDescTagSelect,
+  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={onTitleTagSelect}
+              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 || '', cardIndex, RCS_TAG_AREA_FIELD_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={onDescTagSelect}
+              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 || '', cardIndex, RCS_TAG_AREA_FIELD_DESC)
+        ) : (
+          <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}
+    />
+  </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,
+  onTitleTagSelect: PropTypes.func.isRequired,
+  onDescTagSelect: 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,93 @@
+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,
+}) => {
+  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] : []}
+      />
+    </>
+  );
+};
+
+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,
+};
+
+CarouselCardButtons.defaultProps = {
+  suggestions: [],
+  isEditFlow: false,
+  isFullMode: false,
+  hostName: '',
+};
+
+export default React.memo(CarouselCardButtons);

package/v2Containers/Rcs/components/CarouselCardMedia.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapVideoUpload from '../../../v2Components/CapVideoUpload';
+import CapImageUpload from '../../../v2Components/CapImageUpload';
+import {
+  RCS,
+  RCS_MEDIA_TYPES,
+  ALLOWED_EXTENSIONS_VIDEO_REGEX,
+  RCS_CAROUSEL_VIDEO_SIZE,
+  ALLOWED_IMAGE_EXTENSIONS_REGEX,
+  RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS,
+  RCS_THUMBNAIL_MAX_SIZE,
+  RCS_THUMBNAIL_MIN_SIZE,
+  RCS_CAROUSEL_IMAGE_DIMENSIONS,
+  RCS_CAROUSEL_IMG_SIZE,
+} from '../constants';
+import {
+  getCarouselImageAssetIndex,
+  getCarouselVideoAssetIndex,
+  getCarouselThumbnailAssetIndex,
+} from '../carouselUtils';
+import messages from '../messages';
+
+const CarouselCardMedia = ({
+  cardIndex,
+  card,
+  dimKey,
+  isFullMode,
+  isEditFlow,
+  rcsData,
+  uploadRcsImage,
+  uploadRcsVideo,
+  formatMessage,
+  onFieldChange,
+}) => {
+  if (card.mediaType === RCS_MEDIA_TYPES.VIDEO) {
+    return (
+      <>
+        <CapHeading type="h4" className="rcs-image-dimensions-label">Upload Video</CapHeading>
+        <CapVideoUpload
+          index={getCarouselVideoAssetIndex(cardIndex)}
+          allowedExtensionsRegex={ALLOWED_EXTENSIONS_VIDEO_REGEX}
+          videoSize={RCS_CAROUSEL_VIDEO_SIZE}
+          isFullMode={isFullMode}
+          uploadAsset={uploadRcsVideo}
+          uploadedAssetList={card.videoAsset || {}}
+          onVideoUploadUpdateAssestList={(_, val) => {
+            onFieldChange('videoAsset', val);
+          }}
+          videoData={rcsData}
+          className="cap-custom-video-upload"
+          formClassName={"rcs-video-upload"}
+          channel={RCS}
+          errorMessage={formatMessage(messages.videoErrorMessage)}
+          showVideoNameAndDuration={false}
+          showReUploadButton={!isEditFlow && isFullMode}
+          channelSpecificStyle={!isFullMode}
+        />
+
+        <CapHeading type="h4" className="rcs-image-dimensions-label">Upload Thumbnail</CapHeading>
+        <CapImageUpload
+          allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
+          imgWidth={RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS?.[dimKey]?.width}
+          imgHeight={RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS?.[dimKey]?.height}
+          imgSize={RCS_THUMBNAIL_MAX_SIZE}
+          uploadAsset={uploadRcsImage}
+          isFullMode={isFullMode}
+          imageSrc={card.thumbnailSrc}
+          updateImageSrc={(val) => onFieldChange('thumbnailSrc', val)}
+          updateOnReUpload={() => onFieldChange('thumbnailSrc', '')}
+          minImgSize={RCS_THUMBNAIL_MIN_SIZE}
+          index={getCarouselThumbnailAssetIndex(cardIndex)}
+          className="cap-custom-image-upload"
+          key={`rcs-carousel-thumb-${cardIndex}-${dimKey}`}
+          imageData={rcsData}
+          channel={RCS}
+          channelSpecificStyle={!isFullMode}
+          skipDimensionValidation={true}
+          showReUploadButton={!isEditFlow && isFullMode}
+          disabled={isEditFlow || !isFullMode}
+        />
+      </>
+    );
+  }
+
+  // Default: IMAGE
+  return (
+    <>
+      <CapHeading type="h4" className="rcs-image-dimensions-label">{formatMessage(messages.mediaImage)}</CapHeading>
+      <CapImageUpload
+        allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
+        imgWidth={RCS_CAROUSEL_IMAGE_DIMENSIONS?.[dimKey]?.width}
+        imgHeight={RCS_CAROUSEL_IMAGE_DIMENSIONS?.[dimKey]?.height}
+        imgSize={RCS_CAROUSEL_IMG_SIZE}
+        uploadAsset={uploadRcsImage}
+        isFullMode={isFullMode}
+        imageSrc={card.imageSrc}
+        updateImageSrc={(val) => onFieldChange('imageSrc', val)}
+        updateOnReUpload={() => onFieldChange('imageSrc', '')}
+        index={getCarouselImageAssetIndex(cardIndex)}
+        className="cap-custom-image-upload"
+        key={`rcs-carousel-image-${cardIndex}-${dimKey}`}
+        imageData={rcsData}
+        channel={RCS}
+        channelSpecificStyle={!isFullMode}
+        skipDimensionValidation={true}
+        showReUploadButton={!isEditFlow && isFullMode}
+        disabled={isEditFlow || !isFullMode}
+      />
+    </>
+  );
+};
+
+CarouselCardMedia.propTypes = {
+  cardIndex: PropTypes.number.isRequired,
+  card: PropTypes.object,
+  dimKey: PropTypes.string,
+  isFullMode: PropTypes.bool,
+  isEditFlow: PropTypes.bool,
+  rcsData: PropTypes.object,
+  uploadRcsImage: PropTypes.func.isRequired,
+  uploadRcsVideo: PropTypes.func.isRequired,
+  formatMessage: PropTypes.func.isRequired,
+  onFieldChange: PropTypes.func.isRequired,
+};
+
+CarouselCardMedia.defaultProps = {
+  card: {},
+  dimKey: '',
+  isFullMode: false,
+  isEditFlow: false,
+  rcsData: {},
+};
+
+export default React.memo(CarouselCardMedia);

package/v2Containers/Rcs/components/CarouselCharacterCount.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import messages from '../messages';
+
+const CarouselCharacterCount = ({
+  formatMessage,
+  currentLength,
+  maxLength,
+  className,
+}) => (
+  <CapLabel type="label1" className={className}>
+    {formatMessage(messages.templateMessageLength, {
+      currentLength,
+      maxLength,
+    })}
+  </CapLabel>
+);
+
+CarouselCharacterCount.propTypes = {
+  formatMessage: PropTypes.func.isRequired,
+  currentLength: PropTypes.number.isRequired,
+  maxLength: PropTypes.number.isRequired,
+  className: PropTypes.string,
+};
+
+CarouselCharacterCount.defaultProps = {
+  className: 'rcs-character-count',
+};
+
+export default React.memo(CarouselCharacterCount);

package/v2Containers/Rcs/components/CarouselDimensionSelection.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import { CAROUSEL_HEIGHT_OPTIONS, CAROUSEL_WIDTH_OPTIONS } from '../constants';
+
+const CarouselDimensionSelection = ({
+  isEditFlow,
+  isFullMode,
+  selectedCarouselHeight,
+  selectedCarouselWidth,
+  selectedCarousel,
+  onHeightChange,
+  onWidthChange,
+}) => (
+  <CapRow className="rcs-carousel-dimension-section">
+    <CapRow gutter={16} className="rcs-carousel-dimension-row">
+      <CapColumn span={12}>
+        <CapHeading type="h4" className="rcs-carousel-dimension-label">Card height</CapHeading>
+        {isEditFlow ? (
+          <CapHeading type="h5" className="rcs-creative-name-value">
+            {CAROUSEL_HEIGHT_OPTIONS.find((option) => option.value === selectedCarouselHeight)?.label || '-'}
+          </CapHeading>
+        ) : (
+          <CapSelect
+            id="rcs-carousel-height-select"
+            value={selectedCarouselHeight}
+            onChange={onHeightChange}
+            options={CAROUSEL_HEIGHT_OPTIONS}
+            disabled={!isFullMode}
+          />
+        )}
+      </CapColumn>
+      <CapColumn span={12}>
+        <CapHeading type="h4" className="rcs-carousel-dimension-label">Card width</CapHeading>
+        {isEditFlow ? (
+          <CapHeading type="h5" className="rcs-creative-name-value">
+            {CAROUSEL_WIDTH_OPTIONS.find((option) => option.value === selectedCarouselWidth)?.label || '-'}
+          </CapHeading>
+        ) : (
+          <CapSelect
+            id="rcs-carousel-width-select"
+            value={selectedCarouselWidth}
+            onChange={onWidthChange}
+            options={CAROUSEL_WIDTH_OPTIONS}
+            disabled={!isFullMode}
+          />
+        )}
+      </CapColumn>
+    </CapRow>
+    {!!selectedCarousel && (
+      <CapLabel type="label3" className="rcs-carousel-selected-dimension">
+        Selected: {selectedCarousel}
+      </CapLabel>
+    )}
+  </CapRow>
+);
+
+CarouselDimensionSelection.propTypes = {
+  isEditFlow: PropTypes.bool,
+  isFullMode: PropTypes.bool,
+  selectedCarouselHeight: PropTypes.string,
+  selectedCarouselWidth: PropTypes.string,
+  selectedCarousel: PropTypes.string,
+  onHeightChange: PropTypes.func.isRequired,
+  onWidthChange: PropTypes.func.isRequired,
+};
+
+CarouselDimensionSelection.defaultProps = {
+  isEditFlow: false,
+  isFullMode: false,
+  selectedCarouselHeight: '',
+  selectedCarouselWidth: '',
+  selectedCarousel: '',
+};
+
+export default React.memo(CarouselDimensionSelection);