From 991dda10af13ea392bdfd4cf8703eadbc2a07252 Mon Sep 17 00:00:00 2001 From: Alexander Petkov Date: Tue, 25 Jun 2024 19:07:10 +0300 Subject: [PATCH] refactor: Additional restructure and cleanups --- src/common/hooks/donation.ts | 2 +- .../CreatePaymentDialog.tsx} | 8 +- .../create-payment/CreatePaymentStepper.tsx | 6 +- .../create-payment/PaymentTypeSelector.tsx | 4 +- .../benevity/BenevityEditableInput.tsx | 2 +- .../benevity/BenevityImportTypeSelector.tsx | 6 +- .../CreatePaymentFromBenevityForm.tsx | 2 +- .../benevity/FileImportDialog.tsx | 4 +- .../helpers/form/BenevityDonationTable.tsx | 2 +- .../benevity/helpers/form/initialValues.ts | 45 +++++++++++ .../helpers}/createPaymentStepReducer.ts | 0 .../stripe/StripeCreatePaymentDialog.tsx | 3 +- src/components/admin/payments/grid/Grid.tsx | 4 +- .../admin/payments/grid/GridAppbar.tsx | 1 - .../payments/store/CreatePaymentStore.ts | 80 ------------------- 15 files changed, 68 insertions(+), 101 deletions(-) rename src/components/admin/payments/{store/CreatePaymentContext.tsx => create-payment/CreatePaymentDialog.tsx} (76%) create mode 100644 src/components/admin/payments/create-payment/benevity/helpers/form/initialValues.ts rename src/components/admin/payments/{store => create-payment/helpers}/createPaymentStepReducer.ts (100%) delete mode 100644 src/components/admin/payments/store/CreatePaymentStore.ts diff --git a/src/common/hooks/donation.ts b/src/common/hooks/donation.ts index 8cf984612..2232fbb07 100644 --- a/src/common/hooks/donation.ts +++ b/src/common/hooks/donation.ts @@ -6,7 +6,7 @@ import { QueryClient, useMutation, useQuery } from '@tanstack/react-query' import { ApiErrors } from 'service/apiErrors' import { AlertStore } from 'stores/AlertStore' import { endpoints } from 'service/apiEndpoints' -import { authConfig, authQueryFnFactory } from 'service/restRequests' +import { authQueryFnFactory } from 'service/restRequests' import { CheckoutSessionInput, CheckoutSessionResponse, diff --git a/src/components/admin/payments/store/CreatePaymentContext.tsx b/src/components/admin/payments/create-payment/CreatePaymentDialog.tsx similarity index 76% rename from src/components/admin/payments/store/CreatePaymentContext.tsx rename to src/components/admin/payments/create-payment/CreatePaymentDialog.tsx index e5b57fdb2..738685d13 100644 --- a/src/components/admin/payments/store/CreatePaymentContext.tsx +++ b/src/components/admin/payments/create-payment/CreatePaymentDialog.tsx @@ -1,6 +1,10 @@ import React, { createContext } from 'react' -import { Actions, CreatePayment, createPaymentStepReducer } from './createPaymentStepReducer' -import CreatePaymentStepper from '../create-payment/CreatePaymentStepper' +import { + Actions, + CreatePayment, + createPaymentStepReducer, +} from './helpers/createPaymentStepReducer' +import CreatePaymentStepper from './CreatePaymentStepper' import { observer } from 'mobx-react' export type PaymentContext = { diff --git a/src/components/admin/payments/create-payment/CreatePaymentStepper.tsx b/src/components/admin/payments/create-payment/CreatePaymentStepper.tsx index b39cb9c99..8f714568b 100644 --- a/src/components/admin/payments/create-payment/CreatePaymentStepper.tsx +++ b/src/components/admin/payments/create-payment/CreatePaymentStepper.tsx @@ -1,18 +1,18 @@ import { Button, Card, CardContent, Dialog, Grid, IconButton } from '@mui/material' -import { Form, Formik, useField, useFormikContext } from 'formik' +import { Form, Formik } from 'formik' import React, { useContext } from 'react' import * as yup from 'yup' import { FileImportDialog } from './benevity/FileImportDialog' import { benevityInputValidation, benevityValidation } from './benevity/helpers/validation' import BenevityImportTypeSelector from './benevity/BenevityImportTypeSelector' import CreatePaymentFromBenevityRecord from './benevity/CreatePaymentFromBenevityRecord' -import { PaymentContext } from '../store/CreatePaymentContext' +import { PaymentContext } from './CreatePaymentDialog' import PaymentTypeSelector from './PaymentTypeSelector' import { BenevityManualImport } from './benevity/BenevityManualImport' import { stripeInputValidation } from './stripe/helpers/validations' import { StripeChargeLookupForm } from './stripe/StripeChargeLookupForm' -import { SelectedPaymentSource } from '../store/createPaymentStepReducer' +import { SelectedPaymentSource } from './helpers/createPaymentStepReducer' import { CreatePaymentFromStripeCharge } from './stripe/CreatePaymentFromStripeCharge' import { ModalStore } from '../PaymentsPage' import ArrowBackIcon from '@mui/icons-material/ArrowBack' diff --git a/src/components/admin/payments/create-payment/PaymentTypeSelector.tsx b/src/components/admin/payments/create-payment/PaymentTypeSelector.tsx index 265a5364d..50d84bfc2 100644 --- a/src/components/admin/payments/create-payment/PaymentTypeSelector.tsx +++ b/src/components/admin/payments/create-payment/PaymentTypeSelector.tsx @@ -1,8 +1,8 @@ import { Box, Button, Typography } from '@mui/material' import { useTranslation } from 'next-i18next' import React, { useContext } from 'react' -import { SelectedPaymentSource } from '../store/createPaymentStepReducer' -import { PaymentContext } from '../store/CreatePaymentContext' +import { SelectedPaymentSource } from './helpers/createPaymentStepReducer' +import { PaymentContext } from './CreatePaymentDialog' export default function PaymentTypeSelector() { const paymentContext = useContext(PaymentContext) diff --git a/src/components/admin/payments/create-payment/benevity/BenevityEditableInput.tsx b/src/components/admin/payments/create-payment/benevity/BenevityEditableInput.tsx index a453744aa..c5dc374a5 100644 --- a/src/components/admin/payments/create-payment/benevity/BenevityEditableInput.tsx +++ b/src/components/admin/payments/create-payment/benevity/BenevityEditableInput.tsx @@ -16,7 +16,7 @@ export const BenevityInput = ({ }) => { const { t } = useTranslation() const [editable, setEditable] = useState(false) - const [field, meta, { setValue }] = useField(name) + const [field, meta] = useField(name) const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : '' const ref = useRef(null) diff --git a/src/components/admin/payments/create-payment/benevity/BenevityImportTypeSelector.tsx b/src/components/admin/payments/create-payment/benevity/BenevityImportTypeSelector.tsx index a2d12b1f5..b0f3b1bfc 100644 --- a/src/components/admin/payments/create-payment/benevity/BenevityImportTypeSelector.tsx +++ b/src/components/admin/payments/create-payment/benevity/BenevityImportTypeSelector.tsx @@ -1,15 +1,15 @@ import { Box, Button, Typography } from '@mui/material' import { useTranslation } from 'next-i18next' -import { CreatePaymentStore, TImportType } from '../../store/CreatePaymentStore' import { observer } from 'mobx-react' import { useContext } from 'react' -import { PaymentContext } from '../../store/CreatePaymentContext' +import { PaymentContext } from '../CreatePaymentDialog' +import { BenevityImportType } from '../helpers/createPaymentStepReducer' function BenevityImportFirstStep() { const { t } = useTranslation() const paymentContext = useContext(PaymentContext) - const handleImportTypeChange = (importType: TImportType) => { + const handleImportTypeChange = (importType: BenevityImportType) => { paymentContext.dispatch({ type: 'SET_BENEVITY_IMPORT_TYPE', payload: importType }) } diff --git a/src/components/admin/payments/create-payment/benevity/CreatePaymentFromBenevityForm.tsx b/src/components/admin/payments/create-payment/benevity/CreatePaymentFromBenevityForm.tsx index 5450464ac..3d6cba0b0 100644 --- a/src/components/admin/payments/create-payment/benevity/CreatePaymentFromBenevityForm.tsx +++ b/src/components/admin/payments/create-payment/benevity/CreatePaymentFromBenevityForm.tsx @@ -1,7 +1,7 @@ import { Button, Grid, Typography } from '@mui/material' import { useMutation } from '@tanstack/react-query' import { useImportBenevityDonation } from 'service/donation' -import { CreatePaymentStore, benevityInitialValues } from '../../store/CreatePaymentStore' +import { benevityInitialValues } from './helpers/form/initialValues' import { useFormikContext } from 'formik' import { AxiosError, AxiosResponse } from 'axios' import { TPaymentResponse } from 'gql/donations' diff --git a/src/components/admin/payments/create-payment/benevity/FileImportDialog.tsx b/src/components/admin/payments/create-payment/benevity/FileImportDialog.tsx index fd2980df7..f98bd873b 100644 --- a/src/components/admin/payments/create-payment/benevity/FileImportDialog.tsx +++ b/src/components/admin/payments/create-payment/benevity/FileImportDialog.tsx @@ -4,10 +4,10 @@ import { useField } from 'formik' import { useRef, useState } from 'react' export function FileImportDialog() { - const [isDragging, setIsDragging] = useState(false) + const [, setIsDragging] = useState(false) const inputFile = useRef(null) const submitButtonRef = useRef(null) - const [field, meta, { setValue }] = useField('benevityData') + const [, , { setValue }] = useField('benevityData') const onDragOver = (event: React.DragEvent) => { event.preventDefault() diff --git a/src/components/admin/payments/create-payment/benevity/helpers/form/BenevityDonationTable.tsx b/src/components/admin/payments/create-payment/benevity/helpers/form/BenevityDonationTable.tsx index fd47287f2..28c9a8c90 100644 --- a/src/components/admin/payments/create-payment/benevity/helpers/form/BenevityDonationTable.tsx +++ b/src/components/admin/payments/create-payment/benevity/helpers/form/BenevityDonationTable.tsx @@ -14,7 +14,7 @@ import { FieldArray, useFormikContext } from 'formik' import { BenevityImportInput } from '../benevity.types' import { Delete } from '@mui/icons-material' -import { benevityDonationInitialValues } from '../../../../store/CreatePaymentStore' +import { benevityDonationInitialValues } from './initialValues' import { BenevityInput } from '../../BenevityEditableInput' import AddCircleIcon from '@mui/icons-material/AddCircle' diff --git a/src/components/admin/payments/create-payment/benevity/helpers/form/initialValues.ts b/src/components/admin/payments/create-payment/benevity/helpers/form/initialValues.ts new file mode 100644 index 000000000..59fc02f6f --- /dev/null +++ b/src/components/admin/payments/create-payment/benevity/helpers/form/initialValues.ts @@ -0,0 +1,45 @@ +import { TBenevityCSVParser, TBenevityDonation } from '../benevity.types' + +export const benevityInitialValues: TBenevityCSVParser = { + charityId: '', + charityName: '', + currency: '', + donations: [], + periodEnding: '', + paymentMethod: '', + disbursementId: '', + checkFee: '', + totalDonationsGross: '', + netTotalPayment: 0, + transactionAmount: 0, + exchangeRate: 0, + note: '', +} + +export const benevityDonationInitialValues: TBenevityDonation = { + company: '', + project: '', + donationDate: '', + donorFirstName: '', + donorLastName: '', + email: '', + address: '', + city: '', + stateProvince: '', + postalCode: '', + activity: '', + comment: '', + transactionId: '', + donationFrequency: '', + currency: '', + projectRemoteId: '', + source: '', + reason: '', + totalDonationToBeAcknowledged: 0, + matchAmount: 0, + causeSupportFee: 0, + merchantFee: 0, + feeComment: '', + totalFee: 0, + totalAmount: 0, +} diff --git a/src/components/admin/payments/store/createPaymentStepReducer.ts b/src/components/admin/payments/create-payment/helpers/createPaymentStepReducer.ts similarity index 100% rename from src/components/admin/payments/store/createPaymentStepReducer.ts rename to src/components/admin/payments/create-payment/helpers/createPaymentStepReducer.ts diff --git a/src/components/admin/payments/create-payment/stripe/StripeCreatePaymentDialog.tsx b/src/components/admin/payments/create-payment/stripe/StripeCreatePaymentDialog.tsx index 3b4630a6d..42a454af2 100644 --- a/src/components/admin/payments/create-payment/stripe/StripeCreatePaymentDialog.tsx +++ b/src/components/admin/payments/create-payment/stripe/StripeCreatePaymentDialog.tsx @@ -15,7 +15,6 @@ import { stripeFeeCalculator } from 'components/client/one-time-donation/helpers import { StripeChargeResponse, TPaymentResponse } from 'gql/donations' import React from 'react' import { useTranslation } from 'next-i18next' -import { endpoints } from 'service/apiEndpoints' import { useCreatePaymentFromStripeMutation } from 'service/donation' import Stripe from 'stripe' import { AlertStore } from 'stores/AlertStore' @@ -73,7 +72,7 @@ export function CreatePaymentFromStripeChargeTable({ - + База данни на Страйп Вътрена база данни diff --git a/src/components/admin/payments/grid/Grid.tsx b/src/components/admin/payments/grid/Grid.tsx index 2d184aefb..790881774 100644 --- a/src/components/admin/payments/grid/Grid.tsx +++ b/src/components/admin/payments/grid/Grid.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import { UseQueryResult } from '@tanstack/react-query' import { useTranslation } from 'next-i18next' -import { Box, Button, IconButton, Tooltip } from '@mui/material' +import { Box, IconButton, Tooltip } from '@mui/material' import { Edit } from '@mui/icons-material' import { DataGrid, @@ -30,7 +30,7 @@ import { PaymentStatus, PaymentProvider } from '../../../../gql/donations.enums' import { useSession } from 'next-auth/react' import { PaymentAdminResponse } from 'gql/donations' import Link from 'next/link' -import CreatePaymentDialog from '../store/CreatePaymentContext' +import CreatePaymentDialog from '../create-payment/CreatePaymentDialog' interface RenderCellProps { params: GridRenderCellParams diff --git a/src/components/admin/payments/grid/GridAppbar.tsx b/src/components/admin/payments/grid/GridAppbar.tsx index a63a65e87..6b1d80a93 100644 --- a/src/components/admin/payments/grid/GridAppbar.tsx +++ b/src/components/admin/payments/grid/GridAppbar.tsx @@ -2,7 +2,6 @@ import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' import { Box, - Button, FormControl, IconButton, InputLabel, diff --git a/src/components/admin/payments/store/CreatePaymentStore.ts b/src/components/admin/payments/store/CreatePaymentStore.ts deleted file mode 100644 index 9d1768e50..000000000 --- a/src/components/admin/payments/store/CreatePaymentStore.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { action, makeObservable, observable } from 'mobx' -import { enableStaticRendering } from 'mobx-react' -import type { - TBenevityCSVParser, - TBenevityDonation, -} from '../create-payment/benevity/helpers/benevity.types' - -enableStaticRendering(typeof window === 'undefined') - -export const benevityInitialValues: TBenevityCSVParser = { - charityId: '', - charityName: '', - currency: '', - donations: [], - periodEnding: '', - paymentMethod: '', - disbursementId: '', - checkFee: '', - totalDonationsGross: '', - netTotalPayment: 0, - transactionAmount: 0, - exchangeRate: 0, - note: '', -} - -export const benevityDonationInitialValues: TBenevityDonation = { - company: '', - project: '', - donationDate: '', - donorFirstName: '', - donorLastName: '', - email: '', - address: '', - city: '', - stateProvince: '', - postalCode: '', - activity: '', - comment: '', - transactionId: '', - donationFrequency: '', - currency: '', - projectRemoteId: '', - source: '', - reason: '', - totalDonationToBeAcknowledged: 0, - matchAmount: 0, - causeSupportFee: 0, - merchantFee: 0, - feeComment: '', - totalFee: 0, - totalAmount: 0, -} - -interface ICreatePaymentStoreImpl { - isImportModalOpen: boolean - showImportModal: () => void - hideImportModal: () => void -} - -export class CreatePaymentStoreImpl implements ICreatePaymentStoreImpl { - isImportModalOpen = true - - constructor() { - makeObservable(this, { - isImportModalOpen: observable, - showImportModal: action, - hideImportModal: action, - }) - } - - showImportModal = () => { - this.isImportModalOpen = true - } - - hideImportModal = () => { - this.isImportModalOpen = false - } -} - -export const CreatePaymentStore = new CreatePaymentStoreImpl()