@antscorp/antsomi-ui 1.3.6-beta.71 → 1.3.6-beta.72

package/es/components/organism/PreviewCollections/constants.js

@@ -26,13 +26,29 @@ export const SAMPLE_PREVIEW = {
                     format: 'IMAGE',
                 },
                 body: {
-                    text: `Hi {{1}}, the item {{2}} you were wondering about is BACK IN STOCK! 🎉
-
-            Click the button to get it!
+                    text: `Hi {{1}}, the item {{2}} you were wondering about is BACK IN STOCK! 🎉
+
+            Click the button to get it!
           `,
                 },
                 buttons: [{ type: 'URL', text: 'Grab the offer', url: 'https://test.com.vn' }],
             },
+            {
+                type: 'MEDIA',
+                header: {
+                    format: 'VIDEO',
+                    videoURL: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                },
+                body: {
+                    text: `Hey {{1}}, we have an exclusive deal waiting for you! 🎉
+
+            Get {{2}}% OFF on your next purchase when you shop before {{3}}. Don't miss out on this special offer!
+
+            Use code: {{4}} at checkout.
+          `,
+                },
+                buttons: [{ type: 'URL', text: 'Shop now', url: 'https://test.com.vn' }],
+            },
             {
                 type: 'MEDIA',
                 header: {
@@ -40,11 +56,11 @@ export const SAMPLE_PREVIEW = {
                     text: '🔔 Limited-Time Offer Just for {{1}}!',
                 },
                 body: {
-                    text: `Hey {{1}}, we have an exclusive deal waiting for you! 🎉
-
-            Get {{2}}% OFF on your next purchase when you shop before {{3}}. Don't miss out on this special offer!
-
-            Use code: {{4}} at checkout.
+                    text: `Hey {{1}}, we have an exclusive deal waiting for you! 🎉
+
+            Get {{2}}% OFF on your next purchase when you shop before {{3}}. Don't miss out on this special offer!
+
+            Use code: {{4}} at checkout.
           `,
                 },
                 buttons: [{ type: 'URL', text: 'Shop now', url: 'https://test.com.vn' }],
