Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Recurring donation #708

Merged
merged 65 commits into from
Apr 27, 2022
Merged
Changes from 1 commit
Commits
Show all changes
65 commits
Select commit Hold shift + click to select a range
020ab20
Created Recurring Donation Page
Marina-yoya Apr 7, 2022
6dee97c
Added Recurring Donation Page
Marina-yoya Apr 7, 2022
9dc347d
added DetailsModal
Marina-yoya Apr 8, 2022
35f9deb
create page added
Marina-yoya Apr 11, 2022
5081edc
added EditPage
Marina-yoya Apr 12, 2022
100c0c0
apiEndpoinds
Marina-yoya Apr 12, 2022
89b9b1f
Marina-yoya Apr 12, 2022
52e9494
added useTranslation
Marina-yoya Apr 14, 2022
cffa49c
change createForm usetranslation
Marina-yoya Apr 14, 2022
1444b37
fixing EditPage
Marina-yoya Apr 15, 2022
2127801
Merge branch 'master' into recurring-donation
dplamenov Apr 21, 2022
aa1f449
Sum the donations instead of displaying the first donation amount
kachar Apr 21, 2022
14f0a05
Improve import paths
kachar Apr 21, 2022
a11459e
Added icons before technology subtitles
Apr 21, 2022
5186b29
Adedd checkmark icons before the list items
Apr 21, 2022
e5ff8fe
Merge pull request #723 from podkrepi-bg/fix-technologies-section
kachar Apr 21, 2022
4c08320
Fixed spacings between category wrappers
Apr 21, 2022
667902f
Merge pull request #724 from podkrepi-bg/fix-technologies-section
kachar Apr 21, 2022
f7656dd
Add form select field common component
dimitur2204 Apr 23, 2022
2af1801
Merge pull request #726 from podkrepi-bg/feature/formik-form-select-f…
kachar Apr 24, 2022
1a7d429
Add person autocomplete component and start base dialog
dimitur2204 Apr 24, 2022
7c35c4f
Show person and cleanup
dimitur2204 Apr 24, 2022
b4de6a1
Dialog full width and showId props on autocomplete
dimitur2204 Apr 25, 2022
66fb3fd
Add person info component
dimitur2204 Apr 25, 2022
abc576f
Styled person info
dimitur2204 Apr 25, 2022
347cbf0
Add select person styled box
dimitur2204 Apr 26, 2022
aacb24a
Add validation
dimitur2204 Apr 26, 2022
fe3efae
Extract FormFieldButton as a component
dimitur2204 Apr 26, 2022
943204c
Add translations for person info component
dimitur2204 Apr 26, 2022
95fedb9
Resolve comments and fix minor issues
dimitur2204 Apr 26, 2022
fbd4968
Merge pull request #728 from podkrepi-bg/feature/725-admin-recurring-…
dimitur2204 Apr 26, 2022
88c6f77
Fix modal store problem
dimitur2204 Apr 26, 2022
40a2fb5
Make only one modal store instance
dimitur2204 Apr 26, 2022
3d84901
Add modal store to GridActions
dimitur2204 Apr 26, 2022
87cb277
Clean up folder structure
dimitur2204 Apr 26, 2022
cd68311
Update imports for RecurringDonationStatusSelect
dimitur2204 Apr 26, 2022
5cece46
Created Recurring Donation Page
Marina-yoya Apr 7, 2022
226739e
Added Recurring Donation Page
Marina-yoya Apr 7, 2022
2b9a809
added DetailsModal
Marina-yoya Apr 8, 2022
0080dde
create page added
Marina-yoya Apr 11, 2022
bf883bf
added EditPage
Marina-yoya Apr 12, 2022
7d6a44b
apiEndpoinds
Marina-yoya Apr 12, 2022
bdc1495
Marina-yoya Apr 12, 2022
4eca962
added useTranslation
Marina-yoya Apr 14, 2022
6b010f2
change createForm usetranslation
Marina-yoya Apr 14, 2022
e88e54f
fixing EditPage
Marina-yoya Apr 15, 2022
17e2421
Add person autocomplete component and start base dialog
dimitur2204 Apr 24, 2022
540e886
Show person and cleanup
dimitur2204 Apr 24, 2022
9304343
Dialog full width and showId props on autocomplete
dimitur2204 Apr 25, 2022
7bdd618
Add person info component
dimitur2204 Apr 25, 2022
3118a93
Styled person info
dimitur2204 Apr 25, 2022
4d327a6
Add select person styled box
dimitur2204 Apr 26, 2022
f709f93
Add validation
dimitur2204 Apr 26, 2022
ee491ff
Extract FormFieldButton as a component
dimitur2204 Apr 26, 2022
0b31bba
Add translations for person info component
dimitur2204 Apr 26, 2022
2a91242
Resolve comments and fix minor issues
dimitur2204 Apr 26, 2022
e2abb07
Fix modal store problem
dimitur2204 Apr 26, 2022
fea3907
Make only one modal store instance
dimitur2204 Apr 26, 2022
0da0a2b
Add modal store to GridActions
dimitur2204 Apr 26, 2022
bee7eba
Clean up folder structure
dimitur2204 Apr 26, 2022
8ae5516
Update imports for RecurringDonationStatusSelect
dimitur2204 Apr 26, 2022
43ad521
Fix apiEndpoints after rebase
dimitur2204 Apr 26, 2022
dea2917
Merge branch 'recurring-donation' of github.com:podkrepi-bg/frontend …
dimitur2204 Apr 26, 2022
82c673c
Fix recurringDonation api endpoints
dimitur2204 Apr 26, 2022
cf42395
Fix formik submitting
dimitur2204 Apr 26, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions src/common/hooks/confirm.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { useState } from 'react'

