@capillarytech/creatives-library 8.0.281 → 8.0.282-alpha.0

package/package.json

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

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -49,10 +49,16 @@ const mockGetValidationState = jest.fn(() => ({
   issueCounts: { errors: 0, warnings: 0, total: 0 },
 }));
 
+// Ref to capture apiValidationErrors passed to HTMLEditor (for mergedApiValidationErrors tests)
+const capturedApiValidationErrorsRef = { current: null };
+
 // Mock HtmlEditor - it exports a lazy-loaded component by default
 jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
   const React = require('react');
   const MockHTMLEditor = React.forwardRef((props, ref) => {
+    if (global.__captureApiValidationErrorsRef && props.apiValidationErrors) {
+      global.__captureApiValidationErrorsRef.current = props.apiValidationErrors;
+    }
     React.useImperativeHandle(ref, () => ({
       getAllIssues: () => mockGetAllIssues(),
       getValidationState: () => mockGetValidationState(),
@@ -109,6 +115,9 @@ jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
 jest.mock('../../../../v2Components/HtmlEditor', () => {
   const React = require('react');
   const MockHTMLEditor = React.forwardRef((props, ref) => {
+    if (global.__captureApiValidationErrorsRef && props.apiValidationErrors) {
+      global.__captureApiValidationErrorsRef.current = props.apiValidationErrors;
+    }
     React.useImperativeHandle(ref, () => ({
       getAllIssues: () => mockGetAllIssues(),
       getValidationState: () => mockGetValidationState(),
@@ -421,6 +430,86 @@ describe('EmailHTMLEditor', () => {
     });
     // Reset hasLiquidSupportFeature mock to return true by default
     mockHasLiquidSupportFeature.mockReturnValue(true);
+    capturedApiValidationErrorsRef.current = null;
+  });
+
+  describe('mergedApiValidationErrors (lines 124-125)', () => {
+    beforeEach(() => {
+      global.__captureApiValidationErrorsRef = capturedApiValidationErrorsRef;
+    });
+
+    afterEach(() => {
+      delete global.__captureApiValidationErrorsRef;
+    });
+
+    it('merges tag unsupported errors into standardErrors when tagValidationError has unsupportedTags', async () => {
+      validateTags.mockReturnValue({
+        valid: false,
+        unsupportedTags: ['tagA', 'tagB'],
+      });
+      renderWithIntl({
+        metaEntities: { tags: { standard: [{ name: 'customer.name' }] } },
+        tags: [{ name: 'customer.name' }],
+        supportedTags: [],
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      await waitFor(() => {
+        expect(capturedApiValidationErrorsRef.current).not.toBeNull();
+        expect(capturedApiValidationErrorsRef.current.liquidErrors).toEqual([]);
+        expect(capturedApiValidationErrorsRef.current.standardErrors).toContain(
+          'Unsupported tags are: tagA, tagB',
+        );
+      });
+    });
+
+    it('merges tag missing errors into standardErrors when tagValidationError has missingTags and unsubscribe not mandatory', async () => {
+      isEmailUnsubscribeTagMandatory.mockReturnValue(false);
+      validateTags.mockReturnValue({
+        valid: false,
+        missingTags: ['unsubscribe'],
+      });
+      renderWithIntl({
+        metaEntities: { tags: { standard: [{ name: 'customer.name' }] } },
+        tags: [{ name: 'customer.name' }],
+        supportedTags: [],
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      await waitFor(() => {
+        expect(capturedApiValidationErrorsRef.current).not.toBeNull();
+        expect(capturedApiValidationErrorsRef.current.standardErrors).toContain(
+          'Missing tags are: unsubscribe',
+        );
+      });
+    });
+
+    it('uses apiValidationErrors.liquidErrors and concatenates apiValidationErrors.standardErrors with tag messages (merge shape)', async () => {
+      // When tag messages exist, mergedApiValidationErrors returns liquidErrors from apiValidationErrors
+      // and standardErrors = [...(apiValidationErrors?.standardErrors || []), ...tagMessages] (lines 124-125)
+      validateTags.mockReturnValue({
+        valid: false,
+        unsupportedTags: ['customTag'],
+      });
+      renderWithIntl({
+        metaEntities: { tags: { standard: [{ name: 'customer.name' }] } },
+        tags: [{ name: 'customer.name' }],
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      await waitFor(() => {
+        expect(capturedApiValidationErrorsRef.current).not.toBeNull();
+        const { liquidErrors, standardErrors } = capturedApiValidationErrorsRef.current;
+        expect(liquidErrors).toEqual([]);
+        expect(standardErrors).toContain('Unsupported tags are: customTag');
+      });
+    });
   });
 
   describe('Default Parameter Values (lines 60-63)', () => {

package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js

@@ -768,6 +768,130 @@ describe('useEmailWrapper', () => {
       });
     });
 
+    describe('templateId resolution (lines 209-213)', () => {
+      it('should call getTemplateDetails with templateId from params.id', async () => {
+        const templateId = 'from-params-id';
+        const editProps = {
+          ...newFlowMockProps,
+          params: { id: templateId },
+          location: { pathname: '/email/edit/other', query: {} },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: editProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
+        });
+      });
+
+      it('should call getTemplateDetails with templateId from location.query.id when params.id is missing', async () => {
+        const templateId = 'from-query-id';
+        const editProps = {
+          ...newFlowMockProps,
+          params: {},
+          location: {
+            pathname: '/email/edit/something',
+            query: { id: templateId },
+          },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: editProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
+        });
+      });
+
+      it('should call getTemplateDetails with templateId from location.params.id when params and query id are missing', async () => {
+        const templateId = 'from-location-params-id';
+        const editProps = {
+          ...newFlowMockProps,
+          params: {},
+          location: {
+            pathname: '/email/edit/fallback',
+            query: {},
+            params: { id: templateId },
+          },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: editProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
+        });
+      });
+
+      it('should call getTemplateDetails with templateId extracted from pathname /edit/ID when no params or query id', async () => {
+        const templateId = 'extracted-from-pathname';
+        const editProps = {
+          ...newFlowMockProps,
+          params: {},
+          location: {
+            pathname: `/email/edit/${templateId}`,
+            query: {},
+          },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: editProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
+        });
+      });
+
+      it('should not call getTemplateDetails when pathname includes /edit/ but has no id segment', async () => {
+        const editProps = {
+          ...newFlowMockProps,
+          params: {},
+          location: {
+            pathname: '/email/edit/',
+            query: {},
+          },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: editProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).not.toHaveBeenCalled();
+        }, { timeout: 500 });
+      });
+    });
+
     describe('Edit Flow - BEE Editor Template', () => {
       it('should call getTemplateDetails and set BEE editor for BEE template', async () => {
         const templateId = 'bee-template-123';

package/v2Containers/MobilePush/Edit/index.js

@@ -177,9 +177,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     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 : {}}, () => {
-        this.handleEditSchemaOnPropsChange(nextProps, selectedWeChatAccount);
+        // 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
@@ -293,7 +295,7 @@ 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 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 }) );
     // let inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${id}-select` : `${id}-text`;
     // if (field.id === "cta-deeplink-secondary-cta-1" && (tabIndex > 1 || this.state.currentTab > 1)) {
@@ -665,8 +667,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(JSON.parse(ck ? selectedWeChatAccount?.configs?.deeplink ?? '[]' : '[]'), (l) => l.link === link);
     if (deepLinkOptions[0]) {
       return deepLinkOptions[0].name;
     }
@@ -727,6 +729,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",
@@ -749,6 +772,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       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;
@@ -1088,7 +1114,7 @@ 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 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 inputFields = get(schema, `containers[0].panes[${currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`);
@@ -1240,7 +1266,7 @@ 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 ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
                           const configkeys = selectedWeChatAccount ? _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
                           if (configkeys.length) {
                             const options = configkeys[0].keys;
@@ -1352,7 +1378,7 @@ 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 ck = selectedWeChatAccount?.configs ? !!selectedWeChatAccount.configs.deeplink : false;
                           const configkeys = selectedWeChatAccount ? _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
 
                           if (configkeys.length) {
@@ -1706,7 +1732,7 @@ 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;
+    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]) : [];
     if (keys[0]) {
       keys = keys[0].keys;
@@ -1756,7 +1782,7 @@ 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 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 eventsMap = _.cloneDeep(this.state.eventsMap);
     const tabIndex = currentTab || this.state.currentTab;
@@ -1787,7 +1813,7 @@ 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 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`);
     const fieldIndex = findIndex(inputFields, {identifier: id});
@@ -2004,8 +2030,23 @@ 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 queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
+    const isEmbeddedLibrary = queryType === EMBEDDED && !nextProps.isFullMode;
+    const canSetAccountFromTemplate =
+      !selectedWeChatAccount &&
+      nextProps.templateDetails?.definition?.accountId &&
+      nextProps.Edit?.weCrmAccounts?.length > 0;
+    const canPopulateForm =
+      !_.isEmpty(nextProps.templateDetails) &&
+      _.isEmpty(this.state.editData) &&
+      !_.isEmpty(this.state.fullSchema) &&
+      (this.props.location.query.type !== 'embedded' || this.props.isFullMode === false) &&
+      (selectedWeChatAccount || isEmbeddedLibrary || canSetAccountFromTemplate);
+    if (canPopulateForm) {
       this.props = nextProps;
+      if (canSetAccountFromTemplate) {
+        this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts, nextProps.templateDetails.definition.accountId);
+      }
       const mode = nextProps.templateDetails.definition ? nextProps.templateDetails.definition.mode : nextProps.templateDetails.mode;
       const schema = mode === "text" ? this.state.fullSchema?.textSchema : this.state.fullSchema?.imageSchema;
       const isAndroidSupported = get(this, "props.Templates.selectedWeChatAccount.configs.android") === '1';
@@ -2040,7 +2081,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         <CapSpin spinning={spinning}>
           <CapRow>
             <CapColumn>
-              <FormBuilder
+              {!this.props.isLoadingMetaEntities && <FormBuilder
                 channel={MOBILE_PUSH}
                 schema={schema}
                 showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
@@ -2075,7 +2116,7 @@ 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