@opexa/portal-components 0.0.947 → 0.0.949

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.
Files changed (51) hide show
  1. package/dist/components/DepositWithdrawal/Deposit/Deposit.js +9 -6
  2. package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts +2 -2
  3. package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts +1 -1
  4. package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.d.ts +1 -0
  5. package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js +2 -1
  6. package/dist/components/Disclaimer/DisclaimerV3.js +2 -2
  7. package/dist/handlers/index.d.ts +2 -2
  8. package/dist/schemas/forgotPasswordSchema.d.ts +4 -4
  9. package/dist/ui/AlertDialog/AlertDialog.d.ts +154 -154
  10. package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +14 -14
  11. package/dist/ui/Badge/Badge.d.ts +12 -12
  12. package/dist/ui/Badge/badge.anatomy.d.ts +1 -1
  13. package/dist/ui/Badge/badge.recipe.d.ts +3 -3
  14. package/dist/ui/Carousel/Carousel.d.ts +72 -72
  15. package/dist/ui/Carousel/carousel.recipe.d.ts +8 -8
  16. package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
  17. package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
  18. package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
  19. package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
  20. package/dist/ui/Collapsible/Collapsible.d.ts +20 -20
  21. package/dist/ui/Collapsible/collapsible.recipe.d.ts +5 -5
  22. package/dist/ui/Combobox/Combobox.d.ts +42 -42
  23. package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
  24. package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
  25. package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
  26. package/dist/ui/Dialog/Dialog.d.ts +33 -33
  27. package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
  28. package/dist/ui/Drawer/Drawer.d.ts +33 -33
  29. package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
  30. package/dist/ui/Menu/Menu.d.ts +198 -198
  31. package/dist/ui/Menu/menu.recipe.d.ts +11 -11
  32. package/dist/ui/Popover/Popover.d.ts +88 -88
  33. package/dist/ui/Popover/popover.recipe.d.ts +8 -8
  34. package/dist/ui/QrCode/QrCode.d.ts +25 -25
  35. package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
  36. package/dist/ui/Select/Select.d.ts +45 -45
  37. package/dist/ui/Select/select.recipe.d.ts +3 -3
  38. package/dist/ui/Table/Table.d.ts +21 -21
  39. package/dist/ui/Table/table.anatomy.d.ts +1 -1
  40. package/dist/ui/Table/table.recipe.d.ts +3 -3
  41. package/dist/ui/Tabs/Tabs.d.ts +15 -15
  42. package/dist/ui/Tabs/tabs.recipe.d.ts +3 -3
  43. package/package.json +1 -1
  44. package/dist/client/hooks/useVerifyMobileNumber.d.ts +0 -3
  45. package/dist/client/hooks/useVerifyMobileNumber.js +0 -20
  46. package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.d.ts +0 -1
  47. package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.js +0 -241
  48. package/dist/components/SingleSignOn/SingleSignOn.d.ts +0 -4
  49. package/dist/components/SingleSignOn/SingleSignOn.js +0 -185
  50. package/dist/components/SingleSignOn/index.d.ts +0 -1
  51. package/dist/components/SingleSignOn/index.js +0 -1
