@opexa/portal-components 0.0.59 → 0.0.61
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.
- package/dist/client/hooks/useGlobalStore.d.ts +2 -0
- package/dist/client/hooks/useGlobalStore.js +9 -0
- package/dist/components/Promo/Promo.client.js +19 -1
- package/dist/components/Promo/Promo.js +11 -4
- package/dist/components/Promos/PromoItem.d.ts +1 -1
- package/dist/components/Promos/PromoItem.js +12 -6
- package/package.json +3 -3
- package/dist/tsconfig.build.tsbuildinfo +0 -1
|
@@ -43,6 +43,8 @@ interface MessagesStore extends PopupStore {
|
|
|
43
43
|
interface DepositWithdrawalStore extends PopupStore {
|
|
44
44
|
tab: DepositWithdrawalTab;
|
|
45
45
|
setTab: (tab: DepositWithdrawalTab) => void;
|
|
46
|
+
promo: string | null;
|
|
47
|
+
setPromo: (promo: string | null) => void;
|
|
46
48
|
}
|
|
47
49
|
interface GlobalStore {
|
|
48
50
|
signUp: PopupStore;
|
|
@@ -52,6 +52,15 @@ export const useGlobalStore = create((set) => ({
|
|
|
52
52
|
},
|
|
53
53
|
}));
|
|
54
54
|
},
|
|
55
|
+
promo: null,
|
|
56
|
+
setPromo(promo) {
|
|
57
|
+
set((prev) => ({
|
|
58
|
+
depositWithdrawal: {
|
|
59
|
+
...prev.depositWithdrawal,
|
|
60
|
+
promo,
|
|
61
|
+
},
|
|
62
|
+
}));
|
|
63
|
+
},
|
|
55
64
|
},
|
|
56
65
|
gameLaunch: {
|
|
57
66
|
details: { status: 'WAITING' },
|
|
@@ -1,9 +1,27 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { tz } from '@date-fns/tz';
|
|
4
|
+
import { format } from 'date-fns';
|
|
3
5
|
import Image from 'next/image';
|
|
4
6
|
import Link from 'next/link';
|
|
7
|
+
import invariant from 'tiny-invariant';
|
|
8
|
+
import { useShallow } from 'zustand/shallow';
|
|
9
|
+
import { useGlobalStore, useLocaleInfo, usePromoQuery, } from '../../client/hooks/index.js';
|
|
5
10
|
import { ChevronLeftIcon } from '../../icons/index.js';
|
|
6
11
|
import { Button, Prose } from '../../ui/index.js';
|
|
7
12
|
export function Promo__client(props) {
|
|
8
|
-
|
|
13
|
+
const localeInfo = useLocaleInfo();
|
|
14
|
+
const promoQuery = usePromoQuery(props.id);
|
|
15
|
+
const promo = promoQuery.data;
|
|
16
|
+
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
17
|
+
depositWithdrawal: ctx.depositWithdrawal,
|
|
18
|
+
})));
|
|
19
|
+
invariant(promo);
|
|
20
|
+
return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: "", width: 1024, height: 600, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), _jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
|
|
21
|
+
globalStore.depositWithdrawal.setOpen(true);
|
|
22
|
+
}, children: "Deposit Now" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: promo.name }), _jsxs("p", { className: "text-text-secondary-700 mt-xl lg:mt-6", children: ["Ends", ' ', format(promo.activationEndDateTime, 'MM/dd/yyy hh:mm:ss A', {
|
|
23
|
+
in: tz(localeInfo.timezone),
|
|
24
|
+
})] }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
|
|
25
|
+
__html: promo.description,
|
|
26
|
+
} }), _jsxs(Prose, { className: "bg-bg-secondary mt-xl rounded-2xl p-2xl lg:mt-16 lg:p-4xl", children: [_jsx("h2", { children: "Conclusion" }), _jsx("p", { children: "Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse." }), _jsx("p", { children: "Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus." }), _jsx("p", { children: "Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor." })] })] }));
|
|
9
27
|
}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { notFound } from 'next/navigation';
|
|
3
|
+
import { prefetchPromoQuery } from '../../server/utils/index.js';
|
|
4
|
+
import { getPromoQueryKey, getQueryClient } from '../../utils/index.js';
|
|
2
5
|
import { Promo__client } from './Promo.client.js';
|
|
3
6
|
export async function Promo(props) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
await prefetchPromoQuery(props.id);
|
|
8
|
+
const promo = getQueryClient().getQueryData(getPromoQueryKey(props.id));
|
|
9
|
+
if (promo) {
|
|
10
|
+
return _jsx(Promo__client, { ...props });
|
|
11
|
+
}
|
|
12
|
+
else {
|
|
13
|
+
return notFound();
|
|
14
|
+
}
|
|
8
15
|
}
|
|
@@ -3,5 +3,5 @@ interface PromosItemProps {
|
|
|
3
3
|
promo: Promo;
|
|
4
4
|
redirectUrl?: string;
|
|
5
5
|
}
|
|
6
|
-
export declare function PromosItem(
|
|
6
|
+
export declare function PromosItem({ promo, redirectUrl, }: PromosItemProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Image from 'next/image';
|
|
3
3
|
import Link from 'next/link';
|
|
4
|
+
import { useShallow } from 'zustand/shallow';
|
|
5
|
+
import { useAvailablePromosQuery, useGlobalStore } from '../../client/hooks/index.js';
|
|
4
6
|
import { Button } from '../../ui/index.js';
|
|
5
|
-
export function PromosItem(
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
export function PromosItem({ promo, redirectUrl = '/promos', }) {
|
|
8
|
+
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
9
|
+
depositWithdrawal: ctx.depositWithdrawal,
|
|
10
|
+
})));
|
|
11
|
+
const availablePromos = useAvailablePromosQuery().data ?? [];
|
|
12
|
+
const claimablePromo = availablePromos.find((availablePromo) => availablePromo.id === promo.id);
|
|
13
|
+
return (_jsxs("div", { className: "border-border-secondary bg-accent-50 bg-bg-primary-alt relative flex h-full flex-col overflow-hidden rounded-2xl border", children: [promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: promo.name, width: 1200, height: 500, priority: true, className: "block aspect-[365/180] w-full object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pb-3xl pt-2xl", children: [_jsx("div", { className: "w-full grow text-center text-xl font-semibold", children: promo.name }), _jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: [claimablePromo && (_jsx(Button, { size: "sm", onClick: () => {
|
|
14
|
+
globalStore.depositWithdrawal.setOpen(true);
|
|
15
|
+
globalStore.depositWithdrawal.setPromo(promo.id);
|
|
16
|
+
}, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${redirectUrl}/${promo.id}`, children: "Read more" }) })] })] })] }));
|
|
11
17
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opexa/portal-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.61",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": {
|
|
6
6
|
"types": "./dist/components/index.d.ts",
|
|
@@ -56,8 +56,8 @@
|
|
|
56
56
|
},
|
|
57
57
|
"files": [
|
|
58
58
|
"dist",
|
|
59
|
-
"!dist
|
|
60
|
-
"!dist
|
|
59
|
+
"!dist/tsconfig.tsbuildinfo",
|
|
60
|
+
"!dist/tsconfig.build.tsbuildinfo"
|
|
61
61
|
],
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|