♻️ Address pull request feedback

src/components/Manage/User/Invite/create-invite.modal.tsx

@@ -0,0 +1,89 @@
+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: {},
+  });
+};