@capillarytech/creatives-library 8.0.10 → 8.0.12

package/v2Containers/MobilePush/Edit/index.js

@@ -39,6 +39,11 @@ 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';
+import { EMBEDDED } from '../../Whatsapp/constants';
+import { OUTBOUND } from '../../../v2Components/FormBuilder/constants';
+
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
@@ -109,16 +114,56 @@ 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));
-    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"));
-    }
-    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") {
+    let selectedWeChatAccount = {};
+    const queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
+    const creativesMode = String(get(this.props, 'creativesMode', ''))?.toLowerCase();
+    const { Edit: EditProps, templateData, Templates, type } = this.props || {};
+    const { selectedWeChatAccount: editSelectedWeChatAccount, templateDetails } = EditProps || {};
+    const { id: selectedWeChatAccountId } = editSelectedWeChatAccount || {};
+    const { definition } = templateDetails || {};
+    const { accountId: templateAccountId } = definition || {};
+    const { Edit: nextEdit } = nextProps || {};
+    if (isEmbeddedEditOrPreview(queryType, creativesMode)) {
+      selectedWeChatAccount = !_.isEmpty(editSelectedWeChatAccount)
+        ? editSelectedWeChatAccount
+        : nextEdit?.selectedWeChatAccount;
+    } else if (!_.isEmpty(Templates?.selectedWeChatAccount)) {
+      selectedWeChatAccount = Templates?.selectedWeChatAccount;
+    }
+
+    if (queryType === EMBEDDED && !nextEdit?.fetchingWeCrmAccounts && !_.isEqual(EditProps?.weCrmAccounts, nextEdit?.weCrmAccounts) && (!selectedWeChatAccount || _.isEmpty(selectedWeChatAccount))) {
+      this.setMobilePushAccountOptions(nextEdit?.weCrmAccounts, templateData?.definition?.accountId);
+    }
+    // Check if the query type is 'embedded' and the creatives mode is either 'edit' or 'preview'.
+    // If the type is not 'outbound', 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) &&
+      type !== OUTBOUND.toLowerCase() &&
+      nextEdit?.weCrmAccounts &&
+      !EditProps?.fetchingWeCrmAccounts &&
+      templateData?.definition?.accountId &&
+      !_.isEqual(templateAccountId, templateData?.definition?.accountId)
+    ) {
+      this.setMobilePushAccountOptions(nextEdit?.weCrmAccounts, templateData?.definition?.accountId);
+    }
+    // If the type is 'outbound', 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 template account ID.
+    if (
+      isEmbeddedEditOrPreview(queryType, creativesMode) &&
+      type === OUTBOUND.toLowerCase() &&
+      nextEdit?.weCrmAccounts &&
+      selectedWeChatAccountId &&
+      templateAccountId &&
+      !_.isEqual(selectedWeChatAccountId, templateAccountId)
+    ) {
+      this.setMobilePushAccountOptions(nextEdit?.weCrmAccounts, templateAccountId);
+    }
+    if (!_.isEmpty(nextEdit?.selectedWeChatAccount) && !_.isEqual(editSelectedWeChatAccount, nextEdit?.selectedWeChatAccount) && (queryType === EMBEDDED) && this.props.location.query.module === "loyalty") {
       const params = {
         name: '',
         sortBy: 'Most Recent',
-        accountId: nextProps.Edit.selectedWeChatAccount.id,
+        accountId: nextEdit?.selectedWeChatAccount?.id,
       };
       this.props.actions.getMobilepushTemplatesList('mobilepush', params);
     }
@@ -147,7 +192,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         this.setTemplateOptions(nextProps.Edit.mobilepushTemplates);
       }
     }
-
     this.handleEditSchemaOnPropsChange(nextProps, selectedWeChatAccount);
     if (nextProps.Edit.uploadedAssetData) {
       const formData = _.cloneDeep(this.state.formData);
@@ -217,8 +261,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 +396,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 +641,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 +1040,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 +1168,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 +1268,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 +1555,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 +1651,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 +1706,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 +1739,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 +1788,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 +2050,7 @@ Edit.propTypes = {
   onValidationFail: PropTypes.bool,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
+  creativesMode: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({