feat: Add ACH payment method

.env.development

@@ -5,3 +5,5 @@ REACT_APP_MARKETING_BASE_URL=https://about.codecov.io
 # REACT_APP_STRIPE_KEY=
 # REACT_APP_LAUNCHDARKLY=
 # REACT_APP_BAREMETRICS_TOKEN=
+REACT_APP_STRIPE_KEY=pk_test_514SJTOGlVGuVgOrkRgh7zxp3tQ7bX4CY6pnxxw6zRZZSoDVtUUjArPKC7oXeeIbJNICTqS7H88FRfwZnWMskPKxo00bAnu2i9I
+REACT_APP_STRIPE_PUBLIC_KEY=pk_test_514SJTOGlVGuVgOrkRgh7zxp3tQ7bX4CY6pnxxw6zRZZSoDVtUUjArPKC7oXeeIbJNICTqS7H88FRfwZnWMskPKxo00bAnu2i9I

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

@@ -1,4 +1,4 @@
 import { useState } from 'react'
 import { z } from 'zod'
 
 import {
@@ -6,54 +6,51 @@
   SubscriptionDetailSchema,
 } from 'services/account'
 import A from 'ui/A'
 import Button from 'ui/Button'
 import Icon from 'ui/Icon'
 
 import AddressForm from './AddressForm'
