@antscorp/antsomi-ui 2.0.107 → 2.0.109

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

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Libraries
+import { useMemo } from 'react';
+import { translate, translations } from '@antscorp/antsomi-locales';
+// Queries
+import { useGetUnsubscribeListPermission } from '@antscorp/antsomi-ui/es/queries/Unsubscribe';
+// Constants
+import { CUSTOM_SEGMENT, LANDING_PAGE_TYPE, UNSUBSCRIBE_LIST_MESSAGE_ERRORS } from './constants';
+import { GLOBAL_UNSUBSCRIBED_LIST, GLOBAL_UNSUBSCRIBED_WHATSAPP, } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { buildOptionPreferencesList, buildOptionUnsubscribedList, checkUnsubscribeList, unsubscribeListNotExist, } from './utils';
+import { compareStrings, handleError } from '@antscorp/antsomi-ui/es/utils';
+// Components
+import { EditingListV2, Input, RadioGroup, SelectV2, SettingWrapper, Space, Spin, Switch, UploadImage, } from '../../index';
+import { TextStyled } from './styled';
+const PATH = 'antsomi-ui/src/components/molecules/UnsubscribePreferences/index.tsx';
+export const UnsubscribePreferences = (props) => {
+    const { type, apiConfig, unsubscribePreferences, hideLandingPageType, fieldPath = 'settings.unsubscribePreferences', required = ['unsubscribeListId', 'title', 'description'], onChange, } = props;
+    const { segmentId, logo, title, description, customLink, haveResubscribeButton, unsubscribeListId, } = unsubscribePreferences || {};
+    const preferenceListIds = useMemo(() => Array.isArray(unsubscribePreferences.preferenceListIds)
+        ? [...unsubscribePreferences.preferenceListIds]
+        : unsubscribePreferences.preferenceListIds
+            ? [`${unsubscribePreferences.preferenceListIds}`]
+            : [], [unsubscribePreferences.preferenceListIds]);
+    const landingPageType = unsubscribePreferences?.landingPageType ||
+        (segmentId === CUSTOM_SEGMENT.value
+            ? LANDING_PAGE_TYPE.SPECIFIC_LINK.value
+            : LANDING_PAGE_TYPE.CUSTOM_PAGE.value);
+    const isGlobalUnsubscribedList = [GLOBAL_UNSUBSCRIBED_LIST, GLOBAL_UNSUBSCRIBED_WHATSAPP].some(({ list_id }) => compareStrings(list_id, unsubscribeListId) === 0);
+    const { data: unsubscribeDataPermission, isFetching: isLoadingUnsubscribeListPermission } = useGetUnsubscribeListPermission({
+        args: {
+            data: {
+                type,
+                portalId: apiConfig.portalId || 0,
+            },
+        },
+        options: {
+            enabled: !!apiConfig.portalId,
+        },
+    }, apiConfig);
+    // Memoized
+    const unsubscribeList = useMemo(() => {
+        if (isLoadingUnsubscribeListPermission)
+            return [];
+        return unsubscribeDataPermission?.entries[0] || [];
+    }, [unsubscribeDataPermission, isLoadingUnsubscribeListPermission]);
+    const memoizedUnsubscribedLists = useMemo(() => buildOptionUnsubscribedList(unsubscribeList || [], unsubscribeListId?.toString() || [])?.map(({ list_id, list_name }) => ({
+        value: list_id,
+        label: list_name,
+    })), [unsubscribeList, unsubscribeListId]);
+    const memoizedPreferencesLists = useMemo(() => {
+        const list = buildOptionPreferencesList(unsubscribeList || [], unsubscribeListId?.toString() || []);
+        return ([
+            ...(preferenceListIds?.map(key => {
+                const select = list?.find(opt => `${opt.key}` === `${key}`);
+                if (!select) {
+                    return {
+                        value: key,
+                        label: `[ID - ${key}]`,
+                        key,
+                        errorMessage: UNSUBSCRIBE_LIST_MESSAGE_ERRORS.UNAUTHORIZED,
+                    };
+                }
+                return null;
+            }) || []),
+            ...(list || []),
+        ]?.filter((item) => Boolean(item)) || []);
+    }, [unsubscribeList, unsubscribeListId, preferenceListIds]);
+    const { errorMessage: unsubscribeListErrorMessage } = checkUnsubscribeList({
+        listUnsubscribe: unsubscribeList || [],
+        unsubscribeId: `${unsubscribeListId}`,
+    });
+    const handleChange = (key, value) => {
+        try {
+            switch (key) {
+                case 'unsubscribeListId': {
+                    const newPreferenceListIds = buildOptionPreferencesList(unsubscribeList || [], value || [])
+                        ?.filter(each => !each.errorMessage)
+                        .map(item => item.value);
+                    onChange({
+                        ...unsubscribePreferences,
+                        unsubscribeListId: value,
+                        preferenceListIds: newPreferenceListIds,
+                    }, [
+                        {
+                            fieldPath: `${fieldPath}.unsubscribeListId`,
+                            data: value,
+                        },
+                        {
+                            fieldPath: `${fieldPath}.preferenceListIds`,
+                            data: newPreferenceListIds,
+                        },
+                    ]);
+                    break;
+                }
+                case 'landingPageType': {
+                    onChange({
+                        ...unsubscribePreferences,
+                        landingPageType: value,
+                    }, [
+                        {
+                            fieldPath: `${fieldPath}.landingPageType`,
+                            data: value,
+                        },
+                    ]);
+                    break;
+                }
+                case 'customLink': {
+                    onChange({
+                        ...unsubscribePreferences,
+                        customLink: value,
+                    }, [
+                        {
+                            fieldPath: `${fieldPath}.customLink`,
+                            data: value,
+                        },
+                    ]);
+                    break;
+                }
+                case 'logo': {
+                    onChange({
+                        ...unsubscribePreferences,
+                        logo: value,
+                    }, [
+                        {
+                            fieldPath: `${fieldPath}.logo`,
+                            data: value,
+                        },
+                    ]);
+                    break;
+                }
+                case 'title': {
+                    onChange({
+                        ...unsubscribePreferences,
+                        title: value,
+                    }, [
+                        {
+                            fieldPath: `${fieldPath}.title`,
+                            data: value,
+                        },
+                    ]);
+                    break;
+                }
+                case 'description': {
+                    onChange({
+                        ...unsubscribePreferences,
+                        description: value,
+                    }, [
+                        {
+                            fieldPath: `${fieldPath}.description`,
+                            data: value,
+                        },
+                    ]);
+                    break;
+                }
+                case 'haveResubscribeButton': {
+                    onChange({
+                        ...unsubscribePreferences,
+                        haveResubscribeButton: value,
+                    }, [
+                        {
+                            fieldPath: `${fieldPath}.haveResubscribeButton`,
+                            data: value,
+                        },
+                    ]);
+                    break;
+                }
+                case 'preferenceListIds': {
+                    onChange({
+                        ...unsubscribePreferences,
+                        preferenceListIds: value,
+                    }, [
+                        {
+                            fieldPath: `${fieldPath}.preferenceListIds`,
+                            data: value,
+                        },
+                    ]);
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleChange',
+                args: { key, value },
+            });
+        }
+    };
+    return (_jsxs(Space, { className: "unsubscribe-preferences", size: 20, direction: "vertical", children: [_jsx(SelectV2, { showSearch: true, label: _jsx(TextStyled, { color: "#666666", required: required.includes('unsubscribeListId'), children: translate(translations._TITLE_UNSUBSCRIBED_LIST, 'Unsubscribed list') }), placeholder: translate('', 'Select Unsubscribed List'), loading: isLoadingUnsubscribeListPermission, options: memoizedUnsubscribedLists, value: unsubscribeListNotExist(unsubscribeList, unsubscribeListId?.toString()), errorMsg: unsubscribeListErrorMessage, status: !isLoadingUnsubscribeListPermission && unsubscribeListErrorMessage !== '' ? 'error' : '', onChange: value => {
+                    handleChange('unsubscribeListId', value);
+                } }), !hideLandingPageType && (_jsx(SettingWrapper, { label: translate(translations._TITLE_UNSUBSCRIBE_LANDING_PAGE, 'Landing page'), children: _jsx(RadioGroup, { value: landingPageType, options: Object.values(LANDING_PAGE_TYPE), onChange: e => {
+                        handleChange('landingPageType', e.target.value);
+                    } }) })), landingPageType === LANDING_PAGE_TYPE.SPECIFIC_LINK.value ? (_jsxs(Space, { size: 5, direction: "vertical", children: [_jsx(TextStyled, { color: "#666666", required: required.includes('customLink'), children: translate(translations._TITLE_UNSUBSCRIBE_PAGE_URL, 'Page URL') }), _jsx(Input, { value: customLink, placeholder: translate('_', 'Enter text here...'), onAfterChange: value => handleChange('customLink', value) })] })) : (_jsxs(_Fragment, { children: [_jsx(UploadImage, { domainMedia: `${apiConfig.url}`, slug: "", paramConfigs: apiConfig, title: translate('_', 'Logo'), disableRemove: true, isInputMode: false, selectedImage: {
+                            url: logo,
+                        }, onChangeImage: image => {
+                            handleChange('logo', image.url);
+                        }, onRemoveImage: () => {
+                            handleChange('logo', '');
+                        }, required: required.includes('logo') }), _jsxs(Space, { size: 5, direction: "vertical", children: [_jsx(TextStyled, { color: "#666666", required: required.includes('title'), children: translate(translations._TITLE_TICKET_TITLE, 'Title') }), _jsx(Input, { value: title, placeholder: translate('_', 'Enter text here...'), maxLength: 70, onAfterChange: value => handleChange('title', value) })] }), _jsxs(Space, { size: 5, direction: "vertical", children: [_jsx(TextStyled, { color: "#666666", required: required.includes('description'), children: translate(translations._TITL_DESCRIPTION, 'Description') }), _jsx(Input, { value: description, placeholder: translate('_', 'Enter text here...'), maxLength: 255, onAfterChange: value => handleChange('description', value) })] }), isGlobalUnsubscribedList ? (_jsxs(Space, { size: 5, direction: "horizontal", style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(TextStyled, { color: "#666666", required: required.includes('haveResubscribeButton'), children: translate(`${translations._TITLE_DISPLAY_RESUBSCRIBE_BUTTON}?`, 'Display Resubscribe button?') }), _jsx(Switch, { checked: haveResubscribeButton || false, onChange: checked => handleChange('haveResubscribeButton', checked) })] })) : (_jsxs(Space, { size: 5, direction: "vertical", children: [_jsx(TextStyled, { color: "#666666", required: required.includes('preferenceListIds'), children: translate(translations._TITLE_PREFERENCES, 'Preferences') }), isLoadingUnsubscribeListPermission ? (_jsx(Spin, { spinning: true, className: "ants-flex ants-justify-center", size: "small" })) : (_jsx(EditingListV2, { className: "ants-mt-2", addButtonLabel: translate(translations._ACT_ADD_UNSUBSCRIBED_LIST, 'Add unsubscribed list'), options: memoizedPreferencesLists, selected: preferenceListIds, onChange: value => handleChange('preferenceListIds', value) }))] }))] }))] }));
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TextStyled: import("styled-components").StyledComponent<import("react").FC<import("../../atoms/Text").TextProps>, any, {}, never>;

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

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+import { Text } from '../../index';
+export const TextStyled = styled(Text) `
+  ${({ required }) => required &&
+    css `
+      &::after {
+        content: ' *';
+        color: #ef3340;
+      }
+    `}
+`;

package/es/components/molecules/UnsubscribePreferences/utils.d.ts

@@ -0,0 +1,15 @@
+import { TUnsubscribeList } from '@antscorp/antsomi-ui/es/types';
+export declare const buildOptionUnsubscribedList: (list: TUnsubscribeList[], selected: any) => TUnsubscribeList[];
+export declare const unsubscribeListNotExist: (options: any, value: any) => any;
+export declare const checkUnsubscribeList: ({ listUnsubscribe, unsubscribeId, }: {
+    listUnsubscribe?: any[];
+    unsubscribeId?: string;
+}) => {
+    errorMessage: string;
+};
+export declare const buildOptionPreferencesList: (list: TUnsubscribeList[], selected: any) => {
+    value: string;
+    label: string;
+    key: string;
+    errorMessage: any;
+}[];

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';