incorporate pr comments

Author: suejung-sentry

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx

@@ -1,21 +1,22 @@
 import { z } from 'zod'
 
 import bankLogo from 'assets/billing/bank.svg'
-import { SubscriptionDetailSchema } from 'services/account'
+import { USBankAccountSchema } from 'services/account'
 
 interface BankInformationProps {
-  subscriptionDetail: z.infer<typeof SubscriptionDetailSchema>
+  usBankAccount: z.infer<typeof USBankAccountSchema>
 }
-function BankInformation({ subscriptionDetail }: BankInformationProps) {
+
+function BankInformation({ usBankAccount }: 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}
+            {usBankAccount?.bankName}
             &nbsp;••••&nbsp;
-            {subscriptionDetail?.defaultPaymentMethod?.usBankAccount?.last4}
+            {usBankAccount?.last4}
           </b>
         </div>
       </div>

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx

@@ -38,7 +38,7 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
       ) : card ? (
         <CardInformation card={card} subscriptionDetail={subscriptionDetail} />
       ) : usBankAccount ? (
-        <BankInformation subscriptionDetail={subscriptionDetail} />
+        <BankInformation usBankAccount={usBankAccount} />
       ) : (
         <div className="flex flex-col gap-4 text-ds-gray-quinary">
           <p className="mt-4">

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx

@@ -3,7 +3,10 @@ import { StripePaymentElement } from '@stripe/stripe-js'
 import cs from 'classnames'
 import { z } from 'zod'
 
-import { stripeAddress, SubscriptionDetailSchema } from 'services/account'
+import {
+  BillingDetailsSchema,
+  SubscriptionDetailSchema,
+} from 'services/account'
 import { useUpdatePaymentMethod } from 'services/account/useUpdatePaymentMethod'
 import { Provider } from 'shared/api/helpers'
 import Button from 'ui/Button'
@@ -23,6 +26,9 @@ const PaymentMethodForm = ({
 }: PaymentMethodFormProps) => {
   const elements = useElements()
 
+  const billingDetails =
+    subscriptionDetail?.defaultPaymentMethod?.billingDetails
+
   const {
     mutate: updatePaymentMethod,
     isLoading,
@@ -31,15 +37,9 @@ const PaymentMethodForm = ({
   } = useUpdatePaymentMethod({
     provider,
     owner,
-    name:
-      subscriptionDetail?.defaultPaymentMethod?.billingDetails?.name ||
-      undefined,
-    email:
-      subscriptionDetail?.defaultPaymentMethod?.billingDetails?.email ||
-      undefined,
-    address:
-      stripeAddress(subscriptionDetail?.defaultPaymentMethod?.billingDetails) ||
-      undefined,
+    name: billingDetails?.name || undefined,
+    email: billingDetails?.email || undefined,
+    address: stripeAddress(billingDetails) || undefined,
   })
 
   async function submit(e: React.FormEvent) {
@@ -107,4 +107,21 @@ const PaymentMethodForm = ({
   )
 }
 
+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,
+  }
+}
+
 export default PaymentMethodForm

src/services/account/useAccountDetails.ts

@@ -65,6 +65,11 @@ export const BillingDetailsSchema = z
   })
   .nullable()
 
+export const USBankAccountSchema = z.object({
+  bankName: z.string(),
+  last4: z.string(),
+})
+
 export const PaymentMethodSchema = z
   .object({
     card: z
@@ -75,12 +80,7 @@ export const PaymentMethodSchema = z
         last4: z.string(),
       })
       .nullish(),
-    usBankAccount: z
-      .object({
-        bankName: z.string(),
-        last4: z.string(),
-      })
-      .nullish(),
+    usBankAccount: USBankAccountSchema.nullish(),
     billingDetails: BillingDetailsSchema.nullable(),
   })
   .nullable()
@@ -213,20 +213,3 @@ 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

@@ -66,11 +66,7 @@ export function useUpdatePaymentMethod({
             // eslint-disable-next-line camelcase
             payment_method_data: {
               // eslint-disable-next-line camelcase
-              billing_details: {
-                name: name,
-                email: email,
-                address: address,
-              },
+              billing_details: { name, email, address },
             },
             // eslint-disable-next-line camelcase
             return_url: `${config.BASE_URL}/plan/${provider}/${owner}`,