@capillarytech/creatives-library 9.1.3 → 9.1.4

package/v2Containers/Zalo/index.js

@@ -30,6 +30,7 @@ import './index.scss';
 import {
   SUCCESS_ALERT,
   REQUEST,
+  SUCCESS,
   EMBEDDED,
   DEFAULT,
   TAG,
@@ -82,6 +83,7 @@ export const Zalo = (props) => {
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
     handleCloseTestAndPreview: propsHandleCloseTestAndPreview,
+    handleClose,
     onContentValidityChange,
   } = props || {};
   // Since zalo supports now multiple accounts, we need to get the hostname from the selected account or passed props.
@@ -95,6 +97,9 @@ export const Zalo = (props) => {
   const [templateListParams, setTemplateListParams] = useState([]);
   const [templatePreviewUrl, setTemplatePreviewUrl] = useState('');
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
+  // Set when opened from listing "Preview and test"; closing then returns to the listing.
+  const isTestAndPreviewFromListingRef = useRef(false);
+  const hasAutoOpenedTestAndPreviewRef = useRef(false);
   const [templateStatus, setZaloTemplateStatus] = useState(
     ZALO_STATUSES.ENABLE,
   );
@@ -510,8 +515,21 @@ export const Zalo = (props) => {
     if (propsHandleCloseTestAndPreview) {
       propsHandleCloseTestAndPreview();
     }
+    if (isTestAndPreviewFromListingRef.current && handleClose) {
+      isTestAndPreviewFromListingRef.current = false;
+      handleClose();
+    }
   };
 
+  // Listing "Preview and test": open Test & Preview once the template is loaded.
+  useEffect(() => {
+    if (!isFullMode || !templateData?.openTestAndPreview || hasAutoOpenedTestAndPreviewRef.current) return;
+    if (zaloTemplateInfoStatus !== SUCCESS || !templateId) return;
+    hasAutoOpenedTestAndPreviewRef.current = true;
+    isTestAndPreviewFromListingRef.current = true;
+    handleTestAndPreview();
+  }, [isFullMode, templateData?.openTestAndPreview, zaloTemplateInfoStatus, templateId]);
+
   return (
     <CapSpin spinning={[zaloTemplateInfoStatus, metaDataStatus].includes(REQUEST)}>
       <CapRow type="flex" className="cap-zalo-creatives">

package/v2Containers/Zalo/tests/testAndPreviewFromListing.test.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import history from '../../../utils/history';
+import { initialReducer } from '../../../initialReducer';
+import { Zalo } from '..';
+import { SUCCESS } from '../constants';
+import { metaEntities, location, getDefaultTags, injectedTags, accountData } from './mockData';
+import { render, screen, fireEvent } from '../../../utils/test-utils';
+
+jest.mock('../../../v2Containers/TagList/index.js', () => ({
+  __esModule: true,
+  default: () => <div className="tag-mock">TagList</div>,
+}));
+// Stub exposes only open state + close action.
+jest.mock('../../../v2Components/TestAndPreviewSlidebox', () => ({
+  __esModule: true,
+  default: ({ show, onClose }) => (show ? <button type="button" data-testid="mock-test-preview-close" onClick={onClose} /> : null),
+}));
+
+let store;
+beforeAll(() => {
+  store = configureStore({}, initialReducer, history);
+});
+
+const buildEditData = () => ({
+  zaloTemplateInfoStatus: SUCCESS,
+  zaloTemplateInfoValue: {
+    _id: 'zalo_1',
+    name: 'Zalo Template',
+    versions: {
+      base: {
+        content: {
+          zalo: {
+            templateId: '1',
+            listParams: [
+              { name: 'danh_xung', require: true, type: 'STRING', maxLength: 30, minLength: 0, error: '', value: '' },
+            ],
+            previewUrl: 'https://account.zalo.cloud/preview',
+            status: 'ENABLE',
+          },
+        },
+      },
+    },
+  },
+  zaloTemplateInfoError: null,
+});
+
+const ComponentToRender = injectIntl(Zalo);
+
+describe('Zalo - Preview and test from listing', () => {
+  const handleClose = jest.fn();
+  const handleTestAndPreview = jest.fn();
+
+  const renderZalo = (templateData) => render(
+    <Provider store={store}>
+      <ComponentToRender
+        actions={{ getTemplateInfoById: jest.fn(), resetTemplateInfoData: jest.fn() }}
+        globalActions={{ fetchSchemaForEntity: jest.fn() }}
+        editData={buildEditData()}
+        metaEntities={metaEntities}
+        location={location}
+        getDefaultTags={getDefaultTags}
+        injectedTags={injectedTags}
+        accountData={accountData}
+        templateData={templateData}
+        isFullMode
+        handleClose={handleClose}
+        handleTestAndPreview={handleTestAndPreview}
+      />
+    </Provider>,
+  );
+
+  it('auto-opens Test & Preview and returns to the listing on close', async () => {
+    renderZalo({ _id: 'zalo_1', templateConfigs: { id: '', varMapped: {} }, openTestAndPreview: true });
+    const closeButton = await screen.findByTestId('mock-test-preview-close');
+    expect(handleTestAndPreview).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(closeButton);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not auto-open without the listing flag', () => {
+    renderZalo({ _id: 'zalo_1', templateConfigs: { id: '', varMapped: {} } });
+    expect(screen.queryByTestId('mock-test-preview-close')).not.toBeInTheDocument();
+    expect(handleTestAndPreview).not.toHaveBeenCalled();
+  });
+
+  it('keeps the editor open when Test & Preview was opened from the footer', async () => {
+    const { container } = renderZalo({ _id: 'zalo_1', templateConfigs: { id: '', varMapped: {} } });
+    fireEvent.click(container.querySelector('.test-and-preview-button-zalo'));
+
+    fireEvent.click(await screen.findByTestId('mock-test-preview-close'));
+    expect(handleClose).not.toHaveBeenCalled();
+  });
+});