@capillarytech/creatives-library 8.0.206-alpha.0 → 8.0.206

package/v2Containers/Templates/ChannelTypeIllustration.js

@@ -1,188 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import emailIllustration from '../Assets/images/emailIllustration.svg';
-import smsIllustration from '../Assets/images/smsIllustration.svg';
-import pushIllustration from '../Assets/images/pushIllustration.svg';
-import viberIllustration from '../Assets/images/viberIllustration.svg';
-import lineIllustration from '../Assets/images/lineIllustration.svg';
-import facebookIllustration from '../Assets/images/facebookIllustration.svg';
-import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
-import whatsappOrZaloAccountIllustration from '../Assets/images/whatsappOrZaloAccountIllustration.svg';
-import rcsIllustration from '../Assets/images/rcsIllustration.png';
-import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
-import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
-import messages from './messages';
-import { FormattedMessage } from 'react-intl';
-import { CapIllustration } from "@capillarytech/cap-ui-library";
-import { MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP } from '../CreativesContainer/constants';
-
-
-// Configuration object for channel types
-const CHANNEL_CONFIG = {
-  [SMS]: {
-    illustrationImage: smsIllustration,
-    buttonMessage: messages.newSMSTemplate,
-    titleMessage: messages.smsTitleIllustartion,
-    hasButton: true,
-  },
-  [EMAIL]: {
-    illustrationImage: emailIllustration,
-    buttonMessage: messages.newEmailTemplate,
-    titleMessage: messages.emailTitleIllustartion,
-    hasButton: true,
-  },
-  [MOBILE_PUSH]: {
-    illustrationImage: pushIllustration,
-    buttonMessage: messages.newNotificationTemplate,
-    titleMessage: messages.pushTitleIllustartion,
-    hasButton: true,
-  },
-  [VIBER]: {
-    illustrationImage: viberIllustration,
-    buttonMessage: messages.newViberTemplate,
-    titleMessage: messages.viberTitleIllustartion,
-    hasButton: true,
-  },
-  [LINE]: {
-    illustrationImage: lineIllustration,
-    buttonMessage: messages.newLineTemplate,
-    titleMessage: messages.lineTitleIllustartion,
-    hasButton: true,
-  },
-  [FACEBOOK]: {
-    illustrationImage: facebookIllustration,
-    buttonMessage: messages.newFacebookTemplate,
-    titleMessage: messages.facebookTitleIllustartion,
-    hasButton: true,
-  },
-  [RCS]: {
-    illustrationImage: rcsIllustration,
-    buttonMessage: messages.newRCSTemplate,
-    titleMessage: messages.rcsTitleIllustartion,
-    descriptionMessage: messages.rcsDescIllustartion,
-    descriptionPosition: 'bottom',
-    descriptionClassName: 'illustration-desc rcs-illustration',
-    hasButton: true,
-  },
-  [INAPP]: {
-    illustrationImage: inAppIllustration,
-    titleMessage: messages.inAppTitleIllustration,
-    descriptionMessage: messages.inAppDescIllustration,
-    descriptionPosition: 'bottom',
-    descriptionClassName: 'illustration-desc inapp-illustration',
-    buttonClassName: 'inapp-illustration-button',
-    hasButton: false,
-  },
-};
-
-function ChannelTypeIllustration(props) {
-  const {
-    isFullMode,
-    createTemplate,
-    currentChannel,
-    hostName
-  } = props;
-
-  const templateText = useMemo(() => {
-    const templateIntlMsg = <FormattedMessage {...messages.template} />;
-    return isFullMode ? templateIntlMsg : '';
-  }, [isFullMode]);
-
-  const getChannelTypeIllustrationInfo = (type, hostName) => {
-    // Handle special cases with hostName dependency
-    if (type === WHATSAPP) {
-      if (!hostName) {
-        return {
-          illustrationImage: whatsappOrZaloAccountIllustration,
-          title: <FormattedMessage {...messages.whatsappAccountNotConfiguredTitle} />,
-          description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
-          descriptionPosition: 'bottom',
-          descriptionClassName: 'illustration-desc zalo-illustration',
-          buttonClassName: 'zalo-illustration-button',
-        };
-      }
-      return {
-        buttonLabel: <FormattedMessage {...messages.newWhatsappTemplate} values={{ template: templateText }} />,
-        onClick: createTemplate,
-        illustrationImage: whatsappIllustration,
-        title: <FormattedMessage {...messages.whatsappTitleIllustration} values={{ template: templateText }} />,
-        description: <FormattedMessage {...messages.whatsappDescIllustration} />,
-        descriptionPosition: 'bottom',
-        descriptionClassName: 'illustration-desc',
-      };
-    }
-
-    if (type === ZALO) {
-      if (!hostName) {
-        return {
-          illustrationImage: whatsappOrZaloAccountIllustration,
-          title: <FormattedMessage {...messages.zaloAccountNotConfiguredTitle} />,
-          description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
-          descriptionPosition: 'bottom',
-          descriptionClassName: 'illustration-desc zalo-illustration',
-          buttonClassName: 'zalo-illustration-button',
-        };
-      }
-      return {
-        illustrationImage: zaloillustration,
-        title: <FormattedMessage {...messages.zaloTitleIllustration} />,
-        description: <FormattedMessage {...messages.zaloDescIllustration} />,
-        descriptionPosition: 'bottom',
-        descriptionClassName: 'illustration-desc zalo-illustration',
-        buttonClassName: 'zalo-illustration-button',
-      };
-    }
-
-    // Handle standard channels using configuration
-    const config = CHANNEL_CONFIG[type];
-    if (!config) {
-      return {
-        illustrationImage: emailIllustration,
-        title: '',
-        description: '',
-        descriptionPosition: 'bottom',
-        descriptionClassName: 'illustration-desc unknown-illustration',
-        buttonClassName: 'unknown-illustration-button',
-        buttonLabel: <FormattedMessage {...messages.createNewActionButton} />,
-      }; //send default illustration here
-    }
-
-    const result = {
-      illustrationImage: config.illustrationImage,
-      title: <FormattedMessage {...config.titleMessage} values={{ template: templateText }} />,
-    };
-
-    if (config.hasButton) {
-      result.buttonLabel = <FormattedMessage {...config.buttonMessage} values={{ template: templateText }} />;
-      result.onClick = createTemplate;
-    }
-
-    if (config.descriptionMessage) {
-      result.description = <FormattedMessage {...config.descriptionMessage} />;
-      result.descriptionPosition = config.descriptionPosition;
-      result.descriptionClassName = config.descriptionClassName;
-    }
-
-    if (config.buttonClassName) {
-      result.buttonClassName = config.buttonClassName;
-    }
-
-    return result;
-  };
-
-  const channelLowerCase = currentChannel?.toLowerCase() || '';
-
-  return (
-    <CapIllustration
-      buttonClassName={`create-new-${channelLowerCase}`}
-      {...getChannelTypeIllustrationInfo(currentChannel, hostName)}
-    />
-  );
-}
-ChannelTypeIllustration.propTypes = {
-  isFullMode: PropTypes.bool,
-  createTemplate: PropTypes.func.isRequired,
-  currentChannel: PropTypes.string,
-  hostName: PropTypes.string,
-};
-export default ChannelTypeIllustration;

