Merged in feat/mypages-parallel-routes (pull request #1388)

feat: my profile - removed all parallel routes * Removed all parallel routes on my-profile * Fixed suspense * Moved components into myprofile folder * Turn off browser cache on myprofile * Clear router cache when editing profile * Clear route cache when adding new credit card * PR fixes Approved-by: Joakim Jäderberg
2025-02-21 11:24:46 +00:00
parent 9cd648fd65
commit 15dbeb9d46
25 changed files with 205 additions and 247 deletions
--- a/components/MyPages/myprofile/membershipCards/membershipcards.module.css
+++ b/components/MyPages/myprofile/membershipCards/membershipcards.module.css
@@ -0,0 +1,22 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x3);
+  max-width: 510px;
+}
+
+.content {
+  display: grid;
+  gap: var(--Spacing-x1);
+}
+
+.card {
+  margin-top: 2rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, auto);
+  gap: 0.5rem;
+}
+
+.subTitle {
+  grid-column: span 2;
+}
--- a/components/MyPages/myprofile/membershipCards/membershipcards.tsx
+++ b/components/MyPages/myprofile/membershipCards/membershipcards.tsx
@@ -0,0 +1,74 @@
+import { getMembershipCards } from "@/lib/trpc/memoizedRequests"
+
+import { PlusCircleIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getIntl } from "@/i18n"
+
+import styles from "./membershipcards.module.css"
+
+export default async function MembershipCardSlot() {
+  const intl = await getIntl()
+  const membershipCards = await getMembershipCards()
+
+  return (
+    <section className={styles.container}>
+      <article className={styles.content}>
+        <Subtitle color="black">
+          {intl.formatMessage({ id: "My membership cards" })}
+        </Subtitle>
+      </article>
+      {membershipCards &&
+        membershipCards.length > 0 &&
+        membershipCards.map((card, idx) => (
+          <div className={styles.card} key={idx}>
+            <Subtitle className={styles.subTitle}>
+              {intl.formatMessage(
+                { id: "Name: {cardMembershipType}" },
+                {
+                  cardMembershipType: card.membershipType,
+                }
+              )}
+            </Subtitle>
+            <span>
+              {intl.formatMessage(
+                { id: "Current Points: {points, number}" },
+                { points: card.currentPoints }
+              )}
+            </span>
+            <span>
+              {intl.formatMessage(
+                { id: "Member Since: {value}" },
+                {
+                  value: card.memberSince,
+                }
+              )}
+            </span>
+            <span>
+              {intl.formatMessage(
+                { id: "Number: {membershipNumber}" },
+                {
+                  membershipNumber: card.membershipNumber,
+                }
+              )}
+            </span>
+            <span>
+              {intl.formatMessage(
+                { id: "Expiration Date: {expirationDate}" },
+                {
+                  expirationDate: card.expirationDate.split("T")[0],
+                }
+              )}
+            </span>
+          </div>
+        ))}
+      <Link href="#" variant="icon">
+        <PlusCircleIcon color="burgundy" />
+        <Body color="burgundy" textTransform="underlined">
+          {intl.formatMessage({ id: "Add new card" })}
+        </Body>
+      </Link>
+    </section>
+  )
+}