@capillarytech/creatives-library 8.0.234 → 8.0.236-alpha.0

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';
@@ -115,7 +116,11 @@ export function SlideBoxContent(props) {
       emailCreateMode,
       onMobilepushModeChange,
       mobilePushCreateMode,
+      onInAppEditorTypeChange,
+      inAppEditorType,
       templateStep,
+      inAppCreateMode,
+      onInAppModeChange,
       onEnterTemplateName,
       onRemoveTemplateName,
       onCreateNextStep,
@@ -940,42 +945,70 @@ 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}
-      />
+      {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}
+        />
       )}
 
-      {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}
+      {isEditInApp && (
+        <InApp
+          key={`creatives-inapp-edit-${templateData._id || 'new'}`}
+          isEditInApp={true}
+          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}
+          setIsLoadingContent={setIsLoadingContent}
+          onInAppModeChange={onInAppModeChange}
+          inAppCreateMode={inAppCreateMode}
+          isGetFormData={isGetFormData}
+          showTemplateName={showTemplateName}
+          onValidationFail={onValidationFail}
+          type={type}
+          query={query}
         />
       )}
 
@@ -1010,6 +1043,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,

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,
@@ -109,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

@@ -24,6 +24,7 @@ export const INAPP = "INAPP";
 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";
 

package/v2Containers/CreativesContainer/index.js

