90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
import { Button, Group, Stack, Text, Title } from '@mantine/core';
|
|
import { DateTimePicker } from '@mantine/dates';
|
|
import { useForm } from '@mantine/form';
|
|
import { ContextModalProps, modals } from '@mantine/modals';
|
|
import dayjs from 'dayjs';
|
|
import { Trans, useTranslation } from 'next-i18next';
|
|
import { api } from '~/utils/api';
|
|
import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
|
|
import { createInviteSchema } from '~/validations/invite';
|
|
|
|
import { openCopyInviteModal } from './copy-invite.modal';
|
|
|
|
export const CreateInviteModal = ({ id }: ContextModalProps<{}>) => {
|
|
const { t } = useTranslation('manage/users/invites');
|
|
const utils = api.useContext();
|
|
const { isLoading, mutateAsync } = api.invites.create.useMutation({
|
|
onSuccess: async (data) => {
|
|
await utils.invites.all.invalidate();
|
|
modals.close(id);
|
|
|
|
openCopyInviteModal(data);
|
|
},
|
|
});
|
|
|
|
const { i18nZodResolver } = useI18nZodResolver();
|
|
|
|
const minDate = dayjs().add(5, 'minutes').toDate();
|
|
const maxDate = dayjs().add(6, 'months').toDate();
|
|
|
|
const form = useForm({
|
|
initialValues: {
|
|
expirationDate: dayjs().add(7, 'days').toDate(),
|
|
},
|
|
validate: i18nZodResolver(createInviteSchema),
|
|
});
|
|
|
|
return (
|
|
<Stack>
|
|
<Text>{t('modals.create.description')}</Text>
|
|
|
|
<DateTimePicker
|
|
popoverProps={{ withinPortal: true }}
|
|
minDate={minDate}
|
|
maxDate={maxDate}
|
|
withAsterisk
|
|
valueFormat="DD MMM YYYY hh:mm A"
|
|
label={t('modals.create.form.expires.label')}
|
|
variant="filled"
|
|
{...form.getInputProps('expirationDate')}
|
|
/>
|
|
|
|
<Group grow>
|
|
<Button
|
|
onClick={() => {
|
|
modals.close(id);
|
|
}}
|
|
variant="light"
|
|
color="gray"
|
|
>
|
|
{t('common:cancel')}
|
|
</Button>
|
|
<Button
|
|
onClick={async () => {
|
|
await mutateAsync({
|
|
expiration: form.values.expirationDate,
|
|
});
|
|
}}
|
|
disabled={isLoading}
|
|
variant="light"
|
|
color="green"
|
|
>
|
|
{t('modals.create.form.submit')}
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export const openCreateInviteModal = () => {
|
|
modals.openContextModal({
|
|
modal: 'createInviteModal',
|
|
title: (
|
|
<Title order={4}>
|
|
<Trans i18nKey="manage/users/invites:modals.create.title" />
|
|
</Title>
|
|
),
|
|
innerProps: {},
|
|
});
|
|
};
|