Recurring donation

public/locales/bg/recurring-donation.json

@@ -0,0 +1,31 @@
+{
+    "form-heading": "Добави",
+    "edit-form-heading": "Редактирай",
+    "recurring-donations": "Всички повтарящи се дарения",
+    "recurring-donation" : "Повтарящи се дарения",
+    "extSubscriptionId": "Абонамент",
+    "extCustomerId": "ID на клиент",
+    "currency": "Валута",
+    "amount": "Налични средства",
+    "status": "Статус",
+    "personId": "ID на потребител",
+    "vaultId": "ID на трезор",
+    "deleteTitle": "Сигурни ли сте?",
+    "deleteContent": "Това действие ще изтрие елемента завинаги!",
+    "actions": "Действия",
+    "alerts": {
+        "create": "Записът беше създаден успешно!",
+        "edit": "Записът беше редактиран успешно!",
+        "delete": "Записът беше изтрит успешно!",
+        "error": "Възникна грешка! Моля опитайте отново по-късно."
+    },
+    "cta": {
+        "add": "Добави",
+        "confirm": "Потвърди",
+        "cancel": "Отказ",
+        "delete": "Изтрий",
+        "edit": "Редактирай",
+        "details": "Детайли",
+        "submit": "Изпрати"
+    }
+}

src/common/hooks/recurringDonation.ts

@@ -0,0 +1,34 @@
+import { KeycloakInstance } from 'keycloak-js'
+import { useKeycloak } from '@react-keycloak/ssr'
+import { QueryClient, useQuery } from 'react-query'
+
+import { endpoints } from 'service/apiEndpoints'
+import { authQueryFnFactory } from 'service/restRequests'
+import { RecurringDonationResponse } from 'gql/recurring-donation'
+
+export function useRecurringDonationList() {
+  const { keycloak } = useKeycloak<KeycloakInstance>()
+  return useQuery<RecurringDonationResponse[]>(
+    endpoints.recurringDonation.recurringDonation.url,
+    authQueryFnFactory<RecurringDonationResponse[]>(keycloak?.token),
+  )
+}
+
+export function useRecurringDonation(id: string) {
+  const { keycloak } = useKeycloak<KeycloakInstance>()
+  return useQuery<RecurringDonationResponse>(
+    endpoints.recurringDonation.getRecurringDonation(id).url,
+    authQueryFnFactory<RecurringDonationResponse>(keycloak?.token),
+  )
+}
+
+export async function prefetchRecurringDonationById(
+  client: QueryClient,
+  id: string,
+  token?: string,
+) {
+  await client.prefetchQuery<RecurringDonationResponse>(
+    endpoints.recurringDonation.getRecurringDonation(id).url,
+    authQueryFnFactory<RecurringDonationResponse>(token),
+  )
+}

src/common/routes.ts

@@ -124,6 +124,11 @@ export const routes = {
       create: '/admin/transfers/create',
       view: (id: string) => `/admin/transfers/${id}`,
     },
