@capillarytech/creatives-library 8.0.142 → 8.0.144

package/package.json

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

package/v2Components/TemplatePreview/index.js

@@ -1336,7 +1336,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                     />
                     <iframe 
                       srcDoc={inAppPreviewContent?.value} 
-                      title="Inapp Preview" 
+                      title={formatMessage(messages.inappPreview)}
                       style={{
                         position: 'absolute',
                         top: '3rem',

package/v2Components/TemplatePreview/messages.js

@@ -94,4 +94,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.videoNotSupported',
     defaultMessage: 'Your browser does not support the video tag.',
   },
+  inappPreview: {
+    id: 'creatives.componentsV2.TemplatePreview.inappPreview',
+    defaultMessage: 'Inapp Preview',
+  },
 });

package/v2Components/TestAndPreviewSlidebox/PreviewSection.js

@@ -15,7 +15,7 @@ const PreviewSection = ({
   formatMessage,
   PreviewChrome,
 }) => (
-  <CapRow className="preview-section panel-section">
+  <CapRow className="preview-section-test panel-section">
     <PreviewChrome
       device={previewDevice}
       onDeviceChange={setPreviewDevice}

package/v2Components/TestAndPreviewSlidebox/_testAndPreviewSlidebox.scss

@@ -329,7 +329,7 @@
     }
   }
 
-  .preview-section {
+  .preview-section-test {
     .section-title {
       margin-bottom: $CAP_SPACE_16;
       color: #333;

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/BeePopupEditor/index.js

@@ -101,7 +101,7 @@ function BeePopupEditor(props) {
   }, [templateLayoutType]);
 
   useEffect(() => {
-    savedCallback.current = Object.keys(selectedTag).length > 0 && selectedTag;
+    savedCallback.current = Object?.keys(selectedTag)?.length > 0 && selectedTag;
   }, [selectedTag]);
 
   const onTagSelect = (result) => {
@@ -120,7 +120,7 @@ function BeePopupEditor(props) {
 
   return (
     <>
-      <div id="bee-plugin-container" style={{ height: "650px" }}></div>
+      <div id="bee-plugin-container" style={{ height: "46.5rem" }}></div>
       <TagList
         moduleFilterEnabled={moduleFilterEnabled}
         label={label}

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";
         }

package/v2Containers/Email/index.js

@@ -2709,7 +2709,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     return (
       <div className="email-container">
         <CapSpin spinning={isLoading}>
-          { showTestAndPreview &&
+          { !showTestAndPreviewSlidebox && showTestAndPreview &&
             <div className="test-and-preview-container">
               {this.showTestAndPreviewIcons('PREVIEW')}
               {this.showTestAndPreviewIcons('TEST')}

package/v2Containers/InApp/constants.js

@@ -164,3 +164,6 @@ export const INAPP_LAYOUT_DETAILS = {
 
 export const DEVICE_SUPPORTED = '1';
 export const AI_CONTENT_BOT_DISABLED = "AI_CONTENT_BOT_DISABLED";
+export const MODE_SELECTION = "modeSelection";
+export const BASIC_EDITOR = "basicEditor";
+export const BEE_EDITOR = "beeEditor";

package/v2Containers/InappWrapper/_inappWrapper.scss

@@ -2,8 +2,8 @@
     
   .ant-radio-group.cap-radioCard-v2 {
       .ant-radio-button-wrapper{
-          width: 284px;
-          height: 258px;
+          width: 20.28rem;
+          height: 18.43rem;
       }
       .ant-card-body {
           padding: 1rem;
@@ -11,9 +11,9 @@
   }
 }
 .template-name-inapp {
-    width: 580px;
+    width: 41.4rem;
     margin-bottom: 1.5rem;
     .ant-input {
-        height: 40px;
+        height: 2.86rem;
     }
 }

package/v2Containers/InappWrapper/index.js

@@ -16,6 +16,7 @@ import InApp from "../InApp/index";
 import InappAdvanced from "../InappAdvanced/index";
 import messages from "./messages";
 import "./_inappWrapper.scss";
+import { BASIC_EDITOR, BEE_EDITOR, MODE_SELECTION } from "../InApp/constants";
 
 const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
 const CardContainer = styled.div`
@@ -83,7 +84,7 @@ export function InappWrapper(props) {
 
   return (
     <div className="inapp-wrapper">
-      {step === "modeSelection" ? (
+      {step === MODE_SELECTION ? (
         <div>
           {isFullMode && (
             <CapInput
@@ -109,7 +110,7 @@ export function InappWrapper(props) {
         </div>
       ) : (
         <div>
-          {inAppCreateMode === 'basicEditor' && (
+          {inAppCreateMode === BASIC_EDITOR && (
             <InApp
               getFormData={getFormData}
               setIsLoadingContent={setIsLoadingContent}
@@ -134,7 +135,7 @@ export function InappWrapper(props) {
               onCreateComplete={onCreateComplete}
             />
           )}
-          {inAppCreateMode === 'beeEditor' && (
+          {inAppCreateMode === BEE_EDITOR && (
             <InappAdvanced
               getFormData={getFormData}
               setIsLoadingContent={setIsLoadingContent}