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

package/v2Components/VarSegmentMessageEditor/index.js

@@ -0,0 +1,125 @@
+/**
+ * Shared message editor that renders template text with {{var}} and/or DLT `{#var#}` segments as
+ * variable inputs and static text as headings.
+ * Reused by RCS (title/description), SmsTrai Edit (SMS fallback), and WhatsApp (edit message/header).
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import {
+  splitTemplateVarString,
+  DEFAULT_MUSTACHE_VAR_REGEX,
+  isAnyTemplateVarToken,
+} from '../../utils/templateVarUtils';
+
+import './index.scss';
+import { VAR_SEGMENT_PLACEHOLDER_PREFIX } from './constants';
+
+const { TextArea } = CapInput;
+
+export function VarSegmentMessageEditor({
+  templateString = '',
+  valueMap = {},
+  onChange,
+  onFocus,
+  placeholderPrefix = VAR_SEGMENT_PLACEHOLDER_PREFIX,
+  getPlaceholder,
+  wrapperClassName = 'rcs_text_area_wrapper',
+  rowClassName = 'rcs-edit-template-message-input',
+  headingClassName = 'rcs-edit-template-message-split',
+  varRegex,
+  readOnly = false,
+  disabled = false,
+  footerContent,
+  renderVarFooter,
+}) {
+  const segments = splitTemplateVarString(templateString, varRegex || DEFAULT_MUSTACHE_VAR_REGEX);
+  if (!segments?.length) return null;
+
+  return (
+    <div className={wrapperClassName}>
+      <CapRow className={rowClassName}>
+        {segments.map((segmentToken, segmentIndex) => {
+          const isVar =
+            typeof segmentToken === 'string' && isAnyTemplateVarToken(segmentToken);
+          if (isVar) {
+            const varSegmentFieldId = `${segmentToken}_${segmentIndex}`;
+            const slotValueFromMap = valueMap?.[varSegmentFieldId];
+            // Missing key: show empty (not the raw {{…}} token) so cleared slots and incomplete maps
+            // cannot resurrect the token; placeholder still guides the user.
+            const value =
+              slotValueFromMap !== undefined && slotValueFromMap !== null ? slotValueFromMap : '';
+            if (readOnly) {
+              return (
+                <CapHeading
+                  key={varSegmentFieldId}
+                  type="h4"
+                  className={`${headingClassName} var-segment-message-editor__read-only-value`.trim()}
+                >
+                  {value}
+                </CapHeading>
+              );
+            }
+            const fromGet = getPlaceholder && getPlaceholder(segmentToken, segmentIndex);
+            const placeholder =
+              fromGet !== undefined && fromGet !== null && fromGet !== ''
+                ? fromGet
+                : `${placeholderPrefix}${segmentToken}`;
+            return (
+              <div key={varSegmentFieldId} className="var-segment-message-editor__var-slot">
+                <TextArea
+                  id={varSegmentFieldId}
+                  placeholder={placeholder}
+                  autosize={{ minRows: 1, maxRows: 3 }}
+                  value={value}
+                  onFocus={() => onFocus && onFocus(varSegmentFieldId)}
+                  onChange={(e) =>
+                    onChange && onChange(varSegmentFieldId, e?.target?.value ?? '')}
+                  disabled={disabled}
+                />
+                {renderVarFooter
+                  ? renderVarFooter(segmentToken, segmentIndex, varSegmentFieldId)
+                  : null}
+              </div>
+            );
+          }
+          if (segmentToken) {
+            return (
+              <CapHeading
+                key={`static_${segmentIndex}_${segmentToken}`}
+                type="h4"
+                className={headingClassName}
+              >
+                {segmentToken}
+              </CapHeading>
+            );
+          }
+          return null;
+        })}
+      </CapRow>
+      {footerContent}
+    </div>
+  );
+}
+
+VarSegmentMessageEditor.propTypes = {
+  templateString: PropTypes.string,
+  valueMap: PropTypes.object,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  placeholderPrefix: PropTypes.string,
+  getPlaceholder: PropTypes.func,
+  wrapperClassName: PropTypes.string,
+  rowClassName: PropTypes.string,
+  headingClassName: PropTypes.string,
+  varRegex: PropTypes.object,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  footerContent: PropTypes.node,
+  /** Optional hint below a variable field (e.g. DLT `{#var#}` max length). */
+  renderVarFooter: PropTypes.func,
+};
+
+export default VarSegmentMessageEditor;

