@capillarytech/creatives-library 7.17.197 → 7.17.198

package/package.json

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

package/utils/commonUtils.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { get } from 'lodash';
+import { EMBEDDED } from '../v2Containers/Whatsapp/constants';
+import { EDIT, PREVIEW } from '../v2Containers/App/constants';
 
 export const apiMessageFormatHandler = (id, fallback) => (
-    <FormattedMessage id={id} defaultMessage={fallback} />
+  <FormattedMessage id={id} defaultMessage={fallback} />
 );
 
 export const addBaseToTemplate = (template) => {
@@ -20,3 +23,10 @@ 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());
+};

package/utils/tests/commonUtil.test.js

@@ -1,7 +1,10 @@
 import "@testing-library/jest-dom";
+import get from 'lodash/get';
 import { getTreeStructuredTags } from "../common";
 import * as mockdata from "./common.mockdata";
-import { addBaseToTemplate } from "../commonUtils";
+import { addBaseToTemplate, isEmbeddedEditOrPreview } from "../commonUtils";
+import { EMBEDDED, FULL } from "../../v2Containers/Whatsapp/constants";
+import { CREATE, EDIT, PREVIEW } from "../../v2Containers/App/constants";
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
   Auth: {
@@ -12,6 +15,8 @@ jest.mock('@capillarytech/cap-ui-utils', () => ({
   },
 }));
 
+jest.mock('lodash/get');
+
 describe("common utils test", () => {
   it("test for getTreeStructuredTags when tagsList is not empty", () => {
     expect(getTreeStructuredTags({tagsList: mockdata.tagsList})).toEqual(mockdata.output2);
@@ -77,3 +82,58 @@ describe('addBaseToTemplate', () => {
     expect(template).toEqual(originalTemplateCopy);
   });
 });
+
+describe('isEmbeddedEditOrPreview', () => {
+  beforeEach(() => {
+    get.mockClear();
+  });
+
+  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);
+  });
+
+  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);
+  });
+
+  it('should return false when query type is not embedded', () => {
+    const props = {
+      location: {
+        query: {
+          type: FULL,
+        },
+      },
+      creativesMode: EDIT,
+    };
+    expect(isEmbeddedEditOrPreview(props)).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);
+  });
+});

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -154,6 +154,7 @@ export function SlideBoxContent(props) {
       getCmsTemplatesInProgress = false,
       moduleType,
       showLiquidErrorInFooter,
+      creativesMode,
     } = 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};
