QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 21:00:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Stripe payment integration

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-23 13:21:54 +02:00
parent 9ba651decb
commit 8109236e72
19 changed files with 287 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx
View File

@@ -1,35 +1,20 @@
// @ts-nocheck
import React, { useEffect } from 'react';
import styled from 'styled-components';
import {
Button,
Classes,
Intent,
Menu,
MenuItem,
Popover,
Tag,
Text,
} from '@blueprintjs/core';
import { AppToaster, Box, Card, Group, Stack } from '@/components';
import { StripeLogo } from '@/icons/StripeLogo';
import {
PaymentMethodsBoot,
usePaymentMethodsBoot,
} from './PreferencesPaymentMethodsBoot';
import { Classes, Text } from '@blueprintjs/core';
import { Box, Stack } from '@/components';
import { PaymentMethodsBoot } from './PreferencesPaymentMethodsBoot';
import { StripePreSetupDialog } from './dialogs/StripePreSetupDialog/StripePreSetupDialog';
import { DialogsName } from '@/constants/dialogs';
import {
useAlertActions,
useChangePreferencesPageTitle,
useDialogActions,
useDrawerActions,
} from '@/hooks/state';
import { useCreateStripeAccountLink } from '@/hooks/query/stripe-integration';
import { useChangePreferencesPageTitle } from '@/hooks/state';
import { StripeIntegrationEditDrawer } from './drawers/StripeIntegrationEditDrawer';
import { StripePaymentMethod } from './StripePaymentMethod';
import { DialogsName } from '@/constants/dialogs';
import { DRAWERS } from '@/constants/drawers';
import { MoreIcon } from '@/icons/More';
/**
* Payment methods page.
* @returns {JSX.Element}
*/
export default function PreferencesPaymentMethodsPage() {
const changePageTitle = useChangePreferencesPageTitle();
@@ -58,141 +43,8 @@ export default function PreferencesPaymentMethodsPage() {
);
}
function StripePaymentMethod() {
const { openDialog } = useDialogActions();
const { openDrawer } = useDrawerActions();
const { openAlert } = useAlertActions();
const { paymentMethodsState } = usePaymentMethodsBoot();
const stripeState = paymentMethodsState?.stripe;
const isAccountCreated = stripeState?.isStripeAccountCreated;
const isAccountActive = stripeState?.isStripePaymentActive;
const stripeAccountId = stripeState?.stripeAccountId;
const stripePaymentMethodId = stripeState?.stripePaymentMethodId;
const {
mutateAsync: createStripeAccountLink,
isLoading: isCreateStripeLinkLoading,
} = useCreateStripeAccountLink();
// Handle Stripe setup button click.
const handleSetUpBtnClick = () => {
openDialog(DialogsName.StripeSetup);
};
// Handle complete Stripe setup button click.
const handleCompleteSetUpBtnClick = () => {
createStripeAccountLink({ stripeAccountId })
.then((res) => {
const { clientSecret } = res;
if (clientSecret.url) {
window.open(clientSecret.url, '_blank');
}
})
.catch(() => {
AppToaster.show({
message: 'Something went wrong.',
intent: Intent.DANGER,
});
});
};
// Handle edit button click.
const handleEditBtnClick = () => {
openDrawer(DRAWERS.STRIPE_PAYMENT_INTEGRATION_EDIT);
};
// Handle delete connection button click.
const handleDeleteConnectionClick = () => {
openAlert('delete-stripe-payment-method', {
paymentMethodId: stripePaymentMethodId,
});
};
return (
<Card style={{ margin: 0 }}>
<Group position="apart">
<Group>
<StripeLogo />
{isAccountActive && (
<Tag minimal intent={Intent.SUCCESS}>
Active
</Tag>
)}
</Group>
<Group spacing={10}>
{isAccountActive && (
<Button small onClick={handleEditBtnClick}>
Edit
</Button>
)}
{!isAccountCreated && (
<Button intent={Intent.PRIMARY} small onClick={handleSetUpBtnClick}>
Set it Up
</Button>
)}
{isAccountCreated && !isAccountActive && (
<Button
intent={Intent.PRIMARY}
small
onClick={handleCompleteSetUpBtnClick}
loading={isCreateStripeLinkLoading}
>
Complete Stripe Set Up
</Button>
)}
{isAccountCreated && (
<Popover
content={
<Menu>
<MenuItem
intent={Intent.DANGER}
text={'Delete Connection'}
onClick={handleDeleteConnectionClick}
/>
</Menu>
}
>
<Button small icon={<MoreIcon size={16} />} />
</Popover>
)}
</Group>
</Group>
<PaymentDescription
className={Classes.TEXT_MUTED}
style={{ fontSize: 13 }}
>
Stripe is an online payment processing platform that allows you to
receive one-time and recurring payments securely from customers. It also
manages all your payments and makes reconciliation a breeze. You can set
it up in no time and get paid faster. 
</PaymentDescription>
<PaymentFooter>
<Text>
<a href={'#'}>View Stripe's Transaction Fees</a>
</Text>
</PaymentFooter>
</Card>
);
}
const PaymentMethodsRoot = styled(Box)`
witdth: 100%;
max-width: 700px;
margin: 20px;
`;
const PaymentDescription = styled(Text)`
font-size: 13px;
margin-top: 12px;
`;
const PaymentFooter = styled(Box)`
margin-top: 14px;
font-size: 12px;
`;