+    recurringDonation: {
+      index: '/admin/recurring-donation',
+      create: '/admin/recurring-donation/create',
+      view: (id: string) => `/admin/recurring-donation/${id}`,
+    },
   },
   dev: {
     openData: '/open-data',

src/components/recurring-donation/CreatePage.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from 'next-i18next'
+import { Container } from '@mui/material'
+
+import AdminContainer from 'components/admin/navigation/AdminContainer'
+import AdminLayout from 'components/admin/navigation/AdminLayout'
+
+import Form from './Form'
+
+export default function CreatePage() {
+  const { t } = useTranslation('recurring-donation')
+
+  return (
+    <AdminLayout>
+      <AdminContainer title={t('recurring-donation')}>
+        <Container maxWidth="md" sx={{ py: 5 }}>
+          <Form />
+        </Container>
+      </AdminContainer>
+    </AdminLayout>
+  )
+}

src/components/recurring-donation/EditPage.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from 'next-i18next'
+import { Container } from '@mui/material'
+
+import AdminContainer from 'components/admin/navigation/AdminContainer'
+import AdminLayout from 'components/admin/navigation/AdminLayout'
+
+import Form from './Form'
+
+export default function EditPage() {
+  const { t } = useTranslation('recurring-donation')
+
+  return (
+    <AdminLayout>
+      <AdminContainer title={t('recurring-donation')}>
+        <Container maxWidth="md" sx={{ py: 5 }}>
+          <Form />
+        </Container>
+      </AdminContainer>
+    </AdminLayout>
+  )
+}

src/components/recurring-donation/Form.tsx

@@ -0,0 +1,161 @@
+import React from 'react'
+import { useMutation, useQueryClient, UseQueryResult } from 'react-query'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+import Link from 'next/link'
+import { AxiosError, AxiosResponse } from 'axios'
+import * as yup from 'yup'
+import { Box, Button, Grid, Typography } from '@mui/material'
+
+import { RecurringDonationInput, RecurringDonationResponse } from 'gql/recurring-donation'
+
+import { Currency } from 'gql/currency'
+import { useRecurringDonation } from 'common/hooks/recurringDonation'
+import { routes } from 'common/routes'
+import { ApiErrors } from 'service/apiErrors'
+import { useCreateRecurringDonation, useEditRecurringDonation } from 'service/recurringDonation'
+import { endpoints } from 'service/apiEndpoints'
+import { AlertStore } from 'stores/AlertStore'
+import GenericForm from 'components/common/form/GenericForm'
+import FormTextField from 'components/common/form/FormTextField'
+import SubmitButton from 'components/common/form/SubmitButton'
+import CurrencySelect from 'components/currency/CurrencySelect'
+import RecurringDonationStatusSelect from './grid/RecurringDonationStatusSelect'
+
+export enum RecurringDonationStatus {
+  trialing = 'trialing',
+  active = 'active',
+  canceled = 'canceled',
+  incomplete = 'incomplete',
+  incompleteExpired = 'incompleteExpired',
+  pastDue = 'pastDue',
+  unpaid = 'unpaid',
+}
+
+const validCurrencies = Object.keys(Currency)
+const validStatuses = Object.keys(RecurringDonationStatus)
+
+const validationSchema = yup
+  .object()
+  .defined()
+  .shape({
+    status: yup.string().oneOf(validStatuses).required(),
+    personId: yup.string().trim().max(50).required(),
+    extSubscriptionId: yup.string().trim().max(50).required(),
+    extCustomerId: yup.string().trim().max(50).required(),
+    amount: yup.number().positive().integer().required(),
+    currency: yup.string().oneOf(validCurrencies).required(),
+    sourceVault: yup.string().trim().uuid().required(),
+  })
+
+export default function EditForm() {
+  const router = useRouter()
+  const queryClient = useQueryClient()
+  const { t } = useTranslation()
+
+  let id = router.query.id
+
+  let initialValues: RecurringDonationInput = {
+    status: '',
+    personId: '',
+    extSubscriptionId: '',
+    extCustomerId: '',
+    amount: 0,
+    currency: '',
+    sourceVault: '',
+  }
+
+  if (id) {
+    id = String(id)
+    const { data }: UseQueryResult<RecurringDonationResponse> = useRecurringDonation(id)
+
+    initialValues = {
+      status: data?.status,
+      personId: data?.personId,
+      extSubscriptionId: data?.extSubscriptionId,
+      extCustomerId: data?.extCustomerId,
+      amount: data?.amount,
+      currency: data?.currency,
+      sourceVault: data?.sourceVault,
+    }
+  }
+
+  const mutationFn = id ? useEditRecurringDonation(id) : useCreateRecurringDonation()
+
+  const mutation = useMutation<
+    AxiosResponse<RecurringDonationResponse>,
+    AxiosError<ApiErrors>,
+    RecurringDonationInput
+  >({
+    mutationFn,
+    onError: () => AlertStore.show(t('recurring-donation:alerts:error'), 'error'),
+    onSuccess: () => {
+      if (id)
+        queryClient.invalidateQueries(
+          endpoints.recurringDonation.getRecurringDonation(String(id)).url,
+        )
+      AlertStore.show(
+        id ? t('recurring-donation:alerts:edit') : t('recurring-donation:alerts:create'),
+        'success',
+      )
+      router.push(routes.admin.recurringDonation.index)
+    },
+  })
+  async function onSubmit(data: RecurringDonationInput) {
+    mutation.mutate(data)
+  }
+
+  return (
+    <GenericForm
+      onSubmit={onSubmit}
+      initialValues={initialValues}
+      validationSchema={validationSchema}>
+      <Box sx={{ marginTop: '5%', height: '62.6vh' }}>
+        <Typography variant="h5" component="h2" sx={{ marginBottom: 2, textAlign: 'center' }}>
+          {id ? t('recurring-donation:edit-form-heading') : t('recurring-donation:form-heading')}
+        </Typography>
+        <Grid container spacing={2} sx={{ width: 600, margin: '0 auto' }}>
+          <Grid item xs={6}>
+            <RecurringDonationStatusSelect />
+          </Grid>
+          <Grid item xs={6}>
+            <FormTextField type="text" label={t('recurring-donation:personId')} name="personId" />
+          </Grid>
+          <Grid item xs={6}>
+            <FormTextField
+              type="text"
+              label={t('recurring-donation:extSubscriptionId')}
+              name="extSubscriptionId"
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <FormTextField
+              type="text"
+              label={t('recurring-donation:extCustomerId')}
+              name="extCustomerId"
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <FormTextField type="number" label={t('recurring-donation:amount')} name="amount" />
+          </Grid>
+          <Grid item xs={6}>
+            <CurrencySelect />
+          </Grid>
+          <Grid item xs={6}>
+            <FormTextField type="text" label={t('recurring-donation:vaultId')} name="sourceVault" />
+          </Grid>
+
+          {id ? <></> : <></>}
+          <Grid item xs={6}>
+            <SubmitButton fullWidth label={t('recurring-donation:cta:submit')} />
+          </Grid>
+          <Grid item xs={6}>
+            <Link href={routes.admin.recurringDonation.index} passHref>
+              <Button>{t('recurring-donation:cta:cancel')}</Button>
+            </Link>
+          </Grid>
+        </Grid>
+      </Box>
+    </GenericForm>
+  )
+}

src/components/recurring-donation/RecurringDonationPage.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from 'next-i18next'
+
+import AdminContainer from 'components/admin/navigation/AdminContainer'
+import AdminLayout from 'components/admin/navigation/AdminLayout'
+import Grid from './grid/Grid'
+import GridAppbar from './grid/GridAppbar'
+
+export default function VaultsPage() {
+  const { t } = useTranslation('recurring-donation')
+
+  return (
+    <AdminLayout>
+      <AdminContainer title={t('recurring-donation')}>
+        <GridAppbar />
+        <Grid />
+      </AdminContainer>
+    </AdminLayout>
+  )
+}

src/components/recurring-donation/grid/DeleteModal.tsx

@@ -0,0 +1,41 @@
+import { useMutation } from 'react-query'
+import { observer } from 'mobx-react'
+import { AxiosError, AxiosResponse } from 'axios'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import { RecurringDonationResponse } from 'gql/recurring-donation'
+import { ApiErrors } from 'service/apiErrors'
+import { useDeleteRecurringDonation } from 'service/recurringDonation'
+import { ModalStore } from 'stores/dashboard/ModalStore'
+import { AlertStore } from 'stores/AlertStore'
+import { routes } from 'common/routes'
+import DeleteDialog from 'components/admin/DeleteDialog'
+
+export default observer(function DeleteModal() {
+  const router = useRouter()
+  const { hideDelete, selectedRecord } = ModalStore
+  const { t } = useTranslation('recurring-donation')
+
+  const mutationFn = useDeleteRecurringDonation(selectedRecord.id)
+
+  const deleteMutation = useMutation<
+    AxiosResponse<RecurringDonationResponse>,
+    AxiosError<ApiErrors>,
+    string
+  >({
+    mutationFn,
+    onError: () => AlertStore.show(t('alerts.error'), 'error'),
+    onSuccess: () => {
+      hideDelete()
+      AlertStore.show(t('alerts.delete'), 'success')
+      router.push(routes.admin.recurringDonation.index)
+    },
+  })
+
+  function deleteHandler() {
+    deleteMutation.mutate(selectedRecord.id)
+  }
+
+  return <DeleteDialog deleteHandler={deleteHandler} />
+})

src/components/recurring-donation/grid/DetailsModal.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { UseQueryResult } from 'react-query'
+import { observer } from 'mobx-react'
+import { useTranslation } from 'next-i18next'
+
+import { RecurringDonationResponse } from 'gql/recurring-donation'
+import { useRecurringDonation } from 'common/hooks/recurringDonation'
+import { ModalStore } from 'stores/dashboard/ModalStore'
+import DetailsDialog from 'components/admin/DetailsDialog'
+
+export default observer(function DetailsModal() {
+  const { selectedRecord } = ModalStore
+  const { data }: UseQueryResult<RecurringDonationResponse> = useRecurringDonation(
+    selectedRecord.id,
+  )
+  console.log(data)
+  const { t } = useTranslation('recurring-donation')
+
+  const dataConverted = [
+    { name: 'ID', value: `${data?.id}` },
+    { name: t('status'), value: `${data?.status}` },
+    { name: t('currency'), value: `${data?.currency}` },
+    { name: t('amount'), value: `${data?.amount}` },
+    { name: t('extSubscriptionId'), value: `${data?.extSubscriptionId}` },
+    { name: t('extCustomerId'), value: `${data?.extCustomerId}` },
+    { name: t('vaultId'), value: `${data?.vaultId}` },
+  ]
+
+  return <DetailsDialog data={dataConverted} />
+})