@opexa/portal-components 0.0.175 → 0.0.176

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 (3) hide show
  1. package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.js +38 -13
  2. package/dist/components/DepositWithdrawal/Deposit/MayaDeposit/MayaDeposit.js +38 -13
  3. package/package.json +1 -1
package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.js CHANGED
@@ -8,7 +8,9 @@ import { z } from 'zod';
8
8
  import { useShallow } from 'zustand/shallow';
9
9
  import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
10
10
  import { useCreateGCashDepositMutation } from '../../../../client/hooks/useCreateGCashDepositMutation.js';
11
+ import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
11
12
  import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
13
+ import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
12
14
  import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
13
15
  import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
14
16
  import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
@@ -27,24 +29,49 @@ import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext
27
29
  import { AvailablePromos } from '../AvailablePromos.js';
28
30
  export function GCashDeposit() {
29
31
  const depositWithdrawalProps = useDepositWithdrawalPropsContext();
32
+ const disclosure = useDisclosure();
30
33
  const globalStore = useGlobalStore(useShallow((ctx) => ({
31
34
  depositWithdrawal: ctx.depositWithdrawal,
32
35
  })));
33
36
  const [status, setStatus] = useState('waiting');
34
37
  const createDepositMutation = useCreateGCashDepositMutation({
35
38
  onMutate() {
39
+ disclosure.setOpen(true);
36
40
  setStatus('processing');
37
41
  },
38
42
  onSuccess(data) {
39
43
  invariant(data.checkoutUrl);
40
44
  window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
41
45
  form.reset();
42
- setStatus('success');
46
+ disclosure.setOpen(false);
43
47
  },
44
48
  onError() {
49
+ disclosure.setOpen(true);
45
50
  setStatus('failed');
46
51
  },
47
52
  });
53
+ const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
54
+ enabled: createDepositMutation.data != null,
55
+ refetchInterval(ctx) {
56
+ if (ctx.state.data?.status === 'CANCELLED' ||
57
+ ctx.state.data?.status === 'CONFIRMED') {
58
+ return false;
59
+ }
60
+ else {
61
+ return 2500;
62
+ }
63
+ },
64
+ });
65
+ useEffect(() => {
66
+ if (depositQuery.data?.status === 'CANCELLED') {
67
+ disclosure.setOpen(true);
68
+ setStatus('failed');
69
+ }
70
+ else if (depositQuery.data?.status === 'CONFIRMED') {
71
+ disclosure.setOpen(true);
72
+ setStatus('success');
73
+ }
74
+ }, [depositQuery.data?.status, disclosure]);
48
75
  const depositsCountQuery = useDepositsCountQuery();
49
76
  const depositsCount = depositsCountQuery.data ?? 0;
50
77
  const paymentSettingsQuery = usePaymentSettingsQuery();
@@ -117,13 +144,13 @@ export function GCashDeposit() {
117
144
  });
118
145
  }
119
146
  }, [form, minimumAmount]);
120
- const handleSubmit = form.handleSubmit(async (data) => {
121
- createDepositMutation.mutate({
122
- amount: data.amount.toString(),
123
- promo: data.promo ?? undefined,
124
- });
125
- });
126
- return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
147
+ return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
148
+ createDepositMutation.reset();
149
+ createDepositMutation.mutate({
150
+ amount: data.amount.toString(),
151
+ promo: data.promo ?? undefined,
152
+ });
153
+ }), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
127
154
  o.field.onChange(details.value);
128
155
  }, formatOptions: {
129
156
  maximumFractionDigits: 2,
@@ -137,11 +164,9 @@ export function GCashDeposit() {
137
164
  }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
138
165
  o.field.onChange(value);
139
166
  globalStore.depositWithdrawal.setPromo(null);
140
- }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg 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: status !== 'waiting', onOpenChange: (details) => {
141
- if (!details.open) {
142
- setStatus('waiting');
143
- }
144
- }, lazyMount: true, unmountOnExit: true, 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.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
167
+ }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg 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) => {
168
+ disclosure.setOpen(details.open);
169
+ }, lazyMount: true, unmountOnExit: true, 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.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
145
170
  "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
