@antscorp/antsomi-ui 1.3.5-beta.4 → 1.3.5-beta.41

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -0,0 +1,72 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo } from 'react';
+import Icon from '@antscorp/icons';
+import { Modal } from 'antd';
+// Styled
+import { ThumbnailCardWrapper } from './styled';
+// Components
+import { Button, Flex, Typography } from '../../atoms';
+// Constants
+import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
+export const ThumbnailCard = memo(props => {
+    const [modal, contextHolder] = Modal.useModal();
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
+    const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
+    const _b = editBtnProps || {}, { text: editText = 'Edit thumbnail', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
+    const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
+    // Handlers
+    const handleRemoveThumbnail = e => {
+        e.stopPropagation();
+        modal.confirm(Object.assign(Object.assign({ title: 'Remove Template', centered: true, icon: React.createElement(Icon, { type: "icon-ants-info", style: { fontSize: 16, lineHeight: '25px' } }), content: (React.createElement("div", null,
+                React.createElement("p", null, "Are you sure you want to remove the template?"),
+                React.createElement("p", null, "This action cant not be undone."))), okText: 'Remove', cancelText: 'Cancel', closable: true }, restOfRemoveTemplateModalProps), { onOk: () => __awaiter(void 0, void 0, void 0, function* () {
+                if (onOk)
+                    onOk(id);
+            }) }));
+    };
+    const handleWrapperClick = e => {
+        e.stopPropagation();
+        onClickWrapper === null || onClickWrapper === void 0 ? void 0 : onClickWrapper(id);
+    };
+    return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
+        React.createElement(ThumbnailCardWrapper, { style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
+            React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: thumbnail, alt: "" })),
+            actionAvailable && (React.createElement(React.Fragment, null,
+                React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
+                    React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {
+                            e.stopPropagation();
+                            onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(id);
+                        } }),
+                        React.createElement(Typography.Text, { ellipsis: { tooltip: editText }, style: { maxWidth: '100%', color: 'inherit' } }, editText)),
+                    React.createElement(Button, Object.assign({ className: "animate__animated animate__fadeIn", onClick: e => {
+                            e.stopPropagation();
+                            onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
+                        } }, restOfPreviewBtnProps),
+                        React.createElement(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' } }, previewText))),
+                removable && (React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
+                    React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveThumbnail }))),
+                React.createElement("div", { className: "backdrop" }),
+                React.createElement("div", null, contextHolder)))),
+        !!name && (React.createElement(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' } }, name))));
+});
+ThumbnailCard.displayName = 'ThumbnailCard';

package/es/components/molecules/ThumbnailCard/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
+export declare const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
+export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";

package/es/components/molecules/ThumbnailCard/constants.js

@@ -0,0 +1,3 @@
+export const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
+export const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
+export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';

package/es/components/molecules/ThumbnailCard/index.d.ts

@@ -0,0 +1,2 @@
+export { ThumbnailCard } from './ThumbnailCard';
+export * from './types';

package/es/components/molecules/ThumbnailCard/index.js

@@ -0,0 +1,2 @@
+export { ThumbnailCard } from './ThumbnailCard';
+export * from './types';

package/es/components/molecules/ThumbnailCard/styled.d.ts

@@ -0,0 +1 @@
+export declare const ThumbnailCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/{template/TemplateListing/components/TemplateItem → molecules/ThumbnailCard}/styled.js

@@ -1,17 +1,24 @@
+// Libraries
 import styled from 'styled-components';
-// Constants
-const SKELETON_BACKGROUND = '/images/background/skeleton-background.png';
-const TEMPLATE_ITEM_RADIUS = 5;
-export const TemplateItemWrapper = styled.div `
+// Images
+import skeletonBackground from '../../../assets/images/background/skeleton-background.png';
+const THUMBNAIL_CARD_RADIUS = 5;
+export const ThumbnailCardWrapper = styled.div `
   background-color: #e5e5e5;
   padding: 10px;
-  border-radius: ${TEMPLATE_ITEM_RADIUS}px;
+  border-radius: ${THUMBNAIL_CARD_RADIUS}px;
   position: relative;
   box-sizing: border-box;
