@capillarytech/creatives-library 8.0.205 → 8.0.206-alpha.1

package/v2Containers/Templates/index.js

@@ -37,7 +37,6 @@ import {
   CapLink,
   CapHeading,
   CapNotification,
-  CapIllustration,
   CapHeader,
   CapLabel,
   CapRadio,
@@ -97,6 +96,7 @@ import CreativesContainer from '../CreativesContainer';
 import WhatsappStatusContainer from '../../v2Components/WhatsappStatusContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import CapCustomSkeleton from '../../v2Components/CapCustomSkeleton';
+import ChannelTypeIllustration from './ChannelTypeIllustration';
 import {
   CHANNEL_CREATE_TRACK_MAPPING,
   CHANNEL_EDIT_TRACK_MAPPING,
@@ -139,14 +139,6 @@ import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP
 
 import {CREATIVE} from '../Facebook/constants';
 import videoPlay from '../../assets/videoPlay.svg';
-import emailIllustration from '../Assets/images/emailIllustration.svg';
-import smsIllustration from '../Assets/images/smsIllustration.svg';
-import pushIllustration from '../Assets/images/pushIllustration.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 whatsappImageEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_image_preview.svg';
 import whatsappVideoEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_video_preview.svg';
 import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -1164,7 +1156,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     />
 
-  getSmsEmailIllustration = () =>
+  getSmsEmailIllustration = () => {
     this.props.isDltFromRcs ? (
       <CapHeader
         title={
@@ -1179,13 +1171,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       />
     ) : (
-      <CapIllustration
-        buttonClassName={`create-new-${this.state.channel.toLowerCase()}`}
-        {...this.getChannelTypeIllustrationInfo(
-          this.state.channel.toUpperCase(),
-        )}
-      />
+      <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={this.state.channel} hostName={this.state?.hostName}/>
     );
+  }
 
   getHoverComponent = (children) => {
     return this.state.channel.toLowerCase() === ZALO_LOWERCASE ? (
@@ -1778,14 +1766,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
-                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel, this.state?.hostName)} />
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>
               </div>
             )
           }
           {(showWhatsappIllustration || showZaloIllustration) && (
             noLoaderAndSearchText &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                {noWhatsappZaloTemplates && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel, isEmpty(this.state?.hostName))} />}
+                {noWhatsappZaloTemplates && <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>}
                 {noFilteredWhatsappZaloTemplates && this.state?.hostName && this.whatsappZaloIllustrationText('noFilteredWhatsappZaloTemplatesTitle', 'noFilteredWhatsappZaloTemplatesDesc')}
                 {noApprovedWhatsappZaloTemplates && this.whatsappZaloIllustrationText('noApprovedWhatsappZaloTemplatesTitle', showWhatsappIllustration ? 'noApprovedWhatsappTemplatesDesc' : 'zaloDescIllustration')}
               </div>
@@ -1795,7 +1783,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             (
             noLoaderAndSearchText &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
                 {noApprovedRcsTemplates && this.whatsappZaloIllustrationText('noApprovedRcsTemplatesTitle', 'noApprovedRcsTemplatesDesc')}
               </div>
             )
@@ -1804,7 +1792,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             (
             noLoaderAndSearchText &&
               <div className={`${this.isFullMode() ? 'inapp-illustration-parent' : ''}`}>
-                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
               </div>
             )
           }
@@ -2883,99 +2871,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       (rcsLoader !== undefined ? rcsLoader : false);
     return isLoading;
   }
