@antscorp/antsomi-ui 2.0.107 → 2.0.108

package/es/components/molecules/UnsubscribePreferences/utils.js

@@ -0,0 +1,56 @@
+import { compareStrings } from '@antscorp/antsomi-ui/es/utils';
+import { UNSUBSCRIBE_LIST_MESSAGE_ERRORS, UNSUBSCRIBE_LIST_STATUS } from './constants';
+import { GLOBAL_UNSUBSCRIBED_LIST, GLOBAL_UNSUBSCRIBED_WHATSAPP, } from '@antscorp/antsomi-ui/es/constants';
+export const buildOptionUnsubscribedList = (list, selected) => {
+    const arrSelected = Array.isArray(selected) ? selected : [selected];
+    const result = list?.filter(each => compareStrings(each.status, UNSUBSCRIBE_LIST_STATUS.ACTIVE) === 0 ||
+        arrSelected.includes(each.list_id)) || [];
+    return result;
+};
+export const unsubscribeListNotExist = (options, value) => {
+    // eslint-disable-next-line no-extra-boolean-cast
+    if (!!value) {
+        const selected = options?.find(item => compareStrings(item.list_id, value) === 0);
+        if (!selected) {
+            return `[ID - ${value}]`;
+        }
+    }
+    return value;
+};
+export const checkUnsubscribeList = ({ listUnsubscribe, unsubscribeId, }) => {
+    let errorMessage = '';
+    const listSelected = listUnsubscribe?.find(({ list_id }) => list_id === unsubscribeId);
+    if (listSelected) {
+        switch (listSelected.status) {
+            case UNSUBSCRIBE_LIST_STATUS.INACTIVE:
+                errorMessage = UNSUBSCRIBE_LIST_MESSAGE_ERRORS.DISABLED;
+                break;
+            default:
+                errorMessage = '';
+                break;
+        }
+    }
+    else {
+        errorMessage = UNSUBSCRIBE_LIST_MESSAGE_ERRORS.UNAUTHORIZED;
+    }
+    return { errorMessage };
+};
+export const buildOptionPreferencesList = (list, selected) => {
+    const arrSelected = Array.isArray(selected) ? selected : [selected];
+    const result = list
+        ?.filter(each => !arrSelected.includes(each.list_id) &&
+        [GLOBAL_UNSUBSCRIBED_LIST, GLOBAL_UNSUBSCRIBED_WHATSAPP].every(({ list_id }) => compareStrings(each.list_id, list_id) !== 0))
+        .map(each => {
+        let messageError;
+        if (compareStrings(each.status, UNSUBSCRIBE_LIST_STATUS.INACTIVE) === 0) {
+            messageError = UNSUBSCRIBE_LIST_MESSAGE_ERRORS.DISABLED;
+        }
+        return {
+            value: each.list_id,
+            label: each.list_name,
+            key: each.list_id,
+            errorMessage: messageError,
+        };
+    }) || [];
+    return result;
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TUnsubscribePayloadInfo } from '@antscorp/antsomi-ui/es/services/Unsubscribe';
+import { TUnsubscribeSettings, TUnsubscribeType } from '@antscorp/antsomi-ui/es';
+interface PreferencesProps {
+    preferences: TUnsubscribeSettings['unsubscribePreferences'];
+    identifier: string[];
+    onOptOutAll?: () => void;
+    apiConfig: TUnsubscribePayloadInfo;
+    type: TUnsubscribeType;
+}
+export declare const Preferences: React.FC<PreferencesProps>;
+export {};

