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/profile/profile.tsx
+++ b/components/MyPages/myprofile/profile/profile.tsx
@@ -0,0 +1,132 @@
+import { languages, languageSelect } from "@/constants/languages"
+import { profileEdit } from "@/constants/routes/myPages"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
+
+import {
+  CalendarIcon,
+  EmailIcon,
+  GlobeIcon,
+  LocationIcon,
+  LockIcon,
+  PhoneIcon,
+} from "@/components/Icons"
+import CommunicationSlot from "@/components/MyPages/myprofile/communication/communication"
+import CreditCardSlot from "@/components/MyPages/myprofile/creditCards/creditCards"
+import MembershipCardSlot from "@/components/MyPages/myprofile/membershipCards/membershipcards"
+import Header from "@/components/Profile/Header"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./profile.module.css"
+
+export default async function Profile() {
+  const intl = await getIntl()
+  const lang = getLang()
+  const user = await getProfile()
+  if (!user || "error" in user) {
+    return null
+  }
+
+  const addressParts = []
+  if (user.address.streetAddress) {
+    addressParts.push(user.address.streetAddress)
+  }
+
+  if (user.address.city) {
+    addressParts.push(user.address.city)
+  }
+
+  if (user.address.country) {
+    addressParts.push(user.address.country)
+  }
+
+  const addressOutput =
+    addressParts.length > 0
+      ? addressParts.join(", ")
+      : intl.formatMessage({ id: "N/A" })
+
+  const defaultLanguage = languages[lang]
+  const language = languageSelect.find((l) => l.value === user.language)
+  return (
+    <>
+      <section className={styles.container}>
+        <Header>
+          <div>
+            <Title as="h4" color="red" level="h1" textTransform="capitalize">
+              {intl.formatMessage({ id: "Welcome" })}
+            </Title>
+            <Title
+              data-hj-suppress
+              as="h4"
+              color="burgundy"
+              level="h2"
+              textTransform="capitalize"
+            >
+              {user.name}
+            </Title>
+          </div>
+          <Button asChild intent="primary" size="small" theme="base">
+            <Link prefetch={false} color="none" href={profileEdit[lang]}>
+              {intl.formatMessage({ id: "Edit profile" })}
+            </Link>
+          </Button>
+        </Header>
+        <div className={styles.profile}>
+          <div className={styles.info}>
+            <div className={styles.item}>
+              <CalendarIcon color="burgundy" />
+              <Body color="burgundy" textTransform="bold">
+                {intl.formatMessage({ id: "Date of Birth" })}
+              </Body>
+              <Body color="burgundy">{user.dateOfBirth}</Body>
+            </div>
+            <div className={styles.item}>
+              <PhoneIcon color="burgundy" />
+              <Body color="burgundy" textTransform="bold">
+                {intl.formatMessage({ id: "Phone number" })}
+              </Body>
+              <Body color="burgundy">{user.phoneNumber}</Body>
+            </div>
+            <div className={styles.item}>
+              <GlobeIcon color="burgundy" />
+              <Body color="burgundy" textTransform="bold">
+                {intl.formatMessage({ id: "Language" })}
+              </Body>
+              <Body color="burgundy">{language?.label ?? defaultLanguage}</Body>
+            </div>
+            <div className={styles.item}>
+              <EmailIcon color="burgundy" />
+              <Body color="burgundy" textTransform="bold">
+                {intl.formatMessage({ id: "Email" })}
+              </Body>
+              <Body color="burgundy">{user.email}</Body>
+            </div>
+            <div className={styles.item}>
+              <LocationIcon color="burgundy" />
+              <Body color="burgundy" textTransform="bold">
+                {intl.formatMessage({ id: "Address" })}
+              </Body>
+              <Body color="burgundy">{addressOutput}</Body>
+            </div>
+            <div className={styles.item}>
+              <LockIcon color="burgundy" />
+              <Body color="burgundy" textTransform="bold">
+                {intl.formatMessage({ id: "Password" })}
+              </Body>
+              <Body color="burgundy">**********</Body>
+            </div>
+          </div>
+        </div>
+        <Divider color="burgundy" opacity={8} />
+        <CreditCardSlot />
+        <MembershipCardSlot />
+        <CommunicationSlot />
+      </section>
+    </>
+  )
+}