-  getChannelTypeIllustrationInfo = (type, hostNameNotFound) => {
-    const { isFullMode, intl } = this.props;
-    const templateIntlMsg = intl.formatMessage(messages.template);
-    const templateText = isFullMode ? templateIntlMsg : '';
-    switch (type) {
-      case 'SMS':
-        return {
-          buttonLabel: <FormattedMessage {...messages.newSMSTemplate} values={{ template: templateText }} />,
-          onClick: this.createTemplate,
-          illustrationImage: smsIllustration,
-          title: <FormattedMessage {...messages.smsTitleIllustartion} values={{ template: templateText }} />,
-        };
-      case 'EMAIL':
-        return {
-          buttonLabel: <FormattedMessage {...messages.newEmailTemplate} values={{ template: templateText }} />,
-          onClick: this.createTemplate,
-          illustrationImage: emailIllustration,
-          title: <FormattedMessage {...messages.emailTitleIllustartion} values={{ template: templateText }} />,
-        };
-      case 'MOBILEPUSH':
-        return {
-          buttonLabel: <FormattedMessage {...messages.newNotificationTemplate} values={{ template: templateText }} />,
-          onClick: this.createTemplate,
-          illustrationImage: pushIllustration,
-          title: <FormattedMessage {...messages.pushTitleIllustartion} values={{ template: templateText }} />,
-        };
-      case WHATSAPP: {
-        if (hostNameNotFound) {
-          return {
-            illustrationImage: whatsappOrZaloAccountIllustration,
-            title: <FormattedMessage {...messages.whatsappAccountNotConfiguredTitle} />,
-            description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
-            descriptionPosition: 'bottom',
-            descriptionClassName: 'illustration-desc zalo-illustration',
-            buttonClassName: "zalo-illustration-button",
-          };
-        } else {
-          return {
-            buttonLabel: <FormattedMessage {...messages.newWhatsappTemplate} values={{ template: templateText }} />,
-            onClick: this.createTemplate,
-            illustrationImage: whatsappIllustration,
-            title: <FormattedMessage {...messages.whatsappTitleIllustration} values={{ template: templateText }} />,
-            description: <FormattedMessage {...messages.whatsappDescIllustration} />,
-            descriptionPosition: 'bottom',
-            descriptionClassName: 'illustration-desc',
-            
-          };
-        }
-      }
-      case RCS:
-        return {
-          buttonLabel: <FormattedMessage {...messages.newRCSTemplate} values={{ template: templateText }} />,
-          onClick: this.createTemplate,
-          illustrationImage: rcsIllustration,
-          title: <FormattedMessage {...messages.rcsTitleIllustartion} values={{ template: templateText }} />,
-          description: <FormattedMessage {...messages.rcsDescIllustartion} />,
-          descriptionPosition: 'bottom',
-          descriptionClassName: 'illustration-desc rcs-illustration',
-        };
-      case ZALO:{
-        if (hostNameNotFound) {
-          return {
-            illustrationImage: whatsappOrZaloAccountIllustration,
-            title: <FormattedMessage {...messages.zaloAccountNotConfiguredTitle} />,
-            description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
-            descriptionPosition: 'bottom',
-            descriptionClassName: 'illustration-desc zalo-illustration',
-            buttonClassName: "zalo-illustration-button",
-          };
-        } else {
-          return {
-            illustrationImage: zaloillustration,
-            title: <FormattedMessage {...messages.zaloTitleIllustration} />,
-            description: <FormattedMessage {...messages.zaloDescIllustration} />,
-            descriptionPosition: 'bottom',
-            descriptionClassName: 'illustration-desc zalo-illustration',
-            buttonClassName: "zalo-illustration-button",
-          };
-        }
-      }
-      case INAPP:
-        return {
-          illustrationImage: inAppIllustration,
-          title: <FormattedMessage {...messages.inAppTitleIllustration} />,
-          description: <FormattedMessage {...messages.inAppDescIllustration} />,
-          descriptionPosition: 'bottom',
-          descriptionClassName: 'illustration-desc inapp-illustration',
-          buttonClassName: "inapp-illustration-button",
-        }
-      default:
-        return {};
-    }
-  }
+ 
   checkSearchDisabled = () => (this.props.route.name === "mobilepush" && !(this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier && this.props.Templates.selectedWeChatAccount.configs && (this.props.Templates.selectedWeChatAccount.configs.ios === '1' || this.props.Templates.selectedWeChatAccount.configs.android === '1')))
   renderEmailPreviewModal() {
     const slideboxContent = (

package/v2Containers/Templates/messages.js

@@ -326,6 +326,18 @@ export default defineMessages({
     id: `${scope}.newEmailTemplate`,
     defaultMessage: 'New email {template}',
   },
+  "newViberTemplate": {
+    id: `${scope}.newViberTemplate`,
+    defaultMessage: 'New Viber {template}',
+  },
+  "newLineTemplate": {
+    id: `${scope}.newLineTemplate`,
+    defaultMessage: 'New Line {template}',
+  },
+  "newFacebookTemplate": {
+    id: `${scope}.newFacebookTemplate`,
+    defaultMessage: 'New Facebook {template}',
+  },
   "newWhatsappTemplate": {
     id: `${scope}.newWhatsappTemplate`,
     defaultMessage: 'Add new Whatsapp {template}',
@@ -346,6 +358,18 @@ export default defineMessages({
     id: `${scope}.emailTitleIllustartion`,
     defaultMessage: 'Create an email {template}',
   },
+  "viberTitleIllustartion": {
+    id: `${scope}.viberTitleIllustartion`,
+    defaultMessage: 'Create a viber {template}',
+  },
+  "lineTitleIllustartion": {
+    id: `${scope}.lineTitleIllustartion`,
+    defaultMessage: 'Create a line {template}',
+  },
+  "facebookTitleIllustartion": {
+    id: `${scope}.facebookTitleIllustartion`,
+    defaultMessage: 'Create a facebook {template}',
+  },
   "whatsappTitleIllustration": {
     id: `${scope}.whatsappTitleIllustration`,
     defaultMessage: 'Add a new Whatsapp creative {template}',

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

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