172
packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx Normal file
View File

@@ -0,0 +1,172 @@
// @ts-nocheck
import React from 'react';
import styled from 'styled-components';
import {
Button,
Classes,
Intent,
Menu,
MenuItem,
Popover,
Tag,
Text,
} from '@blueprintjs/core';
import { AppToaster, Box, Card, Group, Stack } from '@/components';
import { StripeLogo } from '@/icons/StripeLogo';
import { usePaymentMethodsBoot } from './PreferencesPaymentMethodsBoot';
import { DialogsName } from '@/constants/dialogs';
import {
useAlertActions,
useDialogActions,
useDrawerActions,
} from '@/hooks/state';
import { useCreateStripeAccountLink } from '@/hooks/query/stripe-integration';
import { DRAWERS } from '@/constants/drawers';
import { MoreIcon } from '@/icons/More';
import { STRIPE_PRICING_LINK } from './constants';
export function StripePaymentMethod() {
const { openDialog } = useDialogActions();
const { openDrawer } = useDrawerActions();
const { openAlert } = useAlertActions();
const { paymentMethodsState } = usePaymentMethodsBoot();
const stripeState = paymentMethodsState?.stripe;
const isAccountCreated = stripeState?.isStripeAccountCreated;
const isAccountActive = stripeState?.isStripePaymentActive;
const stripeAccountId = stripeState?.stripeAccountId;
const stripePaymentMethodId = stripeState?.stripePaymentMethodId;
const isStripeServerConfigured = stripeState?.isStripeServerConfigured;
const {
mutateAsync: createStripeAccountLink,
isLoading: isCreateStripeLinkLoading,
} = useCreateStripeAccountLink();
// Handle Stripe setup button click.
const handleSetUpBtnClick = () => {
openDialog(DialogsName.StripeSetup);
};
// Handle complete Stripe setup button click.
const handleCompleteSetUpBtnClick = () => {
createStripeAccountLink({ stripeAccountId })
.then((res) => {
const { clientSecret } = res;
if (clientSecret.url) {
window.open(clientSecret.url, '_blank');
}
})
.catch(() => {
AppToaster.show({
message: 'Something went wrong.',
intent: Intent.DANGER,
});
});
};
// Handle edit button click.
const handleEditBtnClick = () => {
openDrawer(DRAWERS.STRIPE_PAYMENT_INTEGRATION_EDIT, {
stripePaymentMethodId: stripePaymentMethodId,
});
};
// Handle delete connection button click.
const handleDeleteConnectionClick = () => {
openAlert('delete-stripe-payment-method', {
paymentMethodId: stripePaymentMethodId,
});
};
return (
<Card style={{ margin: 0 }}>
<Group position="apart">
<Group>
<StripeLogo />
{isAccountActive && (
<Tag minimal intent={Intent.SUCCESS}>
Active
</Tag>
)}
</Group>
<Group spacing={10}>
{isAccountActive && (
<Button small onClick={handleEditBtnClick}>
Edit
</Button>
)}
{!isAccountCreated && (
<Button intent={Intent.PRIMARY} small onClick={handleSetUpBtnClick}>
Set it Up
</Button>
)}
{isAccountCreated && !isAccountActive && (
<Button
intent={Intent.PRIMARY}
small
onClick={handleCompleteSetUpBtnClick}
loading={isCreateStripeLinkLoading}
>
Complete Stripe Set Up
</Button>
)}
{isAccountCreated && (
<Popover
content={
<Menu>
<MenuItem
intent={Intent.DANGER}
text={'Delete Connection'}
onClick={handleDeleteConnectionClick}
/>
</Menu>
}
>
<Button small icon={<MoreIcon size={16} />} />
</Popover>
)}
</Group>
</Group>
<PaymentDescription
className={Classes.TEXT_MUTED}
style={{ fontSize: 13 }}
>
Stripe is an online payment processing platform that allows you to
receive one-time and recurring payments securely from customers. It also
manages all your payments and makes reconciliation a breeze. You can set
it up in no time and get paid faster. 
</PaymentDescription>
<PaymentFooter>
<Stack spacing={10}>
<Text>
<a target="_blank" rel="noreferrer" href={STRIPE_PRICING_LINK}>
View Stripe's Transaction Fees
</a>
</Text>
{!isStripeServerConfigured && (
<Text style={{ color: '#CD4246' }}>
Stripe payment is not configured from the server.{' '}
</Text>
)}
</Stack>
</PaymentFooter>
</Card>
);
}
const PaymentDescription = styled(Text)`
font-size: 13px;
margin-top: 12px;
`;
const PaymentFooter = styled(Box)`
margin-top: 14px;
font-size: 12px;
`;

