cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/MobilePush/Edit/index.js

@@ -39,7 +39,8 @@ 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 { checkForPersonalizationTokens, isEmbeddedEditOrPreview, validateMobilePushContent } from '../../../utils/commonUtils';
+import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 import { EMBEDDED } from '../../Whatsapp/constants';
 import { OUTBOUND } from '../../../v2Components/FormBuilder/constants';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
@@ -47,6 +48,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);
@@ -57,6 +69,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       schema: {},
       currentTab: 1,
       editData: {},
+      errorData: [],
       loading: false,
       isFormValid: true,
       injectedTags: {},
@@ -68,6 +81,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.getPrimaryCtaFields = getPrimaryCtaFields.bind(this);
     this.getSecondaryCtaFields = getSecondaryCtaFields.bind(this);
     this.getLinkTypeFields = getLinkTypeFields.bind(this);
+    // Guard: only one initial meta/TAG fetch (getTags can be invoked from multiple code paths)
+    this.hasFetchedInitialTagsRef = false;
+    // Guard: avoid duplicate fetch when multiple TagList instances trigger same context
+    this.lastFetchedTagContextRef = null;
   }
   componentWillMount() {
     this.props.actions.getWeCrmAccounts("mobilepush");
@@ -92,11 +109,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);
       }
     }
