@opexa/portal-components 0.0.95 → 0.0.97

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.
@@ -25,7 +25,7 @@ export function AvailablePromos(props) {
25
25
  setValue(value ?? null);
26
26
  }, className: props.className, children: [_jsx(Select.Label, { children: "Choose a bonus" }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, { placeholder: "Pay without bonus" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
27
27
  e.stopPropagation();
28
- }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Select.Positioner, { children: _jsxs(Select.Content, { children: [collection.items.length <= 0 && (_jsxs("div", { className: "p-2", children: [_jsx(Image, { src: gift, alt: "", width: 160, height: 160, className: "mx-auto size-[8.313rem] grayscale" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-1 max-w-[20rem] text-center text-sm", children: "No Bonuses are available at the moment. Please check back later!" })] })), collection.items.length > 0 && (_jsx(Select.ItemGroup, { children: collection.items.map((promo) => (_jsxs(Select.Item, { item: promo, children: [_jsxs(Select.ItemText, { children: [_jsx("span", { className: "block font-medium", children: promo.name }), _jsx("span", { className: "text-text-warning-primary-600 line-clamp-1 block", dangerouslySetInnerHTML: {
28
+ }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Select.Positioner, { children: _jsxs(Select.Content, { children: [collection.items.length <= 0 && (_jsxs("div", { className: "p-2", children: [_jsx(Image, { src: gift, alt: "", width: 160, height: 160, className: "mx-auto size-[8.313rem] grayscale" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-1 max-w-[20rem] text-center text-sm", children: "No Bonuses are available at the moment. Please check back later!" })] })), collection.items.length > 0 && (_jsx(Select.ItemGroup, { children: collection.items.map((promo) => (_jsxs(Select.Item, { item: promo, children: [_jsxs(Select.ItemText, { children: [_jsx("span", { className: "block font-medium", children: promo.name }), _jsx("span", { className: "text-text-warning-primary-600 line-clamp-1", dangerouslySetInnerHTML: {
29
29
  __html: promo.description,
30
30
  } })] }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, promo.id))) }))] }) })] }));
31
31
  }
@@ -5,13 +5,17 @@ import { useEffect, useState } from 'react';
5
5
  import { Controller, useForm } from 'react-hook-form';
6
6
  import invariant from 'tiny-invariant';
7
7
  import { z } from 'zod';
