@opexa/portal-components 0.0.310 → 0.0.311

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.
@@ -1,3 +1,4 @@
1
+ import type { GameProvider } from "../../types";
1
2
  export interface BonusProps {
2
3
  id: string;
3
4
  className?: string;
@@ -6,5 +7,6 @@ export interface BonusProps {
6
7
  * @default "/rewards"
7
8
  */
8
9
  viewAllUrl?: string;
10
+ gameProviders: GameProvider[];
9
11
  }
10
12
  export declare function Bonus__client(props: BonusProps): import("react/jsx-runtime").JSX.Element | null;
@@ -1,46 +1,50 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { clamp } from 'lodash-es';
4
- import Image from 'next/image';
5
- import Link from 'next/link';
6
- import { useBonusQuery } from '../../client/hooks/useBonusQuery.js';
7
- import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
8
- import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
9
- import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
10
- import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
11
- import { StopWatchIcon } from '../../icons/StopWatchIcon.js';
12
- import piggyBank from '../../images/piggy-bank.png';
13
- import { Badge } from '../../ui/Badge/index.js';
14
- import { Collapsible } from '../../ui/Collapsible/index.js';
15
- import { Progress } from '../../ui/Progress/index.js';
16
- import { Prose } from '../../ui/Prose/index.js';
17
- import { capitalize } from '../../utils/capitalize.js';
18
- import { formatNumber } from '../../utils/formatNumber.js';
19
- import { parseDecimal } from '../../utils/parseDecimal.js';
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import { clamp } from "lodash-es";
4
+ import Image from "next/image";
5
+ import Link from "next/link";
6
+ import { useBonusQuery } from "../../client/hooks/useBonusQuery.js";
7
+ import { useLocaleInfo } from "../../client/hooks/useLocaleInfo.js";
8
+ import { useRemainingTime } from "../../client/hooks/useRemainingTime.js";
9
+ import { ChevronLeftIcon } from "../../icons/ChevronLeftIcon.js";
10
+ import { ChevronRightIcon } from "../../icons/ChevronRightIcon.js";
11
+ import { StopWatchIcon } from "../../icons/StopWatchIcon.js";
12
+ import piggyBank from "../../images/piggy-bank.png";
13
+ import { Badge } from "../../ui/Badge/index.js";
14
+ import { Collapsible } from "../../ui/Collapsible/index.js";
15
+ import { Progress } from "../../ui/Progress/index.js";
16
+ import { Prose } from "../../ui/Prose/index.js";
17
+ import { capitalize } from "../../utils/capitalize.js";
18
+ import { formatNumber } from "../../utils/formatNumber.js";
19
+ import { parseDecimal } from "../../utils/parseDecimal.js";
20
20
  export function Bonus__client(props) {
21
21
  const bonusQuery = useBonusQuery(props.id);
22
22
  const bonus = bonusQuery.data;
23
+ const gameProviders = props.gameProviders;
24
+ const enabledGameProviders = bonus?.enabledGameProviders ?? [];
23
25
  const localeInfo = useLocaleInfo();
24
26
  const remainingTime = useRemainingTime(bonus?.expiration ?? new Date());
25
27
  if (!bonus)
26
28
  return null;
27
29
  const turnoverRequirement = parseDecimal(bonus.turnoverRequirement, 0);
28
30
  const currentTurnoverRequirementContribution = parseDecimal(bonus.currentTurnoverRequirementContribution, 0);
29
- return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/rewards', className: "flex items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Rewards"] }), _jsx("div", { className: "mt-3xl", children: bonus.promo.banner?.url ? (_jsx(Image, { src: bonus.promo.banner.url, alt: "", width: 1024, height: 600, unoptimized: true, priority: true, className: "h-auto w-full rounded-xl" })) : (_jsx(DefaultImage, {})) }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'brand-dark', className: "mt-xl lg:mt-6", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] }), _jsx("h1", { className: "mt-xl font-semibold text-2xl text-text-primary-900 lg:mt-6 lg:text-3xl", children: bonus.promo.name }), _jsx("p", { className: "mt-xl text-base text-text-primary-brand lg:mt-6 lg:text-lg", children: "Complete the wagering before time runs out to convert your bonus balance into real money!" }), _jsxs("div", { className: "mt-xl flex items-center justify-between rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: [_jsx("p", { children: "Your bonus balance" }), _jsx("p", { children: _jsx("span", { className: "text-text-primary-900", children: formatNumber(bonus.balance, {
31
+ return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? "/rewards", className: "flex items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Rewards"] }), _jsx("div", { className: "mt-3xl", children: bonus.promo.banner?.url ? (_jsx(Image, { src: bonus.promo.banner.url, alt: "", width: 1024, height: 600, unoptimized: true, priority: true, className: "h-auto w-full rounded-xl" })) : (_jsx(DefaultImage, {})) }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? "danger" : "brand-dark", className: "mt-xl lg:mt-6", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? "Expired" : remainingTime.toString() })] }), _jsx("h1", { className: "mt-xl font-semibold text-2xl text-text-primary-900 lg:mt-6 lg:text-3xl", children: bonus.promo.name }), _jsx("p", { className: "mt-xl text-base text-text-primary-brand lg:mt-6 lg:text-lg", children: "Complete the wagering before time runs out to convert your bonus balance into real money!" }), _jsxs("div", { className: "mt-xl flex items-center justify-between rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: [_jsx("p", { children: "Your bonus balance" }), _jsx("p", { children: _jsx("span", { className: "text-text-primary-900", children: formatNumber(bonus.balance, {
30
32
  currency: localeInfo.currency.code,
31
- }) }) })] }), _jsxs("div", { className: "mt-xl rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { children: ["Wagering ", bonus.currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { className: "mt-2", min: 0, max: turnoverRequirement, value: clamp(currentTurnoverRequirementContribution, 0, turnoverRequirement), children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] }), _jsxs(Collapsible.Root, { className: "mt-xl lg:mt-6", children: [_jsxs(Collapsible.Trigger, { className: "flex items-center gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsx(Collapsible.Content, { className: "mt-xl space-y-1.5 rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: Object.entries(bonus.promo
32
- .turnoverRequirementContributionPercentagePerGameProvider ?? {}).map(([provider, valueAsString]) => {
33
+ }) }) })] }), _jsxs("div", { className: "mt-xl rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: ["Wagering", !isNaN(Number(bonus.currentTurnoverRequirementContributionPercentage)) && _jsxs("p", { children: [bonus.currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { className: "mt-2", min: 0, max: turnoverRequirement, value: clamp(currentTurnoverRequirementContribution, 0, turnoverRequirement), children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] }), _jsxs(Collapsible.Root, { className: "mt-xl lg:mt-6", children: [_jsxs(Collapsible.Trigger, { className: "flex items-center gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsx(Collapsible.Content, { className: "mt-xl space-y-1.5 rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: Object.entries(bonus.promo
34
+ .turnoverRequirementContributionPercentagePerGameProvider ?? {})
35
+ .filter(([provider]) => gameProviders.includes(provider))
36
+ .map(([provider, valueAsString]) => {
33
37
  const value = parseDecimal(valueAsString, 0);
34
38
  return (_jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: capitalize(provider, {
35
39
  delimiter: capitalize.delimiters.UNDERSCORE,
36
- }) }), _jsx(Progress.Root, { min: 0, max: 100, value: clamp(value, 0, 100), className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsxs("p", { className: "shrink-0 lg:w-14 lg:text-right", children: [formatNumber(value, {
37
- maxDecimalPlaces: 1,
38
- minDecimalPlaces: 0,
39
- }), "%"] })] }, provider));
40
+ }) }), enabledGameProviders.includes(provider) ? (_jsxs(_Fragment, { children: [_jsx(Progress.Root, { min: 0, max: 100, value: clamp(value, 0, 100), className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsxs("p", { className: "shrink-0 lg:w-14 lg:text-right", children: [formatNumber(value, {
41
+ maxDecimalPlaces: 1,
42
+ minDecimalPlaces: 0,
43
+ }), "%"] })] })) : (_jsxs(_Fragment, { children: [_jsx(Progress.Root, { min: 0, max: 100, value: 0, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "shrink-0 lg:w-14 lg:text-right", children: "0%" })] }))] }, provider));
40
44
  }) })] }), _jsx(Prose, { className: "mt-xl lg:mt-6", dangerouslySetInnerHTML: { __html: bonus.promo.description } })] }));