@@ -55,9 +71,9 @@ export const SAMPLE_PREVIEW = {
                     format: 'DOCUMENT',
                 },
                 body: {
-                    text: `🚀 Want to boost your sales with data-driven marketing? We’ve crafted a step-by-step guide to help you maximize customer engagement.
-
-            📥 Download your free copy now and start scaling your business!
+                    text: `🚀 Want to boost your sales with data-driven marketing? We’ve crafted a step-by-step guide to help you maximize customer engagement.
+
+            📥 Download your free copy now and start scaling your business!
           `,
                 },
                 buttons: [{ type: 'URL', text: 'Download Now', url: 'https://test.com.vn' }],
@@ -68,12 +84,12 @@ export const SAMPLE_PREVIEW = {
                     format: 'LOCATION',
                 },
                 body: {
-                    text: `📍 Antsomi Office - Your Next Marketing Transformation Hub!
-
-            🚀 Hi {{1}}! Ready to supercharge your customer engagement? Visit us and discover how our CDP solutions can revolutionize your business.
-
-            📌 Location: Antsomi HQ, Singapore
-
+                    text: `📍 Antsomi Office - Your Next Marketing Transformation Hub!
+
+            🚀 Hi {{1}}! Ready to supercharge your customer engagement? Visit us and discover how our CDP solutions can revolutionize your business.
+
+            📌 Location: Antsomi HQ, Singapore
+
             💬 Book a free consultation today and take your marketing to the next level!`,
                 },
                 footer: {
@@ -92,12 +108,12 @@ export const SAMPLE_PREVIEW = {
                                 format: 'LOCATION',
                             },
                             body: {
-                                text: `📍 Antsomi Office - Your Next Marketing Transformation Hub!
-
-            🚀 Hi {{1}}! Ready to supercharge your customer engagement? Visit us and discover how our CDP solutions can revolutionize your business.
-
-            📌 Location: Antsomi HQ, Singapore
-
+                                text: `📍 Antsomi Office - Your Next Marketing Transformation Hub!
+
+            🚀 Hi {{1}}! Ready to supercharge your customer engagement? Visit us and discover how our CDP solutions can revolutionize your business.
+
+            📌 Location: Antsomi HQ, Singapore
+
             💬 Book a free consultation today and take your marketing to the next level!`,
                             },
                             buttons: [],
@@ -107,9 +123,9 @@ export const SAMPLE_PREVIEW = {
                                 format: 'DOCUMENT',
                             },
                             body: {
-                                text: `🚀 Want to boost your sales with data-driven marketing? We’ve crafted a step-by-step guide to help you maximize customer engagement.
-
-            📥 Download your free copy now and start scaling your business!
+                                text: `🚀 Want to boost your sales with data-driven marketing? We’ve crafted a step-by-step guide to help you maximize customer engagement.
+
+            📥 Download your free copy now and start scaling your business!
           `,
                             },
                             buttons: [{ type: 'URL', text: 'Download Now', url: 'https://test.com.vn' }],
@@ -119,12 +135,12 @@ export const SAMPLE_PREVIEW = {
                                 format: 'LOCATION',
                             },
                             body: {
-                                text: `📍 Antsomi Office - Your Next Marketing Transformation Hub!
-
-            🚀 Hi {{1}}! Ready to supercharge your customer engagement? Visit us and discover how our CDP solutions can revolutionize your business.
-
-            📌 Location: Antsomi HQ, Singapore
-
+                                text: `📍 Antsomi Office - Your Next Marketing Transformation Hub!
+
+            🚀 Hi {{1}}! Ready to supercharge your customer engagement? Visit us and discover how our CDP solutions can revolutionize your business.
+
+            📌 Location: Antsomi HQ, Singapore
+
             💬 Book a free consultation today and take your marketing to the next level!`,
                             },
                             buttons: [],
@@ -150,9 +166,9 @@ export const SAMPLE_PREVIEW = {
                     format: 'IMAGE',
                 },
                 body: {
-                    text: `Hi Zoey, the item Super Nice T-Shirt you were wondering about is BACK IN STOCK! 🎉
-
-            Click the button to get it!
+                    text: `Hi Zoey, the item Super Nice T-Shirt you were wondering about is BACK IN STOCK! 🎉
+
+            Click the button to get it!
           `,
                 },
                 footer: { text: 'Limited Only' },
@@ -179,13 +195,13 @@ export const SAMPLE_PREVIEW = {
                     format: 'IMAGE',
                 },
                 body: {
-                    text: `Don't miss out on this awesome deal!
-            Hey *{{1}}*, we noticed you left some goodies in your cart. They're feeling a bit lonely without you!
-            
-            Complete your purchase now and grab your favorites before they're gone. 
-            
-            Plus, here's a 10% off coupon just for you: {{2}}
-            Can't wait to see you back! Send STOP to unsubscribe!
+                    text: `Don't miss out on this awesome deal!
+            Hey *{{1}}*, we noticed you left some goodies in your cart. They're feeling a bit lonely without you!
+            
+            Complete your purchase now and grab your favorites before they're gone. 
+            
+            Plus, here's a 10% off coupon just for you: {{2}}
+            Can't wait to see you back! Send STOP to unsubscribe!
           `,
                 },
                 footer: {

package/es/components/organism/PreviewCollections/styled.js

@@ -5,21 +5,21 @@ import { Typography } from 'antd';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { BASE } from './constants';
 const { OFFSET, MEDIUM, LARGE } = BASE;
-export const BaseContainerMessage = styled.section `
-  padding: ${props => props.$padding ?? `${OFFSET.PADDING}px`};
-  max-width: ${props => (props.$size === 'medium' ? `${MEDIUM.WIDTH}px` : `${LARGE.WIDTH}px`)};
-  background-color: ${globalToken?.bw0};
-  box-shadow: 0px 3px 20px 0px rgba(0, 46, 89, 0.2);
-  border-radius: 11.68px;
-  overflow: hidden;
-  margin: ${props => props.$margin};
+export const BaseContainerMessage = styled.section `
+  padding: ${props => props.$padding ?? `${OFFSET.PADDING}px`};
+  max-width: ${props => (props.$size === 'medium' ? `${MEDIUM.WIDTH}px` : `${LARGE.WIDTH}px`)};
+  background-color: ${globalToken?.bw0};
+  box-shadow: 0px 3px 20px 0px rgba(0, 46, 89, 0.2);
+  border-radius: 11.68px;
+  overflow: hidden;
+  margin: ${props => props.$margin};
 `;
-export const BaseParagraphMessage = styled(Typography.Paragraph) `
-  white-space: pre-line;
-
-  &.base-paragraph-message.antsomi-typography {
-    margin-bottom: 0px;
-    font-size: 12px;
-    color: ${globalToken?.colorText};
-  }
+export const BaseParagraphMessage = styled(Typography.Paragraph) `
+  white-space: pre-line;
+
+  &.base-paragraph-message.antsomi-typography {
+    margin-bottom: 0px;
+    font-size: 12px;
+    color: ${globalToken?.colorText};
+  }
 `;

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js

@@ -7,19 +7,19 @@ import skeletonBackground from '../../../../../assets/images/background/skeleton
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { MOBILE_VIEWPORT } from '@antscorp/antsomi-ui/es/components/atoms/MobileFrameV2/constants';
 const THUMBNAIL_CARD_RADIUS = 5;
-export const BannerWrapper = styled.div `
-  width: 100%;
-  overflow-y: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: ${globalToken?.colorBgSkeleton};
-  border-radius: ${globalToken?.borderRadius}px;
-  border: 1px solid ${globalToken?.blue1_1};
-  height: ${({ $height }) => (isNumber($height) ? `${$height}px` : $height)};
-
-  // Calculate scale of mobile frame
-  #banner-mobile {
+export const BannerWrapper = styled.div `
+  width: 100%;
+  overflow-y: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${globalToken?.colorBgSkeleton};
+  border-radius: ${globalToken?.borderRadius}px;
+  border: 1px solid ${globalToken?.blue1_1};
+  height: ${({ $height }) => (isNumber($height) ? `${$height}px` : $height)};
+
+  // Calculate scale of mobile frame
+  #banner-mobile {
     ${({ clientHeight }) => {
     const [smallScale, largeScale] = (() => {
         if (clientHeight) {
@@ -31,70 +31,70 @@ export const BannerWrapper = styled.div `
         }
         return [1, 1];
     })();
