mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 22:00:31 +00:00
feat: Add Stripe pre-setup dialog
This commit is contained in:
Ahmed Bouhuolia
@@ -14,10 +14,10 @@ function StripePreSetupDialogRoot({ dialogName, payload, isOpen }) {
|
||||
name={dialogName}
|
||||
isOpen={isOpen}
|
||||
payload={payload}
|
||||
title={'Share Link'}
|
||||
title={'Connect a Stripe account to accept card payments'}
|
||||
canEscapeJeyClose={true}
|
||||
autoFocus={true}
|
||||
style={{ width: 570 }}
|
||||
style={{ width: 500 }}
|
||||
>
|
||||
<DialogSuspense>
|
||||
<StripePreSetupDialogContent />
|
||||
|
||||
@@ -1,10 +1,21 @@
|
||||
import { Stack } from '@/components';
|
||||
import { useDialogContext } from '@/components/Dialog/DialogProvider';
|
||||
import {
|
||||
useCreateStripeAccount,
|
||||
useCreateStripeAccountLink,
|
||||
} from '@/hooks/query/stripe-integration';
|
||||
import { useDialogActions } from '@/hooks/state';
|
||||
import { CreditCard2Icon } from '@/icons/CreditCard2';
|
||||
import { DollarIcon } from '@/icons/Dollar';
|
||||
import { LayoutAutoIcon } from '@/icons/LayoutAuto';
|
||||
import { SwitchIcon } from '@/icons/SwitchIcon';
|
||||
import { Button, DialogBody, DialogFooter, Intent } from '@blueprintjs/core';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export function StripePreSetupDialogContent() {
|
||||
const { name } = useDialogContext();
|
||||
const { closeDialog } = useDialogActions();
|
||||
|
||||
const {
|
||||
mutateAsync: createStripeAccount,
|
||||
isLoading: isCreateStripeAccountLoading,
|
||||
@@ -31,25 +42,76 @@ export function StripePreSetupDialogContent() {
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancelBtnClick = () => {
|
||||
closeDialog(name);
|
||||
};
|
||||
|
||||
const isLoading = isCreateStripeAccountLoading || isCreateStripeLinkLoading;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogBody>
|
||||
<Stack style={{ paddingTop: 10, paddingBottom: 20 }}>
|
||||
<PaymentFeatureItem>
|
||||
<PaymentFeatureIcon>
|
||||
<LayoutAutoIcon size={16} />
|
||||
</PaymentFeatureIcon>{' '}
|
||||
If you're already using Stripe, you can connect your Stripe account
|
||||
to Bigcapital.
|
||||
</PaymentFeatureItem>
|
||||
|
||||
|
||||
<PaymentFeatureItem>
|
||||
<PaymentFeatureIcon>
|
||||
<DollarIcon size={16} />
|
||||
</PaymentFeatureIcon>{' '}
|
||||
Stripe applies a processing fee for each card payment, but we only
|
||||
charge for the application subscription.
|
||||
</PaymentFeatureItem>
|
||||
|
||||
<PaymentFeatureItem>
|
||||
<PaymentFeatureIcon>
|
||||
<CreditCard2Icon size={16} />
|
||||
</PaymentFeatureIcon>{' '}
|
||||
Customers can pay invoice using credit card, debit card or digital
|
||||
wallets like Apple Pay or Google Pay.
|
||||
</PaymentFeatureItem>
|
||||
|
||||
<PaymentFeatureItem>
|
||||
<PaymentFeatureIcon>
|
||||
<SwitchIcon size={16} />
|
||||
</PaymentFeatureIcon>{' '}
|
||||
You can enable or disable card payments for each invoice
|
||||
</PaymentFeatureItem>
|
||||
</Stack>
|
||||
</DialogBody>
|
||||
|
||||
<DialogFooter
|
||||
actions={
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
onClick={handleSetUpBtnClick}
|
||||
loading={isLoading}
|
||||
>
|
||||
Set It Up
|
||||
</Button>
|
||||
<>
|
||||
<Button onClick={handleCancelBtnClick}>Cancel</Button>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
onClick={handleSetUpBtnClick}
|
||||
loading={isLoading}
|
||||
>
|
||||
Set Up Stripe
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
></DialogFooter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const PaymentFeatureItem = styled('div')`
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
`;
|
||||
|
||||
const PaymentFeatureIcon = styled('span')`
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 2px;
|
||||
color: #0052cc;
|
||||
`;
|
||||
|
||||
33
packages/webapp/src/icons/CreditCard2.tsx
Normal file
33
packages/webapp/src/icons/CreditCard2.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
|
||||
interface CreditCard2IconProps extends React.SVGProps<SVGSVGElement> {
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export const CreditCard2Icon: React.FC<CreditCard2IconProps> = ({
|
||||
size = 16,
|
||||
...props
|
||||
}) => (
|
||||
<span className={'bp4-icon bp4-icon-credit-card-2'}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
{...props}
|
||||
>
|
||||
<g id="credit_card_2_">
|
||||
<g>
|
||||
<path
|
||||
d="M14.99,2.95h-14c-0.55,0-1,0.45-1,1v1h16v-1C15.99,3.4,15.54,2.95,14.99,2.95z M-0.01,12.95c0,0.55,0.45,1,1,1h14
|
||||
c0.55,0,1-0.45,1-1v-6h-16C-0.01,6.95-0.01,12.95-0.01,12.95z M5.49,10.95h5c0.28,0,0.5,0.22,0.5,0.5s-0.22,0.5-0.5,0.5h-5
|
||||
c-0.28,0-0.5-0.22-0.5-0.5S5.22,10.95,5.49,10.95z M2.49,10.95h1c0.28,0,0.5,0.22,0.5,0.5s-0.22,0.5-0.5,0.5h-1
|
||||
c-0.28,0-0.5-0.22-0.5-0.5S2.22,10.95,2.49,10.95z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
50
packages/webapp/src/icons/Dollar.tsx
Normal file
50
packages/webapp/src/icons/Dollar.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
|
||||
interface DollarIconProps extends React.SVGProps<SVGSVGElement> {
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export const DollarIcon: React.FC<DollarIconProps> = ({
|
||||
size = 16,
|
||||
...props
|
||||
}) => (
|
||||
<span className={'bp4-icon bp4-icon-arrow-bottom-left'}>
|
||||
<svg
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
enableBackground={`new 0 0 ${size} ${size}`}
|
||||
xmlSpace="preserve"
|
||||
{...props}
|
||||
>
|
||||
<g id="dollar_2_">
|
||||
<g>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M12.83,9.51c-0.1-0.3-0.25-0.58-0.45-0.84c-0.2-0.26-0.45-0.49-0.75-0.7
|
||||
c-0.3-0.2-0.65-0.36-1.05-0.48c-0.16-0.04-0.43-0.11-0.8-0.2C9.43,7.2,9.05,7.11,8.66,7.01C8.27,6.91,7.92,6.82,7.6,6.74
|
||||
C7.29,6.66,7.11,6.62,7.06,6.61C6.63,6.49,6.28,6.32,6.01,6.09c-0.27-0.23-0.4-0.55-0.4-0.95c0-0.29,0.07-0.53,0.21-0.72
|
||||
c0.14-0.19,0.32-0.34,0.54-0.46c0.22-0.11,0.46-0.19,0.72-0.24C7.34,3.67,7.6,3.64,7.85,3.64c0.74,0,1.35,0.15,1.83,0.46
|
||||
c0.48,0.3,0.75,0.83,0.81,1.56h2.14c0-0.6-0.13-1.13-0.38-1.58c-0.25-0.45-0.59-0.84-1.02-1.15c-0.43-0.31-0.93-0.54-1.49-0.7
|
||||
C9.5,2.17,9.25,2.13,8.99,2.09V1c0-0.55-0.45-1-1-1c-0.55,0-1,0.45-1,1v1.08C6.76,2.11,6.53,2.15,6.31,2.21
|
||||
C5.77,2.34,5.29,2.55,4.87,2.82C4.45,3.1,4.11,3.45,3.85,3.87C3.59,4.3,3.46,4.8,3.46,5.37c0,0.3,0.04,0.59,0.13,0.88
|
||||
c0.09,0.29,0.23,0.56,0.44,0.82c0.21,0.26,0.48,0.49,0.83,0.7c0.35,0.21,0.79,0.38,1.31,0.51C7.02,8.49,7.73,8.66,8.31,8.8
|
||||
c0.58,0.13,1.08,0.28,1.52,0.42c0.25,0.09,0.48,0.23,0.69,0.44c0.21,0.21,0.32,0.53,0.32,0.97c0,0.21-0.05,0.42-0.14,0.63
|
||||
c-0.09,0.21-0.24,0.39-0.45,0.55c-0.21,0.16-0.47,0.29-0.81,0.39c-0.33,0.1-0.73,0.15-1.2,0.15c-0.43,0-0.84-0.05-1.21-0.14
|
||||
c-0.37-0.09-0.7-0.24-0.99-0.43c-0.29-0.2-0.51-0.45-0.67-0.76c-0.16-0.31-0.24-0.68-0.24-1.12H3c0.01,0.71,0.15,1.32,0.43,1.84
|
||||
c0.27,0.52,0.64,0.94,1.1,1.27c0.46,0.33,0.99,0.58,1.61,0.74c0.27,0.07,0.56,0.12,0.85,0.16V15c0,0.55,0.45,1,1,1
|
||||
c0.55,0,1-0.45,1-1v-1.05c0.3-0.03,0.61-0.08,0.9-0.15c0.58-0.13,1.1-0.34,1.56-0.63c0.46-0.29,0.83-0.66,1.11-1.11
|
||||
c0.28-0.45,0.42-1,0.42-1.64C12.98,10.11,12.93,9.81,12.83,9.51z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
43
packages/webapp/src/icons/LayoutAuto.tsx
Normal file
43
packages/webapp/src/icons/LayoutAuto.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
|
||||
interface LayoutAutoIconProps extends React.SVGProps<SVGSVGElement> {
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export const LayoutAutoIcon: React.FC<LayoutAutoIconProps> = ({
|
||||
size = 16,
|
||||
...props
|
||||
}) => (
|
||||
<span className={'bp4-icon bp4-icon-arrow-bottom-left'}>
|
||||
<svg
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
enableBackground={`new 0 0 ${size} ${size}`}
|
||||
xmlSpace="preserve"
|
||||
{...props}
|
||||
>
|
||||
<g id="layout_auto_4_">
|
||||
<g>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14,9.5c-0.56,0-1.06,0.23-1.42,0.59L8.99,8l3.59-2.09
|
||||
C12.94,6.27,13.44,6.5,14,6.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2c0,0.19,0.03,0.37,0.08,0.54L8.5,7.13v-3.2
|
||||
C9.36,3.71,10,2.93,10,2c0-1.1-0.9-2-2-2S6,0.9,6,2c0,0.93,0.64,1.71,1.5,1.93v3.2L3.92,5.04C3.97,4.87,4,4.69,4,4.5
|
||||
c0-1.1-0.9-2-2-2s-2,0.9-2,2c0,1.1,0.9,2,2,2c0.56,0,1.06-0.23,1.42-0.59L7.01,8l-3.59,2.09C3.06,9.73,2.56,9.5,2,9.5
|
||||
c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2s2-0.9,2-2c0-0.19-0.03-0.37-0.08-0.54L7.5,8.87v3.2C6.64,12.29,6,13.07,6,14c0,1.1,0.9,2,2,2
|
||||
s2-0.9,2-2c0-0.93-0.64-1.71-1.5-1.93v-3.2l3.58,2.09C12.03,11.13,12,11.31,12,11.5c0,1.1,0.9,2,2,2s2-0.9,2-2
|
||||
C16,10.4,15.1,9.5,14,9.5z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
26
packages/webapp/src/icons/SwitchIcon.tsx
Normal file
26
packages/webapp/src/icons/SwitchIcon.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
|
||||
interface SwitchIconProps extends React.SVGProps<SVGSVGElement> {
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export const SwitchIcon: React.FC<SwitchIconProps> = ({
|
||||
size = 16,
|
||||
...props
|
||||
}) => (
|
||||
<span className={'bp4-icon bp4-icon-arrow-bottom-left'}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
{...props}
|
||||
>
|
||||
<g stroke="none" strokeWidth="1" fill="currentColor" fillRule="evenodd">
|
||||
<path d="M9.29289322,2.29289322 L10.7071068,3.70710678 L5.70795751,8.70727122 C5.89517048,9.09873251 6,9.53712413 6,10 C6,11.6568542 4.65685425,13 3,13 C1.34314575,13 0,11.6568542 0,10 C0,8.34314575 1.34314575,7 3,7 C3.46287587,7 3.90126749,7.10482952 4.29272878,7.29204249 L9.29289322,2.29289322 Z M13,7 C14.6568542,7 16,8.34314575 16,10 C16,11.6568542 14.6568542,13 13,13 C11.3431458,13 10,11.6568542 10,10 C10,8.34314575 11.3431458,7 13,7 Z M3,9 C2.44771525,9 2,9.44771525 2,10 C2,10.5522847 2.44771525,11 3,11 C3.55228475,11 4,10.5522847 4,10 C4,9.44771525 3.55228475,9 3,9 Z M13,9 C12.4477153,9 12,9.44771525 12,10 C12,10.5522847 12.4477153,11 13,11 C13.5522847,11 14,10.5522847 14,10 C14,9.44771525 13.5522847,9 13,9 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
Reference in New Issue
Block a user