import { CheckIcon, PlusIcon } from '@radix-ui/react-icons'; import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { useModule } from '../../lib/react-utils'; import { modules } from '../../store/api/reducer'; import { LoyaltyReward } from '../../store/api/types'; import DialogContent from '../components/DialogContent'; import Interval from '../components/Interval'; import { Button, Checkbox, CheckboxIndicator, Dialog, DialogActions, Field, FieldNote, FlexRow, InputBox, Label, PageContainer, PageHeader, PageTitle, TabButton, TabContainer, TabContent, TabList, Textarea, TextBlock, } from '../theme'; function RewardsPage() { const { t } = useTranslation(); const dispatch = useDispatch(); const [rewards, setRewards] = useModule(modules.loyaltyRewards); const [filter, setFilter] = useState(''); const [dialogReward, setDialogReward] = useState<{ open: boolean; new: boolean; reward: LoyaltyReward; }>({ open: false, new: false, reward: null }); const [requiredInfo, setRequiredInfo] = useState({ enabled: false, text: '', }); return ( <> setDialogReward({ ...dialogReward, open: state }) } >
{ e.preventDefault(); if (!(e.target as HTMLFormElement).checkValidity()) { return; } const reward = dialogReward.reward; if (requiredInfo.enabled) { reward.required_info = requiredInfo.text; } const index = rewards.findIndex((t) => t.id == reward.id); if (index >= 0) { const newRewards = rewards.slice(0); newRewards[index] = reward; dispatch(setRewards(newRewards)); } else { dispatch(setRewards([...rewards, reward])); } setDialogReward({ ...dialogReward, open: false }); }} > { setDialogReward({ ...dialogReward, reward: { ...dialogReward?.reward, id: e.target.value ?.toLowerCase() .replace(/[^a-zA-Z0-9]/gi, '-') ?? '', }, }); if ( dialogReward.new && rewards.find((r) => r.id === e.target.value) ) { (e.target as HTMLInputElement).setCustomValidity( t('pages.loyalty-rewards.id-already-in-use'), ); } else { (e.target as HTMLInputElement).setCustomValidity(''); } }} /> {t('pages.loyalty-rewards.reward-id-hint')} { setDialogReward({ ...dialogReward, reward: { ...dialogReward?.reward, name: e.target.value, }, }); }} /> {t('pages.loyalty-rewards.reward-name-hint')} { setDialogReward({ ...dialogReward, reward: { ...dialogReward?.reward, image: e.target.value, }, }); }} /> { setDialogReward({ ...dialogReward, reward: { ...dialogReward?.reward, price: parseInt(e.target.value), }, }); }} /> { setDialogReward({ ...dialogReward, reward: { ...dialogReward?.reward, cooldown, }, }); }} /> { setRequiredInfo({ ...requiredInfo, enabled: !!e, }); }} > {requiredInfo.enabled && } { setRequiredInfo({ ...requiredInfo, text: e.target.value }); }} />
setFilter(e.target.value)} /> ); } function GoalsPage() { const { t } = useTranslation(); return <>; } export default function LoyaltyRewardsPage(): React.ReactElement { const { t } = useTranslation(); return ( {t('pages.loyalty-rewards.title')} {t('pages.loyalty-rewards.subtitle')} {t('pages.loyalty-rewards.rewards-tab')} {t('pages.loyalty-rewards.goals-tab')} ); }