@capillarytech/creatives-library 7.17.198 → 7.17.200

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.198",
+  "version": "7.17.200",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/commonUtils.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { EMBEDDED } from '../v2Containers/Whatsapp/constants';
 import { EDIT, PREVIEW } from '../v2Containers/App/constants';
 
@@ -24,9 +24,5 @@ export const addBaseToTemplate = (template) => {
   return template;
 };
 
-export const isEmbeddedEditOrPreview = (props) => {
-  const queryType = String(get(props, 'location.query.type', '')).toLowerCase();
-  const creativesMode = String(get(props, 'creativesMode', '')).toLowerCase();
-  return queryType === EMBEDDED.toLowerCase() &&
-         (creativesMode === EDIT.toLowerCase() || creativesMode === PREVIEW.toLowerCase());
-};
+export const isEmbeddedEditOrPreview = (queryType, creativesMode) => queryType === EMBEDDED &&
+  [EDIT, PREVIEW].include(creativesMode);

package/utils/tests/commonUtil.test.js

@@ -5,6 +5,7 @@ import * as mockdata from "./common.mockdata";
 import { addBaseToTemplate, isEmbeddedEditOrPreview } from "../commonUtils";
 import { EMBEDDED, FULL } from "../../v2Containers/Whatsapp/constants";
 import { CREATE, EDIT, PREVIEW } from "../../v2Containers/App/constants";
+import { query } from "express";
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
   Auth: {
@@ -89,51 +90,26 @@ describe('isEmbeddedEditOrPreview', () => {
   });
 
   it('should return true when query type is embedded and creatives mode is edit', () => {
-    const props = {
-      location: {
-        query: {
-          type: EMBEDDED,
-        },
-      },
-      creativesMode: EDIT,
-    };
-    expect(isEmbeddedEditOrPreview(props)).toBe(true);
+    const queryType = EMBEDDED;
+    const creativesMode = EDIT;
+    expect(isEmbeddedEditOrPreview(queryType, creativesMode)).toBe(true);
   });
 
   it('should return true when query type is embedded and creatives mode is preview', () => {
-
-    const props = {
-      location: {
-        query: {
-          type: EMBEDDED,
-        },
-      },
-      creativesMode: PREVIEW,
-    };
-    expect(isEmbeddedEditOrPreview(props)).toBe(true);
+    const queryType = EMBEDDED;
+    const creativesMode = PREVIEW;
+    expect(isEmbeddedEditOrPreview(queryType, creativesMode)).toBe(true);
   });
 
   it('should return false when query type is not embedded', () => {
-    const props = {
-      location: {
-        query: {
-          type: FULL,
-        },
-      },
-      creativesMode: EDIT,
-    };
-    expect(isEmbeddedEditOrPreview(props)).toBe(false);
+    const queryType = FULL;
+    const creativesMode = PREVIEW;
+    expect(isEmbeddedEditOrPreview(queryType, creativesMode)).toBe(false);
   });
 
   it('should return false when creatives mode is not edit or preview', () => {
-    const props = {
-      location: {
-        query: {
-          type: EMBEDDED,
-        },
-      },
-      creativesMode: CREATE,
-    };
-    expect(isEmbeddedEditOrPreview(props)).toBe(false);
+    const queryType = EMBEDDED;
+    const creativesMode = CREATE;
+    expect(isEmbeddedEditOrPreview(queryType, creativesMode)).toBe(false);
   });
 });

package/v2Containers/CreativesContainer/index.js

@@ -1312,7 +1312,7 @@ export class Creatives extends React.Component {
               getCmsTemplatesInProgress={this.props.Templates?.getCmsTemplatesInProgress}
               moduleType={this.props.messageDetails?.type}
               showLiquidErrorInFooter={this.showLiquidErrorInFooter}
-              creativesMode={creativesMode}
+              creativesMode={creativesMode} // An existing prop that we're using here. Required to ensure correct account details in Edit or Preview in case of Embedded mode.
           />
           }
           footer={this.shouldShowFooter() &&

package/v2Containers/MobilePush/Edit/index.js

@@ -108,7 +108,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.startValidation();
     }
     let selectedWeChatAccount = {};