+import { cn } from 'shared/utils/cn'
 
 interface AddressCardProps {
+  isEditMode: boolean
+  setEditMode: (isEditMode: boolean) => void
   subscriptionDetail: z.infer<typeof SubscriptionDetailSchema>
   provider: string
   owner: string
+  className?: string
 }
 
 function AddressCard({
+  isEditMode,
+  setEditMode,
   subscriptionDetail,
   provider,
   owner,
+  className,
 }: AddressCardProps) {
-  const [isFormOpen, setIsFormOpen] = useState(false)
   const billingDetails =
     subscriptionDetail?.defaultPaymentMethod?.billingDetails
 
+  const isAddressSameAsPrimary = true // TODO
+
   return (
-    <div className="flex flex-col gap-2 border-t p-4">
-      {isFormOpen && (
+    <div className={cn('flex gap-2', className)}>
+      {isEditMode && (
         <AddressForm
           name={billingDetails?.name || ''}
           address={billingDetails?.address}
           provider={provider}
           owner={owner}
-          closeForm={() => setIsFormOpen(false)}
+          closeForm={() => setEditMode(false)}
         />
       )}
-      {!isFormOpen && (
+      {!isEditMode && (
         <>
-          <div className="flex justify-between">
-            <h4 className="font-semibold">Cardholder name</h4>
-            <A
-              variant="semibold"
-              onClick={() => setIsFormOpen(true)}
-              hook="edit-address"
-              isExternal={false}
-              to={undefined}
-            >
-              Edit <Icon name="chevronRight" size="sm" variant="solid" />
-            </A>
-          </div>
           <BillingInner
             billingDetails={billingDetails}
-            setIsFormOpen={setIsFormOpen}
+            setEditMode={setEditMode}
+            isAddressSameAsPrimary={isAddressSameAsPrimary}
           />
         </>
       )}
@@ -63,27 +60,36 @@
 
 interface BillingInnerProps {
   billingDetails?: z.infer<typeof BillingDetailsSchema>
-  setIsFormOpen: (val: boolean) => void
+  setEditMode: (val: boolean) => void
+  isAddressSameAsPrimary: boolean
 }
 
-function BillingInner({ billingDetails, setIsFormOpen }: BillingInnerProps) {
+function BillingInner({
+  billingDetails,
+  setEditMode,
+  isAddressSameAsPrimary,
+}: BillingInnerProps) {
   if (billingDetails) {
     return (
       <div>
-        <p>{`${billingDetails.name ?? 'N/A'}`}</p>
-        <br />
         <h4 className="mb-2 font-semibold">Billing address</h4>
-        <p>{`${billingDetails.address?.line1 ?? ''} ${
-          billingDetails.address?.line2 ?? ''
-        }`}</p>
-        <p>
-          {billingDetails.address?.city
-            ? `${billingDetails.address?.city}, `
-            : ''}
-          {`${billingDetails.address?.state ?? ''} ${
-            billingDetails.address?.postalCode ?? ''
-          }`}
-        </p>
+        {isAddressSameAsPrimary ? (
+          <p>Same as primary address</p>
+        ) : (
+          <>
+            <p>{`${billingDetails.address?.line1 ?? ''} ${
+              billingDetails.address?.line2 ?? ''
+            }`}</p>
+            <p>
+              {billingDetails.address?.city
+                ? `${billingDetails.address?.city}, `
+                : ''}
+              {`${billingDetails.address?.state ?? ''} ${
+                billingDetails.address?.postalCode ?? ''
+              }`}
+            </p>
+          </>
+        )}
       </div>
     )
   }
@@ -94,11 +100,11 @@
         No address has been set. Please contact support if you think it’s an
         error or set it yourself.
       </p>
       <div className="flex self-start">
         <Button
           hook="open-modal"
           variant="primary"
-          onClick={() => setIsFormOpen(true)}
+          onClick={() => setEditMode(true)}
           to={undefined}
           disabled={false}
         >

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

@@ -105,7 +105,7 @@ function AddressForm({
             disabled={isLoading}
             to={undefined}
           >
-            Update
+            Save
           </Button>
           <Button
             type="button"

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

@@ -2,9 +2,12 @@
 
 import { useAccountDetails } from 'services/account'
 
-import AddressCard from './Address/AddressCard'
 import EmailAddress from './EmailAddress'
-import PaymentCard from './PaymentCard'
+import PaymentMethod from './PaymentMethod'
+import Button from 'ui/Button'
+import { useState } from 'react'
+import A from 'ui/A'
+import EditablePaymentMethod from './EditablePaymentMethod'
 
 interface URLParams {
   provider: string
@@ -18,34 +21,82 @@
     owner,
   })
   const subscriptionDetail = accountDetails?.subscriptionDetail
+  const [isEditMode, setEditMode] = useState(false)
+
+  const isAdmin = true // TODO
 
   if (!subscriptionDetail) {
     return null
   }
 
+  console.log('iseditmode', isEditMode)
+
   return (
     <div className="flex flex-col border">
-      <h3 className="p-4 font-semibold">Billing details</h3>
-      <EmailAddress />
-      <PaymentCard
-        // @ts-expect-error - TODO fix this once we update PaymentCard to TS
-        subscriptionDetail={subscriptionDetail}
-        provider={provider}
-        owner={owner}
-      />
-      <AddressCard
-        subscriptionDetail={subscriptionDetail}
-        provider={provider}
-        owner={owner}
-      />
-      {subscriptionDetail.taxIds.length > 0 ? (
-        <div className="flex flex-col gap-2 p-4">
-          <h4 className="font-semibold">Tax ID</h4>
-          {subscriptionDetail.taxIds.map((val, index) => (
-            <p key={index}>{val?.value}</p>
-          ))}
+      <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-4">
+        <div>
+          <h3 className="font-semibold">Billing details</h3>
+          <p className="pt-1 text-xs text-ds-gray-octonary">
+            You can modify your billing details. To update your tax IDs, please{' '}
+            {/* @ts-expect-error ignore until we can convert A component to ts */}
+            <A to={{ pageName: 'support' }} variant="link">
+              contact support
+            </A>
+          </p>
         </div>
-      ) : null}
+        {!isEditMode ? (
+          <Button
+            hook="button"
+            onClick={() => setEditMode(true)}
+            variant="default"
+            disabled={!isAdmin}
+          >
+            Edit payment
+          </Button>
+        ) : (
+          <Button
+            hook="button"
+            onClick={() => setEditMode(false)}
+            variant="danger"
+            disabled={!isAdmin}
+          >
+            Cancel edit
+          </Button>
+        )}
+      </div>
+      {isEditMode ? (
+        <EditablePaymentMethod />
+      ) : (
+        <>
+          <EmailAddress />
+          <PaymentMethod
+            heading="Primary Payment Method"
+            isPrimary={true}
+            isEditMode={isEditMode}
+            setEditMode={setEditMode}
+            subscriptionDetail={subscriptionDetail}
+            provider={provider}
+            owner={owner}
+          />
+          <PaymentMethod
+            heading="Secondary Payment Method"
+            isPrimary={false}
+            isEditMode={isEditMode}
+            setEditMode={setEditMode}
+            subscriptionDetail={subscriptionDetail}
+            provider={provider}
+            owner={owner}
+          />
+          {subscriptionDetail?.taxIds?.length ? (
+            <div className="flex flex-col gap-2 p-4">
+              <h4 className="font-semibold">Tax ID</h4>
+              {subscriptionDetail?.taxIds?.map((val, index) => (
+                <p key={index}>{val?.value}</p>
+              ))}
+            </div>
+          ) : null}
+        </>
+      )}
     </div>
   )
 }