2022-01-11 10:59:48 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { CheckIcon } from '@radix-ui/react-icons';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { useModule, useStatus } from '../../lib/react-utils';
|
|
|
|
import apiReducer, { modules } from '../../store/api/reducer';
|
|
|
|
import {
|
|
|
|
PageContainer,
|
|
|
|
PageHeader,
|
|
|
|
PageTitle,
|
|
|
|
TextBlock,
|
|
|
|
Field,
|
|
|
|
FlexRow,
|
|
|
|
Label,
|
|
|
|
Checkbox,
|
|
|
|
CheckboxIndicator,
|
|
|
|
InputBox,
|
|
|
|
FieldNote,
|
|
|
|
} from '../theme';
|
|
|
|
import SaveButton from '../components/utils/SaveButton';
|
|
|
|
import Interval from '../components/Interval';
|
2022-11-18 14:46:50 +00:00
|
|
|
import { useAppDispatch } from '../../store';
|
2022-01-11 10:59:48 +00:00
|
|
|
|
|
|
|
export default function LoyaltySettingsPage(): React.ReactElement {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const [config, setConfig, loadStatus] = useModule(modules.loyaltyConfig);
|
2022-11-18 14:46:50 +00:00
|
|
|
const dispatch = useAppDispatch();
|
2022-01-11 10:59:48 +00:00
|
|
|
const status = useStatus(loadStatus.save);
|
|
|
|
const busy =
|
|
|
|
loadStatus.load?.type !== 'success' || loadStatus.save?.type === 'pending';
|
|
|
|
|
|
|
|
const active = config?.enabled ?? false;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<PageContainer>
|
|
|
|
<PageHeader>
|
|
|
|
<PageTitle>{t('pages.loyalty-settings.title')}</PageTitle>
|
|
|
|
<TextBlock>{t('pages.loyalty-settings.subtitle')}</TextBlock>
|
|
|
|
<TextBlock>{t('pages.loyalty-settings.note')}</TextBlock>
|
|
|
|
<Field css={{ paddingTop: '1rem' }}>
|
|
|
|
<FlexRow spacing={1}>
|
|
|
|
<Checkbox
|
|
|
|
checked={active}
|
2022-11-18 14:46:50 +00:00
|
|
|
onCheckedChange={(ev) => {
|
|
|
|
void dispatch(
|
2022-01-11 10:59:48 +00:00
|
|
|
setConfig({
|
|
|
|
...config,
|
|
|
|
enabled: !!ev,
|
|
|
|
}),
|
2022-11-18 14:46:50 +00:00
|
|
|
);
|
|
|
|
}}
|
2022-01-11 10:59:48 +00:00
|
|
|
id="enable"
|
|
|
|
>
|
|
|
|
<CheckboxIndicator>{active && <CheckIcon />}</CheckboxIndicator>
|
|
|
|
</Checkbox>
|
|
|
|
<Label htmlFor="enable">{t('pages.loyalty-settings.enable')}</Label>
|
|
|
|
</FlexRow>
|
|
|
|
</Field>
|
|
|
|
</PageHeader>
|
2022-01-12 12:20:30 +00:00
|
|
|
<form
|
|
|
|
onSubmit={(e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
if (!(e.target as HTMLFormElement).checkValidity()) {
|
|
|
|
return;
|
|
|
|
}
|
2022-11-18 14:46:50 +00:00
|
|
|
void dispatch(setConfig(config));
|
2022-01-12 12:20:30 +00:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Field size="fullWidth">
|
|
|
|
<Label htmlFor="currency">
|
|
|
|
{t('pages.loyalty-settings.currency-name')}
|
|
|
|
</Label>
|
|
|
|
<InputBox
|
|
|
|
type="text"
|
|
|
|
id="currency"
|
|
|
|
placeholder={t('pages.loyalty-settings.currency-placeholder')}
|
|
|
|
value={config?.currency ?? ''}
|
|
|
|
disabled={!active || busy}
|
|
|
|
required={true}
|
2022-11-18 14:46:50 +00:00
|
|
|
onChange={(e) => {
|
|
|
|
void dispatch(
|
2022-01-12 12:20:30 +00:00
|
|
|
apiReducer.actions.loyaltyConfigChanged({
|
|
|
|
...config,
|
|
|
|
currency: e.target.value,
|
|
|
|
}),
|
2022-11-18 14:46:50 +00:00
|
|
|
);
|
|
|
|
}}
|
2022-01-12 12:20:30 +00:00
|
|
|
/>
|
|
|
|
<FieldNote>
|
|
|
|
{t('pages.loyalty-settings.currency-name-hint')}
|
|
|
|
</FieldNote>
|
|
|
|
</Field>
|
2022-01-11 10:59:48 +00:00
|
|
|
|
2022-01-12 12:20:30 +00:00
|
|
|
<Field size="fullWidth">
|
|
|
|
<Label htmlFor="reward">
|
|
|
|
{t('pages.loyalty-settings.reward', {
|
|
|
|
currency:
|
|
|
|
config?.currency ??
|
|
|
|
t('pages.loyalty-settings.currency-placeholder'),
|
|
|
|
})}
|
|
|
|
</Label>
|
|
|
|
<FlexRow align="left" spacing={1}>
|
2022-01-11 10:59:48 +00:00
|
|
|
<InputBox
|
|
|
|
type="number"
|
2022-01-12 12:20:30 +00:00
|
|
|
id="reward"
|
2022-01-11 10:59:48 +00:00
|
|
|
placeholder={'0'}
|
2022-01-12 12:20:30 +00:00
|
|
|
css={{ maxWidth: '5rem' }}
|
|
|
|
value={config?.points?.amount ?? '0'}
|
|
|
|
disabled={!active || busy}
|
2022-01-11 10:59:48 +00:00
|
|
|
required={true}
|
|
|
|
onChange={(e) => {
|
|
|
|
const intNum = parseInt(e.target.value, 10);
|
|
|
|
if (Number.isNaN(intNum)) {
|
|
|
|
return;
|
|
|
|
}
|
2022-11-18 14:46:50 +00:00
|
|
|
void dispatch(
|
2022-01-11 10:59:48 +00:00
|
|
|
apiReducer.actions.loyaltyConfigChanged({
|
|
|
|
...config,
|
|
|
|
points: {
|
|
|
|
...config.points,
|
2022-01-12 12:20:30 +00:00
|
|
|
amount: intNum,
|
2022-01-11 10:59:48 +00:00
|
|
|
},
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
/>
|
2022-01-12 12:20:30 +00:00
|
|
|
<div>{t('pages.loyalty-settings.every')}</div>
|
|
|
|
<Interval
|
|
|
|
id="timer-interval"
|
|
|
|
value={config?.points?.interval ?? 120}
|
|
|
|
onChange={(interval) => {
|
2022-11-18 14:46:50 +00:00
|
|
|
void dispatch(
|
2022-01-12 12:20:30 +00:00
|
|
|
apiReducer.actions.loyaltyConfigChanged({
|
|
|
|
...(config ?? {}),
|
|
|
|
points: {
|
|
|
|
...config?.points,
|
|
|
|
interval,
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
active={active && !busy}
|
|
|
|
min={5}
|
|
|
|
required={true}
|
|
|
|
/>
|
|
|
|
</FlexRow>
|
|
|
|
</Field>
|
|
|
|
|
|
|
|
<Field size="fullWidth">
|
|
|
|
<Label htmlFor="bonus">
|
|
|
|
{t('pages.loyalty-settings.bonus-points')}
|
|
|
|
</Label>
|
|
|
|
<InputBox
|
|
|
|
type="number"
|
|
|
|
id="bonus"
|
|
|
|
placeholder={'0'}
|
|
|
|
value={config?.points?.activity_bonus ?? '0'}
|
|
|
|
disabled={!active || busy}
|
|
|
|
required={true}
|
|
|
|
onChange={(e) => {
|
|
|
|
const intNum = parseInt(e.target.value, 10);
|
|
|
|
if (Number.isNaN(intNum)) {
|
|
|
|
return;
|
|
|
|
}
|
2022-11-18 14:46:50 +00:00
|
|
|
void dispatch(
|
2022-01-12 12:20:30 +00:00
|
|
|
apiReducer.actions.loyaltyConfigChanged({
|
|
|
|
...config,
|
|
|
|
points: {
|
|
|
|
...config.points,
|
|
|
|
activity_bonus: intNum,
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<FieldNote>{t('pages.loyalty-settings.bonus-points-hint')}</FieldNote>
|
|
|
|
</Field>
|
2022-01-11 10:59:48 +00:00
|
|
|
|
2022-01-12 12:20:30 +00:00
|
|
|
<SaveButton type="submit" status={status} />
|
|
|
|
</form>
|
2022-01-11 10:59:48 +00:00
|
|
|
</PageContainer>
|
|
|
|
);
|
|
|
|
}
|