@capillarytech/creatives-library 8.0.123 → 8.0.125-alpha.0

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -9,10 +9,11 @@
   width: 450px;
 
   .preview-image {
-      width: 51%;
+      width: 70%;
       &.sms {
         width: 45%;
       }
+      &.mobilepush
 
             .inapp-message-container-POPUP-ANDROID {
               position: absolute;
@@ -575,9 +576,9 @@
   }
   .android-push-message-Container, .iphone-push-message-Container{
     position: absolute;
-    top: 11%;
-    left: 28.8%;
-    width: 42%;
+    top: 30%;
+    left: 18%;
+    width: 63%;
     height: 336px;
     overflow: auto;
     display: -webkit-box;
@@ -605,98 +606,130 @@
         }
       }
     }
+    .mobile-push-carousel-card {
+        position: relative;
+        min-width: 258px;
+        margin-right: 12px;
+        background: #fff;
+        color: #091e42;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0;
+        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.08);
+    
+        .carousel-image {
+          width: 100%;
+          height: 180px;
+          object-fit: contain;
+          border-radius: 8px 8px 0 0;
+        }
+    
+        .carousel-video-preview {
+          width: 100%;
+          height: 180px;
+          object-fit: contain;
+          border-radius: 8px 8px 0 0;
+          opacity: 0.7;
+        }
+    
+        .carousel-content {
+          padding: 10px 12px;
+          width: 100%;
+    
+          .carousel-title {
+            font-weight: 600;
+            font-size: 14px;
+            margin-bottom: 4px;
+          }
+    
+          .carousel-message {
+            font-size: 13px;
+            color: #555;
+          }
+    
+          .carousel-link {
+            margin-top: 8px;
+    
+            a {
+              color: #2466ea;
+              font-size: 12px;
+              text-decoration: underline;
+            }
+          }
+        }
+      }
   }
-  .android-push-message-Container{
-    .title, .body-text, .body-image, .app-name{
+  .android-push-message-Container, .iphone-push-message-Container{
+    .title, .body-text, .body-image, .app-header{
       background-color: #FFFFFF;
       color: #333333;
     }
-    .app-name{
+    .app-header{
       color: #5D5D5D;
       font-weight: 600;
-      padding: 8px 8px 4px 8px;
-    }
-    .title, .body-image{
-      padding: 0 8px 0 8px;
+      padding: $CAP_SPACE_04 $CAP_SPACE_08 $CAP_SPACE_04 $CAP_SPACE_08;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .app-icon{
+        width: $CAP_SPACE_12;
+        height: $CAP_SPACE_12;
+        border-radius: 50%;
+        background-color: #737070;
+      }
 
-    }
-    .body-text{
-      padding: 0 8px 4px 8px;
-      color: #5a5959;
-    }
-    .title{
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    .actions{
-      background-color: #EEEEEE;
-      height: 32px;
-      padding: 4px;
-      .action{
-        line-height: 24px;
+      .app-header-left{
+        display: flex;
+        align-items: center;
+      }
+      .app-header-right{
+        display: flex;
+        align-items: center;
         font-size: 10px;
-        font-weight: 600;
-        color: #1970DA;
-        height: 12px;
-        margin-left: 8px;
+        span{
+          font-weight: 200;
+        }
       }
     }
-  }
-  .iphone-push-message-Container{
-    top: 8%;
-    .message-pop{
-      border-radius: 4px;
-      word-wrap: break-word;
-    }
-    .title, .body-text, .body-image, .app-name{
-      background-color: #FFFFFF;
-      color: #333333;
-    }
-    .body-image{
-      padding-top: 8px;
-    }
     .title{
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      padding: 0 $CAP_SPACE_08 0 $CAP_SPACE_08;
     }
-    .app-name{
-      padding: 8px;
-      color: #5D5D5D;
-      border-bottom: solid 1px #D6D6D6;
-      .material-icons{
-        font-size: 12px;
-        float: right;
+    .body-image{
+      padding: 0 $CAP_SPACE_08 $CAP_SPACE_08 $CAP_SPACE_08;
+      img{
+        border-radius: 3%;
       }
     }
-    .title, .body-text{
-      padding: 4px;
+    .body-text{
+      padding: $CAP_SPACE_04 $CAP_SPACE_08 0.625rem $CAP_SPACE_08;
+      padding-left: $CAP_SPACE_32;
+      font-size: $FONT_SIZE_S;
     }
     .title{
+      font-size: $FONT_SIZE_S;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-    }
-    .body-text{
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
+      font-weight: 500;
+      max-width: 11.25rem;
     }
     .actions{
-      background-color: #FFFFFF;
-      opacity: 0.8;
-      height: 32px;
-      line-height: 26px;
-      margin-top: 4px;
-      border-radius: 6px;
+      background-color: #ffffff;
+      height: auto;
+      padding: $CAP_SPACE_08;
       text-align: center;
-      padding: 4px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: $CAP_SPACE_08;
       .action{
-        font-size: 12px;
+        font-size: $FONT_SIZE_S;
         font-weight: 600;
-        color: #000000;
-        text-align: center;
-        margin-left: 8px;
+        color: #1970DA;
+        height: 1.25rem;
       }
     }
   }
@@ -767,6 +800,15 @@
       }
     }
   }
+
+  .mobile-push-scroll-container {
+    position: relative;
+  }
+  // Mobile Push Carousel Styles
+  .mobile-push-carousel-container {
+    background-color: #fff;
+    padding-left: 22px;
+  }
 }
 
 .align-center {

package/v2Components/TemplatePreview/assets/images/Android _ With date and time.svg

@@ -0,0 +1,29 @@
+<svg width="380" height="632" viewBox="0 0 380 632" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_195_164721" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="380" height="632">
+<rect width="380" height="632" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_195_164721)">
+<path d="M377.084 179.127H378.056C379.129 179.127 380 180.192 380 181.506V299.612C380 300.925 379.129 301.99 378.056 301.99H377.084V179.127Z" fill="#DFE2E7"/>
+<path d="M377.084 368.589H378.056C379.129 368.589 380 369.654 380 370.967V430.512C380 431.826 379.129 432.891 378.056 432.891H377.084V368.589Z" fill="#DFE2E7"/>
+<path d="M0 100.357C0 55.6747 0 33.3334 10.7113 18.516C12.2323 16.4119 13.8909 14.4523 15.6717 12.6553C28.213 0 47.1224 0 84.9412 0H292.143C329.962 0 348.871 0 361.413 12.6553C363.194 14.4523 364.852 16.4119 366.373 18.516C377.084 33.3334 377.084 55.6747 377.084 100.357V884.843C377.084 929.525 377.084 951.867 366.373 966.684C364.852 968.788 363.194 970.748 361.413 972.545C348.871 985.2 329.962 985.2 292.143 985.2H84.9412C47.1224 985.2 28.213 985.2 15.6717 972.545C13.8909 970.748 12.2323 968.788 10.7113 966.684C0 951.867 0 929.525 0 884.843V100.357Z" fill="#DFE2E7"/>
+<path d="M1.94336 92.8361C1.94336 55.2748 1.94336 36.4942 10.4977 23.6736C12.4375 20.7665 14.6606 18.1399 17.1212 15.8481C27.9723 5.74121 43.868 5.74121 75.6595 5.74121H301.424C333.216 5.74121 349.111 5.74121 359.962 15.8481C362.423 18.1399 364.646 20.7665 366.586 23.6736C375.14 36.4942 375.14 55.2748 375.14 92.8361V892.364C375.14 929.925 375.14 948.706 366.586 961.526C364.646 964.433 362.423 967.06 359.962 969.352C349.111 979.459 333.216 979.459 301.424 979.459H75.6595C43.868 979.459 27.9723 979.459 17.1212 969.352C14.6606 967.06 12.4375 964.433 10.4977 961.526C1.94336 948.706 1.94336 929.925 1.94336 892.364V92.8361Z" fill="#EBECF0"/>
+<rect x="8" y="17.5557" width="363" height="943.6" rx="36" fill="#EBECF0"/>
+<path d="M8 51C8 31.1177 24.1177 15 44 15H335C354.882 15 371 31.1177 371 51V59H8V51Z" fill="#F4F5F7"/>
+<text fill="#2C2C2C" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="14" letter-spacing="0em"><tspan x="32" y="43.7852">2:29</tspan></text>
+<path d="M285.717 35.3538C285.671 35.3973 285.616 35.4319 285.555 35.4554C285.494 35.479 285.429 35.4911 285.364 35.4911C285.298 35.4911 285.233 35.479 285.172 35.4554C285.112 35.4319 285.056 35.3973 285.01 35.3538L282.889 33.3651C282.796 33.2771 282.744 33.1581 282.744 33.0343C282.745 32.9105 282.798 32.7918 282.891 32.7042C282.984 32.6167 283.111 32.5673 283.243 32.5669C283.375 32.5666 283.502 32.6152 283.596 32.7022L285.717 34.6909C285.764 34.7344 285.8 34.7861 285.826 34.843C285.851 34.8998 285.864 34.9608 285.864 35.0224C285.864 35.0839 285.851 35.1449 285.826 35.2017C285.8 35.2586 285.764 35.3103 285.717 35.3538ZM275.111 32.7022C275.017 32.6143 274.89 32.5649 274.757 32.5649C274.624 32.5649 274.497 32.6143 274.404 32.7022L272.282 34.6909C272.188 34.7788 272.136 34.898 272.136 35.0224C272.136 35.1467 272.188 35.2659 272.282 35.3538C272.376 35.4417 272.503 35.4911 272.636 35.4911C272.768 35.4911 272.896 35.4417 272.989 35.3538L275.111 33.3651C275.157 33.3216 275.194 33.2699 275.219 33.2131C275.244 33.1562 275.257 33.0952 275.257 33.0337C275.257 32.9721 275.244 32.9112 275.219 32.8543C275.194 32.7974 275.157 32.7457 275.111 32.7022V32.7022ZM284.998 38.8561C284.999 38.9039 285 38.9518 285 38.9999C285 39.0479 284.999 39.0958 284.998 39.1437C284.998 39.15 284.997 39.1563 284.997 39.1625C284.996 39.2045 284.994 39.2465 284.992 39.2885L284.992 39.2928C284.914 40.6815 284.291 41.9941 283.242 42.9774C282.194 43.9606 280.793 44.5449 279.312 44.6173L279.308 44.6175C279.263 44.6197 279.218 44.6212 279.173 44.6223C279.167 44.6225 279.16 44.6229 279.153 44.6231C279.102 44.6242 279.051 44.6248 279 44.6249C278.949 44.6249 278.897 44.6243 278.846 44.6231C278.84 44.6229 278.833 44.6225 278.826 44.6223C278.781 44.6212 278.737 44.6196 278.692 44.6175L278.687 44.6173C277.206 44.5449 275.806 43.9607 274.757 42.9774C273.708 41.9941 273.085 40.6815 273.008 39.2928L273.008 39.2884C273.005 39.2465 273.004 39.2045 273.002 39.1625C273.002 39.1563 273.002 39.15 273.002 39.1437C273 39.0958 273 39.0479 273 38.9999C273 38.9518 273 38.9039 273.002 38.8561C273.002 38.8498 273.002 38.8435 273.002 38.8372C273.004 38.7951 273.005 38.7532 273.008 38.7112L273.008 38.707C273.085 37.3183 273.708 36.0057 274.757 35.0224C275.806 34.0391 277.206 33.4549 278.687 33.3824L278.692 33.3822C278.737 33.3801 278.781 33.3785 278.826 33.3774C278.833 33.3772 278.84 33.3769 278.846 33.3767C278.897 33.3755 278.948 33.3749 279 33.3749C279.051 33.3749 279.102 33.3755 279.153 33.3767C279.16 33.3769 279.167 33.3772 279.173 33.3774C279.218 33.3786 279.263 33.3801 279.308 33.3822L279.312 33.3824C280.793 33.4549 282.194 34.0391 283.242 35.0224C284.291 36.0056 284.914 37.3183 284.992 38.707L284.992 38.7113C284.994 38.7532 284.996 38.7951 284.997 38.8372C284.997 38.8435 284.998 38.8498 284.998 38.8561H284.998ZM283 38.9999C283 38.8755 282.947 38.7563 282.853 38.6684C282.759 38.5805 282.632 38.5311 282.5 38.5311H279.5V35.7186C279.5 35.5943 279.447 35.4751 279.353 35.3872C279.259 35.2993 279.132 35.2499 279 35.2499C278.867 35.2499 278.74 35.2993 278.646 35.3872C278.552 35.4751 278.5 35.5943 278.5 35.7186V38.9999C278.5 39.1242 278.552 39.2434 278.646 39.3313C278.74 39.4192 278.867 39.4686 279 39.4686H282.5C282.632 39.4686 282.759 39.4192 282.853 39.3313C282.947 39.2434 283 39.1242 283 38.9999Z" fill="#2C2C2C"/>
+<path d="M300 41.8C299.817 41.8008 299.636 41.8377 299.468 41.9085C299.299 41.9793 299.146 42.0827 299.017 42.2127C298.888 42.3427 298.786 42.4968 298.717 42.6662C298.648 42.8356 298.613 43.017 298.614 43.2C298.614 43.9728 299.235 44.6 300 44.6C300.183 44.5991 300.364 44.5622 300.533 44.4913C300.702 44.4205 300.855 44.3171 300.983 44.1871C301.112 44.0571 301.214 43.903 301.283 43.7336C301.352 43.5643 301.387 43.383 301.386 43.2C301.386 42.4265 300.766 41.8 300 41.8ZM297.06 40.2306L298.04 41.2204C298.296 40.9607 298.602 40.7544 298.938 40.6136C299.275 40.4728 299.636 40.4003 300.001 40.4003C300.365 40.4003 300.727 40.4728 301.063 40.6136C301.4 40.7544 301.705 40.9607 301.961 41.2204L302.94 40.2306C302.556 39.841 302.099 39.5317 301.594 39.3205C301.089 39.1093 300.547 39.0006 300 39.0006C299.453 39.0006 298.912 39.1093 298.407 39.3205C297.902 39.5317 297.444 39.841 297.06 40.2306ZM295.1 38.2496L296.08 39.2394C296.592 38.7201 297.203 38.3077 297.876 38.0262C298.548 37.7447 299.271 37.5997 300 37.5997C300.729 37.5997 301.452 37.7447 302.124 38.0262C302.797 38.3077 303.408 38.7201 303.92 39.2394L304.9 38.2496C304.26 37.6004 303.497 37.0848 302.656 36.733C301.815 36.3811 300.912 36.1999 300 36.1999C299.089 36.1999 298.186 36.3811 297.345 36.733C296.503 37.0848 295.741 37.6004 295.1 38.2496V38.2496ZM293.14 36.27L294.12 37.2598C294.888 36.4806 295.803 35.8619 296.813 35.4395C297.822 35.0172 298.906 34.7997 300 34.7997C301.094 34.7997 302.178 35.0172 303.187 35.4395C304.197 35.8619 305.112 36.4806 305.88 37.2598L306.86 36.27C305.964 35.3609 304.896 34.6391 303.718 34.1463C302.541 33.6536 301.277 33.3999 300 33.3999C298.723 33.3999 297.459 33.6536 296.282 34.1463C295.104 34.6391 294.036 35.3609 293.14 36.27V36.27Z" fill="#2C2C2C"/>
+<path d="M313.5 42.75H314.84V45H313.5V42.75Z" fill="#2C2C2C"/>
+<path d="M316.382 40.25H317.722V45H316.382V40.25Z" fill="#2C2C2C"/>
+<path d="M319.264 37.75H320.604V44.9998H319.264V37.75Z" fill="#2C2C2C"/>
+<path d="M322.145 35.25H323.485V44.9998H322.145V35.25Z" fill="#2C2C2C"/>
+<path d="M325.026 33H326.367V45H325.026V33Z" fill="#2C2C2C"/>
+<path d="M343.611 45.5834H336.329C335.928 45.5834 335.601 45.2777 335.601 44.9042V33.3584C335.601 32.9848 335.928 32.6792 336.329 32.6792H343.611C344.011 32.6792 344.339 32.9848 344.339 33.3584V44.9042C344.339 45.2777 344.011 45.5834 343.611 45.5834Z" fill="#CFD8DC"/>
+<path d="M341.426 35.0562H338.514C338.295 35.0562 338.149 34.9204 338.149 34.7167V32.3396C338.149 32.1358 338.295 32 338.514 32H341.426C341.645 32 341.791 32.1358 341.791 32.3396V34.7167C341.791 34.9204 341.645 35.0562 341.426 35.0562Z" fill="#CFD8DC"/>
+<path d="M343.611 45.5834H336.329C335.928 45.5834 335.601 45.2778 335.601 44.9042V38.4521H344.339V44.9042C344.339 45.2778 344.011 45.5834 343.611 45.5834Z" fill="#6B6B6B"/>
+<text fill="#091E42" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="28" font-weight="600" letter-spacing="0px"><tspan x="136.5" y="146.57">2:29 PM</tspan></text>
+<text fill="#5E6C84" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="12" letter-spacing="0px"><tspan x="161.598" y="171.102">Fri, 12 Dec</tspan></text>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M188.527 47.0783C193.95 47.0783 198.346 41.9374 198.346 35.5958C198.346 29.2542 193.95 24.1133 188.527 24.1133C183.104 24.1133 178.708 29.2542 178.708 35.5958C178.708 41.9374 183.104 47.0783 188.527 47.0783Z" fill="#DFE2E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M188.528 42.7726C191.917 42.7726 194.665 39.5595 194.665 35.596C194.665 31.6325 191.917 28.4194 188.528 28.4194C185.138 28.4194 182.391 31.6325 182.391 35.596C182.391 39.5595 185.138 42.7726 188.528 42.7726Z" fill="#B3BAC5"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M188.527 34.1607C189.205 34.1607 189.755 33.5181 189.755 32.7254C189.755 31.9327 189.205 31.29 188.527 31.29C187.849 31.29 187.3 31.9327 187.3 32.7254C187.3 33.5181 187.849 34.1607 188.527 34.1607Z" fill="#DFE2E7"/>
+</g>
+</svg>

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

@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2199 2.57333L12.3533 3.44C13.3533 4.16667 13.9999 5.34 13.9999 6.66667H5.99992C5.99992 5.34 6.64659 4.17333 7.63325 3.44667L6.75992 2.57333C6.62659 2.44 6.62659 2.23333 6.75992 2.1C6.89325 1.96667 7.09992 1.96667 7.23325 2.1L8.22659 3.08667C8.75992 2.82 9.35992 2.66667 9.99992 2.66667C10.6333 2.66667 11.2333 2.82 11.7599 3.08667L12.7466 2.1C12.8799 1.96667 13.0866 1.96667 13.2199 2.1C13.3533 2.23333 13.3533 2.44 13.2199 2.57333ZM3.33325 8.33333C3.33325 7.78 3.77992 7.33333 4.33325 7.33333C4.88659 7.33333 5.33325 7.78 5.33325 8.33333V13C5.33325 13.5533 4.88659 14 4.33325 14C3.77992 14 3.33325 13.5533 3.33325 13V8.33333ZM6.66659 14.6667C6.29992 14.6667 5.99992 14.3667 5.99992 14V7.33333H13.9999V14C13.9999 14.3667 13.6999 14.6667 13.3333 14.6667H12.6666V17C12.6666 17.5533 12.2199 18 11.6666 18C11.1133 18 10.6666 17.5533 10.6666 17V14.6667H9.33325V17C9.33325 17.5533 8.88659 18 8.33325 18C7.77992 18 7.33325 17.5533 7.33325 17V14.6667H6.66659ZM15.6666 7.33333C15.1133 7.33333 14.6666 7.78 14.6666 8.33333V13C14.6666 13.5533 15.1133 14 15.6666 14C16.2199 14 16.6666 13.5533 16.6666 13V8.33333C16.6666 7.78 16.2199 7.33333 15.6666 7.33333ZM8.66659 5.33333H7.99992V4.66667H8.66659V5.33333ZM11.3333 5.33333H11.9999V4.66667H11.3333V5.33333Z" fill="black"/>
+<mask id="mask0_202_59394" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="2" width="14" height="16">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2199 2.57333L12.3533 3.44C13.3533 4.16667 13.9999 5.34 13.9999 6.66667H5.99992C5.99992 5.34 6.64659 4.17333 7.63325 3.44667L6.75992 2.57333C6.62659 2.44 6.62659 2.23333 6.75992 2.1C6.89325 1.96667 7.09992 1.96667 7.23325 2.1L8.22659 3.08667C8.75992 2.82 9.35992 2.66667 9.99992 2.66667C10.6333 2.66667 11.2333 2.82 11.7599 3.08667L12.7466 2.1C12.8799 1.96667 13.0866 1.96667 13.2199 2.1C13.3533 2.23333 13.3533 2.44 13.2199 2.57333ZM3.33325 8.33333C3.33325 7.78 3.77992 7.33333 4.33325 7.33333C4.88659 7.33333 5.33325 7.78 5.33325 8.33333V13C5.33325 13.5533 4.88659 14 4.33325 14C3.77992 14 3.33325 13.5533 3.33325 13V8.33333ZM6.66659 14.6667C6.29992 14.6667 5.99992 14.3667 5.99992 14V7.33333H13.9999V14C13.9999 14.3667 13.6999 14.6667 13.3333 14.6667H12.6666V17C12.6666 17.5533 12.2199 18 11.6666 18C11.1133 18 10.6666 17.5533 10.6666 17V14.6667H9.33325V17C9.33325 17.5533 8.88659 18 8.33325 18C7.77992 18 7.33325 17.5533 7.33325 17V14.6667H6.66659ZM15.6666 7.33333C15.1133 7.33333 14.6666 7.78 14.6666 8.33333V13C14.6666 13.5533 15.1133 14 15.6666 14C16.2199 14 16.6666 13.5533 16.6666 13V8.33333C16.6666 7.78 16.2199 7.33333 15.6666 7.33333ZM8.66659 5.33333H7.99992V4.66667H8.66659V5.33333ZM11.3333 5.33333H11.9999V4.66667H11.3333V5.33333Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_202_59394)">
+<rect width="20" height="20" fill="#091E42"/>
+</g>
+</svg>

package/v2Components/TemplatePreview/assets/images/iOS _ With date and time.svg

@@ -0,0 +1,26 @@
+<svg width="380" height="632" viewBox="0 0 380 632" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_195_164834" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="380" height="632">
+<rect width="380" height="632" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_195_164834)">
+<rect x="3" width="375" height="778" rx="50" fill="#EBECF0"/>
+<rect x="14" y="16" width="351" height="750" rx="36" fill="#EBECF0"/>
+<path d="M15 52C15 32.1177 31.1178 16 51 16H330C349.882 16 366 32.1177 366 52V62H15V52Z" fill="#F4F5F7"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="SF Pro Display" font-size="15" font-weight="500" letter-spacing="-0.3px"><tspan x="43.179" y="46.332">2:29</tspan></text>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M290.339 35.667H289.339C288.787 35.667 288.339 36.1147 288.339 36.667V45.3337C288.339 45.8859 288.787 46.3337 289.339 46.3337H290.339C290.891 46.3337 291.339 45.8859 291.339 45.3337V36.667C291.339 36.1147 290.891 35.667 290.339 35.667ZM284.672 38.0003H285.672C286.224 38.0003 286.672 38.448 286.672 39.0003V45.3337C286.672 45.8859 286.224 46.3337 285.672 46.3337H284.672C284.12 46.3337 283.672 45.8859 283.672 45.3337V39.0003C283.672 38.448 284.12 38.0003 284.672 38.0003ZM281.006 40.3337H280.006C279.453 40.3337 279.006 40.7814 279.006 41.3337V45.3337C279.006 45.8859 279.453 46.3337 280.006 46.3337H281.006C281.558 46.3337 282.006 45.8859 282.006 45.3337V41.3337C282.006 40.7814 281.558 40.3337 281.006 40.3337ZM276.339 42.3337H275.339C274.787 42.3337 274.339 42.7814 274.339 43.3337V45.3337C274.339 45.8859 274.787 46.3337 275.339 46.3337H276.339C276.891 46.3337 277.339 45.8859 277.339 45.3337V43.3337C277.339 42.7814 276.891 42.3337 276.339 42.3337Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M304.006 37.7845C306.231 37.7846 308.37 38.6387 309.983 40.1703C310.104 40.2885 310.298 40.287 310.418 40.1669L311.578 38.9966C311.639 38.9357 311.673 38.8532 311.672 38.7673C311.672 38.6815 311.637 38.5994 311.576 38.5392C307.344 34.4869 300.667 34.4869 296.436 38.5392C296.374 38.5993 296.339 38.6814 296.339 38.7673C296.338 38.8531 296.372 38.9356 296.433 38.9966L297.593 40.1669C297.713 40.2872 297.907 40.2887 298.029 40.1703C299.641 38.6386 301.781 37.7845 304.006 37.7845ZM304.006 41.5921C305.228 41.592 306.407 42.0459 307.313 42.8657C307.436 42.9821 307.629 42.9795 307.748 42.86L308.907 41.6897C308.968 41.6283 309.002 41.545 309.001 41.4585C309.001 41.372 308.965 41.2894 308.903 41.2293C306.144 38.6649 301.871 38.6649 299.112 41.2293C299.049 41.2894 299.014 41.372 299.013 41.4586C299.012 41.5451 299.046 41.6284 299.107 41.6897L300.266 42.86C300.386 42.9795 300.579 42.9821 300.701 42.8657C301.607 42.0465 302.784 41.5926 304.006 41.5921ZM306.328 44.1539C306.33 44.2407 306.296 44.3243 306.234 44.3851L304.228 46.4071C304.17 46.4666 304.09 46.5 304.006 46.5C303.922 46.5 303.842 46.4666 303.783 46.4071L301.778 44.3851C301.716 44.3243 301.682 44.2406 301.684 44.1538C301.685 44.0671 301.723 43.9849 301.787 43.9267C303.068 42.8444 304.944 42.8444 306.224 43.9267C306.289 43.9849 306.326 44.0671 306.328 44.1539Z" fill="black"/>
+<rect opacity="0.35" x="317.172" y="35.8335" width="21" height="10.3333" rx="2.16667" stroke="black"/>
+<path opacity="0.4" d="M339.672 39V43C340.477 42.6612 341 41.8731 341 41C341 40.1269 340.477 39.3388 339.672 39" fill="black"/>
+<rect x="318.672" y="37.3335" width="18" height="7.33333" rx="1.33333" fill="black"/>
+<text fill="#091E42" xml:space="preserve" style="white-space: pre" font-family="SF Pro Display" font-size="28" font-weight="500" letter-spacing="0px"><tspan x="139" y="149.953">2:29 PM</tspan></text>
+<text fill="#5E6C84" xml:space="preserve" style="white-space: pre" font-family="SF Pro Display" font-size="12" letter-spacing="0px"><tspan x="164.35" y="174.266">Fri, 12 Dec</tspan></text>
+<path d="M377.239 168.215H378.5C379.328 168.215 380 168.887 380 169.715V255.277C380 256.106 379.328 256.777 378.5 256.777H377.239V168.215Z" fill="#DFE2E7"/>
+<path d="M2.76074 221.722H1.50045C0.672024 221.722 0.000451565 222.393 0.000451565 223.222V273.728C0.000451565 274.556 0.672024 275.228 1.50045 275.228H2.76074V221.722Z" fill="#DFE2E7"/>
+<path d="M2.76074 150.688H1.50045C0.672024 150.688 0.000451565 151.359 0.000451565 152.187V202.694C0.000451565 203.522 0.672024 204.194 1.50045 204.194H2.76074V150.688Z" fill="#DFE2E7"/>
+<path d="M2.76074 94.4141H1.50045C0.672024 94.4141 0.000451565 95.0856 0.000451565 95.9141V119.667C0.000451565 120.496 0.672024 121.167 1.50045 121.167H2.76074V94.4141Z" fill="#DFE2E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.772 16C120.058 16 122.343 18.2767 122.373 20.5681V20.9703C122.373 28.9246 128.821 35.3729 136.775 35.3729H244.144C252.099 35.3729 258.547 28.9246 258.547 20.9703V16H122.373H122.373H117.772ZM258.547 20.6126C258.547 17.9768 260.519 16 263.148 16H258.547V20.6126Z" fill="#EBECF0"/>
+<rect opacity="0.75" x="170.218" y="17.8452" width="39.5642" height="6.45763" rx="3.22881" fill="#B3BAC5"/>
+<ellipse cx="217.604" cy="21.0738" rx="5.06053" ry="5.07385" fill="#B3BAC5"/>
+<ellipse cx="217.603" cy="21.074" rx="3.22034" ry="3.22881" fill="#DFE2E7"/>
+</g>
+</svg>

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

@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9791 0.833008C14.1059 1.88962 13.6398 2.95101 12.9518 3.71485C12.2615 4.47723 11.1319 5.07121 10.0244 4.9927C9.87481 3.95516 10.4332 2.8769 11.0718 2.19964C11.7846 1.43653 12.9863 0.869696 13.9791 0.833008ZM16.2244 6.6524C16.0478 6.76316 14.4498 7.76541 14.4697 9.78151C14.4915 12.2155 16.5449 13.0622 16.6616 13.1104C16.6644 13.1115 16.666 13.1122 16.6666 13.1125C16.6655 13.1157 16.6634 13.1223 16.6603 13.1323C16.6089 13.2971 16.2773 14.3597 15.5324 15.4552C14.8501 16.4588 14.1429 17.4571 13.0273 17.4775C12.491 17.4878 12.1328 17.3319 11.7602 17.1697C11.3704 17.0001 10.965 16.8237 10.3239 16.8237C9.65196 16.8237 9.2277 17.0056 8.81904 17.1808C8.46498 17.3327 8.12263 17.4795 7.64107 17.4986C6.56475 17.5398 5.74437 16.4149 5.05645 15.4153C3.64933 13.3702 2.57468 9.63589 4.01875 7.11609C4.73429 5.86406 6.01595 5.07133 7.40644 5.05058C8.00546 5.03995 8.58588 5.27178 9.09385 5.47466C9.48223 5.62978 9.82826 5.76798 10.1079 5.76798C10.3591 5.76798 10.6958 5.63438 11.0885 5.4786C11.7067 5.23334 12.4634 4.93311 13.243 5.01275C13.7764 5.03484 15.2754 5.22901 16.2376 6.64407C16.235 6.64577 16.2306 6.64855 16.2244 6.6524Z" fill="black"/>
+<mask id="mask0_202_65233" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="0" width="14" height="18">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9791 0.833008C14.1059 1.88962 13.6398 2.95101 12.9518 3.71485C12.2615 4.47723 11.1319 5.07121 10.0244 4.9927C9.87481 3.95516 10.4332 2.8769 11.0718 2.19964C11.7846 1.43653 12.9863 0.869696 13.9791 0.833008ZM16.2244 6.6524C16.0478 6.76316 14.4498 7.76541 14.4697 9.78151C14.4915 12.2155 16.5449 13.0622 16.6616 13.1104C16.6644 13.1115 16.666 13.1122 16.6666 13.1125C16.6655 13.1157 16.6634 13.1223 16.6603 13.1323C16.6089 13.2971 16.2773 14.3597 15.5324 15.4552C14.8501 16.4588 14.1429 17.4571 13.0273 17.4775C12.491 17.4878 12.1328 17.3319 11.7602 17.1697C11.3704 17.0001 10.965 16.8237 10.3239 16.8237C9.65196 16.8237 9.2277 17.0056 8.81904 17.1808C8.46498 17.3327 8.12263 17.4795 7.64107 17.4986C6.56475 17.5398 5.74437 16.4149 5.05645 15.4153C3.64933 13.3702 2.57468 9.63589 4.01875 7.11609C4.73429 5.86406 6.01595 5.07133 7.40644 5.05058C8.00546 5.03995 8.58588 5.27178 9.09385 5.47466C9.48223 5.62978 9.82826 5.76798 10.1079 5.76798C10.3591 5.76798 10.6958 5.63438 11.0885 5.4786C11.7067 5.23334 12.4634 4.93311 13.243 5.01275C13.7764 5.03484 15.2754 5.22901 16.2376 6.64407C16.235 6.64577 16.2306 6.64855 16.2244 6.6524Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_202_65233)">
+<rect width="20" height="20" fill="#5E6C84"/>
+</g>
+</svg>

package/v2Components/TemplatePreview/index.js

@@ -32,6 +32,7 @@ import {
   RCS,
   ZALO,
   INAPP,
+  MOBILE_PUSH
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
@@ -66,8 +67,8 @@ const viberMobileAndroid = require('./assets/images/viberMobile.svg');
 const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
 const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
 const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
-const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
-const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
+const androidPushMessagePhone = require('./assets/images/Android _ With date and time.svg');
+const iPhonePushMessagePhone = require('./assets/images/iOS _ With date and time.svg');
 
 export class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -167,6 +168,53 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     this.props.onTestContentClicked(params);
   };
 
+  renderMobilePushCarousel = (content) => {
+    if (!content?.carouselData || content.carouselData.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="msg-container-carousel mobile-push-carousel-container">
+        <div className="scroll-container mobile-push-scroll-container">
+          {content.carouselData.map((item, idx) => (
+            <div
+              key={`carousel-card-${idx}`}
+              className="mobile-push-carousel-card message-pop align-left message-pop-carousel"
+            >
+              {item.mediaType === "image" && item.imageUrl && (
+                <CapImage
+                  src={item.imageUrl}
+                  alt="carousel-img"
+                  className="carousel-image"
+                />
+              )}
+              {item.mediaType === "video" && item.videoPreviewImg && (
+                <div className="video-preview">
+                  <CapImage
+                    src={item.videoPreviewImg}
+                    alt="carousel-video-preview"
+                    className="carousel-video-preview"
+                  />
+                  <div className="icon-position">
+                    <CapImage className="video-icon" src={videoPlay} />
+                  </div>
+                </div>
+              )}
+              <div className="carousel-content">
+                <div className="carousel-title">
+                  {item.title || item.header || ""}
+                </div>
+                <div className="carousel-message">
+                  {item.message || item.bodyText || ""}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
   render() {
     const {
       channel,
@@ -213,7 +261,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
     let iosActions = [];
     if ((channel || '').toLowerCase() === "mobilepush") {
-      iosActions = _.map(content.actions, (action) => {
+      iosActions = _.map(content.actions || [], (action) => {
         if (action.label) {
           return (<div className="actions" key={`action-${action.label}`}>
               <span className="action">{action.label.toUpperCase()}</span>
@@ -410,31 +458,32 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       handlePreviewInNewTab(templatePreviewUrl);
     };
 
-    const getPreviewImage = () => {
-      if (this.props.device === ANDROID) {
-        switch (templateLayoutType) {
-          case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
-            return inAppMobileAndroidModal;
-          case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
-            return inAppMobileAndroidTop;
-          case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
-            return inAppMobileAndroidBottom;
-          default:
-            return inAppMobileAndroidFull;
-        }
-      } else {
-        switch (templateLayoutType) {
-          case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
-            return inAppMobileIOSModal;
-          case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
-            return inAppMobileIOSTop;
-          case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
-            return inAppMobileIOSBottom;
-          default:
-            return inAppMobileIOSFull;
-        }
+    const   getPreviewImage = () => {
+    if (this.props.device === ANDROID) {
+      switch (templateLayoutType) {
+        case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
+          return inAppMobileAndroidModal;
+        case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
+          return inAppMobileAndroidTop;
+        case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
+          return inAppMobileAndroidBottom;
+        default:
+          return inAppMobileAndroidFull;
       }
-    };
+    } else {
+      switch (templateLayoutType) {
+        case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
+          return inAppMobileIOSModal;
+        case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
+          return inAppMobileIOSTop;
+        case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
+          return inAppMobileIOSBottom;
+        default:
+          return inAppMobileIOSFull;
+      }
+    }
+  };
+
     const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
     const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
     return (
@@ -606,7 +655,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             ) : (
               ""
             )}
-            {channel && channel.toLowerCase() === "mobilepush" && (
+            {channel && channel.toUpperCase() === MOBILE_PUSH && (
               <div className="shell-v2 align-center" id="mobilepush-preview">
                 <CapImage
                   className="preview-image"
@@ -619,7 +668,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 />
                 {(!!content.header ||
                   !!content.bodyText ||
-                  !!content.bodyImage) && (
+                  !!content.bodyImage || !!content.bodyVideo?.videoSrc || !!content.bodyGif) && (
                   <div
                     className={`${
                       this.props.device === "ios" ? "iphone" : this.props.device
@@ -627,22 +676,54 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   >
                     {this.props.device === "android" ? (
                       <div className="message-pop align-left">
-                        <div className="app-name">
-                          <span className="app-icon"></span>{" "}
-                          {content.appName ? content.appName : "App name"}
+                        <div className="app-header">
+                          <div className="app-header-left">
+                          <span className="app-icon">{""}</span>
+                          <div className="title">{content.header}</div>
+                          </div>
+                          <div className="app-header-right">
+                            <span>2:29 PM</span>
+                            <CapIcon type="chevron-down" size="sm" />
+                          </div>
                         </div>
-                        <div className="title">{content.header}</div>
                         <div className="body-text">{content.bodyText}</div>
-                        {content.bodyImage && (
+                        {(content.bodyImage || content?.bodyVideo?.videoSrc || content.bodyGif) && (
                           <div className="body-image">
-                            <CapImage src={content.bodyImage} alt="" />
+                            {(() => {
+                              if (content?.bodyVideo?.videoSrc && !content.bodyImage && !content.bodyGif) {
+                                return (
+                                  <video 
+                                    key={`android-video-${content.bodyVideo.videoSrc}`}
+                                    controls 
+                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
+                                    poster={content?.bodyVideo?.videoPreview || undefined}
+                                  >
+                                    <source src={content.bodyVideo.videoSrc} type="video/mp4" />
+                                    {formatMessage(messages.videoNotSupported)}
+                                  </video>
+                                );
+                              } else if (content.bodyGif) {
+                                return (
+                                  <img 
+                                    src={content.bodyGif} 
+                                    alt="GIF preview" 
+                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
+                                    key={`android-gif-${content.bodyGif}`}
+                                  />
+                                );
+                              } else {
+                                return (
+                                  <CapImage src={content.bodyImage || content?.bodyVideo?.videoPreview} alt="" />
+                                );
+                              }
+                            })()}
                           </div>
                         )}
-                        {content.actions.filter((action) => action.label)
+                        {(content.actions || []).filter((action) => action.label)
                           .length ? (
                             <div className="actions">
                               {_.map(
-                                content.actions,
+                                content.actions || [],
                               (action) =>
                                 !!action.label && (
                                   <span
@@ -657,26 +738,73 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                           ) : (
                             ""
                           )}
+                        {channel && channel.toLowerCase() === "mobilepush" && this.renderMobilePushCarousel(content)}
                       </div>
                     ) : (
                       <div className="message-pop align-left">
-                        <div className="app-name">
-                          <span className="app-icon"></span>
-                          {content.appName ? content.appName : "App name"}{" "}
-                          <i className="material-icons">
-                            {this.props.intl.formatMessage(messages.close)}
-                          </i>
+                        <div className="app-header">
+                          <div className="app-header-left">
+                          <span className="app-icon">{""}</span>
+                          <div className="title">{content.header}</div>
+                          </div>
+                          <div className="app-header-right">
+                            <span>2:29 PM</span>
+                            <CapIcon type="chevron-down" size="sm" />
+                          </div>
                         </div>
-                        {content.bodyImage && (
+                        <div className="body-text">{content.bodyText}</div>
+                        {(content.bodyImage || content?.bodyVideo?.videoSrc || content.bodyGif) && (
                           <div className="body-image">
-                            <CapImage src={content.bodyImage} alt="" />
+                            {(() => {
+                              if (content?.bodyVideo?.videoSrc && !content.bodyImage && !content.bodyGif) {
+                                return (
+                                  <video 
+                                    key={`ios-video-${content.bodyVideo.videoSrc}`}
+                                    controls 
+                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
+                                    poster={content?.bodyVideo?.videoPreview || undefined}
+                                  >
+                                    <source src={content.bodyVideo.videoSrc} type="video/mp4" />
+                                    {formatMessage(messages.videoNotSupported)}
+                                  </video>
+                                );
+                              } else if (content.bodyGif) {
+                                return (
+                                  <img 
+                                    src={content.bodyGif} 
+                                    alt="GIF preview" 
+                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
+                                    key={`ios-gif-${content.bodyGif}`}
+                                  />
+                                );
+                              } else {
+                                return (
+                                  <CapImage src={content.bodyImage || content?.bodyVideo?.videoPreview} alt="" />
+                                );
+                              }
+                            })()}
                           </div>
                         )}
-                        <div className="title">{content.header}</div>
-                        <div className="body-text">{content.bodyText}</div>
-                        {content.actions.filter((action) => action.label).length
-                          ? iosActions
-                          : ""}
+                        {(content.actions || []).filter((action) => action.label)
+                          .length ? (
+                            <div className="actions">
+                              {_.map(
+                                content.actions || [],
+                              (action) =>
+                                !!action.label && (
+                                  <span
+                                    className="action"
+                                    key={`action-${action.label}`}
+                                  >
+                                    {action.label && action.label.toUpperCase()}
+                                  </span>
+                                )
+                              )}
+                            </div>
+                          ) : (
+                            ""
+                          )}
+                        {channel && channel.toLowerCase() === "mobilepush" && this.renderMobilePushCarousel(content)}
                       </div>
                     )}
                   </div>