feat: add SoonestStays

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -3,6 +3,10 @@
   gap: 4px;
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+}
 .title {
   font-weight: 600;
 }
@@ -11,7 +15,7 @@
   color: var(--some-red-color, #ed2027);
 }
 
-.subtitle {
+.cardSubtitle {
   font-family: var(--ff-fira-sans);
   font-size: 12px;
   font-weight: 400;

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

@@ -8,12 +8,14 @@ import styles from "./current.module.css"
 
 export type CurrentLevelProps = {
   title: string
-  preamble?: string
+  subtitle?: string
+  link: { text: string; href: string } | null
 }
 
 export default async function CurrentBenefitsBlock({
   title,
-  preamble,
+  subtitle,
+  link,
 }: CurrentLevelProps) {
   const benefits = await serverClient().user.benefits.current()
 
@@ -23,8 +25,13 @@ export default async function CurrentBenefitsBlock({
         <Title as="h4" level="h2" className={styles.title} uppercase>
           {title}
         </Title>
-        {preamble && <p className={styles.preamble}>{preamble}</p>}
+        {link && (
+          <Link className={styles.link} href={link.href}>
+            {link.text}
+          </Link>
+        )}
       </header>
+      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
 
       <div className={styles.cardContainer}>
         {benefits.map((benefit) => (
@@ -33,7 +40,7 @@ export default async function CurrentBenefitsBlock({
               <span className={styles.value}>{benefit.value}</span>{" "}
               {benefit.explanation}
             </Title>
-            <p className={styles.subtitle}>{benefit.subtitle}</p>
+            <p className={styles.cardSubtitle}>{benefit.subtitle}</p>
           </Link>
         ))}
       </div>

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

@@ -10,12 +10,14 @@ import styles from "./next.module.css"
 
 export type NextLevelProps = {
   title: string
-  preamble?: string
+  subtitle?: string
+  link: { href: string; text: string } | null
 }
 
 export default async function NextLevelBenefitsBlock({
   title,
-  preamble,
+  subtitle,
+  link,
 }: NextLevelProps) {
   const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
 
@@ -24,9 +26,14 @@ export default async function NextLevelBenefitsBlock({
       <header className={styles.header}>
         <Title as="h4" level="h2" uppercase className={styles.title}>
           {title}
+          {link && (
+            <Link className={styles.link} href={link.href}>
+              {link.text}
+            </Link>
+          )}
         </Title>
-        {preamble && <p className={styles.preamble}>{preamble}</p>}
       </header>
+      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
       <div className={styles.cardContainer}>
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>
@@ -36,7 +43,7 @@ export default async function NextLevelBenefitsBlock({
             </Button>
             <div>
               <span className={styles.level}>As our {nextLevel}</span>{" "}
-              <p className={styles.subtitle}>{perk.explanation}</p>
+              <p className={styles.cardSubtitle}>{perk.explanation}</p>
             </div>
           </article>
         ))}

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -3,6 +3,10 @@
   gap: 1.5rem;
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+}
 .cardContainer {
   display: grid;
   gap: 0.4rem;
@@ -31,7 +35,7 @@
   font-style: italic; /* font-family: var(--ff-biro-script-plus); */
 }
 
-.subtitle {
+.cardSubtitle {
   font-size: var(--typography-Subtitle-Mobile-fontSize, 18px);
 }
 
@@ -54,7 +58,7 @@
     font-weight: var(--typography-Script-Desktop-fontWeight);
   }
 
-  .subtitle {
+  .cardSubtitle {
     font-size: var(--typography-Subtitle-Desktop-fontSize, 18px);
   }
 }