@capillarytech/creatives-library 8.0.318 → 8.0.320

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,
 } 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/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";
@@ -57,6 +58,8 @@ export const COMMON_CHANNELS = ['sms', 'email', 'wechat', 'mobilepush', 'webpush
 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";
@@ -64,3 +67,12 @@ 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',
+];

package/v2Containers/CreativesContainer/embeddedSlideboxUtils.js

@@ -0,0 +1,67 @@
+/**
+ * Shared logic for CreativesContainer slidebox + embedded flows (e.g. RCS SMS fallback)
+ * that mirror the same footer liquid errors and layout margins.
+ */
+import get from 'lodash/get';
+import {
+  CAP_SPACE_32,
+  CAP_SPACE_56,
+  CAP_SPACE_64,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import * as constants from './constants';
+
+/**
+ * Returns true if value is "deep empty": no errors present.
+ * Same rules as CreativesContainer (used for liquid / standard error payloads).
+ */
+export function isDeepEmpty(value) {
+  if (value == null) return true;
+  if (typeof value === 'string') return value.length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === 'object') {
+    return Object.values(value).every(isDeepEmpty);
+  }
+  return false;
+}
+
+/**
+ * Header/content margin below slidebox chrome when ErrorInfoNote stacks errors — same formula as CreativesContainer#render.
+ */
+export function getSlideBoxWrapperMarginFromLiquidErrors(liquidErrorMessage) {
+  return (get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0
+    && get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0)
+    ? CAP_SPACE_64
+    : get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0
+      ? CAP_SPACE_56
+      : get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0
+        ? CAP_SPACE_32
+        : 0;
+}
+
+/**
+ * Maps FormBuilder `showLiquidErrorInFooter` args to slidebox footer state.
+ * Returns `null` when CreativesContainer intentionally skips updating (Mobile Push OLD empty clear).
+ */
+export function computeLiquidFooterUpdateFromFormBuilder(
+  errorMessagesFromFormBuilder,
+  currentFormBuilderTab,
+  { previousIsLiquidValidationError, currentChannelUpper } = {},
+) {
+  const liquidMsgs = get(errorMessagesFromFormBuilder, constants.LIQUID_ERROR_MSG, []);
+  const standardMsgs = get(errorMessagesFromFormBuilder, constants.STANDARD_ERROR_MSG, []);
+  const hasLiquid = !isDeepEmpty(liquidMsgs);
+  const hasStandard = !isDeepEmpty(standardMsgs);
+  const isLiquidValidationError = hasLiquid || hasStandard;
+  const isMobilePush = currentChannelUpper === constants.MOBILE_PUSH;
+  if (!hasLiquid && !hasStandard && previousIsLiquidValidationError && isMobilePush) {
+    return null;
+  }
+  return {
+    isLiquidValidationError,
+    liquidErrorMessage: errorMessagesFromFormBuilder,
+    activeFormBuilderTab:
+      currentFormBuilderTab === 1
+        ? constants.ANDROID
+        : (currentFormBuilderTab === 2 ? constants.IOS : null),
+  };
+}