@capillarytech/creatives-library 9.0.15-alpha.3 → 9.0.16-beta.0

package/v2Containers/Cap/index.js

@@ -30,6 +30,7 @@ import {
   REQUEST,
   DEFAULT,
   ENABLE_PRODUCT_SUPPORT_VIDEOS,
+  ENABLE_NEW_LEFT_NAVIGATION,
   CAMPAIGN_SETTINGS_URL,
 } from './constants';
 import './_cap.scss';
@@ -53,7 +54,8 @@ import { v2ViberSagas } from '../Viber/sagas';
 import { v2FacebookSagas } from '../Facebook/sagas';
 import createReducer from '../Line/Container/reducer';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
-const gtm = window.dataLayer || [];
+import { getDataLayer } from '../../utils/getDataLayer';
+const gtm = getDataLayer();
 const {
   logNewTab,
   utilsGetOrgNameFromId,
@@ -72,18 +74,19 @@ const CapWrapper = styled.div`
   min-height: 100%;
   padding: 0;
   flex-direction: column;
+  position: relative;
 `;
 GA.initialize({ accessKey: GTM_TRACKING_ID, trackUIError: true, trackLoadPerformance: 'creatives' });
 
 const MainWrapper = styled.div`
   position: relative;
-  min-height: calc(100vh - 5.29rem);
-  top: 4.72rem;
+  min-height: 100%;
+  top: 0;
 `;
 
 const ContentWrapper = styled.div`
   && {
-    margin-left: ${(props) => (props.leftNavbarExpanded ? '17rem' : '4.475rem')};
+    margin-left: 0;
   }
 `;
 
@@ -500,6 +503,8 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
     const { isCreativesAccessible, showOrgChangeModal, showRefreshModal } = this.state;
+    const { accessibleFeatures = [] } = currentOrgDetails;
+    const isLatestLeftNavigationEnabled = accessibleFeatures.includes(ENABLE_NEW_LEFT_NAVIGATION);
     return (
       <CapWrapper>
         { this.props.loader.localeLoading || this.props.Global.fetching_userdata ?
@@ -537,26 +542,47 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   campaignOrgV2Status={currentOrgDetails.org_campaign_v2_status}
                   handleLeftNavBarExpanded={this.handleLeftNavBarExpanded}
                   leftNavbarExpandedProp={this.state.leftNavbarExpanded}
-                />) : ''}
-              <MainWrapper className="main">
 
-                <ContentWrapper
-                  className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
-                  leftNavbarExpanded={this.state.leftNavbarExpanded}
                 >
-                  <Switch>
-                    {componentRoutes.map(routeProps => {
-                      return (
-                        <RenderRoute
-                          {...routeProps}
-                          key={routeProps.path}
-                          isLoggedIn={isLoggedIn}
-                        />
+                  <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
+                    <ContentWrapper
+                      className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
+                      isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+                      leftNavbarExpanded={this.state.leftNavbarExpanded}
+                    >
+                      <Switch>
+                        {componentRoutes.map(routeProps => {
+                          return (
+                            <RenderRoute
+                              {...routeProps}
+                              key={routeProps.path}
+                              isLoggedIn={isLoggedIn}
+                            />
+                          )}
+                        )}
+                      </Switch>
+                    </ContentWrapper>
+                  </MainWrapper>
+                </NavigationBar>) : (
+                <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
+                  <ContentWrapper
+                    className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
+                    isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+                    leftNavbarExpanded={this.state.leftNavbarExpanded}
+                  >
+                    <Switch>
+                      {componentRoutes.map(routeProps => {
+                        return (
+                          <RenderRoute
+                            {...routeProps}
+                            key={routeProps.path}
+                            isLoggedIn={isLoggedIn}
+                          />
+                        )}
                       )}
-                    )}
-                  </Switch>
-                </ContentWrapper>
-              </MainWrapper>
+                    </Switch>
+                  </ContentWrapper>
+                </MainWrapper>)}
             </div>
             {(toastMessages && toastMessages.length > 0) &&
           toastMessages.map((message) => {

package/v2Containers/Cap/sagas.js

@@ -7,6 +7,7 @@ import {
 // import { normalize } from 'normalizr';
 import * as Api from '../../services/api';
 import * as LocalStorage from '../../services/localStorageApi';
+import { isMFEMode } from '../../utils/mfeDetect';
 import * as types from './constants';
 import config from '../../config/app';
 //import pathConfig from '../../config/path';
@@ -82,6 +83,24 @@ export function* logoutFlow() {
 
 export function* fetchUserInfo(option) {
   try {
+    if (isMFEMode()) {
+      const userData = LocalStorage.loadItem('user');
+      const currentOrgId = LocalStorage.loadItem('orgID');
+      const storedOrgDetails = LocalStorage.loadItem('currentOrgDetails');
+      const currentOrgDetails = {
+        ...(storedOrgDetails || {}),
+        accessibleFeatures: window.capAuth?.accessibleFeatures || [],
+      };
+      yield put({
+        type: types.GET_USER_DATA_SUCCESS,
+        userData: userData || {},
+        currentOrgId,
+        currentOrgDetails,
+      });
+      if (option.callback) option.callback(userData, currentOrgDetails);
+      return;
+    }
+
     const result = yield call(Api.getUserData);
     if (result?.isError || result?.status === 401) {
       yield call(LocalStorage.clearItem, 'user');

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, fireEvent,
+  render as rtlRender, screen, waitFor, within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -47,9 +47,6 @@ 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,10 +24,6 @@ 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, fireEvent,
+  render, screen, waitFor, within,
 } 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');
-  fireEvent.mouseDown(combos[comboIndex]);
+  await userEvent.click(combos[comboIndex]);
   await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-  fireEvent.click(await findVisibleSelectOption(optionText, WAIT_OPTIONS));
+  await userEvent.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');
-    fireEvent.click(resetLinks[0]);
+    await userEvent.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');
-    fireEvent.mouseDown(combos[1]);
+    await userEvent.click(combos[1]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('+1002003002', WAIT_OPTIONS));
+    await userEvent.click(await findVisibleSelectOption('+1002003002', WAIT_OPTIONS));
 
     const resetLinks = within(root).getAllByText('Reset');
-    fireEvent.click(resetLinks[1]);
+    await userEvent.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');
-    fireEvent.mouseDown(combos[combos.length - 1]);
+    await userEvent.click(combos[combos.length - 1]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
+    await userEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
 
     const saveBtn = within(root).getByRole('button', { name: /save changes/i });
     await waitFor(() => expect(saveBtn).not.toBeDisabled());
-    fireEvent.click(saveBtn);
+    await userEvent.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');
-    fireEvent.mouseDown(combos[0]);
+    await userEvent.click(combos[0]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('Gateway B', WAIT_OPTIONS));
+    await userEvent.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');
-    fireEvent.mouseDown(combos[0]);
+    await userEvent.click(combos[0]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('Mail Beta', WAIT_OPTIONS));
+    await userEvent.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];
-    fireEvent.mouseDown(senderCombo);
+    await userEvent.click(senderCombo);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
+    await userEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
 
     const saveBtn = within(root).getByRole('button', { name: /save changes/i });
     await waitFor(() => expect(saveBtn).not.toBeDisabled());
-    fireEvent.click(saveBtn);
+    await userEvent.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];
-    fireEvent.mouseDown(senderCombo);
+    await userEvent.click(senderCombo);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('+viber-alt', WAIT_OPTIONS));
+    await userEvent.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');
-    fireEvent.click(resetLinks[resetLinks.length - 1]);
+    await userEvent.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/SlideBoxContent.js

@@ -3,7 +3,6 @@ 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';
@@ -26,7 +25,6 @@ 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';
@@ -182,8 +180,6 @@ 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 = {
@@ -403,37 +399,12 @@ export function SlideBoxContent(props) {
       }
       case constants.RCS: {
         const template = cloneDeep(templateDataObject);
-        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,
-        );
+        const { description = "", media: { mediaUrl = "" } = {}, title = "", suggestions = [] } = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0]', {});
         return {
           rcsPreviewContent: {
             rcsImageSrc: mediaUrl,
-            rcsTitle,
-            rcsDesc,
+            rcsTitle: title,
+            rcsDesc: description,
             ...(suggestions.length > 0 && {
               buttonText: suggestions[0]?.text,
             }),
@@ -455,12 +426,11 @@ export function SlideBoxContent(props) {
     getFormData,
     eventContextTags,
     waitEventContextTags,
-    handleClose,
   };
 
   return (
     <CreativesWrapper>
-      {slidBoxContent === 'templates' && (!isFullMode || useLocalTemplates) && (
+      {!isFullMode && slidBoxContent === 'templates' && (
       <TemplatesV2
         isFullMode={isFullMode}
         onSelectTemplate={onSelectTemplate}
@@ -493,7 +463,6 @@ export function SlideBoxContent(props) {
         waitEventContextTags={waitEventContextTags}
         loyaltyMetaData={loyaltyMetaData}
         isLoyaltyModule={isLoyaltyModule}
-        localTemplatesConfig={localTemplatesConfig}
         />
       )}
       {isPreview && (
@@ -664,7 +633,6 @@ export function SlideBoxContent(props) {
         route={{ name: 'sms' }}
         isCreateSms={isCreateSms}
         isComponent
-        templateData={templateData}
         isGetFormData={isGetFormData}
         getFormSubscriptionData={getFormData}
         getLiquidTags={getLiquidTags}
@@ -682,6 +650,9 @@ export function SlideBoxContent(props) {
         restrictPersonalization={restrictPersonalization}
         isAnonymousType={isAnonymousType}
         waitEventContextTags={waitEventContextTags}
+        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+        handleTestAndPreview={handleTestAndPreview}
+        handleCloseTestAndPreview={handleCloseTestAndPreview}
       />
         )}
 
@@ -1271,7 +1242,6 @@ export function SlideBoxContent(props) {
       )}
       {isCreateRcs && (<Rcs
         {...rcsCommonProps}
-        templateData={templateData}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -49,8 +49,6 @@ 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)
@@ -167,12 +165,6 @@ 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 && (
@@ -195,7 +187,11 @@ function SlideBoxFooter(props) {
                 onClick={onSave}
                 disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError}
               >
-                {getSaveButtonLabel()}
+                {isFullMode ? (
+                  getFullModeSaveBtn(slidBoxContent, isCreatingTemplate)
+                ) : (
+                  <FormattedMessage {...messages.creativesTemplatesSave} />
+                )}
               </CapButton>
               {showTestAndPreviewButton && (
                 <CapButton
@@ -268,10 +264,6 @@ SlideBoxFooter.propTypes = {
   templateData: PropTypes.object,
   formData: PropTypes.array,
   hasPersonalizationTokenError: PropTypes.bool,
-  primarySaveButtonMessage: PropTypes.shape({
-    id: PropTypes.string,
-    defaultMessage: PropTypes.string,
-  }),
 };
 
 SlideBoxFooter.defaultProps = {
@@ -299,6 +291,5 @@ SlideBoxFooter.defaultProps = {
   selectedEmailCreateMode: '',
   formData: [],
   hasPersonalizationTokenError: false,
-  primarySaveButtonMessage: undefined,
 };
 export default SlideBoxFooter;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -16,7 +16,6 @@ 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';
@@ -29,7 +28,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: ${CAP_SPACE_16};
+  margin-right: 16px;
   display: inline-flex;
   align-items: center;
   font-size: ${ICON_SIZE_M};
@@ -41,25 +40,7 @@ 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,
-    useLocalTemplates = false,
-  } = props;
+  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep, smsRegister, handleClose, moduleType } = props;
   const showTemplateNameHeader = isFullMode && shouldShowTemplateName;
   const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
@@ -80,7 +61,7 @@ export function SlideBoxHeader(props) {
   } = templateData || {};
   const templateName = whatsappTemplateName || templateData?.name;
   const showRcsTemplateName = channel.toLowerCase() === RCS && slidBoxContent === 'editTemplate' && !isFullMode && templateName;
-  const showTemplateName = isWhatsappEdit || isZaloEdit;
+  const showTemplateName = isWhatsappEdit || showRcsTemplateName || isZaloEdit;
   const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
   const whatsappLanguageCode = whatsappTemplateLanguageCode || get(templateData, `versions.base.content.whatsapp.languages[0].language`, '');
 
@@ -107,9 +88,6 @@ 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 && (
@@ -118,7 +96,7 @@ export function SlideBoxHeader(props) {
         description={![NO_COMMUNICATION, FTP].includes(channel) &&
           <FormattedMessage {...messages.creativeTemplatesDesc} />
             }
-        prefix={showCreativesTemplatesBackButton &&
+        prefix={!isFullMode && moduleType === JOURNEY &&
           <PrefixWrapper>
             <CapIcons.BackIcon onClick={handleClose} />
           </PrefixWrapper>
@@ -152,12 +130,6 @@ 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} />)}
@@ -170,7 +142,7 @@ export function SlideBoxHeader(props) {
               }
             </>
           }
-          prefix={!isFullMode && showPrefix &&
+          prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
             <PrefixWrapper>
               <CapIcons.BackIcon onClick={onShowTemplates} />
             </PrefixWrapper>
@@ -226,8 +198,5 @@ 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,14 +73,3 @@ 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';