updates

src/components/HomePage/QuranGrowthJourneySection/CallToActionButtons/CallToActionButtons.module.scss

@@ -0,0 +1,8 @@
+.viewPlansBtn {
+    margin-inline-end: var(--spacing-small);
+}
+
+.buttonsContainer {
+    display: flex;
+    padding-block-start: var(--spacing-xxsmall);
+}

src/components/HomePage/QuranGrowthJourneySection/CallToActionButtons/LearningPlansButtons.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import useTranslation from 'next-translate/useTranslation';
+import useSWRImmutable from 'swr/immutable';
+
+import styles from './CallToActionButtons.module.scss';
+
+import Button, { ButtonSize } from '@/dls/Button/Button';
+import { getUserCoursesCount } from '@/utils/auth/api';
+import { makeGetUserCoursesCountUrl } from '@/utils/auth/apiPaths';
+import { isLoggedIn } from '@/utils/auth/login';
+import { logButtonClick } from '@/utils/eventLogger';
+import { getCoursesNavigationUrl, getMyCoursesNavigationUrl } from '@/utils/navigation';
+
+const LearningPlansButtons = () => {
+  const { t } = useTranslation('home');
+  const { data, isValidating, error } = useSWRImmutable(
+    isLoggedIn() ? makeGetUserCoursesCountUrl() : null,
+    async () => {
+      const response = await getUserCoursesCount();
+      return response;
+    },
+  );
+
+  const onViewPlansButtonClicked = (e) => {
+    // don't toggle collapsible parent when clicking
+    e.stopPropagation();
+    logButtonClick('homepage_qgj_view_plans');
+  };
+
+  const onMyPlansButtonClicked = (e) => {
+    e.stopPropagation();
+    logButtonClick('homepage_qgj_my_plans');
+  };
+
+  const viewPlansButton = (
+    <Button
+      onClick={onViewPlansButtonClicked}
+      href={getCoursesNavigationUrl()}
+      className={styles.viewPlansBtn}
+      size={ButtonSize.Small}
+    >
+      {t('qgj.learning-plans.cta.all-plans')}
+    </Button>
+  );
+
+  if (!isLoggedIn()) {
+    return viewPlansButton;
+  }
+
+  /**
+   * If we are loading, or if we have an error, or if we have no data, we show the message
+   */
+  if ((isValidating && !data) || error || (data?.count ?? 0) === 0) {
+    return viewPlansButton;
+  }
+
+  // user has already 1 plan
+  return (
+    <div className={styles.buttonsContainer}>
+      {viewPlansButton}
+      <Button
+        onClick={onMyPlansButtonClicked}
+        href={getMyCoursesNavigationUrl()}
+        size={ButtonSize.Small}
+      >
+        {t('qgj.learning-plans.cta.my-plans')}
+      </Button>
+    </div>
+  );
+};
+
+export default LearningPlansButtons;

src/components/HomePage/QuranGrowthJourneySection/CallToActionButtons/QuranGoalsButtons.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import useTranslation from 'next-translate/useTranslation';
+
+import styles from './CallToActionButtons.module.scss';
+
+import GoalButtons from '@/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/QuranReadingGoals/GoalButtons';
+import Button, { ButtonSize } from '@/dls/Button/Button';
+import useGetRecentlyReadVerseKeys from '@/hooks/auth/useGetRecentlyReadVerseKeys';
+import useGetStreakWithMetadata from '@/hooks/auth/useGetStreakWithMetadata';
+import { logButtonClick } from '@/utils/eventLogger';
+import { getReadingGoalNavigationUrl } from '@/utils/navigation';
+
+const QuranGoalsButtons = () => {
+  const { t } = useTranslation('reading-goal');
+  const { goal, currentActivityDay } = useGetStreakWithMetadata({
+    disableIfNoGoalExists: false,
+  });
+  const { recentlyReadVerseKeys } = useGetRecentlyReadVerseKeys();
+
+  const nextVerseToRead = goal?.progress?.nextVerseToRead ?? recentlyReadVerseKeys[0];
+
+  const onCreateReadingGoalClick = (e) => {
+    // don't toggle collapsible parent when clicking
+    e.stopPropagation();
+    logButtonClick('homepage_qgj_create_goal');
+  };
+
+  if (goal) {
+    return (
+      <GoalButtons nextVerseToRead={nextVerseToRead} currentActivityDay={currentActivityDay} />
+    );
+  }
+
+  return (
+    <div className={styles.buttonsContainer}>
+      <Button
+        onClick={onCreateReadingGoalClick}
+        size={ButtonSize.Small}
+        href={getReadingGoalNavigationUrl()}
+      >
+        {t('create-reading-goal')}
+      </Button>
+    </div>
+  );
+};
+
+export default QuranGoalsButtons;

src/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/LearningPlans/LearningPlans.module.scss

