🆙 Init V3

src/components/notification-center/views/bubble-layouts/GetBubbleLayout.tsx

@@ -0,0 +1,18 @@
+import { NotificationBubbleItem, NotificationBubbleType } from '../../../../api';
+import { NotificationClubGiftBubbleView } from './NotificationClubGiftBubbleView';
+import { NotificationDefaultBubbleView } from './NotificationDefaultBubbleView';
+
+export const GetBubbleLayout = (item: NotificationBubbleItem, onClose: () => void) =>
+{
+    if(!item) return null;
+
+    const props = { item, onClose };
+
+    switch(item.notificationType)
+    {
+        case NotificationBubbleType.CLUBGIFT:
+            return <NotificationClubGiftBubbleView key={ item.id } { ...props } />;
+        default:
+            return <NotificationDefaultBubbleView key={ item.id } { ...props } />;
+    }
+};

src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { LocalizeText, NotificationBubbleItem, OpenUrl } from '../../../../api';
+import { LayoutCurrencyIcon, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps } from '../../../../common';
+
+export interface NotificationClubGiftBubbleViewProps extends LayoutNotificationBubbleViewProps
+{
+    item: NotificationBubbleItem;
+}
+
+export const NotificationClubGiftBubbleView: FC<NotificationClubGiftBubbleViewProps> = props =>
+{
+    const { item = null, onClose = null, ...rest } = props;
+
+    return (
+        <LayoutNotificationBubbleView className="flex-col nitro-notification-bubble" fadesOut={ false } onClose={ onClose } { ...rest }>
+            <div className="flex items-center gap-2 mb-2">
+                <LayoutCurrencyIcon className="flex-shrink-0" type="hc" />
+                <span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>
+            </div>
+            <div className="flex items-center justify-end gap-2">
+                <button className="btn btn-success w-full btn-sm" type="button" onClick={ () => OpenUrl(item.linkUrl) }>{ LocalizeText('notifications.button.show_gift_list') }</button>
+                <span className="underline cursor-pointer text-nowrap" onClick={ onClose }>{ LocalizeText('notifications.button.later') }</span>
+            </div>
+        </LayoutNotificationBubbleView>
+    );
+};

src/components/notification-center/views/bubble-layouts/NotificationDefaultBubbleView.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { NotificationBubbleItem, OpenUrl } from '../../../../api';
+import { Flex, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps, Text } from '../../../../common';
+
+export interface NotificationDefaultBubbleViewProps extends LayoutNotificationBubbleViewProps
+{
+    item: NotificationBubbleItem;
+}
+
+export const NotificationDefaultBubbleView: FC<NotificationDefaultBubbleViewProps> = props =>
+{
+    const { item = null, onClose = null, ...rest } = props;
+
+    const htmlText = item.message.replace(/\r\n|\r|\n/g, '<br />');
+
+    return (
+        <LayoutNotificationBubbleView alignItems="center" gap={ 2 } onClick={ event => (item.linkUrl && item.linkUrl.length && OpenUrl(item.linkUrl)) } onClose={ onClose } { ...rest }>
+            <Flex center className="w-[50px] h-[50px]">
+                { (item.iconUrl && item.iconUrl.length) &&
+                    <img alt="" className="no-select" src={ item.iconUrl } /> }
+            </Flex>
+            <Text wrap dangerouslySetInnerHTML={ { __html: htmlText } } variant="white" />
+        </LayoutNotificationBubbleView>
+    );
+};