From 71a21e185ecef76e4050b11d74470beb3eb06fe2 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 29 Oct 2024 18:12:20 +0000
Subject: [PATCH] Fix page crash caused by BillingAlert component (#5220)

Fixes: DASH-356
---
 .../settings/Account/Billing/alerts/Alert.tsx |  39 +++--
 .../Billing/alerts/BillingAlerts.stories.tsx  | 163 +++++++++---------
 .../alerts/RecurringPaymentFailureAlert.tsx   |   5 +-
 3 files changed, 106 insertions(+), 101 deletions(-)

diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
index 328fe510c76..41605929b5c 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
@@ -12,14 +11,15 @@ import {
   useAccountUsage,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { useDisclosure } from "@chakra-ui/react";
+import * as Sentry from "@sentry/nextjs";
 import { OnboardingModal } from "components/onboarding/Modal";
 import { format } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { ExternalLinkIcon, XIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 import { LazyOnboardingBilling } from "../../../../onboarding/LazyOnboardingBilling";
 import { ManageBillingButton } from "../ManageButton";
 import { RecurringPaymentFailureAlert } from "./RecurringPaymentFailureAlert";
@@ -301,7 +301,9 @@ export function BillingAlertsUI(props: {
   }
 
   return (
-    <div className={cn("flex flex-col gap-4", props.className)}>{alerts}</div>
+    <ErrorBoundary FallbackComponent={BillingAlertsErrorBoundary}>
+      <div className={cn("flex flex-col gap-4", props.className)}>{alerts}</div>
+    </ErrorBoundary>
   );
 }
 
@@ -331,16 +333,11 @@ const AddPaymentNotification: React.FC<AddPaymentNotificationProps> = ({
   // TODO: We should find a way to move this deeper into the
   // TODO: ManageBillingButton component and set an optional field to override
   const [paymentMethodSaving, setPaymentMethodSaving] = useState(false);
-
-  const {
-    onOpen: onPaymentMethodOpen,
-    onClose: onPaymentMethodClose,
-    isOpen: isPaymentMethodOpen,
-  } = useDisclosure();
+  const [isPaymentMethodOpen, setIsPaymentMethodOpen] = useState(false);
 
   const handlePaymentAdded = () => {
     setPaymentMethodSaving(true);
-    onPaymentMethodClose();
+    setIsPaymentMethodOpen(false);
   };
 
   const isBilling = ctaHref === "/dashboard/settings/billing";
@@ -353,7 +350,7 @@ const AddPaymentNotification: React.FC<AddPaymentNotificationProps> = ({
       <OnboardingModal isOpen={isPaymentMethodOpen}>
         <LazyOnboardingBilling
           onSave={handlePaymentAdded}
-          onCancel={onPaymentMethodClose}
+          onCancel={() => setIsPaymentMethodOpen(false)}
         />
       </OnboardingModal>
 
@@ -361,13 +358,13 @@ const AddPaymentNotification: React.FC<AddPaymentNotificationProps> = ({
       <AlertDescription>{description}</AlertDescription>
 
       {showCTAs && (
-        <div className="mt-4 flex gap-2">
+        <div className="mt-4 flex flex-col gap-3 md:flex-row">
           {isBilling ? (
             <ManageBillingButton
               account={dashboardAccount}
               loading={paymentMethodSaving}
               loadingText="Verifying payment method"
-              onClick={onPaymentMethodOpen}
+              onClick={() => setIsPaymentMethodOpen(true)}
             />
           ) : (
             <Button variant="outline" asChild>
@@ -412,3 +409,17 @@ const AddPaymentNotification: React.FC<AddPaymentNotificationProps> = ({
     </Alert>
   );
 };
+
+function BillingAlertsErrorBoundary(errorProps: FallbackProps) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    Sentry.withScope((scope) => {
+      scope.setTag("component-crashed", "true");
+      scope.setTag("component-crashed-boundary", "BillingAlertsErrorBoundary");
+      scope.setLevel("fatal");
+      Sentry.captureException(errorProps.error);
+    });
+  }, [errorProps.error]);
+
+  return null;
+}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx
index bceb177f0e3..30a62241aea 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx
@@ -1,4 +1,3 @@
-import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import type { Meta, StoryObj } from "@storybook/react";
 import { ThirdwebProvider } from "thirdweb/react";
 import { AccountStatus } from "../../../../../@3rdweb-sdk/react/hooks/useApi";
@@ -43,92 +42,88 @@ function tomorrow(d: Date) {
 
 function Story() {
   return (
-    <div className="py-4">
-      <ChakraProviderSetup>
-        <ThirdwebProvider>
-          <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
-            <BadgeContainer label="#usage">
-              <BillingAlertsUI
-                dashboardAccount={createDashboardAccountStub("foo")}
-                usageData={createBillableServiceUsageDataStub()}
-              />
-            </BadgeContainer>
+    <ThirdwebProvider>
+      <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
+        <BadgeContainer label="#usage">
+          <BillingAlertsUI
+            dashboardAccount={createDashboardAccountStub("foo")}
+            usageData={createBillableServiceUsageDataStub()}
+          />
+        </BadgeContainer>
 
-            <BadgeContainer label="#paymentVerification">
-              <BillingAlertsUI
-                dashboardAccount={createDashboardAccountStub("foo", {
-                  status: AccountStatus.PaymentVerification,
-                  stripePaymentActionUrl: "https://example.com",
-                })}
-                usageData={createBillableServiceUsageDataStub({
-                  limits: {
-                    embeddedWallets: 100,
-                    storage: 100,
-                  },
-                })}
-              />
+        <BadgeContainer label="#paymentVerification">
+          <BillingAlertsUI
+            dashboardAccount={createDashboardAccountStub("foo", {
+              status: AccountStatus.PaymentVerification,
+              stripePaymentActionUrl: "https://example.com",
+            })}
+            usageData={createBillableServiceUsageDataStub({
+              limits: {
+                embeddedWallets: 100,
+                storage: 100,
+              },
+            })}
+          />
+        </BadgeContainer>
 
-              <BadgeContainer label="#serviceCutoff">
-                <BillingAlertsUI
-                  dashboardAccount={createDashboardAccountStub("foo", {
-                    recurringPaymentFailures: [
-                      {
-                        subscriptionId: "s1",
-                        subscriptionDescription: "s1 desc",
-                        paymentFailureCode: "400",
-                        serviceCutoffDate: yesterday(new Date()).toISOString(),
-                      },
-                    ],
-                  })}
-                  usageData={createBillableServiceUsageDataStub({
-                    limits: {
-                      embeddedWallets: 100,
-                      storage: 100,
-                    },
-                  })}
-                />
-              </BadgeContainer>
+        <BadgeContainer label="#serviceCutoff">
+          <BillingAlertsUI
+            dashboardAccount={createDashboardAccountStub("foo", {
+              recurringPaymentFailures: [
+                {
+                  subscriptionId: "s1",
+                  subscriptionDescription: "s1 desc",
+                  paymentFailureCode: "400",
+                  serviceCutoffDate: yesterday(new Date()).toISOString(),
+                },
+              ],
+            })}
+            usageData={createBillableServiceUsageDataStub({
+              limits: {
+                embeddedWallets: 100,
+                storage: 100,
+              },
+            })}
+          />
+        </BadgeContainer>
 
-              <BadgeContainer label="#recurringPayment">
-                <BillingAlertsUI
-                  dashboardAccount={createDashboardAccountStub("foo", {
-                    recurringPaymentFailures: [
-                      {
-                        subscriptionId: "s1",
-                        subscriptionDescription: "s1 desc",
-                        paymentFailureCode: "400",
-                        serviceCutoffDate: tomorrow(new Date()).toISOString(),
-                      },
-                    ],
-                  })}
-                  usageData={createBillableServiceUsageDataStub({
-                    limits: {
-                      embeddedWallets: 100,
-                      storage: 100,
-                    },
-                  })}
-                />
-              </BadgeContainer>
+        <BadgeContainer label="#recurringPayment">
+          <BillingAlertsUI
+            dashboardAccount={createDashboardAccountStub("foo", {
+              recurringPaymentFailures: [
+                {
+                  subscriptionId: "s1",
+                  subscriptionDescription: "s1 desc",
+                  paymentFailureCode: "400",
+                  serviceCutoffDate: tomorrow(new Date()).toISOString(),
+                },
+              ],
+            })}
+            usageData={createBillableServiceUsageDataStub({
+              limits: {
+                embeddedWallets: 100,
+                storage: 100,
+              },
+            })}
+          />
+        </BadgeContainer>
 
-              <BadgeContainer label="usage + serviceCutoff">
-                <BillingAlertsUI
-                  dashboardAccount={createDashboardAccountStub("foo", {
-                    recurringPaymentFailures: [
-                      {
-                        subscriptionId: "s1",
-                        subscriptionDescription: "s1 desc",
-                        paymentFailureCode: "400",
-                        serviceCutoffDate: yesterday(new Date()).toISOString(),
-                      },
-                    ],
-                  })}
-                  usageData={createBillableServiceUsageDataStub()}
-                />
-              </BadgeContainer>
-            </BadgeContainer>
-          </div>
-        </ThirdwebProvider>
-      </ChakraProviderSetup>
-    </div>
+        <BadgeContainer label="usage + serviceCutoff">
+          <BillingAlertsUI
+            dashboardAccount={createDashboardAccountStub("foo", {
+              recurringPaymentFailures: [
+                {
+                  subscriptionId: "s1",
+                  subscriptionDescription: "s1 desc",
+                  paymentFailureCode: "400",
+                  serviceCutoffDate: yesterday(new Date()).toISOString(),
+                },
+              ],
+            })}
+            usageData={createBillableServiceUsageDataStub()}
+          />
+        </BadgeContainer>
+      </div>
+    </ThirdwebProvider>
   );
 }
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
index 1427a48fb1d..b8d4e53cffa 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
@@ -6,7 +6,6 @@ import { OnboardingModal } from "components/onboarding/Modal";
 import { getRecurringPaymentFailureResponse } from "lib/billing";
 import { ExternalLinkIcon, XIcon } from "lucide-react";
 import { useState } from "react";
-import { Text } from "tw-components";
 import { LazyOnboardingBilling } from "../../../../onboarding/LazyOnboardingBilling";
 import { ManageBillingButton } from "../ManageButton";
 
@@ -70,14 +69,14 @@ export const RecurringPaymentFailureAlert: React.FC<
             <ul className="list-disc pl-3.5">
               {affectedServices.map((service) => (
                 <li key={service}>
-                  <Text>{service}</Text>
+                  <span>{service}</span>
                 </li>
               ))}
             </ul>
           </div>
         )}
 
-        <div className="flex gap-2">
+        <div className="flex flex-col gap-3 md:flex-row">
           <ManageBillingButton
             account={dashboardAccount}
             loading={paymentMethodSaving}