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

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,45 @@ 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). Carousel slots are now keyed by global position (see `computeCarouselVarSlotKeys`), a
+ * plain number, so this only needs to match bare semantic names — the optional `cN::` prefix is
+ * kept solely so `pickRcsCardVarMappedEntries` doesn't drop legacy scoped keys from older payloads.
+ */
+export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^(?:c\d+::)?[\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 +119,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 +171,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 +243,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 +292,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 +328,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' },
+];