@capillarytech/creatives-library 8.0.271 → 8.0.273

package/v2Containers/InappAdvance/index.scss

@@ -0,0 +1,10 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+.cap-inapp-creatives {
+  #inapp-layout-dropdown {
+    width: 20.5rem;
+  }
+  .inapp-creative-layout {
+    margin-top: $CAP_SPACE_04;
+    margin-bottom: $CAP_SPACE_08;
+  }
+}

package/v2Containers/InappAdvance/tests/index.test.js

@@ -0,0 +1,448 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import '@testing-library/jest-dom';
+import { injectIntl } from 'react-intl';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import history from '../../../utils/history';
+import { initialReducer } from '../../../initialReducer';
+import { InappAdvanced } from '../index';
+import { render, screen, fireEvent, waitFor } from '../../../utils/test-utils';
+
+// Mock child components that are complex or not under test
+jest.mock('../../BeePopupEditor', () => ({
+  __esModule: true,
+  default: (props) => (
+    <div
+      data-testid={`bee-popup-editor-${props.device}`}
+      data-device={props.device}
+      data-template-layout-type={props.templateLayoutType}
+    >
+      BeePopupEditor - {props.device}
+      <button
+        onClick={() => props.saveBeeData('{"test": "json"}', '<p>Test HTML</p>', props.device)}
+        data-testid={`save-bee-data-${props.device}`}
+      >
+        Save Bee Data
+      </button>
+      <button
+        onClick={() => props.saveBeeInstance({ mockInstance: true })}
+        data-testid={`save-bee-instance-${props.device}`}
+      >
+        Save Bee Instance
+      </button>
+    </div>
+  ),
+}));
+
+let store;
+beforeAll(() => {
+  store = configureStore({}, initialReducer, history);
+});
+
+const ComponentToRender = injectIntl(InappAdvanced);
+const renderComponent = (props) =>
+  render(
+    <Provider store={store}>
+      <ComponentToRender {...props} />
+    </Provider>
+  );
+
+describe('InappAdvanced Component', () => {
+  let defaultProps;
+  let mockActions;
+
+  beforeEach(() => {
+    mockActions = {
+      getBeePopupBuilderToken: jest.fn(),
+      createInAppTemplate: jest.fn(),
+      editTemplate: jest.fn(),
+      clearCreateResponse: jest.fn(),
+    };
+
+    const mockGlobalActions = {
+      fetchSchemaForEntity: jest.fn(),
+    };
+
+    defaultProps = {
+      intl: {
+        formatMessage: jest.fn((msg) => msg.defaultMessage || msg.id),
+      },
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      isFullMode: true,
+      onCreateComplete: jest.fn(),
+      params: { id: 'test-id' },
+      templateData: {},
+      editData: {},
+      accountData: {
+        selectedWeChatAccount: {
+          sourceAccountIdentifier: 'test-account',
+          id: 'account-123',
+          configs: {
+            android: '1',
+            ios: '1',
+          },
+        },
+      },
+      location: {
+        pathname: '/inapp/create',
+        query: { type: 'inapp' },
+        search: '',
+      },
+      getDefaultTags: 'inapp',
+      supportedTags: [],
+      metaEntities: {
+        tags: {
+          standard: [],
+        },
+      },
+      injectedTags: [],
+      getFormData: jest.fn(),
+      templateName: 'Test Template',
+      setTemplateName: jest.fn(),
+      beePopupBuilderTokenFetching: false,
+      beePopupBuilderToken: {
+        uuid: 'test-uuid-123',
+        token: 'test-token-456',
+      },
+    };
+  });
+
+  describe('Component Initialization', () => {
+    it('should render without crashing', () => {
+      renderComponent(defaultProps);
+
+      expect(screen.getByText('Create')).toBeInTheDocument();
+    });
+
+    it('should call getBeePopupBuilderToken on mount', () => {
+      renderComponent(defaultProps);
+
+      expect(mockActions.getBeePopupBuilderToken).toHaveBeenCalledTimes(1);
+    });
+
+    it('should show loading spinner when beePopupBuilderTokenFetching is true', () => {
+      renderComponent({
+        ...defaultProps,
+        beePopupBuilderTokenFetching: true,
+      });
+
+      // The spinner should be present but we can't easily test for it without mocking
+      expect(screen.getByText('Create')).toBeInTheDocument();
+    });
+  });
+
+  describe('Layout Selection', () => {
+    it('should render layout selection when isFullMode is true', () => {
+      renderComponent({
+        ...defaultProps,
+        isFullMode: true,
+      });
+
+      expect(screen.getByText('Creative layout')).toBeInTheDocument();
+      // CapSelect from cap-ui-library should render a select element
+      const selectElements = screen.getAllByRole('button');
+      expect(selectElements.length).toBeGreaterThan(0);
+    });
+
+    it('should update layout type when selection changes', () => {
+      renderComponent(defaultProps);
+
+      // Layout selection should be rendered
+      expect(screen.getByText('Creative layout')).toBeInTheDocument();
+    });
+  });
+
+  describe('Device Tabs', () => {
+    it('should render device tabs with Android and iOS options', () => {
+      renderComponent(defaultProps);
+
+      expect(screen.getByText('Android')).toBeInTheDocument();
+      expect(screen.getByText('IOS')).toBeInTheDocument();
+    });
+
+    it('should show BeePopupEditor for Android when Android tab is active', () => {
+      renderComponent({
+        ...defaultProps,
+        beePopupBuilderToken: { uuid: 'test-uuid' },
+      });
+
+      expect(screen.getByTestId('bee-popup-editor-ANDROID')).toBeInTheDocument();
+    });
+
+    it('should only show supported device tabs', () => {
+      renderComponent({
+        ...defaultProps,
+        accountData: {
+          selectedWeChatAccount: {
+            configs: {
+              android: '0', // Not supported
+              ios: '1',     // Supported
+            },
+          },
+        },
+      });
+
+      expect(screen.queryByText('Android')).not.toBeInTheDocument();
+      expect(screen.getByText('IOS')).toBeInTheDocument();
+    });
+  });
+
+  describe('BeePopupEditor Integration', () => {
+    it('should pass correct props to BeePopupEditor', () => {
+      renderComponent({
+        ...defaultProps,
+        beePopupBuilderToken: { uuid: 'test-uuid' },
+      });
+
+      const beeEditor = screen.getByTestId('bee-popup-editor-ANDROID');
+      expect(beeEditor).toHaveAttribute('data-device', 'ANDROID');
+      expect(beeEditor).toHaveAttribute('data-template-layout-type', 'MODAL');
+    });
+
+    it('should handle saveBeeData callback correctly', () => {
+      renderComponent({
+        ...defaultProps,
+        beePopupBuilderToken: { uuid: 'test-uuid' },
+      });
+
+      const saveBeeDataButton = screen.getByTestId('save-bee-data-ANDROID');
+      fireEvent.click(saveBeeDataButton);
+
+      // The component should update its internal state with the JSON and HTML
+      expect(saveBeeDataButton).toBeInTheDocument(); // Basic check that callback was handled
+    });
+
+    it('should handle saveBeeInstance callback correctly', () => {
+      renderComponent({
+        ...defaultProps,
+        beePopupBuilderToken: { uuid: 'test-uuid' },
+      });
+
+      const saveBeeInstanceButton = screen.getByTestId('save-bee-instance-ANDROID');
+      fireEvent.click(saveBeeInstanceButton);
+
+      // The component should store the bee instance
+      expect(saveBeeInstanceButton).toBeInTheDocument(); // Basic check that callback was handled
+    });
+
+    it('should not render BeePopupEditor when no token is available', () => {
+      renderComponent({
+        ...defaultProps,
+        beePopupBuilderToken: null,
+      });
+
+      expect(screen.queryByTestId('bee-popup-editor-ANDROID')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Action Buttons', () => {
+    it('should render Create button in full mode for new templates', () => {
+      renderComponent({
+        ...defaultProps,
+        isFullMode: true,
+      });
+
+      expect(screen.getByText('Create')).toBeInTheDocument();
+    });
+
+    it('should render Update button in edit mode', () => {
+      renderComponent({
+        ...defaultProps,
+        isFullMode: true,
+        editData: {
+          templateDetails: {
+            name: 'Existing Template',
+            versions: {
+              base: {
+                content: {
+                  ANDROID: { title: 'Test' },
+                },
+              },
+            },
+          },
+        },
+      });
+
+      expect(screen.getByText('Update')).toBeInTheDocument();
+    });
+
+    it('should render Done button in library mode', () => {
+      renderComponent({
+        ...defaultProps,
+        isFullMode: false,
+      });
+
+      expect(screen.getByText('Done')).toBeInTheDocument();
+    });
+
+    it('should call appropriate action when Create button is clicked', async () => {
+      renderComponent({
+        ...defaultProps,
+        isFullMode: true,
+      });
+
+      const createButton = screen.getByText('Create');
+      fireEvent.click(createButton);
+
+      // Wait for async operations to complete
+      await waitFor(() => {
+        expect(mockActions.createInAppTemplate).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+  });
+
+  describe('Form Data Integration', () => {
+    it('should call getFormData when in library mode', async () => {
+      const mockGetFormData = jest.fn();
+      renderComponent({
+        ...defaultProps,
+        isFullMode: false,
+        getFormData: mockGetFormData,
+      });
+
+      const doneButton = screen.getByText('Done');
+      fireEvent.click(doneButton);
+
+      // Wait for async operations to complete
+      await waitFor(() => {
+        expect(mockGetFormData).toHaveBeenCalledWith({
+          value: expect.any(Object),
+          _id: 'test-id',
+          validity: true,
+          type: 'INAPP',
+        });
+      }, { timeout: 3000 });
+    });
+  });
+
+  describe('Template Name Integration', () => {
+    it('should display the template name when provided', () => {
+      renderComponent({
+        ...defaultProps,
+        templateName: 'My Awesome Template',
+      });
+
+      // Template name should be used in the payload creation
+      expect(screen.getByText('Create')).toBeInTheDocument();
+    });
+
+    it('should handle setTemplateName callback', () => {
+      const mockSetTemplateName = jest.fn();
+      renderComponent({
+        ...defaultProps,
+        setTemplateName: mockSetTemplateName,
+      });
+
+      // The component should be able to update template name
+      expect(mockSetTemplateName).toBeDefined();
+    });
+  });
+
+  describe('Account Data Integration', () => {
+    it('should handle missing account data gracefully', () => {
+      renderComponent({
+        ...defaultProps,
+        accountData: {},
+      });
+
+      // Component should render without crashing
+      expect(screen.getByText('Create')).toBeInTheDocument();
+    });
+
+    it('should use account data in payload creation', () => {
+      renderComponent({
+        ...defaultProps,
+        accountData: {
+          selectedWeChatAccount: {
+            sourceAccountIdentifier: 'test-account-123',
+            id: 'account-456',
+          },
+        },
+      });
+
+      // Account data should be used when creating the payload
+      expect(screen.getByText('Create')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edit Flow', () => {
+    it('should initialize edit flow when editData is provided', () => {
+      renderComponent({
+        ...defaultProps,
+        editData: {
+          templateDetails: {
+            name: 'Existing Template',
+            createdAt: '2023-01-01',
+            versions: {
+              base: {
+                content: {
+                  ANDROID: {
+                    isBEEeditor: true,
+                    beeJson: '{"test": "json"}',
+                    beeHtml: '<p>Test HTML</p>',
+                  },
+                  IOS: {
+                    isBEEeditor: true,
+                    beeJson: '{"test": "ios-json"}',
+                    beeHtml: '<p>iOS Test HTML</p>',
+                  },
+                },
+              },
+            },
+          },
+        },
+      });
+
+      // Should show Update button in edit flow
+      expect(screen.getByText('Update')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle missing props gracefully', () => {
+      expect(() => {
+        renderComponent({
+          intl: {
+            formatMessage: jest.fn((msg) => msg.defaultMessage || msg.id),
+          },
+          actions: mockActions,
+          globalActions: {
+            fetchSchemaForEntity: jest.fn(),
+          },
+          location: {
+            pathname: '/inapp/create',
+            query: { type: 'inapp' },
+            search: '',
+          },
+        });
+      }).not.toThrow();
+    });
+
+    it('should handle undefined beePopupBuilderToken gracefully', () => {
+      renderComponent({
+        ...defaultProps,
+        beePopupBuilderToken: undefined,
+      });
+
+      expect(screen.getByText('Create')).toBeInTheDocument();
+    });
+  });
+
+  describe('Responsive Behavior', () => {
+    it('should apply correct CSS classes for different modes', () => {
+      const { container } = renderComponent(defaultProps);
+
+      expect(container.querySelector('.cap-inapp-creatives')).toBeInTheDocument();
+    });
+
+    it('should show footer with correct classes in library mode', () => {
+      const { container } = renderComponent({
+        ...defaultProps,
+        isFullMode: false,
+      });
+
+      expect(container.querySelector('.inapp-footer-lib')).toBeInTheDocument();
+    });
+  });
+});

package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap

@@ -2281,6 +2281,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -5964,6 +5965,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -9786,6 +9788,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],

package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/index.test.js.snap

@@ -2281,6 +2281,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -21554,6 +21555,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],

package/v2Containers/Line/Container/Wrapper/tests/__snapshots__/index.test.js.snap

@@ -2281,6 +2281,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -34885,6 +34886,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],

package/v2Containers/Line/Container/tests/__snapshots__/index.test.js.snap

@@ -2281,6 +2281,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -11299,6 +11300,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -20501,6 +20503,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -29980,6 +29983,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -41680,6 +41684,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -53422,6 +53427,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -61214,6 +61220,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -69424,6 +69431,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],
@@ -77911,6 +77919,7 @@ new message content.",
         "email": [Function],
         "facebookPreview": [Function],
         "gallery": [Function],
+        "inApp": [Function],
         "language": [Function],
         "navigationConfig": [Function],
         "previewAndTest": [Function],

package/v2Containers/MobilePush/Create/index.js

@@ -114,7 +114,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (nextProps.iosCtasData && isEmpty(this.state.templateCta)) {
       this.setState({showIosCtaTable: true});
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && isEmpty(this.state.schema)) {
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && isEmpty(this.state.schema) && isEmpty(this.state.formData)) {
       const schema = this.props.params.mode === "text" ? nextProps.metaEntities.layouts[0].definition.textSchema : nextProps.metaEntities.layouts[0].definition.imageSchema;
       const isAndroidSupported = get(this, "props.Templates.selectedWeChatAccount.configs.android") === '1';
       const isIosSupported = get(this, "props.Templates.selectedWeChatAccount.configs.ios") === '1';

package/v2Containers/MobilePush/Edit/index.js

@@ -167,8 +167,8 @@ 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 : {}}, () => {
+    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);
         const templateId = get(this, "props.params.id");
         if (nextProps.location.query.module !== 'loyalty' && templateId && templateId !== 'temp') {
@@ -388,11 +388,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         }
       });
     } else {
-      selectedAccount = accounts[0];
+      selectedAccount = accounts?.[0];
       formData['mobilepush-accounts'] = selectedAccount?.id;
     }
     this.props.actions.setWeChatAccount(selectedAccount);
-    this.setState({formData, accountsOptions: accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id}))});
+    this.setState({ formData, accountsOptions: accounts?.map((acc) => ({ key: acc.id, label: acc.name, value: acc.id })) });
   };
 
   createDefinition = (account) => ({
@@ -2018,12 +2018,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.supportedTags) {
       tags = this.props.supportedTags;
     }
+    if (this.props.supportedTags) {
+      tags = this.props.supportedTags;
+    }
     return (
       <div className="creatives-mobilepush-edit mobilepush-wrapper">
         <CapSpin spinning={spinning}>
           <CapRow>
             <CapColumn>
-              {!this.props.isLoadingMetaEntities && <FormBuilder
+              <FormBuilder
+                key={!_.isEmpty(schema) ? 'has-schema' : 'no-schema'}
                 channel={MOBILE_PUSH}
                 schema={schema}
                 showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
@@ -2058,7 +2062,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