@opexa/portal-components 0.0.870 → 0.0.872

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 (165) hide show
  1. package/dist/client/hooks/useLocaleInfo.d.ts +1 -1
  2. package/dist/client/hooks/useLocaleInfo.js +1 -1
  3. package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts +2 -2
  4. package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts +1 -1
  5. package/dist/components/Jackpots/JackpotsList/useJackpotsListItemData.d.ts +1 -1
  6. package/dist/components/Jackpots/JackpotsListNext/useJackpotsListItemData.d.ts +1 -1
  7. package/dist/components/SignIn/MobileNumberField.d.ts +14 -0
  8. package/dist/components/SignIn/MobileNumberField.js +62 -0
  9. package/dist/components/SignIn/MobileNumberSignInternational.d.ts +1 -0
  10. package/dist/components/SignIn/MobileNumberSignInternational.js +266 -0
  11. package/dist/components/SignIn/SignIn.lazy.d.ts +2 -0
  12. package/dist/components/SignIn/SignInForm.js +5 -2
  13. package/dist/components/SignUp/SignUp.d.ts +2 -1
  14. package/dist/components/SignUp/SignUp.js +7 -0
  15. package/dist/components/SignUp/SignUpCrazyWin/SignUpCrazyWinForm.js +3 -3
  16. package/dist/components/SignUp/SignUpDefault/SignUpDefault.lazy.d.ts +2 -0
  17. package/dist/components/SignUp/SignUpDefault/SignUpDefault.lazy.js +2 -1
  18. package/dist/components/SignUp/SignUpDefault/SignUpDefaultFormInternational.d.ts +1 -0
  19. package/dist/components/SignUp/SignUpDefault/SignUpDefaultFormInternational.js +305 -0
  20. package/dist/components/SignUp/SignUpHappyBingo/SignUpHappyBingo.lazy.d.ts +23 -0
  21. package/dist/components/SignUp/SignUpHappyBingo/SignUpHappyBingo.lazy.js +26 -0
  22. package/dist/components/SignUp/SignUpHappyBingo/SignUpHappyBingoContext.d.ts +6 -0
  23. package/dist/components/SignUp/SignUpHappyBingo/SignUpHappyBingoContext.js +2 -0
  24. package/dist/components/SignUp/SignUpHappyBingo/SignUpHappyBingoForm.d.ts +1 -0
  25. package/dist/components/SignUp/SignUpHappyBingo/SignUpHappyBingoForm.js +345 -0
  26. package/dist/components/Tournaments/TournamentsList/useTournamentListItemData.d.ts +1 -1
  27. package/dist/constants/BranchCodes.d.ts +1 -1
  28. package/dist/constants/BranchCodes.js +1 -1
  29. package/dist/utils/countries/countryCodeParser.d.ts +1 -0
  30. package/dist/utils/countries/countryCodeParser.js +9 -0
  31. package/dist/utils/countries/flags/AlgeriaFlag.d.ts +2 -0
  32. package/dist/utils/countries/flags/AlgeriaFlag.js +3 -0
  33. package/dist/utils/countries/flags/ArubaFlag.d.ts +2 -0
  34. package/dist/utils/countries/flags/ArubaFlag.js +2 -0
  35. package/dist/utils/countries/flags/AustraliaFlag.d.ts +2 -0
  36. package/dist/utils/countries/flags/AustraliaFlag.js +2 -0
  37. package/dist/utils/countries/flags/AustriaFlag.d.ts +2 -0
  38. package/dist/utils/countries/flags/AustriaFlag.js +2 -0
  39. package/dist/utils/countries/flags/BahrainFlag.d.ts +2 -0
  40. package/dist/utils/countries/flags/BahrainFlag.js +2 -0
  41. package/dist/utils/countries/flags/BelgiumFlag.d.ts +2 -0
  42. package/dist/utils/countries/flags/BelgiumFlag.js +2 -0
  43. package/dist/utils/countries/flags/BrazilFlag.d.ts +2 -0
  44. package/dist/utils/countries/flags/BrazilFlag.js +2 -0
  45. package/dist/utils/countries/flags/BruneiFlag.d.ts +2 -0
  46. package/dist/utils/countries/flags/BruneiFlag.js +2 -0
  47. package/dist/utils/countries/flags/CambodiaFlag.d.ts +2 -0
  48. package/dist/utils/countries/flags/CambodiaFlag.js +2 -0
  49. package/dist/utils/countries/flags/CanadaFlag.d.ts +2 -0
  50. package/dist/utils/countries/flags/CanadaFlag.js +2 -0
  51. package/dist/utils/countries/flags/CroatiaFlag.d.ts +2 -0
  52. package/dist/utils/countries/flags/CroatiaFlag.js +2 -0
  53. package/dist/utils/countries/flags/CyprusFlag.d.ts +2 -0
  54. package/dist/utils/countries/flags/CyprusFlag.js +2 -0
  55. package/dist/utils/countries/flags/EgyptFlag.d.ts +2 -0
  56. package/dist/utils/countries/flags/EgyptFlag.js +2 -0
  57. package/dist/utils/countries/flags/FinlandFlag.d.ts +2 -0
  58. package/dist/utils/countries/flags/FinlandFlag.js +2 -0
  59. package/dist/utils/countries/flags/FranceFlag.d.ts +2 -0
  60. package/dist/utils/countries/flags/FranceFlag.js +2 -0
  61. package/dist/utils/countries/flags/GermanyFlag.d.ts +2 -0
  62. package/dist/utils/countries/flags/GermanyFlag.js +2 -0
  63. package/dist/utils/countries/flags/GreeceFlag.d.ts +2 -0
  64. package/dist/utils/countries/flags/GreeceFlag.js +2 -0
  65. package/dist/utils/countries/flags/GuamFlag.d.ts +2 -0
  66. package/dist/utils/countries/flags/GuamFlag.js +2 -0
  67. package/dist/utils/countries/flags/HongKongFlag.d.ts +2 -0
  68. package/dist/utils/countries/flags/HongKongFlag.js +2 -0
  69. package/dist/utils/countries/flags/HungaryFlag.d.ts +2 -0
  70. package/dist/utils/countries/flags/HungaryFlag.js +2 -0
  71. package/dist/utils/countries/flags/IndianFlag.d.ts +2 -0
  72. package/dist/utils/countries/flags/IndianFlag.js +2 -0
  73. package/dist/utils/countries/flags/IndonesianFlag.d.ts +2 -0
  74. package/dist/utils/countries/flags/IndonesianFlag.js +2 -0
  75. package/dist/utils/countries/flags/IraqFlag.d.ts +2 -0
  76. package/dist/utils/countries/flags/IraqFlag.js +2 -0
  77. package/dist/utils/countries/flags/IrelandFlag.d.ts +2 -0
  78. package/dist/utils/countries/flags/IrelandFlag.js +2 -0
  79. package/dist/utils/countries/flags/IsraelFlag.d.ts +2 -0
  80. package/dist/utils/countries/flags/IsraelFlag.js +2 -0
  81. package/dist/utils/countries/flags/ItalyFlag.d.ts +2 -0
  82. package/dist/utils/countries/flags/ItalyFlag.js +2 -0
  83. package/dist/utils/countries/flags/JapanFlag.d.ts +2 -0
  84. package/dist/utils/countries/flags/JapanFlag.js +2 -0
  85. package/dist/utils/countries/flags/JordanFlag.d.ts +2 -0
  86. package/dist/utils/countries/flags/JordanFlag.js +2 -0
  87. package/dist/utils/countries/flags/KuwaitFlag.d.ts +2 -0
  88. package/dist/utils/countries/flags/KuwaitFlag.js +2 -0
  89. package/dist/utils/countries/flags/LatviaFlag.d.ts +2 -0
  90. package/dist/utils/countries/flags/LatviaFlag.js +2 -0
  91. package/dist/utils/countries/flags/LebanonFlag.d.ts +2 -0
  92. package/dist/utils/countries/flags/LebanonFlag.js +2 -0
  93. package/dist/utils/countries/flags/LithuaniaFlag.d.ts +2 -0
  94. package/dist/utils/countries/flags/LithuaniaFlag.js +2 -0
  95. package/dist/utils/countries/flags/LuxembourgFlag.d.ts +2 -0
  96. package/dist/utils/countries/flags/LuxembourgFlag.js +2 -0
  97. package/dist/utils/countries/flags/MacauFlag.d.ts +2 -0
  98. package/dist/utils/countries/flags/MacauFlag.js +2 -0
  99. package/dist/utils/countries/flags/MalaysianFlag.d.ts +2 -0
  100. package/dist/utils/countries/flags/MalaysianFlag.js +2 -0
  101. package/dist/utils/countries/flags/MaltaFlag.d.ts +2 -0
  102. package/dist/utils/countries/flags/MaltaFlag.js +2 -0
  103. package/dist/utils/countries/flags/NetherlandsFlag.d.ts +2 -0
  104. package/dist/utils/countries/flags/NetherlandsFlag.js +2 -0
  105. package/dist/utils/countries/flags/NewZealandFlag.d.ts +2 -0
  106. package/dist/utils/countries/flags/NewZealandFlag.js +2 -0
  107. package/dist/utils/countries/flags/NorthernMarianaIslandsFlag.d.ts +2 -0
  108. package/dist/utils/countries/flags/NorthernMarianaIslandsFlag.js +2 -0
  109. package/dist/utils/countries/flags/NorwayFlag.d.ts +2 -0
  110. package/dist/utils/countries/flags/NorwayFlag.js +2 -0
  111. package/dist/utils/countries/flags/OmanFlag.d.ts +2 -0
  112. package/dist/utils/countries/flags/OmanFlag.js +2 -0
  113. package/dist/utils/countries/flags/PhilippineFlag.d.ts +2 -0
  114. package/dist/utils/countries/flags/PhilippineFlag.js +2 -0
  115. package/dist/utils/countries/flags/PolandFlag.d.ts +2 -0
  116. package/dist/utils/countries/flags/PolandFlag.js +2 -0
  117. package/dist/utils/countries/flags/PortugalFlag.d.ts +2 -0
  118. package/dist/utils/countries/flags/PortugalFlag.js +2 -0
  119. package/dist/utils/countries/flags/QatarFlag.d.ts +2 -0
  120. package/dist/utils/countries/flags/QatarFlag.js +2 -0
  121. package/dist/utils/countries/flags/RomaniaFlag.d.ts +2 -0
  122. package/dist/utils/countries/flags/RomaniaFlag.js +2 -0
  123. package/dist/utils/countries/flags/SaoTomeAndPrincipeFlag.d.ts +2 -0
  124. package/dist/utils/countries/flags/SaoTomeAndPrincipeFlag.js +2 -0
  125. package/dist/utils/countries/flags/SaudiArabiaFlag.d.ts +2 -0
  126. package/dist/utils/countries/flags/SaudiArabiaFlag.js +2 -0
  127. package/dist/utils/countries/flags/SingaporeFlag.d.ts +2 -0
  128. package/dist/utils/countries/flags/SingaporeFlag.js +2 -0
  129. package/dist/utils/countries/flags/SlovakiaFlag.d.ts +2 -0
  130. package/dist/utils/countries/flags/SlovakiaFlag.js +2 -0
  131. package/dist/utils/countries/flags/SouthKoreaFlag.d.ts +2 -0
  132. package/dist/utils/countries/flags/SouthKoreaFlag.js +2 -0
  133. package/dist/utils/countries/flags/SpainFlag.d.ts +2 -0
  134. package/dist/utils/countries/flags/SpainFlag.js +2 -0
  135. package/dist/utils/countries/flags/SwedenFlag.d.ts +2 -0
  136. package/dist/utils/countries/flags/SwedenFlag.js +2 -0
  137. package/dist/utils/countries/flags/SwitzerlandFlag.d.ts +2 -0
  138. package/dist/utils/countries/flags/SwitzerlandFlag.js +2 -0
  139. package/dist/utils/countries/flags/TaiwanFlag.d.ts +2 -0
  140. package/dist/utils/countries/flags/TaiwanFlag.js +2 -0
  141. package/dist/utils/countries/flags/TanzaniaFlag.d.ts +2 -0
  142. package/dist/utils/countries/flags/TanzaniaFlag.js +2 -0
  143. package/dist/utils/countries/flags/TrinidadAndTobagoFlag.d.ts +2 -0
  144. package/dist/utils/countries/flags/TrinidadAndTobagoFlag.js +2 -0
  145. package/dist/utils/countries/flags/TurkiyeFlag.d.ts +2 -0
  146. package/dist/utils/countries/flags/TurkiyeFlag.js +2 -0
  147. package/dist/utils/countries/flags/UnitedArabEmiratesFlag.d.ts +2 -0
  148. package/dist/utils/countries/flags/UnitedArabEmiratesFlag.js +2 -0
  149. package/dist/utils/countries/flags/UnitedKingdomFlag.d.ts +2 -0
  150. package/dist/utils/countries/flags/UnitedKingdomFlag.js +2 -0
  151. package/dist/utils/countries/flags/UnitedStatesFlag.d.ts +2 -0
  152. package/dist/utils/countries/flags/UnitedStatesFlag.js +2 -0
  153. package/dist/utils/countries/flags/UzbekistanFlag.d.ts +2 -0
  154. package/dist/utils/countries/flags/UzbekistanFlag.js +2 -0
  155. package/dist/utils/countries/flags/VietnameseFlag.d.ts +2 -0
  156. package/dist/utils/countries/flags/VietnameseFlag.js +2 -0
  157. package/dist/utils/countries/flags/index.d.ts +63 -0
  158. package/dist/utils/countries/flags/index.js +63 -0
  159. package/dist/utils/countries/getAllCountries.d.ts +24 -0
  160. package/dist/utils/countries/getAllCountries.js +296 -0
  161. package/dist/utils/countries/getLocaleInfo.d.ts +2 -0
  162. package/dist/utils/countries/getLocaleInfo.js +1154 -0
  163. package/dist/utils/countries/types.d.ts +79 -0
  164. package/dist/utils/countries/types.js +1 -0
  165. package/package.json +1 -1
