@opexa/portal-components 0.0.28 → 0.0.30

package/dist/components/Bonuses/Bonuses.jsx

@@ -1,87 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { StopWatchIcon } from '../../icons';
-import { Badge, Button, Progress, SegmentGroup } from '../../ui';
-export function Bonuses(props) {
-    return (<div className={props.className}>
-      <h2 className="text-lg font-semibold">{props.heading ?? 'Rewards'}</h2>
-
-      <SegmentGroup.Root defaultValue="all" className="mt-3 w-full lg:w-fit">
-        <SegmentGroup.Item value="all" className="w-full lg:w-auto">
-          <SegmentGroup.ItemText>All</SegmentGroup.ItemText>
-          <SegmentGroup.ItemControl />
-          <SegmentGroup.ItemHiddenInput />
-        </SegmentGroup.Item>
-        <SegmentGroup.Item value="active" className="w-full lg:w-auto">
-          <SegmentGroup.ItemText>Active</SegmentGroup.ItemText>
-          <SegmentGroup.ItemControl />
-          <SegmentGroup.ItemHiddenInput />
-        </SegmentGroup.Item>
-        <SegmentGroup.Item value="cashbacks" className="w-full lg:w-auto">
-          <SegmentGroup.ItemText>Cashback</SegmentGroup.ItemText>
-          <SegmentGroup.ItemControl />
-          <SegmentGroup.ItemHiddenInput />
-        </SegmentGroup.Item>
-        <SegmentGroup.Indicator />
-      </SegmentGroup.Root>
-
-      <div className="mt-3xl grid gap-3xl lg:grid-cols-3">
-        <Bonus />
-        <Cashback />
-      </div>
-    </div>);
-}
-function Bonus(props) {
-    return (<div className="border-border-primary bg-bg-tertiary overflow-hidden rounded-2xl border">
-      <div className="relative">
-        <Image src="https://images.pexels.com/photos/5868275/pexels-photo-5868275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width={400} height={200} className="h-auto w-full"/>
-
-        <Badge.Root size="lg" round={false} colorScheme="brand" className="absolute right-4 top-4">
-          <Badge.Icon>
-            <StopWatchIcon />
-          </Badge.Icon>
-          <Badge.Label>9d:10h:11m</Badge.Label>
-        </Badge.Root>
-      </div>
-      <div className="px-xl py-3xl">
-        <h2 className="text-center text-xl font-semibold text-white">
-          50 PHP First Deposit Bonus
-        </h2>
-        <div className="text-text-primary-brand mt-xl flex justify-between">
-          <p>Your bonus</p>
-          <p>₱20.00</p>
-        </div>
-        <div className="text-text-primary-brand mt-2 flex justify-between">
-          <p>Wagering 40%</p>
-          <p>400/1000</p>
-        </div>
-        <Progress.Root defaultValue={42} className="mt-2">
-          <Progress.Track>
-            <Progress.Range />
-          </Progress.Track>
-        </Progress.Root>
-
-        <Button variant="outline" className="mt-6" asChild>
-          <Link href={props.viewDetailsUrl ?? '/rewards/1'}>See More</Link>
-        </Button>
-      </div>
-    </div>);
-}
-function Cashback(props) {
-    console.log(props);
-    return (<div className="border-border-primary bg-bg-tertiary overflow-hidden rounded-2xl border">
-      <Image src="https://images.pexels.com/photos/5868275/pexels-photo-5868275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width={400} height={200} className="h-auto w-full"/>
-
-      <div className="px-xl py-3xl">
-        <p className="text-center text-xl font-semibold text-white">Cashback</p>
-        <h2 className="mt-2 text-center text-3xl font-semibold text-white">
-          ₱20.48
-        </h2>
-        <p className="text-text-secondary-700 mt-2 text-center text-sm">
-          Claim your cashback reward and explore other exciting offers!
-        </p>
-
-        <Button className="mt-6">Claim</Button>
-      </div>
-    </div>);
-}

package/dist/components/DepositWithdrawal/Deposit/AvailablePromos.jsx

