update payment card component to use single stripe component with bet…

…ter styling
codecov · May 30, 2024 · cec2212 · cec2212
1 parent bfb52ec
commit cec2212
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 28 deletions.
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EmailAddress/EmailAddress.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EmailAddress/EmailAddress.tsx
@@ -79,7 +79,6 @@ function EmailAddress() {
             placeholder="Your email"
             disabled={isLoading}
             {...register('newCustomerEmail', { required: true })}
-            variant="billing"
           />
           {errors?.newCustomerEmail && (
             <p className="rounded-md bg-ds-error-quinary p-3 text-ds-error-nonary">

diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CreditCardForm.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CreditCardForm.jsx
@@ -1,9 +1,4 @@
-import {
-  CardCvcElement,
-  CardExpiryElement,
-  CardNumberElement,
-  useElements,
-} from '@stripe/react-stripe-js'
+import { CardElement, useElements } from '@stripe/react-stripe-js'
 import cs from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -24,34 +19,35 @@ function CreditCardForm({ closeForm, provider, owner }) {
 
   function submit(e) {
     e.preventDefault()
-    updateCard(elements.getElement(CardNumberElement), {
+    updateCard(elements.getElement(CardElement), {
       onSuccess: closeForm,
     })
   }
 
-  const inputClass = 'bg-ds-gray-primary py-3 px-4 rounded '
   const resetError = error && reset
 
   return (
     <form onSubmit={submit} aria-label="form">
       <div className={cs('flex flex-col gap-5')}>
         <div className="flex flex-col gap-2">
-          <CardNumberElement onChange={resetError} className={inputClass} />
-          <div className="flex gap-2">
-            <CardExpiryElement
-              onChange={resetError}
-              className={cs(inputClass, 'w-1/2 mr-2')}
-            />
-            <CardCvcElement
-              onChange={resetError}
-              className={cs(inputClass, 'w-1/2 ml-2')}
-            />
-          </div>
-          {error && (
-            <p className="mt-4 rounded-md bg-ds-error-quinary p-3 text-ds-error-nonary">
-              {error?.data?.detail}
+          <CardElement
+            onChange={resetError}
+            options={{
+              disableLink: true,
+              hidePostalCode: true,
+              classes: {
+                empty: 'rounded border-ds-gray-tertiary border-2',
+                focus: 'rounded !border-ds-blue-darker border-4',
+                base: 'px-4 py-3',
+                invalid: 'rounded !border-ds-primary-red border-4',
+              },
+            }}
+          />
+          {error ? (
+            <p className="mt-2 rounded-md bg-ds-error-quinary p-3 text-ds-error-nonary">
+              {error?.message}
             </p>
-          )}
+          ) : null}
         </div>
         <div className="flex gap-1">
           <Button

diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.spec.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.spec.jsx
@@ -36,9 +36,7 @@ jest.mock('@stripe/react-stripe-js', () => {
       getElement: jest.fn(),
     }),
     useStripe: () => ({}),
-    CardExpiryElement: makeFakeComponent('CardExpiryElement'),
-    CardNumberElement: makeFakeComponent('CardNumberElement'),
-    CardCvcElement: makeFakeComponent('CardCvcElement'),
+    CardElement: makeFakeComponent('CardElement'),
   }
 })
 
@@ -287,7 +285,7 @@ describe('PaymentCard', () => {
       const randomError = 'not rich enough'
       useUpdateCard.mockReturnValue({
         mutate: jest.fn(),
-        error: { data: { detail: randomError } },
+        error: { message: randomError },
       })
       render(
         <PaymentCard