@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.130

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

@@ -0,0 +1,3 @@
+export { TemplateSaveAs } from './TemplateSaveAs';
+export { TemplateSaveAsModal } from './TemplateSaveAsModal';
+export { useTemplateSave } from './hooks/useTemplateSave';

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

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

package/es/components/molecules/TemplateSaveAs/styled.js

@@ -0,0 +1,77 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const TemplateSaveAsStyled = styled(Flex) `
+  /* max-width: 1177px; */
+
+  .save-options-container {
+    padding: 15px 0;
+    margin-bottom: 20px;
+    border-bottom: 1px dashed #e5e5e5;
+  }
+
+  .template-container {
+    flex: 1 1 60%;
+    max-height: 60vh;
+    padding-right: 28px;
+    overflow-y: auto;
+  }
+
+  .share-access-container {
+    flex: 1 1 40%;
+    padding-left: 28px;
+    max-height: 60vh;
+    overflow-y: auto;
+    border-left: 1px solid #e5e5e5;
+
+    & > div {
+      max-width: 400px;
+    }
+  }
+
+  .field-container {
+    gap: 10px;
+  }
+
+  .field-title {
+    font-size: 12px;
+    flex: 0 0 150px;
+    span {
+      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
+    }
+
+    &--start {
+      padding-top: 6px;
+    }
+    &--middle {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  div:has(> .field-input) {
+    width: 330px;
+  }
+
+  .category-container {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .selected-category {
+    /* width: 240px; */
+    overflow: hidden;
+    height: 30px;
+    border: 1px solid #b8cfe6;
+    padding: 0 5px;
+    border-radius: 3px;
+
+    & > .remove-btn {
+      cursor: pointer;
+    }
+  }
+`;

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

@@ -30,22 +30,16 @@ import { Button, Flex, Typography } from '../../atoms';
 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, editText = 'Edit thumbnail', previewText = 'Preview', removeModalProps, onClickEdit, onClickPreview, onClickWrapper, } = props;
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, showSkeleton = true, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "showSkeleton", "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 handleClickEdit = e => {
-        e.stopPropagation();
-        onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(id);
-    };
-    const handleClickPreview = e => {
-        e.stopPropagation();
-        onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
-    };
     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,
+        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* () {
+                React.createElement("p", null, "This action can not be undone."))), okText: 'Remove', cancelText: 'Cancel', closable: true }, restOfRemoveTemplateModalProps), { onOk: () => __awaiter(void 0, void 0, void 0, function* () {
                 if (onOk)
                     onOk(id);
             }) }));
