@capillarytech/creatives-library 8.0.282-alpha.1 → 8.0.283

package/package.json

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

package/v2Containers/MobilePush/Edit/index.js

@@ -47,6 +47,17 @@ import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
+
+const safeParseDeeplinkConfig = (value) => {
+  if (!value || typeof value !== 'string') return [];
+  try {
+    const parsed = JSON.parse(value);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+};
+
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -96,11 +107,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (!_.isEmpty(this.state.schema)) {
       this.injectEvents(this.state.schema);
     }
-    if (this.props.location.query && (typeof this.props.location.query.module === 'undefined' || this.props.isFullMode === false)) { // when this containers is imported from creatives library
-      const templateId = get(this, "props.params.id");
-      if (templateId) {
+    const templateId = get(this, "props.params.id");
+    const hasTemplateData = !_.isEmpty(this.props.templateData);
+    if (this.props.location?.query && (templateId || hasTemplateData)) {
+      if (templateId && templateId !== 'temp') {
         this.props.actions.getTemplateDetails(templateId);
-      } else {
+      } else if (hasTemplateData) {
         this.props.actions.setTemplateDetails(this.props.templateData);
       }
     }
@@ -176,7 +188,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.props.actions.getMobilepushTemplatesList('mobilepush', params);
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema)) {
-      this.setState({fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {}}, () => {
+      const definition = nextProps.metaEntities.layouts[0].definition;
+      const initialSchema = definition?.textSchema || definition?.imageSchema || {};
+      this.setState({fullSchema: definition, schema: initialSchema}, () => {
         // Use this.props (latest) in callback to avoid race: templateDetails may have arrived by now
         const latestSelectedAccount = this.getSelectedWeChatAccountFromProps(this.props);
         this.handleEditSchemaOnPropsChange(this.props, latestSelectedAccount);
@@ -240,7 +254,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = get(templateCta, 'ctaTemplateDetails[1].buttonText');
       }
     }
-    if (newFormData["mobilepush-accounts"] !== this.state.formData["mobilepush-accounts"]) {
+    const newAccount = newFormData["mobilepush-accounts"];
+    const currentAccount = this.state.formData["mobilepush-accounts"];
+    const isExplicitAccountChange = newAccount !== undefined && newAccount !== currentAccount;
+    if (isExplicitAccountChange) {
       this.setMobilePushAccountOptions(this.props.Edit.weCrmAccounts, newFormData["mobilepush-accounts"]);
       delete newFormData['mobilepush-template'];
       delete newFormData['template-name'];
@@ -250,6 +267,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       if (!_.isEmpty(newFormData[1])) {
         delete newFormData[1];
       }
+    } else if (newAccount === undefined && currentAccount !== undefined) {
+      newFormData["mobilepush-accounts"] = currentAccount;
     }
     if (this.state.isSchemaChanged) {
       this.setState({isSchemaChanged: false});
@@ -281,7 +300,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (isEmbeddedEditOrPreview(queryType, mode)) {
       selectedWeChatAccount = !_.isEmpty(editSelectedWeChatAccount)
         ? editSelectedWeChatAccount
-        : templateSelectedWeChatAccount;
+        : (templateSelectedWeChatAccount || {});
     } else if (!_.isEmpty(templateSelectedWeChatAccount)) {
       selectedWeChatAccount = templateSelectedWeChatAccount;
     }
@@ -296,7 +315,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const id = field.id;
     const fieldIndex = findIndex(inputFields, {identifier: id});
     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 }) );
+    const deepLinkOptions = _.map(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (link) => ({label: link.name, value: link.link, title: link.link }) );
     // let inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${id}-select` : `${id}-text`;
     // if (field.id === "cta-deeplink-secondary-cta-1" && (tabIndex > 1 || this.state.currentTab > 1)) {
     //   inputId = `${inputId}${tabIndex || this.state.currentTab}`;
@@ -668,7 +687,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   getLinkName = (link) => {
     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);
+    const deepLinkOptions = _.filter(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (l) => l.link === link);
     if (deepLinkOptions[0]) {
       return deepLinkOptions[0].name;
     }
@@ -766,6 +785,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
 
   setEditState(data, schema) {
+    if (!data?.versions?.base || typeof data.versions.base !== 'object') return;
     const tabCount = Object.keys(data.versions.base).length;
     const formData = {};
     if (this.props.location.query.type === 'embedded' && this.props.location.query.module === "loyalty") {
@@ -1115,7 +1135,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
     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 }) );
+    const deepLinkOptions = _.map(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (link) => ({label: link.name, value: link.link, title: link.link }) );
 
     const inputFields = get(schema, `containers[0].panes[${currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`);
     forEach(inputFields, (inputField, fieldIndex) => {
@@ -1267,7 +1287,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                         }
                         if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
                           const ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
-                          const configkeys = selectedWeChatAccount ? _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
+                          const configkeys = selectedWeChatAccount ? _.filter(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
                           if (configkeys.length) {
                             const options = configkeys[0].keys;
                             _.forEach(options, (opt) => {
@@ -1379,7 +1399,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                         }
                         if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
                           const ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
-                          const configkeys = selectedWeChatAccount ? _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
+                          const configkeys = selectedWeChatAccount ? _.filter(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
 
                           if (configkeys.length) {
                             const options = configkeys[0].keys;
@@ -1733,7 +1753,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const fieldIndex = findIndex(inputFields, {identifier: id});
     const formDataKey = id.replace("-show-keys", "");
     const ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
-    let keys = selectedWeChatAccount ? _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === formData[currentTab - 1][formDataKey]) : [];
+    let keys = selectedWeChatAccount ? _.filter(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === formData[currentTab - 1][formDataKey]) : [];
     if (keys[0]) {
       keys = keys[0].keys;
     }
@@ -1763,7 +1783,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       inputFields.splice(fieldIndex + index + 1, 0, row);
     });
     if (!tabIndex) { // removes the existing selected options keys so that newly selected options keys can be added.
-      const configkeys = _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === this.state.formData[currentTab - 1][field.id]);
+      const configkeys = _.filter(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === this.state.formData[currentTab - 1][field.id]);
       if (configkeys.length) {
         const options = configkeys[0].keys;
         inputFields = inputFields.slice(0, fieldIndex + 1).concat(inputFields.slice(fieldIndex + options.length + 1, inputFields.length));
@@ -1783,7 +1803,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const id = field.id;
     const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
     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 deepLinkOptions = selectedWeChatAccount ? _.map(safeParseDeeplinkConfig(ck ? selectedWeChatAccount?.configs?.deeplink : '[]'), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
     // const eventsMap = _.cloneDeep(this.state.eventsMap);
     const tabIndex = currentTab || this.state.currentTab;
     const inputFields = get(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`);
@@ -1814,7 +1834,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
     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 deepLinkOptions = selectedWeChatAccount ? _.map(safeParseDeeplinkConfig(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`);
     const fieldIndex = findIndex(inputFields, {identifier: id});
     let newInputFields;
@@ -2030,49 +2050,94 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   handleEditSchemaOnPropsChange = (nextProps, selectedWeChatAccount) => {
+    const templateDetails = nextProps.templateDetails || nextProps.templateData;
     const queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
     const isEmbeddedLibrary = queryType === EMBEDDED && !nextProps.isFullMode;
     const canSetAccountFromTemplate =
-      !selectedWeChatAccount &&
-      nextProps.templateDetails?.definition?.accountId &&
+      (_.isEmpty(selectedWeChatAccount) || !selectedWeChatAccount?.configs) &&
+      templateDetails?.definition?.accountId &&
       nextProps.Edit?.weCrmAccounts?.length > 0;
-    const isLibraryMode = this.props.location.query.type !== 'embedded' || this.props.isFullMode === false;
+    const hasAccountOrEmbedded =
+      !_.isEmpty(selectedWeChatAccount) ||
+      isEmbeddedLibrary ||
+      canSetAccountFromTemplate ||
+      !nextProps.isFullMode ||
+      queryType === EMBEDDED;
+    const hasTemplateDetails = !_.isEmpty(templateDetails);
+    const hasEditData = !_.isEmpty(this.state.editData);
+    const hasFullSchema = !_.isEmpty(this.state.fullSchema);
+    const locationCheck = (this.props.location.query.type !== 'embedded' || this.props.isFullMode === false || queryType === EMBEDDED);
     const canPopulateForm =
-      !_.isEmpty(nextProps.templateDetails) &&
-      _.isEmpty(this.state.editData) &&
-      !_.isEmpty(this.state.fullSchema) &&
-      isLibraryMode &&
-      (selectedWeChatAccount || isEmbeddedLibrary || canSetAccountFromTemplate || !nextProps.isFullMode);
+      hasTemplateDetails &&
+      !hasEditData &&
+      hasFullSchema &&
+      locationCheck &&
+      hasAccountOrEmbedded;
     if (canPopulateForm) {
       this.props = nextProps;
       if (canSetAccountFromTemplate) {
-        this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts, nextProps.templateDetails.definition.accountId);
+        this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts, templateDetails.definition.accountId);
       }
-      const mode = nextProps.templateDetails.definition ? nextProps.templateDetails.definition.mode : nextProps.templateDetails.mode;
+      const mode = templateDetails.definition ? templateDetails.definition.mode : templateDetails.mode;
       const schema = mode === "text" ? this.state.fullSchema?.textSchema : this.state.fullSchema?.imageSchema;
-      const isAndroidSupported = get(this, "props.Templates.selectedWeChatAccount.configs.android", '') === '1';
-      const isIosSupported = get(this, "props.Templates.selectedWeChatAccount.configs.ios", '') === '1';
+      if (!schema) return;
+      const configs = nextProps.Templates?.selectedWeChatAccount?.configs || {};
+      const hasExplicitConfigs = !_.isEmpty(configs) && ('android' in configs || 'ios' in configs);
+      const isAndroidSupported = hasExplicitConfigs ? configs.android === '1' : true;
+      const isIosSupported = hasExplicitConfigs ? configs.ios === '1' : true;
       if (!isAndroidSupported) {
         const androidField = get(schema, "containers[0].panes[0]");
-        androidField.isSupported = false;
-        this.setState({currentTab: 2});
-        set(schema, "containers[0].panes[0]", androidField);
+        if (androidField) {
+          androidField.isSupported = false;
+          this.setState({currentTab: 2});
+          set(schema, "containers[0].panes[0]", androidField);
+        }
       }
       if (!isIosSupported) {
         const iosField = get(schema, "containers[0].panes[1]");
-        iosField.isSupported = false;
-
-        set(schema, "containers[0].panes[1]", iosField);
+        if (iosField) {
+          iosField.isSupported = false;
+          set(schema, "containers[0].panes[1]", iosField);
+        }
       }
-      this.setEditState(nextProps.templateDetails, schema);
-      this.getTags();
+      const dataToUse = this.normalizeTemplateDataForEdit(templateDetails);
+      if (dataToUse?.versions?.base) {
+        this.setEditState(dataToUse, schema);
+        this.getTags();
+      } else {
+        console.warn('[MobliPushEdit] Skipped setEditState - dataToUse.versions.base missing', { dataToUse });
+      }
+    }
+  };
+
+  normalizeTemplateDataForEdit = (data) => {
+    if (!data) return null;
+    if (data.versions?.base) return data;
+    if (data.content?.versions?.base) {
+      return { ...data, versions: data.content.versions };
     }
+    const baseContent = data.content || {};
+    if (baseContent.ANDROID || baseContent.IOS) {
+      return {
+        ...data,
+        versions: { base: baseContent },
+        name: data.name || data.templateName || '',
+        definition: data.definition || {},
+        mode: data.mode || data.definition?.mode || 'text',
+      };
+    }
+    return data;
   }
 
   render() {
+    const queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
+    const isEmbeddedOrLibrary = queryType === 'embedded' || this.props.isFullMode === false;
+    const hasFormContent = !_.isEmpty(this.state.formData) && !_.isEmpty(this.state.schema);
+    const showFormBuilder = !this.props.isLoadingMetaEntities || hasFormContent;
     const schema = this.state.schema;
     const loadingContentEdit = this.state.loadingContentEdit || (this.props.location.query.module === 'dvs' && _.isEmpty(this.state.schema));
-    const spinning = get(this.props, "Edit.fetchingWeCrmAccounts") || this.props.isLoadingMetaEntities || loadingContentEdit || this.props.Edit.fetchingDefaultTemplates || this.props.Edit.assetUploading || this.state.loading || (this.props.Edit && (("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) || ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress)));
+    const metaEntitiesBlockSpinner = hasFormContent;
+    const spinning = get(this.props, "Edit.fetchingWeCrmAccounts") || (!metaEntitiesBlockSpinner && this.props.isLoadingMetaEntities) || loadingContentEdit || this.props.Edit.fetchingDefaultTemplates || this.props.Edit.assetUploading || this.state.loading || (this.props.Edit && (("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) || ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress)));
     let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
     if (this.props.supportedTags) {
       tags = this.props.supportedTags;
@@ -2082,7 +2147,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         <CapSpin spinning={spinning}>
           <CapRow>
             <CapColumn>
-              {!this.props.isLoadingMetaEntities && <FormBuilder
+              {(() => {
+                if (isEmbeddedOrLibrary && !showFormBuilder && hasFormContent) {
+                  console.warn('[MobliPushEdit] FormBuilder HIDDEN (isLoadingMetaEntities=true) but formData+schema exist');
+                }
+                return showFormBuilder && <FormBuilder
                 channel={MOBILE_PUSH}
                 schema={schema}
                 showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
@@ -2117,7 +2186,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
-              />}
+              />;
+              })()}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
               <CapSlideBox