diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx index 377a7a3c9e..6280b6dbe5 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx @@ -40,7 +40,7 @@ function AddressCard({ {!isFormOpen && ( <>
-

Cardholder name

+

Full name

setIsFormOpen(true)} diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx new file mode 100644 index 0000000000..f73afae9f8 --- /dev/null +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx @@ -0,0 +1,26 @@ +import { z } from 'zod' + +import bankLogo from 'assets/billing/bank.svg' +import { SubscriptionDetailSchema } from 'services/account' + +interface BankInformationProps { + subscriptionDetail: z.infer +} +function BankInformation({ subscriptionDetail }: BankInformationProps) { + return ( +
+
+ bank logo +
+ + {subscriptionDetail?.defaultPaymentMethod?.usBankAccount?.bankName} +  ••••  + {subscriptionDetail?.defaultPaymentMethod?.usBankAccount?.last4} + +
+
+
+ ) +} + +export default BankInformation diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx index 83c001d8a1..812c70ff56 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx @@ -6,11 +6,13 @@ import A from 'ui/A' import Button from 'ui/Button' import Icon from 'ui/Icon' +import BankInformation from './BankInformation' import CardInformation from './CardInformation' import PaymentMethodForm from './PaymentMethodForm' function PaymentCard({ subscriptionDetail, provider, owner }) { const [isFormOpen, setIsFormOpen] = useState(false) const card = subscriptionDetail?.defaultPaymentMethod?.card + const usBankAccount = subscriptionDetail?.defaultPaymentMethod?.usBankAccount return (
@@ -31,13 +33,16 @@ function PaymentCard({ subscriptionDetail, provider, owner }) { provider={provider} owner={owner} closeForm={() => setIsFormOpen(false)} + subscriptionDetail={subscriptionDetail} /> ) : card ? ( + ) : usBankAccount ? ( + ) : (

- No credit card set. Please contact support if you think it’s an + No payment method set. Please contact support if you think it’s an error or set it yourself.

diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx index b6283a7edc..138173195f 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx @@ -1,9 +1,10 @@ import { PaymentElement, useElements } from '@stripe/react-stripe-js' +import { StripePaymentElement } from '@stripe/stripe-js' import cs from 'classnames' import { useState } from 'react' import { z } from 'zod' -import { SubscriptionDetailSchema } from 'services/account' +import { stripeAddress, SubscriptionDetailSchema } from 'services/account' import { useUpdatePaymentMethod } from 'services/account/useUpdatePaymentMethod' import { Provider } from 'shared/api/helpers' import Button from 'ui/Button' @@ -38,6 +39,9 @@ const PaymentMethodForm = ({ email: subscriptionDetail?.defaultPaymentMethod?.billingDetails?.email || undefined, + address: + stripeAddress(subscriptionDetail?.defaultPaymentMethod?.billingDetails) || + undefined, }) async function submit(e: React.FormEvent) { @@ -49,7 +53,9 @@ const PaymentMethodForm = ({ elements.submit() - const paymentElement = elements.getElement(PaymentElement) + const paymentElement = elements.getElement( + PaymentElement + ) as StripePaymentElement updatePaymentMethod(paymentElement, { onSuccess: async () => { diff --git a/src/services/account/useAccountDetails.ts b/src/services/account/useAccountDetails.ts index d3fb95b85b..a9632d1fa9 100644 --- a/src/services/account/useAccountDetails.ts +++ b/src/services/account/useAccountDetails.ts @@ -213,3 +213,20 @@ export function useAccountDetails({ ...opts, }) } + +export const stripeAddress = ( + billingDetails: z.infer | null | undefined +) => { + const address = billingDetails?.address + if (!address) return undefined + + return { + line1: address.line1 || null, + line2: address.line2 || null, + city: address.city || null, + state: address.state || null, + // eslint-disable-next-line camelcase + postal_code: address.postalCode || null, + country: address.country || null, + } +} diff --git a/src/services/account/useUpdatePaymentMethod.ts b/src/services/account/useUpdatePaymentMethod.ts index 8cdb844901..abef288be6 100644 --- a/src/services/account/useUpdatePaymentMethod.ts +++ b/src/services/account/useUpdatePaymentMethod.ts @@ -1,4 +1,5 @@ -import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js' +import { useElements, useStripe } from '@stripe/react-stripe-js' +import { Address, StripePaymentElement } from '@stripe/stripe-js' import { useMutation, useQueryClient } from '@tanstack/react-query' import config from 'config' @@ -11,7 +12,9 @@ import { useCreateStripeSetupIntent } from './useCreateStripeSetupIntent' interface useUpdatePaymentMethodProps { provider: Provider owner: string + name?: string email?: string + address?: Address } interface useUpdatePaymentMethodReturn { @@ -19,7 +22,7 @@ interface useUpdatePaymentMethodReturn { error: null | Error isLoading: boolean mutate: ( - variables: typeof PaymentElement, + variables: StripePaymentElement | null, data?: { onSuccess?: () => void } ) => void data: undefined | unknown @@ -38,7 +41,9 @@ function getPathAccountDetails({ export function useUpdatePaymentMethod({ provider, owner, + name, email, + address, }: useUpdatePaymentMethodProps): useUpdatePaymentMethodReturn { const stripe = useStripe() const elements = useElements() @@ -62,7 +67,9 @@ export function useUpdatePaymentMethod({ payment_method_data: { // eslint-disable-next-line camelcase billing_details: { + name: name, email: email, + address: address, }, }, // eslint-disable-next-line camelcase