From 15709950211d3913ee084cbddf570bf49470fdc0 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Mon, 23 Sep 2024 14:44:07 +0200 Subject: [PATCH] feat: Add Stripe pre-setup dialog --- .../StripePreSetupDialog.tsx | 4 +- .../StripePreSetupDialogContent.tsx | 78 +++++++++++++++++-- packages/webapp/src/icons/CreditCard2.tsx | 33 ++++++++ packages/webapp/src/icons/Dollar.tsx | 50 ++++++++++++ packages/webapp/src/icons/LayoutAuto.tsx | 43 ++++++++++ packages/webapp/src/icons/SwitchIcon.tsx | 26 +++++++ 6 files changed, 224 insertions(+), 10 deletions(-) create mode 100644 packages/webapp/src/icons/CreditCard2.tsx create mode 100644 packages/webapp/src/icons/Dollar.tsx create mode 100644 packages/webapp/src/icons/LayoutAuto.tsx create mode 100644 packages/webapp/src/icons/SwitchIcon.tsx diff --git a/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialog.tsx b/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialog.tsx index 41eb0409c..9cb0bfabe 100644 --- a/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialog.tsx +++ b/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialog.tsx @@ -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 }} > diff --git a/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx b/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx index bd64ff525..5ee569fc8 100644 --- a/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx +++ b/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx @@ -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 ( <> + + + + + {' '} + If you're already using Stripe, you can connect your Stripe account + to Bigcapital. + - + + + + {' '} + Stripe applies a processing fee for each card payment, but we only + charge for the application subscription. + + + + + + {' '} + Customers can pay invoice using credit card, debit card or digital + wallets like Apple Pay or Google Pay. + + + + + + {' '} + You can enable or disable card payments for each invoice + + + - Set It Up - + <> + + + } > ); } + +const PaymentFeatureItem = styled('div')` + padding-left: 20px; + position: relative; + padding-left: 50px; +`; + +const PaymentFeatureIcon = styled('span')` + position: absolute; + left: 12px; + top: 2px; + color: #0052cc; +`; diff --git a/packages/webapp/src/icons/CreditCard2.tsx b/packages/webapp/src/icons/CreditCard2.tsx new file mode 100644 index 000000000..d0b129d54 --- /dev/null +++ b/packages/webapp/src/icons/CreditCard2.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +interface CreditCard2IconProps extends React.SVGProps { + size?: number; +} + +export const CreditCard2Icon: React.FC = ({ + size = 16, + ...props +}) => ( + + + + + + + + + +); diff --git a/packages/webapp/src/icons/Dollar.tsx b/packages/webapp/src/icons/Dollar.tsx new file mode 100644 index 000000000..b9b5849d6 --- /dev/null +++ b/packages/webapp/src/icons/Dollar.tsx @@ -0,0 +1,50 @@ +import React from 'react'; + +interface DollarIconProps extends React.SVGProps { + size?: number; +} + +export const DollarIcon: React.FC = ({ + size = 16, + ...props +}) => ( + + + + + + + + + +); diff --git a/packages/webapp/src/icons/LayoutAuto.tsx b/packages/webapp/src/icons/LayoutAuto.tsx new file mode 100644 index 000000000..98f8d76c4 --- /dev/null +++ b/packages/webapp/src/icons/LayoutAuto.tsx @@ -0,0 +1,43 @@ +import React from 'react'; + +interface LayoutAutoIconProps extends React.SVGProps { + size?: number; +} + +export const LayoutAutoIcon: React.FC = ({ + size = 16, + ...props +}) => ( + + + + + + + + + +); diff --git a/packages/webapp/src/icons/SwitchIcon.tsx b/packages/webapp/src/icons/SwitchIcon.tsx new file mode 100644 index 000000000..1f0db92bd --- /dev/null +++ b/packages/webapp/src/icons/SwitchIcon.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +interface SwitchIconProps extends React.SVGProps { + size?: number; +} + +export const SwitchIcon: React.FC = ({ + size = 16, + ...props +}) => ( + + + + + + + +);