41
45
  }
42
46
  function DefaultImage() {
43
47
  return (_jsx("div", { style: {
44
- background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
48
+ background: "radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)",
45
49
  }, className: "overflow-hidden rounded-xl", children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-auto w-[50%] shrink-0 rounded-xl", draggable: false, width: 1024, height: 1024, priority: true }) }));
46
50
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.310",
3
+ "version": "0.0.311",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",
@@ -73,7 +73,6 @@
73
73
  "build": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json && copy-files-from-to",
74
74
  "build:app": "next build",
75
75
  "start": "next start",
76
- "lint": "next lint",
77
76
  "release": "release-it"
78
77
  },
79
78
  "dependencies": {
@@ -1,12 +0,0 @@
1
- import type { ImageProps } from 'next/image';
2
- export interface BannerEntry {
3
- src: ImageProps['src'];
4
- redirectUrl?: string;
5
- }
6
- export interface BannerProps {
7
- banners: BannerEntry[];
8
- imageWidth?: number | [mobile: number, desktop: number];
9
- imageHeight?: number | [mobile: number, desktop: number];
10
- className?: string;
11
- }
12
- export declare function Banner__client(props: BannerProps): import("react/jsx-runtime").JSX.Element;
@@ -1,49 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import emblaCarouselAutoplay from 'embla-carousel-autoplay';
4
- import useEmblaCarousel, {} from 'embla-carousel-react';
5
- import isMobile from 'is-mobile';
6
- import Image from 'next/image';
7
- import Link from 'next/link';
8
- import { Fragment, useEffect, useState } from 'react';
9
- import { twMerge } from 'tailwind-merge';
10
- import { dataAttr } from '../../utils/dataAttr.js';
11
- export function Banner__client(props) {
12
- const [emblaRef, emblaApi] = useEmblaCarousel({
13
- loop: true,
14
- align: 'start',
15
- }, [
16
- emblaCarouselAutoplay({
17
- playOnInit: true,
18
- delay: 5000,
19
- }),
20
- ]);
21
- const [currentIndex, setCurrentIndex] = useState(0);
22
- useEffect(() => {
23
- function handler(detail) {
24
- setCurrentIndex(detail?.selectedScrollSnap() ?? 0);
25
- }
26
- emblaApi?.on('scroll', handler);
27
- emblaApi?.on('init', handler);
28
- return () => {
29
- emblaApi?.on('init', handler);
30
- emblaApi?.off('scroll', handler);
31
- };
32
- }, [emblaApi]);
33
- const imageWidth = !props.imageWidth
34
- ? [400, 1200]
35
- : Array.isArray(props.imageWidth)
36
- ? props.imageWidth
37
- : [props.imageWidth, props.imageWidth];
38
- const imageHeight = !props.imageHeight
39
- ? [225, 300]
40
- : Array.isArray(props.imageHeight)
41
- ? props.imageHeight
42
- : [props.imageHeight, props.imageHeight];
43
- return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
44
- const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
45
- return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
46
- }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
47
- emblaApi?.scrollTo(index);
48
- }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));
49
- }
@@ -1,8 +0,0 @@
1
- type Options = {
2
- accountName?: string;
3
- siteName?: string;
4
- signInOptions?: 'MOBILE_NUMBER' | 'NAME_AND_PASSWORD';
5
- };
6
- export type ErrorCode = 'MEMBER_ACCOUNT_BLACKLISTED' | 'MEMBER_ACCOUNT_SUSPENDED' | 'INVALID_RECAPTCHA_RESPONSE' | 'MEMBER_NOT_FOUND' | 'RATE_LIMIT_REACH' | 'NOT_READY_TO_SEND_VERIFICATION_ERROR' | 'Forbidden';
7
- export declare function getFriendlyErrorMessage(code: ErrorCode, options?: Options): string;
8
- export {};
@@ -1,26 +0,0 @@
1
- export function getFriendlyErrorMessage(code, options) {
2
- const accountName = options?.accountName ?? '';
3
- const siteName = options?.siteName ?? '';
4
- const signInOptions = options?.signInOptions ?? 'NAME_AND_PASSWORD';
5
- switch (code) {
6
- case 'MEMBER_ACCOUNT_BLACKLISTED':
7
- return `Your account ${accountName} has been blacklisted due to a serious violation of our policies. For more information or to appeal, please contact the ${siteName} Chat Support team.`;
8
- case 'MEMBER_ACCOUNT_SUSPENDED':
9
- return `Your account ${accountName} has been temporarily suspended. Please reach out to the ${siteName} Chat Support team to learn more and get help with resolving the issue.`;
10
- case 'INVALID_RECAPTCHA_RESPONSE':
11
- return 'Invalid reCAPTCHA response';
12
- case 'MEMBER_NOT_FOUND':
13
- return 'Account not found. Please check your username and try again.';
14
- case 'RATE_LIMIT_REACH':
15
- return 'Rate limit exceeded';
16
- case 'NOT_READY_TO_SEND_VERIFICATION_ERROR':
17
- return 'Your account is not ready to send verification requests. Please try again later.';
18
- case 'Forbidden':
19
- if (signInOptions === 'MOBILE_NUMBER') {
20
- return 'Invalid verification code. Please check the code and try again.';
21
- }
22
- return 'Invalid username or password, please try again.';
23
- default:
24
- return 'Something went wrong. Please try again later.';
25
- }
26
- }
@@ -1,2 +0,0 @@
1
- import type { Branch } from '../types';
2
- export declare const BRANCHES: Branch[];
@@ -1,42 +0,0 @@
1
- export const BRANCHES = [
2
- {
3
- code: 'BRCAL',
4
- name: 'Bingo Republic 2nd floor Primark Center Deparo St., Caloocan City',
5
- },
6
- {
7
- code: 'BRNAG',
8
- name: 'Bingo Republic 3rd floor Robinsons Mall, Naga City, Camarines Sur',
9
- },
10
- {
11
- code: 'BRANT',
12
- name: 'Bingo Republic 2nd floor Robinsons Mall, San Vicente,Antique',
13
- },
14
- {
15
- code: 'BRCLA',
16
- name: 'Clark',
17
- },
18
- {
19
- code: 'BRLAG',
20
- name: 'Laguna',
21
- },
22
- {
23
- code: 'BREAS',
24
- name: 'Eastwood City, Quezon City',
25
- },
26
- {
27
- code: 'BRMAR',
28
- name: 'Bingo ng Bayan 4th floor Marikina Public Market, Marikina City',
29
- },
30
- {
31
- code: 'BRILO',
32
- name: 'Iloilo',
33
- },
34
- {
35
- code: 'BRFIM',
36
- name: 'Fisher Mall,Quezon City',
37
- },
38
- {
39
- code: 'BRCAC',
40
- name: 'Villa Caceres Hotel, Naga City,Camsur',
41
- },
42
- ];
@@ -1,4 +0,0 @@
1
- export interface FacebookPixelProps {
2
- fbId: string;
3
- }
4
- export declare function FacebookPixel(props: FacebookPixelProps): null;
@@ -1,4 +0,0 @@
1
- export function FacebookPixel(props) {
2
- console.log(props);
3
- return null;
4
- }
File without changes
@@ -1 +0,0 @@
1
- "use strict";
@@ -1 +0,0 @@
1
- export * from './FacebookPixel';
@@ -1 +0,0 @@
1
- export * from './FacebookPixel.js';
@@ -1,4 +0,0 @@
1
- export interface GoogleRecaptchaProps {
2
- siteKey: string;
3
- }
4
- export declare function GoogleRecaptcha(props: GoogleRecaptchaProps): null;
@@ -1,4 +0,0 @@
1
- export function GoogleRecaptcha(props) {
2
- console.log(props);
3
- return null;
4
- }
File without changes
@@ -1 +0,0 @@
1
- "use strict";
@@ -1 +0,0 @@
1
- export * from './GoogleRecaptcha';
@@ -1 +0,0 @@
1
- export * from './GoogleRecaptcha.js';
@@ -1,2 +0,0 @@
1
- export * from './FacebookPixel';
2
- export * from './GoogleRecaptcha';
@@ -1,2 +0,0 @@
1
- export * from './FacebookPixel/index.js';
2
- export * from './GoogleRecaptcha/index.js';