+  width: 100%;
 
   :hover {
     .center-action {
       display: flex;
+      max-width: 90%;
+
+      button {
+        max-width: 100%;
+      }
     }
 
     .top-right-corner-action {
@@ -26,7 +33,7 @@ export const TemplateItemWrapper = styled.div `
   .screen {
     width: 100%;
     height: 100%;
-    background-image: url(${SKELETON_BACKGROUND});
+    background: center / cover no-repeat url(${skeletonBackground});
 
     img {
       width: 100%;
@@ -68,7 +75,7 @@ export const TemplateItemWrapper = styled.div `
   }
 
   .backdrop {
-    border-radius: ${TEMPLATE_ITEM_RADIUS}px;
+    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
     position: absolute;
     width: 100%;
     height: 100%;

package/es/components/molecules/ThumbnailCard/types.d.ts

@@ -0,0 +1,23 @@
+import { ModalFuncProps, ButtonProps } from 'antd';
+import { HTMLAttributes } from 'react';
+export type TThumbnailCardId = string | number;
+export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
+    onOk?: (id: TThumbnailCardId) => void;
+};
+export type TThumbnailButton = Omit<ButtonProps, 'onClick'> & {
+    text?: string;
+    onClick?: (id: TThumbnailCardId) => void;
+};
+export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+    id: TThumbnailCardId;
+    name?: string;
+    width?: number;
+    height?: number;
+    thumbnail?: string;
+    removable?: boolean;
+    editBtnProps?: TThumbnailButton;
+    previewBtnProps?: TThumbnailButton;
+    actionAvailable?: boolean;
+    removeModalProps?: TRemoveModalProps;
+    onClickWrapper?: (id: TThumbnailCardId) => void;
+}

package/es/components/molecules/ThumbnailCard/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/molecules/UploadImage/index.js

@@ -312,7 +312,7 @@ export const UploadImage = props => {
                 React.createElement(Input, { label: mode === 'video' ? 'Video URL' : 'Image URL', required: required, placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, onAfterChange: value => handleSelectMedia({
                         url: value,
                     }) }))))),
