@opexa/portal-components 0.0.406 → 0.0.407

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.
Files changed (6) hide show
  1. package/dist/components/Account/Account.lazy.js +13 -2
  2. package/dist/components/Bonuses/Bonuses.client.js +3 -3
  3. package/dist/components/Quests/WageringQuest.js +1 -1
  4. package/dist/styles/theme.css +3 -0
  5. package/dist/ui/Progress/progress.recipe.js +1 -1
  6. package/package.json +1 -1
package/dist/components/Account/Account.lazy.js CHANGED
@@ -29,6 +29,7 @@ import { Button } from '../../ui/Button/index.js';
29
29
  import { Drawer } from '../../ui/Drawer/index.js';
30
30
  import { Popover } from '../../ui/Popover/index.js';
31
31
  import { Portal } from '../../ui/Portal/index.js';
32
+ import { capitalize } from '../../utils/capitalize.js';
32
33
  import { formatNumber } from '../../utils/formatNumber.js';
33
34
  import { parseDecimal } from '../../utils/parseDecimal.js';
34
35
  import { AccountPropsContext, useAccountPropsContext } from './AccountContext.js';
@@ -80,7 +81,17 @@ export function Account(props) {
80
81
  function Profile() {
81
82
  const accountQuery = useAccountQuery();
82
83
  const account = accountQuery.data;
83
- return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), _jsxs(Badge.Root, { colorScheme: account?.verified ? 'success' : 'danger', className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: account?.verified ? 'Verified' : 'Unverified' })] })] })] })] }));
84
+ const getVerificationColorScheme = (status) => {
85
+ switch (status) {
86
+ case 'VERIFIED':
87
+ return 'success';
88
+ case 'PENDING':
89
+ return 'brand';
90
+ default:
91
+ return 'danger';
92
+ }
93
+ };
94
+ return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), _jsxs(Badge.Root, { colorScheme: getVerificationColorScheme(account?.verificationStatus), className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: capitalize(account?.verificationStatus || '') })] })] })] })] }));
84
95
  }
85
96
  function Wallet({ classNames }) {
86
97
  const localeInfo = useLocaleInfo();
@@ -116,7 +127,7 @@ function Wallet({ classNames }) {
116
127
  globalStore.mobileProfile.setOpen(false);
117
128
  }, children: "Deposit" })] })] }));
118
129
  }
