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 && }
- {billingDetails?.status === 'none' && !isPending && (
+ {billingDetails?.status === 'none' && !isLoadingBillingDetails && (
You are using free plan,
@@ -114,12 +114,12 @@ export function BillingPage() {
)}
- {billingDetails?.status !== 'none' && !isPending && (
+ {billingDetails?.status !== 'none' && !isLoadingBillingDetails && (
<>
{billingDetails?.status === 'past_due' && (
-
- Your subscription is past due. Please update your payment
- information from the Stripe Portal.
+
+ We were not able to charge your card. Please update your payment
+ information.
)}
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}
/>
);
})}