package/v2Containers/Templates/tests/ChannelTypeIllustration.test.js

@@ -1,323 +0,0 @@
-// Mock the CapIllustration component
-jest.mock('@capillarytech/cap-ui-library', () => ({
-  CapIllustration: ({ children, ...props }) => <div data-testid="cap-illustration" {...props}>{children}</div>
-}));
-
-// Mock all image imports
-jest.mock('../../Assets/images/emailIllustration.svg', () => 'test-file-stub');
-jest.mock('../../Assets/images/smsIllustration.svg', () => 'test-file-stub');
-jest.mock('../../Assets/images/pushIllustration.svg', () => 'test-file-stub');
-jest.mock('../../Assets/images/whatsappIllustration.png', () => 'test-file-stub');
-jest.mock('../../Assets/images/whatsappOrZaloAccountIllustration.svg', () => 'test-file-stub');
-jest.mock('../../Assets/images/rcsIllustration.png', () => 'test-file-stub');
-jest.mock('@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg', () => 'test-file-stub');
-
-
-import React from 'react';
-import { shallow, configure } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import ChannelTypeIllustration from '../ChannelTypeIllustration';
-import { MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP } from '../../CreativesContainer/constants';
-
-configure({ adapter: new Adapter() });
-
-describe('ChannelTypeIllustration', () => {
-  const mockCreateTemplate = jest.fn();
-  const mockIntl = {
-    formatMessage: jest.fn(() => 'some text')
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockIntl.formatMessage.mockClear();
-  });
-
-  const defaultProps = {
-    isFullMode: false,
-    intl: mockIntl,
-    createTemplate: mockCreateTemplate,
-    currentChannel: SMS,
-    hostName: false
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockIntl.formatMessage.mockClear();
-  });
-
-  const renderComponent = (props = {}) => {
-    return shallow(
-      <ChannelTypeIllustration {...defaultProps} {...props} intl={mockIntl} />
-    );
-  };
-
-  describe('Component Rendering', () => {
-    it('should render CapIllustration component', () => {
-      const component = renderComponent();
-      expect(component.find('CapIllustration')).toHaveLength(1);
-    });
-
-    it('should pass correct buttonClassName based on currentChannel', () => {
-      const component = renderComponent({ currentChannel: 'SMS' });
-      const capIllustration = component.find('CapIllustration');
-      expect(capIllustration.prop('buttonClassName')).toBe('create-new-sms');
-    });
-
-    it('should handle undefined currentChannel gracefully', () => {
-      const component = renderComponent({ currentChannel: undefined });
-      const capIllustration = component.find('CapIllustration');
-      expect(capIllustration.prop('buttonClassName')).toBe('unknown-illustration-button');
-    });
-  });
-
-  describe('SMS Channel', () => {
-    it('should return correct illustration info for SMS channel', () => {
-      const component = renderComponent({ currentChannel: SMS });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-    });
-
-    it('should include template text in full mode for SMS', () => {
-      const component = renderComponent({
-        currentChannel: SMS,
-        isFullMode: true
-      });
-      const capIllustration = component.find('CapIllustration');
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-    });
-  });
-
-  describe('EMAIL Channel', () => {
-    it('should return correct illustration info for EMAIL channel', () => {
-      const component = renderComponent({ currentChannel: EMAIL });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-    });
-  });
-
-  describe('MOBILE_PUSH Channel', () => {
-    it('should return correct illustration info for MOBILE_PUSH channel', () => {
-      const component = renderComponent({ currentChannel: MOBILE_PUSH });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-    });
-  });
-
-  describe('WHATSAPP Channel', () => {
-    it('should return correct illustration info for WHATSAPP channel when hostName is available', () => {
-      const component = renderComponent({
-        currentChannel: WHATSAPP,
-        hostName: true
-      });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-      expect(capIllustration.prop('description')).toBeDefined();
-      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
-      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc');
-    });
-
-    it('should return account not configured info for WHATSAPP when hostName is not available', () => {
-      const component = renderComponent({
-        currentChannel: WHATSAPP,
-        hostName: false
-      });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('title')).toBeDefined();
-      expect(capIllustration.prop('description')).toBeDefined();
-      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
-      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc zalo-illustration');
-      expect(capIllustration.prop('buttonClassName')).toBe('zalo-illustration-button');
-      expect(capIllustration.prop('onClick')).toBeUndefined();
-      expect(capIllustration.prop('buttonLabel')).toBeUndefined();
-    });
-  });
-
-  describe('RCS Channel', () => {
-    it('should return correct illustration info for RCS channel', () => {
-      const component = renderComponent({ currentChannel: RCS });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-      expect(capIllustration.prop('description')).toBeDefined();
-      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
-      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc rcs-illustration');
-    });
-  });
-
-  describe('ZALO Channel', () => {
-    it('should return correct illustration info for ZALO channel when hostName is available', () => {
-      const component = renderComponent({
-        currentChannel: ZALO,
-        hostName: true
-      });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('title')).toBeDefined();
-      expect(capIllustration.prop('description')).toBeDefined();
-      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
-      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc zalo-illustration');
-      expect(capIllustration.prop('buttonClassName')).toBe('zalo-illustration-button');
-      expect(capIllustration.prop('onClick')).toBeUndefined();
-      expect(capIllustration.prop('buttonLabel')).toBeUndefined();
-    });
-
-    it('should return account not configured info for ZALO when hostName is not available', () => {
-      const component = renderComponent({
-        currentChannel: ZALO,
-        hostName: false
-      });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('title')).toBeDefined();
-      expect(capIllustration.prop('description')).toBeDefined();
-      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
-      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc zalo-illustration');
-      expect(capIllustration.prop('buttonClassName')).toBe('zalo-illustration-button');
-      expect(capIllustration.prop('onClick')).toBeUndefined();
-      expect(capIllustration.prop('buttonLabel')).toBeUndefined();
-    });
-  });
-
-  describe('INAPP Channel', () => {
-    it('should return correct illustration info for INAPP channel', () => {
-      const component = renderComponent({ currentChannel: INAPP });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('title')).toBeDefined();
-      expect(capIllustration.prop('description')).toBeDefined();
-      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
-      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc inapp-illustration');
-      expect(capIllustration.prop('buttonClassName')).toBe('inapp-illustration-button');
-      expect(capIllustration.prop('onClick')).toBeUndefined();
-      expect(capIllustration.prop('buttonLabel')).toBeUndefined();
-    });
-  });
-
-  describe('VIBER Channel', () => {
-    it('should return correct illustration info for VIBER channel', () => {
-      const component = renderComponent({ currentChannel: VIBER });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-    });
-  });
-
-  describe('LINE Channel', () => {
-    it('should return correct illustration info for LINE channel', () => {
-      const component = renderComponent({ currentChannel: LINE });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-    });
-  });
-
-  describe('FACEBOOK Channel', () => {
-    it('should return correct illustration info for FACEBOOK channel', () => {
-      const component = renderComponent({ currentChannel: FACEBOOK });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should return default illustration for unknown channel type', () => {
-      const component = renderComponent({ currentChannel: 'UNKNOWN_CHANNEL' });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
-      expect(capIllustration.prop('onClick')).toBeUndefined();
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();;
-      expect(capIllustration.prop('title')).toBe('');
-    });
-
-    it('should handle null currentChannel', () => {
-      const component = renderComponent({ currentChannel: null });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('buttonClassName')).toBe('unknown-illustration-button');
-    });
-
-    it('should handle empty string currentChannel', () => {
-      const component = renderComponent({ currentChannel: '' });
-      const capIllustration = component.find('CapIllustration');
-
-      expect(capIllustration.prop('buttonClassName')).toBe('unknown-illustration-button');
-    });
-  });
-
-  describe('isFullMode Behavior', () => {
-    it('should render FormattedMessage components when isFullMode is true', () => {
-      const component = renderComponent({
-        currentChannel: SMS,
-        isFullMode: true
-      });
-      const capIllustration = component.find('CapIllustration');
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-    });
-
-    it('should render FormattedMessage components when isFullMode is false', () => {
-      const component = renderComponent({
-        currentChannel: SMS,
-        isFullMode: false
-      });
-      const capIllustration = component.find('CapIllustration');
-      expect(capIllustration.prop('buttonLabel')).toBeDefined();
-      expect(capIllustration.prop('title')).toBeDefined();
-    });
-  });
-
-  describe('PropTypes Validation', () => {
-    it('should handle missing optional props gracefully', () => {
-      const minimalProps = {
-        intl: mockIntl,
-        createTemplate: mockCreateTemplate
-      };
-
-      expect(() => {
-        renderComponent(minimalProps);
-      }).not.toThrow();
-    });
-
-    it('should handle all required props', () => {
-      expect(() => {
-        renderComponent(defaultProps);
-      }).not.toThrow();
-    });
-  });
-});