@opexa/portal-components 0.0.27 → 0.0.28

package/dist/components/BetRecords/BetRecords.jsx

@@ -0,0 +1,470 @@
+'use client';
+import { createListCollection, parseDate, Portal } from '@ark-ui/react';
+import { tz, TZDateMini } from '@date-fns/tz';
+import { endOfDay, format, startOfDay } from 'date-fns';
+import { useReducer, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useBetRecordsQuery, useInfiniteQueryHelper, useLocaleInfo, } from '../../client/hooks';
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons';
+import { Badge, DatePicker, IconButton, SegmentGroup, Select, Table, } from '../../ui';
+import { capitalize, formatNumber } from '../../utils';
+import { Empty } from '../Empty';
+export function BetRecords(props) {
+    const [tab, setTab] = useState('all');
+    const [state, setState] = useReducer((prev, next) => ({
+        ...prev,
+        ...next,
+    }), {
+        page: 1,
+        pageSize: 10,
+        type: props.gameTypes[0],
+    });
+    const localeInfo = useLocaleInfo();
+    const providerCollection = createListCollection({
+        items: props.gameProviders,
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useBetRecordsQuery, {
+        filter: {
+            ...(state.type && {
+                game__type: {
+                    equal: state.type,
+                },
+            }),
+            ...(state.provider && {
+                game__provider: {
+                    equal: state.provider,
+                },
+            }),
+            ...(state.status && {
+                status: {
+                    equal: state.status,
+                },
+            }),
+            ...(state.timestamp && {
+                dateTimeCreated: {
+                    ...(state.timestamp.start && {
+                        greaterThanOrEqual: new TZDateMini(startOfDay(state.timestamp.start), localeInfo.timezone).toISOString(),
+                    }),
+                    ...(state.timestamp.end && {
+                        lesserThanOrEqual: new TZDateMini(endOfDay(state.timestamp.end), localeInfo.timezone).toISOString(),
+                    }),
+                },
+            }),
+        },
+    });
+    return (<div className={twMerge('px-4 pb-3xl pt-4', props.className)}>
+      <h2 className="text-text-secondary-700 text-sm font-semibold leading-tight">
+        Bet Records
+      </h2>
+      <p className="text-text-tertiary-600 mt-xs text-sm leading-tight">
+        Review your betting history
+      </p>
+
+      <div className="mt-lg">
+        <SegmentGroup.Root value={state.type} onValueChange={(details) => {
+            firstPage();
+            setState({
+                type: z
+                    .enum((props.gameTypes ?? []))
+                    .safeParse(details.value).data ?? null,
+            });
+        }}>
+          {props.gameTypes.map((type) => (<SegmentGroup.Item key={type} value={type}>
+              <SegmentGroup.ItemText>
+                {capitalize(type, {
+                delimiter: capitalize.delimiters.UNDERSCORE,
+            })}
+              </SegmentGroup.ItemText>
+              <SegmentGroup.ItemControl />
+              <SegmentGroup.ItemHiddenInput />
+            </SegmentGroup.Item>))}
+
+          <SegmentGroup.Indicator />
+        </SegmentGroup.Root>
+      </div>
+
+      <h3 className="text-text-secondary-700 mt-3xl text-sm font-semibold">
+        Table
+      </h3>
+
+      <div className="mt-xl flex flex-col gap-lg lg:flex-row lg:items-center">
+        <DatePicker.Root lazyMount unmountOnExit value={[state.timestamp?.start, state.timestamp?.end]
+            .filter(Boolean)
+            .map((d) => parseDate(d))} onValueChange={(details) => {
+            firstPage();
+            setState({
+                timestamp: {
+                    start: details.value.at(0)?.toDate(DEVICE_TIMEZONE),
+                    end: details.value.at(1)?.toDate(DEVICE_TIMEZONE),
+                },
+            });
+        }} onOpenChange={(details) => {
+            if (details.open)
+                return;
+            if (state.timestamp)
+                return;
+            setTab('all');
+        }} selectionMode="range" closeOnSelect={false} positioning={{
+            gutter: 20,
+            placement: 'bottom',
+        }}>
+          <SegmentGroup.Root value={tab} onValueChange={(details) => {
+            const value = TabDefinition.parse(details.value);
+            if (value === 'today') {
+                const now = new Date();
+                setState({
+                    timestamp: {
+                        start: startOfDay(now),
+                        end: endOfDay(now),
+                    },
+                });
+            }
+            else {
+                setState({
+                    timestamp: null,
+                });
+            }
+            firstPage();
+            setTab(value);
+        }} className="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="today" className="w-full lg:w-auto">
+              <SegmentGroup.ItemText>Today</SegmentGroup.ItemText>
+              <SegmentGroup.ItemControl />
+              <SegmentGroup.ItemHiddenInput />
+            </SegmentGroup.Item>
+
+            <DatePicker.Context>
+              {(api) => (<SegmentGroup.Item value="custom" onClick={() => api.setOpen(true)} className="w-full lg:w-auto">
+                  <DatePicker.Control>
+                    <SegmentGroup.ItemText>Custom</SegmentGroup.ItemText>
+                    <SegmentGroup.ItemControl />
+                    <SegmentGroup.ItemHiddenInput />
+                  </DatePicker.Control>
+                </SegmentGroup.Item>)}
+            </DatePicker.Context>
+
+            <SegmentGroup.Indicator />
+          </SegmentGroup.Root>
+          <Portal>
+            <DatePicker.Positioner>
+              <DatePicker.Content>
+                <DatePicker.View view="day">
+                  <DatePicker.Context>
+                    {(api) => (<>
+                        <DatePicker.ViewControl>
+                          <DatePicker.PrevTrigger>
+                            <ChevronLeftIcon />
+                          </DatePicker.PrevTrigger>
+                          <DatePicker.ViewTrigger>
+                            <DatePicker.RangeText />
+                          </DatePicker.ViewTrigger>
+                          <DatePicker.NextTrigger>
+                            <ChevronRightIcon />
+                          </DatePicker.NextTrigger>
+                        </DatePicker.ViewControl>
+                        <DatePicker.Table>
+                          <DatePicker.TableHead>
+                            <DatePicker.TableRow>
+                              {api.weekDays.map((weekDay, id) => (<DatePicker.TableHeader key={id}>
+                                  {weekDay.short.substring(0, 2)}
+                                </DatePicker.TableHeader>))}
+                            </DatePicker.TableRow>
+                          </DatePicker.TableHead>
+                          <DatePicker.TableBody>
+                            {api.weeks.map((week, id) => (<DatePicker.TableRow key={id}>
+                                {week.map((day, id) => (<DatePicker.TableCell key={id} value={day}>
+                                    <DatePicker.TableCellTrigger>
+                                      {day.day}
+                                    </DatePicker.TableCellTrigger>
+                                  </DatePicker.TableCell>))}
+                              </DatePicker.TableRow>))}
+                          </DatePicker.TableBody>
+                        </DatePicker.Table>
+                      </>)}
+                  </DatePicker.Context>
+                </DatePicker.View>
+              </DatePicker.Content>
+            </DatePicker.Positioner>
+          </Portal>
+        </DatePicker.Root>
+
+        <div className="hidden grow lg:block"/>
+
+        <Select.Root collection={providerCollection} value={state.provider ? [state.provider] : []} onValueChange={(details) => {
+            const value = z
+                .enum((props.gameProviders ?? []))
+                .safeParse(details.value.at(0)).data;
+            firstPage();
+            setState({
+                provider: value ?? null,
+            });
+        }} lazyMount deselectable positioning={{
+            sameWidth: true,
+        }}>
+          <Select.Trigger className="w-full lg:w-[14rem]">
+            <Select.ValueText placeholder="Game Vendor"/>
+            <Select.Context>
+              {(api) => (<>
+                  {api.value.length ? (<Select.ClearTrigger asChild>
+                      <span onClick={(e) => {
+                    e.stopPropagation();
+                }}>
+                        Clear
+                      </span>
+                    </Select.ClearTrigger>) : (<Select.Indicator asChild>
+                      <ChevronDownIcon />
+                    </Select.Indicator>)}
+                </>)}
+            </Select.Context>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {providerCollection.items.map((provider) => (<Select.Item key={provider} item={provider}>
+                      <Select.ItemText>
+                        {capitalize(provider, {
+                delimiter: capitalize.delimiters.UNDERSCORE,
+            })}
+                      </Select.ItemText>
+                      <Select.ItemIndicator asChild>
+                        <CheckIcon />
+                      </Select.ItemIndicator>
+                    </Select.Item>))}
+                </Select.ItemGroup>
+              </Select.Content>
+            </Select.Positioner>
+          </Portal>
+        </Select.Root>
+
+        <Select.Root collection={statusCollection} value={state.status ? [state.status] : []} onValueChange={(details) => {
+            const value = z
+                .enum(BET_RECORD_STATUSES)
+                .safeParse(details.value.at(0)).data;
+            firstPage();
+            setState({
+                status: value ?? null,
+            });
+        }} lazyMount deselectable positioning={{
+            sameWidth: true,
+        }}>
+          <Select.Trigger className="w-full lg:w-[14rem]">
+            <Select.ValueText placeholder="Status"/>
+            <Select.Context>
+              {(api) => (<>
+                  {api.value.length ? (<Select.ClearTrigger asChild>
+                      <span onClick={(e) => {
+                    e.stopPropagation();
+                }}>
+                        Clear
+                      </span>
+                    </Select.ClearTrigger>) : (<Select.Indicator asChild>
+                      <ChevronDownIcon />
+                    </Select.Indicator>)}
+                </>)}
+            </Select.Context>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {statusCollection.items.map((status) => (<Select.Item key={status} item={status}>
+                      <Select.ItemText>
+                        {capitalize(status, {
+                delimiter: capitalize.delimiters.UNDERSCORE,
+            })}
+                      </Select.ItemText>
+                      <Select.ItemIndicator asChild>
+                        <CheckIcon />
+                      </Select.ItemIndicator>
+                    </Select.Item>))}
+                </Select.ItemGroup>
+              </Select.Content>
+            </Select.Positioner>
+          </Portal>
+        </Select.Root>
+      </div>
+
+      {rows.length <= 0 && (<Empty icon={loading ? SpinnerIcon : File02Icon} title={loading ? 'Just a moment' : 'No data'} message={loading
+                ? 'Fetching latest bet records...'
+                : 'No data is currently available.'} className="mt-5xl"/>)}
+
+      {rows.length >= 1 && (<div className="border-border-primary -ml-4 mt-3xl w-dvw border-y lg:-ml-0 lg:w-full lg:rounded-xl lg:border-x">
+          <div className="border-border-primary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-xl rounded-b-none border-b">
+            <Table.Root className="border-0">
+              <Table.Header>
+                <Table.Row>
+                  <Table.Heading>Bet Time</Table.Heading>
+                  <Table.Heading>Settlement Time</Table.Heading>
+                  <Table.Heading>Bet Content</Table.Heading>
+                  <Table.Heading>Odds</Table.Heading>
+                  <Table.Heading>Bet Amount</Table.Heading>
+                  <Table.Heading>Valid Bet</Table.Heading>
+                  <Table.Heading>Settled Amount</Table.Heading>
+                  <Table.Heading>Jackpot Contribution</Table.Heading>
+                  <Table.Heading>Jackpot Payout</Table.Heading>
+                  <Table.Heading>Bet Status</Table.Heading>
+                  <Table.Heading>Game Name</Table.Heading>
+                  <Table.Heading>Vendor Round ID</Table.Heading>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {rows.map((data) => (<Table.Row key={data.id}>
+                    <Table.Cell className="!py-1">
+                      <div className="leading-tight">
+                        {format(data.dateTimeCreated, 'MM/dd/yyyy', {
+                    in: tz(localeInfo.timezone),
+                })}
+                      </div>
+                      <div className="text-text-tertiary-600 leading-tight">
+                        {format(data.dateTimeCreated, 'hh:mm a', {
+                    in: tz(localeInfo.timezone),
+                })}
+                      </div>
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {!!data.dateTimeSettled && (<>
+                          <div className="leading-tight">
+                            {format(data.dateTimeSettled, 'MM/dd/yyyy', {
+                        in: tz(localeInfo.timezone),
+                    })}
+                          </div>
+                          <div className="text-text-tertiary-600 leading-tight">
+                            {format(data.dateTimeSettled, 'hh:mm a', {
+                        in: tz(localeInfo.timezone),
+                    })}
+                          </div>
+                        </>)}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {data?.betContent || '/'}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {data.metadata?.odds || '/'}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {formatNumber(data.bet, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {formatNumber(data.validBet, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {formatNumber(data.payout, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {formatNumber(data.jackpotContribution, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {formatNumber(data.jackpotPayout, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      <Badge.Root colorScheme={data.status === 'SETTLED'
+                    ? 'success'
+                    : data.status === 'STARTED'
+                        ? 'blue'
+                        : 'danger'}>
+                        <Badge.Label>
+                          {capitalize(data.status, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                })}
+                        </Badge.Label>
+                      </Badge.Root>
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">{data.game.name}</Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {data.vendorRoundId}
+                    </Table.Cell>
+                  </Table.Row>))}
+              </Table.Body>
+            </Table.Root>
+          </div>
+
+          <div className="flex items-center gap-lg px-4 py-3">
+            <p className="text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0">
+              Page {page} of {totalPages}
+            </p>
+            <div className="hidden grow lg:block"></div>
+            <Select.Root size="sm" value={[pageSize.toString()]} onValueChange={(details) => {
+                const n = parseInt(details.value[0]);
+                const v = isNaN(n) ? 10 : n;
+                setPageSize(v);
+            }} collection={pageSizeCollection} lazyMount className="hidden lg:block" positioning={{
+                sameWidth: true,
+            }}>
+              <Select.Trigger>
+                <Select.ValueText />
+                <Select.Indicator asChild>
+                  <ChevronDownIcon />
+                </Select.Indicator>
+                <Portal>
+                  <Select.Positioner>
+                    <Select.Content>
+                      {pageSizeCollection.items.map((item) => (<Select.Item key={item} item={item}>
+                          <Select.ItemText>
+                            {pageSizeCollection.stringifyItem(item)}
+                          </Select.ItemText>
+                          <Select.ItemIndicator asChild>
+                            <CheckIcon />
+                          </Select.ItemIndicator>
+                        </Select.Item>))}
+                    </Select.Content>
+                  </Select.Positioner>
+                </Portal>
+              </Select.Trigger>
+            </Select.Root>
+            <div className="contents lg:flex">
+              <IconButton size="sm" variant="outline" colorScheme="gray" className="order-1 lg:order-none lg:rounded-r-none lg:border-r-0" disabled={!hasPrevPage || loading} onClick={() => prev()}>
+                <ChevronLeftIcon className="size-5"/>
+              </IconButton>
+              <IconButton size="sm" variant="outline" colorScheme="gray" className="order-3 lg:order-none lg:rounded-l-none" disabled={!hasNextPage || loading} onClick={() => next()}>
+                <ChevronRightIcon className="size-5"/>
+              </IconButton>
+            </div>
+          </div>
+        </div>)}
+    </div>);
+}
+const BET_RECORD_STATUSES = [
+    'CANCELLED',
+    'SETTLED',
+    'STARTED',
+];
+const pageSizeCollection = createListCollection({
+    items: useInfiniteQueryHelper.config.pageSizes,
+    itemToValue: (item) => item.toString(),
+    itemToString: (item) => `${item} items per page`,
+});
+const statusCollection = createListCollection({
+    items: BET_RECORD_STATUSES,
+    itemToValue: (item) => item,
+    itemToString: (item) => capitalize(item, {
+        delimiter: capitalize.delimiters.UNDERSCORE,
+    }),
+});
+const TabDefinition = z.enum(['all', 'today', 'custom']);
+const DEVICE_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;

package/dist/components/BetRecords/index.js

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

package/dist/components/Bonus/Bonus.client.d.ts

@@ -1,2 +1,2 @@
-import { BonusProps } from './Bonus';
+import type { BonusProps } from './Bonus';
 export declare function Bonus__client(props: BonusProps): import("react").JSX.Element;

package/dist/components/Bonus/Bonus.client.jsx

@@ -0,0 +1,144 @@
+'use client';
+import Image from 'next/image';
+import Link from 'next/link';
+import { ChevronLeftIcon, ChevronRightIcon, StopWatchIcon } from '../../icons';
+import { Badge, Collapsible, Progress, Prose } from '../../ui';
+export function Bonus__client(props) {
+    return (<div className={props.className}>
+      <Link href={props.viewAllUrl ?? '/rewards'} className="text-button-tertiary-fg flex items-center gap-lg text-lg font-semibold">
+        <ChevronLeftIcon className="size-6"/>
+        Back to Rewards
+      </Link>
+
+      <Image src="https://s3.ap-east-1.amazonaws.com/opexa-assets.opexasystem.com/assets/BSxIXEsa59_zzMAR27-ALLDAYREBATE06-STATIC-WEB-HB-1920x1080.png" alt="" width={1024} height={600} className="mt-3xl h-auto w-full rounded-xl"/>
+
+      <Badge.Root size="lg" round={false} colorScheme="brand" className="mt-xl lg:mt-6">
+        <Badge.Icon>
+          <StopWatchIcon />
+        </Badge.Icon>
+        <Badge.Label>9d:10h:11m</Badge.Label>
+      </Badge.Root>
+
+      <h1 className="text-text-primary-900 mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl">
+        50 PHP First Deposit Bonus
+      </h1>
+
+      <p className="text-text-primary-brand mt-xl text-base lg:mt-6 lg:text-lg">
+        Complete the wagering before time runs out to convert your bonus balance
+        into real money!
+      </p>
+
+      <div className="border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6">
+        <p>Your bonus</p>
+        <p>
+          <span className="text-text-primary-900">20.00</span> / 50.00 PHP
+        </p>
+      </div>
+
+      <div className="border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6">
+        <p>Required Turnover</p>
+        <p>5x</p>
+      </div>
+
+      <div className="border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl rounded-md border px-3.5 py-xl lg:mt-6">
+        <div className="flex items-center justify-between">
+          <p>Wagering</p>
+          <p>400/1000</p>
+        </div>
+        <Progress.Root defaultValue={42} className="mt-2">
+          <Progress.Track>
+            <Progress.Range />
+          </Progress.Track>
+        </Progress.Root>
+      </div>
+
+      <Collapsible.Root className="mt-xl lg:mt-6">
+        <Collapsible.Trigger className="text-button-tertiary-fg flex w-fit items-center justify-center gap-sm text-sm font-semibold lg:mx-auto">
+          Game Provider Contribution
+          <Collapsible.Indicator asChild>
+            <ChevronRightIcon className="size-5"/>
+          </Collapsible.Indicator>
+        </Collapsible.Trigger>
+        <Collapsible.Content className="border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl space-y-1.5 rounded-md border px-3.5 py-xl lg:mt-6">
+          <div className="flex items-center justify-between gap-md">
+            <p className="w-[11.25rem] shrink-0">Playson</p>
+            <Progress.Root defaultValue={42} className="mt-2 grow">
+              <Progress.Track>
+                <Progress.Range />
+              </Progress.Track>
+            </Progress.Root>
+            <p>25%</p>
+          </div>
+          <div className="flex items-center justify-between gap-md">
+            <p className="w-[11.25rem] shrink-0">Betsoft Gaming</p>
+            <Progress.Root defaultValue={42} className="mt-2 grow">
+              <Progress.Track>
+                <Progress.Range />
+              </Progress.Track>
+            </Progress.Root>
+            <p>13%</p>
+          </div>
+          <div className="flex items-center justify-between gap-md">
+            <p className="w-[11.25rem] shrink-0">Microgaming</p>
+            <Progress.Root defaultValue={42} className="mt-2 grow">
+              <Progress.Track>
+                <Progress.Range />
+              </Progress.Track>
+            </Progress.Root>
+            <p>50%</p>
+          </div>
+          <div className="flex items-center justify-between gap-md">
+            <p className="w-[11.25rem] shrink-0">Realtime Gaming</p>
+            <Progress.Root defaultValue={42} className="mt-2 grow">
+              <Progress.Track>
+                <Progress.Range />
+              </Progress.Track>
+            </Progress.Root>
+            <p>10%</p>
+          </div>
+        </Collapsible.Content>
+      </Collapsible.Root>
+
+      <Prose className="mt-xl lg:mt-6">
+        <h3>How to get bonus</h3>
+        <ol>
+          <li>All OFWin members are eligible for this program.</li>
+          <li>
+            50 PHP of game credit will be automatically credited to the new
+            member account upon completion of first deposit Auctor vel in vitae
+            placerat.
+          </li>
+          <li>
+            Member must reach a 5x turnover requirement before a withdrawal can
+            be made. Attempting to make a withdrawal before this turnover
+            requirement is completed could cause your bonus to be voided.
+          </li>
+          <li>
+            Players will have 10 days from the date the bonus is awarded to
+            complete the rollover requirement.
+          </li>
+          <li>
+            Bets used to meet other bonus rollover requirements will not count
+            toward this promotion.
+          </li>
+        </ol>
+        <h3>Terms and Conditions</h3>
+        <ul>
+          <li>
+            Only one account per player is allowed. No same IP address/bank
+            account name allowed. Players who have multiple or fraudulent
+            accounts will not be qualified for the promotion.
+          </li>
+          <li>
+            Players that are found to have any duplicate accounts or those who
+            participate in fraudulent activities may have their funds forfeited
+            and their accounts closed.
+          </li>
+          <li>
+            OFWin reserves the right to amend or cancel this Referral Program at
+            any time. OFWin General Terms and Conditions apply.
+          </li>
+        </ul>
+      </Prose>
+    </div>);
+}

package/dist/components/Bonus/Bonus.jsx

@@ -0,0 +1,4 @@
+import { Bonus__client } from './Bonus.client';
+export async function Bonus(props) {
+    return <Bonus__client {...props}/>;
+}

package/dist/components/Bonus/index.js

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