@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -13,8 +13,450 @@
       &.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_08;
+                margin-right: $CAP_SPACE_08;
+                margin-left: $CAP_SPACE_08;
+                width: 178px;
+                max-height: $CAP_SPACE_44;
+                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: 17%;
+                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;
+                top: 22px;
+              }
+      
+              .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: $CAP_SPACE_40;
+                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: $CAP_SPACE_44;
+                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;
+                max-height: 144px;
+                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: $CAP_SPACE_44;
+                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: $CAP_SPACE_40;
+                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: $CAP_SPACE_44;
+                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;
+                max-height: 144px;
+                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%;
@@ -276,6 +718,11 @@
     align-content: center;
     justify-content: center;
     margin-bottom: 4px;
+    align-items: center;
+    svg {
+      margin-right: $CAP_SPACE_04;
+      margin-top: 0.2rem;
+    }
   }
   .whatsapp-message-container{
     max-height: 292px;
@@ -477,4 +924,92 @@
   position: absolute;
   right: -17px;
   bottom: -17px;
+}
+
+.zalo-preview-container {
+  text-align: center;
+
+  .preview-head {
+    font-weight: 500;
+    font-size: $FONT_SIZE_M;
+    color: $FONT_COLOR_01;
+  }
+
+  .preview-text {
+    font-weight: 400;
+    font-size: $FONT_SIZE_S;
+    padding-top: $CAP_SPACE_08;
+  }
+
+  .preview-link {
+    font-weight: 500;
+    font-size: $FONT_SIZE_M;
+    color: $FONT_COLOR_05;
+    margin-top: $CAP_SPACE_19;
+    cursor: pointer;
+
+    svg {
+      height: $CAP_SPACE_16;
+      width: $CAP_SPACE_16;
+    }
+  }
+}
+
+.zalo-preview-container-creative {
+  position: fixed;
+  padding-left: 4.5rem;
+  padding-right: 6.875rem;
+}
+
+.zalo-preview-container-campaign {
+  padding-left: 0px;
+  padding-right: 4.563rem;
+}
+
+.url-preview-image {
+  width: 100%;
+  height: 100%;
+  background-color: hsl(0, 0%, 90%);
+}
+
+.url-preview-description {
+  font-size: 0.6rem;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $FONT_COLOR_01;
+  margin: 0.13rem 0;
+}
+
+.url-preview {
+  font-size: 0.5rem;
+  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%;
+}
+.empty-placeholder {
+  padding-bottom: $CAP_SPACE_16;
+}
+.viber-button-base {
+  border-radius: $CAP_SPACE_16;
+  background-color: $CAP_PURPLE01;
+  margin-top: $CAP_SPACE_12;
+  text-align: center;
+  width: 8.75rem;
+  height: $CAP_SPACE_20;
+  margin-left: $CAP_SPACE_08;
+}
+.viber-button-card-text {
+  font-size: $CAP_SPACE_12;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: $CAP_WHITE;
 }

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>

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

@@ -0,0 +1,18 @@
+<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"/>
+<mask id="mask0_643_59091" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="11" width="208" height="451">
+<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"/>
+</mask>
+<g mask="url(#mask0_643_59091)">
+<rect x="10" y="11" width="208" height="451" rx="8" fill="white"/>
+<path d="M203.148 26.5575C203.342 26.3628 203.342 26.0472 203.148 25.8525C202.953 25.6578 202.637 25.6578 202.443 25.8525L200 28.295L197.558 25.8525C197.363 25.6578 197.047 25.6578 196.852 25.8525C196.658 26.0472 196.658 26.3628 196.853 26.5575L199.295 29L196.852 31.4425C196.658 31.6372 196.658 31.9528 196.853 32.1475C197.047 32.3422 197.363 32.3422 197.558 32.1475L200 29.705L202.443 32.1475C202.637 32.3422 202.953 32.3422 203.148 32.1475C203.342 31.9528 203.342 31.6372 203.148 31.4425L200.705 29L203.148 26.5575Z" fill="black"/>
+<mask id="mask1_643_59091" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="196" y="25" width="8" height="8">
+<path d="M203.148 26.5575C203.342 26.3628 203.342 26.0472 203.148 25.8525C202.953 25.6578 202.637 25.6578 202.443 25.8525L200 28.295L197.558 25.8525C197.363 25.6578 197.047 25.6578 196.852 25.8525C196.658 26.0472 196.658 26.3628 196.853 26.5575L199.295 29L196.852 31.4425C196.658 31.6372 196.658 31.9528 196.853 32.1475C197.047 32.3422 197.363 32.3422 197.558 32.1475L200 29.705L202.443 32.1475C202.637 32.3422 202.953 32.3422 203.148 32.1475C203.342 31.9528 203.342 31.6372 203.148 31.4425L200.705 29L203.148 26.5575Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_643_59091)">
+<rect x="194" y="23" width="12" height="12" fill="#091E42"/>
+</g>
+</g>
+</svg>

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

@@ -0,0 +1,7 @@
+<svg width="228" height="472" viewBox="0 0 228 472" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<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="116" width="194" height="253" rx="8" fill="white"/>
+</svg>
+

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

@@ -0,0 +1,13 @@
+<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="31" width="194" height="92" rx="8" fill="white"/>
+<path d="M204.148 38.5575C204.342 38.3628 204.342 38.0472 204.148 37.8525C203.953 37.6578 203.637 37.6578 203.443 37.8525L201 40.295L198.558 37.8525C198.363 37.6578 198.047 37.6578 197.852 37.8525C197.658 38.0472 197.658 38.3628 197.853 38.5575L200.295 41L197.852 43.4425C197.658 43.6372 197.658 43.9528 197.853 44.1475C198.047 44.3422 198.363 44.3422 198.558 44.1475L201 41.705L203.443 44.1475C203.637 44.3422 203.953 44.3422 204.148 44.1475C204.342 43.9528 204.342 43.6372 204.148 43.4425L201.705 41L204.148 38.5575Z" fill="black"/>
+<mask id="mask0_643_59047" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="197" y="37" width="8" height="8">
+<path d="M204.148 38.5575C204.342 38.3628 204.342 38.0472 204.148 37.8525C203.953 37.6578 203.637 37.6578 203.443 37.8525L201 40.295L198.558 37.8525C198.363 37.6578 198.047 37.6578 197.852 37.8525C197.658 38.0472 197.658 38.3628 197.853 38.5575L200.295 41L197.852 43.4425C197.658 43.6372 197.658 43.9528 197.853 44.1475C198.047 44.3422 198.363 44.3422 198.558 44.1475L201 41.705L203.443 44.1475C203.637 44.3422 203.953 44.3422 204.148 44.1475C204.342 43.9528 204.342 43.6372 204.148 43.4425L201.705 41L204.148 38.5575Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_643_59047)">
+<rect x="195" y="35" width="12" height="100" fill="#091E42"/>
+</g>
+</svg>