@capillarytech/creatives-library 9.0.73-alpha.sprint-testpreview.22 → 9.1.1

package/v2Containers/Whatsapp/index.js

@@ -3268,10 +3268,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     accountData,
   ]);
 
-  // Set when opened from listing "Preview and test"; closing then returns to the listing.
-  const isTestAndPreviewFromListingRef = useRef(false);
-  const hasAutoOpenedTestAndPreviewRef = useRef(false);
-
   // Handle Test and Preview button click
   const handleTestAndPreview = useCallback(() => {
     setShowTestAndPreviewSlidebox(true);
@@ -3288,20 +3284,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     if (propsHandleCloseTestAndPreview) {
       propsHandleCloseTestAndPreview();
     }
-    if (isTestAndPreviewFromListingRef.current && handleClose) {
-      isTestAndPreviewFromListingRef.current = false;
-      handleClose();
-    }
-  }, [propsHandleCloseTestAndPreview, handleClose]);
-
-  // Listing "Preview and test": open Test & Preview once the template is hydrated.
-  useEffect(() => {
-    if (!isFullMode || !templateData?.openTestAndPreview || hasAutoOpenedTestAndPreviewRef.current) return;
-    if (spin || !isEditFlow || templateStatus !== WHATSAPP_STATUSES.approved) return;
-    hasAutoOpenedTestAndPreviewRef.current = true;
-    isTestAndPreviewFromListingRef.current = true;
-    handleTestAndPreview();
-  }, [isFullMode, templateData?.openTestAndPreview, spin, isEditFlow, templateStatus, handleTestAndPreview]);
+  }, [propsHandleCloseTestAndPreview]);
 
   return (
     <CapSpin spinning={spin || metaDataStatus === REQUEST}>

package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap
-size: 57271855 bytes
-sha256: d1e9c0cd51e8b68c9acd1ddeee01866302a054ed135d594d34509d92a3e39124
+size: 57265074 bytes
+sha256: 0c93028e0289bec64b42e30d37d66d0dddeaff992fb34ccc59499c9c2015f430

package/v2Containers/Zalo/index.js

@@ -30,7 +30,6 @@ import './index.scss';
 import {
   SUCCESS_ALERT,
   REQUEST,
-  SUCCESS,
   EMBEDDED,
   DEFAULT,
   TAG,
@@ -83,7 +82,6 @@ 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.
@@ -97,9 +95,6 @@ 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,
   );
@@ -515,21 +510,8 @@ 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/Rcs/tests/testAndPreviewFromListing.test.js

@@ -1,132 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
-import { initialReducer } from '../../../initialReducer';
-import { mountWithIntl } from '../../../../app/helpers/intl-enzym-test-helpers';
-import { Rcs } from '../index';
-import history from '../../../utils/history';
-
-jest.mock('react-redux', () => {
-  const actual = jest.requireActual('react-redux');
-  return { ...actual, useDispatch: jest.fn(() => jest.fn()) };
-});
-jest.mock('../../../v2Containers/TagList/index.js', () => ({
-  __esModule: true,
-  default: () => <div className="tag-mock">TagList</div>,
-}));
-jest.mock('../../../v2Components/CapImageUpload', () => ({
-  __esModule: true,
-  default: () => <div className="cap-image-upload-mock" />,
-}));
-jest.mock('../../../v2Components/CapVideoUpload', () => ({
-  __esModule: true,
-  default: () => <div className="cap-video-upload-mock" />,
-}));
-jest.mock('../../../v2Components/CapActionButton', () => ({
-  __esModule: true,
-  default: () => <div className="cap-action-button-mock" />,
-}));
-jest.mock('@capillarytech/cap-ui-library/CapIcon', () => ({
-  __esModule: true,
-  default: () => <span className="cap-icon-mock" />,
-}));
-jest.mock('../../CreativesContainer', () => ({
-  __esModule: true,
-  default: () => <div className="creatives-container-mock" />,
-}));
-// Stub exposes only open state + close action.
-jest.mock('../../../v2Components/TestAndPreviewSlidebox', () => ({
-  __esModule: true,
-  default: ({ show, onClose }) => (show ? <button type="button" className="mock-test-preview-close" onClick={onClose} /> : null),
-}));
-
-let store;
-beforeAll(() => {
-  store = configureStore({}, initialReducer, history);
-});
-
-const buildTemplateDetails = (status) => ({
-  _id: 'rcs_1',
-  name: 'RcsTemplate',
-  type: 'RCS',
-  versions: {
-    base: {
-      content: {
-        RCS: {
-          rcsContent: {
-            cardType: 'STANDALONE',
-            cardSettings: { cardOrientation: 'VERTICAL' },
-            contentType: 'text_message',
-            cardContent: [{ title: '', description: 'Hello there', mediaType: 'NONE', Status: status }],
-          },
-        },
-      },
-    },
-  },
-});
-
-describe('Rcs - Preview and test from listing', () => {
-  const handleClose = jest.fn();
-
-  const renderEdit = (templateData, status = 'approved') => {
-    const wrapper = mountWithIntl(
-      <Provider store={store}>
-        <Rcs
-          actions={{
-            uploadRcsAsset: jest.fn(),
-            clearRcsMediaAsset: jest.fn(),
-            createTemplate: jest.fn(),
-            clearCreateResponse: jest.fn(),
-            // Details come in via rcsData; just release the spinner.
-            getTemplateDetails: jest.fn((id, setSpin) => setSpin && setSpin(false)),
-            editTemplate: jest.fn(),
-            clearEditResponse: jest.fn(),
-          }}
-          globalActions={{ fetchSchemaForEntity: jest.fn() }}
-          onCreateComplete={jest.fn()}
-          handleClose={handleClose}
-          intl={{ formatMessage: jest.fn() }}
-          location={{ pathname: '/rcs/edit', query: { type: false, module: 'default' }, search: '' }}
-          params={{ id: 'rcs_1' }}
-          rcsData={{ templateDetails: buildTemplateDetails(status) }}
-          templateData={templateData}
-          isFullMode
-          loadingTags={false}
-          metaEntities={[]}
-          getDefaultTags
-          smsRegister="DLT"
-        />
-      </Provider>,
-    );
-    wrapper.update();
-    return wrapper;
-  };
-
-  it('auto-opens Test & Preview for an approved template and returns to the listing on close', () => {
-    const wrapper = renderEdit({ openTestAndPreview: true });
-    const closeButton = wrapper.find('button.mock-test-preview-close');
-    expect(closeButton.exists()).toBe(true);
-
-    closeButton.simulate('click');
-    expect(handleClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not auto-open without the listing flag', () => {
-    const wrapper = renderEdit({});
-    expect(wrapper.find('button.mock-test-preview-close').exists()).toBe(false);
-  });
-
-  it('does not auto-open for a template that is not approved', () => {
-    const wrapper = renderEdit({ openTestAndPreview: true }, 'pending');
-    expect(wrapper.find('button.mock-test-preview-close').exists()).toBe(false);
-  });
-
-  it('keeps the editor open when Test & Preview was opened from the footer', () => {
-    const wrapper = renderEdit({});
-    wrapper.find('button.rcs-test-preview-btn').last().simulate('click');
-    wrapper.update();
-
-    wrapper.find('button.mock-test-preview-close').simulate('click');
-    expect(handleClose).not.toHaveBeenCalled();
-  });
-});

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

@@ -1,91 +0,0 @@
-import React from 'react';
-import { cloneDeep } from 'lodash';
-import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
-import { Provider } from 'react-redux';
-import history from '../../../utils/history';
-import { initialReducer } from '../../../initialReducer';
-import { mountWithIntl } from '../../../../app/helpers/intl-enzym-test-helpers';
-import { Whatsapp } from '../index';
-import { mockData } from './mockData';
-
-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" className="mock-test-preview-close" onClick={onClose} /> : null),
-}));
-
-let store;
-beforeAll(() => {
-  store = configureStore({}, initialReducer, history);
-});
-
-describe('Whatsapp - Preview and test from listing', () => {
-  const handleClose = jest.fn();
-
-  // Fresh fixture per render: the editor mutates nested template data.
-  const renderEdit = (templateData, editData = cloneDeep(mockData.editData1)) => {
-    const wrapper = mountWithIntl(
-      <Provider store={store}>
-        <Whatsapp
-          actions={{
-            createWhatsappTemplate: jest.fn(),
-            clearCreateResponse: jest.fn(),
-            getTemplateDetails: jest.fn(),
-            resetEditTemplate: jest.fn(),
-            getMetaTags: jest.fn(),
-            resetMetaTags: jest.fn(),
-          }}
-          globalActions={{ fetchSchemaForEntity: jest.fn() }}
-          onCreateComplete={jest.fn()}
-          handleClose={handleClose}
-          getFormData={jest.fn()}
-          params={{ id: editData.templateDetails._id }}
-          editData={editData}
-          templateData={templateData}
-          accountData={mockData.accountData1}
-          location={mockData.location}
-          intl={{ formatMessage: jest.fn() }}
-          isFullMode
-          loadingTags={false}
-          metaEntities={[]}
-          getDefaultTags
-          Templates={{}}
-        />
-      </Provider>,
-    );
-    wrapper.update();
-    return wrapper;
-  };
-
-  it('auto-opens Test & Preview for an approved template and returns to the listing on close', () => {
-    const wrapper = renderEdit({ openTestAndPreview: true });
-    const closeButton = wrapper.find('button.mock-test-preview-close');
-    expect(closeButton.exists()).toBe(true);
-
-    closeButton.simulate('click');
-    expect(handleClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not auto-open without the listing flag', () => {
-    const wrapper = renderEdit({});
-    expect(wrapper.find('button.mock-test-preview-close').exists()).toBe(false);
-  });
-
-  it('does not auto-open for a template that is not approved', () => {
-    const wrapper = renderEdit({ openTestAndPreview: true }, cloneDeep(mockData.editData2));
-    expect(wrapper.find('button.mock-test-preview-close').exists()).toBe(false);
-  });
-
-  it('keeps the editor open when Test & Preview was opened from the footer', () => {
-    const wrapper = renderEdit({});
-    wrapper.find('button.whatsapp-test-preview-btn').simulate('click');
-    wrapper.update();
-
-    wrapper.find('button.mock-test-preview-close').simulate('click');
-    expect(handleClose).not.toHaveBeenCalled();
-  });
-});

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

@@ -1,98 +0,0 @@
-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();
-  });
-});