-    return css `
-        @media screen and (max-height: 1000px) {
-          transform: scale(${smallScale});
-        }
-
-        @media screen and (min-height: 1001px) {
-          transform: scale(${largeScale});
-        }
+    return css `
+        @media screen and (max-height: 1000px) {
+          transform: scale(${smallScale});
+        }
+
+        @media screen and (min-height: 1001px) {
+          transform: scale(${largeScale});
+        }
       `;
-}}
-  }
-
-  .mobile-wrapper {
-    position: relative;
-    border-radius: 80px;
-    animation-duration: 0.2s !important;
-
-    .content-wrapper {
-      width: fit-content;
-      height: fit-content;
-    }
-
-    .skeleton,
-    .backdrop {
-      left: 5px;
-    }
-  }
-
-  .desktop-wrapper {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
-    transition: width 0.2s ease, height 0.2s ease;
-    .content-wrapper {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .content-wrapper {
-    position: absolute;
-    z-index: 12;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .skeleton {
-    width: 100%;
-    height: 100%;
-    background: center / cover no-repeat url(${skeletonBackground});
-    border-radius: inherit;
-  }
-
-  .backdrop {
-    border-radius: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: black;
-    opacity: 0.5;
-    z-index: 10;
-    top: 0;
-    left: 0;
-  }
+}}
+  }
+
+  .mobile-wrapper {
+    position: relative;
+    border-radius: 80px;
+    animation-duration: 0.2s !important;
+
+    .content-wrapper {
+      width: fit-content;
+      height: fit-content;
+    }
+
+    .skeleton,
+    .backdrop {
+      left: 5px;
+    }
+  }
+
+  .desktop-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+    transition: width 0.2s ease, height 0.2s ease;
+    .content-wrapper {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content-wrapper {
+    position: absolute;
+    z-index: 12;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .skeleton {
+    width: 100%;
+    height: 100%;
+    background: center / cover no-repeat url(${skeletonBackground});
+    border-radius: inherit;
+  }
+
+  .backdrop {
+    border-radius: inherit;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0.5;
+    z-index: 10;
+    top: 0;
+    left: 0;
+  }
 `;

package/es/components/organism/PreviewTemplateModal/components/Information/styled.js

@@ -4,58 +4,58 @@ import styled, { css } from 'styled-components';
 import { Button, Flex } from '../../../../atoms';
 // Providers
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const InformationWrapper = styled(Flex) `
-  width: 300px;
-  flex-shrink: 0;
-  font-size: 12px;
-  height: 100%;
-  max-height: 100%;
-
-  .title {
-    font-size: 16px;
-    font-weight: 700;
-    max-width: 100%;
-    color: inherit;
-    padding-right: 25px;
-    word-break: break-word;
-
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-
-  .antsomi-radio-group {
-    width: 100%;
-    display: flex;
-
-    .antsomi-radio-button-wrapper {
-      flex: 1 1 0%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 30px;
-
-      i {
-        height: fit-content;
-        font-size: 24px;
-      }
-    }
-  }
-
-  .content-information {
-    flex: 1 1 0%;
-    height: fit-content;
-    overflow-y: auto;
-    max-height: 682px;
-  }
+export const InformationWrapper = styled(Flex) `
+  width: 300px;
+  flex-shrink: 0;
+  font-size: 12px;
+  height: 100%;
+  max-height: 100%;
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    max-width: 100%;
+    color: inherit;
+    padding-right: 25px;
+    word-break: break-word;
+
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  .antsomi-radio-group {
+    width: 100%;
+    display: flex;
+
+    .antsomi-radio-button-wrapper {
+      flex: 1 1 0%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 30px;
+
+      i {
+        height: fit-content;
+        font-size: 24px;
+      }
+    }
+  }
+
+  .content-information {
+    flex: 1 1 0%;
+    height: fit-content;
+    overflow-y: auto;
+    max-height: 682px;
+  }
 `;
-export const CheckboxButton = styled(Button) `
-  color: ${globalToken?.colorText} !important;
-
+export const CheckboxButton = styled(Button) `
+  color: ${globalToken?.colorText} !important;
+
   ${p => p.$active &&
-    css `
-      color: ${globalToken?.colorPrimary} !important;
-      background-color: ${globalToken?.blue1_1} !important;
-    `}
+    css `
+      color: ${globalToken?.colorPrimary} !important;
+      background-color: ${globalToken?.blue1_1} !important;
+    `}
 `;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.js