3
packages/webapp/src/containers/Preferences/PaymentMethods/alerts/DeleteStripeConnectionAlert.tsx
View File

@@ -5,7 +5,7 @@ import { Intent, Alert } from '@blueprintjs/core';
import { AppToaster, FormattedMessage as T } from '@/components';
import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
import withAlertActions from '@/containers/Alert/withAlertActions';
import { useDeletePaymentMethod } from '@/hooks/query/payment-methods';
import { useDeletePaymentMethod } from '@/hooks/query/payment-services';
import { compose } from '@/utils';
/**
@@ -28,7 +28,6 @@ function DeleteStripeAccountAlert({
const handleCancelOpenBill = () => {
closeAlert(name);
};
// Handle confirm bill open.
const handleConfirmBillOpen = () => {
deletePaymentMethod({ paymentMethodId })

1
packages/webapp/src/containers/Preferences/PaymentMethods/constants.ts Normal file
View File

@@ -0,0 +1 @@
export const STRIPE_PRICING_LINK = 'https://stripe.com/pricing';

10
packages/webapp/src/containers/Preferences/PaymentMethods/drawers/StripeIntegrationEditBoot.tsx
View File

@@ -2,6 +2,7 @@ import React, { createContext, useContext } from 'react';
import { Spinner } from '@blueprintjs/core';
import { useAccounts } from '@/hooks/query';
import { useGetPaymentMethod } from '@/hooks/query/payment-services';
import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
interface StripeIntegrationEditContextType {
accounts: any;
@@ -20,7 +21,6 @@ export const useStripeIntegrationEditBoot = () => {
const context = useContext<StripeIntegrationEditContextType>(
StripeIntegrationEditContext,
);
if (!context) {
throw new Error(
'useStripeIntegrationEditContext must be used within a StripeIntegrationEditProvider',
@@ -30,9 +30,15 @@ export const useStripeIntegrationEditBoot = () => {
};
export const StripeIntegrationEditBoot: React.FC = ({ children }) => {
const {
payload: { stripePaymentMethodId },
} = useDrawerContext();
const { data: accounts, isLoading: isAccountsLoading } = useAccounts({}, {});
const { data: paymentMethod, isLoading: isPaymentMethodLoading } =
useGetPaymentMethod(9);
useGetPaymentMethod(stripePaymentMethodId, {
enabled: !!stripePaymentMethodId,
});
const value = {
// Accounts.

5
packages/webapp/src/containers/Preferences/PaymentMethods/drawers/StripeIntegrationEditContent.tsx
View File

@@ -10,8 +10,9 @@ import {
export function StripeIntegrationEditContent() {
return (
<StripeIntegrationEditBoot>
<>
<DrawerHeaderContent title={'Edit Stripe Integration'} />
<StripeIntegrationEditBoot>
<StripeIntegrationEditForm>
<DrawerBody>
@@ -23,6 +24,6 @@ export function StripeIntegrationEditContent() {
</div>
</StripeIntegrationEditForm>
</StripeIntegrationEditBoot>
</StripeIntegrationEditBoot>
</>
);
}