@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.10

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -10,6 +10,7 @@ import SmsWrapper from '../SmsWrapper';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
 import MobilepushWrapper from '../MobilepushWrapper';
+import InAppWrapper from '../InAppWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
 import WechatWrapper from '../WeChat/Wrapper';
@@ -28,10 +29,6 @@ import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 import Zalo from '../Zalo';
 import MobilePushNew from '../MobilePushNew';
-import WebPush from '../WebPush';
-import DevicePreviewContent from '../WebPush/Create/preview/DevicePreviewContent';
-import { LAYOUT_MODE } from '../WebPush/Create/preview/constants';
-import { WEBPUSH_CONTENT_FIELDS, WEBPUSH_TEMPLATE_PATHS } from '../WebPush/constants';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -119,7 +116,11 @@ export function SlideBoxContent(props) {
       emailCreateMode,
       onMobilepushModeChange,
       mobilePushCreateMode,
+      onInAppEditorTypeChange,
+      inAppEditorType,
       templateStep,
+      inAppCreateMode,
+      onInAppModeChange,
       onEnterTemplateName,
       onRemoveTemplateName,
       onCreateNextStep,
@@ -168,7 +169,6 @@ export function SlideBoxContent(props) {
       handleTestAndPreview,
       handleCloseTestAndPreview,
       isTestAndPreviewMode,
-      supportedTags = [],
     } = props;
   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};