146
171
  'Your deposit has been successfully processed.', status === 'failed' &&
147
172
  'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
package/dist/components/DepositWithdrawal/Deposit/MayaDeposit/MayaDeposit.js CHANGED
@@ -8,7 +8,9 @@ import { z } from 'zod';
8
8
  import { useShallow } from 'zustand/shallow';
9
9
  import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
10
10
  import { useCreateMayaDepositMutation } from '../../../../client/hooks/useCreateMayaDepositMutation.js';
11
+ import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
11
12
  import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
13
+ import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
12
14
  import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
13
15
  import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
14
16
  import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
@@ -27,24 +29,49 @@ import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext
27
29
  import { AvailablePromos } from '../AvailablePromos.js';
28
30
  export function MayaDeposit() {
29
31
  const depositWithdrawalProps = useDepositWithdrawalPropsContext();
32
+ const disclosure = useDisclosure();
30
33
  const globalStore = useGlobalStore(useShallow((ctx) => ({
31
34
  depositWithdrawal: ctx.depositWithdrawal,
32
35
  })));
33
36
  const [status, setStatus] = useState('waiting');
34
37
  const createDepositMutation = useCreateMayaDepositMutation({
35
38
  onMutate() {
39
+ disclosure.setOpen(true);
36
40
  setStatus('processing');
37
41
  },
38
42
  onSuccess(data) {
39
43
  invariant(data.checkoutUrl);
40
44
  window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
41
45
  form.reset();
42
- setStatus('success');
46
+ disclosure.setOpen(false);
43
47
  },
44
48
  onError() {
49
+ disclosure.setOpen(true);
45
50
  setStatus('failed');
46
51
  },
47
52
  });
53
+ const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
54
+ enabled: createDepositMutation.data != null,
55
+ refetchInterval(ctx) {
56
+ if (ctx.state.data?.status === 'CANCELLED' ||
57
+ ctx.state.data?.status === 'CONFIRMED') {
58
+ return false;
59
+ }
60
+ else {
61
+ return 2500;
62
+ }
63
+ },
64
+ });
65
+ useEffect(() => {
66
+ if (depositQuery.data?.status === 'CANCELLED') {
67
+ disclosure.setOpen(true);
68
+ setStatus('failed');
69
+ }
70
+ else if (depositQuery.data?.status === 'CONFIRMED') {
71
+ disclosure.setOpen(true);
72
+ setStatus('success');
73
+ }
74
+ }, [depositQuery.data?.status, disclosure]);
48
75
  const depositsCountQuery = useDepositsCountQuery();
49
76
  const depositsCount = depositsCountQuery.data ?? 0;
50
77
  const paymentSettingsQuery = usePaymentSettingsQuery();
@@ -117,13 +144,13 @@ export function MayaDeposit() {
117
144
  });
118
145
  }
119
146
  }, [form, minimumAmount]);
120
- const handleSubmit = form.handleSubmit(async (data) => {
121
- createDepositMutation.mutate({
122
- amount: data.amount.toString(),
123
- promo: data.promo ?? undefined,
124
- });
125
- });
126
- return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
147
+ return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
148
+ createDepositMutation.reset();
149
+ createDepositMutation.mutate({
150
+ amount: data.amount.toString(),
151
+ promo: data.promo ?? undefined,
152
+ });
153
+ }), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
127
154
  o.field.onChange(details.value);
128
155
  }, formatOptions: {
129
156
  maximumFractionDigits: 2,
@@ -137,11 +164,9 @@ export function MayaDeposit() {
137
164
  }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
138
165
  o.field.onChange(value);
139
166
  globalStore.depositWithdrawal.setPromo(null);
140
- }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg 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: status !== 'waiting', onOpenChange: (details) => {
141
- if (!details.open) {
142
- setStatus('waiting');
143
- }
144
- }, lazyMount: true, unmountOnExit: true, 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.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
167
+ }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg 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) => {
168
+ disclosure.setOpen(details.open);
169
+ }, lazyMount: true, unmountOnExit: true, 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.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
145
170
  "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
146
171
  'Your deposit has been successfully processed.', status === 'failed' &&
147
172
  'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.175",
3
+ "version": "0.0.176",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",