cap-creatives-ui 8.0.280 → 8.0.321

package/app/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';
@@ -168,14 +170,20 @@ export function SlideBoxContent(props) {
       creativesMode,
       hostName = '',
       eventContextTags,
+      waitEventContextTags,
       isLoyaltyModule,
       loyaltyMetaData = {},
       showTestAndPreviewSlidebox,
       handleTestAndPreview,
       handleCloseTestAndPreview,
+      restrictPersonalization = false,
+      isAnonymousType = false,
+      onPersonalizationTokensChange,
       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 = {
@@ -395,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,
             }),
@@ -421,11 +454,12 @@ export function SlideBoxContent(props) {
     selectedOfferDetails,
     getFormData,
     eventContextTags,
+    waitEventContextTags,
   };
 
   return (
     <CreativesWrapper>
-      {!isFullMode && slidBoxContent === 'templates' && (
+      {slidBoxContent === 'templates' && (!isFullMode || useLocalTemplates) && (
       <TemplatesV2
         isFullMode={isFullMode}
         onSelectTemplate={onSelectTemplate}
@@ -455,8 +489,10 @@ export function SlideBoxContent(props) {
         enableNewChannels={enableNewChannels}
         hideTestAndPreviewBtn={hideTestAndPreviewBtn}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         loyaltyMetaData={loyaltyMetaData}
         isLoyaltyModule={isLoyaltyModule}
+        localTemplatesConfig={localTemplatesConfig}
         />
       )}
       {isPreview && (
@@ -558,11 +594,13 @@ export function SlideBoxContent(props) {
           onCreateComplete={onCreateComplete}
           smsRegister={smsRegister}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
           getLiquidTags={getLiquidTags}
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
           handleCloseTestAndPreview={handleCloseTestAndPreview}
           isTestAndPreviewMode={isTestAndPreviewMode}
+          onValidationFail={onValidationFail}
         />
       )}
       {isEditFTP && (
@@ -600,6 +638,7 @@ export function SlideBoxContent(props) {
           }}
           hostName={hostName}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
@@ -624,11 +663,13 @@ export function SlideBoxContent(props) {
         route={{ name: 'sms' }}
         isCreateSms={isCreateSms}
         isComponent
+        templateData={templateData}
         isGetFormData={isGetFormData}
         getFormSubscriptionData={getFormData}
         getLiquidTags={getLiquidTags}
         getDefaultTags={type}
         isFullMode={isFullMode}
+        onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
         onPreviewContentClicked={onPreviewContentClicked}
@@ -637,6 +678,9 @@ export function SlideBoxContent(props) {
         smsRegister={smsRegister}
         onShowTemplates={onShowTemplates}
         eventContextTags={eventContextTags}
+        restrictPersonalization={restrictPersonalization}
+        isAnonymousType={isAnonymousType}
+        waitEventContextTags={waitEventContextTags}
       />
         )}
 
@@ -670,6 +714,7 @@ export function SlideBoxContent(props) {
         moduleType={moduleType}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         isLoyaltyModule={isLoyaltyModule}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
@@ -677,13 +722,16 @@ export function SlideBoxContent(props) {
         isTestAndPreviewMode={isTestAndPreviewMode}
         location={location}
         onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
+        restrictPersonalization={restrictPersonalization}
+        isAnonymousType={isAnonymousType}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
         (() => {
           const supportCKEditor = commonUtil.hasSupportCKEditor();
-          // When supportCKEditor is true: Always use Email component (legacy flow)
-          if (supportCKEditor || templateData?.is_drag_drop) {
+          // When supportCKEditor is true: Use Email component (legacy flow with CKEditor).
+          // When supportCKEditor is false: Always use EmailWrapper (BEE or HTML editor, never CKEditor).
+          if (supportCKEditor) {
             return (
               <Email
                 key="cretives-container-email-edit"
@@ -711,6 +759,7 @@ export function SlideBoxContent(props) {
                 moduleType={moduleType}
                 showLiquidErrorInFooter={showLiquidErrorInFooter}
                 eventContextTags={eventContextTags}
+                waitEventContextTags={waitEventContextTags}
               isLoyaltyModule={isLoyaltyModule}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={handleTestAndPreview}
@@ -750,6 +799,7 @@ export function SlideBoxContent(props) {
               moduleType={moduleType}
               showLiquidErrorInFooter={showLiquidErrorInFooter}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               isLoyaltyModule={isLoyaltyModule}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={handleTestAndPreview}
@@ -772,6 +822,7 @@ export function SlideBoxContent(props) {
           <MobliPushEdit
             getFormLibraryData={getFormData}
             setIsLoadingContent={setIsLoadingContent}
+            getLiquidTags={getLiquidTags}
             location={{
               pathname: `/mobilepush/edit/`,
               query,
@@ -792,10 +843,14 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             creativesMode={creativesMode}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
             handleTestAndPreview={handleTestAndPreview}
             handleCloseTestAndPreview={handleCloseTestAndPreview}
+            restrictPersonalization={restrictPersonalization}
+            isAnonymousType={isAnonymousType}
+            onPersonalizationTokensChange={onPersonalizationTokensChange}
           />
         ) : (
           <MobilePushNew
@@ -821,8 +876,12 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             creativesMode={creativesMode}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             handleClose={handleClose}
+            restrictPersonalization={restrictPersonalization}
+            isAnonymousType={isAnonymousType}
+            onPersonalizationTokensChange={onPersonalizationTokensChange}
           />
         )
       )}
@@ -838,6 +897,7 @@ export function SlideBoxContent(props) {
             mobilePushCreateMode={mobilePushCreateMode}
             isGetFormData={isGetFormData}
             getFormData={getFormData}
+            getLiquidTags={getLiquidTags}
             templateData={templateData}
             type={type}
             step={templateStep}
@@ -856,14 +916,18 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             onTestContentClicked={onTestContentClicked}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
             handleTestAndPreview={handleTestAndPreview}
             handleCloseTestAndPreview={handleCloseTestAndPreview}
+            restrictPersonalization={restrictPersonalization}
+            isAnonymousType={isAnonymousType}
+            onPersonalizationTokensChange={onPersonalizationTokensChange}
           />
         ) : (
           <MobilePushNew
-            key="creatives-mobilepush-wrapper"
+            key="creatives-mobilepush-create-new"
             date={new Date().getMilliseconds()}
             setIsLoadingContent={setIsLoadingContent}
             onMobilepushModeChange={onMobilepushModeChange}
@@ -891,9 +955,12 @@ export function SlideBoxContent(props) {
             hideTestAndPreviewBtn={hideTestAndPreviewBtn}
             onTestContentClicked={onTestContentClicked}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
             onCreateComplete={onCreateComplete}
             creativesMode={creativesMode}
+            restrictPersonalization={restrictPersonalization}
+            isAnonymousType={isAnonymousType}
           />
         )
       )}
@@ -914,6 +981,7 @@ export function SlideBoxContent(props) {
             onSelectTemplate={onSelectTemplate}
             orgUnitId={orgUnitId}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -935,6 +1003,7 @@ export function SlideBoxContent(props) {
             fbAdManager={fbAdManager}
             onSelectTemplate={onSelectTemplate}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -958,6 +1027,7 @@ export function SlideBoxContent(props) {
             handleClose={handleClose}
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -978,6 +1048,7 @@ export function SlideBoxContent(props) {
             handleClose={handleClose}
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
           />
         )
@@ -994,6 +1065,7 @@ export function SlideBoxContent(props) {
           templateData={templateData}
           selectedOfferDetails={selectedOfferDetails}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
@@ -1018,6 +1090,7 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         createNew/> }
 
@@ -1025,6 +1098,7 @@ export function SlideBoxContent(props) {
         isFullMode={isFullMode}
         onCreateComplete={onCreateComplete}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         handleClose={handleClose}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
@@ -1042,6 +1116,7 @@ export function SlideBoxContent(props) {
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
@@ -1059,8 +1134,39 @@ export function SlideBoxContent(props) {
       )}
 
       {isCreateInApp && (
-        <InAppWrapper
-          key="creatives-inapp-wrapper"
+  (isFullMode && !commonUtil.hasNewEditorFlowInAppEnabled()) ||
+  (!isFullMode && isLoyaltyModule) ||
+  (!isFullMode && !isLoyaltyModule && !commonUtil.hasNewEditorFlowInAppEnabled()) ? (
+    <InApp
+      key="creatives-inapp-create"
+      location={{ pathname: '/inapp/create', query, search: '' }}
+      setIsLoadingContent={setIsLoadingContent}
+      isGetFormData={isGetFormData}
+      getFormData={getFormData}
+      getDefaultTags={type}
+      isFullMode={isFullMode}
+      templateData={templateData}
+      cap={cap}
+      showTemplateName={showTemplateName}
+      showLiquidErrorInFooter={showLiquidErrorInFooter}
+      onValidationFail={onValidationFail}
+      forwardedTags={forwardedTags}
+      selectedOfferDetails={selectedOfferDetails}
+      onPreviewContentClicked={onPreviewContentClicked}
+      onTestContentClicked={onTestContentClicked}
+      eventContextTags={eventContextTags}
+      waitEventContextTags={waitEventContextTags}
+      onCreateComplete={onCreateComplete}
+      handleClose={handleClose}
+      moduleType={moduleType}
+      showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+      handleTestAndPreview={handleTestAndPreview}
+      handleCloseTestAndPreview={handleCloseTestAndPreview}
+      isTestAndPreviewMode={isTestAndPreviewMode}
+    />
+  ) : (
+    <InAppWrapper
+      key="creatives-inapp-wrapper"
           date={new Date().getMilliseconds()}
           setIsLoadingContent={setIsLoadingContent}
           onInAppEditorTypeChange={onInAppEditorTypeChange}
@@ -1085,6 +1191,7 @@ export function SlideBoxContent(props) {
           moduleType={moduleType}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
           onCreateComplete={onCreateComplete}
           handleClose={handleClose}
           getDefaultTags={type}
@@ -1095,10 +1202,12 @@ export function SlideBoxContent(props) {
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
       />
+      )
       )}
-
+  
       {isEditInApp && (<InApp
         isFullMode={isFullMode}
+        isLoyaltyModule={isLoyaltyModule}
         templateData={templateData}
         getFormData={getFormData}
         getDefaultTags={type}
@@ -1106,6 +1215,7 @@ export function SlideBoxContent(props) {
         onCreateComplete={onCreateComplete}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         params={{
           id: templateData._id,
         }}
@@ -1142,10 +1252,14 @@ export function SlideBoxContent(props) {
           supportedTags={supportedTags}
           selectedOfferDetails={selectedOfferDetails}
           eventContextTags={eventContextTags}
+          restrictPersonalization={restrictPersonalization}
+          isAnonymousType={isAnonymousType}
+          waitEventContextTags={waitEventContextTags}
         />
       )}
       {isCreateRcs && (<Rcs
         {...rcsCommonProps}
+        templateData={templateData}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}
@@ -1235,6 +1349,8 @@ SlideBoxContent.propTypes = {
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
-  isTestAndPreviewMode: PropTypes.bool
+  isTestAndPreviewMode: PropTypes.bool,
+  waitEventContextTags: PropTypes.object,
+  eventContextTags: PropTypes.array,
 };
 export default SlideBoxContent;

package/app/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -6,15 +6,16 @@ import CapError from '@capillarytech/cap-ui-library/CapError';
 import PropTypes from 'prop-types';
 import messages from './messages';
 import ErrorInfoNote from '../../v2Components/ErrorInfoNote';
-import { PREVIEW } from './constants';
+import { PREVIEW, EMAIL, SMS, EDIT_TEMPLATE, MOBILE_PUSH } from './constants';
 import { EMAIL_CREATE_MODES } from '../EmailWrapper/constants';
 import { hasSupportCKEditor } from '../../utils/common';
+import { getMessageForDevice, getTitleForDevice } from '../../utils/commonUtils';
 
 function getFullModeSaveBtn(slidBoxContent, isCreatingTemplate) {
   if (isCreatingTemplate) {
     return <FormattedMessage {...messages.creativesTemplatesDone} />;
   }
-  return slidBoxContent === "editTemplate"
+  return slidBoxContent === EDIT_TEMPLATE
     ? <FormattedMessage {...messages.creativesTemplatesUpdate} />
     : <FormattedMessage {...messages.creativesTemplatesSaveFullMode} />;
 }
@@ -43,13 +44,23 @@ function SlideBoxFooter(props) {
     currentChannel,
     emailCreateMode,
     selectedEmailCreateMode,
+    restrictPersonalization = false,
+    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)
   // For other channels, BEE editor, or when htmlEditorValidationState is not provided, don't disable based on validation
-  const isEmailChannel = currentChannel?.toUpperCase() === 'EMAIL';
-  const isEditMode = slidBoxContent === 'editTemplate';
+  const isEmailChannel = currentChannel?.toUpperCase() === EMAIL;
+  const isSmsChannel = currentChannel?.toUpperCase() === SMS;
+  // Use templateData.type in library/edit so footer shows when editing a mobile push template (currentChannel may not be set to template channel)
+  const isMobilePushChannel =
+    currentChannel?.toUpperCase() === MOBILE_PUSH ||
+    (templateData?.type && templateData.type.toUpperCase() === MOBILE_PUSH);
+  const isEditMode = slidBoxContent === EDIT_TEMPLATE;
 
   // Use selectedEmailCreateMode for accurate mode detection in create mode (emailCreateMode is mapped for backwards compatibility)
   // In edit mode: htmlEditorValidationState is initialized as {} but only updated by HTML Editor
@@ -125,8 +136,36 @@ function SlideBoxFooter(props) {
   const isBEEEditorModeInCreate = !isHTMLEditorMode && !isEditMode;
   const isBEEEditorMode = isBEEEditorModeInEdit || isBEEEditorModeInCreate;
   const hasBEEEditorErrors = isEmailChannel && isBEEEditorMode && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
+  const hasSmsValidationErrors = isSmsChannel && (hasStandardErrors || hasLiquidErrors);
+  // Mobile Push OLD: footer only for extractTags/Aira liquid errors, not standard tag errors
+  const hasMobilePushValidationErrors = isMobilePushChannel && hasLiquidErrors;
+
+  const shouldShowErrorInfoNote = hasBEEEditorErrors || hasSmsValidationErrors || hasMobilePushValidationErrors || isSupportCKEditor;
+
+  // Check for personalization tokens in title/message when anonymous user tries to save
+  const hasPersonalizationTokens = () => {
+    if (!isAnonymousType || !templateData) return false;
+
+    const androidTitle = getTitleForDevice(templateData, 'ANDROID') || '';
+    const iosTitle = getTitleForDevice(templateData, 'IOS') || '';
+    const androidMessageBody = getMessageForDevice(templateData, 'ANDROID') || '';
+    const iosMessageBody = getMessageForDevice(templateData, 'IOS') || '';
+    // Check for personalization tags {{ }} in title or message body
+    const contentToCheck = `${androidTitle} ${iosTitle} ${androidMessageBody} ${iosMessageBody}`;
+    // Check for liquid tags {{ }}
+    if (contentToCheck.includes('{{') && contentToCheck.includes('}}')) {
+      return true;
+    }
+    // Check for event context tags [
+    if (contentToCheck.includes('[') && contentToCheck.includes(']')) {
+      return true;
+    }
+    return false;
+  };
+
+  // Use prop from parent (FormBuilder flow) when available; else fall back to templateData check
+  const hasPersonalizationTokenError = hasPersonalizationTokenErrorProp === true || (restrictPersonalization && hasPersonalizationTokens());
 
-  const shouldShowErrorInfoNote = hasBEEEditorErrors || isSupportCKEditor;
   return (
     <div className="template-footer-width">
       {shouldShowErrorInfoNote && (
@@ -147,9 +186,11 @@ function SlideBoxFooter(props) {
             <CapRow>
               <CapButton
                 onClick={onSave}
-                disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons}
+                disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError}
               >
-                {isFullMode ? (
+                {primarySaveButtonMessage ? (
+                  <FormattedMessage {...primarySaveButtonMessage} />
+                ) : isFullMode ? (
                   getFullModeSaveBtn(slidBoxContent, isCreatingTemplate)
                 ) : (
                   <FormattedMessage {...messages.creativesTemplatesSave} />
@@ -159,7 +200,7 @@ function SlideBoxFooter(props) {
                 <CapButton
                   type="secondary"
                   onClick={onTestAndPreview}
-                  disabled={shouldDisableButtons}
+                  disabled={shouldDisableButtons || hasPersonalizationTokenError}
                   style={{ marginLeft: '8px' }}
                 >
                   <FormattedMessage {...messages.testAndPreview} />
@@ -220,6 +261,15 @@ SlideBoxFooter.propTypes = {
   currentChannel: PropTypes.string,
   emailCreateMode: PropTypes.string,
   selectedEmailCreateMode: PropTypes.string,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
+  templateData: PropTypes.object,
+  formData: PropTypes.array,
+  hasPersonalizationTokenError: PropTypes.bool,
+  primarySaveButtonMessage: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
 };
 
 SlideBoxFooter.defaultProps = {
@@ -245,5 +295,8 @@ SlideBoxFooter.defaultProps = {
   currentChannel: '',
   emailCreateMode: '',
   selectedEmailCreateMode: '',
+  formData: [],
+  hasPersonalizationTokenError: false,
+  primarySaveButtonMessage: undefined,
 };
 export default SlideBoxFooter;

package/app/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,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { WHATSAPP_HELP_DOC_LINK, JOURNEY } from './constants';
 
@@ -24,7 +25,7 @@ const StyledLabel = styled(CapLabelInline)`
   margin-right: ${CAP_SPACE_12};
 `;
 const PrefixWrapper = styled.div`
-  margin-right: 16px;
+  margin-right: ${CAP_SPACE_16};
 `;
 const renderData = (type, value, channel) => (
   <StyledLabel className={channel?.toLowerCase() === ZALO ? 'zalo-template-name-spacing' : ''} type={type}>
@@ -33,7 +34,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);
@@ -81,6 +100,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 && (
@@ -89,7 +111,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>
@@ -135,7 +157,7 @@ export function SlideBoxHeader(props) {
               }
             </>
           }
-          prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
+          prefix={!isFullMode && showPrefix &&
             <PrefixWrapper>
               <CapIcons.backIcon onClick={onShowTemplates} />
             </PrefixWrapper>
@@ -191,5 +213,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/app/v2Containers/CreativesContainer/constants.js

@@ -11,6 +11,7 @@ export const EBILL = "EBILL";
 export const LINE = "LINE";
 export const CALL_TASK = "CALL_TASK";
 export const MOBILE_PUSH = "MOBILEPUSH";
+export const MPUSH = "MPUSH";
 export const WECHAT = "WECHAT";
 export const FACEBOOK = "FACEBOOK";
 export const FTP = "FTP";
@@ -52,3 +53,26 @@ export const GENERIC = "GENERIC";
 export const LIQUID_ERROR_MSG = "LIQUID_ERROR_MSG";
 export const STANDARD_ERROR_MSG = "STANDARD_ERROR_MSG";
 export const COMMON_CHANNELS = ['sms', 'email', 'wechat', 'mobilepush', 'webpush', 'line', 'viber', 'facebook', 'call_task', 'ftp', 'assets'];
+
+/** Normalized channel forms (e.g. from camelCase) that do not match pane keys; maps to canonical pane key for hide/disable. */
+export const NORMALIZED_CHANNEL_ALIASES = {
+  we_chat: WECHAT.toLowerCase(),
+  m_push: MOBILE_PUSH.toLowerCase(),
+  // paneKey `inApp` → `in_app`; TemplatesV2 pane uses key INAPP → `inapp` — both must match for channelsToHide
+  in_app: INAPP.toLowerCase(),
+};
+export const MIXED = "MIXED";
+export const VISITOR = "VISITOR";
+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',
+];