-        React.createElement(Modal, { title: labelModalDelete, visible: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel" },
+        React.createElement(Modal, { title: labelModalDelete, visible: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel", destroyOnClose: true },
             React.createElement("p", null,
                 "Are you sure you want to delete ", (_d = deleteMediaRef.current) === null || _d === void 0 ? void 0 :
                 _d.name,

package/es/components/molecules/index.d.ts

@@ -30,16 +30,21 @@ export { FontFamilySelect } from './FontFamilySelect';
 export { TextDecorationSelect } from './TextDecorationSelect';
 export { TextTransformSelect } from './TextTransformSelect';
 export { FontSetting, FontSettingEdit } from './FontSetting';
+export { ThumbnailCard } from './ThumbnailCard';
 export { Form } from './Form';
 export { ResizeGrid } from './ResizeGrid';
 export * from './RichMenu';
 export { ModalV2 } from './ModalV2';
+export { TemplateSaveAs, TemplateSaveAsModal, useTemplateSave } from './TemplateSaveAs';
 export * from './PreviewModal';
 export * from './Drawer';
 export { EditorScript } from './EditorScript';
+export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';
 export type { TFontSettingProps, TFontSettingEditProps } from './FontSetting';
 export type { IResizeGridProps, TCell, TGrid } from './ResizeGrid';
 export type { ModalProps } from './ModalV2';
+export type { ThumbnailCardProps } from './ThumbnailCard';
+export type { TemplateValueOptions } from './TemplateSaveAs';

package/es/components/molecules/index.js

@@ -30,10 +30,13 @@ export { FontFamilySelect } from './FontFamilySelect';
 export { TextDecorationSelect } from './TextDecorationSelect';
 export { TextTransformSelect } from './TextTransformSelect';
 export { FontSetting, FontSettingEdit } from './FontSetting';
+export { ThumbnailCard } from './ThumbnailCard';
 export { Form } from './Form';
 export { ResizeGrid } from './ResizeGrid';
 export * from './RichMenu';
 export { ModalV2 } from './ModalV2';
+export { TemplateSaveAs, TemplateSaveAsModal, useTemplateSave } from './TemplateSaveAs';
 export * from './PreviewModal';
 export * from './Drawer';
 export { EditorScript } from './EditorScript';
+export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';

package/es/components/organism/Help/Help.js

@@ -100,6 +100,7 @@ const Help = props => {
     const [isLoadingListHelp, setIsLoadingHelp] = useState(true);
     const recorderRef = useRef();
     const streamTracks = useRef();
+    const allAppOptionsRef = useRef([]);
     // const showModal = (captureKey: CaptureTypeProps) => {
     //   setOpen(true);
     //   setCaptureType(captureKey);
@@ -218,6 +219,7 @@ const Help = props => {
                         }));
                         setAppTargeting(temp[0]);
                         setAllAppOptions(temp);
+                        allAppOptionsRef.current = temp;
                     }
                 }
             }
@@ -281,7 +283,6 @@ const Help = props => {
         setAutoExpandParent(false);
         setExpandedKeys([]);
     };
-    useEffect(() => () => handleResetData(), []);
     useEffect(() => {
         if (dataRecorded) {
             const dataRecordedBlob = new Blob(dataRecorded, { type: 'video/mp4' });
@@ -531,6 +532,34 @@ const Help = props => {
             }
         }
     };
+    useEffect(() => {
+        const handleEvent = e => {
+            const { type, helpType, helpInfo } = e.data;
+            if (!type || !helpType || !helpInfo) {
+                return;
+            }
+            switch (type) {
+                case 'open_antsomi_help':
+                    if (REPORT_TYPES[helpType]) {
+                        setIsShowPopup(true);
+                        callback(REPORT_TYPES[helpType]);
+                        setValueInput(prev => (Object.assign(Object.assign({}, prev), helpInfo)));
+                        if (helpInfo.feature && Array.isArray(allAppOptions)) {
+                            const targetApp = allAppOptionsRef.current.find(item => item.value === helpInfo.feature);
+                            if (targetApp)
+                                setAppTargeting(targetApp);
+                        }
+                    }
+                    break;
+                default:
+            }
+        };
+        window.addEventListener('message', handleEvent);
+        return () => {
+            handleResetData();
+            window.removeEventListener('message', handleEvent);
+        };
+    }, []);
     const handleCreateTicket = (params) => __awaiter(void 0, void 0, void 0, function* () {
         try {
             setIsMainLoading(true);

package/es/components/organism/Menu/Menu.d.ts

@@ -0,0 +1,2 @@
+import AntdMenu from 'antd/es/menu';
+export default AntdMenu;

package/es/components/organism/Menu/Menu.js

@@ -0,0 +1,3 @@
+// export { Menu as AntdMenu } from 'antd';
+import AntdMenu from 'antd/es/menu';
+export default AntdMenu;

package/es/components/organism/Menu/index.d.ts

@@ -0,0 +1 @@
+export { default as Menu } from './Menu';

package/es/components/organism/Menu/index.js

@@ -0,0 +1,3 @@
+// import { Menu as AntdMenu } from './Menu';
+// export const Menu = AntdMenu;
+export { default as Menu } from './Menu';

package/es/components/organism/PreviewTemplateModal/components/Banner/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { BannerProps } from '../../types';
+export declare const Banner: React.FC<BannerProps>;

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

@@ -0,0 +1,13 @@
+// Libraries
+import React, { memo } from 'react';
+// Styled
+import { BannerWrapper } from './styled';
+export const Banner = memo(props => {
+    const { deviceType, showBackgroundSkeleton = false, children } = props;
+    return (React.createElement(BannerWrapper, { deviceType: deviceType, showBackgroundSkeleton: showBackgroundSkeleton },
+        React.createElement("div", { className: "device-type" },
+            React.createElement("div", { className: "device-type__background" }),
+            React.createElement("div", { className: "device-type__wrapper" },
+                React.createElement("div", { className: "content-wrapper" }, children || null),
+                React.createElement("div", { className: "backdrop" })))));
+});

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {
+    deviceType: string;
+    showBackgroundSkeleton: boolean;
+}, never>;

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

@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+// Images
+import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
+import MobileFrame from '../../../../../assets/svg/mobile-frame.svg';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
+const THUMBNAIL_CARD_RADIUS = 5;
+const { MOBILE } = DEVICE_TYPE;
+const MOBILE_BORDER_RADIUS = '19px 19px 19px 21px / 21px 21px 21px 21px';
+export const BannerWrapper = styled.div `
+  width: 100%;
+  height: 762px;
+  max-height: 762px;
+  overflow-y: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #0000001a;
+
+  .device-type {
+    position: relative;
+    height: 750px;
+    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+    width: 100%;
+
+    .device-type__wrapper,
+    .device-type__background {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+
+    ${p => {
+    switch (p.deviceType) {
+        case MOBILE.value:
+            return `
+          width: 416.004px;
+          height: 713px;             
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .device-type__background {
+            background: url(${MobileFrame}) no-repeat center center;
+          }
+
+          .device-type__wrapper {
+            width: 391px;
+            left: 11px;    
+            height: 661px;
+            top: 11px;              
+            z-index: 1;
+            border-radius: ${MOBILE_BORDER_RADIUS};
+
+            .content-wrapper {
+              border-radius: inherit;
+
+              & > * {
+                border-radius: inherit;
+              }
+            }
+          }
+          `;
+        default:
+            return p.showBackgroundSkeleton
+                ? `
+                .device-type__background {
+                  background: center / cover no-repeat url(${skeletonBackground});
+                }
+
+                .device-type__wrapper {              
+                  .backdrop {
+                    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    background-color: black;
+                    opacity: 0.5;
+                    z-index: 10;
+                    top: 0;
+                    left: 0;
+                  }
+                }                 
+                `
+                : '';
+    }
+}}
+
+    .content-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 12;
+      width: 100%;
+      height: 100%;
+    }
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/Information/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InformationProps } from '../../types';
+export declare const Information: React.FC<InformationProps>;

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

@@ -0,0 +1,29 @@
+// Libraries
+import React, { memo } from 'react';
+import Icon from '@antscorp/icons';
+// Styled
+import { InformationWrapper } from './styled';
+// Components
+import { Button, Radio, Typography, Flex } from '../../../../atoms';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
+export const Information = memo(props => {
+    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = '', categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
+    return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
+        React.createElement("div", { style: { flexShrink: 0 }, className: "title" }, itemName),
+        React.createElement(Flex, { gap: 20, vertical: true, className: "content-information" },
+            React.createElement("div", null, description), categoryListing === null || categoryListing === void 0 ? void 0 :
+            categoryListing.map(({ key, label, children }) => (React.createElement("div", { key: key },
+                React.createElement("div", null,
+                    label,
+                    ":"),
+                React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', ')))))),
+        showDeviceRadios && (React.createElement(Radio.Group, { options: Object.values(DEVICE_TYPE).map(({ value, label, icon }) => ({
+                label: (React.createElement(Flex, { gap: 5, align: "center" },
+                    React.createElement(Icon, { type: icon }),
+                    label)),
+                value,
+            })), onChange: e => onDeviceTypeChange(e.target.value), value: deviceType, optionType: "button", style: { flexShrink: 0 } })),
+        React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
+            React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText))));
+});

package/es/components/organism/PreviewTemplateModal/components/Information/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const InformationWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

@@ -0,0 +1,41 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../../../atoms';
+export const InformationWrapper = styled(Flex) `
+  width: 350px;
+  flex-shrink: 0;
+  font-size: 12px;
+  max-height: 762px;
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    max-width: 100%;
+    color: inherit;
+    padding-right: 20px;
+  }
+
+  .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%;
+      overflow-y: auto;
+    }
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SimilarTemplateProps } from '../../types';
+export declare const SimilarTemplate: React.FC<SimilarTemplateProps>;

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

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ThumbnailCard } from '../../../../molecules';
+import { Empty, Flex } from '../../../../atoms';
+// Styled
+import { SimilarTemplateWrapper } from './styled';
+// Constants
+import { SIMILAR_CARD_HEIGHT_DEFAULT, SIMILAR_CARD_WIDTH_DEFAULT } from '../../constants';
+const MAX_QUANTITY_TEMPLATES = 4;
+export const SimilarTemplate = memo(props => {
+    var _a;
+    const { show = true, similarTemplates = [], similarCardProps } = props;
+    const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
+    return show ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
+        React.createElement("div", { className: "title" }, "Similar templates"),
+        React.createElement(Flex, { gap: 30 }, ((_a = similarTemplates === null || similarTemplates === void 0 ? void 0 : similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps))))) || React.createElement(Empty, null)))) : null;
+});

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SimilarTemplateWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

