@capillarytech/creatives-library 8.0.141 → 8.0.142

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

@@ -0,0 +1,442 @@
+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', 'POPUP');
+    });
+
+    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', () => {
+      renderComponent({
+        ...defaultProps,
+        isFullMode: true,
+      });
+      
+      const createButton = screen.getByText('Create');
+      fireEvent.click(createButton);
+      
+      expect(mockActions.createInAppTemplate).toHaveBeenCalled();
+    });
+  });
+
+  describe('Form Data Integration', () => {
+    it('should call getFormData when in library mode', () => {
+      const mockGetFormData = jest.fn();
+      renderComponent({
+        ...defaultProps,
+        isFullMode: false,
+        getFormData: mockGetFormData,
+      });
+      
+      const doneButton = screen.getByText('Done');
+      fireEvent.click(doneButton);
+      
+      expect(mockGetFormData).toHaveBeenCalledWith({
+        value: expect.any(Object),
+        _id: 'test-id',
+        validity: true,
+        type: 'INAPP',
+      });
+    });
+  });
+
+  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/InappWrapper/_inappWrapper.scss

@@ -0,0 +1,19 @@
+.inapp-wrapper {
+    
+  .ant-radio-group.cap-radioCard-v2 {
+      .ant-radio-button-wrapper{
+          width: 284px;
+          height: 258px;
+      }
+      .ant-card-body {
+          padding: 1rem;
+      }
+  }
+}
+.template-name-inapp {
+    width: 580px;
+    margin-bottom: 1.5rem;
+    .ant-input {
+        height: 40px;
+    }
+}

package/v2Containers/InappWrapper/index.js

