@capillarytech/creatives-library 7.17.197 → 7.17.199

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.197",
+  "version": "7.17.199",
   "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/get';
+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,6 @@ export const addBaseToTemplate = (template) => {
   }
   return template;
 };
+
+export const isEmbeddedEditOrPreview = (queryType, creativesMode) => queryType === EMBEDDED.toLowerCase() &&
+         (creativesMode === EDIT.toLowerCase() || creativesMode === PREVIEW.toLowerCase());

package/utils/tests/commonUtil.test.js

@@ -1,7 +1,11 @@
 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";
+import { query } from "express";
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
   Auth: {
@@ -12,6 +16,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 +83,33 @@ 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 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 queryType = EMBEDDED;
+    const creativesMode = PREVIEW;
+    expect(isEmbeddedEditOrPreview(queryType, creativesMode)).toBe(true);
+  });
+
+  it('should return false when query type is not embedded', () => {
+    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 queryType = EMBEDDED;
+    const creativesMode = CREATE;
+    expect(isEmbeddedEditOrPreview(queryType, creativesMode)).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} // 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() &&
             <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,25 @@ 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 = {};
+    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;
+    } 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(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") {
       const params = {
         name: '',
@@ -213,8 +229,22 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
   };
 
+  getWeChatAccount = () => {
+    let selectedWeChatAccount = {};
+    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
+        : 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 +360,41 @@ 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,
-      };
+    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 {
+        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 +605,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 +1004,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 +1132,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 +1232,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 +1519,14 @@ 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") {
+          const queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
+          const creativesMode = String(get(this.props, 'creativesMode', ''))?.toLowerCase();
+          if (isEmbeddedEditOrPreview(queryType, creativesMode) && 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 +1611,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 +1666,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 +1699,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 +1748,14 @@ 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
+        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);
+        }
+        //TODO: need to get license code of accoutn and send as arg
       } else {
         this.deleteSecondaryCtaIos(() => { // oncick of change
           this.setState({showIosCtaTable: true});
@@ -1953,6 +2010,7 @@ Edit.propTypes = {
   onValidationFail: PropTypes.bool,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
+  creativesMode: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({