@opexa/portal-components 0.0.27 → 0.0.29

package/dist/components/Bonuses/Bonuses.jsx

@@ -0,0 +1,87 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { StopWatchIcon } from '../../icons/index.js';
+import { Badge, Button, Progress, SegmentGroup } from '../../ui/index.js';
+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/Bonuses/index.js

@@ -0,0 +1 @@
+export * from './Bonuses';

package/dist/components/DepositWithdrawal/AmountChoices.jsx

@@ -0,0 +1,28 @@
+import { twMerge } from 'tailwind-merge';
+import { useControllableState, useLocaleInfo } from '../../client/hooks/index.js';
+import { Button } from '../../ui/index.js';
+import { dataAttr, formatNumber } from '../../utils/index.js';
+export function AmountChoices(props) {
+    const min = props.min ?? 0;
+    const max = props.max ?? 9999999;
+    const localeInfo = useLocaleInfo();
+    const options = props.options?.length
+        ? props.options
+        : [500, 750, 1000, 2000];
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? options[0],
+        onChange: props.onChange,
+    });
+    return (<div className={twMerge('grid grid-cols-4 gap-2', props.className)}>
+      {options.map((option) => (<Button key={option} variant="outline" colorScheme="gray" onClick={() => {
+                setValue(option);
+            }} disabled={min > option || max < option} data-selected={dataAttr(value === option)}>
+          {formatNumber(option, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 0,
+                maxDecimalPlaces: 0,
+            })}
+        </Button>))}
+    </div>);
+}

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

@@ -0,0 +1,73 @@
+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/index.js';
+import { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from '../../../icons/index.js';
+import { Checkbox, IconButton } from '../../../ui/index.js';
+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/Deposit.jsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import { useOnMMA, usePaymentSettingsQuery } from '../../../client/hooks/index.js';
+import { AlertCircleIcon, SpinnerIcon } from '../../../icons/index.js';
+import { onMobileDevice } from '../../../utils/index.js';
+import { PaymentMethods } from '../PaymentMethods';
+import { GCashDeposit } from './GCashDeposit/GCashDeposit';
+import { MayaAppDeposit } from './MayaAppDeposit/MayaAppDeposit';
+import { MayaDeposit } from './MayaDeposit/MayaDeposit';
+import { OnlineBankDeposit } from './OnlineBankDeposit/OnlineBankDeposit';
+import { QRPHDeposit } from './QRPHDeposit/QRPHDeposit';
+export function Deposit() {
+    const [onMMA] = useOnMMA();
+    const paymentSettingsQuery = usePaymentSettingsQuery();
+    const paymentSettings = paymentSettingsQuery.data;
+    const enabledPaymentMethods = (() => {
+        const l = [];
+        if (onMMA) {
+            l.push('MAYA_APP');
+        }
+        else if (onMobileDevice()) {
+            if (paymentSettings?.gcashDepositGatewaySettings?.mobileWebEnabled) {
+                l.push('GCASH');
+            }
+            if (paymentSettings?.mayaDepositGatewaySettings?.mobileWebEnabled) {
+                l.push('MAYA');
+            }
+            if (paymentSettings?.qrphDepositGatewaySettings?.mobileWebEnabled) {
+                l.push('QRPH');
+            }
+            if (paymentSettings?.onlineBankDepositGatewaySettings?.mobileWebEnabled) {
+                l.push('ONLINE_BANK');
+            }
+        }
+        else {
+            if (paymentSettings?.gcashDepositGatewaySettings?.webEnabled) {
+                l.push('GCASH');
+            }
+            if (paymentSettings?.mayaDepositGatewaySettings?.webEnabled) {
+                l.push('MAYA');
+            }
+            if (paymentSettings?.qrphDepositGatewaySettings?.webEnabled) {
+                l.push('QRPH');
+            }
+            if (paymentSettings?.onlineBankDepositGatewaySettings?.webEnabled) {
+                l.push('ONLINE_BANK');
+            }
+        }
+        return l;
+    })();
+    const [paymentMethod, setPaymentMethod] = useState();
+    useEffect(() => {
+        if (enabledPaymentMethods.length > 0 && !paymentMethod) {
+            setPaymentMethod(enabledPaymentMethods[0]);
+        }
+    }, [enabledPaymentMethods, paymentMethod]);
+    if (paymentSettingsQuery.isLoading) {
+        return <SpinnerIcon className="mx-auto size-6"/>;
+    }
+    if (enabledPaymentMethods.length <= 0) {
+        return (<div className="border-amber-200 text-amber-700 bg-amber-50 flex items-center gap-1.5 rounded-sm border px-3 py-2.5 text-sm">
+        <AlertCircleIcon className="size-4"/>
+        No available payment methods
+      </div>);
+    }
+    return (<>
+      <PaymentMethods value={paymentMethod} onChange={setPaymentMethod} options={enabledPaymentMethods}/>
+
+      {paymentMethod === 'QRPH' && <QRPHDeposit />}
+      {paymentMethod === 'GCASH' && <GCashDeposit />}
+      {paymentMethod === 'MAYA' && <MayaDeposit />}
+      {paymentMethod === 'MAYA_APP' && <MayaAppDeposit />}
+      {paymentMethod === 'ONLINE_BANK' && <OnlineBankDeposit />}
+    </>);
+}

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

@@ -0,0 +1,213 @@
+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/index.js';
+import { toaster } from '../../../../client/utils/index.js';
+import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
+import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
+import { parseDecimal } from '../../../../utils/index.js';
+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>);
+}