@capillarytech/creatives-library 8.0.9 → 8.0.11

package/v2Containers/MobilePush/Edit/index.js

@@ -39,6 +39,9 @@ import injectReducer from '../../../utils/injectReducer';
 import { v2MobilePushEditSagas } from './sagas';
 import v2MobilePushEditReducer from './reducer';
 import * as globalActions from '../../Cap/actions';
+import { MAPP_SDK } from './constants';
+import { isEmbeddedEditOrPreview } from '../../../utils/commonUtils';
+
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
@@ -109,11 +112,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: '',
@@ -217,8 +234,26 @@ 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(queryType, mode)) {
+      selectedWeChatAccount = !_.isEmpty(editSelectedWeChatAccount)
+        ? editSelectedWeChatAccount
+        : templateSelectedWeChatAccount;
+    } else if (!_.isEmpty(templateSelectedWeChatAccount)) {
+      selectedWeChatAccount = templateSelectedWeChatAccount;
+    }
+    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`);
@@ -334,27 +369,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') {
@@ -565,7 +614,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]) {
@@ -964,7 +1013,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 }) );
 
@@ -1092,7 +1141,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);
@@ -1192,7 +1241,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");
@@ -1479,8 +1528,18 @@ 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 { 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) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
@@ -1565,7 +1624,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);
@@ -1620,7 +1679,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;
@@ -1653,7 +1712,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`);
@@ -1702,7 +1761,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});
@@ -1957,6 +2023,7 @@ Edit.propTypes = {
   onValidationFail: PropTypes.bool,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
+  creativesMode: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({