Merged in feat/LOY-354-L7-Progress-Card (pull request #2786)

Feat/LOY-354 L7 Progress Card

* feat(LOY-354): Add Trophy icon

* fix(LOY-354): include new tierPoints value

* feat(LOY-354): L7 Progress Level Card support

* refactor(LOY-354): Refactoring of component structure

* fix(LOY-354): Remove intl prop drilling

* fix(LOY-354): cleanup progress section code


Approved-by: Erik Tiekstra

apps/scandic-web/components/MyPages/LevelProgressCard/index.tsx

@@ -4,10 +4,11 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
-import { isHighestMembership } from "@/utils/user"
 
-import HighestLevelCard from "./HighestLevelCard"
-import ProgressLevelWrapper from "./ProgressLevelWrapper"
+import ProgressCardHighestLevel from "./InnerCard/ProgressCardHighestLevel"
+import ProgressCardLowerLevel from "./InnerCard/ProgressCardLowerLevel"
+import SuccessCard from "./InnerCard/SuccessCard"
+import { getLevelProgressData } from "./utils"
 import { levelProgressCardVariants } from "./variants"
 
 import styles from "./levelProgressCard.module.css"
@@ -19,13 +20,13 @@ export default async function LevelProgressCard({
   className,
   color = "Surface/Brand/Primary 1/OnSurface/Default",
 }: levelProgressCardProps) {
-  const intl = await getIntl()
-  const lang = await getLang()
-
   if (!user.membership?.membershipLevel) {
     return null
   }
 
+  const intl = await getIntl()
+  const lang = await getLang()
+  const data = await getLevelProgressData(user.membership)
   const classNames = levelProgressCardVariants({ className, color })
 
   return (
@@ -60,13 +61,25 @@ export default async function LevelProgressCard({
           }
         />
       </header>
-      {isHighestMembership(user.membership.membershipLevel) ? (
-        <HighestLevelCard
-          membershipLevel={user.membership.membershipLevel}
-          intl={intl}
+
+      {data.type === "highest-complete" && (
+        <SuccessCard pointsEarned={data.earned} />
+      )}
+
+      {data.type === "highest-incomplete" && (
+        <ProgressCardHighestLevel
+          earned={data.earned}
+          required={data.required}
+          toKeepCurrent={data.toKeepCurrent}
+        />
+      )}
+
+      {data.type === "lower-level" && (
+        <ProgressCardLowerLevel
+          earned={data.earned}
+          toNext={data.toNext}
+          toKeepCurrent={data.toKeepCurrent}
         />
-      ) : (
-        <ProgressLevelWrapper user={user} />
       )}
     </section>
   )