119
- function Links({ router, classNames }) {
130
+ function Links({ router, classNames, }) {
120
131
  const accountProps = useAccountPropsContext();
121
132
  const globalStore = useGlobalStore(useShallow((ctx) => ({
122
133
  account: ctx.account,
package/dist/components/Bonuses/Bonuses.client.js CHANGED
@@ -76,7 +76,7 @@ function Bonus(props) {
76
76
  const turnoverRequirement = parseDecimal(bonus.turnoverRequirement, 0);
77
77
  return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [_jsxs("div", { className: "relative", children: [promo.banner?.url ? (_jsx(Image, { src: promo.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("div", { style: {
78
78
  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)',
79
- }, children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'brand-dark', className: "absolute top-4 right-4", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] })] }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("h2", { className: "line-clamp-1 text-center font-semibold text-white text-xl", children: promo.name }), _jsx("div", { className: "mt-2 flex items-baseline justify-center gap-2", children: _jsx("p", { className: "font-semibold text-3xl leading-none", children: formatNumber(bonus.balance, {
79
+ }, children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'brand-dark', className: "absolute top-4 right-4", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] })] }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("h2", { className: "line-clamp-1 text-center font-semibold text-xl", children: promo.name }), _jsx("div", { className: "mt-2 flex items-baseline justify-center gap-2", children: _jsx("p", { className: "font-semibold text-3xl leading-none", children: formatNumber(bonus.balance, {
80
80
  currency: localeInfo.currency.code,
81
81
  minDecimalPlaces: 2,
82
82
  }) }) }), _jsxs("div", { className: "mt-md flex justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Wagering ", currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [bonus.currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { min: 0, max: 100, value: clamp(currentTurnoverRequirementContributionPercentage, 0, 100), className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", variant: "outline", className: "mt-6", asChild: true, children: _jsx(Link, { href: `${props.viewDetailsUrl}/${bonus.id}`, children: "See More" }) })] })] }));
@@ -114,7 +114,7 @@ function CashbackBonus(props) {
114
114
  belowMinimumCashbackThreshold;
115
115
  return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [cashback.banner?.url ? (_jsx(Image, { src: cashback.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("div", { style: {
116
116
  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)',
117
- }, children: _jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "line-clamp-1 text-center font-semibold text-white text-xl", children: cashback.name }), _jsx("h2", { className: "mt-2 text-center font-semibold text-3xl text-white", children: formatNumber(currentAccumulatedCashbackAmount, {
117
+ }, children: _jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: 'line-clamp-1 text-center font-semibold text-xl', children: cashback.name }), _jsx("h2", { className: "mt-2 text-center font-semibold text-3xl ", children: formatNumber(currentAccumulatedCashbackAmount, {
118
118
  currency: localeInfo.currency.code,
119
119
  minDecimalPlaces: 2,
120
120
  }) }), _jsx("div", { className: "mt-2 line-clamp-1 text-center text-sm text-text-secondary-700", dangerouslySetInnerHTML: {
@@ -134,7 +134,7 @@ function SpotBonus() {
134
134
  })));
135
135
  return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [_jsx("div", { style: {
136
136
  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)',
137
- }, children: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[11.25rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "text-center font-semibold text-white text-xl", children: "Special Rewards" }), _jsx("p", { className: "mt-2 text-center font-semibold text-3xl text-white", children: "Promo Code" }), _jsx("p", { className: "mt-2 text-center text-sm text-text-secondary-700", children: "Have a promo code? Don\u2019t miss out, redeem it now\u00A0and\u00A0enjoy exclusive rewards!" }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", onClick: () => {
137
+ }, children: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[11.25rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "text-center font-semibold text-xl", children: "Special Rewards" }), _jsx("p", { className: "mt-2 text-center font-semibold text-3xl", children: "Promo Code" }), _jsx("p", { className: "mt-2 text-center text-sm text-text-secondary-700", children: "Have a promo code? Don\u2019t miss out, redeem it now\u00A0and\u00A0enjoy exclusive rewards!" }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", onClick: () => {
138
138
  globalStore.spotBonus.setOpen(true);
139
139
  }, className: "mt-6", children: "Enter Promo Code" })] })] }));
140
140
  }
package/dist/components/Quests/WageringQuest.js CHANGED
@@ -20,7 +20,7 @@ export function WageringQuest() {
20
20
  const localeInfo = useLocaleInfo();
21
21
  const { progressPercentage, turnover, targetTurnover, name, description, endDateTime, bonus, status, } = quest;
22
22
  const remainingTime = useRemainingTime(endDateTime);
23
- return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-full w-full flex-col space-y-6 rounded-2xl border border-border-primary bg-bg-tertiary px-4 pt-5 pb-6", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(RemainingTime, {}), _jsx("button", { type: "button", className: "flex size-9 cursor-pointer items-center justify-center rounded-md border border-border-secondary bg-bg-primary", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "size-5 text-text-disabled" }) })] }), _jsx("p", { className: "font-semibold text-xl", children: name }), _jsx(Prose, { className: "text-wrap font-normal text-sm text-text-secondary-700", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Progress ", parseDecimal(progressPercentage, 0).toFixed(2), "%"] }), _jsxs("p", { children: [turnover, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-bg-primary", children: _jsx("div", { className: "h-full rounded-full bg-utility-brand-600 transition-all duration-300", style: { width: `${progressPercentage}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx("div", { className: "w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { className: twMerge(remainingTime.expired ||
23
+ return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-full w-full flex-col space-y-6 rounded-2xl border border-border-primary bg-bg-tertiary px-4 pt-5 pb-6", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(RemainingTime, {}), _jsx("button", { type: "button", className: "flex size-9 cursor-pointer items-center justify-center rounded-md border border-border-secondary bg-bg-primary", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "size-5 text-text-disabled" }) })] }), _jsx("p", { className: "font-semibold text-xl", children: name }), _jsx(Prose, { className: "text-wrap font-normal text-sm text-text-secondary-700", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Progress ", parseDecimal(progressPercentage, 0).toFixed(2), "%"] }), _jsxs("p", { children: [turnover, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-bg-primary", children: _jsx("div", { className: "h-full rounded-full bg-utility-brand-600 transition-all duration-300", style: { width: `${progressPercentage}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx("div", { className: "w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center", children: _jsxs("p", { className: twMerge(remainingTime.expired ||
24
24
  status === 'COMPLETED' ||
25
25
  status === 'FAILED'
26
26
  ? 'opacity-50 grayscale'
package/dist/styles/theme.css CHANGED
@@ -271,7 +271,10 @@
271
271
  --color-border-brand-solid: #ca8504;
272
272
  --color-border-dark: #373A41;
273
273
 
274
+
274
275
  --color-border-checkbox-primary: #373a41;
276
+ --color-bg-progress-bar-primary: var(--color-bg-primary);
277
+
275
278
 
276
279
  --font-sans: var(--font-sans);
277
280
  --font-mono: var(--font-mono);
package/dist/ui/Progress/progress.recipe.js CHANGED
@@ -11,7 +11,7 @@ export const progressRecipe = tv({
11
11
  unstyled: {},
12
12
  solid: {
13
13
  root: 'block w-full',
14
- track: 'w-full overflow-hidden rounded-full bg-bg-primary',
14
+ track: 'w-full overflow-hidden rounded-full bg-bg-progress-bar-primary',
15
15
  range: 'h-full rounded-full bg-brand-400 transition-all duration-200 ease-in-out',
16
16
  },
17
17
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.406",
3
+ "version": "0.0.407",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",