@@ -0,0 +1,305 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import { createListCollection } from '@ark-ui/react';
4
+ import { zodResolver } from '@hookform/resolvers/zod';
5
+ import { ObjectId } from '@opexa/object-id';
6
+ import { differenceInYears, format } from 'date-fns';
7
+ import Image from 'next/image';
8
+ import { useRouter, useSearchParams } from 'next/navigation';
9
+ import { useRef, useState } from 'react';
10
+ import { Controller, useForm } from 'react-hook-form';
11
+ import { twMerge } from 'tailwind-merge';
12
+ import { z } from 'zod';
13
+ import { useShallow } from 'zustand/shallow';
14
+ import { useCooldown } from '../../../client/hooks/useCooldown.js';
15
+ import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
16
+ import { useSendVerificationCodeMutation } from '../../../client/hooks/useSendVerificationCodeMutation.js';
17
+ import { useSignInMutation } from '../../../client/hooks/useSignInMutation.js';
18
+ import { useSignUpMutation } from '../../../client/hooks/useSignUpMutation.js';
19
+ import { toaster } from '../../../client/utils/toaster.js';
20
+ import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
21
+ import { CheckIcon } from '../../../icons/CheckIcon.js';
22
+ import { ChevronDownIcon } from '../../../icons/ChevronDownIcon.js';
23
+ import { HelpCircleIcon } from '../../../icons/HelpCircleIcon.js';
24
+ import pagcorLogo from '../../../images/pagcor-round-icon.png';
25
+ import responsibleGamingLogo from '../../../images/responsible-gaming-gold.png';
26
+ import { ObjectType } from '../../../services/ObjectType.js';
27
+ import { Button } from '../../../ui/Button/index.js';
28
+ import { Checkbox } from '../../../ui/Checkbox/index.js';
29
+ import { Field } from '../../../ui/Field/index.js';
30
+ import { PinInput } from '../../../ui/PinInput/index.js';
31
+ import { Select } from '../../../ui/Select/index.js';
32
+ import { Tooltip } from '../../../ui/Tooltip/index.js';
33
+ import { countryCodeParser } from '../../../utils/countries/countryCodeParser.js';
34
+ import { createPoll } from '../../../utils/createPoll.js';
35
+ import DateOfBirthField from '../../DateOfBirthField.js';
36
+ import { MobileNumberField } from '../../SignIn/MobileNumberField.js';
37
+ import { useSignUpDefaultPropsContext } from './SignUpDefaultContext.js';
38
+ export function SignUpDefaultFormInternational() {
39
+ const signUpProps = useSignUpDefaultPropsContext();
40
+ const [areaCode, setAreaCode] = useState('');
41
+ const branchCollection = createListCollection({
42
+ items: signUpProps.branches ?? [],
43
+ itemToValue: (item) => item.code,
44
+ itemToString: (item) => {
45
+ const name = (item.name ?? '').trim();
46
+ return name ? `${item.code} - ${name}` : item.code;
47
+ },
48
+ });
49
+ const [step, setStep] = useState(1);
50
+ const router = useRouter();
51
+ const globalStore = useGlobalStore(useShallow((ctx) => ({
52
+ kycReminder: ctx.kycReminder,
53
+ signIn: ctx.signIn,
54
+ signUp: ctx.signUp,
55
+ termsAndConditions: ctx.termsAndConditions,
56
+ responsibleGaming: ctx.responsibleGaming,
57
+ kyc: ctx.kyc,
58
+ })));
59
+ const search = useSearchParams();
60
+ const signUpMutation = useSignUpMutation();
61
+ const signInMutation = useSignInMutation();
62
+ const sendVerificationCodeMutation = useSendVerificationCodeMutation();
63
+ const firstNameBaseSchema = z
64
+ .string()
65
+ .regex(/^[a-z ]+$/gi, 'First name must contain only letters')
66
+ .transform((val) => val.trim())
67
+ .refine((val) => val.length >= 2, {
68
+ message: 'First name must be 2 or more characters',
69
+ })
70
+ .refine((val) => val.length <= 50, {
71
+ message: 'First name must not be more than 50 characters',
72
+ });
73
+ const lastNameBaseSchema = z
74
+ .string()
75
+ .regex(/^[a-z ]+$/gi, 'Last name must contain only letters')
76
+ .transform((val) => val.trim())
77
+ .refine((val) => val.length >= 2, {
78
+ message: 'Last name must be 2 or more characters',
79
+ })
80
+ .refine((val) => val.length <= 50, {
81
+ message: 'Last name must not be more than 50 characters',
82
+ });
83
+ const birthdateBaseSchema = z
84
+ .date({
85
+ invalid_type_error: 'Date of birth is required',
86
+ required_error: 'Date of birth is required',
87
+ })
88
+ .superRefine((val, ctx) => {
89
+ const now = new Date();
90
+ const age = differenceInYears(now, val);
91
+ if (age < 21) {
92
+ return ctx.addIssue({
93
+ code: z.ZodIssueCode.custom,
94
+ message: 'You must be at least 21 years old',
95
+ });
96
+ }
97
+ });
98
+ const Step1Definition = z.object({
99
+ mobileNumber: z.string().min(1, 'Mobile number is required'),
100
+ termsAccepted: z.boolean().superRefine((v, ctx) => {
101
+ if (!v) {
102
+ ctx.addIssue({
103
+ code: z.ZodIssueCode.custom,
104
+ message: 'You must accept the terms and conditions and the responsible gaming guidelines',
105
+ });
106
+ }
107
+ }),
108
+ firstName: signUpProps.basicSignUp
109
+ ? z.string().optional()
110
+ : firstNameBaseSchema,
111
+ lastName: signUpProps.basicSignUp
112
+ ? z.string().optional()
113
+ : lastNameBaseSchema,
114
+ birthDay: signUpProps.basicSignUp
115
+ ? z.date().optional()
116
+ : birthdateBaseSchema,
117
+ branchCode: !signUpProps.basicSignUp && (signUpProps?.branches ?? []).length > 0
118
+ ? z.string().min(1, 'Branch is required').trim()
119
+ : z.string().optional(),
120
+ });
121
+ const Step2Definition = z.object({
122
+ verificationCode: z.array(z.string()).superRefine((val, ctx) => {
123
+ if (val.length !== 6 || val.some((v) => v.length !== 1)) {
124
+ ctx.addIssue({
125
+ code: z.ZodIssueCode.custom,
126
+ message: 'Please enter your 6-digit verification code.',
127
+ });
128
+ }
129
+ }),
130
+ });
131
+ const step1Form = useForm({
132
+ mode: 'all',
133
+ resolver: zodResolver(Step1Definition),
134
+ defaultValues: {
135
+ firstName: '',
136
+ lastName: '',
137
+ mobileNumber: '',
138
+ branchCode: signUpProps?.branches?.length
139
+ ? signUpProps.branches[0]?.code
140
+ : '',
141
+ termsAccepted: globalStore.responsibleGaming.accepted &&
142
+ globalStore.termsAndConditions.accepted
143
+ ? true
144
+ : false,
145
+ },
146
+ });
147
+ const step2Form = useForm({
148
+ resolver: zodResolver(Step2Definition),
149
+ defaultValues: {
150
+ verificationCode: Array.from({ length: 6 }).fill(''),
151
+ },
152
+ });
153
+ const cooldown = useCooldown({
154
+ max: 60,
155
+ duration: 1000 * 60,
156
+ });
157
+ const form2Ref = useRef(null);
158
+ const birthDay = step1Form.watch('birthDay');
159
+ const branchCode = step1Form.watch('branchCode', '');
160
+ return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Create an account" }), _jsx("p", { className: "mt-xs text-center text-sm text-text-secondary-700", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", autoComplete: "off", onSubmit: step1Form.handleSubmit(async (data) => {
161
+ try {
162
+ await sendVerificationCodeMutation.mutateAsync({
163
+ channel: 'SMS',
164
+ recipient: countryCodeParser(areaCode, data.mobileNumber),
165
+ });
166
+ setStep(2);
167
+ cooldown.start();
168
+ }
169
+ catch (e) {
170
+ toaster.error({
171
+ description: e instanceof Error
172
+ ? e.message
173
+ : 'Failed to send verification code',
174
+ });
175
+ }
176
+ }), children: [_jsx(MobileNumberField, { setAreaCode: setAreaCode, enabledCountries: signUpProps.enabledCountries || [], mobileNumber: step1Form.watch('mobileNumber'), onMobileNumberChange: (val) => step1Form.setValue('mobileNumber', val), error: step1Form.formState.errors.mobileNumber?.message }), !signUpProps.basicSignUp && (_jsxs(_Fragment, { children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.firstName, className: "mt-xl", children: [_jsx(Field.Label, { children: "First Name" }), _jsx(Field.Input, { placeholder: "Enter your first name", ...step1Form.register('firstName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.firstName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.lastName, className: "mt-xl", children: [_jsx(Field.Label, { children: "Last Name" }), _jsx(Field.Input, { placeholder: "Enter your last name", ...step1Form.register('lastName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.lastName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.birthDay, className: "mt-xl", children: [_jsx(DateOfBirthField, { value: birthDay, onChange: (value) => {
177
+ if (!value)
178
+ return;
179
+ step1Form.setValue('birthDay', value, {
180
+ shouldDirty: true,
181
+ shouldTouch: true,
182
+ shouldValidate: true,
183
+ });
184
+ }, onBlur: () => {
185
+ step1Form.trigger('birthDay');
186
+ } }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.birthDay?.message })] }), signUpProps.branches && (_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.branchCode, className: "mt-xl", children: [_jsxs(Select.Root, { value: [branchCode ?? ''], onValueChange: (details) => {
187
+ step1Form.setValue('branchCode', details.value?.[0], {
188
+ shouldDirty: true,
189
+ shouldTouch: true,
190
+ shouldValidate: true,
191
+ });
192
+ }, collection: branchCollection, positioning: {
193
+ sameWidth: true,
194
+ placement: 'bottom',
195
+ }, lazyMount: true, unmountOnExit: true, children: [_jsxs(Select.Label, { className: "flex items-center gap-1", children: ["Branch", _jsxs(Tooltip.Root, { openDelay: 0, closeDelay: 100, lazyMount: true, unmountOnExit: true, positioning: {
196
+ placement: 'top',
197
+ }, children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(HelpCircleIcon, { className: "size-4 text-text-nav-item-button-icon" }) }), _jsx(Tooltip.Positioner, { children: _jsxs(Tooltip.Content, { children: [_jsx(Tooltip.Arrow, { children: _jsx(Tooltip.ArrowTip, {}) }), "Choose branch closest to your residence."] }) })] })] }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: branchCollection.items.map((item) => {
198
+ const label = branchCollection.stringifyItem(item) ?? '';
199
+ return (_jsx(Select.Item, { item: item, "aria-disabled": item.disabled, className: twMerge(item.disabled && 'text-border-disabled'), children: _jsx("div", { title: label, className: "line-clamp-1", children: label }) }, item.code));
200
+ }) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.branchCode?.message })] }))] })), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: o.fieldState.invalid, children: [_jsxs(Checkbox.Root, { variant: "outline", colorScheme: "neutral", checked: o.field.value, onCheckedChange: (details) => {
201
+ if (details.checked === 'indeterminate')
202
+ return;
203
+ o.field.onChange(details.checked);
204
+ globalStore.termsAndConditions.setAccepted(details.checked);
205
+ globalStore.responsibleGaming.setAccepted(details.checked);
206
+ }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I have read and accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
207
+ if (signUpProps.termsAndConditionsUrl) {
208
+ globalStore.signUp.setOpen(false);
209
+ router.push(signUpProps.termsAndConditionsUrl);
210
+ }
211
+ else {
212
+ globalStore.termsAndConditions.setOpen(true);
213
+ globalStore.termsAndConditions.setNext('SIGN_UP');
214
+ }
215
+ }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
216
+ if (signUpProps.responsibleGamingUrl) {
217
+ globalStore.signUp.setOpen(false);
218
+ router.push(signUpProps.responsibleGamingUrl);
219
+ }
220
+ else {
221
+ globalStore.responsibleGaming.setOpen(true);
222
+ globalStore.responsibleGaming.setNext('SIGN_UP');
223
+ }
224
+ }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: signUpProps.isRegulated ? 'Continue' : 'Create Account' })] }), signUpProps.showPublicPlayProhibition && (_jsxs("div", { className: twMerge('mt-3xl text-center text-sm', signUpProps.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', signUpProps.className?.publicPlayProhibitionLogoContainer), children: [_jsx(Image, { src: signUpProps.pagcorLogo ?? pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-10 w-auto" }), _jsx(Image, { src: signUpProps.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-10 w-auto", draggable: false })] })] })), _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: "Already have an account?" }), _jsx("button", { type: "submit", className: "font-semibold text-button-tertiary-fg", onClick: () => {
225
+ globalStore.signUp.setOpen(false);
226
+ globalStore.signIn.setOpen(true);
227
+ }, children: "Log In" })] })] })), 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: countryCodeParser(areaCode, step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
228
+ const id = ObjectId.generate(ObjectType.MemberAccount).toString();
229
+ const { mobileNumber } = step1Form.getValues();
230
+ const birthdayValue = step1Form.getValues('birthDay');
231
+ try {
232
+ await signUpMutation.mutateAsync({
233
+ id,
234
+ mobileNumber: countryCodeParser(areaCode, mobileNumber),
235
+ verificationCode: verificationCode.join(''),
236
+ ...(!signUpProps.basicSignUp && {
237
+ realName: `${step1Form.getValues('firstName')} ${step1Form.getValues('lastName')}`,
238
+ ...(!!birthdayValue && {
239
+ birthDay: format(birthdayValue, 'yyyy-MM-dd'),
240
+ }),
241
+ ...(signUpProps?.branches &&
242
+ signUpProps.branches.length > 0 && {
243
+ branchCode: step1Form.getValues('branchCode'),
244
+ }),
245
+ }),
246
+ referralCode: search.get('referralCode') ?? undefined,
247
+ });
248
+ const name = countryCodeParser(areaCode, mobileNumber);
249
+ const password = `${name}${id}`;
250
+ const pollLogin = createPoll(async () => {
251
+ try {
252
+ await signInMutation.mutateAsync({
253
+ type: 'NAME_AND_PASSWORD',
254
+ name,
255
+ password,
256
+ });
257
+ return true;
258
+ }
259
+ catch {
260
+ return false;
261
+ }
262
+ }, {
263
+ until: (ok) => ok,
264
+ interval: 1500,
265
+ maxAttempt: 5,
266
+ });
267
+ const ok = await pollLogin();
268
+ if (!ok) {
269
+ globalStore.signIn.setOpen(true);
270
+ return;
271
+ }
272
+ globalStore.signUp.setOpen(false);
273
+ step1Form.reset();
274
+ step2Form.reset();
275
+ setStep(1);
276
+ }
277
+ catch (error) {
278
+ toaster.error({
279
+ description: error instanceof Error
280
+ ? error.message
281
+ : 'Invalid Verification Code',
282
+ });
283
+ }
284
+ }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", value: o.field.value, onValueChange: (details) => {
285
+ o.field.onChange(details.value);
286
+ }, onKeyDown: (e) => {
287
+ if (e.key === 'Backspace') {
288
+ step2Form.reset();
289
+ }
290
+ }, onValueComplete: () => {
291
+ form2Ref.current?.requestSubmit();
292
+ }, 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.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-button-secondary-fg disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
293
+ await sendVerificationCodeMutation.mutateAsync({
294
+ channel: 'SMS',
295
+ recipient: countryCodeParser(areaCode, step1Form.getValues('mobileNumber')),
296
+ });
297
+ cooldown.start();
298
+ }, children: cooldown.cooling
299
+ ? `Resend in ${cooldown.countdown}s`
300
+ : 'Resend' })] }), _jsxs("button", { type: "button", className: "mx-auto mt-3xl flex w-fit items-center gap-1 font-semibold text-sm text-text-tertiary-600", onClick: () => {
301
+ setStep(1);
302
+ step2Form.reset();
303
+ cooldown.stop();
304
+ }, children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] })] })] }))] }));
305
+ }
@@ -0,0 +1,23 @@
1
+ import { type ImageProps } from 'next/image';
2
+ import { type ReactNode } from 'react';
3
+ import type { Branch } from '../../../types';
4
+ export interface ClassNameEntries {
5
+ root?: string;
6
+ publicPlayProhibitionRoot?: string;
7
+ publicPlayProhibitionLogoContainer?: string;
8
+ }
9
+ export interface SignUpHappyBingoProps {
10
+ layout: 'happybingo';
11
+ logo: ImageProps['src'];
12
+ basicSignUp?: boolean;
13
+ branches?: Branch[];
14
+ termsAndConditionsUrl?: string;
15
+ responsibleGamingUrl?: string;
16
+ className?: ClassNameEntries;
17
+ children?: ReactNode;
18
+ showPublicPlayProhibition?: boolean;
19
+ pagcorLogo?: ImageProps['src'];
20
+ responsibleGamingLogo?: ImageProps['src'];
21
+ isRegulated?: boolean;
22
+ }
23
+ export declare function SignUpHappyBingo(props: SignUpHappyBingoProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,26 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import Image, {} from 'next/image';
4
+ import { Suspense } from 'react';
5
+ import { twMerge } from 'tailwind-merge';
6
+ import { useShallow } from 'zustand/shallow';
7
+ import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
8
+ import { XIcon } from '../../../icons/XIcon.js';
9
+ import { Dialog } from '../../../ui/Dialog/index.js';
10
+ import { Portal } from '../../../ui/Portal/index.js';
11
+ import { SignUpHappyBingoPropsProvider } from './SignUpHappyBingoContext.js';
12
+ import { SignUpHappyBingoForm } from './SignUpHappyBingoForm.js';
13
+ export function SignUpHappyBingo(props) {
14
+ const signUpStore = useGlobalStore(useShallow((ctx) => ctx.signUp));
15
+ const globalStore = useGlobalStore(useShallow((ctx) => ({
16
+ termsAndConditions: ctx.termsAndConditions,
17
+ responsibleGaming: ctx.responsibleGaming,
18
+ })));
19
+ return (_jsx(SignUpHappyBingoPropsProvider, { value: props, children: _jsx(Dialog.Root, { open: signUpStore.open, onOpenChange: (details) => {
20
+ signUpStore.setOpen(details.open);
21
+ }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
22
+ // Reset checkbox state when dialog closes
23
+ globalStore.termsAndConditions.setAccepted(false);
24
+ globalStore.responsibleGaming.setAccepted(false);
25
+ }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('h-full w-full lg:mx-auto lg:grid lg:h-[50rem] lg:w-[55rem] lg:grid-cols-2', props.className?.root), style: { msOverflowStyle: 'none', scrollbarWidth: 'none' }, children: [_jsx("div", { className: "hidden h-full overflow-hidden rounded-l-xl lg:block", children: _jsx(Image, { src: "https://assets.opexacms.atalos.io/hd48QiKmacXs1XWnY", alt: "login banner", width: 1000, height: 1000, className: "h-full w-full", draggable: false }) }), _jsxs("div", { className: "relative flex scrollbar:h-2 min-h-full scrollbar:w-2 flex-col overflow-y-auto scrollbar-thumb:rounded-full bg-white scrollbar-thumb:bg-transparent scrollbar-track:bg-transparent p-5 lg:rounded-r-xl lg:p-3xl dark:bg-[#0C111D]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: "https://assets.opexacms.atalos.io/hdKuiVnx6WePuJy6C", alt: "happy bingo logo", width: 433, height: 211, className: "mx-auto mb-xl h-auto w-[7.125rem]", draggable: false }), _jsx(Suspense, { children: _jsx(SignUpHappyBingoForm, {}) })] })] }) })] }) }) }));
26
+ }
@@ -0,0 +1,6 @@
1
+ import type { SignUpHappyBingoProps } from './SignUpHappyBingo.lazy';
2
+ export declare const SignUpHappyBingoPropsProvider: (props: {
3
+ value: SignUpHappyBingoProps;
4
+ } & {
5
+ children?: import("react").ReactNode | undefined;
6
+ }) => React.ReactNode, useSignUpHappyBingoPropsContext: () => SignUpHappyBingoProps;
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../../../client/utils/createContext.js';
2
+ export const [SignUpHappyBingoPropsProvider, useSignUpHappyBingoPropsContext] = createContext();
@@ -0,0 +1 @@
1
+ export declare function SignUpHappyBingoForm(): import("react/jsx-runtime").JSX.Element;