From 94f23489856176be1137813578180f022d07144e Mon Sep 17 00:00:00 2001
From: ajay-sentry <159853603+ajay-sentry@users.noreply.github.com>
Date: Mon, 3 Jun 2024 09:54:03 -0700
Subject: [PATCH] feat: Update Edit Payment Card Component to use Stripe Card
 Element (#2911)

---
 .../EmailAddress/EmailAddress.tsx             |  1 -
 .../PaymentCard/CreditCardForm.jsx            | 44 ++++++++-----------
 .../PaymentCard/PaymentCard.spec.jsx          |  6 +--
 src/ui/TextInput/TextInput.tsx                |  3 +-
 4 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EmailAddress/EmailAddress.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EmailAddress/EmailAddress.tsx
index 27382d42bd..994d8033cd 100644
--- 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
index 212ba401b3..b41522c04a 100644
--- 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,31 @@ 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}
-            </p>
-          )}
+      <div className={cs('flex flex-col gap-3')}>
+        <div className="mt-2 flex flex-col gap-2">
+          <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',
+              },
+            }}
+          />
+          <p className="mt-1 text-ds-primary-red">{error && error.message}</p>
         </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
index 96a1bb6899..dbed2d3552 100644
--- 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
diff --git a/src/ui/TextInput/TextInput.tsx b/src/ui/TextInput/TextInput.tsx
index 0a392b5063..1a2e0f11b4 100644
--- a/src/ui/TextInput/TextInput.tsx
+++ b/src/ui/TextInput/TextInput.tsx
@@ -10,14 +10,13 @@ interface TextInputProps extends HTMLProps<HTMLInputElement> {
   label?: string
   icon?: keyof OutlineIconCollection
   placeholder?: string
-  variant?: 'default' | 'topRounded' | 'billing'
+  variant?: 'default' | 'topRounded'
   dataMarketing?: string
 }
 
 const VariantClasses = {
   default: 'rounded border',
   topRounded: 'border-t border-r border-l focus:border rounded-tl rounded-tr',
-  billing: 'bg-ds-gray-primary py-3 px-4 rounded ',
 }
 
 const styles = {