@opexa/portal-components 0.0.264 → 0.0.265

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 (7) hide show
  1. package/dist/components/GameProviders/GameProvidersCarousel.js +7 -1
  2. package/dist/components/Search/Search.lazy.js +12 -7
  3. package/dist/components/TransactionRecords/DepositRecordsTable.js +1 -1
  4. package/dist/components/TransactionRecords/TableFilters.js +2 -0
  5. package/dist/components/TransactionRecords/WithdrawalRecordsTable.js +1 -1
  6. package/dist/constants/GameProvider.js +10 -10
  7. package/package.json +1 -2
package/dist/components/GameProviders/GameProvidersCarousel.js CHANGED
@@ -15,7 +15,13 @@ import { callIfFn } from '../../utils/callIfFn.js';
15
15
  export function GameProvidersCarousel(props) {
16
16
  const [emblaRef, emblaApi] = useEmblaCarousel({
17
17
  align: 'start',
18
- slidesToScroll: 1,
18
+ slidesToScroll: 3,
19
+ breakpoints: {
20
+ '(min-width: 1024px)': {
21
+ align: 'start',
22
+ slidesToScroll: 6,
23
+ },
24
+ },
19
25
  });
20
26
  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
21
27
  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
package/dist/components/Search/Search.lazy.js CHANGED
@@ -22,6 +22,12 @@ import { Presence } from '../../ui/Presence/index.js';
22
22
  import { callIfFn } from '../../utils/callIfFn.js';
23
23
  import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
24
24
  import { GameLaunchTrigger } from '../GameLaunch/index.js';
25
+ function lookup(value, compare) {
26
+ return value
27
+ .toLowerCase()
28
+ .replace(/\s+/g, '')
29
+ .includes(compare.toLowerCase().replace(/\s+/g, ''));
30
+ }
25
31
  export function Search(props) {
26
32
  const globalStore = useGlobalStore(useShallow((ctx) => ({
27
33
  search: ctx.search,
@@ -30,10 +36,9 @@ export function Search(props) {
30
36
  const [search, setSearch] = useState('');
31
37
  const gameProviders = props.gameProviders
32
38
  .map((provider) => GAME_PROVIDER_DATA[provider])
33
- .filter((provider) => provider.name
34
- .toLowerCase()
35
- .replace(/\s+/g, '')
36
- .includes(search.toLowerCase().replace(/\s+/g, '')));
39
+ .filter((provider) => {
40
+ return lookup(provider.name, search) || lookup(provider.slug, search);
41
+ });
37
42
  const gamesQuery = useGamesQuery({
38
43
  first: 18,
39
44
  search: gameProviders.length > 0 ? undefined : search,
@@ -48,7 +53,7 @@ export function Search(props) {
48
53
  },
49
54
  },
50
55
  }, {
51
- enabled: search.length >= 3,
56
+ enabled: search.length >= 2,
52
57
  });
53
58
  const games = gamesQuery.data?.pages
54
59
  .map((page) => page.edges.map((edge) => edge.node))
@@ -68,10 +73,10 @@ export function Search(props) {
68
73
  return (_jsx(Dialog.Root, { open: globalStore.search.open, onOpenChange: (details) => {
69
74
  globalStore.search.setOpen(details.open);
70
75
  setSearch('');
71
- }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full overflow-y-auto pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:pt-0", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "text-text-quinary size-6" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(DebouncedInput, { ref: inputRef, value: search, placeholder: props.placeholder ?? 'Search', onChange: setSearch }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold", onClick: () => {
76
+ }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full overflow-y-auto pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:px-2 lg:pt-0", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "text-text-quinary size-6" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(DebouncedInput, { ref: inputRef, value: search, placeholder: props.placeholder ?? 'Search', onChange: setSearch }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold", onClick: () => {
72
77
  setSearch('');
73
78
  inputRef.current?.focus();
74
- }, children: "Clear" }) })] }) }), _jsx("div", { className: "lg:bg-bg-primary lg:border-border-primary mt-2xl p-xl pb-3xl lg:mt-2 lg:max-h-[41rem] lg:overflow-y-auto lg:rounded-xl lg:border", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game or provider." })) : search.length >= 1 && search.length <= 2 ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [empty && _jsx(Alert, { message: "No results found" }), !empty && (_jsxs(_Fragment, { children: [gameProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Providers" }), _jsx("div", { className: "mb-3xl mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), "aria-label": `View ${provider.name} games`, className: twMerge('bg-brand-800 flex h-14 w-full items-center rounded-md', classNames.providerThumbnailRoot), onClick: () => {
79
+ }, children: "Clear" }) })] }) }), _jsx("div", { className: "lg:bg-bg-primary lg:border-border-primary mt-2xl p-xl pb-3xl lg:mt-2 lg:max-h-[41rem] lg:overflow-y-auto lg:rounded-xl lg:border", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game or provider." })) : search.length === 1 ? (_jsx(Alert, { message: "Search requires at least 2 characters." })) : (_jsxs(_Fragment, { children: [empty && _jsx(Alert, { message: "No results found" }), !empty && (_jsxs(_Fragment, { children: [gameProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Providers" }), _jsx("div", { className: "mb-3xl mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), "aria-label": `View ${provider.name} games`, className: twMerge('bg-brand-800 flex h-14 w-full items-center rounded-md', classNames.providerThumbnailRoot), onClick: () => {
75
80
  globalStore.search.setOpen(false);
76
81
  }, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ??
77
82
  provider.logo, alt: "", width: 100, height: 50, className: twMerge('mx-auto h-auto w-full', classNames.providerThumbnailImage) }) }, provider.id))) })] })), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Games" }), _jsx("div", { className: "mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { game: game, className: twMerge('block w-full shadow-sm', classNames.gameThumbnailRoot), onClick: () => {
package/dist/components/TransactionRecords/DepositRecordsTable.js CHANGED
@@ -85,7 +85,7 @@ export function DepositRecordsTable() {
85
85
  depositStatus: true,
86
86
  } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
87
87
  ? 'Fetching latest deposit records...'
88
- : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Deposit No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Deposit Method" }), _jsx(Table.Heading, { children: "Applied Amount" }), _jsx(Table.Heading, { children: "Received Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Deposit Time" }), _jsx(Table.Heading, { children: "Received Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.depositNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
88
+ : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Deposit No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Deposit Method" }), _jsx(Table.Heading, { children: "Applied Amount" }), _jsx(Table.Heading, { children: "Received Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Deposit Time" }), _jsx(Table.Heading, { children: "Received Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.depositNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
89
89
  delimiter: capitalize.delimiters.UNDERSCORE,
90
90
  }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
91
91
  currency: localeInfo.currency.code,
package/dist/components/TransactionRecords/TableFilters.js CHANGED
@@ -21,6 +21,7 @@ const DEPOSIT_TYPES = [
21
21
  'MAYA',
22
22
  'MANUAL',
23
23
  'ONLINE_BANK',
24
+ 'QR_PH'
24
25
  ];
25
26
  const DEPOSIT_TYPES_MAP = {
26
27
  BANK: 'Bank',
@@ -28,6 +29,7 @@ const DEPOSIT_TYPES_MAP = {
28
29
  MAYA: 'Maya',
29
30
  MANUAL: 'Manual',
30
31
  ONLINE_BANK: 'Online Bank',
32
+ QR_PH: 'QR PH',
31
33
  };
32
34
  const DEPOSIT_STATUSES = [
33
35
  'ACCEPTED',
package/dist/components/TransactionRecords/WithdrawalRecordsTable.js CHANGED
@@ -85,7 +85,7 @@ export function WithdrawalRecordsTable() {
85
85
  withdrawalStatus: true,
86
86
  } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
87
87
  ? 'Fetching latest withdrawal records...'
88
- : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
88
+ : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
89
89
  delimiter: capitalize.delimiters.UNDERSCORE,
90
90
  }) }), _jsx(Table.Cell, { className: "!py-1", children: data.recipientMobileNumber }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
91
91
  currency: localeInfo.currency.code,
package/dist/constants/GameProvider.js CHANGED
@@ -82,13 +82,13 @@ export const GAME_PROVIDER_DATA = {
82
82
  },
83
83
  DG: {
84
84
  id: 'DG',
85
- name: 'DG',
85
+ name: 'Dynasty Gaming',
86
86
  slug: 'dg',
87
87
  logo: dg,
88
88
  },
89
89
  DRBINGO: {
90
90
  id: 'DRBINGO',
91
- name: 'DrBingo',
91
+ name: 'Dr Bingo',
92
92
  slug: 'drbingo',
93
93
  logo: drbingo,
94
94
  },
@@ -106,7 +106,7 @@ export const GAME_PROVIDER_DATA = {
106
106
  },
107
107
  EVOLUTION: {
108
108
  id: 'EVOLUTION',
109
- name: 'Evolution',
109
+ name: 'Evolution Gaming',
110
110
  slug: 'evolution',
111
111
  logo: evolution,
112
112
  },
@@ -136,13 +136,13 @@ export const GAME_PROVIDER_DATA = {
136
136
  },
137
137
  HACKSAW: {
138
138
  id: 'HACKSAW',
139
- name: 'Hacksaw',
139
+ name: 'Hacksaw Gaming',
140
140
  slug: 'hacksaw',
141
141
  logo: hacksaw,
142
142
  },
143
143
  HOLLYWOODTV: {
144
144
  id: 'HOLLYWOODTV',
145
- name: 'HollywoodTV',
145
+ name: 'Hollywood TV',
146
146
  slug: 'hollywoodtv',
147
147
  logo: hollywoodtv,
148
148
  },
@@ -184,7 +184,7 @@ export const GAME_PROVIDER_DATA = {
184
184
  },
185
185
  KINGMAKER: {
186
186
  id: 'KINGMAKER',
187
- name: 'Kingmaker',
187
+ name: 'King Maker',
188
188
  slug: 'kingmaker',
189
189
  logo: kingmaker,
190
190
  },
@@ -202,7 +202,7 @@ export const GAME_PROVIDER_DATA = {
202
202
  },
203
203
  MICROGAMING: {
204
204
  id: 'MICROGAMING',
205
- name: 'Microgaming',
205
+ name: 'Micro Gaming',
206
206
  slug: 'microgaming',
207
207
  logo: microgaming,
208
208
  },
@@ -220,7 +220,7 @@ export const GAME_PROVIDER_DATA = {
220
220
  },
221
221
  PGSOFT: {
222
222
  id: 'PGSOFT',
223
- name: 'PG',
223
+ name: 'PG Soft',
224
224
  slug: 'pgsoft',
225
225
  logo: pgsoft,
226
226
  },
@@ -244,7 +244,7 @@ export const GAME_PROVIDER_DATA = {
244
244
  },
245
245
  RTG: {
246
246
  id: 'RTG',
247
- name: 'RTG',
247
+ name: 'Realtime Gaming',
248
248
  slug: 'rtg',
249
249
  logo: rtg,
250
250
  },
@@ -268,7 +268,7 @@ export const GAME_PROVIDER_DATA = {
268
268
  },
269
269
  YELLOWBAT: {
270
270
  id: 'YELLOWBAT',
271
- name: 'YellowBat',
271
+ name: 'Yellow Bat',
272
272
  slug: 'yellowbat',
273
273
  logo: yellowbat,
274
274
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.264",
3
+ "version": "0.0.265",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",
@@ -89,7 +89,6 @@
89
89
  "is-mobile": "^5.0.0",
90
90
  "lodash-es": "^4.17.21",
91
91
  "react-image-file-resizer": "^0.4.8",
92
- "sharp": "^0.34.2",
93
92
  "tailwind-merge": "^3.3.1",
94
93
  "tailwind-variants": "^1.0.0",
95
94
  "tailwind-zag": "^1.0.2",