package/es/components/molecules/UnsubscribePreview/components/PreferencesPage/index.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useEffect, useMemo, useState } from 'react';
+// Icons
+import { DataIcon, UnsubscribeIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Utils
+import { maskEmail, maskPhone } from '../../utils';
+import { compareStrings } from '@antscorp/antsomi-ui/es/utils';
+// Queries
+import { useGetUnsubscribeList } from '@antscorp/antsomi-ui/es/queries/Unsubscribe';
+// Constants
+import { UNSUBSCRIBE_LIST_STATUS } from '../../../UnsubscribePreferences/constants';
+// Components
+import { Button, EmptyData, Flex, Spin, Typography, } from '@antscorp/antsomi-ui/es';
+import { TestAlert } from '../TestAlert';
+import { CheckboxStyled, Description, Identifier, ListStyled, LogoContainer, LogoImg, Title, Wrapper, } from '../styled';
+import { SpinContainer } from '../../styled';
+export const Preferences = props => {
+    const { preferences, identifier, onOptOutAll, apiConfig, type } = props;
+    const identifierLabel = useMemo(() => {
+        switch (type) {
+            case 'sms':
+            case 'whatsapp':
+                return identifier.length > 1
+                    ? identifier.map(item => maskPhone(item)).join(', ')
+                    : maskPhone(identifier[0]);
+            default:
+                return identifier.length > 1
+                    ? identifier.map(item => maskEmail(item)).join(', ')
+                    : maskEmail(identifier[0]);
+        }
+    }, [type, identifier]);
+    const DESCRIPTION = {
+        email: 'Please check the types of emails you would like to receive. Uncheck any that you do not wish to subscribe to.',
+        sms: 'Select the SMS message types you wish to receive. Uncheck any to stop.',
+        whatsapp: 'Select the WhatsApp message types you wish to receive. Uncheck any to stop.',
+    };
+    const BTN_UNSUBSCRIBE_ALL = {
+        email: 'Unsubscribe from all emails',
+        sms: 'Unsubscribe from all messages',
+        whatsapp: 'Unsubscribe from all messages',
+    };
+    // Hooks
+    const { data: unsubscribeData, isLoading: isLoadingUnsubscribeList, isFetching: isFetchingUnsubscribeList, } = useGetUnsubscribeList({
+        args: {
+            data: {
+                type,
+                portalId: Number(apiConfig.portalId),
+            },
+        },
+        options: {
+            enabled: !!apiConfig.portalId,
+        },
+    }, apiConfig);
+    // Memo
+    const allUnsubscribeList = useMemo(() => unsubscribeData?.entries[0], [unsubscribeData]);
+    const preferencesUnsubscribeList = useMemo(() => {
+        if (!allUnsubscribeList)
+            return [];
+        // Lấy listId đang được chọn (mảng hoặc 1 id)
+        const prefIds = Array.isArray(preferences.preferenceListIds)
+            ? preferences.preferenceListIds
+            : preferences.preferenceListIds
+                ? [`${preferences.preferenceListIds}`]
+                : [];
+        // Lọc theo preferenceListIds
+        let filtered = allUnsubscribeList.filter(list => prefIds.includes(list.list_id) &&
+            compareStrings(list.status, UNSUBSCRIBE_LIST_STATUS.ACTIVE) === 0);
+        // Tìm thêm list theo unsubscribeListId
+        const unsubscribeItem = allUnsubscribeList.find(list => compareStrings(list.list_id, preferences.unsubscribeListId) === 0 &&
+            compareStrings(list.status, UNSUBSCRIBE_LIST_STATUS.ACTIVE) === 0);
+        // Nếu có và chưa nằm trong filtered thì thêm vào
+        if (unsubscribeItem && !filtered.some(l => l.list_id === unsubscribeItem.list_id)) {
+            filtered = [unsubscribeItem, ...filtered];
+        }
+        return filtered;
+    }, [allUnsubscribeList, preferences.preferenceListIds, preferences.unsubscribeListId]);
+    // States
+    const initialState = {
+        isUpdated: false,
+        isChanged: false,
+    };
+    const [preferenceList, setPreferenceList] = useState([]);
+    const [pageStatus, setPageStatus] = useState(initialState);
+    const { isUpdated, isChanged } = pageStatus;
+    // Effects
+    useEffect(() => {
+        // setState(prevState => ({
+        //   ...prevState,
+        //   preferenceList: [
+        //     ...(preferencesUnsubscribeList || []),
+        //     // ...(Array.isArray(allUnsubscribeList)
+        //     //   ? allUnsubscribeList?.filter(
+        //     //       list =>
+        //     //         (Array.isArray(preferences.preferenceListIds)
+        //     //           ? [...preferences.preferenceListIds]
+        //     //           : preferences.preferenceListIds
+        //     //             ? [`${preferences.preferenceListIds}`]
+        //     //             : []
+        //     //         )?.includes(list.list_id) &&
+        //     //         compareStrings(list.status, UNSUBSCRIBE_LIST_STATUS.ACTIVE) === 0,
+        //     //     )
+        //     //   : []),
+        //   ],
+        // }));
+        setPreferenceList((preferencesUnsubscribeList || []).map(item => ({
+            ...item,
+            checked: true,
+        })));
+    }, [preferencesUnsubscribeList, allUnsubscribeList]);
+    const onChangeSelectPreference = (event, index) => {
+        const { checked } = event.target;
+        setPreferenceList(prev => prev.map((item, i) => (i === index ? { ...item, checked } : item)));
+        setPageStatus(prev => ({
+            ...prev,
+            isChanged: true,
+        }));
+    };
+    const onClickSavePreferences = () => {
+        // If already updated, do nothing
+        if (!isChanged) {
+            return;
+        }
+        const timeout = setTimeout(() => {
+            setPageStatus(prevState => ({ ...prevState, isUpdated: true }));
+        }, 1000);
+        setPageStatus(prevState => ({ ...prevState, isChanged: false }));
+        return () => clearTimeout(timeout);
+    };
+    const onClickOptOutAll = async () => {
+        onOptOutAll?.();
+    };
+    const renderPreferencesList = () => {
+        if (isLoadingUnsubscribeList || isFetchingUnsubscribeList) {
+            return (_jsx(SpinContainer, { children: _jsx(Spin, { spinning: true }) }));
+        }
+        return preferenceList?.length > 0 ? (preferenceList?.map((preference, index) => (_jsx(ListStyled.Item, { style: { gap: '9px' }, children: _jsxs(CheckboxStyled, { checked: preference?.checked, className: "ants-flex ants-self-start", onChange: event => onChangeSelectPreference(event, index), style: {
+                    alignItems: 'flex-start',
+                }, children: [_jsx("div", { style: { width: '100%', fontSize: '12px' }, children: preference?.list_name }), _jsx(Typography.Paragraph, { style: { fontSize: '11px', color: '#595959', marginBottom: '0px' }, children: preference?.description })] }) }, preference?.list_id)))) : (_jsx(EmptyData, { style: { marginBottom: '10px' }, icon: _jsx(DataIcon, {}), size: "medium", title: "No data available" }));
+    };
+    const renderActions = () => {
+        if (!preferenceList?.length)
+            return null;
+        return (_jsxs(Flex, { justify: "space-between", align: "center", style: {
+                width: '100%',
+                fontSize: '12px',
+                paddingTop: 15,
+                borderTop: '1px solid #E5E5E5',
+            }, children: [_jsx(Button, { type: "primary", onClick: onClickSavePreferences, disabled: !isChanged, children: "Save preferences" }), _jsx(Button, { onClick: onClickOptOutAll, icon: _jsx(UnsubscribeIcon, { color: "#005EB8" }), disabled: preferenceList?.length === 0, children: BTN_UNSUBSCRIBE_ALL[type] })] }));
+    };
+    return (_jsxs(Wrapper, { children: [_jsx(LogoContainer, { children: _jsx(LogoImg, { src: preferences.logo, alt: "Antsomi Logo" }) }), _jsx(Identifier, { children: identifierLabel }), !isUpdated || isChanged ? (_jsx(Title, { children: "Communication Preference" })) : (_jsx(Title, { style: { color: '#12B800' }, children: "Communication Preferences Updated!" })), _jsx(Description, { style: {
+                    marginBottom: preferences.haveResubscribeButton || preferenceList?.length > 0 ? '30px' : 0,
+                }, children: DESCRIPTION[type] }), _jsx(ListStyled, { style: {
+                    maxHeight: '400px',
+                    overflow: 'auto',
+                }, header: _jsx("span", {}), children: renderPreferencesList() }), renderActions(), !!preferenceList?.length && (_jsx(TestAlert, { type: type, style: {
+                    marginTop: !preferences.haveResubscribeButton ? '30px' : '10px',
+                } }))] }));
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RESULT_PAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
+import { TUnsubscribeSettings, TUnsubscribeType } from '@antscorp/antsomi-ui/es/types';
+type ResultPageType = (typeof RESULT_PAGE_TYPES)[keyof typeof RESULT_PAGE_TYPES];
+interface ResultProps {
+    unsubscribeType: TUnsubscribeType;
+    type: ResultPageType;
+    preferences: TUnsubscribeSettings['unsubscribePreferences'];
+    identifier: string[];
+    onClickOptIn?: () => void;
+}
+export declare const Result: React.FC<ResultProps>;
+export {};

package/es/components/molecules/UnsubscribePreview/components/ResultPage/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useMemo } from 'react';
+// Constants
+import { RESULT_PAGE_TYPES, RESULT_PAGE_MESSAGES } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { maskEmail, maskPhone } from '../../utils';
+// Components
+import { Button } from '@antscorp/antsomi-ui/es/components';
+import { TestAlert } from '../TestAlert';
+import { Description, Identifier, LogoContainer, LogoImg, TaskAltIconStyled, Title, Wrapper, } from '../styled';
+export const Result = props => {
+    const { unsubscribeType, preferences, identifier, type, onClickOptIn } = props;
+    const identifierLabel = useMemo(() => {
+        switch (unsubscribeType) {
+            case 'sms':
+            case 'whatsapp':
+                return identifier.length > 1
+                    ? identifier.map(item => maskPhone(item)).join(', ')
+                    : maskPhone(identifier[0]);
+            default:
+                return identifier.length > 1
+                    ? identifier.map(item => maskEmail(item)).join(', ')
+                    : maskEmail(identifier[0]);
+        }
+    }, [unsubscribeType, identifier]);
+    return (_jsxs(Wrapper, { children: [_jsx(LogoContainer, { children: _jsx(LogoImg, { src: preferences.logo, alt: "Antsomi Logo" }) }), _jsx(Identifier, { style: { textAlign: 'center' }, children: identifierLabel }), _jsx(TaskAltIconStyled, { size: 100, color: "#005EB8", style: { margin: '0px auto 30px' } }), RESULT_PAGE_MESSAGES[type][unsubscribeType].title && (_jsx(Title, { children: RESULT_PAGE_MESSAGES[type][unsubscribeType].title })), _jsx(Description, { style: { marginBottom: 0, textAlign: 'center' }, children: RESULT_PAGE_MESSAGES[type][unsubscribeType].description || '' }), _jsx(TestAlert, { type: unsubscribeType, showIcon: false, justify: "center", className: "ants-text-center !ants-m-[-9px]", style: { margin: '15px 0px' } }), type === RESULT_PAGE_TYPES.OPT_OUT && (_jsx(Button, { style: { height: '30px', width: 'fit-content', margin: '0px auto' }, onClick: onClickOptIn, children: "Opt In + Restore Preferences" }))] }));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TUnsubscribeType } from '@antscorp/antsomi-ui/es/types';
+import { FlexProps } from '@antscorp/antsomi-ui/es/components';
+interface TestAlertProps extends Omit<FlexProps, 'children'> {
+    showIcon?: boolean;
+    type: TUnsubscribeType;
+}
+export declare const TestAlert: React.FC<TestAlertProps>;
+export {};

package/es/components/molecules/UnsubscribePreview/components/TestAlert/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { memo } from 'react';
+import classNames from 'classnames';
+// Icons
+import { ViewDetailsInformationIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components';
+const TEXT_ALERT = {
+    email: 'Unsubscribers from emails are not recorded',
+    sms: 'Unsubscribers from SMS messages are not recorded',
+    whatsapp: 'Unsubscribers from test WhatsApp messages are not recorded',
+};
+export const TestAlert = memo(({ className, showIcon = true, type, ...props }) => (_jsxs(Flex, { className: classNames(className), gap: 6, align: "center", ...props, children: [showIcon && (_jsx(ViewDetailsInformationIcon, { color: "#005EB8", size: 24, className: "ants-text-primary" })), _jsx("span", { style: {
+                fontSize: 11,
+                color: '#7F7F7F',
+            }, children: TEXT_ALERT[type] })] })));
+TestAlert.displayName = 'TestAlert';

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TUnsubscribeSettings, TUnsubscribeType } from '@antscorp/antsomi-ui/es/types';
+import { TUnsubscribePayloadInfo } from '@antscorp/antsomi-ui/es/services/Unsubscribe';
+interface UnsubscribedProps {
+    preferences: TUnsubscribeSettings['unsubscribePreferences'];
+    identifier: string[];
+    onViewPreferences?: () => void;
+    onResubscribe?: () => void;
+    apiConfig: TUnsubscribePayloadInfo;
+    type: TUnsubscribeType;
+}
+export declare const Unsubscribed: React.FC<UnsubscribedProps>;
+export {};

package/es/components/molecules/UnsubscribePreview/components/UnsubscribedPage/index.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useMemo } from 'react';
+// Utils
+import { maskEmail, maskPhone } from '../../utils';
+import { compareStrings } from '@antscorp/antsomi-ui/es/utils';
+// Constants
+import { UNSUBSCRIBE_LIST_STATUS } from '../../../UnsubscribePreferences/constants';
+import { GLOBAL_UNSUBSCRIBED_LIST, GLOBAL_UNSUBSCRIBED_WHATSAPP, } from '@antscorp/antsomi-ui/es/constants';
+// Icons
+import { DataIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Queries
+import { useGetUnsubscribeList } from '@antscorp/antsomi-ui/es/queries/Unsubscribe';
+// Components
+import { Button, EmptyData, Flex, Spin, Typography } from '@antscorp/antsomi-ui/es/components';
+import { TestAlert } from '../TestAlert';
+import { Description, Identifier, ListStyled, LogoContainer, LogoImg, Title, Wrapper, } from '../styled';
+export const Unsubscribed = props => {
+    const { preferences, identifier, onViewPreferences, onResubscribe, apiConfig, type } = props;
+    // Hooks
+    const { data: unsubscribeData, isLoading: isLoadingUnsubscribe, isFetching: isFetchingUnsubscribeList, } = useGetUnsubscribeList({
+        args: {
+            data: {
+                type,
+                portalId: Number(apiConfig.portalId),
+            },
+        },
+        options: {
+            enabled: !!apiConfig.portalId,
+        },
+    }, apiConfig);
+    // Memo
+    const isGlobal = useMemo(() => [GLOBAL_UNSUBSCRIBED_LIST, GLOBAL_UNSUBSCRIBED_WHATSAPP].some(({ list_id }) => compareStrings(list_id, preferences.unsubscribeListId) === 0), [preferences.unsubscribeListId]);
+    const unsubscribeList = useMemo(() => {
+        const unsubscribeDataList = unsubscribeData?.entries[0];
+        return (unsubscribeDataList?.find(list => compareStrings(list.list_id, preferences.unsubscribeListId) === 0 &&
+            compareStrings(list.status, UNSUBSCRIBE_LIST_STATUS.ACTIVE) === 0) || null);
+    }, [unsubscribeData, preferences.unsubscribeListId]);
+    const identifierLabel = useMemo(() => {
+        switch (type) {
+            case 'sms':
+            case 'whatsapp':
+                return identifier.length > 1
+                    ? identifier.map(item => maskPhone(item)).join(', ')
+                    : maskPhone(identifier[0]);
+            default:
+                return identifier.length > 1
+                    ? identifier.map(item => maskEmail(item)).join(', ')
+                    : maskEmail(identifier[0]);
+        }
+    }, [type, identifier]);
+    // Handlers
+    const onClickResubscribe = async () => {
+        onResubscribe?.();
+    };
+    const renderUnsubscribedList = () => {
+        if (isLoadingUnsubscribe || isFetchingUnsubscribeList) {
+            if (isGlobal) {
+                return (_jsx("div", { className: "ants-absolute ants-inset-0 ants-h-full ants-top-0 ants-bottom-0 ants-flex ants-justify-center ants-items-center ants-bg-white/70 ants-z-10", children: _jsx(Spin, { spinning: true }) }));
+            }
+            return (_jsx("div", { className: "ants-my-5 ants-flex ants-justify-center", children: _jsx(Spin, { spinning: true }) }));
+        }
+        return isGlobal ? null : unsubscribeList ? (_jsx(ListStyled, { header: _jsx("span", {}), children: _jsxs(ListStyled.Item, { children: [_jsx("div", { style: { fontSize: 12 }, children: unsubscribeList?.list_name }), _jsx(Typography.Paragraph, { style: { fontSize: '11px', color: '#595959', marginBottom: '0px' }, children: unsubscribeList?.description })] }) })) : (_jsx(EmptyData, { icon: _jsx(DataIcon, {}), size: "medium", title: "No data available" }));
+    };
+    const renderActions = () => {
+        let actionItem = null;
+        if (!isGlobal) {
+            actionItem = (_jsx(Button, { type: "primary", className: "!ants-text-[12px] ants-p-2.5", onClick: onViewPreferences, disabled: isLoadingUnsubscribe, children: "View preferences" }));
+        }
+        if (isGlobal && preferences.haveResubscribeButton) {
+            actionItem = (_jsx(Button, { type: "primary", danger: true, className: "ants-color-primary !ants-text-[14px] !ants-p-2.5", onClick: onClickResubscribe, children: "Resubscribe" }));
+        }
+        if (actionItem) {
+            return (_jsx(Flex, { align: "center", justify: "center", style: {
+                    paddingTop: 15,
+                    borderTop: '1px solid #E5E5E5',
+                }, children: actionItem }));
+        }
+    };
+    return (_jsxs(Wrapper, { style: {
+            paddingBottom: isGlobal ? (!preferences.haveResubscribeButton ? '20px' : '10px') : '10px',
+        }, children: [_jsx(LogoContainer, { children: _jsx(LogoImg, { src: preferences.logo, alt: "Antsomi Logo" }) }), _jsx(Identifier, { children: identifierLabel }), _jsx(Title, { children: preferences.title }), _jsx(Description, { children: preferences.description }), renderUnsubscribedList(), renderActions(), _jsx(TestAlert, { type: type, showIcon: isGlobal && !preferences.haveResubscribeButton, justify: isGlobal && !preferences.haveResubscribeButton ? 'left' : 'center', style: {
+                    marginTop: '10px',
+                } })] }));
+};

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

@@ -0,0 +1,3 @@
+export * from './UnsubscribedPage';
+export * from './PreferencesPage';
+export * from './ResultPage';

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

@@ -0,0 +1,3 @@
+export * from './UnsubscribedPage';
+export * from './PreferencesPage';
+export * from './ResultPage';

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { List } from 'antd';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoImg: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Identifier: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ListStyled: import("styled-components").StyledComponent<typeof List, any, {}, never>;
+export declare const TaskAltIconStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../icons/types").IconProps & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
+export declare const CheckboxStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").CheckboxProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>> & {
+    Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd/es/checkbox").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
+}, any, {}, never>;

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