@@ -4,23 +4,23 @@ import styled from 'styled-components';
 import { Flex } from '../../../../atoms';
 // Providers
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const SimilarTemplateWrapper = styled(Flex) `
-  margin-top: 15px;
-
-  .title {
-    font-weight: 400;
-    font-size: 16px;
-  }
+export const SimilarTemplateWrapper = styled(Flex) `
+  margin-top: 15px;
+
+  .title {
+    font-weight: 400;
+    font-size: 16px;
+  }
 `;
-export const TemplateListWrapper = styled.div `
-  display: flex;
-  gap: 30px;
-
-  .thumbnail-card {
-    border-radius: ${globalToken?.borderRadius}px;
-
-    > div {
-      border-radius: ${globalToken?.borderRadius}px;
-    }
-  }
+export const TemplateListWrapper = styled.div `
+  display: flex;
+  gap: 30px;
+
+  .thumbnail-card {
+    border-radius: ${globalToken?.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken?.borderRadius}px;
+    }
+  }
 `;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.js

@@ -2,82 +2,82 @@ import styled from 'styled-components';
 import { SwiperSlide } from 'swiper/react';
 // Constants
 import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const ThumbnailSliderWrapper = styled.div `
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-
-  .swiper {
-    max-width: 1030px;
-
-    .swiper-slide {
-      width: fit-content !important;
-    }
-  }
-
-  .thumbnail-animation {
-    box-shadow: none;
-    transition: box-shadow 0.1s ease-in-out;
-    border-radius: ${globalToken?.borderRadius}px;
-
-    > div {
-      border-radius: ${globalToken?.borderRadius}px;
-    }
-
-    &:hover {
-      box-shadow:
-        0 8px 20px rgba(0, 0, 0, 0.1),
-        0 0 32px rgba(0, 0, 0, 0.04);
-    }
-  }
-
-  .custom-button-prev,
-  .custom-button-next {
-    z-index: 10;
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    background-color: #ffffff;
-    box-shadow: 0px 3px 3px 0px #002e591a;
-    border-radius: 999px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    /* Remove default style of Antd button */
-    border-color: white !important;
-
-    &.antsomi-btn-default:not(:disabled):hover {
-      border-color: white !important;
-      background-color: #ffffff !important;
-    }
-  }
-
-  .custom-button-prev {
-    left: 0px;
-    transform: rotate(90deg);
-  }
-
-  .custom-button-next {
-    right: 0px;
-    transform: rotate(-90deg);
-  }
-
-  .hidden {
-    display: none !important;
-  }
-
-  i {
-    font-size: 20px;
-    color: ${THEME?.token?.bw8};
-  }
+export const ThumbnailSliderWrapper = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  .swiper {
+    max-width: 1030px;
+
+    .swiper-slide {
+      width: fit-content !important;
+    }
+  }
+
+  .thumbnail-animation {
+    box-shadow: none;
+    transition: box-shadow 0.1s ease-in-out;
+    border-radius: ${globalToken?.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken?.borderRadius}px;
+    }
+
+    &:hover {
+      box-shadow:
+        0 8px 20px rgba(0, 0, 0, 0.1),
+        0 0 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  .custom-button-prev,
+  .custom-button-next {
+    z-index: 10;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background-color: #ffffff;
+    box-shadow: 0px 3px 3px 0px #002e591a;
+    border-radius: 999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Remove default style of Antd button */
+    border-color: white !important;
+
+    &.antsomi-btn-default:not(:disabled):hover {
+      border-color: white !important;
+      background-color: #ffffff !important;
+    }
+  }
+
+  .custom-button-prev {
+    left: 0px;
+    transform: rotate(90deg);
+  }
+
+  .custom-button-next {
+    right: 0px;
+    transform: rotate(-90deg);
+  }
+
+  .hidden {
+    display: none !important;
+  }
+
+  i {
+    font-size: 20px;
+    color: ${THEME?.token?.bw8};
+  }
 `;
-export const SwiperSlideWrapper = styled(SwiperSlide) `
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: fit-content;
+export const SwiperSlideWrapper = styled(SwiperSlide) `
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
 `;