@opexa/portal-components 0.0.971 → 0.0.973

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.
@@ -131,10 +131,15 @@ export function useCamera(options = {}) {
131
131
  const video = videoRef.current;
132
132
  if (!video || video.readyState < 2)
133
133
  return null;
134
+ // Reset error state and set snapping state before attempting to snap
135
+ setError(null);
136
+ setSnapping(true);
134
137
  const canvas = document.createElement('canvas');
135
138
  const context = canvas.getContext('2d', { willReadFrequently: true });
136
- if (!context)
139
+ if (!context) {
140
+ setSnapping(false);
137
141
  return null;
142
+ }
138
143
  canvas.width = video.videoWidth;
139
144
  canvas.height = video.videoHeight;
140
145
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
@@ -142,6 +147,9 @@ export function useCamera(options = {}) {
142
147
  canvas.toBlob((blob) => {
143
148
  if (!blob) {
144
149
  resolve(null);
150
+ setData(null);
151
+ setSnapping(false);
152
+ setLoading(false);
145
153
  return setError({
146
154
  name: 'CameraError',
147
155
  message: 'Failed to snap photo',
@@ -1,8 +1,11 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import Image from 'next/image';
4
+ import { useState } from 'react';
4
5
  import { useShallow } from 'zustand/shallow';
5
6
  import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
7
+ import { getSession } from '../../client/services/getSession.js';
8
+ import { toaster } from '../../client/utils/toaster.js';
6
9
  import cinePopLogo from '../../images/cinepop-logo.png';
7
10
  import dearUtolLogo from '../../images/dear-utol-logo.png';
8
11
  import mariasDiary from '../../images/marias-diary-logo.png';
@@ -11,10 +14,33 @@ import { Dialog } from '../../ui/Dialog/index.js';
11
14
  import { Portal } from '../../ui/Portal/index.js';
12
15
  export function KYCReview() {
13
16
  const { kycReview } = useGlobalStore(useShallow((s) => ({ kycReview: s.kycReview })));
14
- return (_jsx(Dialog.Root, { open: kycReview.open, 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 justify-between space-y-4 border bg-[#232443] p-6 text-center", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "mb-4 h-7 w-7 animate-spin rounded-full border-4 border-[#101730] border-t-[#F05027]" }), _jsx("div", { className: "font-semibold text-[#F5F5F6] text-lg", children: "Thanks for your submission." }), _jsxs("div", { className: "mt-1 text-[#CECFD2] text-sm", children: ["We\u2019re now ", '', _jsxs("span", { className: "text-[#F96B47]", children: ["reviewing your KYC information ", ''] }), "and will notify you once the verification is complete."] }), _jsx("div", { className: "mt-6 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]" })] })] }), _jsx("button", { type: "button", className: "h-[44px] w-full rounded-md font-semibold", style: {
17
+ const [isLoading, setIsLoading] = useState(false);
18
+ return (_jsx(Dialog.Root, { open: kycReview.open, 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 justify-between space-y-4 border bg-[#232443] p-6 text-center", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "mb-4 h-7 w-7 animate-spin rounded-full border-4 border-[#101730] border-t-[#F05027]" }), _jsx("div", { className: "font-semibold text-[#F5F5F6] text-lg", children: "Thanks for your submission." }), _jsxs("div", { className: "mt-1 text-[#CECFD2] text-sm", children: ["We\u2019re now ", '', _jsxs("span", { className: "text-[#F96B47]", children: ["reviewing your KYC information ", ''] }), "and will notify you once the verification is complete."] }), _jsx("div", { className: "mt-6 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]" })] })] }), _jsx("button", { disabled: isLoading, type: "button", className: "h-[44px] w-full rounded-md font-semibold", style: {
15
19
  background: 'linear-gradient(90deg, #9333E8 0%, #D92778 100%)',
16
- }, onClick: () => {
17
- window.open('https://cinepop.film/', '_blank');
18
- kycReview.setOpen(false);
20
+ }, onClick: async () => {
21
+ const session = await getSession();
22
+ setIsLoading(true);
23
+ try {
24
+ const response = await fetch('https://auth.development.opexa.io/v1/sso/cinepop', {
25
+ method: 'POST',
26
+ headers: {
27
+ AUTHORIZATION: `Bearer ${session.token}`,
28
+ 'PLATFORM-ID': 'Z892',
29
+ 'Content-Type': 'application/json',
30
+ },
31
+ });
32
+ const data = (await response.json());
33
+ window.open(data.redirectUrl, '_blank');
34
+ }
35
+ catch {
36
+ toaster.error({
37
+ title: 'Failed to redirect',
38
+ description: 'Unable to open CinePop. Please try again.',
39
+ });
40
+ }
41
+ finally {
42
+ setIsLoading(false);
43
+ kycReview.setOpen(false);
44
+ }
19
45
  }, children: "Watch Cinepop" })] }) })] }) }));
20
46
  }
@@ -34,6 +34,7 @@ export function MessagesPopup() {
34
34
  gameLaunch: ctx.gameLaunch,
35
35
  depositWithdrawal: ctx.depositWithdrawal,
36
36
  kycReminder: ctx.kycReminder,
37
+ kycReview: ctx.kycReview,
37
38
  responsibleGamingReminder: ctx.responsibleGamingReminder,
38
39
  signIn: ctx.signIn,
39
40
  signUp: ctx.signUp,
@@ -83,6 +84,7 @@ export function MessagesPopup() {
83
84
  !globalStore.account__mobile.open &&
84
85
  !globalStore.kyc.open &&
85
86
  !globalStore.kycReminder.open &&
87
+ !globalStore.kycReview.open &&
86
88
  !globalStore.responsibleGamingReminder.open,
87
89
  refetchInterval: disclosure.open ? undefined : 1000 * 10,
88
90
  });
@@ -122,7 +124,7 @@ export function MessagesPopup() {
122
124
  };
123
125
  const sessionQuery = useSessionQuery();
124
126
  const session = sessionQuery.data;
125
- const isKycClosed = !globalStore.kyc.open && !globalStore.kycReminder.open;
127
+ const isKycClosed = !globalStore.kyc.open && !globalStore.kycReminder.open && !globalStore.kycReview.open;
126
128
  const isResponsibleGamingReminderClosed = !globalStore.responsibleGamingReminder.open;
127
129
  useEffect(() => {
128
130
  if (globalStore.gameLaunch.details.status === 'PLAYING')
@@ -5,8 +5,10 @@ import Image from 'next/image';
5
5
  import { useEffect, useRef, useState } from 'react';
6
6
  import { Controller, useForm } from 'react-hook-form';
7
7
  import z from 'zod';
8
+ import { useShallow } from 'zustand/shallow';
8
9
  import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
9
10
  import { useCooldown } from '../../client/hooks/useCooldown.js';
11
+ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
10
12
  import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
11
13
  import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
12
14
  import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
@@ -21,6 +23,9 @@ import { Field } from '../../ui/Field/index.js';
21
23
  import { PinInput } from '../../ui/PinInput/index.js';
22
24
  import { Portal } from '../../ui/Portal/index.js';
23
25
  export function UpdateMobilePhoneNumber() {
26
+ const globalStore = useGlobalStore(useShallow((ctx) => ({
27
+ kyc: ctx.kyc,
28
+ })));
24
29
  const accountQuery = useAccountQuery();
25
30
  const account = accountQuery.data;
26
31
  const isAccountLoading = accountQuery.isLoading;
@@ -58,7 +63,7 @@ export function UpdateMobilePhoneNumber() {
58
63
  description: 'Your mobile number has been verified.',
59
64
  });
60
65
  setIsDialogOpen(false);
61
- console.log('mobile number updated successfully');
66
+ globalStore.kyc.setOpen(true);
62
67
  },
63
68
  onError: (err) => {
64
69
  const errorMessage = err.message === 'Internal Server Error'
@@ -68,7 +73,6 @@ export function UpdateMobilePhoneNumber() {
68
73
  title: 'Sign In Failed',
69
74
  description: errorMessage,
70
75
  });
71
- console.log('error updating mobile number');
72
76
  },
73
77
  });
74
78
  const localeInfo = useLocaleInfo();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.971",
3
+ "version": "0.0.973",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",