strimertul/frontend/src/ui/pages/loyalty/Rewards/GoalsTab.tsx

import { PlusIcon } from '@radix-ui/react-icons';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useModule } from '~/lib/react';
import { useAppDispatch } from '~/store';
import { modules } from '~/store/api/reducer';
import { LoyaltyGoal } from '~/store/api/types';
import AlertContent from '../../../components/AlertContent';
import DialogContent from '../../../components/DialogContent';
import {
  Button,
  ControlledInputBox,
  Dialog,
  DialogActions,
  Field,
  FieldNote,
  FlexRow,
  InputBox,
  Label,
  MultiButton,
  NoneText,
  styled,
  Textarea,
} from '../../../theme';
import { Alert, AlertTrigger } from '../../../theme/alert';
import {
  RewardActions,
  RewardCost,
  RewardDescription,
  RewardHeader,
  RewardID,
  RewardIcon,
  RewardItemContainer,
  RewardName,
} from './theme';

const GoalList = styled('div', { marginTop: '1rem' });

interface GoalItemProps {
  name: string;
  item: LoyaltyGoal;
  currency: string;
  onToggle?: () => void;
  onEdit?: () => void;
  onDelete?: () => void;
}
function GoalItem({
  name,
  item,
  currency,
  onToggle,
  onEdit,
  onDelete,
}: GoalItemProps): React.ReactElement {
  const { t } = useTranslation();

  return (
    <RewardItemContainer status={item.enabled ? 'enabled' : 'disabled'}>
      <RewardHeader>
        <RewardIcon>
          {item.image && (
            <img
              src={item.image}
              style={{ width: '32px', borderRadius: '0.25rem' }}
            />
          )}
        </RewardIcon>
        <RewardName status={item.enabled ? 'enabled' : 'disabled'}>
          {item.name} (<RewardID>{name}</RewardID>)
        </RewardName>
        <RewardCost>
          {item.contributed} / {item.total} {currency} (
          {Math.round((item.contributed / item.total) * 100)}%)
        </RewardCost>
        <RewardActions>
          <MultiButton>
            <Button
              styling="multi"
              size="small"
              onClick={() => (onToggle ? onToggle() : null)}
            >
              {item.enabled
                ? t('form-actions.disable')
                : t('form-actions.enable')}
            </Button>
            <Button
              styling="multi"
              size="small"
              onClick={() => (onEdit ? onEdit() : null)}
            >
              {t('form-actions.edit')}
            </Button>
            <Alert>
              <AlertTrigger asChild>
                <Button styling="multi" size="small">
                  {t('form-actions.delete')}
                </Button>
              </AlertTrigger>
              <AlertContent
                variation="danger"
                title={t('pages.loyalty-rewards.remove-reward-title', {
                  name: item.name,
                })}
                description={t('form-actions.warning-delete')}
                actionText={t('form-actions.delete')}
                actionButtonProps={{ variation: 'danger' }}
                showCancel={true}
                onAction={() => (onDelete ? onDelete() : null)}
              />
            </Alert>
          </MultiButton>
        </RewardActions>
      </RewardHeader>
      <RewardDescription>{item.description}</RewardDescription>
    </RewardItemContainer>
  );
}