@@ -1,73 +0,0 @@
-import { Carousel } from '@ark-ui/react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { twMerge } from 'tailwind-merge';
-import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useControllableState, useGlobalStore, } from '../../../client/hooks';
-import { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from '../../../icons';
-import { Checkbox, IconButton } from '../../../ui';
-export function AvailablePromos(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const query = useAvailablePromosQuery();
-    const promos = query.data ?? [];
-    const [value, setValue] = useControllableState({
-        value: props.value,
-        defaultValue: props.defaultValue ?? null,
-        onChange: props.onChange,
-    });
-    return (<Carousel.Root slideCount={promos.length} className={props.className} spacing="16px" slidesPerPage={2}>
-      <div className="flex items-center gap-xl">
-        <div className="grow">
-          <h2 className="text-lg font-semibold leading-tight">
-            Available Promotions
-          </h2>
-          <p className="text-gray-500 mt-1 text-sm leading-tight">
-            Select a promotion with your deposit. Only one can be active at a
-            time.
-          </p>
-        </div>
-
-        <Carousel.Control>
-          <Carousel.PrevTrigger asChild>
-            <IconButton variant="outline" colorScheme="gray" className="rounded-r-none border-r-0">
-              <ChevronLeftIcon />
-            </IconButton>
-          </Carousel.PrevTrigger>
-          <Carousel.NextTrigger asChild>
-            <IconButton variant="outline" colorScheme="gray" className="rounded-l-none">
-              <ChevronRightIcon />
-            </IconButton>
-          </Carousel.NextTrigger>
-        </Carousel.Control>
-      </div>
-
-      <Carousel.ItemGroup className="mt-3xl">
-        {promos.map((promo, index) => (<Carousel.Item key={promo.id} index={index}>
-            <div className="relative select-none p-0.5">
-              <div className={twMerge('block rounded-lg', promo.id === value && 'ring-gray-500/25 ring-2')}>
-                {promo.banner.url && (<Image src={promo.banner.url} alt="" width={288} height={184} className="rounded-lg"/>)}
-              </div>
-
-              <Checkbox.Root checked={promo.id === value} onCheckedChange={(details) => {
-                setValue(details.checked ? promo.id : null);
-            }} className="absolute right-3 top-3 rounded-md border border-white/50 bg-white/60 p-lg backdrop-blur-sm">
-                <Checkbox.Control className="bg-white">
-                  <Checkbox.Indicator asChild>
-                    <CheckIcon />
-                  </Checkbox.Indicator>
-                </Checkbox.Control>
-                <Checkbox.HiddenInput />
-              </Checkbox.Root>
-
-              <Link href={`/promos/${promo.id}`} className="absolute bottom-3 right-3 rounded-md border border-white/50 bg-white/60 px-lg py-md text-sm font-semibold backdrop-blur-sm" onClick={() => {
-                globalStore.depositWithdrawal.setOpen(false);
-            }}>
-                Promo Details
-              </Link>
-            </div>
-          </Carousel.Item>))}
-      </Carousel.ItemGroup>
-    </Carousel.Root>);
-}

package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.jsx

@@ -1,213 +0,0 @@
-import { Portal } from '@ark-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import invariant from 'tiny-invariant';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useCreateGCashDepositMutation, useDepositsCountQuery, useDisclosure, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks';
-import { toaster } from '../../../../client/utils';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, SpinnerIcon, XIcon, } from '../../../../icons';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui';
-import { parseDecimal } from '../../../../utils';
-import { AmountChoices } from '../../AmountChoices';
-import { AvailablePromos } from '../AvailablePromos';
-export function GCashDeposit() {
-    const disclosure = useDisclosure();
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const createDepositMutation = useCreateGCashDepositMutation({
-        onSuccess(data) {
-            invariant(data.checkoutUrl);
-            window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
-            form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-        },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
-        },
-    });
-    const depositsCountQuery = useDepositsCountQuery();
-    const depositsCount = depositsCountQuery.data ?? 0;
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.gcashDepositGatewaySettings;
-    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
-    const minimumAmount = depositsCount <= 0
-        ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
-        : parseDecimal(gatewaySettings?.minimumAmount, 0);
-    const promosQuery = useAvailablePromosQuery();
-    const promos = promosQuery.data ?? [];
-    const definition = z
-        .object({
-        amount: z.string().superRefine((val, ctx) => {
-            const n = parseDecimal(val, 0);
-            if (n < minimumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_small,
-                    inclusive: true,
-                    minimum: minimumAmount,
-                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
-                });
-            }
-            if (n > maximumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_big,
-                    inclusive: true,
-                    maximum: maximumAmount,
-                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
-                });
-            }
-        }),
-        promo: z.string().optional().nullable(),
-    })
-        .superRefine((value, ctx) => {
-        const promo = promos.find((o) => o.id === value.promo);
-        const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
-        const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
-        const amount = parseDecimal(value.amount, 0);
-        if (promo && amount < promoMinAmount) {
-            ctx.addIssue({
-                path: ['amount'],
-                code: z.ZodIssueCode.custom,
-                message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
-            });
-        }
-        if (promo && amount > promoMaxAmount) {
-            ctx.addIssue({
-                path: ['amount'],
-                code: z.ZodIssueCode.custom,
-                message: `Maximum amount for this promo is ${promoMaxAmount}`,
-            });
-        }
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(definition),
-        defaultValues: {
-            amount: '0',
-            promo: null,
-        },
-    });
-    useEffect(() => {
-        if (minimumAmount) {
-            form.reset({
-                amount: minimumAmount.toString(),
-                promo: null,
-            });
-        }
-    }, [form, minimumAmount]);
-    const handleSubmit = form.handleSubmit(async (data) => {
-        createDepositMutation.mutate({
-            amount: data.amount.toString(),
-            promo: data.promo ?? undefined,
-        });
-    });
-    return (<form onSubmit={handleSubmit} noValidate>
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount}>
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to deposit
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Controller control={form.control} name="promo" render={(o) => (<AvailablePromos className="mt-4xl" value={o.field.value} onChange={o.field.onChange}/>)}/>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-      <Button type="submit" className="mt-4.5" disabled={createDepositMutation.isPending} onClick={async (e) => {
-            const ok = await form.trigger('amount');
-            if (!ok)
-                return;
-            if (promos.length <= 0)
-                return;
-            if (form.getValues('promo'))
-                return;
-            e.preventDefault();
-            disclosure.setOpen(true);
-        }}>
-        {createDepositMutation.isPending ? (<>
-            <SpinnerIcon />
-            Processing...
-          </>) : ('Deposit')}
-      </Button>
-
-      <AlertDialog.Root role="alertdialog" open={disclosure.open} onOpenChange={(details) => {
-            disclosure.setOpen(details.open);
-        }} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
-        <Portal>
-          <AlertDialog.Backdrop className="!z-[calc(var(--z-dialog)+10)]"/>
-          <AlertDialog.Positioner className="!z-[calc(var(--z-dialog)+25)]">
-            <AlertDialog.Content>
-              <AlertDialog.Header>
-                <div className="flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]">
-                  <AlertCircleIcon />
-                </div>
-                <AlertDialog.CloseTrigger>
-                  <XIcon />
-                </AlertDialog.CloseTrigger>
-              </AlertDialog.Header>
-              <AlertDialog.Body>
-                <AlertDialog.Title>
-                  Submit deposit request without promo?
-                </AlertDialog.Title>
-                <AlertDialog.Description>
-                  You haven&rsquo;t selected a promo. Are you sure you want to
-                  proceed without one?
-                </AlertDialog.Description>
-              </AlertDialog.Body>
-              <AlertDialog.Footer>
-                <Button variant="outline" colorScheme="gray" onClick={() => {
-            disclosure.setOpen(false);
-        }}>
-                  Cancel
-                </Button>
-                <Button onClick={() => {
-            handleSubmit();
-            disclosure.setOpen(false);
-        }}>
-                  Proceed
-                </Button>
-              </AlertDialog.Footer>
-            </AlertDialog.Content>
-          </AlertDialog.Positioner>
-        </Portal>
-      </AlertDialog.Root>
-    </form>);
-}

