@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

package/v2Containers/InappAdvance/index.scss

@@ -1,10 +0,0 @@
-@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

@@ -1,448 +0,0 @@
-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/WebPush/Create/components/BrandIconSection.js

@@ -1,108 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import CapImageUpload from '../../../../v2Components/CapImageUpload';
-import { WEBPUSH_BRAND_ICON } from '../../../CreativesContainer/constants';
-import {
-  BRAND_ICON_OPTIONS,
-  ALLOWED_IMAGE_EXTENSIONS_REGEX,
-  WEBPUSH_BRAND_ICON_SIZE,
-  WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS,
-} from '../../constants';
-
-/**
- * BrandIconSection component - Brand icon/logo upload options
- */
-export const BrandIconSection = ({
-  brandIconOption,
-  onBrandIconChange,
-  brandIconUpload,
-  isLocked,
-  isAnyUploadActive,
-  formatMessage,
-  messages,
-  webPush,
-  isFullMode,
-}) => {
-  const {
-    imageSrc: brandIconSrc,
-    uploadAsset: uploadBrandIconAsset,
-    setUpdateImageSrc: setUpdateBrandIconSrc,
-    updateOnReUpload: updateOnBrandIconReUpload,
-  } = brandIconUpload;
-
-  const brandIconOptions = [
-    { value: BRAND_ICON_OPTIONS.DONT_SHOW, label: formatMessage(messages.dontShow) },
-    { value: BRAND_ICON_OPTIONS.UPLOAD_IMAGE, label: formatMessage(messages.uploadImage) },
-    // NOTE: Commented out due to technical blocker - "Add image URL" option for Brand icon/logo
-    // { value: BRAND_ICON_OPTIONS.ADD_IMAGE_URL, label: formatMessage(messages.addImageUrl) },
-  ];
-
-  return (
-    <>
-      <CapRow className="creatives-webpush-brand-icon">
-        <CapHeading type="h4" className="webpush-brand-icon">
-          <FormattedMessage {...messages.brandIconLogo} />
-        </CapHeading>
-        <CapRadioGroup
-          options={brandIconOptions}
-          value={brandIconOption}
-          onChange={onBrandIconChange}
-          disabled={isAnyUploadActive}
-        />
-      </CapRow>
-      {brandIconOption === BRAND_ICON_OPTIONS.UPLOAD_IMAGE && (
-        <CapRow
-          className="webpush-brand-icon-upload-section"
-          style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-          aria-disabled={isLocked}
-        >
-          <CapImageUpload
-            allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
-            imgSize={WEBPUSH_BRAND_ICON_SIZE}
-            uploadAsset={uploadBrandIconAsset}
-            isFullMode={isFullMode}
-            imageSrc={brandIconSrc}
-            updateImageSrc={setUpdateBrandIconSrc}
-            updateOnReUpload={updateOnBrandIconReUpload}
-            index={1}
-            className="cap-custom-image-upload"
-            key="webpush-brand-icon-uploaded-image"
-            imageData={webPush}
-            channel={WEBPUSH_BRAND_ICON}
-            showReUploadButton
-            recommendedDimensions={WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS}
-            disabled={isLocked}
-          />
-        </CapRow>
-      )}
-      <CapDivider />
-    </>
-  );
-};
-
-BrandIconSection.propTypes = {
-  brandIconOption: PropTypes.string.isRequired,
-  onBrandIconChange: PropTypes.func.isRequired,
-  brandIconUpload: PropTypes.object.isRequired,
-  isLocked: PropTypes.bool,
-  isAnyUploadActive: PropTypes.bool,
-  formatMessage: PropTypes.func.isRequired,
-  messages: PropTypes.object.isRequired,
-  webPush: PropTypes.object,
-  isFullMode: PropTypes.bool,
-};
-
-BrandIconSection.defaultProps = {
-  isLocked: false,
-  isAnyUploadActive: false,
-  webPush: {},
-  isFullMode: true,
-};
-
-export default BrandIconSection;
-