@capillarytech/creatives-library 8.0.143 → 8.0.144

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.143",
+  "version": "8.0.144",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/TestAndPreviewSlidebox/tests/PreviewSection.test.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import PropTypes from 'prop-types';
+import '@testing-library/jest-dom';
+import PreviewSection from '../PreviewSection';
+
+// Mock messages for testing
+const mockMessages = {
+  'app.v2Components.TestAndPreviewSlidebox.updatingPreview': 'Updating preview with the latest changes',
+};
+
+// Test wrapper with IntlProvider
+const TestWrapper = ({ children, locale = 'en' }) => (
+  <IntlProvider locale={locale} messages={mockMessages}>
+    {children}
+  </IntlProvider>
+);
+
+TestWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  locale: PropTypes.string,
+};
+
+TestWrapper.defaultProps = {
+  locale: 'en',
+};
+
+// Mock PreviewChrome component
+const MockPreviewChrome = ({
+  children,
+  device,
+  subject,
+}) => (
+  <div data-testid="preview-chrome" data-device={device} data-subject={subject}>
+    {children}
+  </div>
+);
+
+MockPreviewChrome.propTypes = {
+  children: PropTypes.node,
+  device: PropTypes.string,
+  subject: PropTypes.string,
+};
+
+MockPreviewChrome.defaultProps = {
+  children: null,
+  device: 'desktop',
+  subject: '',
+};
+
+// Default props for testing
+const defaultProps = {
+  previewDevice: 'desktop',
+  setPreviewDevice: jest.fn(),
+  selectedCustomer: { id: 'customer-1', name: 'John Doe' },
+  formData: { 'template-subject': 'Test Email Subject' },
+  isUpdatingPreview: false,
+  previewDataHtml: null,
+  content: '<p>Default email content</p>',
+  formatMessage: jest.fn((msg) => msg.defaultMessage || 'Updating preview with the latest changes'),
+  PreviewChrome: MockPreviewChrome,
+};
+
+describe('PreviewSection Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the component with basic structure', () => {
+    render(
+      <TestWrapper>
+        <PreviewSection {...defaultProps} />
+      </TestWrapper>
+    );
+
+    // Check if the main container is rendered
+    expect(screen.getByTestId('preview-chrome')).toBeInTheDocument();
+
+    // Check if PreviewChrome receives the correct props
+    const previewChrome = screen.getByTestId('preview-chrome');
+    expect(previewChrome).toHaveAttribute('data-device', 'desktop');
+    expect(previewChrome).toHaveAttribute('data-subject', 'Test Email Subject');
+  });
+
+  it('should show loading spinner when updating preview', () => {
+    render(
+      <TestWrapper>
+        <PreviewSection {...defaultProps} isUpdatingPreview />
+      </TestWrapper>
+    );
+
+    // Check if loading container is displayed
+    expect(document.querySelector('.loading-container')).toBeInTheDocument();
+
+    // Check if CapSpin component is rendered (ant-spin class)
+    expect(document.querySelector('.ant-spin')).toBeInTheDocument();
+  });
+});

package/v2Containers/CreativesContainer/index.js

@@ -398,8 +398,22 @@ export class Creatives extends React.Component {
             versions: {
               base: {
                 content: {
-                  ANDROID: templateData?.androidContent,
-                  IOS: templateData?.iosContent,
+                  ANDROID: templateData?.androidContent?.type === 'HTML' ? {
+                    type: templateData?.androidContent?.type,
+                    bodyType: templateData?.androidContent?.bodyType,
+                    deviceType: constants.ANDROID,
+                    beeHtml: { value: templateData?.androidContent?.message },
+                    beeJson: templateData?.androidContent?.expandableDetails?.message,
+                    isBEEeditor: true,
+                  } : templateData?.androidContent,
+                  IOS: templateData?.iosContent?.type === 'HTML' ? {
+                    type: templateData?.iosContent?.type,
+                    bodyType: templateData?.iosContent?.bodyType,
+                    deviceType: constants.IOS,
+                    beeHtml: { value: templateData?.iosContent?.message },
+                    beeJson: templateData?.iosContent?.expandableDetails?.message,
+                    isBEEeditor: true,
+                  } : templateData?.iosContent,
                 },
               },
             },
@@ -801,9 +815,24 @@ export class Creatives extends React.Component {
             if (channel === constants.MOBILE_PUSH && androidContent?.expandableDetails?.carouselData?.length) {
               androidContent.expandableDetails = this.getMobilePushCarouselData({...androidContent?.expandableDetails});
             }
-            templateData.androidContent = androidContent;
-            templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
-            templateData.androidContent.deviceType = constants.ANDROID;
+            if (androidContent?.isBEEeditor && androidContent?.beeHtml?.value) {
+              templateData.androidContent = {};
+              templateData.androidContent.type = 'TEXT';
+              // replace the TEXT in above line when backend supports HTML
+              templateData.androidContent.message = androidContent?.beeHtml?.value || '';
+              templateData.androidContent.title = 'bee free template';
+              templateData.androidContent.bodyType = androidContent?.bodyType;
+              templateData.androidContent.deviceType = constants.ANDROID;
+              templateData.androidContent.expandableDetails = {
+                style: 'BIG_TEXT',
+                // replace the BIG_TEXT in above line when backend supports HTML
+                message: androidContent?.beeJson || '',
+              };
+            } else if (!androidContent?.isBEEeditor) {
+              templateData.androidContent = androidContent;
+              templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
+              templateData.androidContent.deviceType = constants.ANDROID;
+            }
           }
           const iosContent = channel === constants.INAPP ? get(channelTemplate, 'versions.base.content.IOS') : get(channelTemplate, 'versions.base.IOS');
           if (!isEmpty(iosContent)) {
@@ -823,9 +852,24 @@ export class Creatives extends React.Component {
             if (channel === constants.MOBILE_PUSH && iosContent?.expandableDetails?.carouselData?.length) {
               iosContent.expandableDetails = this.getMobilePushCarouselData({...iosContent?.expandableDetails});
             }
-            templateData.iosContent = iosContent;
-            templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
-            templateData.iosContent.deviceType = constants.IOS;
+            if (iosContent?.isBEEeditor && iosContent?.beeHtml?.value) {
+              templateData.iosContent = {};
+              templateData.iosContent.type = 'TEXT';
+              // replace the TEXT in above line when backend supports HTML
+              templateData.iosContent.message = iosContent?.beeHtml?.value || '';
+              templateData.iosContent.title = 'bee free template';
+              templateData.iosContent.bodyType = iosContent?.bodyType;
+              templateData.iosContent.deviceType = constants.IOS;
+              templateData.iosContent.expandableDetails = {
+                style: 'BIG_TEXT',
+                // replace the BIG_TEXT in above line when backend supports HTML
+                message: iosContent?.beeJson || '',
+              };
+            } else if (!iosContent?.isBEEeditor) {
+              templateData.iosContent = iosContent;
+              templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
+              templateData.iosContent.deviceType = constants.IOS;
+            }
           }
           templateData.messageSubject = channelTemplate?.name ? channelTemplate?.name : "messageSubject";
         }