@capillarytech/creatives-library 8.0.142 → 8.0.143

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.142",
+  "version": "8.0.143",
   "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/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/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}