@capillarytech/creatives-library 8.0.301 → 8.0.303

package/v2Containers/InApp/index.js

@@ -14,6 +14,8 @@ import CapRow from "@capillarytech/cap-ui-library/CapRow";
 import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
 import CapButton from "@capillarytech/cap-ui-library/CapButton";
 import CapNotification from "@capillarytech/cap-ui-library/CapNotification";
+import CapTab from "@capillarytech/cap-ui-library/CapTab";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
 import { makeSelectInApp, makeSelectAccount, makeSelectGetTemplateDetailsInProgress } from "./selectors";
 import * as globalActions from '../Cap/actions';
 import {
@@ -52,18 +54,20 @@ import {
   IOS_CAPITAL,
 } from "./constants";
 import { INAPP, SMS } from "../CreativesContainer/constants";
+import { AI_CONTENT_BOT_DISABLED } from "../../constants/unified";
 import {
   ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
 } from "../Whatsapp/constants";
 import { getCdnUrl } from "../../utils/cdnTransformation";
 import { getCtaObject, hasAnyErrors, getSingleTab } from "./utils";
 import { validateInAppContent } from "../../utils/commonUtils";
-import { hasLiquidSupportFeature } from "../../utils/common";
+import { hasLiquidSupportFeature, hasNewEditorFlowInAppEnabled } from "../../utils/common";
 import formBuilderMessages from "../../v2Components/FormBuilder/messages";
 import HTMLEditor from "../../v2Components/HtmlEditor";
 import { HTML_EDITOR_VARIANTS } from "../../v2Components/HtmlEditor/constants";
 import { INAPP_EDITOR_TYPES } from "../InAppWrapper/constants";
 import InappAdvanced from "../InappAdvance/index";
+import CapDeviceContent from "../../v2Components/CapDeviceContent";
 import { ErrorInfoNote } from "../../v2Components/ErrorInfoNote";
 
 let editContent = {};
@@ -74,6 +78,7 @@ export const InApp = (props) => {
     actions,
     globalActions,
     isFullMode,
+    isLoyaltyModule,
     onCreateComplete,
     params,
     templateData = {},
@@ -878,7 +883,7 @@ export const InApp = (props) => {
       // Use 'html editor template' as title for HTML editor to differentiate from BEE editor
       title: isHTMLTemplate ? 'html editor template' : titleAndroid,
       message: androidMessage,
-      bodyType: templateLayoutType,
+      bodyType: bodyTypeForBackend,
       expandableDetails: {
         style: androidExpandableStyle,
         message: androidMessage,
@@ -1240,11 +1245,13 @@ export const InApp = (props) => {
     && !isBEEeditor
     && !isBeeFreeTemplate;
 
+  const isNewEditorFlowEnabled = !isLoyaltyModule && hasNewEditorFlowInAppEnabled();
+
   // Use state if available, otherwise fall back to direct data check
-  const shouldUseHTMLEditor = isHTMLTemplate || isHTMLTemplateFromData;
+  const shouldUseHTMLEditor = isNewEditorFlowEnabled && (isHTMLTemplate || isHTMLTemplateFromData);
 
   // Only route to Bee editor if it's explicitly a Bee editor AND not an HTML template
-  const shouldUseBeeEditor = (isBEEeditor || isBeeFreeTemplate) && !shouldUseHTMLEditor;
+  const shouldUseBeeEditor = isNewEditorFlowEnabled && (isBEEeditor || isBeeFreeTemplate) && !shouldUseHTMLEditor;
 
   // Early returns to avoid nested ternary
   if (isEditInApp && getTemplateDetailsInProgress) {
@@ -1280,10 +1287,157 @@ export const InApp = (props) => {
     );
   }
 
+  // ── Old-flow helpers (used by CapDeviceContent when flag is disabled) ──────
+  const isAiContentBotDisabled = currentOrgDetails?.accessibleFeatures?.includes(AI_CONTENT_BOT_DISABLED);
+
+  const templateDescErrorHandler = (value) => {
+    const { unsupportedTags, isBraceError } = validateTags({
+      content: value,
+      tagsParam: tags,
+      injectedTagsParams: injectedTags,
+      location,
+      tagModule: getDefaultTags,
+      isFullMode,
+    }) || {};
+    if (unsupportedTags?.length > 0) {
+      return formatMessage(globalMessages.unsupportedTagsValidationError, { unsupportedTags });
+    }
+    if (isBraceError) {
+      return formatMessage(globalMessages.braceValidationError);
+    }
+    return '';
+  };
+
+  const onCopyTitleAndContent = () => {
+    if (panes === ANDROID) {
+      setTitleAndroid(titleIos);
+      setTemplateMessageAndroid(templateMessageIos);
+      setInAppImageSrcAndroid(inAppImageSrcIos);
+    } else {
+      setTitleIos(titleAndroid);
+      setTemplateMessageIos(templateMessageAndroid);
+      setInAppImageSrcIos(inAppImageSrcAndroid);
+    }
+  };
+
+  const onTagSelect = (value, index) => {
+    const tag = `{{${value}}}`;
+    if (panes === ANDROID) {
+      if (index === 0) setTitleAndroid((prev) => prev + tag);
+      else setTemplateMessageAndroid((prev) => prev + tag);
+    } else if (index === 0) {
+      setTitleIos((prev) => prev + tag);
+    } else {
+      setTemplateMessageIos((prev) => prev + tag);
+    }
+  };
+
+  // Device support flags (same derivation as InappAdvance)
+  const isAndroidSupported = get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED || get(editContent, 'ANDROID.deviceType') === ANDROID;
+  const isIosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL;
+
+  // CapDeviceContent tab panes (old flow)
+  const DEVICE_PANES = [
+    {
+      content: (
+        <CapDeviceContent
+          panes={ANDROID}
+          actions={actions}
+          editData={editData}
+          isFullMode={isFullMode}
+          inAppImageSrc={inAppImageSrcAndroid}
+          setInAppImageSrc={setInAppImageSrcAndroid}
+          isEditFlow={isEditFlow}
+          ctaData={ctaDataAndroid}
+          setCtaData={setCtaDataAndroid}
+          buttonType={buttonTypeAndroid}
+          setButtonType={setButtonTypeAndroid}
+          templateMediaType={templateMediaType}
+          setTemplateMediaType={setTemplateMediaType}
+          title={titleAndroid}
+          setTitle={setTitleAndroid}
+          templateMessageError={templateMessageErrorAndroid}
+          templateMessage={templateMessageAndroid}
+          setTemplateMessage={setTemplateMessageAndroid}
+          setTemplateMessageError={setTemplateMessageErrorAndroid}
+          addActionLink={addActionLinkAndroid}
+          setAddActionLink={setAddActionLinkAndroid}
+          deepLink={deepLink}
+          deepLinkValue={deepLinkValueAndroid}
+          setDeepLinkValue={setDeepLinkValueAndroid}
+          onCopyTitleAndContent={onCopyTitleAndContent}
+          isOtherDeviceSupported={isIosSupported}
+          tags={tags}
+          onTagSelect={onTagSelect}
+          handleOnTagsContextChange={handleOnTagsContextChange}
+          templateDescErrorHandler={templateDescErrorHandler}
+          templateTitleError={templateTitleErrorAndroid}
+          setTemplateTitleError={setTemplateTitleErrorAndroid}
+          isAiContentBotDisabled={isAiContentBotDisabled}
+          injectedTags={injectedTags}
+          selectedOfferDetails={selectedOfferDetails}
+          location={location}
+        />
+      ),
+      tab: <FormattedMessage {...messages.Android} />,
+      key: ANDROID,
+      isSupported: isAndroidSupported,
+    },
+    {
+      content: (
+        <CapDeviceContent
+          panes={IOS}
+          actions={actions}
+          editData={editData}
+          isFullMode={isFullMode}
+          inAppImageSrc={inAppImageSrcIos}
+          setInAppImageSrc={setInAppImageSrcIos}
+          isEditFlow={isEditFlow}
+          ctaData={ctaDataIos}
+          setCtaData={setCtaDataIos}
+          buttonType={buttonTypeIos}
+          setButtonType={setButtonTypeIos}
+          templateMediaType={templateMediaType}
+          setTemplateMediaType={setTemplateMediaType}
+          title={titleIos}
+          setTitle={setTitleIos}
+          templateMessageError={templateMessageErrorIos}
+          templateMessage={templateMessageIos}
+          setTemplateMessage={setTemplateMessageIos}
+          setTemplateMessageError={setTemplateMessageErrorIos}
+          addActionLink={addActionLinkIos}
+          setAddActionLink={setAddActionLinkIos}
+          deepLink={deepLink}
+          deepLinkValue={deepLinkValueIos}
+          setDeepLinkValue={setDeepLinkValueIos}
+          onCopyTitleAndContent={onCopyTitleAndContent}
+          isOtherDeviceSupported={isAndroidSupported}
+          tags={tags}
+          onTagSelect={onTagSelect}
+          handleOnTagsContextChange={handleOnTagsContextChange}
+          templateDescErrorHandler={templateDescErrorHandler}
+          templateTitleError={templateTitleErrorIos}
+          setTemplateTitleError={setTemplateTitleErrorIos}
+          isAiContentBotDisabled={isAiContentBotDisabled}
+          injectedTags={injectedTags}
+          selectedOfferDetails={selectedOfferDetails}
+          location={location}
+        />
+      ),
+      tab: <FormattedMessage {...messages.Ios} />,
+      key: IOS,
+      isSupported: isIosSupported,
+    },
+  ];
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Calculate column span: HTML editor = 18, everything else = 24
+  const editorColumnSpan = shouldUseHTMLEditor ? 18 : 24;
+
   return (
     <CapSpin spinning={spin || fetchingLiquidValidation} tip={fetchingLiquidValidation ? <FormattedMessage {...formBuilderMessages.liquidSpinText} /> : ""}>
       <CapRow className="cap-inapp-creatives">
-        <CapColumn span={shouldUseHTMLEditor ? 18 : 24}>
+        <CapColumn span={editorColumnSpan}>
           {/* Creative layout type */}
           {shouldUseHTMLEditor && (
             <>
@@ -1304,7 +1458,7 @@ export const InApp = (props) => {
               />
             </>
           )}
-          {shouldUseHTMLEditor ? (
+          {shouldUseHTMLEditor && (
             <HTMLEditor
               key={`inapp-html-editor-v${htmlEditorContentVersion}`}
               variant={HTML_EDITOR_VARIANTS.INAPP}
@@ -1320,19 +1474,16 @@ export const InApp = (props) => {
               location={location}
               selectedOfferDetails={selectedOfferDetails}
               onTagSelect={() => {
-                // Tag insertion is handled by HTMLEditor's CodeEditorPane at cursor position
-                // Content updates will be propagated via onContentChange callback
+                // Tag insertion handled by HTMLEditor's CodeEditorPane at cursor position
               }}
-              // Don't pass globalActions to prevent duplicate API calls
-              // HTMLEditor will use onContextChange instead
               onContextChange={handleOnTagsContextChange}
-              // Pass validation errors to HTMLEditor for display
               errors={errorMessage}
               isFullMode={isFullMode}
               data-test="inapp-html-editor"
               style={{ width: '138%' }}
             />
-          ) : (
+          )}
+          {!shouldUseHTMLEditor && isNewEditorFlowEnabled && (
             <InappAdvanced
               getFormData={getFormData}
               setIsLoadingContent={setIsLoadingContent}
@@ -1357,11 +1508,29 @@ export const InApp = (props) => {
               onCreateComplete={onCreateComplete}
             />
           )}
+          {!shouldUseHTMLEditor && !isNewEditorFlowEnabled && (
+            <>
+              <CapInput
+                label={<FormattedMessage {...messages.creativeName} />}
+                onChange={({ target: { value } }) => setTempName(value)}
+                value={tempName}
+                labelPosition="top"
+                size="default"
+              />
+              <CapTab
+                panes={DEVICE_PANES.filter((devicePane) => devicePane?.isSupported === true)}
+                onChange={(value) => setPanes(value)}
+                activeKey={panes}
+                defaultActiveKey={panes}
+                className="inapp-template-device-tab"
+              />
+            </>
+          )}
         </CapColumn>
       </CapRow>
-      {/* Footer with Done/Update button - Only show for HTML editor, bee editor has its own footer */}
+      {/* Footer with Done/Update button - show for HTML editor and old CapDeviceContent flow */}
       {
-        shouldUseHTMLEditor && (
+        (shouldUseHTMLEditor || !isNewEditorFlowEnabled) && (
           <>
             {hasAnyErrors(errorMessage) && (
               <ErrorInfoNote

package/v2Containers/InApp/tests/mockData.js

@@ -894,5 +894,5 @@ export const deviceContentProps = {
     },
   ],
   tags: [],
+  isOtherDeviceSupported: true,
 };
-