@opexa/portal-components 0.0.361 → 0.0.363
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AccountInfo/AccountInfo.js +3 -1
- package/dist/components/Jackpots/Jackpots.d.ts +1 -1
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarousel.d.ts +11 -0
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarousel.js +1 -1
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.d.ts +12 -1
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.js +9 -2
- package/dist/components/Jackpots/JackpotsList/JackpotsList.d.ts +11 -0
- package/dist/components/Jackpots/JackpotsList/JackpotsList.js +1 -1
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemDesktop.d.ts +12 -1
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemDesktop.js +9 -2
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemMobile.d.ts +12 -1
- package/dist/components/Jackpots/JackpotsList/JackpotsListItemMobile.js +10 -3
- package/dist/components/SignIn/MobileNumberSignIn.js +3 -1
- package/dist/icons/StarIcon.d.ts +3 -2
- package/dist/icons/StarIcon.js +6 -3
- package/dist/images/close-chest-bstar.png +0 -0
- package/dist/images/open-chest-bstar.png +0 -0
- package/package.json +1 -1
|
@@ -12,6 +12,7 @@ import { z } from 'zod';
|
|
|
12
12
|
import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
|
|
13
13
|
import { useDisclosure } from '../../client/hooks/useDisclosure.js';
|
|
14
14
|
import { useFacebookClientQuery } from '../../client/hooks/useFacebookClientQuery.js';
|
|
15
|
+
import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
|
|
15
16
|
import { useGoogleClientIdQuery } from '../../client/hooks/useGoogleClientIdQuery.js';
|
|
16
17
|
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
17
18
|
import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
|
|
@@ -160,9 +161,10 @@ function ContactInfo() {
|
|
|
160
161
|
function SSO({ google, facebook }) {
|
|
161
162
|
const googleClientIdQuery = useGoogleClientIdQuery({ enabled: !!google });
|
|
162
163
|
const googleClientId = googleClientIdQuery.data;
|
|
164
|
+
const featureFlag = useFeatureFlag();
|
|
163
165
|
if (!facebook && !google)
|
|
164
166
|
return null;
|
|
165
|
-
return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Account Connections" }), _jsxs("div", { className: "mt-5 flex flex-col gap-2 rounded-xl border border-border-secondary bg-bg-primary-alt px-4 py-5 shadow-xs", children: [googleClientId && google && (_jsx(GoogleOAuthProvider, { clientId: googleClientId, children: _jsx(LinkGoogleAccount, {}) })), facebook && _jsx(LinkFacebookAccount, {})] })] }));
|
|
167
|
+
return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Account Connections" }), _jsxs("div", { className: "mt-5 flex flex-col gap-2 rounded-xl border border-border-secondary bg-bg-primary-alt px-4 py-5 shadow-xs", children: [googleClientId && google && (_jsx(GoogleOAuthProvider, { clientId: googleClientId, children: _jsx(LinkGoogleAccount, {}) })), facebook && featureFlag.enabled && _jsx(LinkFacebookAccount, {})] })] }));
|
|
166
168
|
}
|
|
167
169
|
const LinkFacebookAccount = () => {
|
|
168
170
|
const accountQuery = useAccountQuery();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type JackpotsCarouselProps } from './JackpotsCarousel/JackpotsCarousel';
|
|
2
2
|
import { type JackpotsListProps } from './JackpotsList/JackpotsList';
|
|
3
|
-
export type JackpotsProps = JackpotsCarouselProps | JackpotsListProps;
|
|
3
|
+
export type JackpotsProps = (JackpotsCarouselProps | JackpotsListProps);
|
|
4
4
|
export declare function Jackpots(props: JackpotsProps): Promise<import("react/jsx-runtime").JSX.Element>;
|
|
@@ -16,6 +16,17 @@ export interface JackpotsCarouselProps {
|
|
|
16
16
|
className?: string | ClassNameEntries;
|
|
17
17
|
style?: CSSProperties | StyleEntries;
|
|
18
18
|
animate?: boolean;
|
|
19
|
+
customJackpotChestImage?: {
|
|
20
|
+
image: {
|
|
21
|
+
open: string;
|
|
22
|
+
closed: string;
|
|
23
|
+
};
|
|
24
|
+
style?: {
|
|
25
|
+
wrapper?: string;
|
|
26
|
+
image?: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
jackpotProfileShape?: 'oval' | 'star';
|
|
19
30
|
}
|
|
20
31
|
export declare function JackpotsCarousel({ style, className, ...props }: JackpotsCarouselProps): import("react/jsx-runtime").JSX.Element | null;
|
|
21
32
|
export {};
|
|
@@ -64,5 +64,5 @@ export function JackpotsCarousel({ style, className, ...props }) {
|
|
|
64
64
|
const classNames = isString(className)
|
|
65
65
|
? { root: className }
|
|
66
66
|
: (className ?? {});
|
|
67
|
-
return (_jsxs("div", { style: styles.root, className: classNames.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-semibold text-lg", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/jackpots', className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: jackpots.map((jackpot) => (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: _jsx(JackpotsCarouselItem, { style: styles.itemRoot, className: classNames.itemRoot, viewAllUrl: props.viewAllUrl, animate: props.animate }) }, jackpot.id))) }) })] }));
|
|
67
|
+
return (_jsxs("div", { style: styles.root, className: classNames.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-semibold text-lg", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/jackpots', className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: jackpots.map((jackpot) => (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: _jsx(JackpotsCarouselItem, { style: styles.itemRoot, className: classNames.itemRoot, viewAllUrl: props.viewAllUrl, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape }) }, jackpot.id))) }) })] }));
|
|
68
68
|
}
|
|
@@ -4,6 +4,17 @@ export interface JackpotsCarouselItemProps {
|
|
|
4
4
|
className?: string;
|
|
5
5
|
/** @default "/jackpots" */
|
|
6
6
|
viewAllUrl?: string;
|
|
7
|
+
customJackpotChestImage?: {
|
|
8
|
+
image: {
|
|
9
|
+
open: string;
|
|
10
|
+
closed: string;
|
|
11
|
+
};
|
|
12
|
+
style?: {
|
|
13
|
+
wrapper?: string;
|
|
14
|
+
image?: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
7
17
|
animate?: boolean;
|
|
18
|
+
jackpotProfileShape?: 'oval' | 'star';
|
|
8
19
|
}
|
|
9
|
-
export declare function JackpotsCarouselItem({ style, className, viewAllUrl, animate, }: JackpotsCarouselItemProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare function JackpotsCarouselItem({ style, className, viewAllUrl, animate, customJackpotChestImage, jackpotProfileShape, }: JackpotsCarouselItemProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -12,6 +12,7 @@ import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
|
|
|
12
12
|
import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
|
|
13
13
|
import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
|
|
14
14
|
import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
|
|
15
|
+
import { StarIcon } from '../../../icons/StarIcon.js';
|
|
15
16
|
import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
|
|
16
17
|
import { User01Icon } from '../../../icons/User01Icon.js';
|
|
17
18
|
import closeChest from '../../../images/close-chest.png';
|
|
@@ -25,7 +26,7 @@ import { mask } from '../../../utils/mask.js';
|
|
|
25
26
|
import { parseDecimal } from '../../../utils/parseDecimal.js';
|
|
26
27
|
import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
|
|
27
28
|
import styles from './JackpotsCarouselItem.module.css';
|
|
28
|
-
export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = true, }) {
|
|
29
|
+
export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', }) {
|
|
29
30
|
const jackpot = useJackpotsCarouselItemContext();
|
|
30
31
|
const jackpotPayoutsQuery = useJackpotPayoutsQuery({
|
|
31
32
|
first: 30,
|
|
@@ -86,7 +87,13 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
|
|
|
86
87
|
currency: localeInfo.currency.code,
|
|
87
88
|
minDecimalPlaces: 2,
|
|
88
89
|
maxDecimalPlaces: 2,
|
|
89
|
-
}) })] }), _jsx("div", { className: "hidden min-w-25 lg:block" }), _jsx("div", { className:
|
|
90
|
+
}) })] }), _jsx("div", { className: "hidden min-w-25 lg:block" }), _jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-25 lg:absolute', customJackpotChestImage?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: customJackpotChestImage?.image
|
|
91
|
+
? isPayingOut
|
|
92
|
+
? customJackpotChestImage.image.open
|
|
93
|
+
: customJackpotChestImage.image.closed
|
|
94
|
+
: isPayingOut
|
|
95
|
+
? openChest
|
|
96
|
+
: closeChest, alt: "closeChest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', customJackpotChestImage?.style?.image) }) })] }), latestJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [jackpotProfileShape === 'oval' ? (_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsxs("div", { className: "absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: [latestJackpotPayout.multiplier, "x"] })] })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" }), _jsxs("div", { className: "-right-0 absolute bottom-0 z-20 flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 text-center font-bold text-brand-950 text-xs", children: [latestJackpotPayout.multiplier, "x"] })] })), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent Payout"] }), _jsx("div", { className: "font-semibold", children: mask(latestJackpotPayout.member.name, {
|
|
90
97
|
totalCharsCount: 6,
|
|
91
98
|
}) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(latestJackpotPayout.amount, {
|
|
92
99
|
currency: localeInfo.currency.code,
|
|
@@ -31,6 +31,17 @@ export interface JackpotsListProps {
|
|
|
31
31
|
*/
|
|
32
32
|
viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
|
|
33
33
|
animate?: boolean;
|
|
34
|
+
customJackpotChestImage?: {
|
|
35
|
+
image: {
|
|
36
|
+
open: string;
|
|
37
|
+
closed: string;
|
|
38
|
+
};
|
|
39
|
+
style?: {
|
|
40
|
+
wrapper?: string;
|
|
41
|
+
image?: string;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
jackpotProfileShape?: 'oval' | 'star';
|
|
34
45
|
}
|
|
35
46
|
export declare function JackpotsList(props: JackpotsListProps): import("react/jsx-runtime").JSX.Element;
|
|
36
47
|
export {};
|
|
@@ -31,5 +31,5 @@ export function JackpotsList(props) {
|
|
|
31
31
|
const classNames = isString(props.className)
|
|
32
32
|
? { root: props.className }
|
|
33
33
|
: (props.className ?? {});
|
|
34
|
-
return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { style: styles.root, className: classNames.root, children: [_jsx("div", { className: "mb-3 font-semibold text-lg lg:mb-4.5", children: props.heading ?? 'Jackpots' }), jackpots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemDesktop, { style: styles.itemRoot, className: classNames.itemRoot, animate: props.animate }) }, jackpot.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemMobile, { style: styles.itemRoot, className: classNames.itemRoot, animate: props.animate }) }, jackpot.id))) })] })) : (_jsxs("div", { className: 'mt-5 flex h-fit flex-col items-center justify-center lg:mt-0 lg:h-62', children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsxs("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: ["No ", props.heading ?? 'Jackpots'] }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'jackpots', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
|
|
34
|
+
return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { style: styles.root, className: classNames.root, children: [_jsx("div", { className: "mb-3 font-semibold text-lg lg:mb-4.5", children: props.heading ?? 'Jackpots' }), jackpots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemDesktop, { style: styles.itemRoot, className: classNames.itemRoot, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape }) }, jackpot.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemMobile, { style: styles.itemRoot, className: classNames.itemRoot, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape }) }, jackpot.id))) })] })) : (_jsxs("div", { className: 'mt-5 flex h-fit flex-col items-center justify-center lg:mt-0 lg:h-62', children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsxs("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: ["No ", props.heading ?? 'Jackpots'] }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'jackpots', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
|
|
35
35
|
}
|
|
@@ -3,6 +3,17 @@ interface JackpotsListItemDesktopProps {
|
|
|
3
3
|
className?: string;
|
|
4
4
|
style?: CSSProperties;
|
|
5
5
|
animate?: boolean;
|
|
6
|
+
customJackpotChestImage?: {
|
|
7
|
+
image: {
|
|
8
|
+
open: string;
|
|
9
|
+
closed: string;
|
|
10
|
+
};
|
|
11
|
+
style?: {
|
|
12
|
+
wrapper?: string;
|
|
13
|
+
image?: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
jackpotProfileShape?: 'oval' | 'star';
|
|
6
17
|
}
|
|
7
|
-
export declare function JackpotsListItemDesktop({ animate, ...props }: JackpotsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function JackpotsListItemDesktop({ animate, customJackpotChestImage, jackpotProfileShape, ...props }: JackpotsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
|
|
8
19
|
export {};
|
|
@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
|
|
|
6
6
|
import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
|
|
7
7
|
import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
|
|
8
8
|
import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
|
|
9
|
+
import { StarIcon } from '../../../icons/StarIcon.js';
|
|
9
10
|
import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
|
|
10
11
|
import { User01Icon } from '../../../icons/User01Icon.js';
|
|
11
12
|
import closeChest from '../../../images/close-chest.png';
|
|
@@ -22,14 +23,20 @@ import styles from './JackpotsListItem.module.css';
|
|
|
22
23
|
import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
|
|
23
24
|
import { JackpotsListItemRules } from './JackpotsListItemRules.js';
|
|
24
25
|
import { useJackpotsListItemData } from './useJackpotsListItemData.js';
|
|
25
|
-
export function JackpotsListItemDesktop({ animate = true, ...props }) {
|
|
26
|
+
export function JackpotsListItemDesktop({ animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', ...props }) {
|
|
26
27
|
const jackpot = useJackpotsListItemContext();
|
|
27
28
|
const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
|
|
28
29
|
return (_jsxs("div", { className: twMerge('rounded-2xl border border-border-primary bg-bg-tertiary', props.className), children: [_jsxs("div", { style: props.style, className: twMerge('relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5'), children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx("span", { className: "full size-1.5 animate-pulse rounded bg-utility-success-500" }), "Paying Out"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "Accumulating"] })), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: "mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl", children: formatNumber(jackpotAmount, {
|
|
29
30
|
currency: localeInfo.currency.code,
|
|
30
31
|
minDecimalPlaces: 2,
|
|
31
32
|
maxDecimalPlaces: 2,
|
|
32
|
-
}) })] }), _jsx("div", { className: "min-w-30" }), _jsx("div", { className:
|
|
33
|
+
}) })] }), _jsx("div", { className: "min-w-30" }), _jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-30 lg:absolute', customJackpotChestImage?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: customJackpotChestImage?.image
|
|
34
|
+
? isPayingOut
|
|
35
|
+
? customJackpotChestImage.image.open
|
|
36
|
+
: customJackpotChestImage.image.closed
|
|
37
|
+
: isPayingOut
|
|
38
|
+
? openChest
|
|
39
|
+
: closeChest, alt: "closeChest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', customJackpotChestImage?.style?.image) }) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [jackpotProfileShape === 'oval' ? (_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsxs("div", { className: "absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" }), _jsxs("div", { className: "-right-0 absolute bottom-0 z-20 flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 text-center font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] })), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent Payout"] }), _jsx("div", { className: "font-semibold", children: mask(topJackpotPayout.member.name, {
|
|
33
40
|
totalCharsCount: 6,
|
|
34
41
|
}) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(topJackpotPayout.amount, {
|
|
35
42
|
currency: localeInfo.currency.code,
|
|
@@ -3,6 +3,17 @@ interface JackpotsListItemMobileProps {
|
|
|
3
3
|
className?: string;
|
|
4
4
|
style?: CSSProperties;
|
|
5
5
|
animate?: boolean;
|
|
6
|
+
customJackpotChestImage?: {
|
|
7
|
+
image: {
|
|
8
|
+
open: string;
|
|
9
|
+
closed: string;
|
|
10
|
+
};
|
|
11
|
+
style?: {
|
|
12
|
+
wrapper?: string;
|
|
13
|
+
image?: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
jackpotProfileShape?: 'oval' | 'star';
|
|
6
17
|
}
|
|
7
|
-
export declare function JackpotsListItemMobile({ animate, ...props }: JackpotsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function JackpotsListItemMobile({ animate, customJackpotChestImage, jackpotProfileShape, ...props }: JackpotsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
|
|
8
19
|
export {};
|
|
@@ -9,6 +9,7 @@ import { ArrowNarrowUpIcon } from '../../../icons/ArrowNarrowUpIcon.js';
|
|
|
9
9
|
import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
|
|
10
10
|
import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
|
|
11
11
|
import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
|
|
12
|
+
import { StarIcon } from '../../../icons/StarIcon.js';
|
|
12
13
|
import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
|
|
13
14
|
import { User01Icon } from '../../../icons/User01Icon.js';
|
|
14
15
|
import closeChest from '../../../images/close-chest.png';
|
|
@@ -25,7 +26,7 @@ import styles from './JackpotsListItem.module.css';
|
|
|
25
26
|
import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
|
|
26
27
|
import { JackpotsListItemRules } from './JackpotsListItemRules.js';
|
|
27
28
|
import { useJackpotsListItemData } from './useJackpotsListItemData.js';
|
|
28
|
-
export function JackpotsListItemMobile({ animate = true, ...props }) {
|
|
29
|
+
export function JackpotsListItemMobile({ animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', ...props }) {
|
|
29
30
|
const jackpot = useJackpotsListItemContext();
|
|
30
31
|
const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
|
|
31
32
|
const [isDetailsVisible, setIsDetailsVisible] = useState(false);
|
|
@@ -57,7 +58,13 @@ export function JackpotsListItemMobile({ animate = true, ...props }) {
|
|
|
57
58
|
currency: localeInfo.currency.code,
|
|
58
59
|
minDecimalPlaces: 2,
|
|
59
60
|
maxDecimalPlaces: 2,
|
|
60
|
-
}) })] }), _jsx("div", { className:
|
|
61
|
+
}) })] }), _jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 block min-w-34.5 lg:absolute', customJackpotChestImage?.style?.wrapper), children: _jsx(Image, { width: 100, height: 100, src: customJackpotChestImage?.image
|
|
62
|
+
? isPayingOut
|
|
63
|
+
? customJackpotChestImage.image.open
|
|
64
|
+
: customJackpotChestImage.image.closed
|
|
65
|
+
: isPayingOut
|
|
66
|
+
? openChest
|
|
67
|
+
: closeChest, alt: "closeChest", className: twMerge('size-full h-34.5 w-34.5 p-2 lg:h-37.5 lg:w-37.5', customJackpotChestImage?.style?.image) }) })] }) }) }) }), _jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-1 flex justify-between", children: [_jsx("div", { className: "font-semibold text-text-primary-900 text-xs", children: formatNumber(0, {
|
|
61
68
|
currency: localeInfo.currency.code,
|
|
62
69
|
compact: true,
|
|
63
70
|
}) }), _jsxs("div", { className: "relative flex items-center justify-end gap-1.5", children: [isPayingOut ? (_jsxs("div", { className: "flex w-6 items-center", children: [_jsx("div", { className: twMerge('absolute left-0', styles['animate-arrow-red-flash-1']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-1.5', styles['animate-arrow-red-flash-2']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-3', styles['animate-arrow-red-flash-3']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) })] })) : (_jsxs("div", { className: "flex w-6 items-center", children: [_jsx("div", { className: twMerge('absolute left-0', styles['animate-arrow-green-flash-1']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-1.5', styles['animate-arrow-green-flash-2']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-3', styles['animate-arrow-green-flash-3']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) })] })), _jsx("div", { className: "font-semibold text-text-primary-900 text-xs", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
|
|
@@ -78,7 +85,7 @@ export function JackpotsListItemMobile({ animate = true, ...props }) {
|
|
|
78
85
|
currency: localeInfo.currency.code,
|
|
79
86
|
compact: true,
|
|
80
87
|
})} Play now for your chance to win big! 🔥`
|
|
81
|
-
: getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 flex w-full gap-4 rounded-lg bg-bg-primary p-4", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsxs("div", { className: "absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent Payout"] }), _jsx("div", { className: "font-semibold", children: mask(topJackpotPayout.member.name) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(topJackpotPayout.amount, {
|
|
88
|
+
: getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 flex w-full gap-4 rounded-lg bg-bg-primary p-4", children: [jackpotProfileShape === 'oval' ? (_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsxs("div", { className: "absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" }), _jsxs("div", { className: "-right-0 absolute bottom-0 z-20 flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 text-center font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] })), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent Payout"] }), _jsx("div", { className: "font-semibold", children: mask(topJackpotPayout.member.name) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(topJackpotPayout.amount, {
|
|
82
89
|
currency: localeInfo.currency.code,
|
|
83
90
|
minDecimalPlaces: 2,
|
|
84
91
|
maxDecimalPlaces: 2,
|
|
@@ -8,6 +8,7 @@ import { Controller, useForm } from 'react-hook-form';
|
|
|
8
8
|
import { z } from 'zod';
|
|
9
9
|
import { useShallow } from 'zustand/shallow';
|
|
10
10
|
import { useCooldown } from '../../client/hooks/useCooldown.js';
|
|
11
|
+
import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
|
|
11
12
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
12
13
|
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
13
14
|
import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
|
|
@@ -120,6 +121,7 @@ export function MobileNumberSignIn() {
|
|
|
120
121
|
duration: 1000 * 60,
|
|
121
122
|
});
|
|
122
123
|
const form2Ref = useRef(null);
|
|
124
|
+
const featureFlag = useFeatureFlag();
|
|
123
125
|
return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
|
|
124
126
|
sendVerificationCodeMutation.mutate({
|
|
125
127
|
channel: 'SMS',
|
|
@@ -154,7 +156,7 @@ export function MobileNumberSignIn() {
|
|
|
154
156
|
globalStore.responsibleGaming.setNext('SIGN_IN');
|
|
155
157
|
globalStore.signIn.setOpen(false);
|
|
156
158
|
}
|
|
157
|
-
}, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), signInProps.showPublicPlayProhibition && (_jsxs("div", { className: "mt-3xl text-center text-sm", children: ["Prohibition to play in open and public places", _jsxs("div", { className: "mx-auto mt-5 flex h-13 w-fit items-center justify-center gap-3xl rounded-[60px] bg-[#1D0201] px-5 py-2", children: [_jsx("div", { className: "flex size-5xl items-center justify-center overflow-hidden rounded-full bg-white", children: _jsx(Image, { src: pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-9.5 w-auto object-contain" }) }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-10 w-auto", draggable: false })] })] })), _jsxs("div", { className: "mt-6 flex items-center gap-2", children: [_jsx("div", { className: "h-px flex-grow bg-text-tertiary-600/50" }), _jsx("span", { className: "font-semibold text-sm text-text-tertiary-600", children: "Log in directly with" }), _jsx("div", { className: "h-px flex-grow bg-text-tertiary-600/50" })] }), _jsxs("div", { className: "mt-6", children: [signInProps.googleSso && _jsx(GoogleSignInButton, {}), signInProps.facebookSso && _jsx(FacebookSignInTrigger, {})] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "font-semibold text-button-tertiary-fg", onClick: () => {
|
|
159
|
+
}, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), signInProps.showPublicPlayProhibition && (_jsxs("div", { className: "mt-3xl text-center text-sm", children: ["Prohibition to play in open and public places", _jsxs("div", { className: "mx-auto mt-5 flex h-13 w-fit items-center justify-center gap-3xl rounded-[60px] bg-[#1D0201] px-5 py-2", children: [_jsx("div", { className: "flex size-5xl items-center justify-center overflow-hidden rounded-full bg-white", children: _jsx(Image, { src: pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-9.5 w-auto object-contain" }) }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-10 w-auto", draggable: false })] })] })), _jsxs("div", { className: "mt-6 flex items-center gap-2", children: [_jsx("div", { className: "h-px flex-grow bg-text-tertiary-600/50" }), _jsx("span", { className: "font-semibold text-sm text-text-tertiary-600", children: "Log in directly with" }), _jsx("div", { className: "h-px flex-grow bg-text-tertiary-600/50" })] }), _jsxs("div", { className: "mt-6", children: [signInProps.googleSso && _jsx(GoogleSignInButton, {}), signInProps.facebookSso && featureFlag.enabled && (_jsx(FacebookSignInTrigger, {}))] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "font-semibold text-button-tertiary-fg", onClick: () => {
|
|
158
160
|
globalStore.signIn.setOpen(false);
|
|
159
161
|
globalStore.signUp.setOpen(true);
|
|
160
162
|
}, children: "Sign up" })] })] })), context.step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Check your Phone" }), _jsxs("p", { className: "mt-xs text-center text-sm text-text-secondary-700", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
|
package/dist/icons/StarIcon.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
export declare function StarIcon({ className }: {
|
|
2
|
+
className?: string;
|
|
3
|
+
}): import("react/jsx-runtime").JSX.Element;
|
package/dist/icons/StarIcon.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useId } from 'react';
|
|
4
|
+
export function StarIcon({ className }) {
|
|
5
|
+
const gradientId = useId();
|
|
6
|
+
return (_jsxs("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: "75", height: "72", fill: "none", viewBox: "0 0 75 72", children: [_jsx("path", { fill: "#F7D323", stroke: `url(#${gradientId})`, strokeWidth: "3", strokeLinejoin: "round", d: "M34.139 3.597c1.331-2.704 5.1-2.79 6.586-.252l.136.254 8.744 17.753.348.708.781.113 19.55 2.848c3.071.447 4.307 4.237 2.076 6.417L58.214 45.255l-.564.551.133.776 3.34 19.512c.51 2.984-2.498 5.266-5.18 4.091l-.26-.125-17.485-9.212-.699-.369-.7.37-17.484 9.211c-2.743 1.446-5.966-.886-5.439-3.966l3.34-19.512.133-.776-.564-.55L2.64 31.436c-2.231-2.179-.995-5.97 2.077-6.417l19.549-2.848.78-.113.35-.708 8.743-17.753Z" }), _jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "37.5", x2: "37.5", y1: "0.003", y2: "72.003", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#fac515" }), _jsx("stop", { offset: "1", stopColor: "#fac515" })] }) })] }));
|
|
4
7
|
}
|
|
Binary file
|
|
Binary file
|