package/v2Components/VarSegmentMessageEditor/index.scss

@@ -0,0 +1,46 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/* Same look as RCS edit message block: background, spacing, text color */
+.rcs_text_area_wrapper {
+  .rcs-edit-template-message-input {
+    background-color: $CAP_G10;
+    padding: $CAP_SPACE_12 $CAP_SPACE_16 $CAP_SPACE_16;
+  }
+
+  .rcs-edit-template-message-split {
+    margin: 0 0 $CAP_SPACE_04 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $FONT_COLOR_04;
+    font-weight: 500;
+  }
+
+  /* Variable chips: match RCS edit (white field, light border, 4px radius) */
+  .rcs-edit-template-message-input .ant-input,
+  .rcs-edit-template-message-input textarea.ant-input {
+    margin: 0 0 0.125rem 0;
+    border-radius: 0.25rem;
+    border: 0.0625rem solid $CAP_G07;
+    background-color: $CAP_WHITE;
+    overflow: hidden;
+  }
+
+  /* Small gap between tag border and the next line (static text) */
+  .rcs-edit-template-message-input :not(:first-child) {
+    margin-top: $CAP_SPACE_08;
+  }
+
+  .rcs-edit-template-message-input > *:last-child {
+    margin-bottom: 0;
+  }
+
+  .var-segment-message-editor__var-slot {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+.var-segment-message-editor__read-only-value {
+  margin: 0;
+}

package/v2Containers/CommunicationFlow/Tests/CommunicationFlow.test.js

@@ -30,7 +30,7 @@ jest.mock('../../CreativesContainer', () => function MockCreativesContainer({
 import { Provider } from 'react-redux';
 import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
 import {
-  render as rtlRender, screen, waitFor, within,
+  render as rtlRender, screen, waitFor, within, fireEvent,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -47,6 +47,9 @@ import {
   STEPS,
 } from '../constants';
 
+// antd Select/Dropdown interactions are slow under the parallel jest suite
+jest.setTimeout(15000);
+
 let store;
 
 beforeAll(() => {

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/DeliverySettingsSection.test.js

@@ -24,6 +24,10 @@ jest.mock('../../../../../services/localStorageApi', () => ({
   loadItem: jest.fn(),
 }));
 
+// SenderDetails uses antd Select whose click→open→select chains are slow in the
+// parallel jest suite; mirror the timeout used in SenderDetails.test.js.
+jest.setTimeout(15000);
+
 const WABA_ID = 'waba-test-1';
 
 /** Typical `getDomainProperties` payloads per channel (merged when testing multi-channel). */

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/SenderDetails.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  render, screen, waitFor, within,
+  render, screen, waitFor, within, fireEvent,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -183,9 +183,9 @@ const WAIT_OPTIONS = { timeout: 10000 };
 
 async function openSelectAndChoose(root, comboIndex, optionText) {
   const combos = within(root).getAllByRole('combobox');
-  await userEvent.click(combos[comboIndex]);
+  fireEvent.mouseDown(combos[comboIndex]);
   await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-  await userEvent.click(await findVisibleSelectOption(optionText, WAIT_OPTIONS));
+  fireEvent.click(await findVisibleSelectOption(optionText, WAIT_OPTIONS));
 }
 
 describe('SenderDetails', () => {
@@ -334,7 +334,7 @@ describe('SenderDetails', () => {
     await waitFor(() => expect(within(root).getByText('beta@other.com')).toBeInTheDocument());
 
     const resetLinks = within(root).getAllByText('Reset');
-    await userEvent.click(resetLinks[0]);
+    fireEvent.click(resetLinks[0]);
 
     await waitFor(() => {
       expect(within(root).getByText('alpha@brand.com')).toBeInTheDocument();
@@ -349,12 +349,12 @@ describe('SenderDetails', () => {
     await waitFor(() => expect(within(root).getByText('+1002003001')).toBeInTheDocument());
 
     const combos = within(root).getAllByRole('combobox');
-    await userEvent.click(combos[1]);
+    fireEvent.mouseDown(combos[1]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    await userEvent.click(await findVisibleSelectOption('+1002003002', WAIT_OPTIONS));
+    fireEvent.click(await findVisibleSelectOption('+1002003002', WAIT_OPTIONS));
 
     const resetLinks = within(root).getAllByText('Reset');
-    await userEvent.click(resetLinks[1]);
+    fireEvent.click(resetLinks[1]);
 
     await waitFor(() => expect(within(root).getByText('+1002003001')).toBeInTheDocument());
   });
@@ -370,13 +370,13 @@ describe('SenderDetails', () => {
     await waitFor(() => expect(within(root).getByText('My Business')).toBeInTheDocument());
 
     const combos = within(root).getAllByRole('combobox');
-    await userEvent.click(combos[combos.length - 1]);
+    fireEvent.mouseDown(combos[combos.length - 1]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    await userEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
+    fireEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
 
     const saveBtn = within(root).getByRole('button', { name: /save changes/i });
     await waitFor(() => expect(saveBtn).not.toBeDisabled());
-    await userEvent.click(saveBtn);
+    fireEvent.click(saveBtn);
 
     expect(onSave).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -425,9 +425,9 @@ describe('SenderDetails', () => {
     await waitFor(() => expect(within(root).getByText('Gateway A')).toBeInTheDocument());
 
     const combos = within(root).getAllByRole('combobox');
-    await userEvent.click(combos[0]);
+    fireEvent.mouseDown(combos[0]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    await userEvent.click(await findVisibleSelectOption('Gateway B', WAIT_OPTIONS));
+    fireEvent.click(await findVisibleSelectOption('Gateway B', WAIT_OPTIONS));
 
     // The sender ID should now auto-update to Gateway B's sender
     await waitFor(() => expect(within(root).getByText('+222')).toBeInTheDocument());
@@ -444,9 +444,9 @@ describe('SenderDetails', () => {
 
     // Switch to Mail Beta domain
     const combos = within(root).getAllByRole('combobox');
-    await userEvent.click(combos[0]);
+    fireEvent.mouseDown(combos[0]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    await userEvent.click(await findVisibleSelectOption('Mail Beta', WAIT_OPTIONS));
+    fireEvent.click(await findVisibleSelectOption('Mail Beta', WAIT_OPTIONS));
 
     // Sender ID should auto-update to beta@other.com
     await waitFor(() => expect(within(root).getByText('beta@other.com')).toBeInTheDocument());
@@ -468,13 +468,13 @@ describe('SenderDetails', () => {
     // Change sender to enable save
     const combos = within(root).getAllByRole('combobox');
     const senderCombo = combos[combos.length - 1];
-    await userEvent.click(senderCombo);
+    fireEvent.mouseDown(senderCombo);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    await userEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
+    fireEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
 
     const saveBtn = within(root).getByRole('button', { name: /save changes/i });
     await waitFor(() => expect(saveBtn).not.toBeDisabled());
-    await userEvent.click(saveBtn);
+    fireEvent.click(saveBtn);
 
     // Should have called onSave with whatsappDomainId derived from the matched WABA domain
     expect(onSave).toHaveBeenCalledWith(
@@ -507,9 +507,9 @@ describe('SenderDetails', () => {
     // Change to an alternate sender
     const combos = within(root).getAllByRole('combobox');
     const senderCombo = combos[combos.length - 1];
-    await userEvent.click(senderCombo);
+    fireEvent.mouseDown(senderCombo);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    await userEvent.click(await findVisibleSelectOption('+viber-alt', WAIT_OPTIONS));
+    fireEvent.click(await findVisibleSelectOption('+viber-alt', WAIT_OPTIONS));
 
     // antd v6 also renders selected option in an aria-live polite region for
     // screen readers, so the text appears twice. Match only the visible select
@@ -521,7 +521,7 @@ describe('SenderDetails', () => {
     // Now click reset — for viberSenderId the else branch in handleReset is hit
     // (viberSenderId is not smsDomain/emailDomain, so getDefaultValueForField returns '')
     const resetLinks = within(root).getAllByText('Reset');
-    await userEvent.click(resetLinks[resetLinks.length - 1]);
+    fireEvent.click(resetLinks[resetLinks.length - 1]);
     // After reset, the field goes to the default value returned by getDefaultValueForField
     // For viberSenderId this is '' (no specific default handler). The visible
     // select tile no longer shows +viber-alt; the aria-live polite span may

package/v2Containers/CreativesContainer/CreativesSlideBoxWrapper.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+import { CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64 } from '@capillarytech/cap-ui-library/styled/variables';
+
+/* getSlideBoxWrapperMarginFromLiquidErrors only ever returns 0 or one of these three tokens
+ * (see embeddedSlideboxUtils.js) — mapped to static modifier classes so no inline style is needed. */
+const WRAPPER_MARGIN_CLASS_BY_VALUE = {
+  [CAP_SPACE_32]: 'creatives-slide-box-wrapper--margin-32',
+  [CAP_SPACE_56]: 'creatives-slide-box-wrapper--margin-56',
+  [CAP_SPACE_64]: 'creatives-slide-box-wrapper--margin-64',
+};
+
+const CreativesSlideBoxWrapper = ({ slideBoxWrapperMargin, shouldApplyFooterMargin, children, className, ...rest }) => (
+  <section
+    className={classnames(
+      'creatives-slide-box-wrapper',
+      WRAPPER_MARGIN_CLASS_BY_VALUE[slideBoxWrapperMargin],
+      { 'creatives-slide-box-wrapper--footer-margin': shouldApplyFooterMargin },
+      className,
+    )}
+    {...rest}
+  >
+    {children}
+  </section>
+);
+
+export default CreativesSlideBoxWrapper;

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
+import pick from 'lodash/pick';
 import cloneDeep from 'lodash/cloneDeep';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
@@ -25,6 +26,7 @@ import Viber from '../Viber';
 import Whatsapp from '../Whatsapp';
 import InApp from '../InApp';
 import Rcs from '../Rcs';
+import { isRcsTextOnlyCardMediaType, resolveRcsCardPreviewStrings } from '../Rcs/utils';
 import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 import Zalo from '../Zalo';
@@ -180,6 +182,8 @@ export function SlideBoxContent(props) {
       isTestAndPreviewMode,
       onHtmlEditorValidationStateChange,
     } = props;
+  const localTemplatesConfig = props.localTemplatesConfig || pick(props, constants.LOCAL_TEMPLATE_CONFIG_KEYS);
+  const useLocalTemplates = !!get(localTemplatesConfig, 'useLocalTemplates');
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
   const creativesLocationProps = {
@@ -399,12 +403,37 @@ export function SlideBoxContent(props) {
       }
       case constants.RCS: {
         const template = cloneDeep(templateDataObject);
-        const { description = "", media: { mediaUrl = "" } = {}, title = "", suggestions = [] } = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0]', {});
+        const cardPath = 'versions.base.content.RCS.rcsContent.cardContent[0]';
+        const card = get(template, cardPath, {}) || {};
+        const {
+          description = '',
+          media: { mediaUrl = '' } = {},
+          title = '',
+          mediaType: cardMediaType,
+          suggestions = [],
+          cardVarMapped: nestedCardVarMapped,
+        } = card;
+        const rootMirror = templateDataObject?.rcsCardVarMapped;
+        const nestedRecord =
+          nestedCardVarMapped != null && typeof nestedCardVarMapped === 'object'
+            ? nestedCardVarMapped
+            : {};
+        const rootRecord =
+          rootMirror != null && typeof rootMirror === 'object' ? rootMirror : {};
+        const mergedCardVarMapped = { ...rootRecord, ...nestedRecord };
+        const textOnlyCard = isRcsTextOnlyCardMediaType(cardMediaType);
+        const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
+          title,
+          description,
+          mergedCardVarMapped,
+          !isFullMode,
+          textOnlyCard,
+        );
         return {
           rcsPreviewContent: {
             rcsImageSrc: mediaUrl,
-            rcsTitle: title,
-            rcsDesc: description,
+            rcsTitle,
+            rcsDesc,
             ...(suggestions.length > 0 && {
               buttonText: suggestions[0]?.text,
             }),
@@ -426,11 +455,12 @@ export function SlideBoxContent(props) {
     getFormData,
     eventContextTags,
     waitEventContextTags,
+    handleClose,
   };
 
   return (
     <CreativesWrapper>
-      {!isFullMode && slidBoxContent === 'templates' && (
+      {slidBoxContent === 'templates' && (!isFullMode || useLocalTemplates) && (
       <TemplatesV2
         isFullMode={isFullMode}
         onSelectTemplate={onSelectTemplate}
@@ -463,6 +493,7 @@ export function SlideBoxContent(props) {
         waitEventContextTags={waitEventContextTags}
         loyaltyMetaData={loyaltyMetaData}
         isLoyaltyModule={isLoyaltyModule}
+        localTemplatesConfig={localTemplatesConfig}
         />
       )}
       {isPreview && (
@@ -633,6 +664,7 @@ export function SlideBoxContent(props) {
         route={{ name: 'sms' }}
         isCreateSms={isCreateSms}
         isComponent
+        templateData={templateData}
         isGetFormData={isGetFormData}
         getFormSubscriptionData={getFormData}
         getLiquidTags={getLiquidTags}
@@ -1242,6 +1274,7 @@ export function SlideBoxContent(props) {
       )}
       {isCreateRcs && (<Rcs
         {...rcsCommonProps}
+        templateData={templateData}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -49,6 +49,8 @@ function SlideBoxFooter(props) {
     isAnonymousType = false,
     templateData = {},
     hasPersonalizationTokenError: hasPersonalizationTokenErrorProp = false,
+    /** When set (e.g. SMS library create), overrides `creativesTemplatesSave` (“Done”) for the primary button */
+    primarySaveButtonMessage,
   } = props;
   // Calculate if buttons should be disabled
   // Only apply validation state checks for EMAIL channel in HTML Editor mode (not BEE/DragDrop)
@@ -165,6 +167,12 @@ function SlideBoxFooter(props) {
   // Use prop from parent (FormBuilder flow) when available; else fall back to templateData check
   const hasPersonalizationTokenError = hasPersonalizationTokenErrorProp === true || (restrictPersonalization && hasPersonalizationTokens());
 
+  function getSaveButtonLabel() {
+    if (primarySaveButtonMessage) return <FormattedMessage {...primarySaveButtonMessage} />;
+    if (isFullMode) return getFullModeSaveBtn(slidBoxContent, isCreatingTemplate);
+    return <FormattedMessage {...messages.creativesTemplatesSave} />;
+  }
+
   return (
     <div className="template-footer-width">
       {shouldShowErrorInfoNote && (
@@ -187,11 +195,7 @@ function SlideBoxFooter(props) {
                 onClick={onSave}
                 disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError}
               >
-                {isFullMode ? (
-                  getFullModeSaveBtn(slidBoxContent, isCreatingTemplate)
-                ) : (
-                  <FormattedMessage {...messages.creativesTemplatesSave} />
-                )}
+                {getSaveButtonLabel()}
               </CapButton>
               {showTestAndPreviewButton && (
                 <CapButton
@@ -264,6 +268,10 @@ SlideBoxFooter.propTypes = {
   templateData: PropTypes.object,
   formData: PropTypes.array,
   hasPersonalizationTokenError: PropTypes.bool,
+  primarySaveButtonMessage: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
 };
 
 SlideBoxFooter.defaultProps = {
@@ -291,5 +299,6 @@ SlideBoxFooter.defaultProps = {
   selectedEmailCreateMode: '',
   formData: [],
   hasPersonalizationTokenError: false,
+  primarySaveButtonMessage: undefined,
 };
 export default SlideBoxFooter;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -16,6 +16,7 @@ import { isTraiDLTEnable } from '../../utils/common';
 import { formatString } from '../../utils/Formatter';
 import {
   CAP_SPACE_12,
+  CAP_SPACE_16,
   ICON_SIZE_M,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { WHATSAPP_HELP_DOC_LINK, JOURNEY } from './constants';
@@ -28,7 +29,7 @@ const StyledLabel = styled(CapLabelInline)`
 // the inherited font-size. Pin it to the medium icon size (24px) and center it so
 // the back arrow matches the header title instead of collapsing to a tiny glyph.
 const PrefixWrapper = styled.div`
-  margin-right: 16px;
+  margin-right: ${CAP_SPACE_16};
   display: inline-flex;
   align-items: center;
   font-size: ${ICON_SIZE_M};
@@ -40,7 +41,25 @@ const renderData = (type, value, channel) => (
 );
 
 export function SlideBoxHeader(props) {
-  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep, smsRegister, handleClose, moduleType } = props;
+  const {
+    slidBoxContent,
+    templateData,
+    onShowTemplates,
+    creativesMode,
+    isFullMode,
+    showPrefix,
+    shouldShowTemplateName,
+    channel,
+    templateNameRenderProp,
+    weChatTemplateType,
+    onWeChatMaptemplateStepChange,
+    weChatMaptemplateStep,
+    templateStep,
+    smsRegister,
+    handleClose,
+    moduleType,
+    useLocalTemplates = false,
+  } = props;
   const showTemplateNameHeader = isFullMode && shouldShowTemplateName;
   const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
@@ -61,7 +80,7 @@ export function SlideBoxHeader(props) {
   } = templateData || {};
   const templateName = whatsappTemplateName || templateData?.name;
   const showRcsTemplateName = channel.toLowerCase() === RCS && slidBoxContent === 'editTemplate' && !isFullMode && templateName;
-  const showTemplateName = isWhatsappEdit || showRcsTemplateName || isZaloEdit;
+  const showTemplateName = isWhatsappEdit || isZaloEdit;
   const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
   const whatsappLanguageCode = whatsappTemplateLanguageCode || get(templateData, `versions.base.content.whatsapp.languages[0].language`, '');
 
@@ -88,6 +107,9 @@ export function SlideBoxHeader(props) {
     window.open(WHATSAPP_HELP_DOC_LINK, '_blank');
   };
 
+  const showCreativesTemplatesBackButton =
+    !isFullMode && (moduleType === JOURNEY || useLocalTemplates);
+
   return (
     <div key="creatives-container-slidebox-header-content">
       {slidBoxContent === 'templates' && !showTemplateNameHeader && (
@@ -96,7 +118,7 @@ export function SlideBoxHeader(props) {
         description={![NO_COMMUNICATION, FTP].includes(channel) &&
           <FormattedMessage {...messages.creativeTemplatesDesc} />
             }
-        prefix={!isFullMode && moduleType === JOURNEY &&
+        prefix={showCreativesTemplatesBackButton &&
           <PrefixWrapper>
             <CapIcons.BackIcon onClick={handleClose} />
           </PrefixWrapper>
@@ -130,6 +152,12 @@ export function SlideBoxHeader(props) {
                   <StyledLabel className='whatsapp-rcs-slidebox-template-name' type="label2">{templateName}</StyledLabel>
                 </>
               ) : ""}
+              {showRcsTemplateName && (
+                <>
+                  {renderData("label1", <FormattedMessage {...globalMessages.creativeNameLabel} />, channel)}
+                  <StyledLabel className='whatsapp-rcs-slidebox-template-name' type="label2">{templateName}</StyledLabel>
+                </>
+              )}
               {isWhatsappEdit && (
                 <>
                   {renderData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
@@ -142,7 +170,7 @@ export function SlideBoxHeader(props) {
               }
             </>
           }
-          prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
+          prefix={!isFullMode && showPrefix &&
             <PrefixWrapper>
               <CapIcons.BackIcon onClick={onShowTemplates} />
             </PrefixWrapper>
@@ -198,5 +226,8 @@ SlideBoxHeader.propTypes = {
   shouldShowTemplateName: PropTypes.bool,
   templateNameRenderProp: PropTypes.func,
   smsRegister: PropTypes.any,
+  handleClose: PropTypes.func,
+  moduleType: PropTypes.string,
+  useLocalTemplates: PropTypes.bool,
 };
 export default SlideBoxHeader;

package/v2Containers/CreativesContainer/constants.js

@@ -73,3 +73,14 @@ export const ALLOWED_CHANNELS_FOR_ANONYMOUS = ['mobilepush', 'webpush'];
 export const ALL_CHANNELS_NEW = [
   'sms', 'email', 'whatsapp', 'facebook', 'line', 'viber', 'rcs', 'zalo', 'inapp', 'call_task', 'ftp',
 ];
+
+export const LOCAL_TEMPLATE_CONFIG_KEYS = ['useLocalTemplates', 'localTemplates', 'localTemplatesLoading', 'localTemplatesFilterContent', 'localTemplatesUseSkeleton', 'localTemplatesOnPageChange'];
+
+/** Keys passed from parents into `Templates` when using local SMS template list (extends `LOCAL_TEMPLATE_CONFIG_KEYS`). */
+export const LOCAL_TEMPLATE_CONFIG_KEYS_FOR_PICK = [
+  ...LOCAL_TEMPLATE_CONFIG_KEYS,
+  'localTemplatesLoadingTip',
+  'localTemplatesFooterContent',
+];
+
+export const DEFAULT_SMS_TEMPLATE_NAME = 'Campaign message SMS content';