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/Points/Overview/index.tsx

@@ -1,7 +1,9 @@
 import { Divider } from "@scandic-hotels/design-system/Divider"
 
+import { env } from "@/env/server"
 import { getProfile } from "@/lib/trpc/memoizedRequests"
 
+import LevelProgressCard from "@/components/MyPages/LevelProgressCard"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
@@ -34,6 +36,16 @@ export default async function PointsOverview({
         headingAs={"h3"}
         headingLevel={"h1"}
       />
+      {env.ENABLE_NEW_OVERVIEW_SECTION && (
+        <div className={styles.membershipCardsContainer}>
+          {/*TODO: Add PointsToSpendCard */}
+          <LevelProgressCard
+            color="Surface/Brand/Primary 1/Default"
+            user={user}
+          />
+        </div>
+      )}
+      {/*TODO: Once the PointsToSpendCard is added hide the Hero Section under the flag above. */}
       <Hero color="burgundy">
         <Friend membership={user.membership} name={user.name}>
           <MembershipNumber color="red" membership={user.membership} />