@@ -1,11 +1,3 @@
-.buttonsContainer {
-    display: flex;
-}
-
 .desc {
     margin-block-end: var(--spacing-small);
 }
-
-.viewPlansBtn {
-    margin-inline-end: var(--spacing-small);
-}

src/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/LearningPlans/index.tsx

@@ -5,24 +5,13 @@ import useSWRImmutable from 'swr/immutable';
 
 import styles from './LearningPlans.module.scss';
 
-import Button, { ButtonSize } from '@/dls/Button/Button';
 import { getUserCoursesCount } from '@/utils/auth/api';
 import { makeGetUserCoursesCountUrl } from '@/utils/auth/apiPaths';
 import { isLoggedIn } from '@/utils/auth/login';
-import { logButtonClick } from '@/utils/eventLogger';
-import { getCoursesNavigationUrl, getMyCoursesNavigationUrl } from '@/utils/navigation';
 
 const LearningPlans = () => {
   const { t } = useTranslation('home');
 
-  const onViewPlansButtonClicked = () => {
-    logButtonClick('homepage_qgj_view_plans');
-  };
-
-  const onMyPlansButtonClicked = () => {
-    logButtonClick('homepage_qgj_my_plans');
-  };
-
   const { data, isValidating, error } = useSWRImmutable(
     isLoggedIn() ? makeGetUserCoursesCountUrl() : null,
     async () => {
@@ -31,24 +20,8 @@ const LearningPlans = () => {
     },
   );
 
-  const viewPlansButton = (
-    <Button
-      onClick={onViewPlansButtonClicked}
-      href={getCoursesNavigationUrl()}
-      className={styles.viewPlansBtn}
-      size={ButtonSize.Small}
-    >
-      {t('qgj.learning-plans.cta.all-plans')}
-    </Button>
-  );
-
   if (!isLoggedIn()) {
-    return (
-      <div>
-        <p className={styles.desc}>{t('qgj.learning-plans.desc.logged-out')}</p>
-        {viewPlansButton}
-      </div>
-    );
+    return <p className={styles.desc}>{t('qgj.learning-plans.desc.logged-out')}</p>;
   }
 
   /**
@@ -58,26 +31,11 @@ const LearningPlans = () => {
     return (
       <div>
         <p className={styles.desc}>{t('qgj.learning-plans.desc.logged-in-no-plans')}</p>
-        {viewPlansButton}
       </div>
     );
   }
   // user has at least 1 plan
-  return (
-    <div>
-      <p className={styles.desc}>{t('qgj.learning-plans.desc.logged-in')}</p>
-      <div className={styles.buttonsContainer}>
-        {viewPlansButton}
-        <Button
-          onClick={onMyPlansButtonClicked}
-          href={getMyCoursesNavigationUrl()}
-          size={ButtonSize.Small}
-        >
-          {t('qgj.learning-plans.cta.my-plans')}
-        </Button>
-      </div>
-    </div>
-  );
+  return <p className={styles.desc}>{t('qgj.learning-plans.desc.logged-in')}</p>;
 };
 
 export default LearningPlans;

src/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/QuranReadingGoals/GoalButtons/GoalButtons.module.scss

@@ -1,5 +1,5 @@
 .actionsContainer {
-    margin-block-start: var(--spacing-large);
+    padding-block-start: var(--spacing-xxsmall);
     display: flex;
     align-items: center;
 

src/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/QuranReadingGoals/GoalButtons/index.tsx

@@ -4,7 +4,7 @@ import useTranslation from 'next-translate/useTranslation';
 
 import styles from './GoalButtons.module.scss';
 
-import Button, { ButtonVariant } from '@/dls/Button/Button';
+import Button, { ButtonSize, ButtonVariant } from '@/dls/Button/Button';
 import { CurrentQuranActivityDay } from '@/types/auth/ActivityDay';
 import { logButtonClick } from '@/utils/eventLogger';
 import {
@@ -19,11 +19,15 @@ type Props = {
 
 const GoalButtons: React.FC<Props> = ({ nextVerseToRead, currentActivityDay }) => {
   const { t } = useTranslation('reading-goal');
-  const onViewProgressClick = () => {
+  const onViewProgressClick = (e) => {
+    // don't toggle collapsible parent when clicking
+    e.stopPropagation();
     logButtonClick('homepage_streak_widget_view_progress');
   };
 
-  const onContinueReadingClick = () => {
+  const onContinueReadingClick = (e) => {
+    // don't toggle collapsible parent when clicking
+    e.stopPropagation();
     logButtonClick('homepage_streak_widget_continue_reading', {
       // eslint-disable-next-line @typescript-eslint/naming-convention
       verse_key: nextVerseToRead,
@@ -36,11 +40,13 @@ const GoalButtons: React.FC<Props> = ({ nextVerseToRead, currentActivityDay }) =
         href={nextVerseToRead ? getChapterWithStartingVerseUrl(nextVerseToRead) : undefined}
         isDisabled={!nextVerseToRead}
         onClick={onContinueReadingClick}
+        size={ButtonSize.Small}
       >
         {t(currentActivityDay?.ranges.length ? 'continue-reading' : 'start-reading')}
       </Button>
       <Button
         variant={ButtonVariant.Ghost}
+        size={ButtonSize.Small}
         href={getReadingGoalProgressNavigationUrl()}
         onClick={onViewProgressClick}
       >

src/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/QuranReadingGoals/index.tsx

@@ -2,16 +2,12 @@ import useTranslation from 'next-translate/useTranslation';
 
 import CurrentWeekProgress from './CurrentWeekProgress';
 import DaysCounter from './DaysCounter';
-import GoalButtons from './GoalButtons';
 import GoalStatus from './GoalStatus';
 import styles from './ReadingStreak.module.scss';
 import StreakIntroductionWidget from './StreakIntroductionWidget';
 
-import Button from '@/dls/Button/Button';
 import Skeleton from '@/dls/Skeleton/Skeleton';
-import useGetRecentlyReadVerseKeys from '@/hooks/auth/useGetRecentlyReadVerseKeys';
 import useGetStreakWithMetadata from '@/hooks/auth/useGetStreakWithMetadata';
-import { getReadingGoalNavigationUrl } from '@/utils/navigation';
 import { convertFractionToPercent } from '@/utils/number';
 
 const HomePageReadingStreak = () => {
@@ -22,9 +18,6 @@ const HomePageReadingStreak = () => {
       disableIfNoGoalExists: false,
     },
   );
-  const { recentlyReadVerseKeys } = useGetRecentlyReadVerseKeys();
-
-  const nextVerseToRead = goal?.progress?.nextVerseToRead ?? recentlyReadVerseKeys[0];
 
   const percent = convertFractionToPercent(currentActivityDay?.progress || 0);
 
@@ -50,24 +43,16 @@ const HomePageReadingStreak = () => {
         </>
       </div>
 
-      <div className={styles.goalContainer}>
-        {goal ? (
-          <>
-            <GoalStatus
-              isQuranReader={false}
-              goal={goal}
-              currentActivityDay={currentActivityDay}
-              percent={percent}
-            />
-            <GoalButtons
-              nextVerseToRead={nextVerseToRead}
-              currentActivityDay={currentActivityDay}
-            />
-          </>
-        ) : (
-          <Button href={getReadingGoalNavigationUrl()}>{t('create-reading-goal')}</Button>
-        )}
-      </div>
+      {goal && (
+        <div className={styles.goalContainer}>
+          <GoalStatus
+            isQuranReader={false}
+            goal={goal}
+            currentActivityDay={currentActivityDay}
+            percent={percent}
+          />
+        </div>
+      )}
     </div>
   );
 };

src/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/index.tsx

@@ -6,6 +6,8 @@ import styles from './CollapsibleSection.module.scss';
 import CollapsibleTitle from './CollapsibleTitle';
 import LearningPlans from './LearningPlans';
 
+import LearningPlansButtons from '@/components/HomePage/QuranGrowthJourneySection/CallToActionButtons/LearningPlansButtons';
+import QuranGoalsButtons from '@/components/HomePage/QuranGrowthJourneySection/CallToActionButtons/QuranGoalsButtons';
 import QuranReadingGoals from '@/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/QuranReadingGoals';
 import Collapsible, { CollapsibleDirection } from '@/dls/Collapsible/Collapsible';
 import ChevronDownIcon from '@/icons/chevron-down.svg';
@@ -36,9 +38,15 @@ const CollapsibleSection: React.FC<Props> = ({ onOpenChange, type }) => {
         shouldOpen={isOpen}
         title={
           type === CollapsibleType.QuranReadingGoalsType ? (
-            <CollapsibleTitle title={t('qgj.quran-reading-goals.title')} icon={<GoalIcon />} />
+            <div>
+              <CollapsibleTitle title={t('qgj.quran-reading-goals.title')} icon={<GoalIcon />} />
+              <QuranGoalsButtons />
+            </div>
           ) : (
-            <CollapsibleTitle title={t('qgj.learning-plans.title')} icon={<ReaderIcon />} />
+            <div>
+              <CollapsibleTitle title={t('qgj.learning-plans.title')} icon={<ReaderIcon />} />
+              <LearningPlansButtons />
+            </div>
           )
         }
         prefix={<ChevronDownIcon />}

src/components/HomePage/QuranGrowthJourneySection/QuranGrowthJourneySection.module.scss

@@ -5,7 +5,7 @@ $widget-wrapper-background-color: var(--color-success-faded);
 
 .wrapper {
     background-color: $widget-wrapper-background-color;
-    padding: var(--spacing-large);
+    padding: var(--spacing-small);
     position: relative;
 
     @include breakpoints.tablet {