@capillarytech/creatives-library 9.0.29 → 9.0.31

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);

package/v2Containers/Rcs/constants.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import cloneDeep from 'lodash/cloneDeep';
 import messages from "./messages";
 
 export const RCS = 'RCS';
@@ -20,11 +21,6 @@ export const TEMPLATE_HEADER_MAX_LENGTH = 60;
 export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;
 export const UNSUBSCRIBE_TEXT_LENGTH = 36;
 
-export const RCS_DLT_MODE = {
-  TEMPLATES: 'templates',
-  EDIT: 'editTemplate',
-};
-
 export const RCS_STATUSES = {
   approved: 'approved',
   rejected: 'rejected',
@@ -34,18 +30,16 @@ export const RCS_STATUSES = {
   awaitingApproval: 'awaitingApproval',
 };
 
+export const HOST_ICS="rcsicsbulk";
+export const HOST_INFOBIP="rcsinfobipbulk";
+
 export const contentType = {
   text_message: 'text_message',
   rich_card: 'rich_card',
-  carousel: 'carousel',
+  carousel: 'CAROUSEL',
 };
 
 export const STATUS_OPTIONS = [
-  // {
-  //   key: 'created',
-  //   value: RCS_STATUSES.awaitingApproval,
-  //   label: <FormattedMessage {...messages.created} />,
-  // },
   {
     key: 'approved',
     value: RCS_STATUSES.approved,
@@ -72,12 +66,40 @@ export const RCS_MEDIA_TYPES = {
   NONE: 'NONE',
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
+  TEXT: 'TEXT',
 };
 
-export const rcsVarRegex = /\{\{\w+\}\}/g;
-export const rcsVarTestRegex = /\{\{\w+\}\}/;
+/** Match `{{…}}` placeholders including Liquid-style names (e.g. `tag.FORMAT_1`). Must align with split + `isAnyTemplateVarToken` / SMS fallback. */
+export const rcsVarRegex = /\{\{[^}]+\}\}/g;
+/** True when the whole string is a single RCS/mustache token (used when testing segment tokens). */
+export const rcsVarTestRegex = /^\{\{[^}]+\}\}$/;
+
+/** Matches all `{{N}}` numeric-index variable tokens in a template string (global). */
+export const RCS_NUMERIC_VAR_TOKEN_REGEX = /\{\{(\d+)\}\}/g;
+/** `cardVarMapped` slot keys that are numeric only (legacy ordering). */
+export const RCS_NUMERIC_VAR_NAME_REGEX = /^\d+$/;
+/** Semantic Liquid-style keys on RCS `cardVarMapped` (same class as `{{…}}` inner names in the editor). */
+export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^[\w.]+$/;
+/** Escape all special RegExp characters in an arbitrary string before using it in `new RegExp(...)`. */
+export const REGEX_SPECIAL_CHARS_ESCAPE_PATTERN = /[-/\\^$*+?.()|[\]{}]/g;
+/** Entire string is wrapped in `{{…}}` mustache delimiters (allows any content including `}`). */
+export const RCS_MUSTACHE_WRAPPED_REGEX = /^\{\{[\s\S]*\}\}$/;
+/** Strip leading `{{` and trailing `}}` from a token. */
+export const RCS_STRIP_MUSTACHE_DELIMITERS_REGEX = /^\{\{|\}\}$/g;
+
+export const JS_TYPES = {
+  STRING: 'string',
+  NUMBER: 'number',
+  OBJECT: 'object',
+};
+
+/** Tag-popover target: title vs description field (matches `onTagSelect` `field` argument). */
+export const RCS_TAG_AREA_FIELD_TITLE = 'title';
+export const RCS_TAG_AREA_FIELD_DESC = 'desc';
+
 export const TEMPLATE_DESC_MAX_LENGTH = 2500;
-export const FALLBACK_MESSAGE_MAX_LENGTH = 160;
+/** Resolved SMS fallback body cap. Must allow multi-segment DLT (>160); aligns with TRAI / `TEMPLATE_MESSAGE_MAX_LENGTH`. */
+export const FALLBACK_MESSAGE_MAX_LENGTH = TEMPLATE_MESSAGE_MAX_LENGTH;
 export const TEMPLATE_TITLE_MAX_LENGTH = 200;
 export const TEMPLATE_BUTTON_TEXT_MAX_LENGTH = 25;
 export const CTA = 'CTA';
@@ -92,10 +114,12 @@ export const ALLOWED_IMAGE_EXTENSIONS_REGEX = (/\.(png|jpg|jpeg|gif)$/i);
 export const RCS_IMG_WIDTH = 1440;
 export const RCS_IMG_HEIGHT = 1024;
 export const RCS_IMG_SIZE = 2000000; // 2MB
+export const RCS_CAROUSEL_IMG_SIZE = 1 * 1024 * 1024; // 1MB
 export const MAX_FILE_SIZE_MB = 10;
 export const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
 export const ALLOWED_EXTENSIONS_VIDEO_REGEX = (/\.(mp4)$/i);
 export const RCS_VIDEO_SIZE = 10 * 1024 * 1024;
+export const RCS_CAROUSEL_VIDEO_SIZE = 5 * 1024 * 1024; // 5MB
 export const RCS_THUMBNAIL_MIN_SIZE = 40 * 1024;
 export const RCS_THUMBNAIL_MAX_SIZE = 100 * 1024;
 
@@ -142,13 +166,38 @@ export const RCS_IMAGE_DIMENSIONS = {
   },
 };
 
