From 34f8a6650c58330f7620989cc6c6d52ac7366397 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sun, 6 Mar 2022 10:11:02 +0400
Subject: [PATCH] Change PaymentMethod component

---
 components/soutyen/payment-method.js | 225 +++++++++++++++------------
 1 file changed, 127 insertions(+), 98 deletions(-)

diff --git a/components/soutyen/payment-method.js b/components/soutyen/payment-method.js
index 0a844ec..78c315a 100644
--- a/components/soutyen/payment-method.js
+++ b/components/soutyen/payment-method.js
@@ -1,117 +1,146 @@
-import {useEffect, useMemo} from 'react'
 import PropTypes from 'prop-types'
-import clsx from 'clsx'
-import {styled} from '@mui/system'
-import {useSwitch} from '@mui/base/SwitchUnstyled'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
 
-const green = {
-  700: '#4CAF50',
-}
+import {Paypal} from '@icons-pack/react-simple-icons'
+import {Elements} from '@stripe/react-stripe-js'
+import {loadStripe} from '@stripe/stripe-js'
 
-const grey = {
-  400: '#BFC7CF',
-  800: '#2F3A45',
-}
+import {appearance} from '../../lib/utils/stripe-style'
 
-const SwitchRoot = styled('span')`
-  display: inline-block;
-  position: relative;
-  width: 84px;
-  height: 36px;
-  padding: 8px;
-`
+import CheckoutForm from './checkout-form'
+import StripePayment from './stripe-payment'
 
-const SwitchInput = styled('input')`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-  cursor: pointer;
-`
-
-const SwitchThumb = styled('span')`
-  position: absolute;
-  display: block;
-  background-color: ${green[700]};
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  top: -1px;
-  left: 4px;
-  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  &::before {
-    display: block;
-    content: '';
-    width: 100%;
-    height: 100%;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
-    '#fff',
-  )}" d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>')
-      center center no-repeat;
-  }
-
-  &.focusVisible {
-    background-color: #79b;
-  }
-
-  &.checked {
-    transform: translateX(44px);
-
-    &::before {
-      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="25" width="25" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
-    '#fff',
-  )}" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/></svg>');
-    }
-  }
-`
-
-const SwitchTrack = styled('span')(
-  ({theme}) => `
-  background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[400]};
-  border-radius: 4px;
-  width: 100%;
-  height: 100%;
-  display: block;
-`,
+const stripePromise = loadStripe(
+  process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY
 )
 
-function MUISwitch(props) {
-  const {setIsPaypal} = props
-  const {getInputProps, checked, disabled, focusVisible} = useSwitch(props)
+const PAYPAL_ID = process.env.NEXT_PUBLIC_PAYPAL_DONATE_ID
 
-  const stateClasses = useMemo(() => ({
-    checked,
-    disabled,
-    focusVisible,
-  }), [checked, disabled, focusVisible])
-
-  useEffect(() => {
-    setIsPaypal(stateClasses.checked)
-  }, [setIsPaypal, stateClasses])
+function TabPanel(props) {
+  const {children, value, index, ...other} = props
 
   return (
-    <SwitchRoot className={clsx(stateClasses)}>
-      <SwitchTrack>
-        <SwitchThumb className={clsx(stateClasses)} />
-      </SwitchTrack>
-      <SwitchInput {...getInputProps()} aria-label='Demo switch' />
-    </SwitchRoot>
+    <div
+      role='tabpanel'
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{p: 3}}>
+          {children}
+        </Box>
+      )}
+    </div>
   )
 }
 
-MUISwitch.propTypes = {
-  setIsPaypal: PropTypes.func.isRequired
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
 }
 