@@ -0,0 +1,65 @@
+import { Checkbox, List } from 'antd';
+import styled from 'styled-components';
+import { TaskAltIcon } from '../../../icons';
+export const Wrapper = styled.div `
+  width: 550px;
+  display: flex;
+  flex-direction: column;
+  padding: 30px 20px;
+`;
+export const LogoContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+`;
+export const LogoImg = styled.img `
+  max-width: 60%;
+`;
+export const Identifier = styled.div `
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 15px;
+`;
+export const Title = styled.div `
+  font-size: 24px;
+  font-weight: 500;
+  margin-bottom: 15px;
+  text-align: center;
+`;
+export const Description = styled.div `
+  font-size: 14px;
+  font-weight: 400;
+  margin-bottom: 30px;
+`;
+export const ListStyled = styled(List) `
+  .antsomi-list-header {
+    padding-block: 0px !important;
+    border-color: #e5e5e5 !important;
+  }
+
+  .antsomi-list-item {
+    border-color: #e5e5e5 !important;
+    padding: 15px 0px;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    align-items: flex-start !important;
+  }
+`;
+export const TaskAltIconStyled = styled(TaskAltIcon) `
+  border-radius: 100%;
+  background-color: #c8cedb45;
+  padding: 20px;
+  margin-bottom: 30px;
+`;
+export const CheckboxStyled = styled(Checkbox) `
+  align-items: flex-start;
+
+  & .antsomi-checkbox {
+    align-self: auto !important;
+  }
+
+  & .antsomi-typography {
+    margin-bottom: 0px !important;
+  }
+`;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TUnsubscribePayloadInfo } from '@antscorp/antsomi-ui/es/services/Unsubscribe';
+import { TUnsubscribeSettings, TUnsubscribeType } from '@antscorp/antsomi-ui/es';
+export type TUnsubscribePreviewProps = {
+    unsubscribePreferences: TUnsubscribeSettings['unsubscribePreferences'];
+    apiConfig: TUnsubscribePayloadInfo;
+    type: TUnsubscribeType;
+    identifier?: string[];
+};
+export declare const UnsubscribePreview: React.FC<TUnsubscribePreviewProps>;

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { useEffect, useState } from 'react';
+// Constants
+import { LANDING_PAGE_TYPE, RESULT_PAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
+import { LANDING_PAGE_TYPE as UNSUBSCRIBE_LANDING_PAGE_TYPE } from '../UnsubscribePreferences/constants';
+// Components
+import { Unsubscribed, Preferences, Result } from './components';
+// Styles
+import { UnsubscribeLandingPageWrapper } from './styled';
+export const UnsubscribePreview = props => {
+    const { unsubscribePreferences, apiConfig, type, identifier = [] } = props;
+    const { landingPageType, customLink } = unsubscribePreferences || {};
+    // States
+    const initialState = {
+        page: LANDING_PAGE_TYPE.UNSUBSCRIBE,
+        resultPage: RESULT_PAGE_TYPES.RESUBSCRIBED,
+    };
+    const [state, setState] = useState(initialState);
+    const { page, resultPage } = state;
+    const onChangePage = (newPage) => {
+        setState(prevState => ({
+            ...prevState,
+            page: newPage,
+        }));
+    };
+    // Effects
+    useEffect(() => {
+        if (!apiConfig?.accountId)
+            return;
+        const updateAndRedirect = async () => {
+            window.location.replace(customLink || '');
+        };
+        if (landingPageType === UNSUBSCRIBE_LANDING_PAGE_TYPE.SPECIFIC_LINK.value) {
+            updateAndRedirect();
+        }
+    }, [landingPageType, apiConfig?.accountId, customLink]);
+    useEffect(() => {
+        onChangePage(LANDING_PAGE_TYPE.UNSUBSCRIBE);
+    }, [unsubscribePreferences]);
+    // Renders
+    const renderContent = () => {
+        if (landingPageType !== UNSUBSCRIBE_LANDING_PAGE_TYPE.SPECIFIC_LINK.value) {
+            switch (page) {
+                case LANDING_PAGE_TYPE.UNSUBSCRIBE:
+                    return (_jsx(Unsubscribed, { preferences: unsubscribePreferences, identifier: identifier, onViewPreferences: () => onChangePage(LANDING_PAGE_TYPE.PREFERENCES), onResubscribe: () => {
+                            onChangePage(LANDING_PAGE_TYPE.RESULT);
+                            setState(prevState => ({
+                                ...prevState,
+                                resultPage: RESULT_PAGE_TYPES.RESUBSCRIBED,
+                            }));
+                        }, apiConfig: apiConfig, type: type }));
+                case LANDING_PAGE_TYPE.PREFERENCES:
+                    return (_jsx(Preferences, { preferences: unsubscribePreferences, identifier: identifier, onOptOutAll: () => {
+                            onChangePage(LANDING_PAGE_TYPE.RESULT);
+                            setState(prevState => ({ ...prevState, resultPage: RESULT_PAGE_TYPES.OPT_OUT }));
+                        }, apiConfig: apiConfig, type: type }));
+                case LANDING_PAGE_TYPE.RESULT:
+                    return (_jsx(Result, { unsubscribeType: type, type: resultPage, preferences: unsubscribePreferences, identifier: identifier, onClickOptIn: () => onChangePage(LANDING_PAGE_TYPE.PREFERENCES) }));
+                default:
+                    return null;
+            }
+        }
+    };
+    return (_jsx(UnsubscribeLandingPageWrapper, { className: "unsubscribe-preview", children: renderContent() }));
+};

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

@@ -0,0 +1,9 @@
+export declare const UnsubscribeLandingPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SpinContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Logo: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Identifier: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,51 @@
+// Libraries
+import styled from 'styled-components';
+export const UnsubscribeLandingPageWrapper = styled.div `
+  .antsomi-card-body {
+    padding: 0px !important;
+  }
+  .ant-list-item {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+`;
+export const SpinContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const Wrapper = styled.div `
+  padding: 30px 20px;
+
+  display: flex;
+  flex-direction: column;
+`;
+export const LogoContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 30px;
+`;
+export const Logo = styled.img `
+  width: 60%;
+`;
+export const Identifier = styled.div `
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 7px 0px;
+`;
+export const Title = styled.div `
+  font-size: 24px;
+  font-weight: 500;
+`;
+export const Description = styled.div `
+  font-size: 16px;
+  font-weight: 400;
+`;
+export const ButtonWrapper = styled.div `
+  padding-top: 15px;
+  border-top: 1px solid #e5e5e5;
+`;

package/es/components/molecules/UnsubscribePreview/type.d.ts

@@ -0,0 +1,5 @@
+import { UNSUBSCRIBE_STATUS } from '@antscorp/antsomi-ui/es/constants';
+export type UnsubscribeParams = {
+    unsubscribeId: string;
+};
+export type TUnsubscribeStatus = (typeof UNSUBSCRIBE_STATUS)[keyof typeof UNSUBSCRIBE_STATUS];

package/es/components/molecules/UnsubscribePreview/type.js

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