@capillarytech/creatives-library 7.17.91 → 7.17.92

package/v2Components/MobilePushPreviewV2/index.js

@@ -11,6 +11,9 @@ import { CapTab, CapIcon } from '@capillarytech/cap-ui-library';
 import { get, map, isEmpty} from 'lodash';
 import TemplatePreview from '../TemplatePreview';
 import '../PreviewSideBar/_previewsidebar.scss';
+import { MOBILE_PUSH } from '../../v2Containers/CreativesContainer/constants';
+import { INAPP } from '../../v2Containers/App/constants';
+import { ANDROID, IOS } from '../../v2Containers/InApp/constants';
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -31,39 +34,85 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     }
     this.state = {
       device,
-      content: this.setContent(props.templateData, device),
+      content: this.setContent(props.templateData, device, this.props.channel),
     };
   }
 
-  setContent(templateData, device) {
-    const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
-    const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
+  setContent(templateData, device, channel) {
+    let content;
+    if (channel === INAPP.toUpperCase()) {
+      const androidContent = get(templateData, 'versions.base.content.ANDROID') || get(templateData, 'androidContent');
+      const iosContent = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent');
+      const androidPreviewContent = {
+        templateTitle: androidContent?.title,
+        templateMsg: androidContent?.message,
+        mediaPreview: { inAppImageSrcAndroid: androidContent?.expandableDetails?.imageUrl },
+        ctaData: androidContent?.expandableDetails?.buttons?.map((cta) => {
+          const { index, type, text, url = "", label } = cta;
+          const ctaObject = {
+            index,
+            text,
+            url,
+            urlType: type,
+            isSaved: true,
+            label,
+          };
+          return ctaObject;
+        }),
+      };
+      const iosPreviewContent = {
+        templateTitle: iosContent?.title,
+        templateMsg: iosContent?.message,
+        mediaPreview: { inAppImageSrcIos: iosContent?.expandableDetails?.imageUrl },
+        ctaData: iosContent?.expandableDetails?.buttons?.map((cta) => {
+          const { index, type, text, url = "", label } = cta;
+          const ctaObject = {
+            index,
+            text,
+            url,
+            urlType: type,
+            isSaved: true,
+            label,
+          };
+          return ctaObject;
+        }),
+      };
+      content = {
+        inAppPreviewContent: device === ANDROID.toLowerCase() ? androidPreviewContent : iosPreviewContent,
+        templateLayoutType: device === ANDROID.toLowerCase() ? androidContent?.bodyType : iosContent?.bodyType,
+      };
+    } else if (channel === MOBILE_PUSH) {
+      const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
+      const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
 
-    const data = device === "android" ? androidContent : iosContent;
-    const { title = '', message = '', expandableDetails: { ctas = [], image = '' } = {}} = data || {};
-    const content = {
-      header: title,
-      bodyText: message,
-      bodyImage: image,
-      actions: [],
-      appName: templateData?.appName,
-    };
-    if (ctas && ctas?.length) {
-      if (device === "android" ) {
-        content.actions = map(ctas, (cta) => ({label: cta?.actionText}));
-      } else {
-        content.actions = [{label: ctas[0]?.actionLabel}, {label: ctas[0]?.actionLabel2}];
+      const data = device === "android" ? androidContent : iosContent;
+      const { title = '', message = '', expandableDetails: { ctas = [], image = '' } = {}} = data || {};
+      content = {
+        header: title,
+        bodyText: message,
+        bodyImage: image,
+        actions: [],
+        appName: templateData?.appName,
+      };
+      if (ctas && ctas?.length) {
+        if (device === "android" ) {
+          content.actions = map(ctas, (cta) => ({label: cta?.actionText}));
+        } else {
+          content.actions = [{label: ctas[0]?.actionLabel}, {label: ctas[0]?.actionLabel2}];
+        }
       }
     }
     return content;
   }
   getPreview(device) {
+    const deviceParam = device === ANDROID.toLowerCase() ? ANDROID : IOS;
     return (
       <TemplatePreview
-        device={device}
+        device={this.props.channel === INAPP.toUpperCase() ? deviceParam : device}
         channel={this.props.channel}
         content={this.state.content || ''}
         templateData={this.props.templateData}
+        templateLayoutType={this.state.content.templateLayoutType || ''}
       />
     );
   }
@@ -72,7 +121,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     this.props.handleClose();
   }
   changeDevice(device) {
-    const content = this.setContent(this.props.templateData, device);
+    const content = this.setContent(this.props.templateData, device, this.props.channel);
     this.setState({device, content });
   }
   goToEdit(e, path) {
@@ -80,9 +129,18 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
   }
   render() {
     const {templateData} = this.props;
-    const hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent.title');
-    const hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent.title');
-    const hasBothAndroidAndIos = hasAndroid && hasIos;
+    let hasAndroid;
+    let hasIos;
+    let hasBothAndroidAndIos;
+    if (this.props.channel === MOBILE_PUSH) {
+      hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent.title');
+      hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent.title');
+      hasBothAndroidAndIos = hasAndroid && hasIos;
+    } else if (this.props.channel === INAPP.toUpperCase()) {
+      hasAndroid = get(templateData, 'versions.base.content.ANDROID') || get(templateData, 'androidContent.title');
+      hasIos = get(templateData, 'versions.base.content.IOS') || get(templateData, 'iosContent.title');
+      hasBothAndroidAndIos = hasAndroid && hasIos;
+    }
 
     return (
       <div>

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -13,8 +13,449 @@
       &.sms {
         width: 45%;
       }
+
+            .inapp-message-container-POPUP-ANDROID {
+              position: absolute;
+              top: 20%;
+              display: flex;
+              width: 200px;
+              left: 28%;
+      
+              .inapp-title-POPUP-ANDROID {
+                margin: 10% $CAP_SPACE_08 $CAP_SPACE_08 $CAP_SPACE_08;
+                width: 170px;
+                height: 18px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+              }
+      
+              .inapp-image-POPUP-ANDROID {
+                width: 178px;
+                margin-right: $CAP_SPACE_08;
+                margin-left: $CAP_SPACE_08;
+                border-radius: $CAP_SPACE_04;
+              }
+      
+              .inapp-content-POPUP-ANDROID {
+                margin-top: $CAP_SPACE_12;
+                margin-right: $CAP_SPACE_08;
+                margin-left: $CAP_SPACE_08;
+                width: 178px;
+                max-height: 3rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-align: left;
+              }
+      
+              .inapp-button-POPUP-ANDROID {
+                margin: $CAP_SPACE_08;
+                width: 178px;
+                height: $CAP_SPACE_24;
+              }
+            }
+      
+            .inapp-message-container-HEADER-ANDROID {
+              position: absolute;
+              display: flex;
+              bottom: 19.4rem;
+              width: 200px;
+              left: 28%;
+              top: 20px;
+      
+              .inapp-title-HEADER-ANDROID {
+                left: 34%;
+                top: 15%;
+                position: relative;
+                font-size: 10px;
+                width: 90px;
+                height: 12px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                font-weight: bold;
+                text-align: left;
+              }
+
+              .without-image-title-HEADER-android {
+                left: 26%;
+                bottom: -21px;
+                text-align: center;
+              }
+      
+              .inapp-image-HEADER-ANDROID {
+                width: 50px;
+                height: 50px;
+                position: relative;
+                top: 12%;
+                right: 33%;
+                border-radius: $CAP_SPACE_04;
+              }
+      
+              .inapp-content-HEADER-ANDROID {
+                position: relative;
+                width: 120px;
+                height: 46px;
+                left: 35%;
+                bottom: 30px;
+                max-height: 2.85rem;
+                font-size: 8px;
+                text-overflow: ellipsis;
+                text-align: left;
+                overflow: hidden;
+              }
+
+              .without-image-content-HEADER-android {
+                width: 92%;
+                left: 6%;
+                bottom: -21px;
+              }
+      
+              .inapp-button-HEADER-ANDROID {
+                position: relative;
+                width: 92%;
+                bottom: 32px;
+                height: $CAP_SPACE_20;
+                margin-top: $CAP_SPACE_04;
+              }
+
+              .without-image-button-HEADER-android {
+                width: 92%;
+                bottom: -19px;
+              }
+            }
+      
+      
+            .inapp-message-container-FOOTER-ANDROID {
+              position: absolute;
+              display: flex;
+              justify-content: center;
+              bottom: 1.5%;
+              width: 200px;
+              left: 28%;
+      
+              .inapp-title-FOOTER-ANDROID {
+                width: 90px;
+                height: 12px;
+                text-align: left;
+                left: 34%;
+                justify-content: center;
+                position: relative;
+                right: 33%;
+                bottom: -22px;
+                font-size: 10px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                font-weight: bold;
+              }
+
+              .without-image-title-FOOTER-android {
+                left: 26%;
+                top: -30px;
+                text-align: center;
+              }
+      
+              .inapp-image-FOOTER-ANDROID {
+                width: 50px;
+                height: 50px;
+                position: relative;
+                top: 12%;
+                right: 33%;
+                border-radius: $CAP_SPACE_04;
+              }
+      
+              .inapp-content-FOOTER-ANDROID {
+                position: relative;
+                left: 35%;
+                width: 120px;
+                height: 46px;
+                bottom: 30px;
+                max-height: 3rem;
+                overflow: hidden;
+                font-size: 8px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-align: left;
+              }
+      
+              .without-image-content-FOOTER-android {
+                width: 92%;
+                left: 6%;
+                top: -30px;
+              }
+
+              .inapp-button-FOOTER-ANDROID {
+                width: 92%;
+                bottom: 23%;
+                height: $CAP_SPACE_20;
+                margin-top: $CAP_SPACE_04;
+              }
+
+              .without-image-button-FOOTER-android {
+                width: 92%;
+                top: -30px;
+              }
+            }
+      
+            .inapp-message-container-FULLSCREEN-ANDROID {
+              position: absolute;
+              top: 10%;
+              display: flex;
+              left: 29%;
+              .inapp-title-FULLSCREEN-ANDROID {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                width: 180px;
+              }
+              .inapp-image-FULLSCREEN-ANDROID {
+                width: 186px;
+                height: 161px;
+                position: relative;
+                right: -2px;
+                margin: $CAP_SPACE_08 0;
+                border-radius: $CAP_SPACE_04;
+              }
+      
+              .inapp-content-FULLSCREEN-ANDROID {
+                width: 186px;
+                height: 9rem;
+                text-align: left;
+                margin-top: $CAP_SPACE_04;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-align: left;
+              }
+      
+              .inapp-button-FULLSCREEN-ANDROID {
+                width: 100%;
+                height: $CAP_SPACE_24;
+                bottom: -1%;
+              }
+            }
+      
+            .inapp-message-container-POPUP-iOS {
+              position: absolute;
+              top: 20%;
+              display: flex;
+              width: 200px;
+              left: 28%;
+      
+              .inapp-title-POPUP-iOS {
+                margin: 12% $CAP_SPACE_08 $CAP_SPACE_04 $CAP_SPACE_08;
+                width: 170px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+              }
+      
+              .inapp-image-POPUP-iOS {
+                width: 178px;
+                margin-right: $CAP_SPACE_08;
+                margin-left: $CAP_SPACE_08;
+                border-radius: $CAP_SPACE_04;
+              }
+      
+              .inapp-content-POPUP-iOS {
+                margin-top: $CAP_SPACE_12;
+                margin-right: $CAP_SPACE_08;
+                margin-left: $CAP_SPACE_08;
+                width: 178px;
+                max-height: 3rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-align: left;
+              }
+      
+              .inapp-button-POPUP-iOS {
+                margin: $CAP_SPACE_08;
+                width: 178px;
+                height: $CAP_SPACE_24;
+              }
+            }
+
+            .inapp-message-container-HEADER-iOS {
+              position: absolute;
+              display: flex;
+              width: 200px;
+              left: 28%;
+              top: 3%;
+      
+              .inapp-title-HEADER-iOS {
+                left: 34%;
+                top: 15%;
+                position: relative;
+                font-size: 10px;
+                width: 90px;
+                height: 12px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                font-weight: bold;
+                text-align: left;
+              }
+
+              .without-image-title-HEADER-ios {
+                left: 26%;
+                top: 18px;
+                text-align: center;
+              }
+      
+              .inapp-image-HEADER-iOS {
+                width: 50px;
+                height: 50px;
+                position: relative;
+                top: 12%;
+                right: 33%;
+                border-radius: $CAP_SPACE_04;
+              }
+      
+              .inapp-content-HEADER-iOS {
+                position: relative;
+                width: 120px;
+                height: 46px;
+                left: 35%;
+                top: -31px;
+                max-height: 2.85rem;
+                overflow: hidden;
+                font-size: 8px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-align: left;
+              }
+
+              .without-image-content-HEADER-ios {
+                width: 92%;
+                left: 6%;
+                top: 21px;
+              }
+      
+              .inapp-button-HEADER-iOS {
+                width: 90%;
+                bottom: 23%;
+                height: $CAP_SPACE_20;;
+                margin-top: $CAP_SPACE_04;
+              }
+
+              .without-image-button-HEADER-ios {
+                width: 92%;
+                bottom: -19px;
+              }
+            }
+
+            .inapp-message-container-FOOTER-iOS {
+              position: absolute;
+              display: flex;
+              justify-content: center;
+              width: 200px;
+              left: 28%;
+              top: 75%;
+      
+              .inapp-title-FOOTER-iOS {
+                width: 90px;
+                height: 12px;
+                text-align: left;
+                left: 34%;
+                justify-content: center;
+                position: relative;
+                right: 33%;
+                bottom: -22px;
+                font-size: 10px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                font-weight: bold;
+              }
+
+              .without-image-title-FOOTER-ios {
+                left: 26%;
+                top: 15px;
+                text-align: center;
+              }
+      
+              .inapp-image-FOOTER-iOS {
+                width: 50px;
+                height: 50px;
+                position: relative;
+                top: 12%;
+                right: 33%;
+                border-radius: $CAP_SPACE_04;
+              }
+      
+              .inapp-content-FOOTER-iOS {
+                position: relative;
+                left: 35%;
+                width: 60%;
+                height: 46px;
+                bottom: 30px;
+                max-height: 3rem;
+                overflow: hidden;
+                font-size: 8px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-align: left;
+              }
+
+              .without-image-content-FOOTER-ios {
+                width: 92%;
+                left: 6%;
+                top: 15px;
+              }
+      
+              .inapp-button-FOOTER-iOS {
+                width: 90%;
+                bottom: 23%;
+                height: $CAP_SPACE_20;
+                margin-top: $CAP_SPACE_04;
+              }
+
+              .without-image-button-FOOTER-ios {
+                width: 92%;
+                top: 15px;
+              }
+      
+            }
+
+            .inapp-message-container-FULLSCREEN-iOS {
+              position: absolute;
+              top: 10%;
+              display: flex;
+              left: 29%;
+              .inapp-title-FULLSCREEN-iOS {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                width: 180px;
+              }
+              .inapp-image-FULLSCREEN-iOS {
+                width: 186px;
+                height: 161px;
+                position: relative;
+                right: -2px;
+                margin: $CAP_SPACE_08 0;
+                border-radius: $CAP_SPACE_04;
+              }
+      
+              .inapp-content-FULLSCREEN-iOS {
+                width: 186px;
+                height: 9rem;
+                text-align: left;
+                margin-top: $CAP_SPACE_04;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-align: left;
+              }
+      
+              .inapp-button-FULLSCREEN-iOS {
+                width: 100%;
+                height: $CAP_SPACE_24;
+                bottom: -1%;
+              }
+            }
   }
 
+
   .msg-container {
     position: absolute;
     top: 20%;
@@ -541,4 +982,11 @@
   font-weight: $FONT_WEIGHT_REGULAR;
   color: $FONT_COLOR_02;
   margin-bottom: $CAP_SPACE_08;
+}
+.preview-inapp-screen {
+  width: 100%;
+}
+.media-img-inapp {
+  width: 100%;
+  height: 100%;
 }

package/v2Components/TemplatePreview/assets/images/inapp_mobile_android_bottom.svg

@@ -0,0 +1,11 @@
+<svg width="220" height="472" viewBox="0 0 220 472" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="220" height="472" rx="26" fill="#101211"/>
+<rect x="9" y="36" width="202" height="404" rx="9" fill="#343434"/>
+<rect x="84" y="14" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<rect x="84" y="455" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
+<circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
+<rect x="13" y="350" width="194" height="86" rx="8" fill="white"/>
+<circle cx="197" cy="360" r="5" fill="#5E6C84"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M198.414 358.584C198.219 358.389 197.902 358.389 197.707 358.584L197 359.291L196.293 358.584C196.098 358.389 195.781 358.389 195.586 358.584C195.391 358.779 195.391 359.096 195.586 359.291L196.293 359.998L195.586 360.705C195.391 360.901 195.391 361.217 195.586 361.413C195.781 361.608 196.098 361.608 196.293 361.413L197 360.705L197.707 361.413C197.902 361.608 198.219 361.608 198.414 361.413C198.609 361.217 198.609 360.901 198.414 360.705L197.707 359.998L198.414 359.291C198.609 359.096 198.609 358.779 198.414 358.584Z" fill="#F4F5F7"/>
+</svg>

package/v2Components/TemplatePreview/assets/images/inapp_mobile_android_full.svg

@@ -0,0 +1,11 @@
+<svg width="220" height="472" viewBox="0 0 220 472" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="220" height="472" rx="26" fill="#101211"/>
+<rect x="9" y="36" width="202" height="404" rx="9" fill="#343434"/>
+<rect x="84" y="14" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<rect x="84" y="455" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
+<circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
+<rect x="9" y="36" width="202" height="404" rx="8" fill="white"/>
+<circle cx="201" cy="46" r="5" fill="#5E6C84"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M202.414 44.5841C202.219 44.3889 201.902 44.3889 201.707 44.5841L201 45.2912L200.293 44.5841C200.098 44.3889 199.781 44.3889 199.586 44.5841C199.391 44.7794 199.391 45.096 199.586 45.2912L200.293 45.9983L199.586 46.7055C199.391 46.9007 199.391 47.2173 199.586 47.4126C199.781 47.6078 200.098 47.6078 200.293 47.4126L201 46.7055L201.707 47.4126C201.902 47.6078 202.219 47.6078 202.414 47.4126C202.609 47.2173 202.609 46.9007 202.414 46.7055L201.707 45.9983L202.414 45.2912C202.609 45.096 202.609 44.7794 202.414 44.5841Z" fill="#F4F5F7"/>
+</svg>

package/v2Components/TemplatePreview/assets/images/inapp_mobile_android_modal.svg

@@ -0,0 +1,11 @@
+<svg width="220" height="472" viewBox="0 0 220 472" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="220" height="472" rx="26" fill="#101211"/>
+<rect x="9" y="36" width="202" height="404" rx="9" fill="#343434"/>
+<rect x="84" y="14" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<rect x="84" y="455" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
+<circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
+<rect x="13" y="111" width="194" height="253" rx="8" fill="white"/>
+<circle cx="197" cy="121" r="5" fill="#5E6C84"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M198.413 119.584C198.217 119.389 197.901 119.389 197.706 119.584L196.999 120.291L196.291 119.584C196.096 119.389 195.78 119.389 195.584 119.584C195.389 119.779 195.389 120.096 195.584 120.291L196.291 120.998L195.584 121.705C195.389 121.901 195.389 122.217 195.584 122.413C195.78 122.608 196.096 122.608 196.291 122.413L196.999 121.705L197.706 122.413C197.901 122.608 198.217 122.608 198.413 122.413C198.608 122.217 198.608 121.901 198.413 121.705L197.706 120.998L198.413 120.291C198.608 120.096 198.608 119.779 198.413 119.584Z" fill="#F4F5F7"/>
+</svg>

package/v2Components/TemplatePreview/assets/images/inapp_mobile_android_top.svg

@@ -0,0 +1,11 @@
+<svg width="220" height="472" viewBox="0 0 220 472" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="220" height="472" rx="26" fill="#101211"/>
+<rect x="9" y="36" width="202" height="404" rx="9" fill="#343434"/>
+<rect x="84" y="14" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<rect x="84" y="455" width="52" height="5" rx="2.5" fill="#2E2E2E"/>
+<circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
+<circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
+<rect x="13" y="40" width="194" height="86" rx="8" fill="white"/>
+<circle cx="197" cy="50" r="5" fill="#5E6C84"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M198.412 48.5841C198.217 48.3889 197.9 48.3889 197.705 48.5841L196.998 49.2912L196.291 48.5841C196.096 48.3889 195.779 48.3889 195.584 48.5841C195.389 48.7794 195.389 49.096 195.584 49.2912L196.291 49.9983L195.584 50.7055C195.389 50.9007 195.389 51.2173 195.584 51.4126C195.779 51.6078 196.096 51.6078 196.291 51.4126L196.998 50.7055L197.705 51.4126C197.9 51.6078 198.217 51.6078 198.412 51.4126C198.608 51.2173 198.608 50.9007 198.412 50.7055L197.705 49.9983L198.412 49.2912C198.608 49.096 198.608 48.7794 198.412 48.5841Z" fill="#F4F5F7"/>
+</svg>

package/v2Components/TemplatePreview/assets/images/inapp_mobile_ios_bottom.svg

@@ -0,0 +1,6 @@
+<svg width="228" height="472" viewBox="0 0 228 472" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="228" height="472" rx="32" fill="#101211"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58 11H33C20.2975 11 10 21.2975 10 34V439C10 451.703 20.2975 462 33 462H195C207.703 462 218 451.703 218 439V34C218 21.2975 207.703 11 195 11H170V14C170 21.1797 164.18 27 157 27H71C63.8203 27 58 21.1797 58 14V11Z" fill="#343434"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58 11H33C20.2975 11 10 21.2975 10 34V439C10 451.703 20.2975 462 33 462H195C207.703 462 218 451.703 218 439V34C218 21.2975 207.703 11 195 11H170V14C170 21.1797 164.18 27 157 27H71C63.8203 27 58 21.1797 58 14V11Z" fill="#343434"/>
+<rect x="17" y="370" width="194" height="92" rx="8" fill="white"/>
+</svg>