@opexa/portal-components 0.0.117 → 0.0.118

package/dist/components/CustomPromo/CustomPromo.d.ts

@@ -0,0 +1,7 @@
+import type { CustomPromo as TCustomPromo } from '../../types';
+export interface CustomPromoProps {
+    promo: TCustomPromo;
+    viewAllPromosUrl?: string;
+    className?: string;
+}
+export declare function CustomPromo(props: CustomPromoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CustomPromo/CustomPromo.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { Prose } from '../../ui/Prose/index.js';
+export function CustomPromo(props) {
+    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"] }), _jsx(Image, { src: props.promo.banner, alt: "", width: 1024, height: 600, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: props.promo.name }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
+                    __html: props.promo.description,
+                } })] }));
+}

package/dist/components/CustomPromo/index.d.ts

@@ -0,0 +1 @@
+export * from './CustomPromo';

package/dist/components/CustomPromo/index.js

@@ -0,0 +1 @@
+export * from './CustomPromo.js';

package/dist/components/Promos/Cashback.d.ts

@@ -3,5 +3,5 @@ interface CashbackProps {
     data: TCashback;
     viewDetailsUrl: string;
 }
-export declare function Cashback({ data, viewDetailsUrl, }: CashbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Cashback({ data, viewDetailsUrl }: CashbackProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Promos/Cashback.js

@@ -5,7 +5,7 @@ import { useShallow } from 'zustand/shallow';
 import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { Button } from '../../ui/Button/index.js';
-export function Cashback({ data, viewDetailsUrl = '/promos/cashback', }) {
+export function Cashback({ data, viewDetailsUrl }) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
     })));

package/dist/components/Promos/CustomPromo.d.ts

@@ -0,0 +1,7 @@
+import type { CustomPromo } from '../../types';
+interface CustomPromoProps {
+    data: CustomPromo;
+    viewDetailsUrl: string;
+}
+export declare function CustomPromo({ data, viewDetailsUrl }: CustomPromoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Promos/CustomPromo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { Button } from '../../ui/Button/index.js';
+export function CustomPromo({ data, viewDetailsUrl }) {
+    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: [_jsx(Image, { src: data.banner, alt: data.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: data.name }), _jsx("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${viewDetailsUrl}/${data.id}`, children: "Read more" }) }) })] })] }));
+}

package/dist/components/Promos/Promo.js

@@ -5,7 +5,7 @@ import { useShallow } from 'zustand/shallow';
 import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { Button } from '../../ui/Button/index.js';
-export function Promo({ data, viewDetailsUrl = '/promos' }) {
+export function Promo({ data, viewDetailsUrl }) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
     })));

package/dist/components/Promos/PromosCarousel.d.ts

