🆙 Init V3

src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx

@@ -0,0 +1,22 @@
+import { NotificationAlertItem, NotificationAlertType } from '../../../../api';
+import { NitroSystemAlertView } from './NitroSystemAlertView';
+import { NotificationDefaultAlertView } from './NotificationDefaultAlertView';
+import { NotificationSeachAlertView } from './NotificationSearchAlertView';
+
+export const GetAlertLayout = (item: NotificationAlertItem, onClose: () => void) =>
+{
+    if(!item) return null;
+
+    const key = item.id;
+    const props = { item, onClose };
+
+    switch(item.alertType)
+    {
+        case NotificationAlertType.NITRO:
+            return <NitroSystemAlertView key={key} {...props} />;
+        case NotificationAlertType.SEARCH:
+            return <NotificationSeachAlertView key={key} {...props} />;
+        default:
+            return <NotificationDefaultAlertView key={key} {...props} />;
+    }
+};

src/components/notification-center/views/alert-layouts/NitroSystemAlertView.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+import { GetRendererVersion, GetUIVersion, NotificationAlertItem } from '../../../../api';
+import { Button, Column, Grid, LayoutNotificationAlertView, LayoutNotificationAlertViewProps, Text } from '../../../../common';
+
+interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewProps
+{
+    item: NotificationAlertItem;
+}
+
+export const NitroSystemAlertView: FC<NotificationDefaultAlertViewProps> = props =>
+{
+    const { title = 'Nitro', onClose = null, ...rest } = props;
+
+    return (
+        <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest }>
+            <Grid>
+                <Column size={ 12 }>
+                    <Column alignItems="center" gap={ 0 }>
+                        <Text bold fontSize={ 4 }>Nitro React</Text>
+                        <Text>v{ GetUIVersion() }</Text>
+                    </Column>
+                    <Column alignItems="center">
+                        <Text><b>Renderer:</b> v{ GetRendererVersion() }</Text>
+                        <Column fullWidth gap={ 1 }>
+                            <Button fullWidth variant="success" onClick={ event => window.open('https://discord.nitrodev.co') }>Discord</Button>
+                        </Column>
+                    </Column>
+					<div className="alertView_nitro-coolui-logo"></div>
+					<Column size={ 12 }>
+						<Column alignItems="center" gap={ 0 }>
+							<Text center bold fontSize={ 5 }>Cool UI</Text>
+							<Text>- DuckieTM (Design)</Text>
+							<Text center bold small>v3.0.0</Text>
+							<Button fullWidth onClick={ event => window.open('https://github.com/duckietm/Nitro-Cool-UI') }>Cool UI Git</Button>
+						</Column>
+					</Column>
+                </Column>
+			
+            </Grid>
+        </LayoutNotificationAlertView>
+    );
+};

src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx

@@ -0,0 +1,56 @@
+import { FC, useState } from 'react';
+import { LocalizeText, NotificationAlertItem, NotificationAlertType, OpenUrl } from '../../../../api';
+import { Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
+
+interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewProps
+{
+    item: NotificationAlertItem;
+}
+
+export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps> = props =>
+{
+    const { item = null, title = ((props.item && props.item.title) || ''), onClose = null, ...rest } = props;
+    const [ imageFailed, setImageFailed ] = useState<boolean>(false);
+
+    const visitUrl = () =>
+    {
+        OpenUrl(item.clickUrl);
+
+        onClose();
+    };
+
+    const hasFrank = (item.alertType === NotificationAlertType.DEFAULT);
+
+    return (
+        <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
+            <Flex fullHeight gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 } overflow="auto">
+                { hasFrank && !item.imageUrl && <div className="notification-frank flex-shrink-0" /> }
+                { item.imageUrl && !imageFailed && <img alt={ item.title } className="align-self-baseline" src={ item.imageUrl } onError={ () =>
+                {
+                    setImageFailed(true);
+                } } /> }
+                <div className={ [ 'notification-text overflow-y-auto flex flex-col w-full', (item.clickUrl && !hasFrank) ? 'justify-center' : '' ].join(' ') }>
+                    { (item.messages.length > 0) && item.messages.map((message, index) =>
+                    {
+                        const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
+
+                        return <div key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
+                    }) }
+                    { item.clickUrl && (item.clickUrl.length > 0) && (item.imageUrl && !imageFailed) && <>
+                        <hr className="my-2 w-full" />
+                        <Button className="align-self-center px-3" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button>
+                    </> }
+                </div>
+            </Flex>
+            { (!item.imageUrl || (item.imageUrl && imageFailed)) && <>
+                <Column center alignItems="center" gap={ 0 }>
+                    <hr className="my-2 w-full" />
+                    { !item.clickUrl &&
+                        <Button onClick={ onClose }>{ LocalizeText('generic.close') }</Button> }
+                    { item.clickUrl && (item.clickUrl.length > 0) && <Button onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
+                </Column>
+            </> }
+        </LayoutNotificationAlertView>
+    );
+
+};

src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx

@@ -0,0 +1,62 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, NotificationAlertItem, OpenUrl } from '../../../../api';
+import { AutoGrid, Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
+import { NitroInput } from '../../../../layout';
+
+interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewProps
+{
+    item: NotificationAlertItem;
+}
+
+export const NotificationSeachAlertView: FC<NotificationDefaultAlertViewProps> = props =>
+{
+    const { item = null, title = ((props.item && props.item.title) || ''), onClose = null, ...rest } = props;
+
+    const [ searchValue, setSearchValue ] = useState('');
+    const [ results, setResults ] = useState<string[]>([]);
+
+    const visitUrl = () =>
+    {
+        OpenUrl(item.clickUrl);
+
+        onClose();
+    };
+
+    const updateSearchValue = (value: string) =>
+    {
+        let res = JSON.parse(item.messages[0]);
+
+        setResults(res.filter((val: string) => val.includes(value)));
+        setSearchValue(value);
+    };
+
+    useEffect(() =>
+    {
+        setResults(JSON.parse(item.messages[0]));
+    }, [ item ]);
+
+    const isAction = (item.clickUrl && item.clickUrl.startsWith('event:'));
+
+    return (
+        <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest }>
+            <Flex fullWidth alignItems="center" position="relative">
+                <NitroInput placeholder={ LocalizeText('generic.search') } type="text" value={ searchValue } onChange={ event => updateSearchValue(event.target.value) } />
+            </Flex>
+            <Column fullHeight className="py-1" overflow="hidden">
+                <AutoGrid columnCount={ 1 } gap={ 1 }>
+                    { results && results.map((n, index) =>
+                    {
+                        return <span key={ index }>{ n }</span>;
+                    }) }
+                </AutoGrid>
+            </Column>
+            <hr className="my-2" />
+            <Column center alignItems="center" gap={ 1 }>
+                { !isAction && !item.clickUrl &&
+                    <Button onClick={ onClose }>{ LocalizeText('generic.close') }</Button> }
+                { item.clickUrl && (item.clickUrl.length > 0) &&
+                    <Button onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
+            </Column>
+        </LayoutNotificationAlertView>
+    );
+};

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>
+    );
+};

src/components/notification-center/views/confirm-layouts/GetConfirmLayout.tsx

@@ -0,0 +1,15 @@
+import { NotificationConfirmItem } from '../../../../api';
+import { NotificationDefaultConfirmView } from './NotificationDefaultConfirmView';
+
+export const GetConfirmLayout = (item: NotificationConfirmItem, onClose: () => void) =>
+{
+    if(!item) return null;
+
+    const props = { key: item.id, item, onClose };
+
+    switch(item.confirmType)
+    {
+        default:
+            return <NotificationDefaultConfirmView { ...props } />;
+    }
+};

src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { NotificationAlertType, NotificationConfirmItem } from '../../../../api';
+import { Button, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps, Text } from '../../../../common';
+
+export interface NotificationDefaultConfirmViewProps extends LayoutNotificationAlertViewProps
+{
+    item: NotificationConfirmItem;
+}
+
+export const NotificationDefaultConfirmView: FC<NotificationDefaultConfirmViewProps> = props =>
+{
+    const { item = null, onClose = null, ...rest } = props;
+    const { message = null, onConfirm = null, onCancel = null, confirmText = null, cancelText = null, title = null } = item;
+
+    const confirm = () =>
+    {
+        if(onConfirm) onConfirm();
+
+        onClose();
+    };
+
+    const cancel = () =>
+    {
+        if(onCancel) onCancel();
+
+        onClose();
+    };
+
+    return (
+        <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ NotificationAlertType.ALERT }>
+            <Flex center grow>
+                <Text>{ message }</Text>
+            </Flex>
+            <div className="flex gap-1">
+                <Button fullWidth variant="danger" onClick={ cancel }>{ cancelText }</Button>
+                <Button fullWidth onClick={ confirm }>{ confirmText }</Button>
+            </div>
+        </LayoutNotificationAlertView>
+    );
+};