@antscorp/antsomi-ui 2.0.107 → 2.0.109

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
@@ -538,21 +538,21 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         }
         const additionalTagAttrs = getAttributesString(additionalAttributes);
-        return `
-        <tag
-          contenteditable='false'
-          spellcheck='false'
-          tabIndex="${settings.a11y.focusableTags ? 0 : -1}"
-          class="${settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
-          ${tagify.getAttributes(tagData)}
-          ${additionalTagAttrs}
-        >
-          ${closeIcon}
-
+        return `
+        <tag
+          contenteditable='false'
+          spellcheck='false'
+          tabIndex="${settings.a11y.focusableTags ? 0 : -1}"
+          class="${settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
+          ${tagify.getAttributes(tagData)}
+          ${additionalTagAttrs}
+        >
+          ${closeIcon}
+
           ${generateTagContent({
             tagData,
             content: visibleTagContent,
-        })}
+        })}
         </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();
@@ -900,44 +911,44 @@ const TagifyInput = forwardRef((props, ref) => {
         if (!tagifyTooltip) {
             const style = document.createElement('style');
             style.type = 'text/css';
-            style.appendChild(document.createTextNode(`
-          .tagify__tooltip {
-            display: none;
-            position: fixed;
-            background-color: #595959;
-            border-radius: 10px;
-            color: #ffffff;
-            padding: 6px;
-            z-index: 10000;
-            max-width: 280px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-          }
-
-          .tagify__tooltip_content {
-            width: 100%;
-            max-width: 250px;
-            height: auto;
-            position: relative;
-            transition: 0s;
-            font-size: 12px;
-            line-height: 16px;
-            text-align: center;
-            word-wrap: break-word;
-            white-space: normal;
-          }
-
-          .tagify__tooltip_content:before {
-            content: '';
-            position: absolute;
-            top: 100%;
-            right: 50%;
-            left: auto;
-            background-color: #595959;
-            width: 10px;
-            height: 10px;
-            transform: rotate(45deg) translate(50%,-50%);
-            border-radius: 1px;
-          }
+            style.appendChild(document.createTextNode(`
+          .tagify__tooltip {
+            display: none;
+            position: fixed;
+            background-color: #595959;
+            border-radius: 10px;
+            color: #ffffff;
+            padding: 6px;
+            z-index: 10000;
+            max-width: 280px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+          }
+
+          .tagify__tooltip_content {
+            width: 100%;
+            max-width: 250px;
+            height: auto;
+            position: relative;
+            transition: 0s;
+            font-size: 12px;
+            line-height: 16px;
+            text-align: center;
+            word-wrap: break-word;
+            white-space: normal;
+          }
+
+          .tagify__tooltip_content:before {
+            content: '';
+            position: absolute;
+            top: 100%;
+            right: 50%;
+            left: auto;
+            background-color: #595959;
+            width: 10px;
+            height: 10px;
+            transform: rotate(45deg) translate(50%,-50%);
+            border-radius: 1px;
+          }
         `));
             document.head.appendChild(style);
             const tooltipWrapper = document.createElement('div');

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/styled.js

@@ -5,49 +5,49 @@ import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { MIN_H_WRAPPER } from './constants';
 // Utils
 import { getBackgroundInputStatus, getTagifyInputStyled, getTagifyStyled, getTagifyTagStyled, } from './utils.style';
-export const WrapperPlaceHolder = styled.div `
+export const WrapperPlaceHolder = styled.div `
   ${({ $isShow }) => $isShow
-    ? css `
-          display: block;
-          float: right;
-          min-height: ${MIN_H_WRAPPER}px;
+    ? css `
+          display: block;
+          float: right;
+          min-height: ${MIN_H_WRAPPER}px;
         `
-    : css `
-          display: none;
-        `};
+    : css `
+          display: none;
+        `};
 `;
-export const TagifyWrapper = styled.div `
-  cursor: text;
-  background: ${globalToken?.bw0};
-  border-bottom: 1px solid ${({ $status }) => getBackgroundInputStatus($status)};
-  min-height: ${MIN_H_WRAPPER}px;
-  width: 100%;
-
-  &::after {
-    content: '';
-    display: block;
-    clear: both;
-  }
-
-  .tagify {
+export const TagifyWrapper = styled.div `
+  cursor: text;
+  background: ${globalToken?.bw0};
+  border-bottom: 1px solid ${({ $status }) => getBackgroundInputStatus($status)};
+  min-height: ${MIN_H_WRAPPER}px;
+  width: 100%;
+
+  &::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  .tagify {
     ${({ $cssTagifyVariables }) => $cssTagifyVariables &&
     Object.entries($cssTagifyVariables)
         .map(([key, value]) => `${key}: ${value};`)
-        .join('\n')}
-
-    // --- Section tagify style ---
-    ${getTagifyStyled}
-
-    // --- Section input style ---
-    &__input {
-      ${getTagifyInputStyled}
-    }
-
-    // --- Section tag style ---
-    &__tag {
-      ${getTagifyTagStyled}
-    }
-  }
+        .join('\n')}
+
+    // --- Section tagify style ---
+    ${getTagifyStyled}
+
+    // --- Section input style ---
+    &__input {
+      ${getTagifyInputStyled}
+    }
+
+    // --- Section tag style ---
+    &__tag {
+      ${getTagifyTagStyled}
+    }
+  }
 `;
 export const TagInput = styled.input ``;
 export const TagTextArea = styled.textarea ``;

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';
@@ -379,15 +379,15 @@ export const emojiManufacturer = (text, collectionType) => {
         return [];
     }
 };
-export const getEmojiTag = ({ src, emoji, code }) => `
-  <img
-    src="${src}"
-    data-emoji="${emoji}"
-    data-emoji-code="${code}"
-    alt="${emoji}"
-    width="16px"
-    height="16px"
-    style="transform: translateY(3.5px); cursor: text;"
+export const getEmojiTag = ({ src, emoji, code }) => `
+  <img
+    src="${src}"
+    data-emoji="${emoji}"
+    data-emoji-code="${code}"
+    alt="${emoji}"
+    width="16px"
+    height="16px"
+    style="transform: translateY(3.5px); cursor: text;"
   />`;
 export const isPersonalizeTagType = (type) => [
     CUSTOMER,
@@ -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 = '';
@@ -418,10 +419,10 @@ export const generateTagContent = (params) => {
     dataAttrs.forEach((value, key) => {
         dataAttrsString = dataAttrsString.concat(` data-${key}="${value}"`);
     });
-    return `
-    <div ${dataAttrsString}>
-      ${content}
-    </div>
+    return `
+    <div ${dataAttrsString}>
+      ${content}
+    </div>
   `;
 };
 /**