wip

src/pages/PlanPage/PlanPage.jsx

@@ -8,6 +8,7 @@ import config from 'config'
 
 import { SentryRoute } from 'sentry'
 
+import { useStripeSetupIntent } from 'services/account/useStripeSetupIntent'
 import LoadingLogo from 'ui/LoadingLogo'
 
 import { PlanProvider } from './context'
@@ -37,6 +38,12 @@ function PlanPage() {
   const { data: ownerData } = useSuspenseQueryV5(
     PlanPageDataQueryOpts({ owner, provider })
   )
+  // const { data: setupIntent } = useStripeSetupIntent({ owner, provider })
+
+  const setupIntent = {
+    clientSecret:
+      'seti_1QfCiSGlVGuVgOrkPhA3FjTZ_secret_RYJLn86FhD6Co4PXYqdSkDYCgMcgZN0',
+  }
 
   if (config.IS_SELF_HOSTED || !ownerData?.isCurrentUserPartOfOrg) {
     return <Redirect to={`/${provider}/${owner}`} />
@@ -45,7 +52,10 @@ function PlanPage() {
   return (
     <div className="flex flex-col gap-4">
       <Tabs />
-      <Elements stripe={stripePromise}>
+      <Elements
+        stripe={stripePromise}
+        options={{ clientSecret: setupIntent?.clientSecret }}
+      >
         <PlanProvider>
           <PlanBreadcrumb />
           <Suspense fallback={<Loader />}>

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

@@ -7,7 +7,7 @@ import PaymentMethod from './PaymentMethod'
 import Button from 'ui/Button'
 import { useState } from 'react'
 import A from 'ui/A'
-import EditablePaymentMethod from './EditPaymentMethod'
+import EditPaymentMethod from './EditPaymentMethod'
 
 interface URLParams {
   provider: string
@@ -29,8 +29,6 @@ function BillingDetails() {
     return null
   }
 
-  console.log('iseditmode', isEditMode)
-
   return (
     <div className="flex flex-col divide-y border">
       {/* Billing Details Section */}
@@ -68,7 +66,12 @@ function BillingDetails() {
         )}
       </div>
       {isEditMode ? (
-        <EditablePaymentMethod />
+        <EditPaymentMethod
+          isEditMode={isEditMode}
+          setEditMode={setEditMode}
+          provider={provider}
+          owner={owner}
+        />
       ) : (
         <>
           <EmailAddress />

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

@@ -1,121 +1,22 @@
-import {
-  Elements,
-  PaymentElement,
-  useElements,
-  useStripe,
-} from '@stripe/react-stripe-js'
-import { loadStripe } from '@stripe/stripe-js'
 import React, { useState } from 'react'
 
-import Button from 'ui/Button'
-
 import AddressForm from '../Address/AddressForm'
 
-// TODO - fetch from API
-const STRIPE_PUBLISHABLE_KEY = process.env.STRIPE_PUBLISHABLE_KEY || ''
-const MANUALLY_FETCHED_CLIENT_SECRET = process.env.STRIPE_CLIENT_SECRET || ''
-
-const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY)
-
-interface PaymentFormProps {
-  clientSecret: string
-}
-
-const PaymentForm: React.FC<PaymentFormProps> = () => {
-  const stripe = useStripe()
-  const elements = useElements()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-
-  const handleSubmit = async (event: React.FormEvent) => {
-    event.preventDefault()
-    setIsSubmitting(true)
-    setErrorMessage(null)
-
-    if (!stripe || !elements) {
-      setErrorMessage('Stripe has not loaded yet. Please try again.')
-      setIsSubmitting(false)
-      return
-    }
-
-    const { error } = await stripe.confirmPayment({
-      elements,
-      confirmParams: {
-        // eslint-disable-next-line camelcase
-        return_url: 'https://codecov.io',
-      },
-    })
-
-    if (error) {
-      setErrorMessage(error.message || 'An unexpected error occurred.')
-      setIsSubmitting(false)
-    } else {
-      setIsSubmitting(false)
-    }
-  }
-
-  return (
-    <div>
-      <PaymentElement
-        options={{
-          layout: 'tabs',
-          defaultValues: {
-            billingDetails: {
-              name: 'John Doe',
-            },
-          },
-        }}
-      />
-      <div className="mb-8 mt-4 flex gap-1">
-        <Button
-          hook="submit-address-update"
-          type="submit"
-          variant="primary"
-          disabled={isSubmitting} // TODO - handle
-          onClick={handleSubmit}
-          to={undefined}
-        >
-          Save
-        </Button>
-        <Button
-          type="button"
-          hook="cancel-address-update"
-          variant="plain"
-          // disabled={isLoading}
-          onClick={() => console.log('TODO - implement me')} // TODO - implement me
-          to={undefined}
-        >
-          Cancel
-        </Button>
-      </div>
-
-      {errorMessage && <div className="text-red-500">{errorMessage}</div>}
-    </div>
-  )
-}
-
-const PaymentPage: React.FC<{ clientSecret: string }> = ({ clientSecret }) => {
-  const options = {
-    clientSecret,
-    appearance: {
-      theme: 'stripe' as const,
-    },
-  }
+import EditPaymentMethodForm from './EditPaymentMethodForm'
 
-  return (
-    <Elements stripe={stripePromise} options={options}>
-      <PaymentForm clientSecret={clientSecret} />
-    </Elements>
-  )
+interface EditPaymentMethodProps {
+  isEditMode: boolean
+  setEditMode: (isEditMode: boolean) => void
+  provider: string
+  owner: string
 }
 
-interface EditablePaymentMethodProps {
-  clientSecret: string
-}
-
-const EditPaymentMethod: React.FC<EditablePaymentMethodProps> = () => {
-  const clientSecret = MANUALLY_FETCHED_CLIENT_SECRET // TODO - fetch from API
-
+const EditPaymentMethod = ({
+  isEditMode,
+  setEditMode,
+  provider,
+  owner,
+}: EditPaymentMethodProps) => {
   const [activeTab, setActiveTab] = useState<'primary' | 'secondary'>('primary')
 
   return (
@@ -143,13 +44,23 @@ const EditPaymentMethod: React.FC<EditablePaymentMethodProps> = () => {
         <div className="m-4">
           {activeTab === 'primary' && (
             <div>
-              <PaymentPage clientSecret={clientSecret} />
+              <EditPaymentMethodForm
+                isEditMode={isEditMode}
+                setEditMode={setEditMode}
+                provider={provider}
+                owner={owner}
+              />
               <AddressForm closeForm={() => {}} provider={''} owner={''} />
             </div>
           )}
           {activeTab === 'secondary' && (
             <div>
-              <PaymentPage clientSecret={clientSecret} />
+              <EditPaymentMethodForm
+                isEditMode={isEditMode}
+                setEditMode={setEditMode}
+                provider={provider}
+                owner={owner}
+              />
               <AddressForm closeForm={() => {}} provider={''} owner={''} />
             </div>
           )}

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

@@ -0,0 +1,93 @@
+import { PaymentElement, useElements } from '@stripe/react-stripe-js'
+import cs from 'classnames'
+import { useState } from 'react'
+
+import { useUpdatePaymentMethod } from 'services/account/useUpdatePaymentMethod'
+import { Theme, useThemeContext } from 'shared/ThemeContext'
+import Button from 'ui/Button'
+
+interface PaymentMethodFormProps {
+  closeForm: () => void
+  provider: string
+  owner: string
+}
+
+const EditPaymentMethodForm = ({
+  closeForm,
+  provider,
+  owner,
+}: PaymentMethodFormProps) => {
+  const [errorState, setErrorState] = useState('')
+  const { theme } = useThemeContext()
+  const isDarkMode = theme === Theme.DARK
+
+  const elements = useElements()
+  const {
+    mutate: updatePaymentMethod,
+    isLoading,
+    error,
+    reset,
+  } = useUpdatePaymentMethod({
+    provider,
+    owner,
+  })
+
+  function submit(e: React.FormEvent) {
+    e.preventDefault()
+
+    if (!elements) {
+      return null
+    }
+
+    updatePaymentMethod(elements.getElement(PaymentElement), {
+      onSuccess: closeForm,
+    })
+  }
+
+  const showError = (error && !reset) || errorState
+
+  return (
+    <form onSubmit={submit} aria-label="form">
+      <div className={cs('flex flex-col gap-3')}>
+        <div className="mt-2 flex flex-col gap-2">
+          <PaymentElement
+            options={{
+              layout: 'tabs',
+              defaultValues: {
+                billingDetails: {
+                  name: 'John Doe',
+                },
+              },
+            }}
+          />
+          <p className="mt-1 text-ds-primary-red">
+            {showError && (error?.message || errorState)}
+          </p>
+          <div className="mb-8 mt-4 flex gap-1">
+            <Button
+              hook="update-payment"
+              type="submit"
+              variant="primary"
+              disabled={isLoading}
+              to={undefined}
+            >
+              Update
+            </Button>
+            <Button
+              type="button"
+              hook="cancel-payment"
+              variant="plain"
+              disabled={isLoading}
+              onClick={closeForm}
+              to={undefined}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </div>
+    </form>
+  )
+}
+
+export default EditPaymentMethodForm

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

@@ -10,7 +10,7 @@ import A from 'ui/A'
 import Button from 'ui/Button'
 import Icon from 'ui/Icon'
 
-import CardInformation from './CardInformation'
+import PaymentMethodInformation from '../PaymentMethod/PaymentMethodInformation'
 import CreditCardForm from './CreditCardForm'
 import { cn } from 'shared/utils/cn'
 
@@ -29,7 +29,7 @@ function PaymentCard({
   owner: string
   className?: string
 }) {
-  const card = subscriptionDetail?.defaultPaymentMethod?.card
+  const isPaymentMethodSet = !!subscriptionDetail?.defaultPaymentMethod
 
   return (
     <div className={cn("flex flex-col gap-2", className)}>
@@ -42,12 +42,12 @@ function PaymentCard({
           owner={owner}
           closeForm={() => setEditMode(false)}
         />
-      ) : card ? (
-        <CardInformation card={card} subscriptionDetail={subscriptionDetail} />
+      ) : isPaymentMethodSet ? (
+        <PaymentMethodInformation 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">