export function GoalsTab() {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const [config] = useModule(modules.loyaltyConfig);
  const [goals, setGoals] = useModule(modules.loyaltyGoals);
  const [filter, setFilter] = useState('');
  const [dialogGoal, setDialogGoal] = useState<{
    open: boolean;
    new: boolean;
    goal: LoyaltyGoal;
  }>({ open: false, new: false, goal: null });
  const filterLC = filter.toLowerCase();

  const deleteGoal = (id: string): void => {
    void dispatch(setGoals(goals?.filter((r) => r.id !== id) ?? []));
  };

  const toggleGoal = (id: string): void => {
    void dispatch(
      setGoals(
        goals?.map((r) => {
          if (r.id === id) {
            return {
              ...r,
              enabled: !r.enabled,
            };
          }
          return r;
        }) ?? [],
      ),
    );
  };

  return (
    <>
      <Dialog
        open={dialogGoal.open}
        onOpenChange={(state) => setDialogGoal({ ...dialogGoal, open: state })}
      >
        <DialogContent
          title={
            dialogGoal.new
              ? t('pages.loyalty-rewards.create-goal')
              : t('pages.loyalty-rewards.edit-goal')
          }
          closeButton={true}
        >
          <form
            onSubmit={(e) => {
              e.preventDefault();
              if (!(e.target as HTMLFormElement).checkValidity()) {
                return;
              }
              const { goal } = dialogGoal;
              const index = goals?.findIndex((g) => g.id === goal.id);
              if (index >= 0) {
                const newGoals = goals.slice(0);
                newGoals[index] = goal;
                void dispatch(setGoals(newGoals));
              } else {
                void dispatch(setGoals([...(goals ?? []), goal]));
              }
              setDialogGoal({ ...dialogGoal, open: false });
            }}
          >
            <Field size="fullWidth" spacing="narrow">
              <Label htmlFor="goal-id">
                {t('pages.loyalty-rewards.goal-id')}
              </Label>
              <ControlledInputBox
                id="goal-id"
                type="text"
                required
                disabled={!dialogGoal.new}
                value={dialogGoal?.goal?.id}
                onChange={(e) => {
                  setDialogGoal({
                    ...dialogGoal,
                    goal: {
                      ...dialogGoal?.goal,
                      id:
                        e.target.value
                          ?.toLowerCase()
                          .replace(/[^a-z0-9]/gi, '-') ?? '',
                    },
                  });
                  if (
                    dialogGoal.new &&
                    goals.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('');
                  }
                }}
              />
              <FieldNote>{t('pages.loyalty-rewards.goal-id-hint')}</FieldNote>
            </Field>
            <Field size="fullWidth" spacing="narrow">
              <Label htmlFor="goal-name">
                {t('pages.loyalty-rewards.goal-name')}
              </Label>
              <InputBox
                id="goal-name"
                type="text"
                required
                value={dialogGoal?.goal?.name ?? ''}
                onChange={(e) => {
                  setDialogGoal({
                    ...dialogGoal,
                    goal: {
                      ...dialogGoal?.goal,
                      name: e.target.value,
                    },
                  });
                }}
              />
              <FieldNote>{t('pages.loyalty-rewards.goal-name-hint')}</FieldNote>
            </Field>
            <Field size="fullWidth" spacing="narrow">
              <Label htmlFor="goal-icon">
                {t('pages.loyalty-rewards.goal-icon')}
              </Label>
              <InputBox
                id="goal-icon"
                type="text"
                value={dialogGoal?.goal?.image ?? ''}
                onChange={(e) => {
                  setDialogGoal({
                    ...dialogGoal,
                    goal: {
                      ...dialogGoal?.goal,
                      image: e.target.value,
                    },
                  });
                }}
              />
            </Field>
            <Field size="fullWidth" spacing="narrow">
              <Label htmlFor="goal-desc">
                {t('pages.loyalty-rewards.goal-desc')}
              </Label>
              <Textarea
                id="goal-desc"
                value={dialogGoal?.goal?.description ?? ''}
                onChange={(e) => {
                  setDialogGoal({
                    ...dialogGoal,
                    goal: {
                      ...dialogGoal?.goal,
                      description: e.target.value,
                    },
                  });
                }}
              >
                {dialogGoal?.goal?.description ?? ''}
              </Textarea>
            </Field>
            <Field size="fullWidth" spacing="narrow">
              <Label htmlFor="goal-cost">
                {t('pages.loyalty-rewards.goal-cost')}
              </Label>
              <InputBox
                id="goal-cost"
                type="number"
                required
                defaultValue={dialogGoal?.goal?.total}
                onChange={(e) => {
                  setDialogGoal({
                    ...dialogGoal,
                    goal: {
                      ...dialogGoal?.goal,
                      total: parseInt(e.target.value, 10),
                    },
                  });
                }}
              />
            </Field>
            <DialogActions>
              <Button variation="primary" type="submit">
                {dialogGoal.new
                  ? t('form-actions.create')
                  : t('form-actions.edit')}
              </Button>
              <Button
                type="button"
                onClick={() => setDialogGoal({ ...dialogGoal, open: false })}
              >
                {t('form-actions.cancel')}
              </Button>
            </DialogActions>
          </form>
        </DialogContent>
      </Dialog>
      <Field size="fullWidth" spacing="none">
        <FlexRow css={{ flex: 1, alignItems: 'stretch' }} spacing="1">
          <Button
            variation="primary"
            onClick={() => {
              setDialogGoal({
                open: true,
                new: true,
                goal: {
                  id: '',
                  enabled: true,
                  name: '',
                  description: '',
                  image: '',
                  total: 0,
                  contributed: 0,
                  contributors: {},
                },
              });
            }}
          >
            <PlusIcon /> {t('pages.loyalty-rewards.create-goal')}
          </Button>
          <InputBox
            css={{ flex: 1 }}
            placeholder={t('pages.loyalty-rewards.goal-filter')}
            value={filter}
            onChange={(e) => setFilter(e.target.value)}
          />
        </FlexRow>
      </Field>
      <GoalList>
        {goals && goals.length > 0 ? (
          goals
            ?.filter(
              (r) =>
                r.name.toLowerCase().includes(filterLC) ||
                r.id.toLowerCase().includes(filterLC) ||
                r.description.toLowerCase().includes(filterLC),
            )
            .map((r) => (
              <GoalItem
                key={r.id}
                name={r.id}
                item={r}
                currency={(
                  config?.currency || t('pages.loyalty-queue.points')
                ).toLowerCase()}
                onEdit={() =>
                  setDialogGoal({
                    open: true,
                    new: false,
                    goal: r,
                  })
                }
                onDelete={() => deleteGoal(r.id)}
                onToggle={() => toggleGoal(r.id)}
              />
            ))
        ) : (
          <NoneText>{t('pages.loyalty-rewards.no-goals')}</NoneText>
        )}
      </GoalList>
    </>
  );
}