-export default function PaymentMethod({setIsPaypal}) {
-  return <MUISwitch defaultChecked setIsPaypal={setIsPaypal} />
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  }
+}
+
+export default function PaymentMethod({isLoading, paymentMethod, setPaymentMethod, selectedMontant, setSelectedMontant, validMontant, setValidMontant, prices, paymentIntent, setClientSecret, setPaymentIntent, setIsLoading, setPaymentIsReady, setClientEmail, clientEmail, error, setError, clientSecret}) {
+  const options = {
+    clientSecret,
+    appearance,
+  }
+
+  const handleChange = (event, newValue) => {
+    setPaymentMethod(newValue)
+  }
+
+  return (
+    <Box sx={{width: '100%'}}>
+      <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
+        <Tabs scrollButtons allowScrollButtonsMobile value={paymentMethod} aria-label='basic tabs example' variant='fullWidth' onChange={handleChange}>
+          <Tab label='Adhésion' {...a11yProps(0)} />
+          <Tab label='Don PayPal' {...a11yProps(1)} />
+          <Tab label='Don Carte bancaire' {...a11yProps(2)} />
+        </Tabs>
+      </Box>
+      <TabPanel value={paymentMethod} index={0}>
+        <Button size='large' variant='outlined' onClick={() => window.open('https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki', '_blank')}>
+          Cliquez ici pour adhérer à #OKi via HelloAsso
+        </Button>
+      </TabPanel>
+      <TabPanel value={paymentMethod} index={1}>
+        <Button variant='outlined' size='large' endIcon={<Paypal />} onClick={() => window.open(`https://www.paypal.com/donate/?hosted_button_id=${PAYPAL_ID}`, '_blank')}>
+          Cliquez ici pour faire un don via PayPal
+        </Button>
+      </TabPanel>
+      <TabPanel value={paymentMethod} index={2}>
+        <StripePayment
+          selectedMontant={selectedMontant}
+          setSelectedMontant={setSelectedMontant}
+          validMontant={validMontant}
+          setValidMontant={setValidMontant}
+          prices={prices}
+          paymentIntent={paymentIntent}
+          setClientSecret={setClientSecret}
+          setPaymentIntent={setPaymentIntent}
+          setIsLoading={setIsLoading}
+          setPaymentIsReady={setPaymentIsReady}
+          setClientEmail={setClientEmail}
+          clientEmail={clientEmail}
+          error={error}
+          setError={setError}
+          isLoading={isLoading}
+        />
+
+        {clientSecret && validMontant && paymentMethod === 2 && (
+          <Elements options={options} stripe={stripePromise}>
+            <CheckoutForm
+              setPaymentIsReady={setPaymentIsReady}
+              setError={setError}
+              isLoading={isLoading}
+              setIsLoading={setIsLoading}
+            />
+          </Elements>
+        )}
+      </TabPanel>
+    </Box>
+  )
+}
+
+PaymentMethod.defaultProps = {
+  selectedMontant: null,
+  validMontant: null,
+  paymentIntent: null,
+  clientEmail: null,
+  error: null,
+  clientSecret: null
 }
 
 PaymentMethod.propTypes = {
-  setIsPaypal: PropTypes.func.isRequired
+  isLoading: PropTypes.bool.isRequired,
+  paymentMethod: PropTypes.number.isRequired,
+  setPaymentMethod: PropTypes.func.isRequired,
+  selectedMontant: PropTypes.string,
+  setSelectedMontant: PropTypes.func.isRequired,
+  validMontant: PropTypes.string,
+  setValidMontant: PropTypes.func.isRequired,
+  prices: PropTypes.array.isRequired,
+  paymentIntent: PropTypes.string,
+  setClientSecret: PropTypes.func.isRequired,
+  setPaymentIntent: PropTypes.func.isRequired,
+  setIsLoading: PropTypes.func.isRequired,
+  setPaymentIsReady: PropTypes.func.isRequired,
+  setClientEmail: PropTypes.func.isRequired,
+  clientEmail: PropTypes.string,
+  error: PropTypes.string,
+  setError: PropTypes.func.isRequired,
+  clientSecret: PropTypes.string
 }