@capillarytech/creatives-library 8.0.143 → 8.0.145

package/package.json

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

package/v2Components/MobilePushPreviewV2/index.js

@@ -87,8 +87,8 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
 
       if (media?.length > 0) {
         const mediaItem = media[0];
-        const { type, url } = mediaItem;
-        if (type === VIDEO) {
+        const { type: mediaType, url } = mediaItem;
+        if (mediaType === VIDEO) {
           // Distinguish between actual video and GIF based on URL extension
           if (url && url?.toLowerCase()?.includes('.gif')) {
             bodyGif = url;

package/v2Components/TemplatePreview/index.js

@@ -182,17 +182,17 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               key={`carousel-card-${idx}`}
               className="mobile-push-carousel-card message-pop align-left message-pop-carousel"
             >
-              {item?.mediaType === IMAGE.toLowerCase() && item?.imageUrl && (
+              {item?.mediaType?.toLowerCase() === IMAGE && (item?.imageUrl || item?.url) && (
                 <CapImage
-                  src={item?.imageUrl}
+                  src={item?.imageUrl || item?.url}
                   alt="carousel-img"
                   className="carousel-image"
                 />
               )}
-              {item?.mediaType === VIDEO.toLowerCase() && item?.videoPreviewImg && (
+              {item?.mediaType?.toLowerCase() === VIDEO && item?.videoPreviewImg && (
                 <CapRow className="video-preview">
                   <CapImage
-                    src={item?.videoPreviewImg}
+                    src={item?.videoPreviewImg || item?.url}
                     alt="carousel-video-preview"
                     className="carousel-video-preview"
                   />

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

@@ -363,16 +363,16 @@ export class Creatives extends React.Component {
           const iosContent = { ...(templateData?.iosContent || {}) };
           if (androidCarouselMedia?.length) {
             androidContent.expandableDetails.carouselData = androidCarouselMedia.map((media) => ({
-              mediaType: media.type,
-              imageUrl: media.url,
+              mediaType: media?.type,
+              imageUrl: media?.url,
               buttons: [],
               videoSrc: '',
             }));
           }
           if (iosCarouselMedia?.length) {
             iosContent.expandableDetails.carouselData = iosCarouselMedia.map((media) => ({
-              mediaType: media.type,
-              imageUrl: media.url,
+              mediaType: media?.type,
+              imageUrl: media?.url,
               buttons: [],
               videoSrc: '',
             }));
@@ -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";
         }

package/v2Containers/Line/Container/Text/index.js

@@ -104,12 +104,12 @@ export const LineText = ({
           layout: 'LINE',
           type: 'TAG',
           context:
-            location.query.type === 'embedded'
+            location?.query?.type === 'embedded'
               ? 'outbound'
               : 'default',
           embedded:
-            location.query.type === 'embedded'
-              ? location.query.type
+            location?.query?.type === 'embedded'
+              ? location?.query?.type
               : 'full',
         };
         if (getDefaultTags) {
@@ -125,8 +125,8 @@ export const LineText = ({
         context:
             (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
         embedded:
-            location.query.type === 'embedded'
-            ? location.query.type
+            location?.query?.type === 'embedded'
+            ? location?.query?.type
             : 'full',
         };
         globalActions.fetchSchemaForEntity(query);
@@ -266,7 +266,7 @@ export const LineText = ({
                 />
                 <TagList
                     key={`${id}_tags`}
-                    moduleFilterEnabled={location && location.query && location.query.type !== 'embedded'}
+                    moduleFilterEnabled={location && location?.query && location?.query?.type !== 'embedded'}
                     label={formatMessage(messages.addLabels)}
                     onTagSelect={onTagSelect}
                     onContextChange={handleOnTagsContextChange}

package/v2Containers/Templates/_templates.scss

@@ -646,10 +646,7 @@
       opacity: 0.8;
       height: 32px;
       line-height: 26px;
-      margin-top: 4px;
-      border-radius: 6px;
       text-align: center;
-      border: solid 1px #979797;
       .action{
         font-size: 12px;
         color: #000000;

package/v2Containers/Templates/index.js

@@ -1309,9 +1309,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                     </div>
                   </div>
                 )}
-                {(style === MANUAL_CAROUSEL || style === AUTO_CAROUSEL || style === FILMSTRIP_CAROUSEL) && (
+                {[MANUAL_CAROUSEL, AUTO_CAROUSEL, FILMSTRIP_CAROUSEL].includes(style) && (
                   <div className="scroll-container">
-                  {carouselData.map((data, index) => {
+                  {carouselData?.map((data, index) => {
                     return (
                       <div
                         key={`carousel-${index + 1}`}
@@ -1321,14 +1321,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <div className="whatsapp-carousel-card">
                         {data?.mediaType === IMAGE.toLowerCase() && (
                           <CapImage
-                            src={data?.imageUrl ? data?.imageUrl : whatsappImageEmptyPreview}
+                            src={data?.imageUrl ? data?.imageUrl : data?.url ? data?.url : whatsappImageEmptyPreview}
                             className="whatsapp-image"
                           />
                         )}
                         {data?.mediaType === VIDEO.toLowerCase() && (
                           <div className="video-preview">
                             <CapImage
-                              src={data?.videoPreviewImg ? data?.videoPreviewImg : whatsappVideoEmptyPreview}
+                              src={data?.videoPreviewImg ? data?.videoPreviewImg : data?.url ? data?.url : whatsappVideoEmptyPreview}
                               className="whatsapp-image"
                             />
                             <div className="icon-position">