@@ -95,6 +95,7 @@ export class Creatives extends React.Component {
       currentChannel: this.props.channel || 'sms',
       weChatTemplateType: '',
       weChatMaptemplateStep: 0,
+      inAppEditorType: null,
       isLiquidValidationError: false,
       errorMessages: [],
       liquidErrorMessage: {
@@ -261,6 +262,10 @@ export class Creatives extends React.Component {
     this.setState({ inAppCreateMode: mode });
   }
 
+  onInAppEditorTypeChange = (editorType) => {
+    this.setState({ inAppEditorType: editorType });
+  }
+
   onMobilepushModeChange = (mode) => {
     this.setState({ mobilePushCreateMode: mode });
   }
@@ -439,8 +444,22 @@ export class Creatives extends React.Component {
             versions: {
               base: {
                 content: {
-                  ANDROID: templateData?.androidContent,
-                  IOS: templateData?.iosContent,
+                  ANDROID: templateData?.androidContent?.type === constants.HTML ? {
+                    type: templateData?.androidContent?.type,
+                    bodyType: templateData?.androidContent?.bodyType,
+                    deviceType: constants.ANDROID,
+                    beeHtml: { value: templateData?.androidContent?.message },
+                    beeJson: templateData?.androidContent?.expandableDetails?.message,
+                    isBEEeditor: true,
+                  } : templateData?.androidContent,
+                  IOS: templateData?.iosContent?.type === constants.HTML ? {
+                    type: templateData?.iosContent?.type,
+                    bodyType: templateData?.iosContent?.bodyType,
+                    deviceType: constants.IOS,
+                    beeHtml: { value: templateData?.iosContent?.message },
+                    beeJson: templateData?.iosContent?.expandableDetails?.message,
+                    isBEEeditor: true,
+                  } : templateData?.iosContent,
                 },
               },
             },
@@ -857,9 +876,22 @@ export class Creatives extends React.Component {
             if (channel === constants.MOBILE_PUSH && androidContent?.expandableDetails?.carouselData?.length) {
               androidContent.expandableDetails = this.getMobilePushCarouselData({...androidContent?.expandableDetails});
             }
-            templateData.androidContent = androidContent;
-            templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
-            templateData.androidContent.deviceType = constants.ANDROID;
+            if (androidContent?.isBEEeditor && androidContent?.beeHtml?.value) {
+              templateData.androidContent = {};
+              templateData.androidContent.type = constants.HTML;
+              templateData.androidContent.message = androidContent?.beeHtml?.value || '';
+              templateData.androidContent.title = 'bee free template';
+              templateData.androidContent.bodyType = androidContent?.bodyType;
+              templateData.androidContent.deviceType = constants.ANDROID;
+              templateData.androidContent.expandableDetails = {
+                style: 'BIG_HTML',
+                message: androidContent?.beeJson || '',
+              };
+            } else if (!androidContent?.isBEEeditor) {
+              templateData.androidContent = androidContent;
+              templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
+              templateData.androidContent.deviceType = constants.ANDROID;
+            }
           }
           const iosContent = channel === constants.INAPP ? get(channelTemplate, 'versions.base.content.IOS') : get(channelTemplate, 'versions.base.IOS');
           if (!isEmpty(iosContent)) {
@@ -879,9 +911,22 @@ export class Creatives extends React.Component {
             if (channel === constants.MOBILE_PUSH && iosContent?.expandableDetails?.carouselData?.length) {
               iosContent.expandableDetails = this.getMobilePushCarouselData({...iosContent?.expandableDetails});
             }
-            templateData.iosContent = iosContent;
-            templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
-            templateData.iosContent.deviceType = constants.IOS;
+            if (iosContent?.isBEEeditor && iosContent?.beeHtml?.value) {
+              templateData.iosContent = {};
+              templateData.iosContent.type = constants.HTML;
+              templateData.iosContent.message = iosContent?.beeHtml?.value || '';
+              templateData.iosContent.title = 'bee free template';
+              templateData.iosContent.bodyType = iosContent?.bodyType;
+              templateData.iosContent.deviceType = constants.IOS;
+              templateData.iosContent.expandableDetails = {
+                style: 'BIG_HTML',
+                message: iosContent?.beeJson || '',
+              };
+            } else if (!iosContent?.isBEEeditor) {
+              templateData.iosContent = iosContent;
+              templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
+              templateData.iosContent.deviceType = constants.IOS;
+            }
           }
           templateData.messageSubject = channelTemplate?.name ? channelTemplate?.name : "messageSubject";
         }
@@ -1284,6 +1329,9 @@ export class Creatives extends React.Component {
       if (prevState.currentChannel.toUpperCase() === constants.EMAIL) {
         newState = { ...newState, emailCreateMode: null };
       }
+      if (prevState.currentChannel.toUpperCase() === constants.INAPP) {
+        newState = { ...newState, inAppEditorType: null };
+      }
       return newState;
     });
   }
@@ -1329,7 +1377,7 @@ export class Creatives extends React.Component {
   shouldShowFooter = () => {
     const { isFullMode } = this.props;
     const {
-      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData,
+      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData, inAppCreateMode,
     } = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1372,6 +1420,7 @@ export class Creatives extends React.Component {
       showFooter = true;
     }
 
+
     if (showFooter) {
       if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent')
         || ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
@@ -1394,7 +1443,7 @@ export class Creatives extends React.Component {
 
   shouldShowDoneFooter = () => {
     const {
-      slidBoxContent, templateStep, currentChannel, templateData,
+      slidBoxContent, templateStep, currentChannel, templateData, inAppCreateMode,
     } = this.state;
     const { isFullMode } = this.props;
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1487,7 +1536,7 @@ export class Creatives extends React.Component {
 
   shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
     const {
-      slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppCreateMode, weChatTemplateType,
+      slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppEditorType, weChatTemplateType,
     } = this.state;
     let isShowContinueFooter = false;
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1502,8 +1551,6 @@ export class Creatives extends React.Component {
       isShowContinueFooter = !isEmpty(mobilePushCreateMode) && currentStep === "modeSelection";
     } else if (currentChannel.toUpperCase() === constants.WECHAT) {
       isShowContinueFooter = !isEmpty(weChatTemplateType) && currentStep === "modeSelection";
-    } else if (currentChannel.toUpperCase() === constants.INAPP) {
-      isShowContinueFooter = !isEmpty(inAppCreateMode) && currentChannel === "modeSelection";
     }
 
     return isShowContinueFooter;
@@ -1549,6 +1596,7 @@ export class Creatives extends React.Component {
       activeFormBuilderTab,
       showTestAndPreviewSlidebox,
       isTestAndPreviewMode,
+      inAppEditorType,
     } = this.state;
     const {
       isFullMode,
@@ -1632,6 +1680,8 @@ export class Creatives extends React.Component {
               onChannelChange={this.onChannelChange}
               onEmailModeChange={this.onEmailModeChange}//used when create is clicked in email
               emailCreateMode={emailCreateMode}// upload zip || use editor are values
+              onInAppEditorTypeChange={this.onInAppEditorTypeChange}//used when create is clicked in inapp
+              inAppEditorType={inAppEditorType}// htmlEditor || dragDropEditor are values
               templateStep={this.creativesTemplateSteps[templateStep]}
               onCreateNextStep={this.onCreateNextStep}
               onEnterTemplateName={this.onEnterTemplateName}
@@ -1641,6 +1691,8 @@ export class Creatives extends React.Component {
               cap={cap}
               setIsLoadingContent={this.setIsLoadingContent}
               onMobilepushModeChange={this.onMobilepushModeChange}
+              inAppCreateMode={this.state.inAppCreateMode}
+              onInAppModeChange={this.onInAppModeChange}
               mobilePushCreateMode={mobilePushCreateMode}
               showTemplateName={this.showTemplateName}
               onValidationFail={this.onValidationFail}

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -1101,25 +1101,17 @@ exports[`Test SlideBoxContent container Should render correct component for what
 
 exports[`Test SlideBoxContent container Should render correct component for whatsapp channel create mode 2`] = `
 <SlideBoxContent__CreativesWrapper>
-  <ForwardRef
+  <Connect(Connect(UserIsAuthenticated(InjectIntl(CreativesCommon))))
+    date={0}
     getDefaultTags=""
-    location={
-      Object {
-        "pathname": "/inapp/create",
-        "query": Object {
-          "isEditFromCampaigns": undefined,
-          "module": "library",
-          "type": "embedded",
-        },
-        "search": "",
-      }
-    }
+    key="creatives-inapp-wrapper"
     onCreateComplete={[MockFunction]}
     templateData={
       Object {
         "mode": "create",
       }
     }
+    type=""
   />
 </SlideBoxContent__CreativesWrapper>
 `;

package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -17,6 +17,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -32,6 +33,8 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onInAppEditorTypeChange={[Function]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -103,6 +106,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -118,6 +122,8 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onInAppEditorTypeChange={[Function]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -189,6 +195,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -204,6 +211,8 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onInAppEditorTypeChange={[Function]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -287,6 +296,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -302,6 +312,8 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onInAppEditorTypeChange={[Function]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -385,6 +397,7 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         handleCloseTestAndPreview={[Function]}
         handleTestAndPreview={[Function]}
         hostName=""
+        inAppEditorType={null}
         isTestAndPreviewMode={false}
         loyaltyMetaData={
           Object {
@@ -400,6 +413,8 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onInAppEditorTypeChange={[Function]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}