2022-01-12 12:20:30 +00:00
|
|
|
import React, { useState } from 'react';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
import { useModule, useUserPoints } from '../../lib/react-utils';
|
|
|
|
import { modules } from '../../store/api/reducer';
|
2022-01-14 00:41:23 +00:00
|
|
|
import { DataTable } from '../components/DataTable';
|
2022-01-12 12:20:30 +00:00
|
|
|
import {
|
2022-01-14 00:41:23 +00:00
|
|
|
Button,
|
|
|
|
Field,
|
|
|
|
InputBox,
|
2022-01-12 12:20:30 +00:00
|
|
|
PageContainer,
|
|
|
|
PageHeader,
|
|
|
|
PageTitle,
|
|
|
|
TabButton,
|
|
|
|
TabContainer,
|
|
|
|
TabContent,
|
|
|
|
TabList,
|
|
|
|
TextBlock,
|
|
|
|
} from '../theme';
|
2022-01-14 00:41:23 +00:00
|
|
|
import { TableCell, TableRow } from '../theme/table';
|
2022-01-12 12:20:30 +00:00
|
|
|
|
|
|
|
interface UserSortingOrder {
|
|
|
|
key: 'user' | 'points';
|
|
|
|
order: 'asc' | 'desc';
|
|
|
|
}
|
|
|
|
|
|
|
|
function RewardQueue() {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const [queue, setQueue] = useModule(modules.loyaltyRedeemQueue);
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
|
|
|
// Big hack but this is required or refunds break
|
|
|
|
useUserPoints();
|
|
|
|
|
|
|
|
return <></>;
|
|
|
|
}
|
|
|
|
|
|
|
|
function UserList() {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const users = useUserPoints();
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
2022-01-14 00:41:23 +00:00
|
|
|
const [config] = useModule(modules.loyaltyConfig);
|
2022-01-12 12:20:30 +00:00
|
|
|
const [usernameFilter, setUsernameFilter] = useState('');
|
2022-01-14 00:41:23 +00:00
|
|
|
const filtered = Object.entries(users ?? [])
|
|
|
|
.filter(([user]) => user.includes(usernameFilter))
|
|
|
|
.map(([username, data]) => ({
|
|
|
|
username,
|
|
|
|
...data,
|
|
|
|
}));
|
|
|
|
type UserEntry = typeof filtered[0];
|
2022-01-12 12:20:30 +00:00
|
|
|
|
2022-01-14 00:41:23 +00:00
|
|
|
type SortFn = (a: UserEntry, b: UserEntry) => number;
|
2022-01-12 12:20:30 +00:00
|
|
|
|
2022-01-14 00:41:23 +00:00
|
|
|
const sortfn = (key: keyof UserEntry): SortFn => {
|
|
|
|
switch (key) {
|
|
|
|
case 'username': {
|
|
|
|
return (a, b) => a.username.localeCompare(b.username);
|
2022-01-12 12:20:30 +00:00
|
|
|
}
|
2022-01-14 00:41:23 +00:00
|
|
|
case 'points': {
|
|
|
|
return (a: UserEntry, b: UserEntry) => a.points - b.points;
|
2022-01-12 12:20:30 +00:00
|
|
|
}
|
2022-01-14 00:41:23 +00:00
|
|
|
}
|
|
|
|
};
|
2022-01-12 12:20:30 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2022-01-14 00:41:23 +00:00
|
|
|
<Field size="fullWidth" spacing="none">
|
|
|
|
<InputBox
|
|
|
|
placeholder={t('pages.loyalty-queue.username-filter')}
|
|
|
|
value={usernameFilter}
|
|
|
|
onChange={(e) => setUsernameFilter(e.target.value)}
|
|
|
|
/>
|
|
|
|
</Field>
|
|
|
|
<DataTable
|
|
|
|
sort={sortfn}
|
|
|
|
data={filtered}
|
|
|
|
columns={[
|
|
|
|
{
|
|
|
|
key: 'username',
|
|
|
|
title: t('pages.loyalty-queue.username'),
|
|
|
|
sortable: true,
|
|
|
|
style: {
|
|
|
|
width: '100%',
|
|
|
|
textAlign: 'left',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'points',
|
|
|
|
title: config?.currency || t('pages.loyalty-queue.points'),
|
|
|
|
sortable: true,
|
|
|
|
style: {
|
|
|
|
textTransform: 'capitalize',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'actions',
|
|
|
|
title: '',
|
|
|
|
sortable: false,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
defaultSort={{ key: 'points', order: 'desc' }}
|
|
|
|
view={({ username, points }) => (
|
|
|
|
<TableRow key="username">
|
|
|
|
<TableCell css={{ width: '100%' }}>{username}</TableCell>
|
|
|
|
<TableCell>{points}</TableCell>
|
|
|
|
<TableCell>
|
|
|
|
<Button size="small">Edit</Button>
|
|
|
|
</TableCell>
|
|
|
|
</TableRow>
|
|
|
|
)}
|
2022-01-12 12:20:30 +00:00
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function LoyaltyQueuePage(): React.ReactElement {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<PageContainer>
|
|
|
|
<PageHeader>
|
|
|
|
<PageTitle>{t('pages.loyalty-queue.title')}</PageTitle>
|
|
|
|
<TextBlock>{t('pages.loyalty-queue.subtitle')}</TextBlock>
|
|
|
|
</PageHeader>
|
|
|
|
<TabContainer defaultValue="users">
|
|
|
|
<TabList>
|
|
|
|
<TabButton value="queue">
|
|
|
|
{t('pages.loyalty-queue.queue-tab')}
|
|
|
|
</TabButton>
|
|
|
|
<TabButton value="users">
|
|
|
|
{t('pages.loyalty-queue.users-tab')}
|
|
|
|
</TabButton>
|
|
|
|
</TabList>
|
|
|
|
<TabContent value="queue">
|
|
|
|
<RewardQueue />
|
|
|
|
</TabContent>
|
|
|
|
<TabContent value="users">
|
|
|
|
<UserList />
|
|
|
|
</TabContent>
|
|
|
|
</TabContainer>
|
|
|
|
</PageContainer>
|
|
|
|
);
|
|
|
|
}
|