@@ -0,0 +1,12 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../../../atoms';
+export const SimilarTemplateWrapper = styled(Flex) `
+  margin-top: 15px;
+
+  .title {
+    font-weight: 700;
+    font-size: 16px;
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import 'swiper/swiper-bundle.css';
+import { ThumbnailProps } from '../../types';
+export interface ThumbnailSliderProps extends ThumbnailProps {
+}
+export declare const ThumbnailSlider: React.FC<ThumbnailSliderProps>;

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

@@ -0,0 +1,77 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo, useMemo, useRef, useState } from 'react';
+import Icon from '@antscorp/icons';
+import { Swiper } from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import { Navigation, A11y, Thumbs } from 'swiper/modules';
+import { isEmpty } from 'lodash';
+// Styled
+import { SwiperSlideWrapper, ThumbnailSliderWrapper } from './styled';
+// Components
+import { Button, Flex } from '../../../../atoms';
+import { ThumbnailCard } from '../../../../molecules';
+// Constants
+import { THUMBNAIL_HEIGHT_DEFAULT, THUMBNAIL_WIDTH_DEFAULT } from '../../constants';
+/** Max width of list thumbnail's wrapper, it is used to show swiper if the width is greater than 990 */
+const WRAPPER_WIDTH = 990;
+const GAP_X = 10;
+const ICON_SIZE = 24;
+export const ThumbnailSlider = memo(props => {
+    const { thumbnails, width = THUMBNAIL_WIDTH_DEFAULT, height = THUMBNAIL_HEIGHT_DEFAULT, onClickThumbnail } = props, restOfThumbnailProps = __rest(props, ["thumbnails", "width", "height", "onClickThumbnail"]);
+    //  States
+    const [isSlideBeginning, setSlideBeginning] = useState(false);
+    const [isSlideEnd, setSlideEnd] = useState(false);
+    // Refs
+    const navigationPrevRef = useRef(null);
+    const navigationNextRef = useRef(null);
+    // Variables
+    /** The width of per thumbnail wrapper including thumbnail card's size, icon's size and gap */
+    const thumbnailWrapperWidth = useMemo(() => width + GAP_X * 2 + ICON_SIZE, [width]);
+    // Memo
+    const isShowSwiper = useMemo(() => {
+        const calculate = ((thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) || 0) * thumbnailWrapperWidth;
+        return calculate > WRAPPER_WIDTH;
+    }, [thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length, thumbnailWrapperWidth]);
+    // Renders
+    const renderThumbnail = (args) => {
+        const { thumbnail, index } = args;
+        const { id, url } = thumbnail;
+        return (React.createElement(Flex, { gap: GAP_X },
+            !!index && (React.createElement(Flex, { align: "center" },
+                React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }))),
+            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, style: { flexShrink: 0 }, actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+    };
+    return thumbnails && !isEmpty(thumbnails) ? (React.createElement(ThumbnailSliderWrapper, null, isShowSwiper ? (React.createElement(React.Fragment, null,
+        React.createElement(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {
+                prevEl: navigationPrevRef.current,
+                nextEl: navigationNextRef.current,
+            }, onBeforeInit: swiper => {
+                setTimeout(() => {
+                    // Override prevEl & nextEl now that refs are defined
+                    swiper.params.navigation.prevEl = navigationPrevRef.current;
+                    swiper.params.navigation.nextEl = navigationNextRef.current;
+                    // Re-init navigation
+                    swiper.navigation.destroy();
+                    swiper.navigation.init();
+                    swiper.navigation.update();
+                });
+            }, onSlideChange: ({ isBeginning, isEnd }) => {
+                setSlideBeginning(isBeginning);
+                setSlideEnd(isEnd);
+            } }, thumbnails.map((thumbnail, index) => (React.createElement(SwiperSlideWrapper, { key: `slide-${thumbnail.id}` }, renderThumbnail({ thumbnail, index }))))),
+        React.createElement(Button, { ref: navigationPrevRef, className: "custom-button-prev", disabled: isSlideBeginning },
+            React.createElement(Icon, { type: "icon-ants-expand-more" })),
+        React.createElement(Button, { ref: navigationNextRef, className: "custom-button-next", disabled: isSlideEnd },
+            React.createElement(Icon, { type: "icon-ants-expand-more" })))) : (React.createElement(Flex, { gap: GAP_X, style: { width: 'fit-content' } }, thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.map((thumbnail, index) => (React.createElement(React.Fragment, { key: thumbnail.id }, renderThumbnail({ thumbnail, index })))))))) : null;
+});