-
Notifications
You must be signed in to change notification settings - Fork 3
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
opt-in to baas features #113
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import React from 'react'; | ||
import {useMutation} from 'react-query'; | ||
import Typography from '@mui/material/Typography'; | ||
import Button from '@mui/material/Button'; | ||
import {Container} from '../components/Container'; | ||
|
||
const useRequestCapabilities = (capabilities: string[]) => { | ||
return useMutation<void, Error>('requestCapabilities', async () => { | ||
const response = await fetch('/request-capabilities', { | ||
method: 'POST', | ||
headers: { | ||
'Content-Type': 'application/json', | ||
}, | ||
body: JSON.stringify({ | ||
capabilities: capabilities, | ||
}), | ||
}); | ||
if (!response.ok) { | ||
const json = await response.json(); | ||
throw new Error(json?.error ?? 'An error ocurred, please try again.'); | ||
} | ||
}); | ||
}; | ||
|
||
type RequestCapabilitiesProps = { | ||
capabilities: any; | ||
title: string; | ||
description: string; | ||
onSuccess: () => void; | ||
}; | ||
|
||
export const RequestCapabilities = ({ | ||
title, | ||
description, | ||
capabilities, | ||
onSuccess, | ||
}: RequestCapabilitiesProps) => { | ||
const {mutate} = useRequestCapabilities(capabilities); | ||
|
||
return ( | ||
<Container sx={{alignItems: 'center', gap: 4, marginBottom: 2}}> | ||
<Typography | ||
variant="h5" | ||
sx={{ | ||
textAlign: 'center', | ||
}} | ||
> | ||
{title} | ||
</Typography> | ||
<Typography | ||
variant="h6" | ||
sx={{ | ||
textAlign: 'center', | ||
}} | ||
> | ||
{description} | ||
</Typography> | ||
<Button | ||
type="submit" | ||
variant="contained" | ||
sx={{ | ||
fontWeight: 700, | ||
}} | ||
onClick={async () => { | ||
await mutate(); | ||
onSuccess(); | ||
}} | ||
> | ||
Enable | ||
</Button> | ||
</Container> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change | ||||||
---|---|---|---|---|---|---|---|---|
@@ -1,6 +1,7 @@ | ||||||||
import * as React from 'react'; | ||||||||
import {useNavigate} from 'react-router-dom'; | ||||||||
import {useMutation, useQuery} from 'react-query'; | ||||||||
import {useTheme} from '@mui/system'; | ||||||||
import Box from '@mui/material/Box'; | ||||||||
import Typography from '@mui/material/Typography'; | ||||||||
import Link from '@mui/material/Link'; | ||||||||
|
@@ -11,6 +12,7 @@ import { | |||||||
ConnectIssuingCardsList, | ||||||||
ConnectNotificationBanner, | ||||||||
} from '@stripe/react-connect-js'; | ||||||||
import {useSession} from '../hooks/SessionProvider'; | ||||||||
import { | ||||||||
EmbeddedComponentContainer, | ||||||||
EmbeddedContainer, | ||||||||
|
@@ -20,6 +22,7 @@ import {StripeConnectDebugUtils} from '../components/StripeConnectDebugUtils'; | |||||||
import {CardFooter} from '../components/CardFooter'; | ||||||||
import {FullScreenLoading} from '../components/FullScreenLoading'; | ||||||||
import {ErrorState} from '../components/ErrorState'; | ||||||||
import {RequestCapabilities} from '../components/RequestCapabilities'; | ||||||||
|
||||||||
const useCreateReceivedCredit = () => { | ||||||||
const {data: financialAccount} = useFinancialAccount(); | ||||||||
|
@@ -55,15 +58,48 @@ const useFinancialAccount = () => { | |||||||
}; | ||||||||
|
||||||||
export const Finance = () => { | ||||||||
const navigate = useNavigate(); | ||||||||
const {stripeAccount} = useSession(); | ||||||||
|
||||||||
if (!stripeAccount || !stripeAccount.details_submitted) { | ||||||||
return <div>To enable Finance, please complete onboarding.</div>; | ||||||||
} | ||||||||
|
||||||||
const hasIssuingAndTreasury = ['card_issuing', 'treasury'].every( | ||||||||
(capability) => | ||||||||
Object.keys(stripeAccount?.capabilities || []).includes(capability) | ||||||||
); | ||||||||
|
||||||||
if (!hasIssuingAndTreasury) { | ||||||||
return ( | ||||||||
<RequestCapabilities | ||||||||
title={'Enable Finance'} | ||||||||
description={ | ||||||||
'Click "Enable" to get started with a financial account and access to spend cards.' | ||||||||
} | ||||||||
capabilities={{ | ||||||||
card_issuing: { | ||||||||
requested: true, | ||||||||
}, | ||||||||
treasury: { | ||||||||
requested: true, | ||||||||
}, | ||||||||
}} | ||||||||
onSuccess={async () => { | ||||||||
await navigate('/onboarding'); | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||
navigate(0); | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This "works" -- the reason for the navigate + refresh is that when i navigate to /onboarding, the updated capability request isn't reflected yet, so when the user submits, they haven't attested to the issuing/treasury ToS. but with the refresh, it forces a reload (and delay?) so it gets picked up. |
||||||||
}} | ||||||||
/> | ||||||||
); | ||||||||
} | ||||||||
|
||||||||
const { | ||||||||
data: financialAccount, | ||||||||
isLoading: loading, | ||||||||
error: useFinancialAccountError, | ||||||||
refetch, | ||||||||
} = useFinancialAccount(); | ||||||||
|
||||||||
const navigate = useNavigate(); | ||||||||
|
||||||||
const { | ||||||||
status, | ||||||||
mutate, | ||||||||
|
@@ -101,8 +137,6 @@ export const Finance = () => { | |||||||
return 'Create a test received credit'; | ||||||||
}; | ||||||||
|
||||||||
console.log(financialAccount); | ||||||||
|
||||||||
const renderFooter = () => { | ||||||||
return ( | ||||||||
<CardFooter title={renderFooterTitle()} disabled={disabled}> | ||||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: The loading and error state isn't used here (we should display a spinner/loading state and render an error if one occurred)