diff --git a/src/components/donation-flow/BankIcon.tsx b/src/components/donation-flow/BankIcon.tsx
new file mode 100644
index 000000000..cf6ed7bb2
--- /dev/null
+++ b/src/components/donation-flow/BankIcon.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+import theme from 'common/theme'
+
+function BankIcon(props: SvgIconProps) {
+ return (
+
+
+
+ )
+}
+
+export default BankIcon
diff --git a/src/components/donation-flow/CardIcon.tsx b/src/components/donation-flow/CardIcon.tsx
new file mode 100644
index 000000000..1063f95c3
--- /dev/null
+++ b/src/components/donation-flow/CardIcon.tsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+function CardIcon(props: SvgIconProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default CardIcon
diff --git a/src/components/donation-flow/RadioAccordionGroup.tsx b/src/components/donation-flow/RadioAccordionGroup.tsx
new file mode 100644
index 000000000..84d806fca
--- /dev/null
+++ b/src/components/donation-flow/RadioAccordionGroup.tsx
@@ -0,0 +1,123 @@
+import React from 'react'
+import {
+ Box,
+ BoxProps,
+ Button,
+ Collapse,
+ FormControl,
+ FormControlLabel,
+ Radio,
+ RadioGroup,
+ RadioGroupProps,
+ TextField,
+} from '@mui/material'
+import { styled } from '@mui/material/styles'
+import theme from 'common/theme'
+import CardIcon from './CardIcon'
+import BankIcon from './BankIcon'
+
+export const StyledRadioAccordionItem = styled(Box)(() => ({
+ '&:not(:last-child)': {
+ borderBottom: `1px solid ${theme.borders.dark}`,
+ },
+ padding: theme.spacing(2),
+ margin: 0,
+ cursor: 'pointer',
+}))
+
+interface RadioAccordionItemProps extends BoxProps {
+ control: React.ReactNode
+ icon: React.ReactNode
+ content?: React.ReactNode
+ selected?: boolean
+}
+
+// Temporarily here for testing until the components starts being used
+export const testRadioOptions: Option[] = [
+ {
+ value: 'card',
+ label: 'Card',
+ content: (
+
+
+
+
+ ),
+ icon: ,
+ },
+ {
+ value: 'bank',
+ label: 'Bank',
+ content: TODO: Add bank form
,
+ icon: ,
+ },
+]
+
+function RadioAccordionItem({
+ control,
+ icon,
+ selected,
+ content,
+ ...rest
+}: RadioAccordionItemProps) {
+ return (
+
+
+ {control}
+ {icon}
+
+
+ {content}
+
+
+ )
+}
+
+type Option = {
+ value: string
+ label: string
+ content: React.ReactNode
+ icon: React.ReactNode
+}
+
+export interface RadioAccordionGroupProps extends RadioGroupProps {
+ options: Option[]
+ defaultValue?: string
+}
+
+function RadioAccordionGroup({ options, defaultValue }: RadioAccordionGroupProps) {
+ const [value, setValue] = React.useState(defaultValue)
+
+ const handleChange = (event: React.ChangeEvent) => {
+ setValue(event.target.value)
+ }
+
+ return (
+
+
+ {options.map((option) => (
+ setValue(option.value)}
+ control={
+ } label={option.label} />
+ }
+ icon={option.icon}
+ selected={value === option.value}
+ content={option.content}
+ />
+ ))}
+
+
+ )
+}
+
+export default RadioAccordionGroup
diff --git a/src/components/donations/stripe/PaymentDetailsStripeForm.tsx b/src/components/donation-flow/stripe/PaymentDetailsStripeForm.tsx
similarity index 100%
rename from src/components/donations/stripe/PaymentDetailsStripeForm.tsx
rename to src/components/donation-flow/stripe/PaymentDetailsStripeForm.tsx
diff --git a/src/components/one-time-donation/OneTimeDonationPage.tsx b/src/components/one-time-donation/OneTimeDonationPage.tsx
index 872e64ccf..e197f71ae 100644
--- a/src/components/one-time-donation/OneTimeDonationPage.tsx
+++ b/src/components/one-time-donation/OneTimeDonationPage.tsx
@@ -14,6 +14,7 @@ import { useViewCampaign } from 'common/hooks/campaigns'
import CenteredSpinner from 'components/common/CenteredSpinner'
import DonationStepper from './Steps'
+// import RadioAccordionGroup, { testRadioOptions } from 'components/donation-flow/RadioAccordionGroup'
// import PaymentDetailsStripeForm from 'components/donations/stripe/PaymentDetailsStripeForm'
const PREFIX = 'OneTimeDonationPage'
@@ -122,6 +123,7 @@ export default function OneTimeDonation({ slug }: { slug: string }) {
className={classes.beneficiaryAvatar}
/>
+
)} */}
+ {/* */}
diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts
deleted file mode 100644
index f9645cdf6..000000000
--- a/src/stores/UserStore.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { makeAutoObservable } from 'mobx'
-import { enableStaticRendering } from 'mobx-react'
-
-enableStaticRendering(typeof window === 'undefined')
-
-export default class UserStore {
- constructor() {
- makeAutoObservable(this)
- }
-}