Merged in feat/LOY-316-Level-Progress-Card (pull request #2739)

Feat/LOY-316 Level Progress Card

* feat(LOY-315): Add MembershipOverviewCard

* refactor(LOY-315): abstract sasbooststatus

* feat(LOY-316): build out LevelProgressCard skeleton & variant styling

* feat(LOY-316): Add HighesMembershipCard

* feat(LOY-316): ProgressBarCard base

* refactor(LOY-315): highest level card misc fixes

* feat(LOY-316): Add progress component to design system

* fix(LOY-316): type check

* refactor(LOY-316): calculate currentEarnings correctly

* fix(LOY-316): sas icon showing when not boosted

* fix(LOY-316): css module

* refactor(LOY-316): Restructure components

* feat(LOY-316): Add marker pin 📍

* fix(LOY-316): strict equality checks

* fix(LOY-316): code review fixes

* chore(LOY-316): conditionally hide old section under flag

* feat(LOY-316): Add level progress card to my points page

* chore(LOY-316): marker label container height


Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/index.tsx

@@ -40,7 +40,7 @@ export default async function MembershipOverviewCard({
   return (
     <section className={styles.card} aria-labelledby="membership-level">
       <header className={styles.membershipHeader}>
-        {sasMembership && (
+        {sasMembership?.boostedTierExpires && (
           <MaterialIcon icon="travel" size={20} color="Icon/Accent" />
         )}
         <Typography variant="Title/Overline/sm">

apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/membershipOverviewCard.module.css

@@ -34,7 +34,7 @@
   color: var(--Text-Brand-OnPrimary-3-Accent);
 }
 
-@media (min-width: 1367px) {
+@media screen and (min-width: 1367px) {
   .card {
     padding: var(--Space-x3) var(--Space-x4);
   }

apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx

@@ -7,6 +7,7 @@ import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests"
 import { TeamMemberCardTrigger } from "@/components/DigitalTeamMemberCard/Trigger"
 import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard"
 import DigitalTeamMemberCardAlert from "@/components/MyPages/DigitalTeamMemberCard/Alert"
+import LevelProgressCard from "@/components/MyPages/LevelProgressCard"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
@@ -64,19 +65,19 @@ export default async function Overview({
           <UserBaseInfo user={user} />
           <div className={styles.membershipCardsContainer}>
             <MembershipOverviewCard user={user} />
-            {/* LevelProgressCard will be added here in the next iteration */}
+            <LevelProgressCard user={user} />
           </div>
         </>
-      ) : null}
+      ) : (
+        <Hero color="red">
+          <Friend membership={user.membership} name={user.name}>
+            <MembershipNumber color="burgundy" membership={user.membership} />
+          </Friend>
+          <Divider className={styles.divider} color="peach" />
+          <Stats user={user} />
+        </Hero>
+      )}
 
-      {/*TODO: Replace hero section with new section above. */}
-      <Hero color="red">
-        <Friend membership={user.membership} name={user.name}>
-          <MembershipNumber color="burgundy" membership={user.membership} />
-        </Friend>
-        <Divider className={styles.divider} color="peach" />
-        <Stats user={user} />
-      </Hero>
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )

apps/scandic-web/components/Blocks/DynamicContent/Overview/overview.module.css

@@ -15,6 +15,7 @@
 .membershipCardsContainer {
   display: grid;
   gap: var(--Space-x2);
+  grid-template-columns: 1fr;
 }
 
 @media screen and (min-width: 768px) {