wip

Author: suejung-sentry

src/assets/billing/bank.svg

@@ -8,13 +8,16 @@ import config from 'config'
 
 import { SentryRoute } from 'sentry'
 
+import { Theme, useThemeContext } from 'shared/ThemeContext'
 import LoadingLogo from 'ui/LoadingLogo'
 
 import { PlanProvider } from './context'
 import PlanBreadcrumb from './PlanBreadcrumb'
 import { PlanPageDataQueryOpts } from './queries/PlanPageDataQueryOpts'
 import Tabs from './Tabs'
 
+import { StripeAppearance } from '../../stripe'
+
 const CancelPlanPage = lazy(() => import('./subRoutes/CancelPlanPage'))
 const CurrentOrgPlan = lazy(() => import('./subRoutes/CurrentOrgPlan'))
 const InvoicesPage = lazy(() => import('./subRoutes/InvoicesPage'))
@@ -37,6 +40,8 @@ function PlanPage() {
   const { data: ownerData } = useSuspenseQueryV5(
     PlanPageDataQueryOpts({ owner, provider })
   )
+  const { theme } = useThemeContext()
+  const isDarkMode = theme !== Theme.LIGHT
 
   if (config.IS_SELF_HOSTED || !ownerData?.isCurrentUserPartOfOrg) {
     return <Redirect to={`/${provider}/${owner}`} />
@@ -45,7 +50,7 @@ function PlanPage() {
   return (
     <div className="flex flex-col gap-4">
       <Tabs />
-      <Elements stripe={stripePromise}>
+      <Elements stripe={stripePromise} options={StripeAppearance(isDarkMode)}>
         <PlanProvider>
           <PlanBreadcrumb />
           <Suspense fallback={<Loader />}>

src/pages/PlanPage/PlanPage.jsx

@@ -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 { ViewPaymentMethod } from './ViewPaymentMethod'
 
 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}
+          existingSubscriptionDetail={subscriptionDetail}
+        />
       ) : (
         <>
           <EmailAddress />
-          <PaymentMethod
+          <ViewPaymentMethod
             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 && (
+            <ViewPaymentMethod
+              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

@@ -4,7 +4,6 @@ import { z } from 'zod'
 
 import { AddressSchema } from 'services/account'
 import { useUpdateBillingAddress } from 'services/account/useUpdateBillingAddress'
-import { Theme, useThemeContext } from 'shared/ThemeContext'
 import Button from 'ui/Button'
 
 interface AddressFormProps {
@@ -23,28 +22,6 @@ function AddressForm({
   owner,
 }: AddressFormProps) {
   const elements = useElements()
-  const { theme } = useThemeContext()
-  const isDarkMode = theme === Theme.DARK
-
-  // Note: unfortunately seems Stripe doesn't let us reference like `var(--<var name>)` so rgbs are hardcoded in below
-  elements?.update({
-    appearance: {
-      variables: {
-        fontFamily: 'Poppins, ui-sans-serif, system-ui, sans-serif',
-      },
-      rules: {
-        '.Label': {
-          fontWeight: '600',
-          color: isDarkMode ? 'rgb(210,212,215)' : 'rgb(14,27,41)', // Same values as --color-app-text-primary.
-        },
-        '.Input': {
-          backgroundColor: isDarkMode ? 'rgb(22,24,29)' : 'rgb(255,255,255)', // Same values as --color-app-container.
-          borderColor: isDarkMode ? 'rgb(47,51,60)' : 'rgb(216,220,226)', // Same values as --color-ds-gray-tertiary.
-          color: isDarkMode ? 'rgb(210,212,215)' : 'rgb(14,27,41)', // Same values as --color-app-text-primary.
-        },
-      },
-    },
-  })
 
   const {
     mutate: updateAddress,