@antscorp/antsomi-ui 2.0.107 → 2.0.108

package/es/components/molecules/EditingListV2/components/List/List.d.ts

@@ -5,5 +5,5 @@ type ListProps = {
     removable?: boolean;
     onClickRemove?: (key: string) => void;
 };
-export declare const ListItem: (props: ListProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export declare const ListItem: (props: ListProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/es/components/molecules/EditingListV2/components/List/List.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Libraries
-import { useState } from 'react';
 import { isEmpty } from 'lodash';
+import styled from 'styled-components';
 // Components
 import { Spin, Typography, Tooltip } from '../../../../atoms';
 import { List } from 'antd';
@@ -10,9 +9,19 @@ import { CloseIcon, WarningIcon } from '@antscorp/antsomi-ui/es/components/icons
 import { CLS } from '../../utils';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const ListItemStyled = styled(List.Item) `
+  .close-icon {
+    display: none;
+  }
+
+  &:hover .close-icon {
+    display: flex;
+  }
+
+`;
 export const ListItem = (props) => {
     const { isLoading, selectOptions, onClickRemove, removable } = props;
-    const [hover, setHover] = useState('');
+    // const [hover, setHover] = useState('');
     const renderLabel = (label) => {
         if (typeof label === 'string') {
             return _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: label });
@@ -29,9 +38,9 @@ export const ListItem = (props) => {
         return _jsx(Spin, { indicatorSize: 24 });
     }
     if (isEmpty(selectOptions)) {
-        return;
+        return null;
     }
-    return (_jsx(List, { dataSource: items, renderItem: item => (_jsxs(List.Item, { style: {
+    return (_jsx(List, { dataSource: items, renderItem: item => (_jsxs(ListItemStyled, { style: {
                 display: 'flex',
                 alignItems: 'center',
                 border: `1px solid ${item.errorMessage ? '#EF3340' : '#B8CFE6'}`,
@@ -39,10 +48,10 @@ export const ListItem = (props) => {
                 padding: '10px',
                 marginBottom: '10px',
                 minHeight: '40px',
-            }, onMouseEnter: () => setHover(item.key), onMouseLeave: () => setHover(''), children: [item.label, _jsxs("div", { style: {
+            }, children: [item.label, _jsxs("div", { style: {
                         flexShrink: 0,
                         display: 'flex',
                         alignItems: 'center',
                         gap: '5px',
-                    }, children: [item.errorMessage && (_jsx(Tooltip, { title: item.errorMessage, children: _jsx(WarningIcon, { size: 18 }) })), hover === item.key && removable && (_jsx(CloseIcon, { size: 18, color: globalToken?.bw8, style: { cursor: 'pointer' }, onClick: onClickRemove ? () => onClickRemove(item.key) : undefined }))] })] })) }));
+                    }, children: [item.errorMessage && (_jsx(Tooltip, { title: item.errorMessage, children: _jsx(WarningIcon, { size: 18 }) })), removable && (_jsx(CloseIcon, { size: 18, className: "close-icon", color: globalToken?.bw8, style: { cursor: 'pointer' }, onClick: onClickRemove ? () => onClickRemove(item.key) : undefined }))] })] })) }));
 };

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -20,10 +20,10 @@ import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
-import { DETECT_LINK, EMOJI, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, NO_VIEW_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, defaultCssVariables, tagifyDefaultProps, } from './constants';
+import { DETECT_LINK, EMOJI, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, NO_VIEW_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, UNSUBSCRIBE_WHATSAPP, defaultCssVariables, tagifyDefaultProps, } from './constants';
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, mapAttributes, mapErrorAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, mapAttributes, mapErrorAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -371,7 +371,7 @@ const TagifyInput = forwardRef((props, ref) => {
             if (newTag && tagifyRef.current) {
                 const { settings, value: currentTags } = tagifyRef.current;
                 const { readonly, maxTags } = settings;
-                const currentPersonalizeTags = currentTags.filter(tag => ![EMOJI, SHORT_LINK, SHORT_LINK_V2].includes(tag.type));
+                const currentPersonalizeTags = currentTags.filter(tag => ![EMOJI, SHORT_LINK, SHORT_LINK_V2, UNSUBSCRIBE_WHATSAPP].includes(tag.type));
                 const currentPersonalizeTagsLength = currentPersonalizeTags.length;
                 // Check readonly
                 if (readonly)
@@ -387,7 +387,7 @@ const TagifyInput = forwardRef((props, ref) => {
                      * Validate the max limit before add new tag
                      * For emoji and short link, it will be passed
                      */
-                    if (![EMOJI, SHORT_LINK, SHORT_LINK_V2].includes(type) &&
+                    if (![EMOJI, SHORT_LINK, SHORT_LINK_V2, UNSUBSCRIBE_WHATSAPP].includes(type) &&
                         currentPersonalizeTagsLength >= maxTags)
                         return;
                     // Create new tag
@@ -722,6 +722,17 @@ const TagifyInput = forwardRef((props, ref) => {
             });
         }
     }, [maxLength, customizeTag]);
+    useEffect(() => {
+        if (!tagifyRef.current)
+            return;
+        const inputEl = tagifyRef.current.DOM.input;
+        if (readonlyText) {
+            inputEl.setAttribute('contenteditable', 'false');
+        }
+        else {
+            inputEl.setAttribute('contenteditable', 'true');
+        }
+    }, [readonlyText]);
     const onTagifyWrapperClick = useCallback(event => {
         event.preventDefault();
         event.stopPropagation();

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

@@ -38,9 +38,11 @@ export declare const PATTERN_CACHE_TYPE: {
     readonly LINE_EMOJI_PTN: "line_emoji_pattern";
     readonly PERSONALIZE_PTN: "personalize_pattern";
     readonly VIBER_EMOJI_PTN: "viber_emoji_pattern";
+    readonly UNSUBSCRIBE_WHATSAPP_PTN: "unsubscribe_whatsapp_pattern";
+    readonly UNSUBSCRIBE_PTN: "unsubscribe_pattern";
 };
-export declare const SHORT_LINK_PTN: "shortlink_pattern", SHORT_LINK_INDIVIDUAL_PTN: "shortlink_individual_pattern", SHORT_LINK_GENERAL_PTN: "shortlink_general_pattern", SHORT_LINK_V2_INDIVIDUAL_PTN: "shortlink_v2_individual_pattern", SHORT_LINK_V2_GENERAL_PTN: "shortlink_v2_general_pattern", LINE_EMOJI_PTN: "line_emoji_pattern", PERSONALIZE_PTN: "personalize_pattern", VIBER_EMOJI_PTN: "viber_emoji_pattern";
-export declare const DEFAULT_ACCEPT_TAGS: ("shortlink_pattern" | "line_emoji_pattern" | "personalize_pattern" | "viber_emoji_pattern")[];
+export declare const SHORT_LINK_PTN: "shortlink_pattern", SHORT_LINK_INDIVIDUAL_PTN: "shortlink_individual_pattern", SHORT_LINK_GENERAL_PTN: "shortlink_general_pattern", SHORT_LINK_V2_INDIVIDUAL_PTN: "shortlink_v2_individual_pattern", SHORT_LINK_V2_GENERAL_PTN: "shortlink_v2_general_pattern", LINE_EMOJI_PTN: "line_emoji_pattern", PERSONALIZE_PTN: "personalize_pattern", VIBER_EMOJI_PTN: "viber_emoji_pattern", UNSUBSCRIBE_WHATSAPP_PTN: "unsubscribe_whatsapp_pattern", UNSUBSCRIBE_PTN: "unsubscribe_pattern";
+export declare const DEFAULT_ACCEPT_TAGS: ("shortlink_pattern" | "line_emoji_pattern" | "personalize_pattern" | "viber_emoji_pattern" | "unsubscribe_pattern")[];
 export declare const tagifyDefaultProps: TagifyInputProps;
 export declare const TAG_TYPE: {
     readonly CUSTOMER: "customer";
@@ -57,8 +59,9 @@ export declare const TAG_TYPE: {
     readonly SHORT_LINK_V2: "shortlink_v2";
     readonly DETECT_LINK: "detect_link";
     readonly CONTENT_SOURCE_GROUP: "groups";
+    readonly UNSUBSCRIBE_WHATSAPP: "unsubscribe_whatsapp";
 };
-export declare const CUSTOMER: "customer", VISITOR: "visitor", EVENT: "event", JOURNEY: "story", CAMPAIGN: "campaign", VARIANT: "variant", PROMOTION_CODE: "promotion_code", CUSTOM_FN: "custom", EMOJI: "emoji", DETECT_LINK: "detect_link", SHORT_LINK: "shortlink", SHORT_LINK_V2: "shortlink_v2", OBJECT_WIDGET: "objectWidget", CONTENT_SOURCE_GROUP: "groups";
+export declare const CUSTOMER: "customer", VISITOR: "visitor", EVENT: "event", JOURNEY: "story", CAMPAIGN: "campaign", VARIANT: "variant", PROMOTION_CODE: "promotion_code", CUSTOM_FN: "custom", EMOJI: "emoji", DETECT_LINK: "detect_link", SHORT_LINK: "shortlink", SHORT_LINK_V2: "shortlink_v2", OBJECT_WIDGET: "objectWidget", CONTENT_SOURCE_GROUP: "groups", UNSUBSCRIBE_WHATSAPP: "unsubscribe_whatsapp";
 export declare const SHORT_LINK_TYPE: {
     readonly INDIVIDUAL: "shortlink";
     readonly GENERAL: "shortlink_static";
@@ -88,6 +91,7 @@ export declare const TAG_COLOR: {
     readonly custom: "#bbefbe";
     readonly groups: "#ffdd9f";
     readonly emoji: "transparent";
+    readonly unsubscribe_whatsapp: "#cafedd";
 };
 export declare const EMOJI_COLLECTIONS: {
     readonly COMMON: "common";

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

@@ -39,13 +39,16 @@ export const PATTERN_CACHE_TYPE = {
     LINE_EMOJI_PTN: 'line_emoji_pattern',
     PERSONALIZE_PTN: 'personalize_pattern',
     VIBER_EMOJI_PTN: 'viber_emoji_pattern',
+    UNSUBSCRIBE_WHATSAPP_PTN: 'unsubscribe_whatsapp_pattern',
+    UNSUBSCRIBE_PTN: 'unsubscribe_pattern',
 };
-export const { SHORT_LINK_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_GENERAL_PTN, SHORT_LINK_V2_INDIVIDUAL_PTN, SHORT_LINK_V2_GENERAL_PTN, LINE_EMOJI_PTN, PERSONALIZE_PTN, VIBER_EMOJI_PTN, } = PATTERN_CACHE_TYPE;
+export const { SHORT_LINK_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_GENERAL_PTN, SHORT_LINK_V2_INDIVIDUAL_PTN, SHORT_LINK_V2_GENERAL_PTN, LINE_EMOJI_PTN, PERSONALIZE_PTN, VIBER_EMOJI_PTN, UNSUBSCRIBE_WHATSAPP_PTN, UNSUBSCRIBE_PTN, } = PATTERN_CACHE_TYPE;
 export const DEFAULT_ACCEPT_TAGS = [
     SHORT_LINK_PTN,
     PERSONALIZE_PTN,
     VIBER_EMOJI_PTN,
     LINE_EMOJI_PTN,
+    UNSUBSCRIBE_PTN,
 ];
 export const tagifyDefaultProps = {
     initialValue: '',
@@ -72,8 +75,9 @@ export const TAG_TYPE = {
     SHORT_LINK_V2: 'shortlink_v2',
     DETECT_LINK: 'detect_link',
     CONTENT_SOURCE_GROUP: 'groups',
+    UNSUBSCRIBE_WHATSAPP: 'unsubscribe_whatsapp',
 };
-export const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, EMOJI, DETECT_LINK, SHORT_LINK, SHORT_LINK_V2, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, } = TAG_TYPE;
+export const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, EMOJI, DETECT_LINK, SHORT_LINK, SHORT_LINK_V2, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, UNSUBSCRIBE_WHATSAPP, } = TAG_TYPE;
 export const SHORT_LINK_TYPE = {
     INDIVIDUAL: 'shortlink', // Individual link
     GENERAL: 'shortlink_static', // General link
@@ -103,6 +107,7 @@ export const TAG_COLOR = {
     [CUSTOM_FN]: '#bbefbe',
     [CONTENT_SOURCE_GROUP]: '#ffdd9f',
     [EMOJI]: 'transparent',
+    [UNSUBSCRIBE_WHATSAPP]: '#cafedd',
 };
 export const EMOJI_COLLECTIONS = {
     COMMON: 'common',

package/es/components/molecules/TagifyInput/patternHandlers.js

@@ -9,7 +9,7 @@ import { isViberEmoji } from './iconsViber';
 import { random } from '@antscorp/antsomi-ui/es/utils';
 import { containsTagType } from './utils';
 // Constants
-import { CONTENT_SOURCE_GROUP, EMOJI, EMOJI_COLLECTIONS, LINE_EMOJI_PTN, PERSONALIZE_PTN, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, SHORT_LINK, SHORT_LINK_GENERAL_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_PTN, SHORT_LINK_TYPE, SHORT_LINK_V2, SHORT_LINK_V2_GENERAL_PTN, SHORT_LINK_V2_INDIVIDUAL_PTN, VIBER_EMOJI_PTN, } from './constants';
+import { CONTENT_SOURCE_GROUP, EMOJI, EMOJI_COLLECTIONS, LINE_EMOJI_PTN, PERSONALIZE_PTN, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, SHORT_LINK, SHORT_LINK_GENERAL_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_PTN, SHORT_LINK_TYPE, SHORT_LINK_V2, SHORT_LINK_V2_GENERAL_PTN, SHORT_LINK_V2_INDIVIDUAL_PTN, VIBER_EMOJI_PTN, UNSUBSCRIBE_WHATSAPP, UNSUBSCRIBE_WHATSAPP_PTN, UNSUBSCRIBE_PTN, } from './constants';
 /*
  * Usage to cache compiled regular expressions:
  * const regex = getCachedRegex(pattern, flags);
@@ -594,6 +594,30 @@ const handleShortlinkV2GeneralPattern = match => {
     const tag = createTagPattern(tagData);
     return { isValid, tag, tagData };
 };
+/**
+ * Function to handle whatsapp#public/unsubscribe/${id} pattern
+ */
+const handleUnsubscribeWhatsappPattern = match => {
+    const [fullMatch, id] = match;
+    const isValid = Boolean(id && id.trim().length > 0);
+    if (!isValid) {
+        console.error(`Invalid WhatsApp unsubscribe pattern: fullMatch:: ${fullMatch}`);
+        return {
+            isValid,
+            tag: '[[Invalid WhatsApp unsubscribe]]',
+            tagData: undefined,
+        };
+    }
+    const label = `whatsapp${fullMatch}`;
+    const tagData = {
+        type: UNSUBSCRIBE_WHATSAPP,
+        label,
+        value: fullMatch,
+        id,
+    };
+    const tag = createTagPattern(tagData);
+    return { isValid, tag, tagData };
+};
 // Map of regex patterns to their respective wrapped handlers
 export const patternHandlers = {
     /*
@@ -653,4 +677,13 @@ export const patternHandlers = {
         acceptablePattern: VIBER_EMOJI_PTN,
         handler: errorWrapper(handleViberPattern),
     },
+    /**
+     * NOTE: WhatsApp unsubscribe patterns
+     */
+    [UNSUBSCRIBE_WHATSAPP_PTN]: {
+        pattern: '#public\\/unsubscribe\\/([A-Za-z0-9_-]+)(?:\\?(?=.*\\btype=whatsapp\\b).*)',
+        name: UNSUBSCRIBE_WHATSAPP_PTN, // Used to cache the regex, please keep the name unique for each pattern
+        acceptablePattern: UNSUBSCRIBE_PTN,
+        handler: errorWrapper(handleUnsubscribeWhatsappPattern),
+    },
 };

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

@@ -125,6 +125,10 @@ export interface TagifyInputProps {
      * @default () => {}
      */
     onChange: (inputValue: string) => void;
+    /**
+     * Defines whether the input text is read but not the whole tags.
+     */
+    readonlyText?: boolean;
 }
 export interface TagifyInputRef {
     onAddNewTag: (newTag: TagDataCustomize | string) => void;
@@ -135,8 +139,8 @@ export type EmojiCollection = (typeof EMOJI_COLLECTIONS)[keyof typeof EMOJI_COLL
 export type TagType = (typeof TAG_TYPE)[keyof typeof TAG_TYPE];
 export type ShortLinkType = (typeof SHORT_LINK_TYPE)[keyof typeof SHORT_LINK_TYPE];
 export type PatternCacheType = (typeof PATTERN_CACHE_TYPE)[keyof typeof PATTERN_CACHE_TYPE];
-export type PatterTagName = Exclude<PatternCacheType, 'shortlink_pattern'>;
-export type AcceptablePattern = Exclude<PatternCacheType, 'shortlink_individual_pattern' | 'shortlink_general_pattern'>;
+export type PatterTagName = Exclude<PatternCacheType, 'shortlink_pattern' | 'unsubscribe_pattern'>;
+export type AcceptablePattern = Exclude<PatternCacheType, 'shortlink_individual_pattern' | 'shortlink_general_pattern' | 'unsubscribe_whatsapp_pattern'>;
 export interface TagDataText extends TagData {
     value: string;
     label: string;
@@ -152,7 +156,13 @@ export interface TagDataShortLink extends Omit<TagDataText, 'type'> {
     type: Extract<TagType, 'shortlink' | 'shortlink_v2'>;
     shortlinkType: ShortLinkType;
 }
-export type TagDataCustomize = TagDataEmoji | TagDataText | TagDataShortLink;
+export interface TagDataUnsubscribe extends Omit<TagDataText, 'type'> {
+    value: string;
+    label: string;
+    id: string;
+    type: Extract<TagType, 'unsubscribe_whatsapp'>;
+}
+export type TagDataCustomize = TagDataEmoji | TagDataText | TagDataShortLink | TagDataUnsubscribe;
 export interface EmojiTag {
     src?: string;
     emoji: string;

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

@@ -47,6 +47,7 @@ export declare const emojiManufacturer: (text: string, collectionType: EmojiColl
 export declare const getEmojiTag: ({ src, emoji, code }: EmojiTag) => string;
 export declare const isPersonalizeTagType: (type: TagType) => boolean;
 export declare const isShortLinkTagType: (type: TagType) => boolean;
+export declare const isUnsubscribeTagType: (type: TagType) => boolean;
 export declare const generateTagContent: (params: {
     tagData: TagDataCustomize;
     content: string;

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

@@ -1,7 +1,7 @@
 // Libraries
 import stringReplaceToArray from 'string-replace-to-array';
 // Constants
-import { EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, READONLY_TAG, SHORT_LINK_V2, TAG_TYPE, } from './constants';
+import { EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, READONLY_TAG, SHORT_LINK_V2, TAG_TYPE, UNSUBSCRIBE_WHATSAPP, } from './constants';
 import { iconsViber } from './iconsViber';
 // Utils
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, patternHandlers, tagRegexStringPattern, } from './patternHandlers';
@@ -402,6 +402,7 @@ export const isPersonalizeTagType = (type) => [
     CONTENT_SOURCE_GROUP,
 ].includes(type);
 export const isShortLinkTagType = (type) => [SHORT_LINK_V2].includes(type);
+export const isUnsubscribeTagType = (type) => [UNSUBSCRIBE_WHATSAPP].includes(type);
 export const generateTagContent = (params) => {
     const { tagData, content } = params;
     let dataAttrsString = '';

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

@@ -0,0 +1,27 @@
+export declare const UNSUBSCRIBE_LIST_TYPE: {
+    readonly EMAIL: "email";
+    readonly PHONE: "phone";
+    readonly WHATSAPP: "whatsapp";
+};
+export declare const UNSUBSCRIBE_LIST_STATUS: {
+    ACTIVE: string;
+    INACTIVE: string;
+};
+export declare const UNSUBSCRIBE_LIST_MESSAGE_ERRORS: {
+    UNAUTHORIZED: string;
+    DISABLED: string;
+};
+export declare const CUSTOM_SEGMENT: {
+    value: string;
+    label: string;
+};
+export declare const LANDING_PAGE_TYPE: {
+    CUSTOM_PAGE: {
+        value: string;
+        label: string;
+    };
+    SPECIFIC_LINK: {
+        value: string;
+        label: string;
+    };
+};

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

@@ -0,0 +1,28 @@
+import { translate, translations } from '@antscorp/antsomi-locales';
+export const UNSUBSCRIBE_LIST_TYPE = {
+    EMAIL: 'email',
+    PHONE: 'phone',
+    WHATSAPP: 'whatsapp',
+};
+export const UNSUBSCRIBE_LIST_STATUS = {
+    ACTIVE: '1',
+    INACTIVE: '2',
+};
+export const UNSUBSCRIBE_LIST_MESSAGE_ERRORS = {
+    UNAUTHORIZED: translate(translations._NOTI_SEGMENT_NO_PERMISSION, 'You do not have permission for this object'),
+    DISABLED: 'This unsubscribed list is disabled',
+};
+export const CUSTOM_SEGMENT = {
+    value: 'customLink',
+    label: translate('', 'Custom link'),
+};
+export const LANDING_PAGE_TYPE = {
+    CUSTOM_PAGE: {
+        value: 'custom-page',
+        label: translate(translations._TITLE_UNSUBSCRIBE_CUSTOM_PAGE, 'Custom page'),
+    },
+    SPECIFIC_LINK: {
+        value: 'specific-link',
+        label: translate(translations._TITLE_UNSUBSCRIBE_SPECIFIC_LINK, 'Specific link'),
+    },
+};

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

@@ -0,0 +1,17 @@
+import { TUnsubscribeSettings, TUnsubscribeType } from '@antscorp/antsomi-ui/es/types';
+import { TUnsubscribePayloadInfo } from '@antscorp/antsomi-ui/es/services/Unsubscribe';
+export type TUnsubscribePreferencesProps = {
+    type: TUnsubscribeType;
+    apiConfig: TUnsubscribePayloadInfo;
+    unsubscribePreferences: TUnsubscribeSettings['unsubscribePreferences'];
+    hideLandingPageType?: boolean;
+    fieldPath?: string;
+    required?: string[];
+    onChange: (unsubscribePreferences: Record<string, any>, payload: TUpdateUnsubscribeSetting[]) => void;
+};
+type TUpdateUnsubscribeSetting = {
+    fieldPath: string;
+    data: string;
+};
+export declare const UnsubscribePreferences: (props: TUnsubscribePreferencesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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;
+}[];