package/dist/components/DepositWithdrawal/Deposit/MayaAppDeposit/MayaAppDeposit.jsx

@@ -1,219 +0,0 @@
-import { Portal } from '@ark-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useCreateMayaAppDepositMutation, useDepositsCountQuery, useDisclosure, useGlobalStore, useIsMayaSessionValidQuery, usePaymentSettingsQuery, } from '../../../../client/hooks';
-import { toaster } from '../../../../client/utils';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, SpinnerIcon, XIcon, } from '../../../../icons';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui';
-import { parseDecimal } from '../../../../utils';
-import { AmountChoices } from '../../AmountChoices';
-import { MayaSessionExpired } from '../../MayaSessionExpired';
-import { AvailablePromos } from '../AvailablePromos';
-export function MayaAppDeposit() {
-    const disclosure = useDisclosure();
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const createDepositMutation = useCreateMayaAppDepositMutation({
-        onSuccess() {
-            form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Deposit success!',
-            });
-        },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
-        },
-    });
-    const isMayaSessionValidQuery = useIsMayaSessionValidQuery();
-    const isMayaSessionValid = isMayaSessionValidQuery.data ?? true;
-    const depositsCountQuery = useDepositsCountQuery();
-    const depositsCount = depositsCountQuery.data ?? 0;
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.mayaAppDepositGatewaySettings;
-    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
-    const minimumAmount = depositsCount <= 0
-        ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
-        : parseDecimal(gatewaySettings?.minimumAmount, 0);
-    const promosQuery = useAvailablePromosQuery();
-    const promos = promosQuery.data ?? [];
-    const definition = z
-        .object({
-        amount: z.string().superRefine((val, ctx) => {
-            const n = parseDecimal(val, 0);
-            if (n < minimumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_small,
-                    inclusive: true,
-                    minimum: minimumAmount,
-                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
-                });
-            }
-            if (n > maximumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_big,
-                    inclusive: true,
-                    maximum: maximumAmount,
-                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
-                });
-            }
-        }),
-        promo: z.string().optional().nullable(),
-    })
-        .superRefine((value, ctx) => {
-        const promo = promos.find((o) => o.id === value.promo);
-        const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
-        const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
-        const amount = parseDecimal(value.amount, 0);
-        if (promo && amount < promoMinAmount) {
-            ctx.addIssue({
-                path: ['amount'],
-                code: z.ZodIssueCode.custom,
-                message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
-            });
-        }
-        if (promo && amount > promoMaxAmount) {
-            ctx.addIssue({
-                path: ['amount'],
-                code: z.ZodIssueCode.custom,
-                message: `Maximum amount for this promo is ${promoMaxAmount}`,
-            });
-        }
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(definition),
-        defaultValues: {
-            amount: '0',
-            promo: null,
-        },
-    });
-    useEffect(() => {
-        if (minimumAmount) {
-            form.reset({
-                amount: minimumAmount.toString(),
-                promo: null,
-            });
-        }
-    }, [form, minimumAmount]);
-    const handleSubmit = form.handleSubmit(async (data) => {
-        createDepositMutation.mutate({
-            amount: data.amount.toString(),
-            promo: data.promo ?? undefined,
-        });
-    });
-    if (!isMayaSessionValid) {
-        return <MayaSessionExpired />;
-    }
-    return (<form onSubmit={handleSubmit} noValidate>
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount}>
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to deposit
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Controller control={form.control} name="promo" render={(o) => (<AvailablePromos className="mt-4xl" value={o.field.value} onChange={o.field.onChange}/>)}/>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-      <Button type="submit" className="mt-4.5" disabled={createDepositMutation.isPending} onClick={async (e) => {
-            const ok = await form.trigger('amount');
-            if (!ok)
-                return;
-            if (promos.length <= 0)
-                return;
-            if (form.getValues('promo'))
-                return;
-            e.preventDefault();
-            disclosure.setOpen(true);
-        }}>
-        {createDepositMutation.isPending ? (<>
-            <SpinnerIcon />
-            Processing...
-          </>) : ('Deposit')}
-      </Button>
-
-      <AlertDialog.Root role="alertdialog" open={disclosure.open} onOpenChange={(details) => {
-            disclosure.setOpen(details.open);
-        }} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
-        <Portal>
-          <AlertDialog.Backdrop className="!z-[calc(var(--z-dialog)+10)]"/>
-          <AlertDialog.Positioner className="!z-[calc(var(--z-dialog)+25)]">
-            <AlertDialog.Content>
-              <AlertDialog.Header>
-                <div className="flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]">
-                  <AlertCircleIcon />
-                </div>
-                <AlertDialog.CloseTrigger>
-                  <XIcon />
-                </AlertDialog.CloseTrigger>
-              </AlertDialog.Header>
-              <AlertDialog.Body>
-                <AlertDialog.Title>
-                  Submit deposit request without promo?
-                </AlertDialog.Title>
-                <AlertDialog.Description>
-                  You haven&rsquo;t selected a promo. Are you sure you want to
-                  proceed without one?
-                </AlertDialog.Description>
-              </AlertDialog.Body>
-              <AlertDialog.Footer>
-                <Button variant="outline" colorScheme="gray" onClick={() => {
-            disclosure.setOpen(false);
-        }}>
-                  Cancel
-                </Button>
-                <Button onClick={() => {
-            handleSubmit();
-            disclosure.setOpen(false);
-        }}>
-                  Proceed
-                </Button>
-              </AlertDialog.Footer>
-            </AlertDialog.Content>
-          </AlertDialog.Positioner>
-        </Portal>
-      </AlertDialog.Root>
-    </form>);
-}