@@ -1,3 +1,4 @@
+import type { CustomPromo as TCustomPromo } from '../../types';
 export interface PromosCarouselProps {
     layout: 'carousel';
     /** @default "Promotions" */
@@ -8,6 +9,17 @@ export interface PromosCarouselProps {
     viewPromoDetailsUrl?: string;
     /** @default "/promos/cashback" */
     viewCashbackDetailsUrl?: string;
+    /** @default "/promos/custom" */
+    viewCustomPromoDetailsUrl?: string;
+    customPromos?: TCustomPromo[];
+    /**
+     * @description List of promo IDs to be excluded from the list.
+     * @example
+     * ```ts
+     * exclude={['12345']}
+     * ```
+     */
+    exclude?: string[];
     className?: string;
 }
 export declare function PromosCarousel(props: PromosCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promos/PromosCarousel.js

@@ -13,13 +13,16 @@ import { Gift01Icon } from '../../icons/Gift01Icon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Empty } from '../shared/Empty.js';
 import { Cashback } from './Cashback.js';
+import { CustomPromo } from './CustomPromo.js';
 import { Promo } from './Promo.js';
 export function PromosCarousel(props) {
     const promosQuery = usePromosQuery();
     const cashbacksQuery = useCashbacksQuery();
-    const promos = promosQuery.data ?? [];
-    const cashbacks = cashbacksQuery.data ?? [];
-    const empty = promos.length <= 0 && cashbacks.length <= 0;
+    const blacklist = props.exclude ?? [];
+    const promos = promosQuery.data?.filter((item) => !blacklist.includes(item.id)) ?? [];
+    const cashbacks = cashbacksQuery.data?.filter((item) => !blacklist.includes(item.id)) ?? [];
+    const customPromos = props.customPromos?.filter((item) => !blacklist.includes(item.id)) ?? [];
+    const empty = promos.length <= 0 && cashbacks.length <= 0 && customPromos.length <= 0;
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
         slidesToScroll: 1,
@@ -45,5 +48,5 @@ export function PromosCarousel(props) {
         onSelect(emblaApi);
         emblaApi.on('reInit', onSelect).on('select', onSelect);
     }, [emblaApi, onSelect]);
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promotions' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/promos', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), empty && (_jsx(Empty, { icon: Gift01Icon, title: "No Promos", message: "No promo is currently available.", className: "mt-8" })), !empty && (_jsx(_Fragment, { children: _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsxs("div", { className: twMerge('grid auto-cols-[100%] grid-flow-col gap-1.5 lg:auto-cols-[calc((100%-(1.25rem*2))/3)] lg:gap-2xl'), children: [promos.map((promo) => (_jsx(Promo, { data: promo, viewDetailsUrl: props.viewPromoDetailsUrl ?? '/promos' }, promo.id))), cashbacks.map((cashback) => (_jsx(Cashback, { data: cashback, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/cashback' }, cashback.id)))] }) }) }))] }));
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promotions' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/promos', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), empty && (_jsx(Empty, { icon: Gift01Icon, title: "No Promos", message: "No promo is currently available.", className: "mt-8" })), !empty && (_jsx(_Fragment, { children: _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsxs("div", { className: twMerge('grid auto-cols-[100%] grid-flow-col gap-1.5 lg:auto-cols-[calc((100%-(1.25rem*2))/3)] lg:gap-2xl'), children: [promos.map((promo) => (_jsx(Promo, { data: promo, viewDetailsUrl: props.viewPromoDetailsUrl ?? '/promos' }, promo.id))), cashbacks.map((cashback) => (_jsx(Cashback, { data: cashback, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/cashback' }, cashback.id))), customPromos.map((customPromo) => (_jsx(CustomPromo, { data: customPromo, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/custom' }, customPromo.id)))] }) }) }))] }));
 }

package/dist/components/Promos/PromosGrid.d.ts

@@ -1,3 +1,4 @@
+import type { CustomPromo as TCustomPromo } from '../../types';
 export interface PromosGridProps {
     layout: 'grid';
     /** @default "Promotions" */
@@ -6,6 +7,8 @@ export interface PromosGridProps {
     viewPromoDetailsUrl?: string;
     /** @default "/promos/cashback" */
     viewCashbackDetailsUrl?: string;
+    customPromos?: TCustomPromo[];
+    exclude?: string[];
     className?: string;
 }
 export declare function PromosGrid(props: PromosGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promos/PromosGrid.js

@@ -3,15 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCashbacksQuery } from '../../client/hooks/useCashbacksQuery.js';
 import { usePromosQuery } from '../../client/hooks/usePromosQuery.js';
 import { Cashback } from './Cashback.js';
+import { CustomPromo } from './CustomPromo.js';
 import { Promo } from './Promo.js';
 export function PromosGrid(props) {
     const promosQuery = usePromosQuery();
     const cashbacksQuery = useCashbacksQuery();
-    const promos = promosQuery.data ?? [];
-    const cashbacks = cashbacksQuery.data ?? [];
-    const empty = promos.length <= 0 && cashbacks.length <= 0;
+    const blacklist = props.exclude ?? [];
+    const promos = promosQuery.data?.filter((item) => !blacklist.includes(item.id)) ?? [];
+    const cashbacks = cashbacksQuery.data?.filter((item) => !blacklist.includes(item.id)) ?? [];
+    const customPromos = props.customPromos?.filter((item) => !blacklist.includes(item.id)) ?? [];
+    const empty = promos.length <= 0 && cashbacks.length <= 0 && customPromos.length <= 0;
     if (empty) {
         return (_jsx("div", { className: props.className, children: _jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }) }));
     }
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", children: _jsxs("div", { className: "grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: [promos.map((promo) => (_jsx(Promo, { data: promo, viewDetailsUrl: props.viewPromoDetailsUrl ?? '/promos' }, promo.id))), cashbacks.map((cashback) => (_jsx(Cashback, { data: cashback, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/cashback' }, cashback.id)))] }) })] }));
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", children: _jsxs("div", { className: "grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: [promos.map((promo) => (_jsx(Promo, { data: promo, viewDetailsUrl: props.viewPromoDetailsUrl ?? '/promos' }, promo.id))), cashbacks.map((cashback) => (_jsx(Cashback, { data: cashback, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/cashback' }, cashback.id))), customPromos.map((customPromo) => (_jsx(CustomPromo, { data: customPromo, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/custom' }, customPromo.id)))] }) })] }));
 }

package/dist/types/index.d.ts

@@ -835,4 +835,11 @@ export interface News {
     content: string;
     category: string;
 }
+export interface CustomPromo {
+    id: string;
+    type: 'CUSTOM';
+    name: string;
+    banner: string;
+    description: string;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.117",
+  "version": "0.0.118",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",