Added ability to rerun bank transaction sync

README.md

@@ -100,7 +100,9 @@ Watch releases of this repository to be notified about future updates:
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-69-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Please check [contributors guide](https://github.com/podkrepi-bg/frontend/blob/master/CONTRIBUTING.md) for:

public/locales/bg/bank-transactions.json

@@ -17,8 +17,10 @@
     "to": "До",
     "apply-ref-heading": "Приложи код на кампания",
     "apply-ref": "Приложи кода",
-    "edit": "Редактирай"
+    "edit": "Редактирай",
+    "start-sync": "Стартирай синхронизация"
   },
   "matched-ref": "Разпознат код",
-  "payment-ref": "Код на кампанията"
+  "payment-ref": "Код на кампанията",
+  "rerun-dates": "Повтори банково синхронизиране"
 }

public/locales/en/expenses.json

@@ -38,7 +38,7 @@
     "bank": "Bank",
     "advertising": "Advertising",
     "other": "Other"
-  },  
+  },
   "alerts": {
     "new-row": {
       "error": "Error occurred trying to create an expense.",

src/components/admin/bank-transactions/grid/GridAppbar.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'next-i18next'
 import { Box, TextField, Toolbar, Tooltip, Typography } from '@mui/material'
-import { GetApp as DownloadFileIcon } from '@mui/icons-material'
+import { GetApp as DownloadFileIcon, RotateLeftOutlined } from '@mui/icons-material'
 
 import { useMutation } from '@tanstack/react-query'
 import { useExportToExcel } from 'service/bankTransaction'
@@ -9,6 +9,7 @@ import { downloadFile } from '../../../../common/util/downloadFile'
 import { useMemo, useState } from 'react'
 import { useStores } from 'common/hooks/useStores'
 import { debounce } from 'lodash'
+import RerunTransactionSyncModal from './RerunTransactionsSyncDialog'
 
 const addIconStyles = {
   background: '#4ac3ff',
@@ -21,6 +22,7 @@ const addIconStyles = {
 export default function GridAppbar() {
   const { bankTransactionsStore } = useStores()
   const { t } = useTranslation()
+
   const exportToExcel = useMutation({
     mutationFn: useExportToExcel(),
     onError: () => AlertStore.show(t('common:alerts.error'), 'error'),
@@ -29,6 +31,7 @@ export default function GridAppbar() {
       AlertStore.show(t('common:alerts.success'), 'success')
     },
   })
+
   const [searchValue, setSearchValue] = useState('')
 
   const debounceSearch = useMemo(
@@ -50,6 +53,15 @@ export default function GridAppbar() {
     debounceSearch(searchText)
   }
 
+  const [isRerunSyncOpen, setIsRerunSyncOpen] = useState(false)
+  const handleRerunSyncOpen = () => {
+    setIsRerunSyncOpen(true)
+  }
+  const handleRerunSyncClose = () => {
+    setIsRerunSyncOpen(false)
+    //TODO: refetch() after sync
+  }
+
   return (
     <Toolbar
       sx={{
@@ -81,6 +93,16 @@ export default function GridAppbar() {
             />
           </Tooltip>
         </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Tooltip title={t('bank-transactions:rerun-dates') || ''}>
+            <RotateLeftOutlined
+              sx={addIconStyles}
+              fontSize="large"
+              onClick={() => handleRerunSyncOpen()}
+            />
+          </Tooltip>
+          <RerunTransactionSyncModal isOpen={isRerunSyncOpen} handleClose={handleRerunSyncClose} />
+        </Box>
       </Box>
     </Toolbar>
   )

src/components/admin/bank-transactions/grid/RerunTransactionsSyncDialog.tsx

@@ -0,0 +1,92 @@
+import { Dialog, Grid, DialogContent, DialogTitle } from '@mui/material'
+import GenericForm from 'components/common/form/GenericForm'
+import SubmitButton from 'components/common/form/SubmitButton'
+import { useState } from 'react'
+import { useTranslation } from 'next-i18next'
+import * as yup from 'yup'
+import CloseModalButton from 'components/common/CloseModalButton'
+import { RerunTransactionsDatesInput } from 'gql/bank-transactions'
+import { useRerunBankImportForDate } from 'service/bankTransaction'
+import FormDatePicker from 'components/common/form/FormDatePicker'
+import { useMutation } from '@tanstack/react-query'
+import { AlertStore } from 'stores/AlertStore'
+
+const validationSchema: yup.SchemaOf<RerunTransactionsDatesInput> = yup.object().defined().shape({
+  startDate: yup.date().required(),
+  endDate: yup.date().required(),
+})
+
+export default function RerunTransactionSyncModal({
+  isOpen,
+  handleClose,
+}: {
+  isOpen: boolean
+  handleClose: () => void
+}) {
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(false)
+
+  const rerunSyncMutation = useMutation({
+    mutationFn: useRerunBankImportForDate(),
+    onError: () => AlertStore.show(t('common:alerts.error'), 'error'),
+    onSuccess: () => {
+      AlertStore.show(t('common:alerts.success'), 'success')
+      handleClose()
+    },
+  })
+
+  async function onSubmit(values: RerunTransactionsDatesInput) {
+    setLoading(true)
+    try {
+      await rerunSyncMutation.mutateAsync(values)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={handleClose}
+      sx={{ scroll: 'none' }}
+      fullWidth={true}
+      maxWidth={'sm'}>
+      <DialogContent
+        style={{
+          overflow: 'hidden',
+          padding: '4rem',
+          paddingTop: '1rem',
+          width: '100%',
+        }}>
+        <Grid style={{ display: 'flex', justifyContent: 'end', marginRight: '-4rem' }}>
+          <CloseModalButton href={''} onClose={handleClose} />
+        </Grid>
+        <DialogTitle style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+          {t('bank-transactions:rerun-dates')}
+        </DialogTitle>
+        <Grid container direction="column" component="section">
+          <GenericForm
+            onSubmit={onSubmit}
+            initialValues={{ startDate: new Date(), endDate: new Date() }}
+            validationSchema={validationSchema}>
+            <Grid container direction="row" spacing={3}>
+              <Grid item xs={6} sx={{ marginBottom: '1rem' }}>
+                <FormDatePicker label={t('bank-transactions:cta.from')} name="startDate" />
+              </Grid>
+              <Grid item xs={6} sx={{ marginBottom: '1rem' }}>
+                <FormDatePicker label={t('bank-transactions:cta.to')} name="endDate" />
+              </Grid>
+              <Grid item xs={12}>
+                <SubmitButton
+                  fullWidth
+                  label="bank-transactions:cta.start-sync"
+                  loading={loading}
+                />
+              </Grid>
+            </Grid>
+          </GenericForm>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/gql/bank-transactions.ts

@@ -35,3 +35,8 @@ export type BankTransactionEditRefResponse = {
   paymentRef: string
   status: string
 }
+
+export type RerunTransactionsDatesInput = {
+  startDate: Date | string
+  endDate: Date | string
+}

src/service/apiEndpoints.ts

@@ -146,6 +146,7 @@ export const endpoints = {
     exportToExcel: <Endpoint>{ url: '/bank-transaction/export-excel', method: 'GET' },
     editPaymentRef: (id: string) =>
       <Endpoint>{ url: `/bank-transaction/${id}/edit-ref`, method: 'PUT' },
+    rerunDates: <Endpoint>{ url: '/bank-transaction/rerun-dates', method: 'POST' },
   },
   documents: {
     documentsList: <Endpoint>{ url: '/document', method: 'GET' },

src/service/bankTransaction.ts

@@ -1,5 +1,10 @@
 import { AxiosResponse } from 'axios'
-import { BankTransactionEditRefInput, BankTransactionEditRefResponse } from 'gql/bank-transactions'
+import {
+  BankTransactionEditRefInput,
+  BankTransactionEditRefResponse,
+  BankTransactionsHistoryResponse,
+  RerunTransactionsDatesInput,
+} from 'gql/bank-transactions'
 import { useSession } from 'next-auth/react'
 import { apiClient } from './apiClient'
 import { endpoints } from './apiEndpoints'
@@ -24,3 +29,14 @@ export function useEditTransactionPaymentRef(slug: string) {
     >(endpoints.bankTransactions.editPaymentRef(slug).url, data, authConfig(session?.accessToken))
   }
 }
+
+export const useRerunBankImportForDate = () => {
+  const { data: session } = useSession()
+  return async (transactionDates: RerunTransactionsDatesInput) => {
+    return await apiClient.post<string, AxiosResponse<BankTransactionsHistoryResponse>>(
+      endpoints.bankTransactions.rerunDates.url,
+      transactionDates,
+      authConfig(session?.accessToken),
+    )
+  }
+}