fix: cleanup profile pages in renaming to follow naming convention

cleanup profile page html to be valid replace old temp design system components with new ones divider is now correctly an hr element less section elements to be valid html
2025-05-21 18:15:43 +02:00
parent 502ffa449d
commit aa06a0654d
19 changed files with 423 additions and 375 deletions
--- a/apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx
+++ b/apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx
@@ -0,0 +1,91 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getMembershipCards } from "@/lib/trpc/memoizedRequests"
+
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+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}>
+      <div className={styles.content}>
+        <Typography variant="Title/Subtitle/md">
+          <h3>
+            {intl.formatMessage({
+              defaultMessage: "My membership cards",
+            })}
+          </h3>
+        </Typography>
+      </div>
+      {(membershipCards || []).map((card, idx) => (
+        <div className={styles.card} key={idx}>
+          <Typography variant="Title/Subtitle/md">
+            <h4 className={styles.subTitle}>
+              {intl.formatMessage(
+                {
+                  defaultMessage: "Name: {cardMembershipType}",
+                },
+                {
+                  cardMembershipType: card.membershipType,
+                }
+              )}
+            </h4>
+          </Typography>
+          <span>
+            {intl.formatMessage(
+              {
+                defaultMessage: "Current Points: {points, number}",
+              },
+              { points: card.currentPoints }
+            )}
+          </span>
+          <span>
+            {intl.formatMessage(
+              {
+                defaultMessage: "Member Since: {value}",
+              },
+              {
+                value: card.memberSince,
+              }
+            )}
+          </span>
+          <span>
+            {intl.formatMessage(
+              {
+                defaultMessage: "Number: {membershipNumber}",
+              },
+              {
+                membershipNumber: card.membershipNumber,
+              }
+            )}
+          </span>
+          <span>
+            {intl.formatMessage(
+              {
+                defaultMessage: "Expiration Date: {expirationDate}",
+              },
+              {
+                expirationDate: card.expirationDate?.split("T")[0],
+              }
+            )}
+          </span>
+        </div>
+      ))}
+      <Link href="#" variant="icon">
+        <MaterialIcon icon="add_circle" color="CurrentColor" />
+        <Body color="burgundy" textTransform="underlined">
+          {intl.formatMessage({
+            defaultMessage: "Add new card",
+          })}
+        </Body>
+      </Link>
+    </section>
+  )
+}
--- a/apps/scandic-web/components/MyPages/Profile/MembershipCards/membershipCards.module.css
+++ b/apps/scandic-web/components/MyPages/Profile/MembershipCards/membershipCards.module.css
@@ -0,0 +1,22 @@
+.container {
+  display: grid;
+  gap: var(--Space-x3);
+  max-width: 510px;
+}
+
+.content {
+  display: grid;
+  gap: var(--Space-x1);
+}
+
+.card {
+  margin-top: var(--Space-x4);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, auto);
+  gap: var(--Space-x1);
+}
+
+.subTitle {
+  grid-column: span 2;
+}