feat: simplifying bank account activation and supporting Iban (#1009)

worknenjoy · Sep 24, 2023 · 8fee318 · 8fee318
1 parent 5ceb754
commit 8fee318
Show file tree

Hide file tree

Showing 6 changed files with 300 additions and 703 deletions.
diff --git a/frontend/src/components/payment/payment-options.js b/frontend/src/components/payment/payment-options.js
@@ -33,8 +33,8 @@ class PaymentOptions extends Component {
         <Typography variant='h5' component='h3' style={ { marginBottom: 10, marginTop: 20 } }>
           <FormattedMessage id='payment.headline' defaultMessage='Bank account' />
         </Typography>
-        <Typography component='p' color='textSecondary' style={ { marginBottom: 10 } }>
-          <FormattedMessage id='payment.options.description' defaultMessage='Setup your bank account to receive the payments of your tasks concluded' />
+        <Typography component='p' color='textSecondary' style={ { marginBottom: 5 } }>
+          <FormattedMessage id='payment.options.description.title' defaultMessage='Setup payouts for your issues completed' />
         </Typography>
         <AccountContainer />
       </Paper>

diff --git a/frontend/src/components/profile/account-details.tsx b/frontend/src/components/profile/account-details.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { injectIntl, FormattedMessage } from 'react-intl'
+import { injectIntl, FormattedMessage, FormattedDate } from 'react-intl'
 import ReactPlaceholder from 'react-placeholder'
 import {
   withStyles,
@@ -16,6 +16,9 @@ import {
 import MuiAlert from '@material-ui/lab/Alert'
 import 'react-phone-number-input/style.css'
 import MaskedInput from 'react-text-mask'
+import Moment from 'moment'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import Switch from '@material-ui/core/Switch'
 
 import CountryPicker, { countryCodes } from './country-picker'
 
@@ -83,22 +86,17 @@ export const Field = ({ ref, name, value, label, type = 'text', required = false
 const AccountDetails = ({
   intl,
   account,
-  history,
   updateAccount,
   user,
-  updateUser,
-  deleteUser,
   createAccount,
-  createBankAccount,
-  getBankAccount,
-  bankAccount,
   fetchAccount,
   classes
 }) => {
   const [ accountData, setAccountData ] = useState({})
   const [ displayCurrentCountry, setDisplayCurrentCountry ] = useState({ country: '', code: ''})
   const [ userId ] = useState('')
   const [ openCountryPicker, setOpenCountryPicker ] = useState(false)
+  const [ terms, setTerms ] = useState(false)
 
   const handleSubmit = (e) => {
     e.preventDefault()
@@ -124,6 +122,10 @@ const AccountDetails = ({
       'individual[dob][year]': e.target['individual[dob][year]'].value
     }
 
+    if(terms) {
+      formData['tos_acceptance[date]'] = Math.round(+new Date() / 1000)
+    }
+
     if (e.target['individual[id_number]'].value) {
       formData['individual[id_number]'] =
         e.target['individual[id_number]'].value
@@ -375,6 +377,63 @@ const AccountDetails = ({
                 </Grid>
               </Grid>
             </fieldset>
+            <fieldset className={ classes.fieldset }>
+              <legend className={ classes.legend }>
+                <Typography>
+                  <FormattedMessage id='account.details.terms' defaultMessage='Accept terms' />
+                </Typography>
+              </legend>
+              <Grid container spacing={ 2 }>
+                <Grid item xs={ 12 } md={ 12 }>
+                { !account.data.tos_acceptance.date ? (
+                  <>
+                    <FormControl>
+                      <FormattedMessage 
+                        id='account.details.terms.read'
+                        defaultMessage='I read and I accept the Stripe terms to receive transfers about payments directly on my account'  
+                      >
+                        {(msg) => (
+                          <FormControlLabel
+                            control={
+                              <Switch
+                                name='tos_acceptance'
+                                checked={terms}
+                                onChange={() => setTerms(!terms)}
+                                value={terms}
+                                color='primary'
+                              />
+                            }
+                            label={msg}
+                          />
+                        )}
+                      </FormattedMessage>
+                    </FormControl>
+                    <FormControl>
+                      <Typography color='primary' style={{ marginTop: 8 }}>
+                        <a
+                          target='_blank'
+                          href={`https://stripe.com/${user.user.country}/connect-account/legal`}
+                        >
+                          {' '}
+                          <FormattedMessage id='account.details.terms.access' defaultMessage='see stripe terms' />{' '}
+                        </a>
+                      </Typography>
+                    </FormControl>
+                  </>
+                ) : (
+                  <FormControl style={{display: 'block'}}>
+                    <Typography color='primary' style={{display: 'block'}}>
+                      <FormattedMessage id='account.terms.accepted' defaultMessage='You agreed with the terms in ' />
+                        {' '}
+                      <FormattedDate value={ Moment.unix(
+                        account.data.tos_acceptance.date
+                      ) } />
+                    </Typography>
+                  </FormControl>
+                )}
+                </Grid>
+              </Grid>
+            </fieldset>
             <Grid item xs={ 12 }>
               <div style={ { float: 'right' } }>
                 <Button