@@ -655,6 +656,7 @@ export function SlideBoxContent(props) {
           onTestContentClicked={onTestContentClicked}
           type={type}
           hideTestAndPreviewBtn={hideTestAndPreviewBtn}
+          creativesMode={creativesMode}
         />
         }
       {isCreateMPush &&
@@ -921,5 +923,6 @@ SlideBoxContent.propTypes = {
   getCmsTemplatesInProgress: PropTypes.bool,
   moduleType: PropTypes.string,
   showLiquidErrorInFooter: PropTypes.bool,
+  creativesMode: PropTypes.string,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -1312,7 +1312,8 @@ export class Creatives extends React.Component {
               getCmsTemplatesInProgress={this.props.Templates?.getCmsTemplatesInProgress}
               moduleType={this.props.messageDetails?.type}
               showLiquidErrorInFooter={this.showLiquidErrorInFooter}
-            />
+              creativesMode={creativesMode}
+          />
           }
           footer={this.shouldShowFooter() &&
             <SlideBoxFooter

package/v2Containers/MobilePush/Edit/constants.js

@@ -33,3 +33,5 @@ export const GET_WECRM_ACCOUNTS_FAILURE = "app/v2Containers/MobilePush/GET_WECRM
 export const GET_MOBILEPUSH_TEMPLATES_LIST_REQUEST = 'app/v2Containers/WeChat/GET_MOBILEPUSH_TEMPLATES_LIST_REQUEST';
 export const GET_MOBILEPUSH_TEMPLATES_LIST_SUCCESS = 'app/v2Containers/WeChat/GET_MOBILEPUSH_TEMPLATES_LIST_SUCCESS';
 export const GET_MOBILEPUSH_TEMPLATES_LIST_FAILURE = 'app/v2Containers/WeChat/GET_MOBILEPUSH_TEMPLATES_LIST_FAILURE';
+
+export const MAPP_SDK = 'MAPP_SDK';

package/v2Containers/MobilePush/Edit/index.js

@@ -34,6 +34,8 @@ import { GA } from '@capillarytech/cap-ui-utils';
 import { EDIT, TRACK_EDIT_MPUSH } from '../../App/constants';
 import { MOBILE_PUSH } from '../../CreativesContainer/constants';
 import { getCdnUrl } from '../../../utils/cdnTransformation';
+import { MAPP_SDK } from './constants';
+import { isEmbeddedEditOrPreview } from '../../../utils/commonUtils';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -105,11 +107,23 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount :
-    (!_.isEmpty(this.props.Edit.selectedWeChatAccount) ? this.props.Edit.selectedWeChatAccount : nextProps.Edit.selectedWeChatAccount));
+    let selectedWeChatAccount = {};
+    if (isEmbeddedEditOrPreview(this.props)) {
+      selectedWeChatAccount = !_.isEmpty(this.props.Edit.selectedWeChatAccount)
+        ? this.props.Edit.selectedWeChatAccount
+        : nextProps.Edit.selectedWeChatAccount;
+    } else if (!_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
+      selectedWeChatAccount = this.props.Templates.selectedWeChatAccount;
+    }
+
     if (this.props.location.query.type === 'embedded' && !nextProps.Edit.fetchingWeCrmAccounts && !_.isEqual(this.props.Edit.weCrmAccounts, nextProps.Edit.weCrmAccounts) && (!selectedWeChatAccount || _.isEmpty(selectedWeChatAccount))) {
       this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts, get(this.props, "templateData.definition.accountId"));
     }
+    // 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)) {
+      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") {
       const params = {
         name: '',
@@ -213,8 +227,23 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
   };
 
+  getWeChatAccount = () => {
+    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;
+    }
+    return selectedWeChatAccount;
+  }
+
   onLinkTypeChange = (eventTriggered, formData, field, currentTab, inputSchema) => {
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const selectedWeChatAccount = this.getWeChatAccount();
     const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
     const tabIndex = currentTab || this.state.currentTab;
     const inputFields = get(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`);
@@ -330,27 +359,40 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({formData, accountsOptions: accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id}))});
   };
 
+  createDefinition = (account) => ({
+    accountId: account?.id,
+    licenseCode: account?.sourceAccountIdentifier,
+    gatewayId: account?.configs?.gatewayId,
+    gatewayAccountId: account?.configs?.gatewayAccountId,
+    sourceType: account?.sourceTypeName,
+  });
+
   getTransformedData = (formData) => {
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const selectedWeChatAccount = this.getWeChatAccount();
     const obj = _.cloneDeep(this.state.editData);
     obj.versions = {
       base: {},
     };
     obj.type = 'MOBILEPUSH';
     obj.name = formData['template-name'];
-    if(this.props?.Templates?.selectedWeChatAccount?.sourceTypeName === 'MAPP_SDK') {
-      obj.definition = {
-        accountId: selectedWeChatAccount.id,
-        licenseCode: selectedWeChatAccount.sourceAccountIdentifier,
-        gatewayId: selectedWeChatAccount.configs.gatewayId,
-        gatewayAccountId: selectedWeChatAccount.configs.gatewayAccountId,
-        sourceType: selectedWeChatAccount.sourceTypeName,
-      };
+
+    if (isEmbeddedEditOrPreview(this.props)) {
+      if (get(this.props, 'Edit.selectedWeChatAccount.sourceTypeName') === MAPP_SDK) {
+        obj.definition = this.createDefinition(selectedWeChatAccount);
+      } else {
+        obj.definition = {
+          accountId: selectedWeChatAccount?.id,
+          licenseCode: selectedWeChatAccount?.sourceAccountIdentifier,
+          sourceType: selectedWeChatAccount?.sourceTypeName,
+        };
+      }
+    } else if (get(this.props, 'Templates.selectedWeChatAccount.sourceTypeName') === MAPP_SDK) {
+      obj.definition = this.createDefinition(selectedWeChatAccount);
     } else {
       obj.definition = {
         accountId: selectedWeChatAccount?.id,
-        licenseCode: selectedWeChatAccount.sourceAccountIdentifier,
-        sourceType: selectedWeChatAccount.sourceTypeName,
+        licenseCode: selectedWeChatAccount?.sourceAccountIdentifier,
+        sourceType: selectedWeChatAccount?.sourceTypeName,
       };
     }
     if (this.props.location.query && this.props.location.query.module !== 'dvs') {
@@ -561,7 +603,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   getLinkName = (link) => {
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const selectedWeChatAccount = this.getWeChatAccount();
     const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
     const deepLinkOptions = _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (l) => l.link === link);
     if (deepLinkOptions[0]) {
@@ -960,7 +1002,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   showSelectedIosCta = (inputSchema, field, tab, selectedConfig) => {
     const currentTab = tab || this.state.currentTab;
     const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const selectedWeChatAccount = this.getWeChatAccount();
     const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
     const deepLinkOptions = _.map(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (link) => ({label: link.name, value: link.link, title: link.link }) );
 
@@ -1088,7 +1130,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   deletePrimaryCTA = (event) => {
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const selectedWeChatAccount = this.getWeChatAccount();
     const id = event.currentTarget.id;
     const schema = _.cloneDeep(this.state.schema);
     // const eventsMap = _.cloneDeep(this.state.eventsMap);
@@ -1188,7 +1230,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   deleteSecondaryCTA = (event) => {
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const selectedWeChatAccount = this.getWeChatAccount();
     const id = event.currentTarget.id;
     if (id === "secondary-cta-0-delete") {
       const secCta2 = document.getElementById("secondary-cta-1-delete");
@@ -1475,8 +1517,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         if (this.props.location.query.type === 'embedded' && temp.id === "mobilepush-accounts" ) {
           temp.options = this.state.templateOptions ? this.state.accountsOptions : [];
         }
-        if (temp.id === "mobile-push-preview" && this.props.Templates.selectedWeChatAccount && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
-          temp.content.appName = this.props.Templates.selectedWeChatAccount.name;
+        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;
+          }
         }
         _.forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
@@ -1561,7 +1607,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   showCtaKeys = (eventTriggered, formData, field, tabIndex, schemaInput) => {
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const selectedWeChatAccount = this.getWeChatAccount();
     const currentTab = tabIndex || this.state.currentTab;
     const schema = _.cloneDeep(schemaInput || this.state.schema);
     const eventsMap = _.cloneDeep(this.state.eventsMap);
@@ -1616,7 +1662,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     return schema;
   };
   addPrimaryCta = (flag, formData, field, inputSchema, currentTab) => {
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const selectedWeChatAccount = this.getWeChatAccount();
     const id = field.id;
     const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
     const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
@@ -1649,7 +1695,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const tabIndex = currentTab || this.state.currentTab;
     const formDataCopy = cloneDeep(formData);
     const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const selectedWeChatAccount = this.getWeChatAccount();
     const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
     const deepLinkOptions = selectedWeChatAccount ? _.map(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
     const inputFields = get(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`);
@@ -1698,7 +1744,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         if (!_.isEmpty(actionText)) {
           this.deleteSecondaryCtaIos();
         }
-        this.props.actions.getIosCtas(this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier);//TODO: need to get license code of accoutn and send as arg
+        if (isEmbeddedEditOrPreview(this.props)) {
+          this.props.actions.getIosCtas(this.props.Edit.selectedWeChatAccount.sourceAccountIdentifier);
+        } else {
+          this.props.actions.getIosCtas(this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier);
+        }
+        //TODO: need to get license code of accoutn and send as arg
       } else {
         this.deleteSecondaryCtaIos(() => { // oncick of change
           this.setState({showIosCtaTable: true});
@@ -1953,6 +2004,7 @@ Edit.propTypes = {
   onValidationFail: PropTypes.bool,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
+  creativesMode: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({