chore: handle payment failure attempt (#2068)

fixes PROD-452

Author: assimovt

@3rdweb-sdk/react/hooks/useApi.ts

@@ -33,6 +33,7 @@ export type Account = {
   unconfirmedEmail?: string;
   stripePaymentActionUrl?: string;
   onboardSkipped?: boolean;
+  paymentAttemptCount?: number;
   notificationPreferences?: {
     billing: "email" | "none";
     updates: "email" | "none";

components/settings/Account/BillingAlert.tsx

@@ -128,7 +128,7 @@ export const BillingAlert = () => {
     return null;
   }
 
-  const { status, stripePaymentActionUrl } = meQuery.data;
+  const { status, stripePaymentActionUrl, paymentAttemptCount } = meQuery.data;
 
   if (status === "paymentVerification") {
     const message = !stripePaymentActionUrl?.startsWith(
@@ -147,7 +147,10 @@ export const BillingAlert = () => {
     );
   }
 
-  if (status === "invalidPayment") {
+  if (
+    status === "invalidPayment" ||
+    (paymentAttemptCount && paymentAttemptCount !== 0)
+  ) {
     return (
       <BillingTypeAlert
         title="Your payment method was declined"

components/settings/Account/ManageBillingButton.tsx

@@ -64,7 +64,7 @@ export const ManageBillingButton: React.FC<ManageBillingButtonProps> = ({
       size="sm"
       fontWeight="normal"
     >
-      {account.status === "validPayment"
+      {account.status === "validPayment" && !account.paymentAttemptCount
         ? "Manage billing"
         : paymentVerification
         ? "Verify payment method →"

pages/dashboard/settings/billing.tsx

@@ -20,7 +20,8 @@ const SettingsBillingPage: ThirdwebNextPage = () => {
   const meQuery = useAccount();
   const router = useRouter();
   const { data: account } = meQuery;
-  const validPayment = account?.status === "validPayment";
+  const validPayment =
+    account?.status === "validPayment" && !account.paymentAttemptCount;
   const paymentVerification = account?.status === "paymentVerification";
 
   const [stepsCompleted, setStepsCompleted] = useState<