wip

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx

@@ -40,7 +40,7 @@ function AddressCard({
       {!isFormOpen && (
         <>
           <div className="flex justify-between">
-            <h4 className="font-semibold">Cardholder name</h4>
+            <h4 className="font-semibold">Full name</h4>
             <A
               variant="semibold"
               onClick={() => setIsFormOpen(true)}

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<typeof SubscriptionDetailSchema>
+}
+function BankInformation({ subscriptionDetail }: BankInformationProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-1">
+        <img src={bankLogo} alt="bank logo" />
+        <div className="ml-1 flex flex-col self-center">
+          <b>
+            {subscriptionDetail?.defaultPaymentMethod?.usBankAccount?.bankName}
+            &nbsp;••••&nbsp;
+            {subscriptionDetail?.defaultPaymentMethod?.usBankAccount?.last4}
+          </b>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BankInformation

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 (
     <div className="flex flex-col gap-2 border-t p-4">
@@ -31,13 +33,16 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
           provider={provider}
           owner={owner}
           closeForm={() => setIsFormOpen(false)}
+          subscriptionDetail={subscriptionDetail}
         />
       ) : card ? (
         <CardInformation card={card} subscriptionDetail={subscriptionDetail} />
+      ) : usBankAccount ? (
+        <BankInformation subscriptionDetail={subscriptionDetail} />
       ) : (
         <div className="flex flex-col gap-4 text-ds-gray-quinary">
           <p className="mt-4">
-            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.
           </p>
           <div className="flex self-start">

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 () => {

src/services/account/useAccountDetails.ts

@@ -213,3 +213,20 @@ export function useAccountDetails({
     ...opts,
   })
 }
+
+export const stripeAddress = (
+  billingDetails: z.infer<typeof BillingDetailsSchema> | 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,
+  }
+}

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,15 +12,17 @@ import { useCreateStripeSetupIntent } from './useCreateStripeSetupIntent'
 interface useUpdatePaymentMethodProps {
   provider: Provider
   owner: string
+  name?: string
   email?: string
+  address?: Address
 }
 
 interface useUpdatePaymentMethodReturn {
   reset: () => void
   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