8
- import { useAvailablePromosQuery, useCreateGCashDepositMutation, useDepositsCountQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
8
+ import { useShallow } from 'zustand/shallow';
9
+ import { useAvailablePromosQuery, useCreateGCashDepositMutation, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
9
10
  import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
10
11
  import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
11
12
  import { parseDecimal } from '../../../../utils/index.js';
12
13
  import { AmountChoices } from '../../AmountChoices.js';
13
14
  import { AvailablePromos } from '../AvailablePromos.js';
14
15
  export function GCashDeposit() {
16
+ const globalStore = useGlobalStore(useShallow((ctx) => ({
17
+ depositWithdrawal: ctx.depositWithdrawal,
18
+ })));
15
19
  const [status, setStatus] = useState('waiting');
16
20
  const createDepositMutation = useCreateGCashDepositMutation({
17
21
  onMutate() {
@@ -88,14 +92,14 @@ export function GCashDeposit() {
88
92
  resolver: zodResolver(definition),
89
93
  defaultValues: {
90
94
  amount: '0',
91
- promo: null,
95
+ promo: globalStore.depositWithdrawal.promo ?? null,
92
96
  },
93
97
  });
94
98
  useEffect(() => {
95
99
  if (minimumAmount) {
96
100
  form.reset({
97
101
  amount: minimumAmount.toString(),
98
- promo: null,
102
+ promo: form.getValues('promo') ?? null,
99
103
  });
100
104
  }
101
105
  }, [form, minimumAmount]);
@@ -116,7 +120,10 @@ export function GCashDeposit() {
116
120
  shouldDirty: true,
117
121
  shouldValidate: true,
118
122
  });
119
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: o.field.onChange, 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("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
123
+ }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
124
+ o.field.onChange(value);
125
+ globalStore.depositWithdrawal.setPromo(null);
126
+ }, 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("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
120
127
  if (!details.open) {
121
128
  setStatus('waiting');
122
129
  }
@@ -4,13 +4,17 @@ import { zodResolver } from '@hookform/resolvers/zod';
4
4
  import { useEffect, useState } from 'react';
5
5
  import { Controller, useForm } from 'react-hook-form';
6
6
  import { z } from 'zod';
7
- import { useAvailablePromosQuery, useCreateMayaAppDepositMutation, useDepositsCountQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
7
+ import { useShallow } from 'zustand/shallow';
8
+ import { useAvailablePromosQuery, useCreateMayaAppDepositMutation, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
8
9
  import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
9
10
  import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
10
11
  import { parseDecimal } from '../../../../utils/index.js';
11
12
  import { AmountChoices } from '../../AmountChoices.js';
12
13
  import { AvailablePromos } from '../AvailablePromos.js';
13
14
  export function MayaAppDeposit() {
15
+ const globalStore = useGlobalStore(useShallow((ctx) => ({
16
+ depositWithdrawal: ctx.depositWithdrawal,
17
+ })));
14
18
  const [status, setStatus] = useState('waiting');
15
19
  const createDepositMutation = useCreateMayaAppDepositMutation({
16
20
  onMutate() {
@@ -85,14 +89,14 @@ export function MayaAppDeposit() {
85
89
  resolver: zodResolver(definition),
86
90
  defaultValues: {
87
91
  amount: '0',
88
- promo: null,
92
+ promo: globalStore.depositWithdrawal.promo ?? null,
89
93
  },
90
94
  });
91
95
  useEffect(() => {
92
96
  if (minimumAmount) {
93
97
  form.reset({
94
98
  amount: minimumAmount.toString(),
95
- promo: null,
99
+ promo: form.getValues('promo') ?? null,
96
100
  });
97
101
  }
98
102
  }, [form, minimumAmount]);
@@ -113,7 +117,10 @@ export function MayaAppDeposit() {
113
117
  shouldDirty: true,
114
118
  shouldValidate: true,
115
119
  });
116
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: o.field.onChange, 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("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
120
+ }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
121
+ o.field.onChange(value);
122
+ globalStore.depositWithdrawal.setPromo(null);
123
+ }, 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("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
117
124
  if (!details.open) {
118
125
  setStatus('waiting');
119
126
  }
@@ -5,13 +5,17 @@ import { useEffect, useState } from 'react';
5
5
  import { Controller, useForm } from 'react-hook-form';
6
6
  import invariant from 'tiny-invariant';
7
7
  import { z } from 'zod';
8
- import { useAvailablePromosQuery, useCreateMayaDepositMutation, useDepositsCountQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
8
+ import { useShallow } from 'zustand/shallow';
9
+ import { useAvailablePromosQuery, useCreateMayaDepositMutation, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
9
10
  import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
10
11
  import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
11
12
  import { parseDecimal } from '../../../../utils/index.js';
12
13
  import { AmountChoices } from '../../AmountChoices.js';
13
14
  import { AvailablePromos } from '../AvailablePromos.js';
14
15
  export function MayaDeposit() {
16
+ const globalStore = useGlobalStore(useShallow((ctx) => ({
17
+ depositWithdrawal: ctx.depositWithdrawal,
18
+ })));
15
19
  const [status, setStatus] = useState('waiting');
16
20
  const createDepositMutation = useCreateMayaDepositMutation({
17
21
  onMutate() {
@@ -88,14 +92,14 @@ export function MayaDeposit() {
88
92
  resolver: zodResolver(definition),
89
93
  defaultValues: {
90
94
  amount: '0',
91
- promo: null,
95
+ promo: globalStore.depositWithdrawal.promo ?? null,
92
96
  },
93
97
  });
94
98
  useEffect(() => {
95
99
  if (minimumAmount) {
96
100
  form.reset({
97
101
  amount: minimumAmount.toString(),
98
- promo: null,
102
+ promo: form.getValues('promo') ?? null,
99
103
  });
100
104
  }
101
105
  }, [form, minimumAmount]);
@@ -116,7 +120,10 @@ export function MayaDeposit() {
116
120
  shouldDirty: true,
117
121
  shouldValidate: true,
118
122
  });
119
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: o.field.onChange, 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("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
123
+ }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
124
+ o.field.onChange(value);
125
+ globalStore.depositWithdrawal.setPromo(null);
126
+ }, 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("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
120
127
  if (!details.open) {
121
128
  setStatus('waiting');
122
129
  }
@@ -4,7 +4,8 @@ import { noop } from 'lodash-es';
4
4
  import { useEffect } from 'react';
5
5
  import { Controller, useForm } from 'react-hook-form';
6
6
  import { z } from 'zod';
7
- import { useAvailablePromosQuery, useDepositsCountQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
7
+ import { useShallow } from 'zustand/shallow';
8
+ import { useAvailablePromosQuery, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
8
9
  import { ChevronDownIcon, ChevronUpIcon } from '../../../../icons/index.js';
9
10
  import { Button, Field, NumberInput } from '../../../../ui/index.js';
10
11
  import { parseDecimal } from '../../../../utils/index.js';
@@ -12,6 +13,9 @@ import { AmountChoices } from '../../AmountChoices.js';
12
13
  import { AvailablePromos } from '../AvailablePromos.js';
13
14
  import { useOnlineBankDepositContext } from './OnlineBankDepositContext.js';
14
15
  export function OnlineBankDepositForm() {
16
+ const globalStore = useGlobalStore(useShallow((ctx) => ({
17
+ depositWithdrawal: ctx.depositWithdrawal,
18
+ })));
15
19
  const context = useOnlineBankDepositContext();
16
20
  const depositsCountQuery = useDepositsCountQuery();
17
21
  const depositsCount = depositsCountQuery.data ?? 0;
@@ -74,14 +78,14 @@ export function OnlineBankDepositForm() {
74
78
  resolver: zodResolver(definition),
75
79
  defaultValues: {
76
80
  amount: '0',
77
- promo: null,
81
+ promo: globalStore.depositWithdrawal.promo ?? null,
78
82
  },
79
83
  });
80
84
  useEffect(() => {
81
85
  if (minimumAmount) {
82
86
  form.reset({
83
87
  amount: minimumAmount.toString(),
84
- promo: null,
88
+ promo: form.getValues('promo') ?? null,
85
89
  });
86
90
  }
87
91
  }, [form, minimumAmount]);
@@ -98,5 +102,8 @@ export function OnlineBankDepositForm() {
98
102
  shouldDirty: true,
99
103
  shouldValidate: true,
100
104
  });
101
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { className: "mt-3xl", value: o.field.value, onChange: o.field.onChange })) }), _jsx(Button, { type: "submit", className: "mt-3xl", children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["By depositing, you agree to our", ' ', _jsx("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] })] }));
105
+ }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { className: "mt-3xl", value: o.field.value, onChange: (value) => {
106
+ o.field.onChange(value);
107
+ globalStore.depositWithdrawal.setPromo(null);
108
+ } })) }), _jsx(Button, { type: "submit", className: "mt-3xl", children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["By depositing, you agree to our", ' ', _jsx("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] })] }));
102
109
  }
@@ -3,7 +3,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
3
3
  import { useEffect } from 'react';
4
4
  import { Controller, useForm } from 'react-hook-form';
5
5
  import { z } from 'zod';
6
- import { useAvailablePromosQuery, useDepositsCountQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
6
+ import { useShallow } from 'zustand/shallow';
7
+ import { useAvailablePromosQuery, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
7
8
  import { ChevronDownIcon, ChevronUpIcon } from '../../../../icons/index.js';
8
9
  import { Button, Field, NumberInput } from '../../../../ui/index.js';
9
10
  import { parseDecimal } from '../../../../utils/index.js';
@@ -11,6 +12,9 @@ import { AmountChoices } from '../../AmountChoices.js';
11
12
  import { AvailablePromos } from '../AvailablePromos.js';
12
13
  import { useQRPHDepositContext } from './QRPHDepositContext.js';
13
14
  export function QRPHDepositForm() {
15
+ const globalStore = useGlobalStore(useShallow((ctx) => ({
16
+ depositWithdrawal: ctx.depositWithdrawal,
17
+ })));
14
18
  const context = useQRPHDepositContext();
15
19
  const depositsCountQuery = useDepositsCountQuery();
16
20
  const depositsCount = depositsCountQuery.data ?? 0;
@@ -73,14 +77,14 @@ export function QRPHDepositForm() {
73
77
  resolver: zodResolver(definition),
74
78
  defaultValues: {
75
79
  amount: '0',
76
- promo: null,
80
+ promo: globalStore.depositWithdrawal.promo ?? null,
77
81
  },
78
82
  });
79
83
  useEffect(() => {
80
84
  if (minimumAmount) {
81
85
  form.reset({
82
86
  amount: minimumAmount.toString(),
83
- promo: null,
87
+ promo: form.getValues('promo') ?? null,
84
88
  });
85
89
  }
86
90
  }, [form, minimumAmount]);
@@ -97,5 +101,8 @@ export function QRPHDepositForm() {
97
101
  shouldDirty: true,
98
102
  shouldValidate: true,
99
103
  });
100
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: o.field.onChange, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["By depositing, you agree to our", ' ', _jsx("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] })] }));
104
+ }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
105
+ o.field.onChange(value);
106
+ globalStore.depositWithdrawal.setPromo(null);
107
+ }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["By depositing, you agree to our", ' ', _jsx("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] })] }));
101
108
  }
@@ -19,6 +19,9 @@ export function DepositWithdrawal() {
19
19
  });
20
20
  return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
21
21
  globalStore.depositWithdrawal.setOpen(details.open);
22
+ if (!details.open) {
23
+ globalStore.depositWithdrawal.setPromo(null);
24
+ }
22
25
  }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full px-4 py-3xl lg:w-[480px] lg:rounded-xl", children: [_jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-10 items-center justify-center rounded-md border", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
23
26
  currency: localeInfo.currency.code,
24
27
  minDecimalPlaces: 2,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.95",
3
+ "version": "0.0.97",
4
4
  "exports": {
5
5
  ".": {
6
6
  "types": "./dist/components/index.d.ts",