Merged in feat/section-header-link (pull request #314)

Feat(WEB-359): Update section link for mobile

Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Arvid Norlin

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -2,7 +2,8 @@ import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -47,7 +48,7 @@ export default async function CurrentBenefitsBlock({
 
   return (
     <SectionContainer>
-      <Header title={title} link={link} subtitle={subtitle} />
+      <SectionHeader title={title} link={link} subtitle={subtitle} />
       <Grids.Scrollable>
         {currentLevel.benefits.map((benefit, idx) => (
           <Link className={styles.card} href="#" key={`${currentLevel}-${idx}`}>
@@ -64,6 +65,7 @@ export default async function CurrentBenefitsBlock({
           </Link>
         ))}
       </Grids.Scrollable>
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -4,7 +4,8 @@ import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Grids from "@/components/TempDesignSystem/Grids"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -39,7 +40,7 @@ export default async function NextLevelBenefitsBlock({
   // TODO: how to handle different count of unlockable benefits?
   return (
     <SectionContainer>
-      <Header title={title} subtitle={subtitle} link={link} />
+      <SectionHeader title={title} subtitle={subtitle} link={link} />
       <Grids.Stackable>
         {nextLevel.benefits.map((benefit) => (
           <article key={benefit.title} className={styles.card}>
@@ -63,6 +64,7 @@ export default async function NextLevelBenefitsBlock({
           </article>
         ))}
       </Grids.Stackable>
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Overview/index.tsx

@@ -1,7 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import Divider from "@/components/TempDesignSystem/Divider"
 
 import Friend from "./Friend"
@@ -24,12 +25,13 @@ export default async function Overview({
   }
   return (
     <SectionContainer>
-      <Header link={link} subtitle={subtitle} title={title} topTitle />
+      <SectionHeader link={link} subtitle={subtitle} title={title} topTitle />
       <section className={styles.overview}>
         <Friend user={user} />
         <Divider className={styles.divider} color="peach" />
         <Stats user={user} lang={lang} />
       </section>
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx

@@ -1,7 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import { getIntl } from "@/i18n"
 import { getMembership } from "@/utils/user"
 
@@ -22,7 +23,7 @@ async function CurrentPointsBalance({
   const membership = getMembership(user.memberships)
   return (
     <SectionContainer>
-      <Header title={title} link={link} subtitle={subtitle} />
+      <SectionHeader title={title} link={link} subtitle={subtitle} />
       <div className={styles.card}>
         <h2>{`${formatMessage({ id: "Total Points" })}*`}</h2>
         <p className={styles.points}>
@@ -32,6 +33,7 @@ async function CurrentPointsBalance({
           {`*${formatMessage({ id: "Points may take up to 10 days to be displayed." })}`}
         </p>
       </div>
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -1,7 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 
 import ClientEarnAndBurn from "./Client"
 
@@ -20,8 +21,9 @@ export default async function EarnAndBurn({
   }
   return (
     <SectionContainer>
-      <Header title={title} link={link} subtitle={subtitle} />
+      <SectionHeader title={title} link={link} subtitle={subtitle} />
       <ClientEarnAndBurn initialData={initialTransactions} lang={lang} />
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -1,6 +1,6 @@
 import { ArrowRightIcon } from "@/components/Icons"
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
@@ -16,12 +16,7 @@ export default function Shortcuts({
 }: ShortcutsProps) {
   return (
     <SectionContainer>
-      <Header
-        link={undefined}
-        subtitle={subtitle}
-        title={title}
-        topTitle={firstItem}
-      />
+      <SectionHeader subtitle={subtitle} title={title} topTitle={firstItem} />
       <section className={styles.links}>
         {shortcuts.map((shortcut) => (
           <Link

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -2,6 +2,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 
 import ClientPreviousStays from "./Client"
 
@@ -24,6 +25,7 @@ export default async function PreviousStays({
         initialPreviousStays={initialPreviousStays}
         lang={lang}
       />
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -1,7 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
-import Header from "@/components/Section/Header"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
 
 import StayCard from "../StayCard"
@@ -22,7 +23,7 @@ export default async function SoonestStays({
 
   return (
     <SectionContainer>
-      <Header title={title} subtitle={subtitle} link={link} />
+      <SectionHeader title={title} subtitle={subtitle} link={link} />
       {response.data.length ? (
         <Grids.Stackable>
           {response.data.map((stay) => (
@@ -36,6 +37,7 @@ export default async function SoonestStays({
       ) : (
         <EmptyUpcomingStaysBlock lang={lang} />
       )}
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -2,6 +2,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
 
 import ClientUpcomingStays from "./Client"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
@@ -29,6 +30,7 @@ export default async function UpcomingStays({
       ) : (
         <EmptyUpcomingStaysBlock lang={lang} />
       )}
+      <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
 }