cleanup

Author: suejung-sentry

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

@@ -27,7 +27,7 @@ type FormData = z.infer<typeof emailSchema>
 function EmailAddress() {
   const { provider, owner } = useParams<URLParams>()
   const { data: accountDetails } = useAccountDetails({ provider, owner })
-  const [isEditMode, setEditMode] = useState(false)
+  const [isFormOpen, setIsFormOpen] = useState(false)
   const currentCustomerEmail =
     accountDetails?.subscriptionDetail?.customer?.email || 'No email provided'
 
@@ -50,7 +50,7 @@ function EmailAddress() {
       { newEmail: data?.newCustomerEmail },
       {
         onSuccess: () => {
-          setEditMode(false)
+          setIsFormOpen(false)
         },
       }
     )
@@ -60,18 +60,18 @@ function EmailAddress() {
     <div className="flex flex-col gap-2 border-t p-4">
       <div className="flex justify-between">
         <h4 className="font-semibold">Email address</h4>{' '}
-        {!isEditMode && (
+        {!isFormOpen && (
           /* @ts-expect-error - A hasn't been typed yet */
           <A
             variant="semibold"
-            onClick={() => setEditMode(true)}
+            onClick={() => setIsFormOpen(true)}
             hook="edit-email"
           >
             Edit <Icon name="chevronRight" size="sm" variant="solid" />
           </A>
         )}
       </div>
-      {isEditMode ? (
+      {isFormOpen ? (
         <form onSubmit={handleSubmit(submit)} className="flex flex-col gap-2">
           <TextInput
             data-testid="billing-email-input"
@@ -99,7 +99,7 @@ function EmailAddress() {
               hook="cancel-email"
               variant="plain"
               disabled={isLoading}
-              onClick={() => setEditMode(false)}
+              onClick={() => setIsFormOpen(false)}
             >
               Cancel
             </Button>

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

@@ -1,12 +1,40 @@
 import { z } from 'zod'
 
+import amexLogo from 'assets/billing/amex.svg'
+import discoverLogo from 'assets/billing/discover.svg'
+import mastercardLogo from 'assets/billing/mastercard.svg'
+import visaLogo from 'assets/billing/visa.svg'
 import { SubscriptionDetailSchema } from 'services/account'
-import { CardBrand, CardBrands } from 'services/account/types'
-import {  
+import {
   formatTimestampToCalendarDate,
   lastTwoDigits,
 } from 'shared/utils/billing'
 
+const cardBrands = {
+  amex: {
+    logo: amexLogo,
+    name: 'American Express',
+  },
+  discover: {
+    logo: discoverLogo,
+    name: 'Discover',
+  },
+  mastercard: {
+    logo: mastercardLogo,
+    name: 'MasterCard',
+  },
+  visa: {
+    logo: visaLogo,
+    name: 'Visa',
+  },
+  fallback: {
+    logo: visaLogo,
+    name: 'Credit card',
+  },
+}
+
+type CardBrand = keyof typeof cardBrands
+
 interface CardInformationProps {
   subscriptionDetail: z.infer<typeof SubscriptionDetailSchema>
   card: {
@@ -17,7 +45,7 @@ interface CardInformationProps {
   }
 }
 function CardInformation({ subscriptionDetail, card }: CardInformationProps) {
-  const typeCard = CardBrands[card?.brand as CardBrand] ?? CardBrands.fallback
+  const typeCard = cardBrands[card?.brand as CardBrand] ?? cardBrands.fallback
   let nextBilling = null
 
   if (!subscriptionDetail?.cancelAtPeriodEnd) {

src/services/account/propTypes.js

@@ -1,8 +1,5 @@
 import PropType from 'prop-types'
 
-// TODO: These types were duplicated into types.ts, 
-// delete this file once all usages are migrated to TS
-
 export const invoicePropType = PropType.shape({
   created: PropType.number.isRequired,
   dueDate: PropType.number,

src/services/account/types.ts

@@ -967,26 +967,5 @@ export function useNavLinks() {
       isExternalLink: true,
       openNewTab: true,
     },
-    billingEditPrimary: {
-      path: (
-        { provider = p, owner = o} = {
-          provider: p,
-          owner: o,
-        }
-      ) =>
-        `/plan/${provider}/${owner}?tab=primary`,
-      isExternalLink: false,
-      text: 'Primary payment method',
-    },
-    billingEditSecondary: {
-      path: (
-        { provider = p, owner = o} = {
-          provider: p,
-          owner: o,
-        }
-      ) => `/plan/${provider}/${owner}?tab=secondary`,
-      isExternalLink: false,
-      text: 'Secondary payment method',
-    },
   }
 }