@antscorp/antsomi-ui 1.3.6-beta.77 → 1.3.6-beta.78

package/es/components/organism/PreviewCollections/WhatsappMessage/CarouselMessage/index.d.ts

@@ -3,6 +3,7 @@ import 'swiper/swiper-bundle.css';
 import type { MessageStructure } from '../types';
 type CarouselMessageProps = Pick<MessageStructure, 'body' | 'carousel'> & {
     messageIndex: number;
+    limitedTimeOffer: MessageStructure['limitedTimeOffer'];
 };
 declare const _default: React.MemoExoticComponent<(props: CarouselMessageProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/es/components/organism/PreviewCollections/WhatsappMessage/CarouselMessage/index.js

@@ -17,13 +17,13 @@ import FooterMessage from '../FooterMessage';
 import { BASE } from '../../constants';
 // Utils
 import { getMediaSrc, getWhatsappComponentCls, isShowMedia } from '../utils';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { MARGIN_MESSAGE, PADDING_MESSAGE } = BASE.OFFSET;
-const headerStyle = { padding: PADDING_MESSAGE, paddingBottom: 0 };
 const bodyStyle = { padding: PADDING_MESSAGE };
 const mediaStyle = { minWidth: BASE.LARGE.WIDTH };
 const cls = getWhatsappComponentCls();
 export default React.memo((props) => {
-    const { carousel, body, messageIndex } = props;
+    const { carousel, limitedTimeOffer, body, messageIndex } = props;
     const isFirst = messageIndex === 0;
     // Refs
     const navigationPrevRef = useRef(null);
@@ -58,11 +58,18 @@ export default React.memo((props) => {
                         const { header, body, buttons } = message;
                         const isHeaderTxt = header?.format === 'TEXT';
                         const isDoc = header?.format === 'DOCUMENT';
+                        const isShowHeader = isHeaderTxt || isDoc || !!limitedTimeOffer?.text;
                         return (_jsx(SwiperSlideItem, { virtualIndex: cardIdx, children: _jsx(SkeletonMessage, { size: "large", messagePadding: 0, styles: {
-                                    header: headerStyle,
+                                    header: {
+                                        padding: PADDING_MESSAGE,
+                                        paddingBottom: limitedTimeOffer?.text ? PADDING_MESSAGE : 0,
+                                        borderBottom: limitedTimeOffer?.text
+                                            ? `1px solid ${globalToken?.bw2}`
+                                            : 'none',
+                                    },
                                     body: bodyStyle,
                                     media: mediaStyle,
-                                }, media: isShowMedia(header?.format) ? (_jsx(MediaMessage, { src: getMediaSrc(header), format: header?.format })) : null, header: isHeaderTxt || isDoc ? _jsx(HeaderMessage, { ...header }) : null, body: _jsx(BodyMessage, { ...body }), footer: _jsx(FooterMessage, { buttons: buttons }) }) }, cardIdx));
+                                }, media: isShowMedia(header?.format) ? (_jsx(MediaMessage, { src: getMediaSrc(header), format: header?.format })) : null, header: isShowHeader ? (_jsx(HeaderMessage, { header: header, limitedTimeOffer: limitedTimeOffer })) : null, body: _jsx(BodyMessage, { ...body }), footer: _jsx(FooterMessage, { buttons: buttons }) }) }, cardIdx));
                     }) })] }));
     }, []);
     return (_jsxs("div", { children: [_jsx("div", { style: {

package/es/components/organism/PreviewCollections/WhatsappMessage/HeaderMessage/index.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
-import type { MessageHeader } from '../types';
-declare const _default: React.MemoExoticComponent<(props: MessageHeader) => import("react/jsx-runtime").JSX.Element | null>;
+import type { MessageHeader, MessageStructure } from '../types';
+type MessageHeaderProps = {
+    header: MessageHeader;
+    limitedTimeOffer: MessageStructure['limitedTimeOffer'];
+};
+declare const _default: React.MemoExoticComponent<(props: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element | null>;
 export default _default;

package/es/components/organism/PreviewCollections/WhatsappMessage/HeaderMessage/index.js

@@ -5,19 +5,32 @@ import { memo } from 'react';
 import PDFImage from '@antscorp/antsomi-ui/es/assets/images/previews/pdf.png';
 // Components
 import { BaseParagraphMessage } from '../../styled';
-import { Flex } from 'antd';
+import { Flex, Typography } from 'antd';
+import { RedeemIcon } from '@antscorp/antsomi-ui/es/components/icons';
 // Utils
-import { getWhatsappComponentCls } from '../utils';
+import { formatEndDateTime, getWhatsappComponentCls } from '../utils';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const cls = getWhatsappComponentCls();
 export default memo((props) => {
-    const { format } = props;
+    const { header, limitedTimeOffer } = props;
+    const { format } = header;
+    if (limitedTimeOffer?.text) {
+        const { text, startDate, startTime, code } = limitedTimeOffer;
+        return (_jsxs(Flex, { gap: 10, align: "center", style: { height: 60 }, children: [_jsx(Flex, { justify: "center", align: "center", style: {
+                        background: '#EEF5FC',
+                        width: 40,
+                        height: 40,
+                        borderRadius: '50px',
+                        flexShrink: 0,
+                    }, children: _jsx(RedeemIcon, { size: 30, style: { fill: globalToken?.colorPrimary } }) }), _jsxs("div", { style: { maxWidth: 'calc(100% - 50px)' }, children: [_jsx(Typography.Text, { ellipsis: { tooltip: true }, style: { fontWeight: 800, display: 'block' }, children: text }), _jsx(Typography.Text, { ellipsis: { tooltip: true }, style: { fontSize: '11px', color: globalToken?.bw7, display: 'block' }, children: formatEndDateTime(startDate, startTime) }), _jsxs(Typography.Text, { ellipsis: { tooltip: true }, style: { fontSize: '11px', color: globalToken?.bw6, display: 'block' }, children: ["Code: ", code || 'BUY2GET1'] })] })] }));
+    }
     switch (format) {
         case 'TEXT': {
-            const { text } = props;
+            const { text } = header;
             return (_jsx(BaseParagraphMessage, { className: `${cls('header')} base-paragraph-message`, style: { fontWeight: 800 }, ellipsis: { tooltip: true, rows: 3 }, children: text }));
         }
         case 'DOCUMENT': {
-            const { documentName } = props;
+            const { documentName } = header;
             return (_jsxs(Flex, { align: "center", gap: 4, className: `${cls('header')}`, style: { minHeight: 48, padding: '0px 5px' }, children: [_jsx("img", { src: PDFImage, alt: "pdf icon", width: 20, height: 20, style: { objectFit: 'contain' } }), _jsx(BaseParagraphMessage, { className: "base-paragraph-message", ellipsis: { rows: 2, tooltip: true }, children: documentName || 'Document Name' })] }));
         }
         default:

package/es/components/organism/PreviewCollections/WhatsappMessage/MediaMessage/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/media-has-caption */
 // Libraries
-import { memo, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 // Assets
 import AntLogo from '@antscorp/antsomi-ui/es/assets/images/logo/antsomi_logo.png';
 import MediaUnavailable from '@antscorp/antsomi-ui/es/assets/images/previews/media-unavailable.png';
@@ -29,6 +29,11 @@ export default memo((props) => {
             objectFit: objFit,
         };
     }, [format, src]);
+    useEffect(() => {
+        if (src && format === 'VIDEO') {
+            setIsVideoFails(false);
+        }
+    }, [src, format]);
     if (format === 'VIDEO') {
         if (!src || isVideoFails) {
             return (_jsx(Image, { src: isVideoFails ? MediaUnavailable : AntLogo, alt: "media message header", width: "100%", height: BASE.MEDIA.MAX_HEIGHT, style: {
@@ -39,7 +44,7 @@ export default memo((props) => {
         }
         return (_jsxs("video", { width: "100%", style: { height: BASE.MEDIA.MAX_HEIGHT }, controls: true, autoPlay: false, onError: () => {
                 setIsVideoFails(true);
-            }, children: [_jsx("source", { src: src, type: "video/mp4" }), "Your browser does not support the video tag."] }));
+            }, children: [_jsx("source", { src: src, type: "video/mp4" }), "Your browser does not support the video tag."] }, src));
     }
     return (_jsx(Image, { src: src || AntLogo, alt: "media message header", width: "100%", height: BASE.MEDIA.MAX_HEIGHT, style: {
             objectFit,

package/es/components/organism/PreviewCollections/WhatsappMessage/Mobile.js

@@ -18,9 +18,9 @@ import CarouselMessage from './CarouselMessage';
 import { BASE } from '../constants';
 // Utils
 import { getMarginMessage, getMediaSrc, hasOnlyAttribute, isShowMedia } from './utils';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { OFFSET } = BASE;
 const { PADDING_MESSAGE } = OFFSET;
-const headerStyle = { padding: PADDING_MESSAGE, paddingBottom: 0 };
 const bodyStyle = { padding: PADDING_MESSAGE };
 export default memo((props) => {
     const { branding, messages } = props;
@@ -28,13 +28,13 @@ export default memo((props) => {
         const content = messageList.map((message, messageIndex) => {
             const isFirstMessage = messageIndex === 0;
             const isLastMessage = messageIndex === messageList.length - 1;
-            const { header, body, footer, buttons, carousel, type } = message;
+            const { header, body, footer, limitedTimeOffer, buttons, carousel, type } = message;
             if (!type || ['TEXT', 'MEDIA'].includes(type)) {
                 const isTxt = type === 'TEXT';
                 const isMedia = type === 'MEDIA';
                 // Carousel Images
                 if (carousel) {
-                    return (_jsx(CarouselMessage, { messageIndex: messageIndex, body: body, carousel: carousel }, messageIndex));
+                    return (_jsx(CarouselMessage, { messageIndex: messageIndex, body: body, carousel: carousel, limitedTimeOffer: limitedTimeOffer }, messageIndex));
                 }
                 // Case text message
                 if (isTxt || hasOnlyAttribute(message, 'body')) {
@@ -45,10 +45,15 @@ export default memo((props) => {
                 if (isMedia) {
                     const isHeaderTxt = header?.format === 'TEXT';
                     const isDoc = header?.format === 'DOCUMENT';
+                    const isShowHeader = isHeaderTxt || isDoc || !!limitedTimeOffer?.text;
                     return (_jsx(SkeletonMessage, { size: "large", messagePadding: 0, messageMargin: getMarginMessage({ isFirst: isFirstMessage, isLast: isLastMessage }), styles: {
-                            header: headerStyle,
+                            header: {
+                                padding: PADDING_MESSAGE,
+                                paddingBottom: limitedTimeOffer?.text ? PADDING_MESSAGE : 0,
+                                borderBottom: limitedTimeOffer?.text ? `1px solid ${globalToken?.bw2}` : 'none',
+                            },
                             body: bodyStyle,
-                        }, media: isShowMedia(header?.format) ? (_jsx(MediaMessage, { src: getMediaSrc(header), format: header?.format })) : null, header: isHeaderTxt || isDoc ? _jsx(HeaderMessage, { ...header }) : null, body: _jsx(BodyMessage, { ...body }), footer: _jsx(FooterMessage, { footer: footer, buttons: buttons }) }, messageIndex));
+                        }, media: isShowMedia(header?.format) ? (_jsx(MediaMessage, { src: getMediaSrc(header), format: header?.format })) : null, header: isShowHeader ? (_jsx(HeaderMessage, { header: header, limitedTimeOffer: limitedTimeOffer })) : null, body: _jsx(BodyMessage, { ...body }), footer: _jsx(FooterMessage, { footer: footer, buttons: buttons }) }, messageIndex));
                 }
             }
             return (_jsx(BaseContainerMessage, { "$margin": getMarginMessage({ isFirst: isFirstMessage, isLast: isLastMessage }), children: _jsx(Empty, { description: translate(translations._NOTI_NOT_FOUND, 'Message not found!') }) }));

package/es/components/organism/PreviewCollections/WhatsappMessage/types.d.ts

@@ -52,6 +52,9 @@ export interface MessageStructure {
     limitedTimeOffer?: {
         hasExpiration?: string;
         text: string;
+        startDate: number;
+        startTime: number;
+        code: string;
     };
 }
 export interface MobileProps {

package/es/components/organism/PreviewCollections/WhatsappMessage/utils.d.ts

@@ -9,3 +9,4 @@ export declare function hasOnlyAttribute(obj: Record<any, any>, attr: string): b
 export declare const isFixedMedia: (format?: MessageHeaderDefaultImage) => boolean | undefined;
 export declare const isShowMedia: (format?: MessageHeader['format']) => boolean | undefined;
 export declare const getMediaSrc: (header?: MessageHeader) => any;
+export declare function formatEndDateTime(startDate: number, startTime: number): string;

package/es/components/organism/PreviewCollections/WhatsappMessage/utils.js

@@ -33,3 +33,28 @@ export const getMediaSrc = (header) => {
         }
     }
 };
+export function formatEndDateTime(startDate, startTime) {
+    // Convert timestamps to Date objects
+    const startDateObj = new Date(startDate);
+    const startTimeObj = new Date(startTime);
+    // Get current date
+    const currentDate = new Date();
+    // Function to pad single digits with zero
+    const padZero = (num) => num.toString().padStart(2, '0');
+    // Extract time from startTimeObj
+    const hours = padZero(startTimeObj.getHours());
+    const minutes = padZero(startTimeObj.getMinutes());
+    // Check if the start date is today
+    const isToday = startDateObj.getDate() === currentDate.getDate() &&
+        startDateObj.getMonth() === currentDate.getMonth() &&
+        startDateObj.getFullYear() === currentDate.getFullYear();
+    // If it's today, return "Ends today at HH:MM"
+    if (isToday) {
+        return `Ends today at ${hours}:${minutes}`;
+    }
+    // Calculate days difference
+    const timeDifference = startDateObj.getTime() - currentDate.getTime();
+    const daysDifference = Math.ceil(timeDifference / (1000 * 3600 * 24));
+    // Return "Ends in X days"
+    return `Ends in ${daysDifference} day${daysDifference !== 1 ? 's' : ''}`;
+}

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

@@ -33,6 +33,25 @@ export const SAMPLE_PREVIEW = {
                 },
                 buttons: [{ type: 'URL', text: 'Grab the offer', url: 'https://test.com.vn' }],
             },
+            {
+                type: 'MEDIA',
+                header: {
+                    format: 'IMAGE',
+                },
+                body: {
+                    text: `Hi {{1}}, the item {{2}} you were wondering about is BACK IN STOCK! 🎉
+
+            Click the button to get it!
+          `,
+                },
+                limitedTimeOffer: {
+                    text: 'Buy now!',
+                    startDate: new Date().getTime(),
+                    startTime: new Date().getTime(),
+                    code: 'testing code',
+                },
+                buttons: [{ type: 'URL', text: 'Grab the offer', url: 'https://test.com.vn' }],
+            },
             {
                 type: 'MEDIA',
                 header: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.6-beta.77",
+  "version": "1.3.6-beta.78",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",