@opexa/portal-components 0.0.777 → 0.0.778
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.
|
@@ -122,17 +122,24 @@ function Rules(props) {
|
|
|
122
122
|
const session = sessionQuery.data;
|
|
123
123
|
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center p-4", children: _jsxs(Dialog.Content, { className: twMerge('mx-auto max-h-[80vh] min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-10 md:scrollbar:h-2 md:scrollbar:w-2 md:scrollbar-thumb:rounded-full md:scrollbar-thumb:bg-bg-quaternary md:scrollbar-track:bg-transparent', props.className?.root), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: quest?.name || 'Quest' }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "max-h-[30vh] overflow-y-auto", children: quest?.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
|
|
124
124
|
__html: quest.description,
|
|
125
|
-
}, className:
|
|
125
|
+
}, className: "mb-3" })) : (_jsx("p", { children: "Ready for a challenge? Complete them all and get amazing rewards!" })) }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-safe-area-inset-bottom h-8 bg-gradient-to-t from-bg-primary to-transparent" })] }), milestones.map((milestone) => (_jsxs("div", { className: twMerge('flex flex-col space-y-2.5 rounded-xl bg-bg-tertiary p-3', props.className?.milestone), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: twMerge('font-medium text-base text-text-primary-900', props.className?.milestoneName), children: milestone.label }), milestone.isCompleted && (_jsx("div", { className: twMerge('flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs', props.className?.completeBadge), children: "Complete" }))] }), milestone.description ? (_jsx(Prose, { className: props.className?.milestoneDescription, dangerouslySetInnerHTML: {
|
|
126
126
|
__html: milestone.description,
|
|
127
|
-
} })) : milestone.bonus ? (_jsxs("p", { className: twMerge('ml-1', props.className?.milestoneDescription), children: [quest?.milestones?.find(m => m.id === milestone.id)
|
|
128
|
-
|
|
129
|
-
`
|
|
130
|
-
|
|
131
|
-
`
|
|
127
|
+
} })) : milestone.bonus ? (_jsxs("p", { className: twMerge('ml-1', props.className?.milestoneDescription), children: [quest?.milestones?.find((m) => m.id === milestone.id)
|
|
128
|
+
?.type === 'REGISTRATION' &&
|
|
129
|
+
`Register and win Php ${milestone.bonus} Bonus`, quest?.milestones?.find((m) => m.id === milestone.id)
|
|
130
|
+
?.type === 'ACCOUNT_VERIFICATION' &&
|
|
131
|
+
`Verify your account and get Php ${milestone.bonus} Bonus`, quest?.milestones?.find((m) => m.id === milestone.id)
|
|
132
|
+
?.type === 'FIRST_DEPOSIT' &&
|
|
133
|
+
`Make your first deposit and get Php ${milestone.bonus} Bonus`, quest?.milestones?.find((m) => m.id === milestone.id)
|
|
134
|
+
?.type === 'IOS_FIRST_LOGIN' &&
|
|
135
|
+
`Login using iOS and get Php ${milestone.bonus} Bonus`, quest?.milestones?.find((m) => m.id === milestone.id)
|
|
136
|
+
?.type === 'ANDROID_FIRST_LOGIN' &&
|
|
132
137
|
`Login using Android and get Php ${milestone.bonus} Bonus`] })) : null, !milestone.isCompleted &&
|
|
133
|
-
(quest?.milestones?.find(m => m.id === milestone.id)
|
|
134
|
-
|
|
135
|
-
|
|
138
|
+
(quest?.milestones?.find((m) => m.id === milestone.id)
|
|
139
|
+
?.type === 'ACCOUNT_VERIFICATION' ||
|
|
140
|
+
quest?.milestones?.find((m) => m.id === milestone.id)
|
|
141
|
+
?.type === 'FIRST_DEPOSIT') && (_jsxs(Button, { size: "sm", onClick: () => {
|
|
142
|
+
const milestoneType = quest?.milestones?.find((m) => m.id === milestone.id)?.type;
|
|
136
143
|
if (milestoneType === 'ACCOUNT_VERIFICATION') {
|
|
137
144
|
setOpen(false);
|
|
138
145
|
globalStore.kyc.setOpen(true);
|
|
@@ -142,12 +149,17 @@ function Rules(props) {
|
|
|
142
149
|
globalStore.depositWithdrawal.setOpen(true);
|
|
143
150
|
globalStore.depositWithdrawal.setTab('DEPOSIT');
|
|
144
151
|
}
|
|
145
|
-
}, "aria-label": `Complete ${milestone.label}`, children: [quest?.milestones?.find(m
|
|
152
|
+
}, "aria-label": `Complete ${milestone.label}`, children: [quest?.milestones?.find((m) => m.id === milestone.id)
|
|
153
|
+
?.type === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), quest?.milestones?.find((m) => m.id === milestone.id)
|
|
154
|
+
?.type === 'FIRST_DEPOSIT'
|
|
146
155
|
? 'Deposit'
|
|
147
156
|
: 'Verify Account'] })), !milestone.isCompleted &&
|
|
148
|
-
quest?.milestones?.find(m => m.id === milestone.id)
|
|
149
|
-
|
|
150
|
-
quest?.milestones?.find(m => m.id === milestone.id)
|
|
157
|
+
quest?.milestones?.find((m) => m.id === milestone.id)
|
|
158
|
+
?.type === 'LINK_FACEBOOK_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Facebook Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(FacebookSignInTrigger, { text: "Link Facebook Account", className: "!mt-0 flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] })), !milestone.isCompleted &&
|
|
159
|
+
quest?.milestones?.find((m) => m.id === milestone.id)
|
|
160
|
+
?.type === 'LINK_GOOGLE_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Google Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(GoogleSignInButton, { text: "Link Google Account", className: "flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] })), !milestone.isCompleted &&
|
|
161
|
+
quest?.milestones?.find((m) => m.id === milestone.id)
|
|
162
|
+
?.type === 'CUSTOM_LINK' &&
|
|
151
163
|
(() => {
|
|
152
164
|
const baseUrl = process.env.NEXT_PUBLIC_ENVIRONMENT === 'development'
|
|
153
165
|
? 'https://api.trigger.development.opexa.io'
|
|
@@ -158,7 +170,7 @@ function Rules(props) {
|
|
|
158
170
|
}
|
|
159
171
|
function QuestMilestone({ label, bonus, isCompleted = false, checkboxControlStyle, className, }) {
|
|
160
172
|
const localeInfo = useLocaleInfo();
|
|
161
|
-
return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Checkbox.Root, { checked: isCompleted, children: [_jsx(Checkbox.Control, { className: "bg-transparent", style: checkboxControlStyle, children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: twMerge('font-medium text-sm leading-tight', className?.name), children: label }), _jsx(Checkbox.HiddenInput, {})] }), bonus && (_jsxs("div", { className: twMerge('rounded-[6px] border border-
|
|
173
|
+
return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Checkbox.Root, { checked: isCompleted, children: [_jsx(Checkbox.Control, { className: "bg-transparent", style: checkboxControlStyle, children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: twMerge('font-medium text-sm leading-tight', className?.name), children: label }), _jsx(Checkbox.HiddenInput, {})] }), bonus && (_jsxs("div", { className: twMerge('rounded-[6px] border border-utility-brand-200 bg-utility-brand-50 px-1.5 py-0.5 font-medium text-utility-brand-700 text-xs leading-tight', className?.bonus), children: ["+", formatNumber(bonus, {
|
|
162
174
|
currency: localeInfo.currency.code,
|
|
163
175
|
}), ' ', "Bonus"] }))] }));
|
|
164
176
|
}
|
|
@@ -46,7 +46,7 @@ export function WageringQuestNext(props) {
|
|
|
46
46
|
const numericValue = parseFloat(value);
|
|
47
47
|
return Math.floor(numericValue).toString();
|
|
48
48
|
};
|
|
49
|
-
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 gap-2", children: [_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-md border border-[#9E165F] bg-[#4E0D30] px-2 py-1", children: [_jsx(Flag05Icon, { className: "size-4 text-[#EE46BC]" }), _jsxs("p", { className: "font-medium text-[#FAA7E0] text-sm", children: ["Stage ", currentStage] })] }), _jsx(RemainingTime, {})] }), _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(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: `${progressPercentage}%` } }) }), _jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Stage ", currentStage, " of ", quest?.program.stages?.length] }), _jsxs("div", { className: twMerge('rounded-[6px] border border-
|
|
49
|
+
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 gap-2", children: [_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-md border border-[#9E165F] bg-[#4E0D30] px-2 py-1", children: [_jsx(Flag05Icon, { className: "size-4 text-[#EE46BC]" }), _jsxs("p", { className: "font-medium text-[#FAA7E0] text-sm", children: ["Stage ", currentStage] })] }), _jsx(RemainingTime, {})] }), _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(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: `${progressPercentage}%` } }) }), _jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Stage ", currentStage, " of ", quest?.program.stages?.length] }), _jsxs("div", { className: twMerge('rounded-[6px] border border-utility-brand-200 bg-utility-brand-50 px-1.5 py-0.5 font-medium text-utility-brand-700 text-xs leading-tight'), children: ["+", formatNumber(bonus, {
|
|
50
50
|
currency: localeInfo.currency.code,
|
|
51
51
|
}), ' ', "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 ?? [])
|
|
52
52
|
.filter(([_, value]) => +value > 0)
|
|
@@ -116,9 +116,9 @@ function StageItemUnlocked({ stageLevel, stageDetails, index, writableBonus, que
|
|
|
116
116
|
const progress = stageLevel > index + 1
|
|
117
117
|
? 100
|
|
118
118
|
: Math.round(Number(quest.progressPercentage ?? 0));
|
|
119
|
-
return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl bg-bg-tertiary p-3", children: [_jsxs("div", { className: "flex items-center justify-between space-x-2", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", index + 1] }), isCompleted ? (_jsx("div", { className: "w-fit rounded-full border border-[#085D3A] bg-[#053321] px-2 py-0.5", children: _jsx("p", { className: "font-medium text-[#75E0A7] text-sm", children: "Completed" }) })) : (_jsx("div", { className: "w-fit rounded-full border border-[#065986] bg-[#062C41] px-2 py-0.5", children: _jsx("p", { className: "font-medium text-[#7CD4FD] text-sm", children: "Ongoing" }) }))] }), _jsxs("div", { className: "flex justify-between pt-[11px] pb-2", children: [_jsxs("p", { className: "text-sm", children: ["Progress: ", progress, "%"] }), _jsx("div", { className:
|
|
119
|
+
return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl bg-bg-tertiary p-3", children: [_jsxs("div", { className: "flex items-center justify-between space-x-2", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", index + 1] }), isCompleted ? (_jsx("div", { className: "w-fit rounded-full border border-[#085D3A] bg-[#053321] px-2 py-0.5", children: _jsx("p", { className: "font-medium text-[#75E0A7] text-sm", children: "Completed" }) })) : (_jsx("div", { className: "w-fit rounded-full border border-[#065986] bg-[#062C41] px-2 py-0.5", children: _jsx("p", { className: "font-medium text-[#7CD4FD] text-sm", children: "Ongoing" }) }))] }), _jsxs("div", { className: "flex justify-between pt-[11px] pb-2", children: [_jsxs("p", { className: "text-sm", children: ["Progress: ", progress, "%"] }), _jsx("div", { className: twMerge('rounded-[6px] border border-utility-brand-200 bg-utility-brand-50 px-1.5 py-0.5 font-medium text-utility-brand-700 text-xs leading-tight'), children: stageLevel > index + 1
|
|
120
120
|
? `+ ${stageDetails.bonusAmount} Bonus`
|
|
121
|
-
: `+ ${writableBonus} Bonus` })] }), _jsx("div", { className:
|
|
121
|
+
: `+ ${writableBonus} Bonus` })] }), _jsx("div", { className: twMerge('h-2 w-full overflow-hidden rounded-full bg-bg-primary'), children: _jsx("div", { className: twMerge('h-full rounded-full bg-utility-brand-600 transition-all duration-300'), style: { width: `${progress}%` } }) })] }));
|
|
122
122
|
}
|
|
123
123
|
function StageItemLocked({ index }) {
|
|
124
124
|
return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl bg-bg-tertiary p-3", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", index + 1] }), _jsx("div", { className: "flex size-6 items-center justify-center rounded-full border border-utility-brand-200 bg-utility-brand-50", children: _jsx(Lock01Icon, { className: "size-3 stroke-2 font-medium text-utility-brand-500" }) })] }));
|