wip

Author: suejung-sentry

src/assets/billing/bank.svg

@@ -1,13 +1,13 @@
+import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { useAccountDetails } from 'services/account'
+import A from 'ui/A'
+import Button from 'ui/Button'
 
+import EditPaymentMethods from './EditPaymentMethods'
 import EmailAddress from './EmailAddress'
-import PaymentMethod from './PaymentMethod'
-import Button from 'ui/Button'
-import { useState } from 'react'
-import A from 'ui/A'
-import EditablePaymentMethod from './EditPaymentMethod'
+import { PaymentMethodContainer } from './PaymentMethodContainer'
 
 interface URLParams {
   provider: string
@@ -22,15 +22,12 @@ function BillingDetails() {
   })
   const subscriptionDetail = accountDetails?.subscriptionDetail
   const [isEditMode, setEditMode] = useState(false)
-
-  const isAdmin = true // TODO
+  const secondaryPaymentFeatureEnabled = false
 
   if (!subscriptionDetail) {
     return null
   }
 
-  console.log('iseditmode', isEditMode)
-
   return (
     <div className="flex flex-col divide-y border">
       {/* Billing Details Section */}
@@ -50,7 +47,6 @@ function BillingDetails() {
             hook="button"
             onClick={() => setEditMode(true)}
             variant="default"
-            disabled={!isAdmin}
             className="flex-none"
           >
             Edit payment
@@ -60,36 +56,42 @@ function BillingDetails() {
             hook="button"
             onClick={() => setEditMode(false)}
             variant="default"
-            disabled={!isAdmin}
             className="flex-none"
           >
             Back
           </Button>
         )}
       </div>
       {isEditMode ? (
-        <EditablePaymentMethod />
+        <EditPaymentMethods
+          setEditMode={setEditMode}
+          provider={provider}
+          owner={owner}
+          subscriptionDetail={subscriptionDetail}
+        />
       ) : (
         <>
           <EmailAddress />
-          <PaymentMethod
+          <PaymentMethodContainer
             heading="Primary Payment Method"
-            isPrimary={true}
-            isEditMode={isEditMode}
-            setEditMode={setEditMode}
-            subscriptionDetail={subscriptionDetail}
-            provider={provider}
-            owner={owner}
-          />
-          <PaymentMethod
-            heading="Secondary Payment Method"
-            isPrimary={false}
+            isPrimaryPaymentMethod={true}
             isEditMode={isEditMode}
             setEditMode={setEditMode}
             subscriptionDetail={subscriptionDetail}
             provider={provider}
             owner={owner}
           />
+          {secondaryPaymentFeatureEnabled && (
+            <PaymentMethodContainer
+              heading="Secondary Payment Method"
+              isPrimaryPaymentMethod={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>

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

@@ -0,0 +1,93 @@
+import React, { useState } from 'react'
+import { z } from 'zod'
+
+import { SubscriptionDetailSchema } from 'services/account/useAccountDetails'
+
+import AddressForm from './Address/AddressForm'
+import EditPaymentMethodForm from './PaymentMethod/PaymentMethodForm'
+
+interface EditPaymentMethodProps {
+  setEditMode: (isEditMode: boolean) => void
+  provider: string
+  owner: string
+  subscriptionDetail: z.infer<typeof SubscriptionDetailSchema>
+}
+
+const EditPaymentMethod = ({
+  setEditMode,
+  provider,
+  owner,
+  subscriptionDetail,
+}: EditPaymentMethodProps) => {
+  const [activeTab, setActiveTab] = useState<'primary' | 'secondary'>('primary')
+  const isSecondaryPaymentMethodFeatureEnabled = false
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <h3 className="font-semibold">Edit payment method</h3>
+      <div>
+        {/* Tabs for Primary and Secondary Payment Methods */}
+        <div className="ml-2 flex border-b border-ds-gray-tertiary">
+          {[
+            'primary',
+            ...(isSecondaryPaymentMethodFeatureEnabled ? ['secondary'] : []),
+          ].map((tab) => (
+            <button
+              key={tab}
+              className={`py-2 ${tab === 'primary' ? 'mr-4' : ''} ${
+                activeTab === tab
+                  ? 'border-b-2 border-ds-gray-octonary font-semibold text-ds-gray-octonary'
+                  : 'text-ds-gray-quinary hover:border-b-2 hover:border-ds-gray-quinary'
+              }`}
+              onClick={() => setActiveTab(tab as 'primary' | 'secondary')}
+            >
+              {tab === 'primary' ? 'Primary' : 'Secondary'} Payment Method
+            </button>
+          ))}
+        </div>
+
+        {/* Payment Details for the selected tab */}
+        <div className="m-4">
+          {activeTab === 'primary' && (
+            <div>
+              <EditPaymentMethodForm
+                closeForm={() => setEditMode(false)}
+                provider={provider}
+                owner={owner}
+              />
+              <AddressForm
+                address={
+                  subscriptionDetail?.defaultPaymentMethod?.billingDetails
+                    ?.address
+                }
+                name={
+                  subscriptionDetail?.defaultPaymentMethod?.billingDetails?.name
+                }
+                closeForm={() => setEditMode(false)}
+                provider={provider}
+                owner={owner}
+              />
+            </div>
+          )}
+          {activeTab === 'secondary' &&
+            isSecondaryPaymentMethodFeatureEnabled && (
+              <div>
+                <EditPaymentMethodForm
+                  closeForm={() => setEditMode(false)}
+                  provider={provider}
+                  owner={owner}
+                />
+                <AddressForm
+                  closeForm={() => setEditMode(false)}
+                  provider={provider}
+                  owner={owner}
+                />
+              </div>
+            )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default EditPaymentMethod