@@ -1,241 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { zodResolver } from '@hookform/resolvers/zod';
3
- import { ObjectId } from '@opexa/object-id';
4
- import Link from 'next/link';
5
- import { useEffect, useState } from 'react';
6
- import { Controller, useForm } from 'react-hook-form';
7
- import invariant from 'tiny-invariant';
8
- import { useBoolean } from 'usehooks-ts';
9
- import { z } from 'zod';
10
- import { useShallow } from 'zustand/shallow';
11
- import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
12
- import { useCreateAurixPayGrabPayDepositMutation } from '../../../../client/hooks/useCreateAurixPayGrabPayDepositMutation.js';
13
- import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
14
- import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
15
- import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
16
- import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
17
- import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
18
- import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
19
- import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
20
- import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
21
- import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
22
- import { RefreshCcw01Icon } from '../../../../icons/RefreshCcw01Icon.js';
23
- import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
24
- import { XIcon } from '../../../../icons/XIcon.js';
25
- import { ObjectType } from '../../../../services/ObjectType.js';
26
- import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
27
- import { Button } from '../../../../ui/Button/index.js';
28
- import { Field } from '../../../../ui/Field/index.js';
29
- import { NumberInput } from '../../../../ui/NumberInput/index.js';
30
- import { Portal } from '../../../../ui/Portal/index.js';
31
- import { getQueryClient } from '../../../../utils/getQueryClient.js';
32
- import { parseDecimal } from '../../../../utils/parseDecimal.js';
33
- import { getDepositsCountQueryKey } from '../../../../utils/queryKeys.js';
34
- import { AmountChoices } from '../../AmountChoices.js';
35
- import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
36
- import { AvailablePromos } from '../AvailablePromos.js';
37
- export function AurixPayGrabPayDeposit() {
38
- const depositWithdrawalProps = useDepositWithdrawalPropsContext();
39
- const disclosure = useDisclosure({
40
- onOpenChange(open) {
41
- if (!open) {
42
- form.reset();
43
- }
44
- },
45
- });
46
- const globalStore = useGlobalStore(useShallow((ctx) => ({
47
- depositWithdrawal: ctx.depositWithdrawal,
48
- kycVerificationStatus: ctx.kycVerificationStatus,
49
- })));
50
- const verificationQuery = useMemberVerificationQuery();
51
- const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
52
- const [status, setStatus] = useState('waiting');
53
- const [errorMessage, setErrorMessage] = useState(null);
54
- const createDepositMutation = useCreateAurixPayGrabPayDepositMutation({
55
- onMutate() {
56
- disclosure.setOpen(true);
57
- setStatus('processing');
58
- },
59
- onSuccess(data) {
60
- const queryClient = getQueryClient();
61
- invariant(data.checkoutUrl);
62
- window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
63
- queryClient.invalidateQueries({
64
- queryKey: getDepositsCountQueryKey(),
65
- });
66
- setStatus('success');
67
- },
68
- onError(data) {
69
- setStatus('failed');
70
- setErrorMessage({
71
- name: data.name,
72
- message: data.message,
73
- });
74
- },
75
- });
76
- const warn = useBoolean();
77
- const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
78
- enabled: !warn.value && status === 'success',
79
- refetchInterval: (ctx) => ctx.state.data?.status === 'CONFIRMED' ||
80
- ctx.state.data?.status === 'REJECTED' ||
81
- ctx.state.data?.status === 'CANCELLED'
82
- ? false
83
- : 1000,
84
- });
85
- useEffect(() => {
86
- if (depositQuery.data?.status === 'CONFIRMED') {
87
- setStatus('confirmed');
88
- return;
89
- }
90
- if (depositQuery.data?.status === 'REJECTED' ||
91
- depositQuery.data?.status === 'CANCELLED') {
92
- setStatus('failed');
93
- return;
94
- }
95
- }, [depositQuery.data?.status]);
96
- const depositsCountQuery = useDepositsCountQuery();
97
- const depositsCount = depositsCountQuery.data ?? 0;
98
- const paymentSettingsQuery = usePaymentSettingsQuery();
99
- const paymentSettings = paymentSettingsQuery.data;
100
- const gatewaySettings = paymentSettings?.aioGCashDepositGatewaySettings;
101
- const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
102
- const minimumAmount = depositsCount <= 0
103
- ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
104
- : parseDecimal(gatewaySettings?.minimumAmount, 0);
105
- const promosQuery = useAvailablePromosQuery();
106
- const promos = promosQuery.data ?? [];
107
- const definition = z
108
- .object({
109
- amount: z.string().superRefine((val, ctx) => {
110
- const n = parseDecimal(val, 0);
111
- if (n < minimumAmount) {
112
- ctx.addIssue({
113
- type: 'number',
114
- code: z.ZodIssueCode.too_small,
115
- inclusive: true,
116
- minimum: minimumAmount,
117
- message: `Please enter ${minimumAmount.toLocaleString()} or more to proceed with your deposit.`,
118
- });
119
- }
120
- if (n > maximumAmount) {
121
- ctx.addIssue({
122
- type: 'number',
123
- code: z.ZodIssueCode.too_big,
124
- inclusive: true,
125
- maximum: maximumAmount,
126
- message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
127
- });
128
- }
129
- }),
130
- promo: z.string().optional().nullable(),
131
- accountNumber: z
132
- .string()
133
- .min(1, 'Account number is required')
134
- .min(8, 'Account number must be 8 or more characters')
135
- .max(32, 'Account number must not be more than 32 characters'),
136
- })
137
- .superRefine((value, ctx) => {
138
- const promo = promos.find((o) => o.id === value.promo);
139
- const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
140
- const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
141
- const amount = parseDecimal(value.amount, 0);
142
- if (promo && amount < promoMinAmount) {
143
- ctx.addIssue({
144
- path: ['amount'],
145
- code: z.ZodIssueCode.custom,
146
- message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
147
- });
148
- }
149
- if (promo && amount > promoMaxAmount) {
150
- ctx.addIssue({
151
- path: ['amount'],
152
- code: z.ZodIssueCode.custom,
153
- message: `Maximum amount for this promo is ${promoMaxAmount}`,
154
- });
155
- }
156
- });
157
- const form = useForm({
158
- mode: 'all',
159
- resolver: zodResolver(definition),
160
- defaultValues: {
161
- amount: '0',
162
- promo: globalStore.depositWithdrawal.promo ?? null,
163
- accountNumber: '',
164
- },
165
- });
166
- useEffect(() => {
167
- if (minimumAmount) {
168
- form.reset({
169
- amount: minimumAmount.toString(),
170
- promo: form.getValues('promo') ?? null,
171
- accountNumber: form.getValues('accountNumber') ?? '',
172
- });
173
- }
174
- }, [form, minimumAmount]);
175
- const redirectUrl = (() => {
176
- const path = depositWithdrawalProps.depositSuccessPageUrl ?? '/deposits/:id/status';
177
- const origin = window.location.origin.includes('localhost')
178
- ? 'https://uat.powerplay.ph' +
179
- depositWithdrawalProps.depositSuccessPageUrl
180
- : window.location.origin;
181
- return `${origin}${path}`;
182
- })();
183
- return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
184
- if (!depositWithdrawalProps.bypassDepositKycCheck &&
185
- (verificationStatus === 'PENDING' ||
186
- verificationStatus === 'UNVERIFIED' ||
187
- verificationStatus === 'REJECTED' ||
188
- verificationStatus === 'CREATED')) {
189
- globalStore.kycVerificationStatus.setOpen(true);
190
- return;
191
- }
192
- else {
193
- const id = ObjectId.generate(ObjectType.Deposit).toString();
194
- createDepositMutation.reset();
195
- createDepositMutation.mutate({
196
- id,
197
- amount: data.amount.toString(),
198
- promo: data.promo ?? undefined,
199
- redirectUrl: redirectUrl.replace(':id', id),
200
- accountNumber: data.accountNumber,
201
- });
202
- }
203
- }), noValidate: true, children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, children: [_jsx(Field.Label, { children: "Account number" }), _jsx(Field.Input, { ...form.register('accountNumber') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.message })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-lg", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
204
- o.field.onChange(details.value);
205
- }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to deposit" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
206
- form.setValue('amount', value.toString(), {
207
- shouldTouch: true,
208
- shouldDirty: true,
209
- shouldValidate: true,
210
- });
211
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
212
- o.field.onChange(value);
213
- globalStore.depositWithdrawal.setPromo(null);
214
- }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), _jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["By depositing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: disclosure.open, onOpenChange: (details) => {
215
- disclosure.setOpen(details.open);
216
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
217
- setStatus('waiting');
218
- setErrorMessage(null);
219
- form.reset();
220
- warn.setFalse();
221
- }, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.Context, { children: (api) => (_jsx("button", { type: "button", className: "absolute top-2.5 right-2.5 flex icon:size-6 size-11 items-center justify-center text-text-quinary", onClick: () => {
222
- if (status === 'success' && !warn.value) {
223
- warn.setTrue();
224
- }
225
- else {
226
- api.setOpen(false);
227
- }
228
- }, children: _jsx(XIcon, {}) })) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && !warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-featured-icon-light-brand", children: _jsx(RefreshCcw01Icon, {}) })), status === 'success' && warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) })), status === 'confirmed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' &&
229
- !warn.value &&
230
- 'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && errorMessage?.name] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
231
- "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
232
- !warn.value &&
233
- 'Sometimes the payment pop up doesn’t appear right away. Don’t worry, just click the button below to reopen it and continue your deposit.', status === 'success' &&
234
- warn.value &&
235
- 'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
236
- 'Your deposit has been successfully processed.', status === 'failed' && errorMessage?.message] })] }), (status === 'failed' ||
237
- status === 'success' ||
238
- status === 'confirmed') && (_jsxs(AlertDialog.Footer, { children: [status === 'success' && !warn.value && (_jsx(Button, { asChild: true, children: _jsx("a", { href: createDepositMutation.data?.checkoutUrl ?? '', target: "_blank", rel: "noopener noreferrer", children: "Try Again" }) })), status === 'success' && warn.value && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => {
239
- warn.setFalse();
240
- }, children: "Go back" }), _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Continue" })) })] })), status !== 'success' && (_jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Ok" })) }))] }))] }) })] }) })] }));
241
- }
@@ -1,4 +0,0 @@
1
- export declare function SingleSignOn(): import("react/jsx-runtime").JSX.Element | null;
2
- export declare function VerifyMobileNumber({ onClose }: {
3
- onClose?: () => void;
4
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,185 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { zodResolver } from '@hookform/resolvers/zod';
4
- import Image from 'next/image';
5
- import { useParams, useRouter, useSearchParams } from 'next/navigation';
6
- import { useEffect, useRef, useState } from 'react';
7
- import { Controller, useForm } from 'react-hook-form';
8
- import z from 'zod';
9
- import { useCooldown } from '../../client/hooks/useCooldown.js';
10
- import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
11
- import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
12
- import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
13
- import { useSignInSSOMutation } from '../../client/hooks/useSignInSSOMutation.js';
14
- import { useVerifyMobileNumber } from '../../client/hooks/useVerifyMobileNumber.js';
15
- import { toaster } from '../../client/utils/toaster.js';
16
- import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
17
- import cinePopLogo from '../../images/cinepop-logo.png';
18
- import dearUtolLogo from '../../images/dear-utol-logo.png';
19
- import inplayLogo from '../../images/inplay-logo.png';
20
- import lightBg from '../../images/light-bg.png';
21
- import mariasDiary from '../../images/marias-diary-logo.png';
22
- import secretConfessionsLogo from '../../images/secret-confessions-logo.png';
23
- import { Button } from '../../ui/Button/index.js';
24
- import { Dialog } from '../../ui/Dialog/index.js';
25
- import { Field } from '../../ui/Field/index.js';
26
- import { PinInput } from '../../ui/PinInput/index.js';
27
- import { Portal } from '../../ui/Portal/index.js';
28
- export function SingleSignOn() {
29
- const params = useParams();
30
- const searchParams = useSearchParams();
31
- const router = useRouter();
32
- const partnerId = params.partnerId;
33
- const token = searchParams.get('token');
34
- const [isSsoOpen, setIsSsoOpen] = useState(true);
35
- const [showVerifyDialog, setShowVerifyDialog] = useState(false);
36
- const ssoMutation = useSignInSSOMutation({
37
- onSuccess: () => {
38
- toaster.success({
39
- description: 'Account created successfully',
40
- });
41
- setIsSsoOpen(false);
42
- setShowVerifyDialog(true);
43
- },
44
- onError: () => {
45
- toaster.error({
46
- description: 'Account creation failed',
47
- });
48
- setIsSsoOpen(false);
49
- router.push('/');
50
- },
51
- });
52
- // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to trigger the mutation when the URL parameters change.
53
- useEffect(() => {
54
- // Trigger SSO login when component mounts
55
- if (partnerId && token && !ssoMutation.isPending) {
56
- ssoMutation.mutate({ partnerId, token });
57
- }
58
- }, [partnerId, token]);
59
- if (ssoMutation.isPending) {
60
- return (_jsx(Dialog.Root, { open: isSsoOpen, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center", children: _jsxs(Dialog.Content, { className: "flex h-[333px] w-[375px] flex-col items-center space-y-4 bg-[#111827] p-6 text-center", style: {
61
- backgroundImage: `url(${lightBg.src})`,
62
- }, children: [_jsx(Image, { src: inplayLogo, alt: "inplay logo", width: 82, height: 34, className: "h-auto w-[82px]" }), _jsx("div", { className: "mb-4 h-7 w-7 animate-spin rounded-full border-4 border-[#101730] border-t-[#F05027]" }), _jsx("div", { className: "text-[#CECFD2] text-sm", children: "We\u2019re creating an account for you..." }), _jsx("div", { className: "text-[#CECFD2] text-sm", children: "In the meantime, you can watch your favorite series on CinePop!" }), _jsxs("div", { className: "pt-3", children: [_jsx(Image, { src: cinePopLogo, alt: "cine poplogo", width: 151, height: 24, className: "mx-auto mb-2 h-auto w-[151px]" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { src: secretConfessionsLogo, alt: "secret confessions logo", width: 104, height: 53, className: "h-auto w-[104px]" }), _jsx(Image, { src: dearUtolLogo, alt: "dear utol logo", width: 105, height: 53, className: "h-auto w-[105px]" }), _jsx(Image, { src: mariasDiary, alt: "maria's diary logo", width: 104, height: 53, className: "h-auto w-[104px]" })] })] })] }) })] }) }));
63
- }
64
- if (showVerifyDialog) {
65
- return (_jsx(VerifyMobileNumber, { onClose: () => {
66
- setShowVerifyDialog(false);
67
- router.push('/');
68
- } }));
69
- }
70
- return null;
71
- }
72
- export function VerifyMobileNumber({ onClose }) {
73
- const [step, setStep] = useState(1);
74
- const sendVerificationCodeMutation = useSendVerificationCodeMutation({
75
- onSuccess: () => {
76
- setStep(2);
77
- cooldown.start();
78
- },
79
- onError: (err) => {
80
- toaster.error({
81
- title: 'Sign In Failed',
82
- description: err.message,
83
- });
84
- },
85
- });
86
- const verifyMobileNumberMutation = useVerifyMobileNumber({
87
- onSuccess: async () => {
88
- step1Form.reset();
89
- step2Form.reset();
90
- setStep(1);
91
- toaster.success({
92
- title: 'Verification Successful',
93
- description: 'Your mobile number has been verified.',
94
- });
95
- onClose?.();
96
- },
97
- onError: (err) => {
98
- const errorMessage = err.name === 'Forbidden'
99
- ? 'Please enter the correct verification code'
100
- : err.message;
101
- toaster.error({
102
- title: 'Sign In Failed',
103
- description: errorMessage,
104
- });
105
- },
106
- });
107
- const localeInfo = useLocaleInfo();
108
- const mobileNumberParser = useMobileNumberParser();
109
- const Step1Definition = z.object({
110
- mobileNumber: z
111
- .string()
112
- .min(1, 'Mobile number is required')
113
- .superRefine((v, ctx) => {
114
- if (!mobileNumberParser.validate(v)) {
115
- ctx.addIssue({
116
- code: z.ZodIssueCode.custom,
117
- message: 'Invalid mobile number',
118
- });
119
- }
120
- }),
121
- });
122
- const Step2Definition = z.object({
123
- verificationCode: z.array(z.string()).superRefine((val, ctx) => {
124
- if (val.length !== 6 || val.some((v) => v.length !== 1)) {
125
- ctx.addIssue({
126
- code: z.ZodIssueCode.custom,
127
- message: 'Please enter your 6-digit verification code.',
128
- });
129
- }
130
- }),
131
- });
132
- const step1Form = useForm({
133
- resolver: zodResolver(Step1Definition),
134
- defaultValues: {
135
- mobileNumber: '',
136
- },
137
- });
138
- const step2Form = useForm({
139
- resolver: zodResolver(Step2Definition),
140
- defaultValues: {
141
- verificationCode: Array.from({ length: 6 }).fill(''),
142
- },
143
- });
144
- const cooldown = useCooldown({
145
- max: 60,
146
- duration: 1000 * 60,
147
- });
148
- const formRef = useRef(null);
149
- return (_jsx(Dialog.Root, { open: true, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center", children: _jsxs(Dialog.Content, { className: "flex w-[375px] flex-col items-center space-y-4 rounded-xl bg-[#111827] p-6 text-center", style: {
150
- backgroundImage: `url(${lightBg.src})`,
151
- }, children: [_jsx(Image, { src: inplayLogo, alt: "inplay logo", width: 82, height: 34, className: "h-auto w-[82px]" }), _jsxs("div", { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "font-bold text-sm", children: ["Get ", _jsx("span", { className: "text-[#F05127]", children: "\u20B150 Bonus" }), " when you verify your account and play."] }), _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
152
- sendVerificationCodeMutation.mutateAsync({
153
- channel: 'SMS',
154
- recipient: mobileNumberParser.format(data.mobileNumber),
155
- strict: true,
156
- });
157
- }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, className: "text-left", children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode }) }), _jsx(Field.Input, { style: {
158
- paddingLeft: `calc(1.25rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
159
- }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Send Code" })] })] })), 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 text-[#F05127]", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: formRef, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
160
- verifyMobileNumberMutation.mutateAsync({
161
- verificationCode: verificationCode.join(''),
162
- });
163
- }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", onKeyDown: (e) => {
164
- if (e.key === 'Backspace') {
165
- step2Form.reset();
166
- }
167
- }, value: o.field.value, onValueChange: (details) => {
168
- o.field.onChange(details.value);
169
- o.field.onBlur();
170
- }, otp: true, onValueComplete: () => {
171
- formRef.current?.requestSubmit();
172
- }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-4 flex w-full items-center justify-center gap-xs text-xs", children: [_jsx("span", { className: "text-[#9CA3AF]", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-[#C084FC]", disabled: cooldown.cooling, onClick: async () => {
173
- await sendVerificationCodeMutation.mutateAsync({
174
- channel: 'SMS',
175
- recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
176
- });
177
- cooldown.start();
178
- }, children: cooldown.cooling
179
- ? `Resend in ${cooldown.countdown}s`
180
- : 'Resend' })] }), _jsx("button", { type: "button", className: "absolute top-0 left-6 mx-auto mt-3xl flex h-8 w-8 items-center gap-1 rounded-full bg-[#1f2638] font-semibold text-sm text-text-tertiary-600", onClick: () => {
181
- setStep(1);
182
- step2Form.reset();
183
- cooldown.stop();
184
- }, children: _jsx(ArrowLeftIcon, { className: "mx-auto size-5" }) })] })] }))] })] }) })] }) }));
185
- }
@@ -1 +0,0 @@
1
- export * from './SingleSignOn';
@@ -1 +0,0 @@
1
- export * from './SingleSignOn.js';