From 758642764c0d31458eab0964c75759e7bb9ff5ee Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Thu, 9 Jan 2025 14:22:27 +0600
Subject: [PATCH] wip

---
 src/components/Billing/BillingPage.tsx         | 18 +++++++++---------
 .../CourseLanding/CourseChapterItem.tsx        |  5 +++--
 src/components/CourseLanding/CourseLanding.tsx |  1 +
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/Billing/BillingPage.tsx b/src/components/Billing/BillingPage.tsx
index fb02df7ca..ee610d1a4 100644
--- a/src/components/Billing/BillingPage.tsx
+++ b/src/components/Billing/BillingPage.tsx
@@ -24,7 +24,7 @@ export function BillingPage() {
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
   const [showVerifyUpgradeModal, setShowVerifyUpgradeModal] = useState(false);
 
-  const { data: billingDetails, isPending } = useQuery(
+  const { data: billingDetails, isPending: isLoadingBillingDetails } = useQuery(
     billingDetailsOptions(),
     queryClient,
   );
@@ -50,7 +50,7 @@ export function BillingPage() {
     );
 
   useEffect(() => {
-    if (isPending) {
+    if (isLoadingBillingDetails) {
       return;
     }
 
@@ -59,9 +59,9 @@ export function BillingPage() {
     if (shouldVerifyUpgrade) {
       setShowVerifyUpgradeModal(true);
     }
-  }, [isPending]);
+  }, [isLoadingBillingDetails]);
 
-  if (isPending || !billingDetails) {
+  if (isLoadingBillingDetails || !billingDetails) {
     return null;
   }
 
@@ -98,7 +98,7 @@ export function BillingPage() {
 
       {showVerifyUpgradeModal && <VerifyUpgrade />}
 
-      {billingDetails?.status === 'none' && !isPending && (
+      {billingDetails?.status === 'none' && !isLoadingBillingDetails && (
         <div className="flex h-full w-full flex-col">
           <p className="text-gray-800">
             You are using free plan,&nbsp;
@@ -114,12 +114,12 @@ export function BillingPage() {
         </div>
       )}
 
-      {billingDetails?.status !== 'none' && !isPending && (
+      {billingDetails?.status !== 'none' && !isLoadingBillingDetails && (
         <>
           {billingDetails?.status === 'past_due' && (
-            <div className="mb-4 rounded-md border border-red-300 bg-red-50 p-2 text-red-500">
-              Your subscription is past due. Please update your payment
-              information from the Stripe Portal.
+            <div className="mb-4 rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-500">
+              We were not able to charge your card. Please update your payment
+              information.
             </div>
           )}
 
diff --git a/src/components/CourseLanding/CourseChapterItem.tsx b/src/components/CourseLanding/CourseChapterItem.tsx
index ea331fa3f..aaa5f4c17 100644
--- a/src/components/CourseLanding/CourseChapterItem.tsx
+++ b/src/components/CourseLanding/CourseChapterItem.tsx
@@ -10,12 +10,13 @@ type CourseChapterItemProps = {
     title: string;
   }[];
   className?: string;
+  isOpen?: boolean;
 };
 
 export function CourseChapterItem(props: CourseChapterItemProps) {
-  const { title, lessons, className } = props;
+  const { title, lessons, className, isOpen: defaultIsOpen = false } = props;
 
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultIsOpen);
 
   const { excercises, textualLessons } = useMemo(() => {
     const excercises: CourseChapterItemProps['lessons'] = [];
diff --git a/src/components/CourseLanding/CourseLanding.tsx b/src/components/CourseLanding/CourseLanding.tsx
index 04096e8e5..ebd136ab3 100644
--- a/src/components/CourseLanding/CourseLanding.tsx
+++ b/src/components/CourseLanding/CourseLanding.tsx
@@ -181,6 +181,7 @@ export function CourseLanding(props: CourseLandingProps) {
                       isFirst ? 'rounded-t-md' : '',
                       isLast ? 'rounded-b-md' : 'border-b-0',
                     )}
+                    isOpen={isFirst}
                   />
                 );
               })}