export type ConfirmProps = {
onConfirm?: () => void | Promise<void>
onClose?: () => void | Promise<void>
}
export type ConfirmHookProps = {
open: boolean
loading: boolean
openHandler: () => void
confirmHandler: () => void
closeHandler: () => void
}

const useConfirm = ({ onConfirm, onClose }: ConfirmProps): ConfirmHookProps => {
const [open, setOpen] = useState<boolean>(false)
const [loading, setLoading] = useState<boolean>(false)

return {
open,
loading,
openHandler: () => {
setOpen(true)
},
confirmHandler: async () => {
setOpen(false)
if (typeof onConfirm === 'function') {
setLoading(true)
await onConfirm()
setLoading(false)
}
},
closeHandler: async () => {
setOpen(false)
if (typeof onClose === 'function') {
setLoading(true)
await onClose()
setLoading(false)
}
},
}
}

export default useConfirm
5 changes: 3 additions & 2 deletions src/common/hooks/person.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { useKeycloak } from '@react-keycloak/ssr'
import { PersonResponse } from 'gql/person'
import { KeycloakInstance } from 'keycloak-js'
import { useQuery } from 'react-query'
import { useQuery, UseQueryOptions } from 'react-query'
import { endpoints } from 'service/apiEndpoints'
import { authQueryFnFactory } from 'service/restRequests'

export const usePersonList = () => {
export const usePersonList = ({ options }: { options: UseQueryOptions<PersonResponse[]> }) => {
const { keycloak } = useKeycloak<KeycloakInstance>()
return useQuery<PersonResponse[]>(
endpoints.person.list.url,
authQueryFnFactory<PersonResponse[]>(keycloak?.token),
options,
)
}
47 changes: 47 additions & 0 deletions src/components/person/PersonAutocomplete.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { useTranslation } from 'react-i18next'
import { Autocomplete, AutocompleteProps, TextField } from '@mui/material'
import { PersonResponse } from 'gql/person'
import { usePersonList } from 'common/hooks/person'

export type PersonAutocompleteProps = {
onSelect: (person: PersonResponse | null) => void
autocompleteProps?: Omit<
AutocompleteProps<PersonResponse, undefined, undefined, undefined>,
'renderInput' | 'options' | 'getOptionLabel' | 'onChange' | 'loading'
>
}
export default function PersonAutocomplete({
onSelect,
autocompleteProps,
}: PersonAutocompleteProps) {
const { t } = useTranslation('common')
const {
data: personList,
isLoading,
refetch,
} = usePersonList({
options: {
enabled: false,
refetchOnWindowFocus: false,
},
})
return (
<Autocomplete
isOptionEqualToValue={(option, value) => option.firstName === value.firstName}
options={personList || []}
getOptionLabel={(person) => person.firstName + ' ' + person.lastName}
onChange={(e, person) => {
console.log(person)
onSelect(person)
}}
onOpen={() => {
refetch()
}}
loading={isLoading}
renderInput={(params) => (
<TextField {...params} type="text" fullWidth defaultValue="" label={t('fields.' + name)} />
)}
{...autocompleteProps}
/>
)
}
67 changes: 67 additions & 0 deletions src/components/person/PersonSelectDialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { Close } from '@mui/icons-material'
import { LoadingButton } from '@mui/lab'
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
} from '@mui/material'
import useConfirm from 'common/hooks/confirm'
import CloseModalButton from 'components/common/CloseModalButton'
import { PersonResponse } from 'gql/person'
import React, { useState } from 'react'
import PersonAutocomplete from './PersonAutocomplete'

type Props = {
onConfirm: (person: PersonResponse) => void
}

function PersonSelectDialog({ onConfirm: confirmCallback }: Props) {
const [person, setPerson] = useState<PersonResponse | null>(null)
const { open, confirmHandler, closeHandler, openHandler, loading } = useConfirm({
onConfirm: async () => {
confirmCallback(person as PersonResponse)
},
onClose: async () => {
null
},
})
return (
<>
<Button onClick={openHandler}>Open</Button>
<Dialog open={open} onClose={closeHandler}>
<DialogTitle>
Person Select
{/* <IconButton
aria-label="close"
onClick={closeHandler}
sx={{
position: 'absolute',
right: 8,
top: 8,
color: (theme) => theme.palette.grey[500],
}}>
<Close />
</IconButton> */}
</DialogTitle>
<DialogContent>
<PersonAutocomplete
onSelect={(person) => {
setPerson(person)
}}
/>
</DialogContent>
<DialogActions>
<CloseModalButton />
<LoadingButton onClick={confirmHandler} loading={loading}>
Confirm
</LoadingButton>
</DialogActions>
</Dialog>
</>
)
}

export default PersonSelectDialog
8 changes: 7 additions & 1 deletion src/components/recurring-donation/Form.tsx
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@ 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'
import PersonSelectDialog from 'components/person/PersonSelectDialog'

export enum RecurringDonationStatus {
trialing = 'trialing',
@@ -119,7 +120,12 @@ export default function EditForm() {
<RecurringDonationStatusSelect />
</Grid>
<Grid item xs={6}>
<FormTextField type="text" label={t('recurring-donation:personId')} name="personId" />
<PersonSelectDialog
onConfirm={(person) => {
console.log(person)
}}
/>
{/* <FormTextField type="text" label={t('recurring-donation:personId')} name="personId" /> */}
</Grid>
<Grid item xs={6}>
<FormTextField