RadioAccordionGroup element for the new donation flow (#1274)

* 1273 - create a seperate component with radio buttons * 1273 - add styles to the radio group * 1273 - make the whole select item clickable * 1273 - add card icon * 1273 - add content with a collapse to each option on the payment select elemnt * 1273 - rename to RadioAccordionGroup instead of PaymentSelectItem * 1273 - add default value to the component * 1273 - comment code on the OneTimeDonationPage
podkrepi-bg · Jan 4, 2023 · a8f204f · a8f204f
1 parent a470159
commit a8f204f
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 10 deletions.
diff --git a/src/components/donation-flow/BankIcon.tsx 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 (
+    <SvgIcon
+      width="43"
+      height="45"
+      viewBox="0 0 43 45"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        d="M4.3 19.2857H10.75V34.2857H4.3V19.2857ZM18.275 19.2857H24.725V34.2857H18.275V19.2857ZM0 38.5714H43V45H0V38.5714ZM32.25 19.2857H38.7V34.2857H32.25V19.2857ZM21.5 0L0 10.7143V15H43V10.7143L21.5 0Z"
+        fill={theme.palette.primary.main}
+      />
+    </SvgIcon>
+  )
+}
+
+export default BankIcon
diff --git a/src/components/donation-flow/CardIcon.tsx 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 (
+    <SvgIcon
+      width="58"
+      height="42"
+      viewBox="0 0 58 42"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <g clipPath="url(#clip0_16169_50032)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M57.1594 30.1204C57.1594 31.3083 56.2347 32.2416 55.0579 32.2416H15.5507C14.3739 32.2416 13.4492 31.3083 13.4492 30.1204V2.96887C13.4492 1.78099 14.3739 0.847656 15.5507 0.847656H55.0579C56.2347 0.847656 57.1594 1.78099 57.1594 2.96887V30.1204Z"
+          fill="#91CDEF"
+          stroke="#294E85"
+          strokeWidth="4"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13.8711 4.66602H56.7407V10.6054H13.8711V4.66602Z"
+          fill="#294E85"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16.8125 14H53.798V18.2424H16.8125V14Z"
+          fill="white"
+        />
+        <path d="M53.7992 22.0605H53.3789" stroke="#294E85" strokeWidth="2" />
+        <path d="M52.5364 22.0605H17.6523" stroke="#294E85" strokeWidth="2" strokeDasharray="2 2" />
+        <path d="M17.2328 22.0605H16.8125" stroke="#294E85" strokeWidth="2" />
+        <path d="M53.7992 24.6055H53.3789" stroke="#294E85" strokeWidth="2" />
+        <path d="M52.5364 24.6055H17.6523" stroke="#294E85" strokeWidth="2" strokeDasharray="2 2" />
+        <path d="M17.2328 24.6055H16.8125" stroke="#294E85" strokeWidth="2" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M44.55 39.0286C44.55 40.2165 43.6254 41.1498 42.4485 41.1498H2.94129C1.76448 41.1498 0.839844 40.2165 0.839844 39.0286V11.8771C0.839844 10.6892 1.76448 9.75586 2.94129 9.75586H42.4485C43.6254 9.75586 44.55 10.6892 44.55 11.8771V39.0286Z"
+          fill="white"
+          stroke="#294E85"
+          strokeWidth="4"
+        />
+        <path
+          d="M26.14 29.9917C28.8558 29.9917 31.0574 27.7694 31.0574 25.0281C31.0574 22.2867 28.8558 20.0645 26.14 20.0645C23.4242 20.0645 21.2227 22.2867 21.2227 25.0281C21.2227 27.7694 23.4242 29.9917 26.14 29.9917Z"
+          fill="#91CDEF"
+        />
+        <path
+          d="M19.1205 29.9917C21.8363 29.9917 24.0379 27.7694 24.0379 25.0281C24.0379 22.2867 21.8363 20.0645 19.1205 20.0645C16.4047 20.0645 14.2031 22.2867 14.2031 25.0281C14.2031 27.7694 16.4047 29.9917 19.1205 29.9917Z"
+          fill="#294E85"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M26.1408 20.0653C28.8727 20.0653 31.0582 22.2713 31.0582 25.0289C31.0582 27.7865 28.8727 29.9926 26.1408 29.9926C23.4089 29.9926 21.2234 27.7865 21.2234 25.0289C21.2234 22.2713 23.4509 20.0653 26.1408 20.0653ZM26.1408 19.2168C22.9466 19.2168 20.3828 21.8047 20.3828 25.0289C20.3828 28.2532 22.9466 30.841 26.1408 30.841C29.335 30.841 31.8988 28.2532 31.8988 25.0289C31.8988 21.8047 29.335 19.2168 26.1408 19.2168Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_16169_50032">
+          <rect width="58" height="42" fill="white" />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  )
+}
+
+export default CardIcon
diff --git a/src/components/donation-flow/RadioAccordionGroup.tsx 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: (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <TextField sx={{ mb: 3 }} placeholder="Card info" />
+        <Button variant="contained">Content</Button>
+      </div>
+    ),
+    icon: <CardIcon sx={{ width: 50, height: 50 }} />,
+  },
+  {
+    value: 'bank',
+    label: 'Bank',
+    content: <div>TODO: Add bank form</div>,
+    icon: <BankIcon sx={{ width: 45, height: 45 }} />,
+  },
+]
+
+function RadioAccordionItem({
+  control,
+  icon,
+  selected,
+  content,
+  ...rest
+}: RadioAccordionItemProps) {
+  return (
+    <StyledRadioAccordionItem {...rest}>
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        {control}
+        {icon}
+      </Box>
+      <Collapse unmountOnExit in={selected}>
+        {content}
+      </Collapse>
+    </StyledRadioAccordionItem>
+  )
+}
+
+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<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <FormControl>
+      <RadioGroup
+        aria-labelledby="TODO: Label by the title"
+        name="controlled-radio-buttons-group"
+        value={value}
+        onChange={handleChange}
+        sx={{
+          border: `1px solid ${theme.borders.dark}`,
+          borderRadius: theme.borders.semiRound,
+        }}>
+        {options.map((option) => (
+          <RadioAccordionItem
+            key={option.value}
+            onClick={() => setValue(option.value)}
+            control={
+              <FormControlLabel value={option.value} control={<Radio />} label={option.label} />
+            }
+            icon={option.icon}
+            selected={value === option.value}
+            content={option.content}
+          />
+        ))}
+      </RadioGroup>
+    </FormControl>
+  )
+}
+
+export default RadioAccordionGroup
diff --git a/...tions/stripe/PaymentDetailsStripeForm.tsx → ...-flow/stripe/PaymentDetailsStripeForm.tsx b/...tions/stripe/PaymentDetailsStripeForm.tsx → ...-flow/stripe/PaymentDetailsStripeForm.tsx
diff --git 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}
           />
         </Grid>
+
         <Grid className={classes.stepperWrapper}>
           <Link href={routes.campaigns.viewCampaignBySlug(campaign.slug)} passHref>
             <Typography
@@ -140,6 +142,7 @@ export default function OneTimeDonation({ slug }: { slug: string }) {
             />
           )} */}
           <DonationStepper onStepChange={scrollWindow} />
+          {/* <RadioAccordionGroup options={testRadioOptions} /> */}
         </Grid>
       </Grid>
     </StyledLayout>

diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts