From 27c7e370cdaa25e6cb5be1debd23b5b26278a65a Mon Sep 17 00:00:00 2001
From: Suejung Shin <suejung.shin@sentry.io>
Date: Mon, 20 Jan 2025 11:11:29 -0800
Subject: [PATCH] cleanup

---
 .../PaymentCard/BankInformation.tsx           | 19 ++++++++++++++++---
 .../PaymentCard/CardInformation.jsx           |  1 -
 .../PaymentCard/PaymentCard.jsx               | 17 ++++++++++++++---
 src/services/account/propTypes.js             | 14 +++++++++-----
 4 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx
index bd33331659..ed27e5f903 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx
@@ -5,12 +5,16 @@ import { USBankAccountSchema } from 'services/account'
 
 interface BankInformationProps {
   usBankAccount: z.infer<typeof USBankAccountSchema>
+  nextBillingDisplayDate: string | null
 }
 
-function BankInformation({ usBankAccount }: BankInformationProps) {
+function BankInformation({
+  usBankAccount,
+  nextBillingDisplayDate,
+}: BankInformationProps) {
   return (
-    <div className="flex flex-col gap-2">
-      <div className="flex gap-1">
+    <div className="flex flex-col gap-3">
+      <div className="flex gap-2">
         <img src={bankLogo} alt="bank logo" />
         <div className="ml-1 flex flex-col self-center">
           <b>
@@ -20,6 +24,15 @@ function BankInformation({ usBankAccount }: BankInformationProps) {
           </b>
         </div>
       </div>
+      {nextBillingDisplayDate && (
+        <p className="text-sm text-ds-gray-quinary">
+          Your next billing date is{' '}
+          <span className="text-ds-gray-octonary">
+            {nextBillingDisplayDate}
+          </span>
+          .
+        </p>
+      )}
     </div>
   )
 }
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CardInformation.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CardInformation.jsx
index b1830d0174..5dba09473c 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CardInformation.jsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CardInformation.jsx
@@ -76,7 +76,6 @@ CardInformation.propTypes = {
     expMonth: PropTypes.number.isRequired,
     expYear: PropTypes.number.isRequired,
   }).isRequired,
-  openForm: PropTypes.func.isRequired,
 }
 
 export default CardInformation
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx
index afa33ed8ad..6ad84ab9d8 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import { useState } from 'react'
 
 import { subscriptionDetailType } from 'services/account'
+import { formatTimestampToCalendarDate } from 'shared/utils/billing'
 import A from 'ui/A'
 import Button from 'ui/Button'
 import Icon from 'ui/Icon'
@@ -14,8 +15,15 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
   const card = subscriptionDetail?.defaultPaymentMethod?.card
   const usBankAccount = subscriptionDetail?.defaultPaymentMethod?.usBankAccount
 
+  let nextBillingDisplayDate = null
+  if (!subscriptionDetail?.cancelAtPeriodEnd) {
+    nextBillingDisplayDate = formatTimestampToCalendarDate(
+      subscriptionDetail.currentPeriodEnd
+    )
+  }
+
   return (
-    <div className="flex flex-col gap-2 border-t p-4">
+    <div className="flex flex-col gap-3 border-t p-4">
       <div className="flex justify-between">
         <h4 className="font-semibold">Payment method</h4>
         {!isFormOpen && (
@@ -38,7 +46,10 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
       ) : card ? (
         <CardInformation card={card} subscriptionDetail={subscriptionDetail} />
       ) : usBankAccount ? (
-        <BankInformation usBankAccount={usBankAccount} />
+        <BankInformation
+          usBankAccount={usBankAccount}
+          nextBillingDisplayDate={nextBillingDisplayDate}
+        />
       ) : (
         <div className="flex flex-col gap-4 text-ds-gray-quinary">
           <p className="mt-4">
@@ -61,7 +72,7 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
 }
 
 PaymentCard.propTypes = {
-  subscriptionDetail: PropTypes.oneOf([subscriptionDetailType, null]),
+  subscriptionDetail: subscriptionDetailType,
   provider: PropTypes.string.isRequired,
   owner: PropTypes.string.isRequired,
 }
diff --git a/src/services/account/propTypes.js b/src/services/account/propTypes.js
index 02a7f1e5eb..1a81954ab1 100644
--- a/src/services/account/propTypes.js
+++ b/src/services/account/propTypes.js
@@ -20,11 +20,15 @@ export const subscriptionDetailType = PropType.shape({
   latestInvoice: invoicePropType,
   defaultPaymentMethod: PropType.shape({
     card: PropType.shape({
-      brand: PropType.string.isRequired,
-      expMonth: PropType.number.isRequired,
-      expYear: PropType.number.isRequired,
-      last4: PropType.string.isRequired,
-    }).isRequired,
+      brand: PropType.string,
+      expMonth: PropType.number,
+      expYear: PropType.number,
+      last4: PropType.string,
+    }),
+    usBankAccount: PropType.shape({
+      bankName: PropType.string,
+      last4: PropType.string,
+    }),
   }),
   trialEnd: PropType.number,
 })