@@ -109,8 +127,47 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
   }
   componentWillReceiveProps(nextProps) {
-    if (nextProps.isGetFormData && !this.props.isFullMode) {
-      nextProps.getFormLibraryData(this.getFormData());
+    if (nextProps.params?.id !== this.props.params?.id) {
+      this.hasFetchedInitialTagsRef = false;
+      this.lastFetchedTagContextRef = null;
+    }
+    // Library mode: on Done click (transition to isGetFormData), run extractTags only when no existing validation errors (braces, personalization, etc.)
+    if (nextProps.isGetFormData && !this.props.isGetFormData && !nextProps.isFullMode) {
+      // If form already has validation errors (braces, personalization tags, etc.), do not call extractTags; just fail
+      if (!this.state.isFormValid) {
+        nextProps.onValidationFail?.();
+        return;
+      }
+      if (nextProps.getLiquidTags && nextProps.showLiquidErrorInFooter) {
+        const formDataArr = [this.state.formData?.[0], this.state.formData?.[1]];
+        validateMobilePushContent(formDataArr, {
+          currentTab: this.state.currentTab,
+          getLiquidTags: nextProps.getLiquidTags,
+          formatMessage: this.props.intl.formatMessage,
+          messages: formBuilderMessages,
+          onError: (err) => {
+            const { standardErrors = [], liquidErrors = [] } = err;
+            // _validatePlatformSpecificContent passes { standardErrors: { ANDROID, IOS, generic }, liquidErrors: { ... } }; footer expects arrays
+            const toArray = (v) => (Array.isArray(v) ? v : (v && typeof v === 'object' ? [].concat(...Object.values(v)) : []));
+            const STANDARD_ERROR_MSG = toArray(standardErrors);
+            const LIQUID_ERROR_MSG = toArray(liquidErrors);
+            nextProps.showLiquidErrorInFooter(
+              { STANDARD_ERROR_MSG, LIQUID_ERROR_MSG },
+              this.state.currentTab
+            );
+            // Only treat as validation failure when there are actual errors; skip when helper called onError with empty reset payload
+            const hasErrors = STANDARD_ERROR_MSG.length > 0 || LIQUID_ERROR_MSG.length > 0;
+            if (hasErrors) {
+              nextProps.onValidationFail?.();
+            }
+          },
+          onSuccess: () => {
+            nextProps.getFormLibraryData(this.getFormData());
+          },
+        });
+      } else {
+        nextProps.getFormLibraryData(this.getFormData());
+      }
     } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
@@ -167,11 +224,15 @@ 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) && _.isEmpty(this.state.formData)) {
-      this.setState({fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {}}, () => {
-        this.handleEditSchemaOnPropsChange(nextProps, selectedWeChatAccount);
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema)) {
+      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);
         const templateId = get(this, "props.params.id");
-        if (nextProps.location.query.module !== 'loyalty' && templateId && templateId !== 'temp') {
+        if (this.props.location.query.module !== 'loyalty' && templateId && templateId !== 'temp') {
           this.props.actions.getTemplateDetails(templateId);
         }
         if (queryType === EMBEDDED && templateId === 'temp' && _.isEmpty(this.state.formData)) { // when his.props.params.id is temp that means mobile push template content will be passed from post message from parent with startTemplateCreation action
@@ -222,6 +283,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   onFormDataChange = (formData, tabCount, currentTab, inputField) => {
     const newFormData = _.cloneDeep(formData);
     const {templateCta} = this.state;
+    
+    // Check for personalization tokens if restriction is enabled and notify parent
+    if (this.props.restrictPersonalization) {
+      const hasTokens = checkForPersonalizationTokens(newFormData);
+      if (this.props.onPersonalizationTokensChange) {
+        this.props.onPersonalizationTokensChange(hasTokens);
+      }
+    }
+    
     if (!_.isEmpty(templateCta) && this.state.currentTab === 2) {
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = get(templateCta, 'name');
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = get(templateCta, 'ctaTemplateDetails[0].buttonText');
@@ -230,7 +300,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'];
@@ -240,6 +313,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});
@@ -271,7 +346,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;
     }
@@ -285,8 +360,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const inputFields = get(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`);
     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 ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+    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}`;
@@ -657,8 +732,8 @@ 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 ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+    const deepLinkOptions = _.filter(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (l) => l.link === link);
     if (deepLinkOptions[0]) {
       return deepLinkOptions[0].name;
     }
@@ -667,32 +742,22 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   // eslint-disable-next-line react/sort-comp
   showError = () => {
     const {intl} = this.props;
-    const {errorData} = this.state;
+    const {errorData, schema} = this.state;
     const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
-    let isTagErrorExist = false;
     if (!_.isEmpty(this.state.formData) && !this.state.isFormValid) {
       let tab = this.state.currentTab;
-      const isAndroidInvalid = Object.values(errorData[0]).includes(true);
-      const isIosInvalid = Object.values(errorData[1]).includes(true);
+      const isAndroidInvalid = Object.values(errorData?.[0] || {}).includes(true);
+      const isIosInvalid = Object.values(errorData?.[1] || {}).includes(true);
+      const isIosTabVisible = get(schema, 'containers[0].panes[1].isSupported', true) !== false;
       if (isAndroidInvalid) {
         tab = 1;
         errorMessage.description = intl.formatMessage(messages.invalidAndroidMessage);
-        const invalidTags = errorData[0]['invalid-tags'];
-        if (!_.isEmpty(invalidTags)) {
-          isTagErrorExist = true;
-          errorMessage.description = `${intl.formatMessage(messages.invalidAndroidMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
-        }
-      } else if (isIosInvalid) {
+      } else if (isIosInvalid && isIosTabVisible) {
         tab = 2;
         errorMessage.description = intl.formatMessage(messages.invalidIosMessage);
-        const invalidTags = errorData[1]['invalid-tags'];
-        if (!_.isEmpty(invalidTags)) {
-          isTagErrorExist = true;
-          errorMessage.description = `${intl.formatMessage(messages.invalidIosMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
-        }
       }
 
-      if (tab !== this.state.currentTab || isTagErrorExist) {
+      if (tab !== this.state.currentTab) {
         CapNotification.error(errorMessage);
       }
     }
@@ -719,6 +784,27 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     parent.postMessage(JSON.stringify(response), '*');
   };
 
+  /**
+   * Compute selectedWeChatAccount from props (used so we can call with latest props
+   * in setState callback to avoid stale closure and intermittent empty form).
+   */
+  getSelectedWeChatAccountFromProps = (props) => {
+    const queryType = String(get(props, 'location.query.type', ''))?.toLowerCase();
+    const creativesMode = String(get(props, 'creativesMode', ''))?.toLowerCase();
+    const { Edit: EditProps, Templates } = props || {};
+    const { selectedWeChatAccount: editSelectedWeChatAccount } = EditProps || {};
+    const { Templates: nextTemplates } = props || {};
+    if (isEmbeddedEditOrPreview(queryType, creativesMode)) {
+      return !_.isEmpty(editSelectedWeChatAccount)
+        ? editSelectedWeChatAccount
+        : nextTemplates?.selectedWeChatAccount;
+    }
+    if (!_.isEmpty(Templates?.selectedWeChatAccount)) {
+      return Templates?.selectedWeChatAccount;
+    }
+    return undefined;
+  };
+
   getFormData = (e) => {
     const response = {
       action: "getFormData",
@@ -735,12 +821,16 @@ 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") {
       formData["mobilepush-accounts"] = this.state.formData["mobilepush-accounts"];
       formData['mobilepush-template'] = this.state.formData['mobilepush-template'];
     }
+    if (data.definition?.accountId) {
+      formData['mobilepush-accounts'] = data.definition.accountId;
+    }
     formData['template-name'] = data.name;
     const androidData = data.versions.base.ANDROID;
     const iosData = data.versions.base.IOS;
@@ -968,15 +1058,19 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     });
   };
   getTags = () => {
+    if (this.hasFetchedInitialTagsRef) {
+      return;
+    }
+    this.hasFetchedInitialTagsRef = true;
+    const context = this.props.getDefaultTags
+      || (this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default');
+    this.lastFetchedTagContextRef = typeof context === 'string' ? context.toLowerCase() : context;
     const query = {
       layout: 'mobilepush',
       type: 'TAG',
-      context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
+      context: this.lastFetchedTagContextRef,
       embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
     };
-    if (this.props.getDefaultTags) {
-      query.context = this.props.getDefaultTags;
-    }
     this.props.globalActions.fetchSchemaForEntity(query);
   }
   setModalContent = (type) => {
@@ -1076,8 +1170,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const currentTab = tab || this.state.currentTab;
     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 ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+    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) => {
@@ -1228,8 +1322,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                           delete formData[self.state.currentTab - 1][`${id.replace('-delete', '')}`];
                         }
                         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 ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+                          const configkeys = selectedWeChatAccount ? _.filter(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
                           if (configkeys.length) {
                             const options = configkeys[0].keys;
                             _.forEach(options, (opt) => {
@@ -1340,8 +1434,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                           delete formData[self.state.currentTab - 1][`cta-deeplink-${id.replace('delete', 'text')}`];
                         }
                         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 ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+                          const configkeys = selectedWeChatAccount ? _.filter(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
 
                           if (configkeys.length) {
                             const options = configkeys[0].keys;
@@ -1629,10 +1723,21 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   saveFormData = (formData) => {
+    // Check for personalization tokens if restriction is enabled
+    if (this.props.restrictPersonalization) {
+      const hasTokens = checkForPersonalizationTokens(formData);
+      if (hasTokens) {
+        const message = this.props.intl.formatMessage(messages.personalizationTokensErrorMessage);
+        CapNotification.error({message, key: 'personalizationTokensError'});
+        return;
+      }
+    }
+    
     const obj = this.getTransformedData(formData);
 
     this.props.actions.editTemplate(obj, this.onUpdateTemplateComplete);
   };
+  
   handleFrameTasks = (e) => {
     //
     const type = e.data;
@@ -1694,8 +1799,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const {id} = field;
     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]) : [];
+    const ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+    let keys = selectedWeChatAccount ? _.filter(safeParseDeeplinkConfig(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === formData[currentTab - 1][formDataKey]) : [];
     if (keys[0]) {
       keys = keys[0].keys;
     }
@@ -1725,7 +1830,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));
@@ -1744,8 +1849,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     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;
-    const deepLinkOptions = selectedWeChatAccount ? _.map(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
+    const ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+    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`);
@@ -1775,8 +1880,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const formDataCopy = cloneDeep(formData);
     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 ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+    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;
@@ -1967,10 +2072,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({ schema });
   };
   handleOnTagsContextChange = (data) => {
+    const context = (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase();
+    if (this.lastFetchedTagContextRef === context) {
+      return;
+    }
+    this.lastFetchedTagContextRef = context;
     const query = {
       layout: 'mobilepush',
       type: 'TAG',
-      context: (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
+      context,
       embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
     };
     this.props.globalActions.fetchSchemaForEntity(query);
@@ -1987,33 +2097,94 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   handleEditSchemaOnPropsChange = (nextProps, selectedWeChatAccount) => {
-    if (!_.isEmpty(nextProps.templateDetails) && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.fullSchema) && selectedWeChatAccount && (this.props.location.query.type !== 'embedded' || this.props.isFullMode === false)) {
+    const templateDetails = nextProps.templateDetails || nextProps.templateData;
+    const queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
+    const isEmbeddedLibrary = queryType === EMBEDDED && !nextProps.isFullMode;
+    const canSetAccountFromTemplate =
+      (_.isEmpty(selectedWeChatAccount) || !selectedWeChatAccount?.configs) &&
+      templateDetails?.definition?.accountId &&
+      nextProps.Edit?.weCrmAccounts?.length > 0;
+    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 =
+      hasTemplateDetails &&
+      !hasEditData &&
+      hasFullSchema &&
+      locationCheck &&
+      hasAccountOrEmbedded;
+    if (canPopulateForm) {
       this.props = nextProps;
-      const mode = nextProps.templateDetails.definition ? nextProps.templateDetails.definition.mode : nextProps.templateDetails.mode;
+      if (canSetAccountFromTemplate) {
+        this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts, templateDetails.definition.accountId);
+      }
+      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);
+        }
+      }
+      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 });
       }
-      this.setEditState(nextProps.templateDetails, schema);
-      this.getTags();
     }
+  };
+
+  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;
@@ -2023,8 +2194,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         <CapSpin spinning={spinning}>
           <CapRow>
             <CapColumn>
-              <FormBuilder
-                key={!_.isEmpty(schema) ? 'has-schema' : 'no-schema'}
+              {(() => {
+                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}
@@ -2059,7 +2233,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
-              />
+                waitEventContextTags={this.props?.waitEventContextTags}
+                restrictPersonalization={this.props.restrictPersonalization}
+              />;
+              })()}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
               <CapSlideBox
@@ -2158,15 +2335,20 @@ Edit.propTypes = {
   getFormLibraryData: PropTypes.func,
   isGetFormData: PropTypes.bool,
   Create: PropTypes.object,
-  onValidationFail: PropTypes.bool,
+  onValidationFail: PropTypes.func,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   creativesMode: PropTypes.string,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
+  getLiquidTags: PropTypes.func,
   showLiquidErrorInFooter: PropTypes.func,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
+  onPersonalizationTokensChange: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/app/v2Containers/MobilePush/Edit/messages.js

@@ -334,4 +334,8 @@ export default defineMessages({
     id: 'creatives.containersV2.MobilePush.Edit.thisSectionDisabledHoverText',
     defaultMessage: 'This section is being revamped. Till then it will remain disabled.',
   },
+  "personalizationTokensErrorMessage": {
+    id: 'creatives.containersV2.MobilePush.Edit.personalizationTokensErrorMessage',
+    defaultMessage: 'Personalization tags are not supported for anonymous customers, please remove the tags.',
+  },
 });