+// Carousel image dimensions (pixel values shown in UI). Keys follow `${HEIGHT}_${WIDTH}`.
+// HEIGHT: SHORT|MEDIUM, WIDTH: SMALL|MEDIUM
+export const RCS_CAROUSEL_IMAGE_DIMENSIONS = {
+  SHORT_SMALL: {
+    width: 1160,
+    height: 720,
+    description: 'Image (1160 x 720)',
+  },
+  SHORT_MEDIUM: {
+    width: 1800,
+    height: 720,
+    description: 'Image (1800 x 720)',
+  },
+  MEDIUM_SMALL: {
+    width: 770,
+    height: 720,
+    description: 'Image (770 x 720)',
+  },
+  MEDIUM_MEDIUM: {
+    width: 1280,
+    height: 720,
+    description: 'Image (1280 x 720)',
+  },
+};
+
 export const RCS_VIDEO_THUMBNAIL_DIMENSIONS = {
   SHORT_HEIGHT: {
-    width: 770,
-    height: 257,
     type: 'SHORT_HEIGHT',
     heightType: 'SHORT',
     label: 'Vertical Short',
+    width: 1140,
+    height: 448,
     description: 'Thumbnail (770 x 257)',
     orientation: 'VERTICAL',
     maxFileSize: 100 * 1024,
@@ -189,6 +238,29 @@ export const RCS_VIDEO_THUMBNAIL_DIMENSIONS = {
   },
 };
 
+// Carousel thumbnail dimensions for video cards (pixel values shown in UI).
+// Keys follow `${HEIGHT}_${WIDTH}`.
+// Human-readable labels: formatMessage(messages.rcsCarouselVideoThumbnailLabel, { width, height })
+// or formatRcsCarouselVideoThumbnailLabel(formatMessage, entry) from ./utils.
+export const RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS = {
+  SHORT_SMALL: {
+    width: 718,
+    height: 448,
+  },
+  SHORT_MEDIUM: {
+    width: 1140,
+    height: 448,
+  },
+  MEDIUM_SMALL: {
+    width: 480,
+    height: 448,
+  },
+  MEDIUM_MEDIUM: {
+    width: 796,
+    height: 448,
+  },
+};
+
 const prefix = 'app/v2Containers/Rcs';
 export const UPLOAD_RCS_ASSET_REQUEST = `${prefix}/UPLOAD_RCS_ASSET_REQUEST`;
 export const UPLOAD_RCS_ASSET_SUCCESS = `${prefix}/UPLOAD_RCS_ASSET_SUCCESS`;
@@ -215,6 +287,7 @@ export const CLEAR_EDIT_RESPONSE_REQUEST = `${prefix}/Edit/CLEAR_EDIT_RESPONSE_R
 export const AI_CONTENT_BOT_DISABLED = "AI_CONTENT_BOT_DISABLED";
 
 export const RCS_TEXT_MESSAGE_MAX_LENGTH = 160;
+export const RCS_TEXT_MESSAGE_MAX_LENGTH_INFOBIP = 3072;
 export const RCS_RICH_CARD_MAX_LENGTH = 2000;
 export const MAX_BUTTONS = 4;
 
@@ -250,3 +323,46 @@ export const RCS_BUTTON_TYPES = {
   PHONE_NUMBER: 'PHONE_NUMBER',
   CTA: 'CTA',
 };
+
+/** Default action row for carousel card 1 (mandatory button UX): phone CTA, unsaved until user completes + Save. */
+export const RCS_CAROUSEL_FIRST_CARD_DEFAULT_SUGGESTIONS = [
+  {
+    index: 0,
+    type: RCS_BUTTON_TYPES.PHONE_NUMBER,
+    text: '',
+    phoneNumber: '',
+    url: null,
+    postback: '',
+    isSaved: false,
+  },
+];
+
+export const MAX_RCS_CAROUSEL_ALLOWED = 10;
+// Uploads for RCS are stored in redux under dynamic keys `uploadedAssetData${index}`.
+// Carousel needs per-card indices; otherwise all cards "restore" the last uploaded asset
+// and show the same media/thumbnail.
+export const RCS_CAROUSEL_ASSET_INDEX_BASE = 10; // keep away from standalone indices 0 (media) and 1 (thumbnail)
+
+export const RCS_CAROUSEL_INITIAL_CARD = {
+  title: '',
+  description: '',
+  mediaType: RCS_MEDIA_TYPES.IMAGE, // per-card
+  imageSrc: '',
+  videoAsset: {}, // CapVideoUpload object shape
+  thumbnailSrc: '',
+  suggestions: [],
+};
+
+export const RCS_CAROUSEL_INITIAL_FIRST_CARD = {
+  ...RCS_CAROUSEL_INITIAL_CARD,
+  suggestions: cloneDeep(RCS_CAROUSEL_FIRST_CARD_DEFAULT_SUGGESTIONS),
+};
+
+export const CAROUSEL_HEIGHT_OPTIONS = [
+  { value: 'SHORT', label: 'Short' },
+  { value: 'MEDIUM', label: 'Medium' },
+];
+export const CAROUSEL_WIDTH_OPTIONS = [
+  { value: 'SMALL', label: 'Small' },
+  { value: 'MEDIUM', label: 'Medium' },
+];