@@ -54,14 +48,20 @@ export const ThumbnailCard = memo(props => {
         e.stopPropagation();
         onClickWrapper === null || onClickWrapper === void 0 ? void 0 : onClickWrapper(id);
     };
-    return (React.createElement(Flex, { gap: 10, vertical: true, style: { width } },
-        React.createElement(ThumbnailCardWrapper, { style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
+    return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
+        React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeleton, 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, { type: "primary", className: "animate__animated animate__fadeIn", onClick: handleClickEdit },
+                    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, { className: "animate__animated animate__fadeIn", onClick: handleClickPreview },
+                    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 }))),

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

@@ -1,3 +1,3 @@
-export declare const THUMBNAIL_CARD_DEFAULT_WIDTH = 200;
-export declare const THUMBNAIL_CARD_DEFAULT_HEIGHT = 200;
+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

@@ -1,3 +1,3 @@
-export const THUMBNAIL_CARD_DEFAULT_WIDTH = 200;
-export const THUMBNAIL_CARD_DEFAULT_HEIGHT = 200;
+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/styled.d.ts

@@ -1 +1,5 @@
-export declare const ThumbnailCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+type ThumbnailCardWrapperProps = {
+    $showSkeleton?: boolean;
+};
+export declare const ThumbnailCardWrapper: import("styled-components").StyledComponent<"div", any, ThumbnailCardWrapperProps, never>;
+export {};

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

@@ -33,7 +33,8 @@ export const ThumbnailCardWrapper = styled.div `
   .screen {
     width: 100%;
     height: 100%;
-    background: center / cover no-repeat url(${skeletonBackground});
+
+    ${p => p.$showSkeleton ? `background: center / cover no-repeat url(${skeletonBackground});` : ''}
 
     img {
       width: 100%;

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

@@ -1,20 +1,24 @@
-import { ModalFuncProps } from 'antd';
+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 interface ThumbnailCardProps {
+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;
-    editText?: string;
-    previewText?: string;
+    showSkeleton?: boolean;
+    editBtnProps?: TThumbnailButton;
+    previewBtnProps?: TThumbnailButton;
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
-    onClickEdit?: (id: TThumbnailCardId) => void;
-    onClickPreview?: (id: TThumbnailCardId) => void;
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }

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

@@ -29,6 +29,7 @@ interface UploadImageProps extends AntdUploadProps {
     };
     required?: boolean;
     focused?: boolean;
+    useSync?: boolean;
 }
 interface UploadMediaObject {
     url: string;

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

@@ -31,6 +31,7 @@ import { handleError, safeParse } from '@antscorp/antsomi-ui/es/utils';
 import { getMediaTypeByMode, getReplacementExtension } from './utils';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { useGetListingSavedMedia } from '@antscorp/antsomi-ui/es/queries/Media';
 const flexStyleCenter = {
     display: 'flex',
     gap: '15px',
@@ -47,11 +48,12 @@ const SORT_OPTIONS = {
         label: 'Sort by Size',
     },
 };
+const POST_TRIGGER_CHANGE_SAVED_MEDIA = 'upload-image-refresh-saved-media';
 const LazyThumbnail = lazy(() => import('./MediaThumb'));
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/UploadImage/index.tsx';
 export const UploadImage = props => {
     var _a, _b, _c, _d, _e, _f;
-    const { labelHeadingModal, labelButtonSelect, labelModalDelete, searchPlaceholder, onRemoveImage, onChangeImage: onChangeMedia, isOpen, isInputMode, width, placeholder, extensions, maxSize, title, showImageURL: showMediaURL, selectedImage: selectedMediaProp, required, focused, domainMedia, slug, paramConfigs, errors, iconName, mode, } = props;
+    const { labelHeadingModal, labelButtonSelect, labelModalDelete, searchPlaceholder, onRemoveImage, onChangeImage: onChangeMedia, isOpen, isInputMode, width, placeholder, extensions, maxSize, title, showImageURL: showMediaURL, selectedImage: selectedMediaProp, required, focused, domainMedia, slug, paramConfigs, errors, iconName, mode, useSync, } = props;
     const { Dragger } = Upload;
     const [storeSavedMedia, setStoreSavedMedia] = useState([]);
     const [selectedMedia, setSelectedMedia] = useState(selectedMediaProp || { url: '' });
@@ -69,6 +71,21 @@ export const UploadImage = props => {
         setListMedia(storeSavedMedia || []);
         setLoading(false);
     }, [storeSavedMedia]);
+    useEffect(() => {
+        const handleMessage = e => {
+            if (e && e.data && e.data.type === POST_TRIGGER_CHANGE_SAVED_MEDIA && e.data.triggerRefresh) {
+                setTriggerRefresh(+e.data.triggerRefresh);
+            }
+        };
+        if (useSync) {
+            window.addEventListener('message', handleMessage);
+        }
+        return () => {
+            if (useSync) {
+                window.removeEventListener('message', handleMessage);
+            }
+        };
+    }, []);
     // When selectedMediaProp onChange
     useEffect(() => {
         setSelectedMedia(selectedMediaProp || { url: '' });
@@ -112,8 +129,24 @@ export const UploadImage = props => {
             setLoading(false);
         }
     });
+    const { data: savedMedias, isLoading } = useGetListingSavedMedia({
+        domain: domainMedia,
+        slug,
+        params: Object.assign(Object.assign({}, paramConfigs), { type: getMediaTypeByMode(mode) }),
+        refresh: triggerRefresh,
+    });
     useEffect(() => {
-        handleGetStoreSavedMedia(domainMedia, slug, paramConfigs);
+        if (savedMedias) {
+            setStoreSavedMedia(savedMedias || []);
+        }
+    }, [savedMedias]);
+    useEffect(() => {
+        if (useSync) {
+            window.postMessage({
+                type: POST_TRIGGER_CHANGE_SAVED_MEDIA,
+                triggerRefresh,
+            });
+        }
     }, [triggerRefresh]);
     const showModal = (e) => {
         e.stopPropagation();
@@ -177,7 +210,7 @@ export const UploadImage = props => {
         }
         setSelectedMedia({ url: '' });
     };
-    const handleRemoveUploadedMedia = (media, isConfirm = true) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleRemoveUploadedMedia = (media_1, ...args_1) => __awaiter(void 0, [media_1, ...args_1], void 0, function* (media, isConfirm = true) {
         if (isConfirm) {
             deleteMediaRef.current = media;
             setOpenConfirmDelete(true);
@@ -336,7 +369,7 @@ export const UploadImage = props => {
                 } },
                 React.createElement(InputSearch, { style: { width: 232 }, onChange: onChangeSearchImage, placeholder: searchPlaceholder }),
                 React.createElement(Select, { defaultValue: SORT_OPTIONS.BY_UPLOAD_DATE.value, value: sortOption, options: Object.values(SORT_OPTIONS), style: { width: 232 }, onChange: onChangeSort })),
-            React.createElement(Spin, { spinning: loading },
+            React.createElement(Spin, { spinning: loading || isLoading },
                 React.createElement(Dragger, Object.assign({}, props, { accept: extensions === null || extensions === void 0 ? void 0 : extensions.join(','), 
                     // action={`${APP_CONFIG.API_URL}/file-upload/file?&_token=${userInfo?.token}&_user_id=${userInfo?.user_id}&_account_id=${userInfo?.account_id}`}
                     // beforeUpload={handleBeforeUploadFile}

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

@@ -3,7 +3,7 @@ export { Dropdown } from './Dropdown';
 export { Modal } from './Modal';
 export { Select } from './Select';
 export { DatePicker } from './DatePicker';
-export { ChatBox } from './ChatBox';
+export { ChatBox, ChatBoxInsight } from './ChatBox';
 export { PopupDraggable } from './PopupDraggable';
 export { Tabs } from './Tabs';
 export { CaptureScreen } from './CaptureScreen';
@@ -35,6 +35,7 @@ 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';
@@ -46,3 +47,4 @@ 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

@@ -3,7 +3,7 @@ export { Dropdown } from './Dropdown';
 export { Modal } from './Modal';
 export { Select } from './Select';
 export { DatePicker } from './DatePicker';
-export { ChatBox } from './ChatBox';
+export { ChatBox, ChatBoxInsight } from './ChatBox';
 export { PopupDraggable } from './PopupDraggable';
 export { Tabs } from './Tabs';
 export { CaptureScreen } from './CaptureScreen';
@@ -35,6 +35,7 @@ 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';

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,40 @@ const Help = props => {
             }
         }
     };
+    useEffect(() => {
+        const handleEvent = e => {
+            const { type, helpType, helpInfo, dataImage } = 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 (dataImage) {
+                            setImageDrew({
+                                imageName: dataImage.imageName,
+                                dataURL: dataImage.dataUrl,
+                            });
+                        }
+                        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/Help/styled.d.ts

@@ -58,11 +58,11 @@ export declare const TitleSearch: import("styled-components").StyledComponent<"s
 export declare const WrapperSearch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>, any, {}, never>;
 export declare const TreeContent: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd").TreeProps<T> & {
     children?: import("react").ReactNode;
-} & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+} & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("antd").TreeDataNode>>;
     DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
         children?: import("react").ReactNode;
-    } & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    } & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
         displayName?: string | undefined;
     };
 }, any, {}, never>;

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

@@ -1 +1,2 @@
 export { Menu } from 'antd';
+// export default AntdMenu;

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

@@ -1 +1 @@
-export declare const Menu: any;
+export { Menu } from './Menu';

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

@@ -1,3 +1 @@
-import { Menu as AntdMenu } from './Menu';
-// TODO: Fix generic component
-export const Menu = AntdMenu;
+export { 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,32 @@
+// Libraries
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+// Styled
+import { BannerWrapper } from './styled';
+// Components
+import { MobileFrameV2 } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
+export const Banner = memo(props => {
+    const { deviceType, showSkeleton = false, children } = props;
+    const isMobile = useMemo(() => deviceType === DEVICE_TYPE.MOBILE.value, [deviceType]);
+    // States
+    const [shouldAnimate, setShouldAnimate] = useState(false);
+    // Side effects
+    useEffect(() => {
+        setShouldAnimate(true);
+        const timerId = setTimeout(() => {
+            setShouldAnimate(false);
+        }, 1000);
+        return () => clearTimeout(timerId);
+    }, [children]);
+    return (React.createElement(BannerWrapper, null,
+        React.createElement("div", { className: `${isMobile ? 'mobile-wrapper animate__animated animate__zoomIn' : 'desktop-wrapper'}` },
+            React.createElement("div", { className: classNames({
+                    'content-wrapper': true,
+                    'animate__animated animate__fadeIn': shouldAnimate,
+                }) }, isMobile ? React.createElement(MobileFrameV2, null, children || null) : children || null),
+            showSkeleton && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "skeleton" }),
+                React.createElement("div", { className: "backdrop" }))))));
+});

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

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

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

@@ -0,0 +1,87 @@
+import styled from 'styled-components';
+// Images
+import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
+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: #0000001a;
+
+  @media screen and (max-height: 1000px) {
+    height: 760px;
+    max-height: 760px;
+
+    .mobile-wrapper {
+      width: 359px;
+      height: 722.41px;
+    }
+  }
+
+  @media screen and (min-height: 1001px) {
+    height: 830px;
+    max-height: 830px;
+
+    .mobile-wrapper {
+      width: 380px;
+      height: 800px;
+    }
+  }
+
+  .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/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,35 @@
+// 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';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const Information = memo(props => {
+    var _a;
+    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" },
+            description && React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }, description), categoryListing === null || categoryListing === void 0 ? void 0 :
+            categoryListing.map(({ key, label, children }) => {
+                var _a;
+                return (React.createElement("div", { key: key },
+                    React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } },
+                        label,
+                        ":"),
+                    React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', '))));
+            })),
+        React.createElement(Flex, { gap: 20, style: { flexShrink: 0 }, vertical: true },
+            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>;