@opexa/portal-components 0.0.392 → 0.0.394
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 +1 -3
- package/dist/components/GameProviders/GameProvidersList.d.ts +3 -0
- package/dist/components/GameProviders/GameProvidersList.js +1 -1
- package/dist/components/Games/GamesList.client.d.ts +3 -0
- package/dist/components/Games/GamesList.client.js +2 -1
- package/dist/components/GamesSearch/GamesSearch.d.ts +1 -0
- package/dist/components/GamesSearch/GamesSearch.js +1 -1
- package/dist/components/Search/Search.lazy.d.ts +1 -0
- package/dist/components/Search/Search.lazy.js +1 -1
- package/dist/components/SignIn/MobileNumberSignIn.js +1 -3
- package/dist/components/SignIn/NameAndPasswordSignIn.js +1 -3
- package/package.json +1 -1
|
@@ -12,7 +12,6 @@ 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';
|
|
16
15
|
import { useGoogleClientIdQuery } from '../../client/hooks/useGoogleClientIdQuery.js';
|
|
17
16
|
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
18
17
|
import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
|
|
@@ -161,10 +160,9 @@ function ContactInfo() {
|
|
|
161
160
|
function SSO({ google, facebook }) {
|
|
162
161
|
const googleClientIdQuery = useGoogleClientIdQuery({ enabled: !!google });
|
|
163
162
|
const googleClientId = googleClientIdQuery.data;
|
|
164
|
-
const featureFlag = useFeatureFlag();
|
|
165
163
|
if (!facebook && !google)
|
|
166
164
|
return null;
|
|
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 &&
|
|
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, {})] })] }));
|
|
168
166
|
}
|
|
169
167
|
const LinkFacebookAccount = () => {
|
|
170
168
|
const accountQuery = useAccountQuery();
|
|
@@ -27,5 +27,5 @@ export function GameProvidersList(props) {
|
|
|
27
27
|
? { root: props.className }
|
|
28
28
|
: (props.className ?? {});
|
|
29
29
|
const chunked = useChunk(gameProviders, 18);
|
|
30
|
-
return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Providers' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: chunked.loadedItems.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('flex h-full w-full items-center overflow-hidden rounded-md bg-brand-800 lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: chunked.totalItems, value: chunked.totalLoadedItems, onValueChange: noop, className:
|
|
30
|
+
return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Providers' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: chunked.loadedItems.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('flex h-full w-full items-center overflow-hidden rounded-md bg-brand-800 lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: chunked.totalItems, value: chunked.totalLoadedItems, onValueChange: noop, className: twMerge('w-[12.5rem]', classNames.progressRoot), children: _jsx(Progress.Track, { className: twMerge('bg-bg-tertiary', classNames.progressTrack), children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "mt-md text-button-tertiary-fg text-sm", children: `Displaying ${chunked.totalLoadedItems} of ${chunked.totalItems}` }), chunked.hasNext && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: chunked.next, className: twMerge('mt-lg', classNames.loadMoreButton), children: "Load More" }))] })] }));
|
|
31
31
|
}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { isString, noop } from 'lodash-es';
|
|
4
4
|
import Link from 'next/link';
|
|
5
|
+
import { twMerge } from 'tailwind-merge';
|
|
5
6
|
import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
|
|
6
7
|
import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
|
|
7
8
|
import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
|
|
@@ -27,5 +28,5 @@ export function GamesList__client(props) {
|
|
|
27
28
|
: 'No game is currently available. Please check back later', className: "mt-lg" })), totalRows >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, className: {
|
|
28
29
|
root: classNames.thumbnailRoot,
|
|
29
30
|
title: classNames.thumbnailTitle,
|
|
30
|
-
} }) }, game.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className:
|
|
31
|
+
} }) }, game.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: twMerge('w-[12.5rem]', classNames.progressRoot), children: _jsx(Progress.Track, { className: twMerge('bg-bg-tertiary', classNames.progressTrack), children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "mt-md text-button-tertiary-fg text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: twMerge('mt-lg', classNames.loadMoreButton), children: "Load More" }))] })] }))] }));
|
|
31
32
|
}
|
|
@@ -49,7 +49,7 @@ export function GamesSearch(props) {
|
|
|
49
49
|
}, className: twMerge('block w-full shadow-sm', classNames.thumbnailRoot), children: [_jsx(Image, { src: getGameImageUrl({
|
|
50
50
|
reference: game.reference,
|
|
51
51
|
provider: game.provider,
|
|
52
|
-
}), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('block w-full truncate rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', classNames.thumbnailTitle), children: game.name })] }, game.id))) })) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className:
|
|
52
|
+
}), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('block w-full truncate rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', classNames.thumbnailTitle), children: game.name })] }, game.id))) })) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-4xl w-fit', classNames.loadMoreButton), onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })) })] })) }) })] }) }));
|
|
53
53
|
}
|
|
54
54
|
function Alert({ message }) {
|
|
55
55
|
return (_jsxs("div", { className: "py-lg", role: "alert", "aria-live": "polite", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-lg border border-border-primary bg-bg-secondary shadow-xs", children: _jsx(SearchLgIcon, { className: "size-6 text-text-secondary-700" }) }), _jsx("p", { className: "mt-4 text-center text-text-secondary-700", children: message })] }));
|
|
@@ -82,7 +82,7 @@ export function Search(props) {
|
|
|
82
82
|
}, children: [_jsx(Image, { src: getGameImageUrl({
|
|
83
83
|
reference: game.reference,
|
|
84
84
|
provider: game.provider,
|
|
85
|
-
}), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('block w-full truncate rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', classNames.gameThumbnailTitle), children: game.name })] }, game.id))) })] })), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className:
|
|
85
|
+
}), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('block w-full truncate rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', classNames.gameThumbnailTitle), children: game.name })] }, game.id))) })] })), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-12 w-fit', classNames.loadMoreButton), onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })] }) })] }) }));
|
|
86
86
|
}
|
|
87
87
|
function DebouncedInput(props) {
|
|
88
88
|
const [value, setValue] = useControllableState({
|
|
@@ -9,7 +9,6 @@ import { twMerge } from 'tailwind-merge';
|
|
|
9
9
|
import { z } from 'zod';
|
|
10
10
|
import { useShallow } from 'zustand/shallow';
|
|
11
11
|
import { useCooldown } from '../../client/hooks/useCooldown.js';
|
|
12
|
-
import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
|
|
13
12
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
14
13
|
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
15
14
|
import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
|
|
@@ -122,7 +121,6 @@ export function MobileNumberSignIn() {
|
|
|
122
121
|
duration: 1000 * 60,
|
|
123
122
|
});
|
|
124
123
|
const form2Ref = useRef(null);
|
|
125
|
-
const featureFlag = useFeatureFlag();
|
|
126
124
|
return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
|
|
127
125
|
sendVerificationCodeMutation.mutateAsync({
|
|
128
126
|
channel: 'SMS',
|
|
@@ -157,7 +155,7 @@ export function MobileNumberSignIn() {
|
|
|
157
155
|
globalStore.responsibleGaming.setNext('SIGN_IN');
|
|
158
156
|
globalStore.signIn.setOpen(false);
|
|
159
157
|
}
|
|
160
|
-
}, 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: twMerge('mt-3xl text-center text-sm', signInProps.className?.publicPlayProhibitionRoot), children: ["Prohibition to play in open and public places", _jsxs("div", { className: twMerge('mx-auto mt-5 flex h-13 w-fit items-center justify-center gap-3xl rounded-[60px] bg-[#1D0201] px-5 py-2', signInProps.className?.publicPlayProhibitionLogoContainer), children: [_jsx(Image, { src: signInProps.pagcorLogo ?? pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-10 w-auto" }), _jsx(Image, { src: signInProps.responsibleGamingLogo ?? 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 &&
|
|
158
|
+
}, 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: twMerge('mt-3xl text-center text-sm', signInProps.className?.publicPlayProhibitionRoot), children: ["Prohibition to play in open and public places", _jsxs("div", { className: twMerge('mx-auto mt-5 flex h-13 w-fit items-center justify-center gap-3xl rounded-[60px] bg-[#1D0201] px-5 py-2', signInProps.className?.publicPlayProhibitionLogoContainer), children: [_jsx(Image, { src: signInProps.pagcorLogo ?? pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-10 w-auto" }), _jsx(Image, { src: signInProps.responsibleGamingLogo ?? 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: () => {
|
|
161
159
|
globalStore.signIn.setOpen(false);
|
|
162
160
|
globalStore.signUp.setOpen(true);
|
|
163
161
|
}, 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 }) => {
|
|
@@ -9,7 +9,6 @@ import { twMerge } from 'tailwind-merge';
|
|
|
9
9
|
import { z } from 'zod';
|
|
10
10
|
import { useShallow } from 'zustand/shallow';
|
|
11
11
|
import { useAuthenticateMutation } from '../../client/hooks/useAuthenticateMutation.js';
|
|
12
|
-
import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
|
|
13
12
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
14
13
|
import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
|
|
15
14
|
import { toaster } from '../../client/utils/toaster.js';
|
|
@@ -121,7 +120,6 @@ export function NameAndPasswordSignIn() {
|
|
|
121
120
|
])
|
|
122
121
|
.parse(signInMutation.data.secretQuestion)
|
|
123
122
|
: null;
|
|
124
|
-
const featureFlag = useFeatureFlag();
|
|
125
123
|
return (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
|
|
126
124
|
if (!signInMutation.data) {
|
|
127
125
|
signInMutation.mutateAsync({
|
|
@@ -171,7 +169,7 @@ export function NameAndPasswordSignIn() {
|
|
|
171
169
|
globalStore.responsibleGaming.setNext('SIGN_IN');
|
|
172
170
|
globalStore.signIn.setOpen(false);
|
|
173
171
|
}
|
|
174
|
-
}, 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: twMerge('mt-3xl text-center text-sm', signInProps.className?.publicPlayProhibitionRoot), children: ["Prohibition to play in open and public places", _jsxs("div", { className: twMerge('mx-auto mt-5 flex h-13 w-fit items-center justify-center gap-3xl rounded-[60px] bg-[#1D0201] px-5 py-2', signInProps.className?.publicPlayProhibitionLogoContainer), children: [_jsx(Image, { src: signInProps.pagcorLogo ?? pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-10 w-auto" }), _jsx(Image, { src: signInProps.responsibleGamingLogo ?? 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 &&
|
|
172
|
+
}, 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: twMerge('mt-3xl text-center text-sm', signInProps.className?.publicPlayProhibitionRoot), children: ["Prohibition to play in open and public places", _jsxs("div", { className: twMerge('mx-auto mt-5 flex h-13 w-fit items-center justify-center gap-3xl rounded-[60px] bg-[#1D0201] px-5 py-2', signInProps.className?.publicPlayProhibitionLogoContainer), children: [_jsx(Image, { src: signInProps.pagcorLogo ?? pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-10 w-auto" }), _jsx(Image, { src: signInProps.responsibleGamingLogo ?? 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: () => {
|
|
175
173
|
dialog.setOpen(false);
|
|
176
174
|
globalStore.signUp.setOpen(true);
|
|
177
175
|
}, children: "Sign up" })] })] }));
|