-    if (isEmbeddedEditOrPreview(this.props)) {
+    const queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
+    const creativesMode = String(get(this.props, 'creativesMode', ''))?.toLowerCase();
+    if (isEmbeddedEditOrPreview(queryType, creativesMode)) {
       selectedWeChatAccount = !_.isEmpty(this.props.Edit.selectedWeChatAccount)
         ? this.props.Edit.selectedWeChatAccount
         : nextProps.Edit.selectedWeChatAccount;
@@ -121,7 +123,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     // Check if the query type is 'embedded' and the creatives mode is either 'edit' or 'preview'. Also, ensure that the selected WeChat account ID is not equal to the account ID in the template details.
    // If all conditions are met, set the mobile push account options using the provided weCrmAccounts and the account ID from templateData.
-    if (isEmbeddedEditOrPreview(this.props) && !_.isEqual(this.props.Edit.selectedWeChatAccount?.id, this.props.Edit.templateDetails?.definition?.accountId)) {
+    if (isEmbeddedEditOrPreview(queryType, creativesMode) && !_.isEqual(this.props.Edit.selectedWeChatAccount?.id, this.props.Edit.templateDetails?.definition?.accountId)) {
       this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts, get(this.props, "templateData.definition.accountId"));
     }
     if (!_.isEmpty(nextProps.Edit.selectedWeChatAccount) && !_.isEqual(this.props.Edit.selectedWeChatAccount, nextProps.Edit.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && this.props.location.query.module === "loyalty") {
@@ -228,19 +230,22 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   getWeChatAccount = () => {
+    const { location, creativesMode, Edit: EditProps, Templates } = this.props || {};
+    const { query } = location || {};
+    const { selectedWeChatAccount: editSelectedWeChatAccount } = EditProps || {};
+    const { selectedWeChatAccount: templateSelectedWeChatAccount } = Templates || {};
+    const queryType = String(get(query, 'type', '')).toLowerCase();
+    const mode = String(creativesMode).toLowerCase();
     let selectedWeChatAccount = {};
-
-    if (isEmbeddedEditOrPreview(this.props)) {
-      if (!_.isEmpty(this.props.Edit.selectedWeChatAccount)) {
-        selectedWeChatAccount = this.props.Edit.selectedWeChatAccount;
-      } else {
-        selectedWeChatAccount = this.props.Templates.selectedWeChatAccount;
-      }
-    } else if (!_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
-      selectedWeChatAccount = this.props.Templates.selectedWeChatAccount;
+    if (isEmbeddedEditOrPreview(queryType, mode)) {
+      selectedWeChatAccount = !_.isEmpty(editSelectedWeChatAccount)
+        ? editSelectedWeChatAccount
+        : templateSelectedWeChatAccount;
+    } else if (!_.isEmpty(templateSelectedWeChatAccount)) {
+      selectedWeChatAccount = templateSelectedWeChatAccount;
     }
     return selectedWeChatAccount;
-  }
+  };
 
   onLinkTypeChange = (eventTriggered, formData, field, currentTab, inputSchema) => {
     const selectedWeChatAccount = this.getWeChatAccount();
@@ -375,8 +380,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     };
     obj.type = 'MOBILEPUSH';
     obj.name = formData['template-name'];
-
-    if (isEmbeddedEditOrPreview(this.props)) {
+    const queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
+    const creativesMode = String(get(this.props, 'creativesMode', ''))?.toLowerCase();
+    if (isEmbeddedEditOrPreview(queryType, creativesMode)) {
       if (get(this.props, 'Edit.selectedWeChatAccount.sourceTypeName') === MAPP_SDK) {
         obj.definition = this.createDefinition(selectedWeChatAccount);
       } else {
@@ -1518,10 +1524,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
           temp.options = this.state.templateOptions ? this.state.accountsOptions : [];
         }
         if (temp.id === "mobile-push-preview") {
-          if (isEmbeddedEditOrPreview(this.props) && this.props.Edit.selectedWeChatAccount && !_.isEmpty(this.props.Edit.selectedWeChatAccount)) {
-            temp.content.appName = this.props.Edit.selectedWeChatAccount.name;
-          } else if (this.props.Templates.selectedWeChatAccount && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
-            temp.content.appName = this.props.Templates.selectedWeChatAccount.name;
+          const { location, creativesMode, Edit: EditProps, Templates } = this.props || {};
+          const { query } = location || {};
+          const { selectedWeChatAccount: editSelectedWeChatAccount } = EditProps || {};
+          const { selectedWeChatAccount: templateSelectedWeChatAccount } = Templates || {}; 
+          const queryType = String(get(query, 'type', ''))?.toLowerCase();
+          const mode = String(creativesMode).toLowerCase();
+          if (isEmbeddedEditOrPreview(queryType, mode) && !_.isEmpty(editSelectedWeChatAccount)) {
+            temp.content.appName = editSelectedWeChatAccount?.name;
+          } else if (!_.isEmpty(templateSelectedWeChatAccount)) {
+            temp.content.appName = templateSelectedWeChatAccount?.name;
           }
         }
         _.forEach(col.supportedEvents, (event) => {
@@ -1744,7 +1756,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         if (!_.isEmpty(actionText)) {
           this.deleteSecondaryCtaIos();
         }
-        if (isEmbeddedEditOrPreview(this.props)) {
+        const queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
+        const creativesMode = String(get(this.props, 'creativesMode', ''))?.toLowerCase();
+        if (isEmbeddedEditOrPreview(queryType, creativesMode)) {
           this.props.actions.getIosCtas(this.props.Edit.selectedWeChatAccount.sourceAccountIdentifier);
         } else {
           this.props.actions.getIosCtas(this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier);