@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Containers/Templates/_templates.scss

@@ -133,17 +133,20 @@
             .ant-card-meta-description{
               display: -webkit-box;
               -webkit-line-clamp: 13;
+              line-clamp: 13;
               -webkit-box-orient: vertical; 
             }
           }
           .truncate-text-with-button{
             .ant-card-meta-description{
             -webkit-line-clamp: 13;
+            line-clamp: 13;
             }
           }
           .truncate-text-with-image{
             .ant-card-meta-description{
             -webkit-line-clamp: 3;
+            line-clamp: 3;
             }
           }
         
@@ -313,63 +316,72 @@
           }
         }
       }
-    .INAPP {
-      margin-bottom: $CAP_SPACE_12;
-      .inapp-container {
-        margin-top: $CAP_SPACE_24;
-      }
-      // Modal Layout - centered
-      .inapp-modal-layout {
-        position: absolute;
-        display: flex;
-        width: 12rem;
-        top: 10%;
-        left: 10%;
-        bottom: 5%;
+  }
+
+  .WEBPUSH {
+    .cap-custom-card {
+      .ant-card-body {
+        height: 19rem;
+        padding: $CAP_SPACE_16;
         overflow: hidden;
-        background-color: $CAP_WHITE;
-        border-radius: $CAP_SPACE_08;
-    }
-    
-    // Full Screen Layout
-    .inapp-fullscreen-layout {
-      position: absolute;
-      display: flex;
-      width: 12rem;
-      left: 10%;
-      top: 1%;
-      bottom: 1%;
-      overflow: hidden;
-      background-color: $CAP_WHITE;
-      border-radius: $CAP_SPACE_08;
-    }
-    
-    // Top Banner Layout
-    .inapp-top-banner-layout {
-      position: absolute;
-      display: flex;
-      width: 12rem;
-      left: 10%;
-      top: 1%;
-      bottom: 20%;
-      overflow: hidden;
-      background-color: $CAP_WHITE;
-      border-radius: $CAP_SPACE_08;
+
+        .ant-card-meta {
+          height: 100%;
+          
+          .ant-card-meta-description {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+
+            .sms-template-content.webpush-template-content {
+              height: 100%;
+              overflow: hidden;
+
+              .webpush-template-card {
+                height: 100%;
+                overflow: hidden;
+
+                .webpush-template-meta {
+                  flex-shrink: 0;
+                }
+
+                .webpush-template-text {
+                  flex: 1;
+                  min-height: 0;
+                  overflow: hidden;
+                }
+
+                .webpush-media-image {
+                  max-height: 7.142rem;
+                  flex-shrink: 0;
+                }
+
+                .webpush-template-cta-section {
+                  flex-shrink: 0;
+                  margin-top: $CAP_SPACE_08;
+                  padding-top: $CAP_SPACE_08;
+                  border-top: 1px solid $CAP_G07;
+                }
+              }
+            }
+          }
+        }
+      }
     }
-    
-    // Bottom Banner Layout
-    .inapp-bottom-banner-layout {
-      position: absolute;
-      display: flex;
-      justify-content: center;
-      width: 12rem;
-      left: 10%;
-      top: 50%;
-      bottom: 2%;
-      overflow: hidden;
-      background-color: $CAP_WHITE;
-      border-radius: $CAP_SPACE_08;
+
+    .cap-custom-card.has-hover-option:hover {
+      .sms-template-content.webpush-template-content {
+        opacity: 0.2;
+      }
     }
+
+    &.no-image .ant-card-meta {
+      background: $CAP_WHITE;
+      padding: $CAP_SPACE_16;
+
+      .ant-card-meta-description {
+        height: 100%;
+      }
     }
   }
 
@@ -426,6 +438,136 @@
     width: 100%;
 }
 
+.sms-template-content.webpush-template-content {
+  padding: 0;
+  // Font-family override: needed when used in library mode where parent repo's root font-family differs
+  font-family: 'Roboto', open-sans, sans-serif;
+}
+
+.webpush-template-card {
+  display: flex;
+  flex-direction: column;
+
+  .webpush-template-meta {
+    display: flex;
+    align-items: flex-start;
+    gap: $CAP_SPACE_08;
+  }
+
+  .webpush-brand-icon,
+  .webpush-brand-icon-placeholder {
+    width: $CAP_SPACE_20;
+    height: $CAP_SPACE_20;
+    border-radius: 50%;
+    flex-shrink: 0;
+    object-fit: cover;
+  }
+
+  .webpush-brand-icon-placeholder {
+    background-color: $CAP_G07;
+  }
+
+  .webpush-template-text {
+    display: flex;
+    flex-direction: column;
+    gap: $CAP_SPACE_04;
+    width: 100%;
+  }
+
+  .webpush-template-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: $CAP_SPACE_08;
+  }
+
+  .webpush-template-title {
+    width: 1px; // Required for text truncation with flex: 1
+    font-weight: 600;
+    color: $CAP_G02;
+    font-size: $FONT_SIZE_S;
+    line-height: $CAP_SPACE_16;
+    word-break: break-word;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .webpush-template-time {
+    color: $CAP_G04;
+    font-size: $FONT_SIZE_VS;
+    line-height: $CAP_SPACE_16;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .webpush-template-message {
+    color: $CAP_G04;
+    font-size: $FONT_SIZE_S;
+    line-height: $CAP_SPACE_16;
+    word-break: break-word;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .webpush-media-image {
+    width: 100%;
+    height: auto;
+    max-height: 8.571rem;
+    border-radius: $CAP_SPACE_08;
+    object-fit: cover;
+    margin-top: $CAP_SPACE_04;
+  }
+
+  .webpush-template-cta-section {
+    display: flex;
+    margin-top: $CAP_SPACE_08;
+    padding-top: $CAP_SPACE_08;
+    width: 100%;
+
+    &.single-cta {
+      justify-content: center;
+
+      .webpush-template-cta-item {
+        flex: 0 1 auto;
+      }
+    }
+
+    .webpush-template-cta-item {
+      flex: 1;
+      padding: 0 $CAP_SPACE_08;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .webpush-template-cta-item + .webpush-template-cta-item {
+      border-left: 1px solid $CAP_G07;
+    }
+
+    .webpush-template-cta-text {
+      font-weight: 600;
+      font-size: $FONT_SIZE_VS;
+      line-height: 1rem;
+      color: $CAP_G02;
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+    }
+  }
+}
+
 .footer-container{
   padding: 8px 0 8px 16px;
 }
@@ -630,6 +772,7 @@
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 3;
+      line-clamp: 3;
       -webkit-box-orient: vertical;
     }
     .title{
@@ -692,6 +835,7 @@
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
+      line-clamp: 2;
       -webkit-box-orient: vertical;
     }
     .actions{
@@ -753,8 +897,7 @@
 }
 
 .whatsapp-filters,
-.zalo-filters,
-.inapp-filters {
+.zalo-filters {
   display: flex;
   width: 100%;
   padding-left: 8px;
@@ -770,6 +913,7 @@
   overflow: hidden;
   &.desc{
     -webkit-line-clamp: 5;
+    line-clamp: 5;
   }
 }
 
@@ -867,6 +1011,7 @@
 .whatsapp-message-with-media {
   display: -webkit-box;
   -webkit-line-clamp: 3;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -874,6 +1019,7 @@
 .whatsapp-message-without-media {
   display: -webkit-box;
   -webkit-line-clamp: 10;
+  line-clamp: 10;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

package/v2Containers/Templates/actions.js

@@ -6,7 +6,7 @@
 
 import * as types from './constants';
 import {
-  LINE, WHATSAPP, RCS, ZALO,
+  LINE, WHATSAPP, RCS, ZALO, WEBPUSH,
 } from '../CreativesContainer/constants';
 
 export function getAllTemplates(channel, queryParams, intlCopyOf = '') {
@@ -68,6 +68,7 @@ export function setChannelAccount(channel, account) {
     [LINE]: types.SET_LINE_ACCOUNT,
     [WHATSAPP]: types.SET_WHATSAPP_ACCOUNT,
     [ZALO]: types.SET_ZALO_ACCOUNT,
+    [WEBPUSH]: types.SET_WEBPUSH_ACCOUNT,
     [RCS]: types.SET_RCS_ACCOUNT,
   };
   

package/v2Containers/Templates/constants.js

@@ -51,6 +51,7 @@ export const SET_FACEBOOK_ACCOUNT = "app/v2Containers/Templates/SET_FACEBOOK_ACC
 export const SET_WHATSAPP_ACCOUNT = "app/v2Containers/Templates/SET_WHATSAPP_ACCOUNT";
 export const SET_RCS_ACCOUNT = "app/v2Containers/Templates/SET_RCS_ACCOUNT";
 export const SET_ZALO_ACCOUNT = "app/v2Containers/Templates/SET_ZALO_ACCOUNT";
+export const SET_WEBPUSH_ACCOUNT = "app/v2Containers/Templates/SET_WEBPUSH_ACCOUNT";
 
 export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
 export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';