@@ -205,7 +205,6 @@ export function SlideBoxContent(props) {
   const isCreateRcs = isCreate && channel === constants.RCS;
   const isCreateMPush = isCreate && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = isCreate && channel === constants.CALL_TASK;
-  const isCreateWebPush = isCreate && channel === constants.WEBPUSH;
   let isEditSms = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;
@@ -213,14 +212,12 @@ export function SlideBoxContent(props) {
   let isEmailPreview = false;
   let isMpushPreview = false;
   let isInappPreview = false;
-  let isWebPushPreview = false;
   let isEditCallTask = false;
   let isEditMPush = false;
   let isEditFacebook = false;
   let isEditFTP = false;
   let isEditWhatsapp = false;
   let isEditInApp = false;
-  let isEditWebPush = false;
   let isEditRcs = false;
   let isEditZalo = false;
   const isEmailCreate = isCreate && channel === constants.EMAIL;
@@ -234,12 +231,10 @@ export function SlideBoxContent(props) {
     isEditFacebook = isEdit && channel === constants.FACEBOOK;
     isEditWhatsapp = isEdit && channel === constants.WHATSAPP;
     isEditRcs = isEdit && channel === constants.RCS;
-    isEditWebPush = isEdit && channel === constants.WEBPUSH;
     isPreview = slidBoxContent === 'preview' && [constants.SMS, constants.LINE, constants.WHATSAPP, constants.FACEBOOK, constants.VIBER, constants.RCS].includes(channel);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
     isInappPreview = slidBoxContent === 'preview' && channel === constants.INAPP;
-    isWebPushPreview = slidBoxContent === 'preview' && channel === constants.WEBPUSH;
     isEditFTP = isEdit && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
     isEditZalo = isEdit && channel?.toUpperCase() === constants.ZALO;
     isEditInApp = isEdit && channel === constants.INAPP;
@@ -487,30 +482,8 @@ export function SlideBoxContent(props) {
           templateData={templateData}
           channel={channel}
           forwardedTags={forwardedTags}
-      />
+        />
       )}
-      {isWebPushPreview && (() => {
-        const webpushContent = get(templateData, WEBPUSH_TEMPLATE_PATHS.CONTENT, {});
-        const notificationTitle = webpushContent?.[WEBPUSH_CONTENT_FIELDS.TITLE] || '';
-        const notificationBody = webpushContent?.[WEBPUSH_CONTENT_FIELDS.MESSAGE] || '';
-        const imageSrc = webpushContent?.[WEBPUSH_CONTENT_FIELDS.IMAGE] || '';
-        const brandIconSrc = webpushContent?.[WEBPUSH_CONTENT_FIELDS.BRAND_ICON] || '';
-        // Extract URL from onClickAction or use empty string
-        const url = webpushContent?.[WEBPUSH_CONTENT_FIELDS.ON_CLICK_ACTION]?.url || '';
-        
-        return (
-          <div className="webpush-preview-container">
-            <DevicePreviewContent
-              notificationTitle={notificationTitle}
-              notificationBody={notificationBody}
-              url={url}
-              imageSrc={imageSrc}
-              brandIconSrc={brandIconSrc}
-              layoutMode={LAYOUT_MODE.COMPACT}
-            />
-          </div>
-        );
-      })()}
 
       {
         (currentChannel === constants.WECHAT && !!slidBoxContent) && <WechatWrapper
@@ -661,44 +634,92 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
+        location={location}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
-      <Email
-        key="cretives-container-email-edit"
-        setIsLoadingContent={setIsLoadingContent}
-        location={{
-          pathname: `/email/edit`,
-          query: { type: 'embedded', module: 'library'},
-        }}
-        route={{ name: 'email' }}
-        isGetFormData={isGetFormData}
-        getFormdata={getFormData}
-        params={{ id: templateData._id }}
-        templateData={templateData}
-        getFormSubscriptionData={getFormData}
-        getDefaultTags={type}
-        isFullMode={isFullMode}
-        editor={editor}
-        cap={cap}
-        showTemplateName={showTemplateName}
-        onValidationFail={onValidationFail}
-        forwardedTags={forwardedTags}
-        selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}
-        moduleType={moduleType}
-        showLiquidErrorInFooter={showLiquidErrorInFooter}
-        eventContextTags={eventContextTags}
-        isLoyaltyModule={isLoyaltyModule}
-        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
-        handleTestAndPreview={handleTestAndPreview}
-        handleCloseTestAndPreview={handleCloseTestAndPreview}
-        isTestAndPreviewMode={(() => {
-          return isTestAndPreviewMode;
-        })()}
-      />
-        )}
+        (() => {
+          const supportCKEditor = commonUtil.hasSupportCKEditor();
+          // When supportCKEditor is true: Always use Email component (legacy flow)
+          if (supportCKEditor || templateData?.is_drag_drop) {
+            return (
+              <Email
+                key="cretives-container-email-edit"
+                setIsLoadingContent={setIsLoadingContent}
+                location={{
+                  pathname: `/email/edit`,
+                  query: { type: 'embedded', module: 'library'},
+                }}
+                route={{ name: 'email' }}
+                isGetFormData={isGetFormData}
+                getFormdata={getFormData}
+                params={{ id: templateData._id }}
+                templateData={templateData}
+                getFormSubscriptionData={getFormData}
+                getDefaultTags={type}
+                isFullMode={isFullMode}
+                editor={editor}
+                cap={cap}
+                showTemplateName={showTemplateName}
+                onValidationFail={onValidationFail}
+                forwardedTags={forwardedTags}
+                selectedOfferDetails={selectedOfferDetails}
+                onPreviewContentClicked={onPreviewContentClicked}
+                onTestContentClicked={onTestContentClicked}
+                moduleType={moduleType}
+                showLiquidErrorInFooter={showLiquidErrorInFooter}
+                eventContextTags={eventContextTags}
+                isLoyaltyModule={isLoyaltyModule}
+                showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+                handleTestAndPreview={handleTestAndPreview}
+                handleCloseTestAndPreview={handleCloseTestAndPreview}
+                isTestAndPreviewMode={isTestAndPreviewMode}
+              />
+            );
+          }     
+          // HTML template: Use EmailWrapper component (which uses EmailWithoutSaga)
+          return (
+            <EmailWrapper
+              key="cretives-container-email-edit-wrapper"
+              setIsLoadingContent={setIsLoadingContent}
+              onEmailModeChange={onEmailModeChange}
+              emailCreateMode="editor"
+              isGetFormData={isGetFormData}
+              getFormdata={getFormData}
+              templateData={templateData}
+              type={type}
+              step="createTemplateContent"
+              showNextStep={onCreateNextStep}
+              isFullMode={isFullMode}
+              editor={editor}
+              cap={cap}
+              onResetStep={onResetStep}
+              showTemplateName={showTemplateName}
+              onEnterTemplateName={onEnterTemplateName}
+              onRemoveTemplateName={onRemoveTemplateName}
+              onValidationFail={onValidationFail}
+              forwardedTags={forwardedTags}
+              selectedOfferDetails={selectedOfferDetails}
+              onPreviewContentClicked={onPreviewContentClicked}
+              onTestContentClicked={onTestContentClicked}
+              getCmsTemplatesInProgress={getCmsTemplatesInProgress}
+              moduleType={moduleType}
+              showLiquidErrorInFooter={showLiquidErrorInFooter}
+              eventContextTags={eventContextTags}
+              isLoyaltyModule={isLoyaltyModule}
+              showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+              handleTestAndPreview={handleTestAndPreview}
+              handleCloseTestAndPreview={handleCloseTestAndPreview}
+              isTestAndPreviewMode={isTestAndPreviewMode}
+              location={{
+                pathname: `/email/edit/${templateData._id}`,
+                query: { type: 'embedded', module: 'library', id: templateData._id },
+              }}
+              params={{ id: templateData._id }}
+            />
+          );
+        })()
+      )}
       {isEditMPush && (
         (isFullMode && !commonUtil.hasNewMobilePushFeatureEnabled()) || 
         (!isFullMode && isLoyaltyModule) || 
@@ -972,67 +993,73 @@ export function SlideBoxContent(props) {
         />
       )}
 
-      {isCreateInApp && (<InApp
-        isFullMode={isFullMode}
-        onCreateComplete={onCreateComplete}
-        handleClose={handleClose}
-        location={{
-          pathname: `/inapp/create`,
-          query,
-          search: '',
-        }}
-        getFormData={getFormData}
-        isGetFormData={isGetFormData}
-        templateData={templateData}
-        getDefaultTags={type}
-        eventContextTags={eventContextTags}
-        showLiquidErrorInFooter={showLiquidErrorInFooter}
-      />
-      )}
-
-      {isEditInApp && (<InApp
-        isFullMode={isFullMode}
-        templateData={templateData}
-        getFormData={getFormData}
-        getDefaultTags={type}
-        forwardedTags={forwardedTags}
-        onCreateComplete={onCreateComplete}
-        selectedOfferDetails={selectedOfferDetails}
-        eventContextTags={eventContextTags}
-        params={{
-          id: templateData._id,
-        }}
-        location={{
-          pathname: `/inapp/edit`,
-          query,
-          search: '',
-        }}
-        showLiquidErrorInFooter={showLiquidErrorInFooter}
+      {isCreateInApp && (
+        <InAppWrapper
+          key="creatives-inapp-wrapper"
+          date={new Date().getMilliseconds()}
+          setIsLoadingContent={setIsLoadingContent}
+          onInAppEditorTypeChange={onInAppEditorTypeChange}
+          inAppEditorType={inAppEditorType}
+          isGetFormData={isGetFormData}
+          getFormdata={getFormData}
+          templateData={templateData}
+          type={type}
+          step={templateStep}
+          showNextStep={onCreateNextStep}
+          isFullMode={isFullMode}
+          cap={cap}
+          onResetStep={onResetStep}
+          showTemplateName={showTemplateName}
+          onEnterTemplateName={onEnterTemplateName}
+          onRemoveTemplateName={onRemoveTemplateName}
+          onValidationFail={onValidationFail}
+          forwardedTags={forwardedTags}
+          selectedOfferDetails={selectedOfferDetails}
+          onPreviewContentClicked={onPreviewContentClicked}
+          onTestContentClicked={onTestContentClicked}
+          moduleType={moduleType}
+          showLiquidErrorInFooter={showLiquidErrorInFooter}
+          eventContextTags={eventContextTags}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          getDefaultTags={type}
+          onInAppModeChange={onInAppModeChange}
+          inAppCreateMode={inAppCreateMode}
         />
       )}
 
-      {(isCreateWebPush || isEditWebPush) && (
-        <WebPush
+      {isEditInApp && (
+        <InApp
+          key={`creatives-inapp-edit-${templateData._id || 'new'}`}
+          isEditInApp={true}
           isFullMode={isFullMode}
-          handleClose={handleClose}
-          onCreateComplete={onCreateComplete}
+          templateData={templateData}
           getFormData={getFormData}
-          isGetFormData={isGetFormData}
-          templateData={isEditWebPush ? templateData : undefined}
-          creativesMode={creativesMode}
-          params={isEditWebPush && templateData ? { id: templateData._id } : undefined}
-          location={{
-            pathname: isEditWebPush ? '/webpush/edit' : '/webpush/create',
-            query,
-            search: '',
-          }}
           getDefaultTags={type}
           forwardedTags={forwardedTags}
-          supportedTags={supportedTags}
+          onCreateComplete={onCreateComplete}
           selectedOfferDetails={selectedOfferDetails}
           eventContextTags={eventContextTags}
+          params={{
+            id: templateData._id,
+          }}
+          location={{
+            pathname: `/inapp/edit`,
+            query,
+            search: '',
+          }}
+          showLiquidErrorInFooter={showLiquidErrorInFooter}
+          setIsLoadingContent={setIsLoadingContent}
+          onInAppModeChange={onInAppModeChange}
+          inAppCreateMode={inAppCreateMode}
+          isGetFormData={isGetFormData}
+          showTemplateName={showTemplateName}
+          onValidationFail={onValidationFail}
+          type={type}
+          query={query}
         />
       )}
+
       {isCreateRcs && (<Rcs
         {...rcsCommonProps}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
@@ -1064,6 +1091,8 @@ SlideBoxContent.propTypes = {
   onSelectTemplate: PropTypes.func,
   onPreviewTemplate: PropTypes.func,
   templateData: PropTypes.object,
+  onInAppEditorTypeChange: PropTypes.func,
+  inAppEditorType: PropTypes.object,
   location: PropTypes.object,
   isGetFormData: PropTypes.bool,
   getFormData: PropTypes.func,
@@ -1089,7 +1118,6 @@ SlideBoxContent.propTypes = {
   onValidationFail: PropTypes.func,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
-  supportedTags: PropTypes.array,
   selectedOfferDetails: PropTypes.array,
   channelsToDisable: PropTypes.array,
   weChatTemplateType: PropTypes.string,
@@ -1105,7 +1133,7 @@ SlideBoxContent.propTypes = {
   onFTPSubmit: PropTypes.func,
   messageStrategy: PropTypes.string,
   fbAdManager: PropTypes.string,
-  showDisabledFBInfo: PropTypes.bool,
+  showDisabledFBInfo: PropTypes.boolean,
   orgUnitId: PropTypes.any,
   smsRegister: PropTypes.any,
   getCmsTemplatesInProgress: PropTypes.bool,

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -31,8 +31,9 @@ function SlideBoxFooter(props) {
     showTestAndPreviewButton,
     shouldShowDoneFooter,
     shouldShowContinueFooter,
+    isContinueButtonDisabled,
+    continueButtonLabel,
   } = props;
-
   return (
     <div className='template-footer-width'>
       {isLiquidValidationError && (<ErrorInfoNote errorMessages={errorMessages} currentTab={currentTab?.toUpperCase()} />)}
@@ -70,8 +71,11 @@ function SlideBoxFooter(props) {
           </div>
         )}
         {shouldShowContinueFooter() && (
-          <CapButton onClick={onCreateNextStep}>
-            <FormattedMessage {...messages.continue} />
+          <CapButton
+            onClick={onCreateNextStep}
+            disabled={isContinueButtonDisabled || false}
+          >
+            <FormattedMessage {...(continueButtonLabel || messages.continue)} />
           </CapButton>
         )}
         {slidBoxContent === PREVIEW && (
@@ -99,5 +103,7 @@ SlideBoxFooter.propTypes = {
   onTestAndPreview: PropTypes.func,
   isEmptyContent: PropTypes.bool,
   showTestAndPreviewButton: PropTypes.bool,
+  isContinueButtonDisabled: PropTypes.bool,
+  continueButtonLabel: PropTypes.object,
 };
 export default SlideBoxFooter;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -45,6 +45,7 @@ export function SlideBoxHeader(props) {
   const isZaloEdit = channel.toLowerCase() === ZALO && slidBoxContent === 'editTemplate';
   const zaloOverview = isZaloEdit && isFullMode;
   const whatsappOverview = isWhatsappEdit && isFullMode;
+  const shouldShowInAppEditHeader = isInAppEdit && !isFullMode;
   const headerMessage = whatsappOverview ? messages.whatsappOverview : zaloOverview ? messages.zaloOverview : messages.editMessageContent;
   const {
     whatsappTemplateName,
@@ -71,7 +72,6 @@ export function SlideBoxHeader(props) {
       rcs: <FormattedMessage {...messages.rcsCreative} />,
       zalo: <FormattedMessage {...messages.zaloTemplate} />,
       viber: <FormattedMessage {...messages.viberTemplate} />,
-      webpush: <FormattedMessage {...messages.webPushTemplate} />,
     };
     return labels[currentChannel.toLowerCase()];
   };
@@ -110,7 +110,7 @@ export function SlideBoxHeader(props) {
             }
           />
         )}
-      {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
+      {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (shouldShowInAppEditHeader || !isInAppCreate) && (
         <CapHeader
           className="support-video-elements"
           title={<FormattedMessage {...headerMessage} values={{ channel: getChannelLabel(channel) }} />}

package/v2Containers/CreativesContainer/constants.js

@@ -21,11 +21,10 @@ export const PUSH = "PUSH";
 export const RCS = "RCS";
 export const ZALO = "ZALO";
 export const INAPP = "INAPP";
-export const WEBPUSH = "WEBPUSH";
-export const WEBPUSH_BRAND_ICON = "WEBPUSH_BRAND_ICON";
 export const PREVIEW = "preview";
 export const EDIT_TEMPLATE = "editTemplate";
 export const JOURNEY = "journey";
+export const HTML = "HTML";
 
 export const LOYALTY_SUPPORTED_ACTION = "SEND_COMMUNICATION_ACTION";