@@ -0,0 +1,194 @@
+/*
+ *
+ * InappWrapper
+ *
+ */
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { FormattedMessage } from "react-intl";
+import CapRadioCard from "@capillarytech/cap-ui-library/CapRadioCard";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import ComponentWithLabelHOC from "@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC";
+import styled from "styled-components";
+import InApp from "../InApp/index";
+import InappAdvanced from "../InappAdvanced/index";
+import messages from "./messages";
+import "./_inappWrapper.scss";
+
+const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
+const CardContainer = styled.div`
+  margin-top: 16px;
+  .component-with-label-label {
+    margin-bottom: unset;
+  }
+  .ant-radio-group {
+    .ant-radio-button-wrapper {
+      &:first-child {
+        margin-left: unset;
+        margin-top: unset;
+      }
+    }
+  }
+`;
+export function InappWrapper(props) {
+  const {
+    inAppCreateMode,
+    step,
+    getFormData,
+    setIsLoadingContent,
+    isGetFormData,
+    query,
+    isFullMode,
+    showTemplateName,
+    type,
+    onValidationFail,
+    templateData,
+    onInAppModeChange,
+    onEnterTemplateName,
+    onRemoveTemplateName,
+    forwardedTags,
+    selectedOfferDetails,
+    onCreateComplete,
+  } = props;
+  const [templateName, setTemplateName] = useState("");
+  const modes = [
+    {
+      title: <FormattedMessage {...messages.basicEditor} />,
+      icon: <CapIcon type="notepad-material" />,
+      content: <FormattedMessage {...messages.basicEditorDesc} />,
+      value: "basicEditor",
+    },
+    {
+      title: <FormattedMessage {...messages.dndEditor} />,
+      icon: <CapIcon type="draggable" />,
+      content: <FormattedMessage {...messages.dndEditorDesc} />,
+      value: "beeEditor",
+    },
+  ];
+
+  const onChange = (e) => {
+    onInAppModeChange(e.target.value);
+  };
+
+  function onTemplateNameChange(event) {
+    setTemplateName(event.target.value);
+    if (event.target.value && onEnterTemplateName) {
+      onEnterTemplateName();
+    } else if (onRemoveTemplateName) {
+      onRemoveTemplateName();
+    }
+  }
+
+  return (
+    <div className="inapp-wrapper">
+      {step === "modeSelection" ? (
+        <div>
+          {isFullMode && (
+            <CapInput
+              className="template-name-inapp"
+              label={<FormattedMessage {...messages.creativeName} />}
+              onChange={onTemplateNameChange}
+              value={templateName}
+              labelPosition="top"
+              size="default"
+              data-testid="template-name-input"
+            />
+          )}
+          <CardContainer>
+            <CapRadioCardWithLabel
+              label={<FormattedMessage {...messages.modeDesc} />}
+              panes={modes}
+              cardHeight="8.6rem"
+              onChange={onChange}
+              selected={inAppCreateMode}
+              data-testid="cap-radio-card"
+            />
+          </CardContainer>
+        </div>
+      ) : (
+        <div>
+          {inAppCreateMode === 'basicEditor' && (
+            <InApp
+              getFormData={getFormData}
+              setIsLoadingContent={setIsLoadingContent}
+              defaultData={{ "template-name": templateName }}
+              location={{
+                pathname: `/inapp/create`,
+                query,
+                search: '',
+              }}
+              params={{ mode: inAppCreateMode }}
+              isFullMode={isFullMode}
+              isGetFormData={isGetFormData}
+              showTemplateName={showTemplateName}
+              route={{ name: "inapp" }}
+              getDefaultTags={type}
+              onValidationFail={onValidationFail}
+              templateData={templateData}
+              templateName={templateName}
+              setTemplateName={setTemplateName}
+              forwardedTags={forwardedTags}
+              selectedOfferDetails={selectedOfferDetails}
+              onCreateComplete={onCreateComplete}
+            />
+          )}
+          {inAppCreateMode === 'beeEditor' && (
+            <InappAdvanced
+              getFormData={getFormData}
+              setIsLoadingContent={setIsLoadingContent}
+              defaultData={{ "template-name": templateName }}
+              location={{
+                pathname: `/inapp/create`,
+                query,
+                search: '',
+              }}
+              params={{ mode: inAppCreateMode }}
+              isFullMode={isFullMode}
+              isGetFormData={isGetFormData}
+              showTemplateName={showTemplateName}
+              route={{ name: "inapp" }}
+              getDefaultTags={type}
+              onValidationFail={onValidationFail}
+              templateData={templateData}
+              templateName={templateName}
+              setTemplateName={setTemplateName}
+              forwardedTags={forwardedTags}
+              selectedOfferDetails={selectedOfferDetails}
+              onCreateComplete={onCreateComplete}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+InappWrapper.propTypes = {
+  onInAppModeChange: PropTypes.func,
+  inAppCreateMode: PropTypes.string,
+  step: PropTypes.string,
+  getFormData: PropTypes.f,
+  setIsLoadingContent: PropTypes.func,
+  onEnterTemplateName: PropTypes.func,
+  onRemoveTemplateName: PropTypes.func,
+  isGetFormData: PropTypes.bool,
+  query: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  showTemplateName: PropTypes.func,
+  type: PropTypes.string,
+  onValidationFail: PropTypes.func,
+  forwardedTags: PropTypes.object,
+  templateData: PropTypes.object,
+  selectedOfferDetails: PropTypes.object,
+  onCreateComplete: PropTypes.func,
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(null, mapDispatchToProps)(InappWrapper);

package/v2Containers/InappWrapper/messages.js

@@ -0,0 +1,38 @@
+/*
+ * MobilepushWrapper Messages
+ *
+ * This contains all the text for the MobilepushWrapper component.
+ */
+import { defineMessages } from 'react-intl';
+const prefix = "app.v2Containers.InappWrapper";
+
+export default defineMessages({
+  header: {
+    id: `${prefix}.header`,
+    defaultMessage: 'This is MobilepushWrapper container !',
+  },
+  basicEditor: {
+    id: `${prefix}.basicEditor`,
+    defaultMessage: 'Basic editor',
+  },
+  basicEditorDesc: {
+    id: `${prefix}.basicEditorDesc`,
+    defaultMessage: 'This form creates in-app message templates with basic customization options and supports only four layouts.',
+  },
+  dndEditor: {
+    id: `${prefix}.dndEditor`,
+    defaultMessage: 'Drag & drop editor',
+  },
+  dndEditorDesc: {
+    id: `${prefix}.dndEditorDesc`,
+    defaultMessage: 'This advanced editor, powered by Beefree template builder, offers full customization options and supports all layouts.',
+  },
+  modeDesc: {
+    id: `${prefix}.modeDesc`,
+    defaultMessage: 'Which editor do you want to use to create this template?',
+  },
+  creativeName: {
+    id: `${prefix}.creativeName`,
+    defaultMessage: 'Creative name',
+  },
+});