@opexa/portal-components 0.0.1099 → 0.0.1100
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.
|
@@ -30,6 +30,7 @@ export function WageringQuest(props) {
|
|
|
30
30
|
const disclosure = useDisclosure();
|
|
31
31
|
const localeInfo = useLocaleInfo();
|
|
32
32
|
const { progressPercentage, turnover, targetTurnover, name, description, endDateTime, bonus, status, } = quest;
|
|
33
|
+
const progressValue = status === 'COMPLETED' ? 100 : parseDecimal(progressPercentage, 0);
|
|
33
34
|
const remainingTime = useRemainingTime(endDateTime);
|
|
34
35
|
const formatTurnover = (value) => {
|
|
35
36
|
if (showTurnoverDecimals) {
|
|
@@ -39,7 +40,7 @@ export function WageringQuest(props) {
|
|
|
39
40
|
const numericValue = parseFloat(value);
|
|
40
41
|
return Math.floor(numericValue).toString();
|
|
41
42
|
};
|
|
42
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('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', classNames?.root), 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 ",
|
|
43
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('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', classNames?.root), 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 ", progressValue.toFixed(0), "%"] }), _jsxs("p", { children: [formatTurnover(turnover), _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _jsx("div", { className: twMerge('h-2 w-full overflow-hidden rounded-full bg-bg-primary', classNames?.progressBarContainer), children: _jsx("div", { className: twMerge('h-full rounded-full bg-utility-brand-600 transition-all duration-300', classNames?.progressBar), style: { width: `${progressValue}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx("div", { className: twMerge('w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center', classNames?.bonusContainer), children: status === 'COMPLETED' && customComplete ? (_jsx("div", { className: twMerge(classNames?.bonusText), children: customComplete })) : (_jsxs("p", { className: twMerge((remainingTime.expired ||
|
|
43
44
|
status === 'COMPLETED' ||
|
|
44
45
|
status === 'FAILED') &&
|
|
45
46
|
'opacity-50 grayscale', classNames?.bonusText), children: ["Complete to get", ' ', _jsxs("span", { className: twMerge('text-brand-400', classNames?.bonusAmount), children: ["\u20B1", bonus] }), ' ', "bonus!"] })) }) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, gameProviderCarousel: props.gameProviderCarousel, gameProviders: Object.entries(quest.turnoverRequirementContributionPercentagePerGameProvider ?? [])
|
|
@@ -40,6 +40,7 @@ export function WageringQuestNext(props) {
|
|
|
40
40
|
? (quest?.stage ?? 0) + 1
|
|
41
41
|
: quest.stage;
|
|
42
42
|
}, [quest.stage]);
|
|
43
|
+
const progressValue = status === 'COMPLETED' ? 100 : parseDecimal(progressPercentage, 0);
|
|
43
44
|
const formatTurnover = (value) => {
|
|
44
45
|
if (showTurnoverDecimals) {
|
|
45
46
|
return value;
|
|
@@ -55,7 +56,7 @@ export function WageringQuestNext(props) {
|
|
|
55
56
|
completedBadgeLabel: classNames?.completedBadgeLabel,
|
|
56
57
|
failedBadgeRoot: classNames?.failedBadgeRoot,
|
|
57
58
|
failedBadgeLabel: classNames?.failedBadgeLabel,
|
|
58
|
-
} })] }), _jsx("p", { className: twMerge('font-semibold text-xl', classNames?.title), children: name }), _jsx(Prose, { className: twMerge('text-wrap font-normal text-sm text-text-secondary-700', classNames?.description), dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: twMerge('group flex items-center justify-between text-text-primary-brand', classNames?.progressLabel), children: [_jsxs("p", { children: ["Progress ",
|
|
59
|
+
} })] }), _jsx("p", { className: twMerge('font-semibold text-xl', classNames?.title), children: name }), _jsx(Prose, { className: twMerge('text-wrap font-normal text-sm text-text-secondary-700', classNames?.description), dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: twMerge('group flex items-center justify-between text-text-primary-brand', classNames?.progressLabel), children: [_jsxs("p", { children: ["Progress ", progressValue.toFixed(0), "%"] }), _jsxs("p", { children: [formatTurnover(turnover), _jsxs("span", { children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _jsx(Progress.Root, { max: 100, className: twMerge('h-2 rounded-full bg-bg-primary', classNames?.progressRoot), value: progressValue, children: _jsx(Progress.Track, { className: classNames?.progressTrack, children: _jsx(Progress.Range, { className: classNames?.progressRange }) }) }), _jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { className: classNames?.stageProgress, children: ["Stage ", currentStage, " of ", quest?.program.stages?.length] }), _jsx(Badge.Root, { className: twMerge('rounded-[6px] border border-utility-brand-200 bg-utility-brand-50 px-1.5 py-0.5', classNames?.bonusBadgeRoot), children: _jsxs(Badge.Label, { className: twMerge('font-medium text-utility-brand-700 text-xs leading-tight', classNames?.bonusBadgeLabel), children: ["+", ' ', formatNumber(bonus, {
|
|
59
60
|
currency: localeInfo.currency.code,
|
|
60
61
|
}), ' ', "Bonus"] }) })] })] }), status === 'IN_PROGRESS' && (_jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: () => disclosure.setOpen(true), "aria-label": "View Details", disabled: false, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" }) }))] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, gameProviderCarousel: props.gameProviderCarousel, gameProviders: Object.entries(quest.turnoverRequirementContributionPercentagePerGameProvider ?? [])
|
|
61
62
|
.filter(([_, value]) => +value > 0)
|