Merged in feat/my-profile-mvp (pull request #102)

Feat/my profile mvp

Approved-by: Michael Zetterberg

actions/editProfile.ts

@@ -0,0 +1,44 @@
+"use server"
+
+import { editProfileSchema } from "@/components/MyProfile/Profile/Edit/Form/schema"
+import { ZodError } from "zod"
+
+import { type State, Status } from "@/types/components/myPages/myProfile/edit"
+
+export async function editProfile(_prevState: State, values: FormData) {
+  try {
+    const data = editProfileSchema.parse(Object.fromEntries(values.entries()))
+
+    /**
+     * TODO: Update profile data when endpoint from
+     * API team is ready
+     */
+
+    console.info(`EditProfileSchema.Parse Data`)
+    console.log(data)
+
+    return {
+      message: "All good!",
+      status: Status.success,
+    }
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return {
+        errors: error.issues.map((issue) => ({
+          message: `Server validation: ${issue.message}`,
+          path: issue.path.join("."),
+        })),
+        message: "Invalid form data",
+        status: Status.error,
+      }
+    }
+
+    console.info(`EditProfile Server Action Error`)
+    console.error(error)
+
+    return {
+      message: "Something went wrong. Please try again.",
+      status: Status.error,
+    }
+  }
+}

app/[lang]/(live)/(protected)/my-pages/_constants.ts

@@ -1,86 +1,16 @@
-export const challenges = {
+export const breadcrumbs = {
-  journeys: [
+  "/my-pages": [
     {
-      tag: "After work queen",
+      title: "My Pages",
-      title: "Try 3 Hotel Bars, Pocket 200 Points",
-    },
-    {
-      tag: "Dine & Shine",
-      title: "Visit 3 scandic Restaurants, Earn 150 Points",
     },
   ],
-  victories: [
+  "/my-pages/profile": [
     {
-      tag: "Capital Explorer",
+      href: "/my-pages",
-      title: "Stay in 3 scandic hotels, in three Capitals, Gain 2000 Points",
+      title: "My Pages",
     },
     {
-      tag: "Friends Feast",
+      title: "My Profile",
-      title: "Dine with 3 Buddies, Snag a Free Breakfast",
-    },
-    {
-      tag: "Eco Warrior",
-      title: "Choose Green, Get 500 Points",
     },
   ],
 }
-
-export const shortcuts = [
-  {
-    href: "#",
-    title: "My Benefit",
-  },
-  {
-    href: "#",
-    title: "Program overview",
-  },
-  // {
-  //   href: "#",
-  //   title: "Scandic Friends shop",
-  // },
-  // {
-  //   href: "#",
-  //   title: "Fire and safety",
-  // },
-  // {
-  //   href: "#",
-  //   title: "Our sustainability work",
-  // },
-  // {
-  //   href: "#",
-  //   title: "How you earn points",
-  // },
-  // {
-  //   href: "#",
-  //   title: "How you use points",
-  // },
-  // {
-  //   href: "#",
-  //   title: "Missing points",
-  // },
-  // {
-  //   href: "#",
-  //   title: "Our term and conditions",
-  // },
-]
-
-export const stays = [
-  {
-    dateArrive: new Date("04 27 2024"),
-    dateDepart: new Date("04 28 2024"),
-    guests: 2,
-    hotel: "Scandic Helsinki Hub",
-  },
-  {
-    dateArrive: new Date("05 27 2024"),
-    dateDepart: new Date("05 28 2024"),
-    guests: 2,
-    hotel: "Scandic Örebro Central",
-  },
-  {
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic Oslo City",
-  },
-]

app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -1,31 +1,28 @@
-.page {
+.layout {
   --max-width: 101.4rem;
+  --header-height: 4.5rem;
 
   display: grid;
   font-family: var(--ff-fira-sans);
-  grid-template-rows: auto 1fr;
+  grid-template-rows: var(--header-height) auto 1fr;
   min-height: 100dvh;
 }
 
 .content {
   display: grid;
-  padding: 0 0 17.5rem;
   padding-bottom: 7.7rem;
   padding-left: 0;
   padding-right: 0;
-  padding-top: 0;
+  position: relative;
 }
 
 @media screen and (min-width: 950px) {
-  .page {
-    gap: 5.8rem;
-  }
-
   .content {
     gap: 10rem;
     grid-template-columns: 25rem 1fr;
     padding-bottom: 17.5rem;
     padding-left: 2.4rem;
     padding-right: 2.4rem;
+    padding-top: 5.8rem;
   }
 }

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -1,63 +1,26 @@
 import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
+import { breadcrumbs } from "./_constants"
 
+import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
 import Header from "@/components/MyPages/Header"
 import Sidebar from "@/components/MyPages/Sidebar"
 
 import styles from "./layout.module.css"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
-import { request } from "@/lib/graphql/request"
-import {
-  GetNavigationMyPagesData,
-  NavigationItem,
-  MenuItem,
-  PageLink,
-  PageLinkEnum,
-} from "@/types/requests/myPages/navigation"
-import { GetNavigationMyPages } from "@/lib/graphql/Query/NavigationMyPages.graphql"
-
-function getURL(node: PageLink) {
-  switch (node.__typename) {
-    case PageLinkEnum.ContentPage:
-      return node.web.url
-    case PageLinkEnum.AccountPage:
-    case PageLinkEnum.LoyaltyPage:
-      return node.url
-  }
-}
-
-function mapMenuItems(navigationItems: NavigationItem[]) {
-  return navigationItems.map(({ item }): MenuItem => {
-    const { node } = item.pageConnection.edges[0]
-
-    return {
-      uid: node.system.uid,
-      url: getURL(node),
-      linkText: item.link_text || node.title,
-      subItems: item.sub_items ? mapMenuItems(item.sub_items) : null,
-    }
-  })
-}
 
 export default async function MyPagesLayout({
   children,
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
-  const response = await request<GetNavigationMyPagesData>(
-    GetNavigationMyPages,
-    {
-      locale: params.lang,
-    }
-  )
-  // navigation_my_pages is of type Single, hence the hard [0]
-  const navigation = response.data.all_navigation_my_pages.items[0]
-  const menuItems = mapMenuItems(navigation.items)
-
   return (
-    <div className={`${firaMono.variable} ${firaSans.variable} ${styles.page}`}>
+    <div
+      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
+    >
       <Header lang={params.lang} />
+      <Breadcrumbs breadcrumbs={breadcrumbs} lang={params.lang} />
       <div className={styles.content}>
-        <Sidebar menuItems={menuItems} />
+        <Sidebar lang={params.lang} />
         {children}
       </div>
     </div>

app/[lang]/(live)/(protected)/my-pages/page.module.css

@@ -1,7 +1,6 @@
 .blocks {
   display: grid;
   gap: 4.2rem;
-  max-width: var(--max-width);
   padding-left: 2rem;
   padding-right: 2rem;
 }

app/[lang]/(live)/(protected)/my-pages/page.tsx

@@ -1,7 +1,7 @@
+import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
-import { challenges, shortcuts, stays } from "./_constants"
+import MaxWidth from "@/components/MaxWidth"
-
 import Overview from "@/components/MyPages/Blocks/Overview"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays"
@@ -11,27 +11,16 @@ import styles from "./page.module.css"
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function MyPage({ params }: PageArgs<LangParams>) {
-  const data = await serverClient().user.get()
+  const user = await serverClient().user.get()
-  const user = {
-    ...data,
-    journeys: challenges.journeys,
-    membershipId: 30812404844732,
-    nights: 14,
-    points: 20720,
-    qualifyingPoints: 5000,
-    shortcuts,
-    stays,
-    victories: challenges.victories,
-  }
   return (
-    <main className={styles.blocks}>
+    <MaxWidth className={styles.blocks} tag="main">
       <Overview user={user} />
       <UpcomingStays lang={params.lang} stays={user.stays} />
       <Shortcuts
         shortcuts={user.shortcuts}
-        title="Handy Shortcuts"
+        subtitle={_("The community at your fingertips")}
-        subtitle="The community at your fingertips"
+        title={_("Handy Shortcuts")}
       />
-    </main>
+    </MaxWidth>
   )
 }

app/[lang]/(live)/(protected)/my-pages/profile/@communication/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx

@@ -0,0 +1,5 @@
+import CommunicationPreferences from "@/components/MyProfile/CommunicationPreferences"
+
+export default function Communication() {
+  return <CommunicationPreferences />
+}

app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx

@@ -0,0 +1,5 @@
+import CreditCards from "@/components/MyProfile/CreditCards"
+
+export default function CreditCardSlot() {
+  return <CreditCards />
+}

app/[lang]/(live)/(protected)/my-pages/profile/@edit/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/page.tsx

@@ -0,0 +1,38 @@
+"use client"
+import { _ } from "@/lib/translation"
+import { profile } from "@/constants/routes/myPages"
+import { useProfileStore } from "@/stores/edit-profile"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default function EditProfile({ params }: PageArgs<LangParams>) {
+  const isPending = useProfileStore((store) => store.pending)
+  const isValid = useProfileStore((store) => store.valid)
+  return (
+    <>
+      <Button
+        aria-label="Cancel"
+        asChild
+        bgcolor="white"
+        form="edit-profile"
+        size="small"
+        type="reset"
+      >
+        <Link href={profile[params.lang]}>{_("Cancel")}</Link>
+      </Button>
+      <Button
+        bgcolor="quarternary"
+        disabled={!isValid || isPending}
+        form="edit-profile"
+        size="small"
+        type="submit"
+        weight="regular"
+      >
+        {_("Save")}
+      </Button>
+    </>
+  )
+}

app/[lang]/(live)/(protected)/my-pages/profile/@edit/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/page.tsx

@@ -0,0 +1,5 @@
+import MembershipCard from "@/components/MyProfile/MembershipCard"
+
+export default function MembershipCardSlot() {
+  return <MembershipCard />
+}

app/[lang]/(live)/(protected)/my-pages/profile/@password/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@password/page.tsx

@@ -0,0 +1,5 @@
+import Password from "@/components/MyProfile/Password"
+
+export default function PasswordSlot() {
+  return <Password />
+}

app/[lang]/(live)/(protected)/my-pages/profile/@profile/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/page.tsx

@@ -0,0 +1,8 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import EditProfile from "@/components/MyProfile/Profile/Edit"
+
+export default async function EditProfileSlot() {
+  const user = await serverClient().user.get()
+  return <EditProfile user={user} />
+}

app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx

@@ -0,0 +1,8 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import Profile from "@/components/MyProfile/Profile"
+
+export default async function ProfileInfo() {
+  const user = await serverClient().user.get()
+  return <Profile user={user} />
+}

app/[lang]/(live)/(protected)/my-pages/profile/@view/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@view/edit/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@view/page.tsx

@@ -0,0 +1,15 @@
+import { _ } from "@/lib/translation"
+import { profileEdit } from "@/constants/routes/myPages"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default function ProfileView({ params }: PageArgs<LangParams>) {
+  return (
+    <Button asChild bgcolor="quarternary" size="small" weight="regular">
+      <Link href={profileEdit[params.lang]}>{_("Edit")}</Link>
+    </Button>
+  )
+}

app/[lang]/(live)/(protected)/my-pages/profile/@wishes/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/@wishes/page.tsx

@@ -0,0 +1,5 @@
+import Wishes from "@/components/MyProfile/Wishes"
+
+export default function WishesSlot() {
+  return <Wishes />
+}

app/[lang]/(live)/(protected)/my-pages/profile/edit/page.tsx

@@ -0,0 +1,3 @@
+export default function EditPage() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/profile/layout.module.css

@@ -0,0 +1,23 @@
+.page {
+  display: grid;
+  gap: 3rem;
+}
+
+.btns {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  position: absolute;
+  right: 0;
+  /* Creates the 16px gap from design */
+  top: -1.6rem;
+  /* Moves itself to top of container to avoid calc */
+  transform: translateY(-100%);
+}
+
+.cards {
+  display: grid;
+  gap: 0.4rem;
+  grid-template-columns: 1fr 1fr;
+}

app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx

@@ -0,0 +1,33 @@
+import MaxWidth from "@/components/MaxWidth"
+
+import styles from "./layout.module.css"
+
+import type { ProfileLayoutProps } from "@/types/components/myPages/myProfile/layout"
+
+export default function ProfileLayout({
+  communication,
+  creditCards,
+  edit,
+  membershipCard,
+  password,
+  profile,
+  view,
+  wishes,
+}: React.PropsWithChildren<ProfileLayoutProps>) {
+  return (
+    <MaxWidth className={styles.page} tag="main">
+      <div className={styles.btns}>
+        {edit}
+        {view}
+      </div>
+      {profile}
+      <section className={styles.cards}>
+        {communication}
+        {wishes}
+        {membershipCard}
+        {creditCards}
+        {password}
+      </section>
+    </MaxWidth>
+  )
+}

components/Icons/Calendar.tsx

@@ -0,0 +1,14 @@
+import Image from "@/components/Image"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function CalendarIcon({ height = 20, width = 20 }: IconProps) {
+  return (
+    <Image
+      alt="Calendar Icon"
+      height={height}
+      src="/calendar_month.svg"
+      width={width}
+    />
+  )
+}

components/Icons/ChevronDown.tsx

@@ -0,0 +1,17 @@
+import Image from "@/components/Image"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ChevronDownIcon({
+  height = 20,
+  width = 20,
+}: IconProps) {
+  return (
+    <Image
+      alt="Chevron Down Icon"
+      height={height}
+      src="/chevron-down.svg"
+      width={width}
+    />
+  )
+}

components/Icons/Email.tsx

@@ -0,0 +1,14 @@
+import Image from "@/components/Image"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function EmailIcon({ height = 20, width = 20 }: IconProps) {
+  return (
+    <Image
+      alt="Email Icon"
+      height={height}
+      src="/alternate_email.svg"
+      width={width}
+    />
+  )
+}

components/Icons/House.tsx

@@ -0,0 +1,9 @@
+import Image from "@/components/Image"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function HouseIcon({ height = 20, width = 20 }: IconProps) {
+  return (
+    <Image alt="House Icon" height={height} src="/home.svg" width={width} />
+  )
+}

components/Icons/Phone.tsx

@@ -0,0 +1,9 @@
+import Image from "@/components/Image"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function PhoneIcon({ height = 20, width = 20 }: IconProps) {
+  return (
+    <Image alt="Phone Icon" height={height} src="/phone.svg" width={width} />
+  )
+}

components/Icons/index.tsx

@@ -0,0 +1,5 @@
+export { default as CalendarIcon } from "./Calendar"
+export { default as ChevronDownIcon } from "./ChevronDown"
+export { default as EmailIcon } from "./Email"
+export { default as HouseIcon } from "./House"
+export { default as PhoneIcon } from "./Phone"

components/MaxWidth/index.tsx

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./maxWidth.module.css"
+
+import type { MaxWidthProps } from "@/types/components/max-width"
+
+const maxWidthVariants = cva(styles.container)
+
+export default function MaxWidth({
+  className,
+  tag = "section",
+  ...props
+}: MaxWidthProps
+) {
+  const Cmp = tag
+  return <Cmp className={maxWidthVariants({ className })} {...props} />
+}

components/MaxWidth/maxWidth.module.css

@@ -0,0 +1,4 @@
+.container {
+  max-width: var(--max-width);
+  position: relative;
+}

components/MyPages/Blocks/Challenges/index.tsx

@@ -3,7 +3,7 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./challenges.module.css"
 
-import type { ChallengesProps } from "@/types/components/myPages/challenges"
+import type { ChallengesProps } from "@/types/components/myPages/myPage/challenges"
 
 export default function Challenges({ journeys, victories }: ChallengesProps) {
   return (

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -2,7 +2,7 @@ import Image from "@/components/Image"
 
 import styles from "./friend.module.css"
 
-import type { FriendProps } from "@/types/components/myPages/friend"
+import type { FriendProps } from "@/types/components/myPages/myPage/friend"
 
 export default function Friend({ user }: FriendProps) {
   return (

components/MyPages/Blocks/Overview/Stats/QualifyingPoints/index.tsx

@@ -3,7 +3,7 @@ import Image from "@/components/Image"
 
 import styles from "./points.module.css"
 
-import type { QualifyingPointsProps } from "@/types/components/myPages/qualifyingPoints"
+import type { QualifyingPointsProps } from "@/types/components/myPages/myPage/qualifyingPoints"
 
 export default function QualifyingPoints({ user }: QualifyingPointsProps) {
   return (

components/MyPages/Blocks/Overview/Stats/TotalPoints/index.tsx

@@ -3,7 +3,7 @@ import Title from "../Title"
 
 import styles from "./totalPoints.module.css"
 
-import type { TotalPointsProps } from "@/types/components/myPages/totalPoints"
+import type { TotalPointsProps } from "@/types/components/myPages/myPage/totalPoints"
 
 export default function TotalPoints({ user }: TotalPointsProps) {
   return (

components/MyPages/Blocks/Overview/Stats/index.tsx

@@ -3,7 +3,7 @@ import TotalPoints from "./TotalPoints"
 
 import styles from "./stats.module.css"
 
-import type { StatsProps } from "@/types/components/myPages/stats"
+import type { StatsProps } from "@/types/components/myPages/myPage/stats"
 
 export default function Stats({ user }: StatsProps) {
   return (

components/MyPages/Blocks/Overview/index.tsx

@@ -4,7 +4,7 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./overview.module.css"
 
-import type { OverviewProps } from "@/types/components/myPages/overview"
+import type { OverviewProps } from "@/types/components/myPages/myPage/overview"
 
 export default function Overview({ user }: OverviewProps) {
   return (

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -4,7 +4,7 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./shortcuts.module.css"
 
-import type { ShortcutsProps } from "@/types/components/myPages/shortcuts"
+import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"
 
 export default function Shortcuts({
   shortcuts,

components/MyPages/Blocks/UpcomingStays/Stay/index.tsx

@@ -6,7 +6,7 @@ import Title from "@/components/MyPages/Title"
 import styles from "./stay.module.css"
 
 import type { LangParams } from "@/types/params"
-import type { StayProps } from "@/types/components/myPages/stays"
+import type { StayProps } from "@/types/components/myPages/myPage/stays"
 
 export default function Stay({
   dateArrive,
@@ -36,7 +36,7 @@ export default function Stay({
         />
       </div>
       <footer className={styles.footer}>
-        <Title as="h4" level="h3" uppercase>
+        <Title as="h5" level="h3" uppercase>
           {hotel}
         </Title>
         <section className={styles.container}>

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -1,11 +1,11 @@
+import Link from "next/link"
 import Stay from "./Stay"
 import Title from "@/components/MyPages/Title"
 
 import styles from "./upcoming.module.css"
 
 import type { LangParams } from "@/types/params"
-import type { StaysProps } from "@/types/components/myPages/stays"
+import type { StaysProps } from "@/types/components/myPages/myPage/stays"
-import Link from "next/link"
 
 export default function UpcomingStays({
   lang,

components/MyPages/Breadcrumbs/Client.tsx

@@ -0,0 +1,49 @@
+"use client"
+import { Fragment } from "react"
+import { usePathname } from "next/navigation"
+
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
+
+export default function ClientBreadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
+  const pathname = usePathname()
+  /** Temp solution until we can get breadcrumbs from CS */
+  const path = pathname.replace(`/${lang}`, '')
+  const currentBreadcrumbs = breadcrumbs?.[path]
+  if (!currentBreadcrumbs?.length) {
+    return null
+  }
+
+  return (
+    <>
+      <li className={styles.listItem}>
+        <span>/</span>
+      </li>
+      {currentBreadcrumbs.map(breadcrumb => {
+        if (breadcrumb.href) {
+          return (
+            <Fragment key={breadcrumb.title}>
+              <li className={styles.listItem}>
+                <Link className={styles.link} href={breadcrumb.href}>
+                  {breadcrumb.title}
+                </Link>
+              </li>
+              <li className={styles.listItem}>
+                <span>/</span>
+              </li>
+            </Fragment>
+          )
+        }
+
+        return (
+          <li className={styles.listItem} key={breadcrumb.title}>
+            <p className={styles.currentPage}>{breadcrumb.title}</p>
+          </li>
+        )
+      })}
+    </>
+  )
+}

components/MyPages/Breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,40 @@
+.breadcrumbs {
+  background-color: var(--some-grey-color, #f2f2f2);
+  display: block;
+  padding-bottom: 0.8rem;
+  padding-left: 2rem;
+  padding-top: 3rem;
+  position: sticky;
+  top: var(--header-height);
+  z-index: 999;
+}
+
+.list {
+  align-items: center;
+  display: flex;
+  gap: 0.4rem;
+  justify-content: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.listItem,
+.link {
+  color: var(--some-text-color, #000);
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.56rem;
+}
+
+.currentPage {
+  margin: 0;
+}
+
+@media screen and (min-width: 950px) {
+  .breadcrumbs {
+    background-color: var(--some-white-color, #fff);
+    padding-left: 2.4rem;
+    padding-top: 2rem;
+  }
+}

components/MyPages/Breadcrumbs/index.tsx

@@ -0,0 +1,21 @@
+import ClientBreadcrumbs from "./Client"
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
+
+export default function Breadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <Link className={styles.link} href="#">
+            Home
+          </Link>
+        </li>
+        <ClientBreadcrumbs breadcrumbs={breadcrumbs} lang={lang} />
+      </ul>
+    </nav>
+  )
+}

components/MyPages/Header/Breadcrumbs/breadcrumbs.module.css

@@ -1,25 +0,0 @@
-.list {
-  align-items: center;
-  display: flex;
-  gap: 0.4rem;
-  justify-content: flex-start;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.listItem,
-.link {
-  color: var(--some-text-color, #000);
-  font-size: 1.4rem;
-  font-weight: 400;
-  line-height: 1.56rem;
-}
-
-.link {
-  text-decoration: none;
-}
-
-.currentPage {
-  margin: 0;
-}

components/MyPages/Header/Breadcrumbs/index.tsx

@@ -1,23 +0,0 @@
-import Link from "next/link"
-
-import styles from "./breadcrumbs.module.css"
-
-export default function Breadcrumbs() {
-  return (
-    <nav className={styles.breadcrumbs}>
-      <ul className={styles.list}>
-        <li className={styles.listItem}>
-          <Link className={styles.link} href="#">
-            Home
-          </Link>
-        </li>
-        <li className={styles.listItem}>
-          <span>/</span>
-        </li>
-        <li className={styles.listItem}>
-          <p className={styles.currentPage}>My Scandic</p>
-        </li>
-      </ul>
-    </nav>
-  )
-}

components/MyPages/Header/header.module.css

@@ -1,9 +1,3 @@
-.container {
-  position: sticky;
-  top: 0;
-  z-index: 999;
-}
-
 .header {
   align-items: center;
   background-color: var(--some-white-color, #fff);
@@ -11,16 +5,12 @@
   display: grid;
   gap: 3rem;
   grid-template-columns: 1fr auto auto;
-  height: 7rem;
+  height: var(--header-height);
-  padding: 0 2rem;
-}
 
-.breadcrumbs {
+  padding: 0 2rem;
-  background-color: var(--some-grey-color, #f2f2f2);
+  position: sticky;
-  display: block;
+  top: 0;
-  padding-bottom: 0.8rem;
+  z-index: 999;
-  padding-left: 2rem;
-  padding-top: 3rem;
 }
 
 @media screen and (min-width: 950px) {
@@ -30,13 +20,6 @@
     box-shadow: none;
     gap: 3.2rem;
     grid-template-columns: 1fr 19rem auto auto;
-    height: 4.5rem;
     padding: 0 2.4rem;
   }
-
-  .breadcrumbs {
-    background-color: var(--some-white-color, #fff);
-    padding-left: 2.4rem;
-    padding-top: 2rem;
-  }
 }

components/MyPages/Header/index.tsx

@@ -1,4 +1,3 @@
-import Breadcrumbs from "./Breadcrumbs"
 import Hamburger from "./Hamburger"
 import LanguageSwitcher from "./LanguageSwitcher"
 import Logo from "./Logo"
@@ -10,16 +9,11 @@ import type { LangParams } from "@/types/params"
 
 export default function Header({ lang }: LangParams) {
   return (
-    <div className={styles.container}>
+    <header className={styles.header}>
-      <header className={styles.header}>
+      <Logo lang={lang} />
-        <Logo lang={lang} />
+      <LanguageSwitcher />
-        <LanguageSwitcher />
+      <User />
-        <User />
+      <Hamburger />
-        <Hamburger />
+    </header>
-      </header>
-      <div className={styles.breadcrumbs}>
-        <Breadcrumbs />
-      </div>
-    </div>
   )
 }

components/MyPages/Sidebar/helpers.ts

@@ -0,0 +1,30 @@
+import { PageLinkEnum } from "@/types/requests/myPages/navigation"
+import type {
+  NavigationItem,
+  MenuItem,
+  PageLink,
+} from "@/types/requests/myPages/navigation"
+
+function getURL(node: PageLink) {
+  switch (node.__typename) {
+    case PageLinkEnum.ContentPage:
+      return node.web.url
+    case PageLinkEnum.AccountPage:
+    case PageLinkEnum.LoyaltyPage:
+      return node.url
+  }
+}
+
+export function mapMenuItems(navigationItems: NavigationItem[]) {
+  return navigationItems.map(({ item }): MenuItem => {
+    const { node } = item.pageConnection.edges[0]
+
+    return {
+      linkText: item.link_text || node.title,
+      lang: node.system.locale,
+      subItems: item.sub_items ? mapMenuItems(item.sub_items) : null,
+      uid: node.system.uid,
+      url: `/${node.system.locale}/${getURL(node)}`.replaceAll("//+", "/"),
+    }
+  })
+}

components/MyPages/Sidebar/index.tsx

@@ -1,18 +1,32 @@
-"use client"
+import { mapMenuItems } from "./helpers"
+import { request } from "@/lib/graphql/request"
+import { GetNavigationMyPages } from "@/lib/graphql/Query/NavigationMyPages.graphql"
+
+import { Fragment } from "react"
 import { LogOut } from "react-feather"
-import Link from "../../TempDesignSystem/Link"
+import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./sidebar.module.css"
-import { SidebarProps } from "@/types/requests/myPages/navigation"
-import { Fragment } from "react"
 
-export default function Sidebar({ menuItems }: SidebarProps) {
+import type { GetNavigationMyPagesData } from "@/types/requests/myPages/navigation"
+import type { SidebarProps } from "@/types/requests/myPages/navigation"
+
+export default async function Sidebar({ lang }: SidebarProps) {
+  const response = await request<GetNavigationMyPagesData>(
+    GetNavigationMyPages,
+    {
+      locale: lang,
+    }
+  )
+  // navigation_my_pages is of type Single, hence the hard [0]
+  const navigation = response.data.all_navigation_my_pages.items[0]
+  const menuItems = mapMenuItems(navigation.items)
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
         {menuItems.map((item) => (
           <Fragment key={item.uid}>
-            <Link variant={"sidebar"} href={item.url}>
+            <Link href={item.url} variant="sidebar">
               {item.linkText}
             </Link>
             {item.subItems
@@ -21,7 +35,7 @@ export default function Sidebar({ menuItems }: SidebarProps) {
                     <Link
                       key={subItem.uid}
                       href={subItem.url}
-                      variant={"sidebar"}
+                      variant="sidebar"
                     >
                       {subItem.linkText}
                     </Link>
@@ -31,7 +45,7 @@ export default function Sidebar({ menuItems }: SidebarProps) {
           </Fragment>
         ))}
 
-        <Link className={styles.link} href="/api/auth/signout">
+        <Link href="/api/auth/signout" variant="sidebar">
           Log out <LogOut height={16} width={16} />
         </Link>
       </nav>

components/MyPages/Sidebar/sidebar.module.css

@@ -2,7 +2,8 @@
   align-self: flex-start;
   display: none;
   position: sticky;
-  top: 13.2rem;
+  /* Based on header and breadcrumbs height, and gap */
+  top: 14.6rem;
 }
 
 .nav {
@@ -13,31 +14,6 @@
   padding-left: 4rem;
 }
 
-.link {
-  align-items: center;
-  color: var(--some-text-color, #111);
-  display: flex;
-  font-size: 1.6rem;
-  font-weight: 400;
-  gap: 0.6rem;
-  line-height: 1.9rem;
-  position: relative;
-  text-decoration: none;
-}
-
-.active {
-  font-weight: 600;
-}
-
-.active::before {
-  bottom: -0.4rem;
-  background-color: var(--some-text-color, #000);
-  content: "";
-  height: 0.2rem;
-  position: absolute;
-  width: 100%;
-}
-
 @media screen and (min-width: 950px) {
   .sidebar {
     display: block;

components/MyPages/Title/index.tsx

@@ -1,41 +1,21 @@
-import { cva } from "class-variance-authority"
+import { headingVariants } from "./variants"
-
-import styles from "./title.module.css"
 
 import type { HeadingProps } from "@/types/components/myPages/title"
 
-const config = {
-  variants: {
-    text: {
-      uppercase: styles.uppercase,
-    },
-    type: {
-      h1: styles.h1,
-      h2: styles.h2,
-      h3: styles.h3,
-      h4: styles.h4,
-      h5: styles.h5,
-    },
-  },
-  defaultVariants: {
-    type: "h1",
-  },
-} as const
-
-const headingStyles = cva(styles.heading, config)
-
 export default function Title({
   as,
   children,
   className = "",
   level = "h1",
   uppercase = false,
+  weight,
 }: HeadingProps) {
   const Hx = level
-  const classNames = headingStyles({
+  const classNames = headingVariants({
     className,
     text: uppercase ? "uppercase" : undefined,
     type: as ?? level,
+    weight,
   })
   return <Hx className={classNames}>{children}</Hx>
 }

components/MyPages/Title/title.module.css

@@ -1,5 +1,5 @@
 .heading {
-  font-weight: 900;
+  /* font-family: var(--ff-brandon-text); */
   margin: 0;
   padding: 0;
 }
@@ -33,6 +33,30 @@
   line-height: var(--typography-Title5-Mobile-lineHeight);
 }
 
+.light {
+  font-weight: 300;
+}
+
+.regular {
+  font-weight: 400;
+}
+
+.medium {
+  font-weight: 500;
+}
+
+.semiBold {
+  font-weight: 600;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.black {
+  font-weight: 900;
+}
+
 @media screen and (min-width: 950px) {
   .h1 {
     font-size: var(--typography-Title1-Desktop-fontSize);

components/MyPages/Title/variants.ts

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+const config = {
+  variants: {
+    text: {
+      uppercase: styles.uppercase,
+    },
+    type: {
+      h1: styles.h1,
+      h2: styles.h2,
+      h3: styles.h3,
+      h4: styles.h4,
+      h5: styles.h5,
+      h6: styles.h6,
+    },
+    weight: {
+      light: styles.light,
+      regular: styles.regular,
+      medium: styles.medium,
+      semiBold: styles.semiBold,
+      bold: styles.bold,
+      black: styles.black,
+    },
+  },
+  defaultVariants: {
+    type: "h1",
+    weight: "black",
+  },
+} as const
+
+export const headingVariants = cva(styles.heading, config)

components/MyProfile/Card/Title/index.tsx

@@ -0,0 +1,21 @@
+import { headingVariants } from "./variants"
+
+import type { HeadingProps } from "@/types/components/myPages/myProfile/card/title"
+
+export default function Title({
+  as,
+  children,
+  className = "",
+  level = "h1",
+  uppercase = false,
+  weight,
+}: HeadingProps) {
+  const Hx = level
+  const classNames = headingVariants({
+    className,
+    text: uppercase ? "uppercase" : undefined,
+    type: as ?? level,
+    weight,
+  })
+  return <Hx className={classNames}>{children}</Hx>
+}

components/MyProfile/Card/Title/title.module.css

@@ -0,0 +1,68 @@
+.heading {
+  color: var(--some-black-color, #2E2E2E);
+  /* font-family: var(--ff-brandon-text); */
+  letter-spacing: 6%;
+  margin: 0;
+  padding: 0;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.h1 {
+  font-size: 2.5rem;
+  line-height: 3.5rem;
+}
+
+.h2 {
+  font-size: 1.3rem;
+  line-height: 1.6rem;
+}
+
+.h3 {
+  font-size: 1.8rem;
+}
+
+.h4 {
+  font-size: 1.6rem;
+}
+
+.h5 {
+  font-size: 1.3rem;
+}
+
+.h6 {
+  font-size: 1rem;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.regular {
+  font-weight: 400;
+}
+
+.medium {
+  font-weight: 500;
+}
+
+.semiBold {
+  font-weight: 600;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.black {
+  font-weight: 900;
+}
+
+/* @media screen and (min-width: 950px) {
+  .h1 {
+    font-size: 3.8rem;
+    line-height: 4.5rem;
+  }
+} */

components/MyProfile/Card/Title/variants.ts

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+const config = {
+  variants: {
+    text: {
+      uppercase: styles.uppercase,
+    },
+    type: {
+      h1: styles.h1,
+      h2: styles.h2,
+      h3: styles.h3,
+      h4: styles.h4,
+      h5: styles.h5,
+      h6: styles.h6,
+    },
+    weight: {
+      light: styles.light,
+      regular: styles.regular,
+      medium: styles.medium,
+      semiBold: styles.semiBold,
+      bold: styles.bold,
+      black: styles.black,
+    },
+  },
+  defaultVariants: {
+    type: "h1",
+    weight: "medium",
+  },
+} as const
+
+export const headingVariants = cva(styles.heading, config)

components/MyProfile/Card/card.module.css

@@ -0,0 +1,6 @@
+.card {
+  background-color: var(--some-grey-color, #F2F2F2);
+  border-radius: 0.4rem;
+  min-height: 15.6rem;
+  padding: 3.8rem;
+}

components/MyProfile/Card/index.tsx

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority"
+
+import Title from "./Title"
+
+import styles from "./card.module.css"
+
+import type { CardProps } from "@/types/components/myPages/myProfile/card/card"
+
+const cardStyles = cva(styles.card)
+
+export default function Card({ className, tag = "section", ...props }: CardProps) {
+  const Cmp = tag
+  return <Cmp className={cardStyles({ className })} {...props} />
+}
+
+Card.Title = Title

components/MyProfile/CommunicationPreferences/com.module.css

@@ -0,0 +1,5 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

components/MyProfile/CommunicationPreferences/index.tsx

@@ -0,0 +1,11 @@
+import Card from "@/components/MyProfile/Card"
+
+import styles from "./com.module.css"
+
+export default function CommunicationPreferences() {
+  return (
+    <Card className={styles.container}>
+      <Card.Title level="h2" uppercase>My communication preferences</Card.Title>
+    </Card>
+  )
+}

components/MyProfile/CreditCards/creditCards.module.css

@@ -0,0 +1,5 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

components/MyProfile/CreditCards/index.tsx

@@ -0,0 +1,11 @@
+import Card from "@/components/MyProfile/Card"
+
+import styles from "./creditCards.module.css"
+
+export default function CreditCards() {
+  return (
+    <Card className={styles.container}>
+      <Card.Title level="h2" uppercase>My credit cards</Card.Title>
+    </Card>
+  )
+}

components/MyProfile/Field/field.module.css

@@ -0,0 +1,47 @@
+.container {
+  align-content: flex-start;
+  align-items: center;
+  display: grid;
+  gap: 0.4rem 1.7rem;
+  grid-template-areas:
+    "icon label"
+    "icon content";
+  grid-template-columns: auto 1fr;
+  justify-content: flex-start;
+}
+
+.icon {
+  align-items: center;
+  background-color: var(--some-white-color, #fff);
+  border-radius: 50%;
+  display: flex;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  grid-area: icon;
+  height: 3rem;
+  justify-content: center;
+  line-height: 1.9rem;
+  width: 3rem;
+}
+
+.label,
+.content {
+  font-family: var(--ff-fira-sans);
+  font-weight: 400;
+  letter-spacing: -1.5%;
+  line-height: 2.4rem;
+}
+
+.label {
+  color: var(--some-black-color, #404040);
+  grid-area: label;
+  font-size: 1.6rem;
+}
+
+.content {
+  color: var(--some-black-color, #000);
+  grid-area: content;
+  font-size: 1.8rem;
+  justify-self: stretch;
+}

components/MyProfile/Field/index.tsx

@@ -0,0 +1,26 @@
+import styles from "./field.module.css"
+
+export default function Field(props: React.HtmlHTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={styles.container} />
+}
+
+function Icon({ children }: React.PropsWithChildren) {
+  return <span className={styles.icon}>{children}</span>
+}
+
+function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return <label {...props} className={styles.label} />
+}
+
+function TextLabel({ children }: React.PropsWithChildren) {
+  return <span className={styles.label}>{children}</span>
+}
+
+function Content({ children }: React.PropsWithChildren) {
+  return <div className={styles.content}>{children}</div>
+}
+
+Field.Content = Content
+Field.Icon = Icon
+Field.Label = Label
+Field.TextLabel = TextLabel

components/MyProfile/MembershipCard/index.tsx

@@ -0,0 +1,11 @@
+import Card from "@/components/MyProfile/Card"
+
+import styles from "./membershipCard.module.css"
+
+export default function MembershipCard() {
+  return (
+    <Card className={styles.container}>
+      <Card.Title level="h2" uppercase>Membership cards</Card.Title>
+    </Card>
+  )
+}

components/MyProfile/MembershipCard/membershipCard.module.css

@@ -0,0 +1,5 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

components/MyProfile/Password/index.tsx

@@ -0,0 +1,11 @@
+import Card from "@/components/MyProfile/Card"
+
+import styles from "./password.module.css"
+
+export default function Password() {
+  return (
+    <Card className={styles.container}>
+      <Card.Title level="h2" uppercase>Password</Card.Title>
+    </Card>
+  )
+}

components/MyProfile/Password/password.module.css

@@ -0,0 +1,5 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

components/MyProfile/Profile/Container.tsx

@@ -0,0 +1,32 @@
+import { cva } from "class-variance-authority"
+
+import Card from "@/components/MyProfile/Card"
+import Image from "@/components/Image"
+
+import styles from "./profile.module.css"
+
+import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"
+
+const profileStyles = cva(styles.profile)
+
+export default function Container({
+  children,
+  className,
+  user,
+  ...props
+}: ProfileProps) {
+  return (
+    <Card className={profileStyles({ className })} {...props}>
+      <header className={styles.header}>
+        <Image
+          alt="Account Icon"
+          height={40}
+          src="/account_circle.svg"
+          width={40}
+        />
+        <Card.Title uppercase>{user.name}</Card.Title>
+      </header>
+      {children}
+    </Card>
+  )
+}

components/MyProfile/Profile/Edit/Form/Content.tsx

@@ -0,0 +1,126 @@
+"use client"
+import { useEffect } from "react"
+import { useFormStatus } from "react-dom"
+
+import { _ } from "@/lib/translation"
+import { useProfileStore } from "@/stores/edit-profile"
+
+import {
+  CalendarIcon,
+  EmailIcon,
+  HouseIcon,
+  PhoneIcon,
+} from "@/components/Icons"
+import CountrySelect from "@/components/TempDesignSystem/Form/Country"
+import DateSelect from "@/components/TempDesignSystem/Form/Date"
+import Field from "@/components/MyProfile/Field"
+import Input from "@/components/TempDesignSystem/Form/Input"
+import Phone from "@/components/TempDesignSystem/Form/Phone"
+
+import type { EditFormContentProps } from "@/types/components/myPages/myProfile/edit"
+
+export default function FormContent({ control }: EditFormContentProps) {
+  const { pending } = useFormStatus()
+  const setIsPending = useProfileStore((store) => store.setIsPending)
+
+  useEffect(() => {
+    setIsPending(pending)
+  }, [pending])
+
+  return (
+    <>
+      <Field>
+        <Field.Icon>SE</Field.Icon>
+        <Field.Label htmlFor="country">*{_("Country")}</Field.Label>
+        <Field.Content>
+          <CountrySelect name="country" />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <CalendarIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="dob">*{_("Date of Birth")}</Field.Label>
+        <Field.Content>
+          <DateSelect
+            control={control}
+            name="dob"
+            registerOptions={{ required: true }}
+          />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <EmailIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="email">*{_("Email")}</Field.Label>
+        <Field.Content>
+          <Input
+            control={control}
+            name="email"
+            placeholder={_("Email")}
+            registerOptions={{ required: true }}
+            type="email"
+          />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <PhoneIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="phone">*{_("Phone")}</Field.Label>
+        <Field.Content>
+          <Phone name="phone" />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <HouseIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="street">*{_("Address")}</Field.Label>
+        <Field.Content>
+          <Input
+            control={control}
+            name="street"
+            placeholder={_("Street 123")}
+            registerOptions={{ required: true }}
+          />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <HouseIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="city">*{_("City/State")}</Field.Label>
+        <Field.Content>
+          <Input
+            control={control}
+            name="city"
+            placeholder={_("City")}
+            registerOptions={{ required: true }}
+          />
+        </Field.Content>
+      </Field>
+
+      <Field>
+        <Field.Icon>
+          <HouseIcon />
+        </Field.Icon>
+        <Field.Label htmlFor="zip">*{_("Zip code")}</Field.Label>
+        <Field.Content>
+          <Input
+            control={control}
+            name="zip"
+            placeholder={_("Zip code")}
+            registerOptions={{ required: true }}
+          />
+        </Field.Content>
+      </Field>
+    </>
+  )
+}

components/MyProfile/Profile/Edit/Form/form.module.css

@@ -0,0 +1,5 @@
+.form {
+  display: grid;
+  gap: 1.8rem;
+  grid-template-columns: 1fr 1fr;
+}

components/MyProfile/Profile/Edit/Form/index.tsx

@@ -0,0 +1,61 @@
+"use client"
+import { FormProvider, useForm } from "react-hook-form"
+import { useFormState as useReactFormState } from "react-dom"
+import { useEffect } from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+import { editProfile } from "@/actions/editProfile"
+import { editProfileSchema, type EditProfileSchema } from "./schema"
+import { useProfileStore } from "@/stores/edit-profile"
+
+import FormContent from "./Content"
+
+import styles from "./form.module.css"
+
+import {
+  type EditFormProps,
+  type State,
+} from "@/types/components/myPages/myProfile/edit"
+
+export default function Form({ user }: EditFormProps) {
+  const isValid = useProfileStore((store) => store.valid)
+  const setValid = useProfileStore((store) => store.setValid)
+  /**
+   * like react, react-hook-form also exports a useFormState hook,
+   * we want to clearly keep them separate by naming.
+   */
+  const [state, formAction] = useReactFormState<State, FormData>(
+    editProfile,
+    null
+  )
+
+  const form = useForm<EditProfileSchema>({
+    defaultValues: {
+      country: user.country,
+      city: user.address.city,
+      dob: user.dob,
+      email: user.email,
+      phone: user.phone,
+      street: user.address.street,
+      zip: user.address.zipcode,
+    },
+    criteriaMode: "all",
+    mode: "onTouched",
+    resolver: zodResolver(editProfileSchema),
+    reValidateMode: "onChange",
+  })
+
+  useEffect(() => {
+    if (isValid !== form.formState.isValid) {
+      setValid(form.formState.isValid)
+    }
+  }, [form.formState.isValid, isValid, setValid])
+
+  return (
+    <FormProvider {...form}>
+      <form action={formAction} className={styles.form} id="edit-profile">
+        <FormContent control={form.control} />
+      </form>
+    </FormProvider>
+  )
+}

components/MyProfile/Profile/Edit/Form/schema.ts

@@ -0,0 +1,29 @@
+import { z } from "zod"
+
+import { _ } from "@/lib/translation"
+import { phoneValidator } from "@/utils/phoneValidator"
+
+export const editProfileSchema = z.object({
+  city: z
+    .string({ required_error: _("City is required") })
+    .min(1, { message: _("City is required") }),
+  country: z
+    .string({ required_error: _("Country is required") })
+    .min(1, { message: _("Country is required") }),
+  dob: z
+    .string({ required_error: _("Date of Birth is required") })
+    .min(1, { message: _("Date of Birth is required") }),
+  email: z.string().email(),
+  phone: phoneValidator(
+    _("Phone is required"),
+    _("Please enter a valid phone number")
+  ),
+  street: z
+    .string({ required_error: _("Address is required") })
+    .min(1, { message: _("Address is required") }),
+  zip: z
+    .string({ required_error: _("Zip code is required") })
+    .min(1, { message: _("Zip code is required") }),
+})
+
+export type EditProfileSchema = z.infer<typeof editProfileSchema>

components/MyProfile/Profile/Edit/index.tsx

@@ -0,0 +1,12 @@
+import Container from "../Container"
+import Form from "./Form"
+
+import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"
+
+export default function EditProfile(props: ProfileProps) {
+  return (
+    <Container {...props}>
+      <Form user={props.user} />
+    </Container>
+  )
+}

components/MyProfile/Profile/index.tsx

@@ -0,0 +1,70 @@
+import { _ } from "@/lib/translation"
+
+import {
+  CalendarIcon,
+  EmailIcon,
+  HouseIcon,
+  PhoneIcon,
+} from "@/components/Icons"
+import Container from "./Container"
+import Field from "../Field"
+
+import styles from "./profile.module.css"
+
+import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"
+
+export default function Profile(props: ProfileProps) {
+  return (
+    <Container {...props}>
+      <section className={styles.info}>
+        <Field>
+          <Field.Icon>SE</Field.Icon>
+          <Field.TextLabel>{_("Country")}</Field.TextLabel>
+          <Field.Content>Sweden</Field.Content>
+        </Field>
+        <Field>
+          <Field.Icon>
+            <CalendarIcon />
+          </Field.Icon>
+          <Field.TextLabel>{_("Date of Birth")}</Field.TextLabel>
+          <Field.Content>27/05/1977</Field.Content>
+        </Field>
+        <Field>
+          <Field.Icon>
+            <EmailIcon />
+          </Field.Icon>
+          <Field.TextLabel>{_("Email")}</Field.TextLabel>
+          <Field.Content>f*********@g****.com</Field.Content>
+        </Field>
+        <Field>
+          <Field.Icon>
+            <PhoneIcon />
+          </Field.Icon>
+          <Field.TextLabel>{_("Phone number")}</Field.TextLabel>
+          <Field.Content>+46 ******00</Field.Content>
+        </Field>
+        <Field>
+          <Field.Icon>
+            <HouseIcon />
+          </Field.Icon>
+          <Field.TextLabel>{_("Address")}</Field.TextLabel>
+          <Field.Content>T***************</Field.Content>
+        </Field>
+        <Field>
+          <Field.Icon>
+            <HouseIcon />
+          </Field.Icon>
+          <Field.TextLabel>{_("City/State")}</Field.TextLabel>
+          <Field.Content>S*******</Field.Content>
+        </Field>
+        <Field>
+          <Field.Icon>
+            <HouseIcon />
+          </Field.Icon>
+          <Field.TextLabel>{_("Zip code")}</Field.TextLabel>
+          <Field.Content>1****</Field.Content>
+        </Field>
+      </section>
+    </Container>
+  )
+}

components/MyProfile/Profile/profile.module.css

@@ -0,0 +1,19 @@
+.profile {
+  display: grid;
+  gap: 3.4rem;
+  grid-template-rows: auto 1fr;
+  min-height: 46rem;
+}
+
+.header {
+  align-items: center;
+  display: grid;
+  gap: 1.4rem;
+  grid-template-columns: auto 1fr;
+}
+
+.info {
+  display: grid;
+  gap: 1.8rem;
+  grid-template-columns: 1fr 1fr;
+}

components/MyProfile/Wishes/index.tsx

@@ -0,0 +1,11 @@
+import Card from "@/components/MyProfile/Card"
+
+import styles from "./wishes.module.css"
+
+export default function Wishes() {
+  return (
+    <Card className={styles.container}>
+      <Card.Title level="h2" uppercase>My wishes</Card.Title>
+    </Card>
+  )
+}

components/MyProfile/Wishes/wishes.module.css

@@ -0,0 +1,5 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

components/TempDesignSystem/Button/button.module.css

@@ -72,3 +72,79 @@
   color: var(--some-grey-color, #444343);
   cursor: not-allowed;
 }
+
+.small {
+  border-radius: 3rem;
+  font-size: 1.4rem;
+  height: 2.6rem;
+  line-height: 1.7rem;
+  padding: 0.8rem 2.2rem;
+}
+
+.average {
+  border-radius: 4.7rem;
+  font-size: 1.4rem;
+  height: 3.2rem;
+  letter-spacing: 1%;
+  line-height: 1.6rem;
+  padding: 0.65rem 1.3rem;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.regular {
+  font-weight: 400;
+}
+
+.medium {
+  font-weight: 500;
+}
+
+.semiBold {
+  font-weight: 600;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.black {
+  font-weight: 900;
+}
+
+.primary {
+  background-color: var(--scandic-blue, #02838e);
+  border: 0.1rem solid var(--scandic-blue, #02838e);
+  color: var(--some-white-color, #fff);
+}
+
+.secondary {
+  background-color: var(--some-black-color, #000);
+  border: 0.1rem solid var(--some-black-color, #000);
+  color: var(--some-white-color, #fff);
+}
+
+.tertiary {
+  background-color: var(--some-red-color, #d60728);
+  border: 0.1rem solid var(--some-red-color, #d60728);
+  color: var(--some-white-color, #fff);
+}
+
+.quarternary {
+  background-color: var(--some-grey-color, #727272);
+  border: 0.1rem solid var(--some-black-color, #727272);
+  color: var(--some-white-color, #fff);
+}
+
+.white {
+  background-color: var(--some-white-color, #fff);
+  border: 0.1rem solid var(--some-black-color, #000);
+  color: var(--some-black-color, #000);
+}
+
+.btn:disabled {
+  background-color: var(--some-grey-color, #d9d9d9);
+  color: var(--some-grey-color, #757575);
+}

components/TempDesignSystem/Button/index.tsx

@@ -8,16 +8,23 @@ import type { ButtonProps } from "./button"
 
 export default function Button({
   asChild = false,
+  bgcolor,
   className,
-  variant,
+  disabled,
   intent,
+  size,
+  variant,
+  weight,
   ...props
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button"
-  return (
+  const classNames = buttonVariants({
-    <Comp
+    bgcolor,
-      className={buttonVariants({ className, variant, intent })}
+    className,
-      {...props}
+    intent,
-    />
+    size,
-  )
+    variant,
+    weight,
+  })
+  return <Comp className={classNames} disabled={disabled} {...props} />
 }

components/TempDesignSystem/Button/variants.ts

@@ -4,16 +4,36 @@ import styles from "./button.module.css"
 
 export const buttonVariants = cva(styles.btn, {
   variants: {
-    variant: {
+    bgcolor: {
-      default: styles.default,
+      primary: styles.primary,
-      icon: styles.icon,
+      secondary: styles.secondary,
+      tertiary: styles.tertiary,
+      quarternary: styles.quarternary,
+      white: styles.white,
     },
     intent: {
       primary: styles.primary,
       secondary: styles.secondary,
     },
+    size: {
+      small: styles.small,
+      regular: styles.average,
+    },
+    variant: {
+      default: styles.default,
+      icon: styles.icon,
+    },
+    weight: {
+      light: styles.light,
+      regular: styles.regular,
+      medium: styles.medium,
+      semiBold: styles.semiBold,
+      bold: styles.bold,
+      black: styles.black,
+    },
   },
   defaultVariants: {
     variant: "default",
+    weight: "regular",
   },
 })

components/TempDesignSystem/Form/Country/countries.ts

@@ -0,0 +1,256 @@
+export const countries = [
+  { name: "Afghanistan", code: "AF" },
+  { name: "Albania", code: "AL" },
+  { name: "Algeria", code: "DZ" },
+  { name: "American Samoa", code: "AS" },
+  { name: "Andorra", code: "AD" },
+  { name: "Angola", code: "AO" },
+  { name: "Anguilla", code: "AI" },
+  { name: "Antarctica", code: "AQ" },
+  { name: "Antigua and Barbuda", code: "AG" },
+  { name: "Argentina", code: "AR" },
+  { name: "Armenia", code: "AM" },
+  { name: "Aruba", code: "AW" },
+  { name: "Australia", code: "AU" },
+  { name: "Austria", code: "AT" },
+  { name: "Azerbaijan", code: "AZ" },
+  { name: "Bahamas", code: "BS" },
+  { name: "Bahrain", code: "BH" },
+  { name: "Bangladesh", code: "BD" },
+  { name: "Barbados", code: "BB" },
+  { name: "Belarus", code: "BY" },
+  { name: "Belgium", code: "BE" },
+  { name: "Belize", code: "BZ" },
+  { name: "Benin", code: "BJ" },
+  { name: "Bermuda", code: "BM" },
+  { name: "Bhutan", code: "BT" },
+  { name: "Bolivia", code: "BO" },
+  { name: "Bonaire", code: "BQ" },
+  { name: "Bosnia and Herzegovina", code: "BA" },
+  { name: "Botswana", code: "BW" },
+  { name: "Bouvet Island", code: "BV" },
+  { name: "Brazil", code: "BR" },
+  { name: "British Indian Ocean Territory", code: "IO" },
+  { name: "Brunei Darussalam", code: "BN" },
+  { name: "Bulgaria", code: "BG" },
+  { name: "Burkina Faso", code: "BF" },
+  { name: "Burundi", code: "BI" },
+  { name: "Cambodia", code: "KH" },
+  { name: "Cameroon", code: "CM" },
+  { name: "Canada", code: "CA" },
+  { name: "Cape Verde", code: "CV" },
+  { name: "Cayman Islands", code: "KY" },
+  { name: "Central African Republic", code: "CF" },
+  { name: "Chad", code: "TD" },
+  { name: "Chile", code: "CL" },
+  { name: "China", code: "CN" },
+  { name: "Christmas Island", code: "CX" },
+  { name: "Cocos (Keeling) Islands", code: "CC" },
+  { name: "Colombia", code: "CO" },
+  { name: "Comoros", code: "KM" },
+  { name: "Congo", code: "CG" },
+  { name: "Congo, The Democratic Republic of the", code: "CD" },
+  { name: "Cook Islands", code: "CK" },
+  { name: "Costa Rica", code: "CR" },
+  { name: 'Cote D"Ivoire', code: "CI" },
+  { name: "Croatia", code: "HR" },
+  { name: "Cuba", code: "CU" },
+  { name: "Curacao", code: "CW" },
+  { name: "Cyprus", code: "CY" },
+  { name: "Czech Republic", code: "CZ" },
+  { name: "Denmark", code: "DK" },
+  { name: "Djibouti", code: "DJ" },
+  { name: "Dominica", code: "DM" },
+  { name: "Dominican Republic", code: "DO" },
+  { name: "Ecuador", code: "EC" },
+  { name: "Egypt", code: "EG" },
+  { name: "El Salvador", code: "SV" },
+  { name: "Equatorial Guinea", code: "GQ" },
+  { name: "Eritrea", code: "ER" },
+  { name: "Estonia", code: "EE" },
+  { name: "Eswatini", code: "SZ" },
+  { name: "Ethiopia", code: "ET" },
+  { name: "Falkland Islands (Malvinas)", code: "FK" },
+  { name: "Faroe Islands", code: "FO" },
+  { name: "Fiji", code: "FJ" },
+  { name: "Finland", code: "FI" },
+  { name: "France", code: "FR" },
+  { name: "French Guiana", code: "GF" },
+  { name: "French Polynesia", code: "PF" },
+  { name: "French Southern Territories", code: "TF" },
+  { name: "Gabon", code: "GA" },
+  { name: "Gambia", code: "GM" },
+  { name: "Georgia", code: "GE" },
+  { name: "Germany", code: "DE" },
+  { name: "Ghana", code: "GH" },
+  { name: "Gibraltar", code: "GI" },
+  { name: "Greece", code: "GR" },
+  { name: "Greenland", code: "GL" },
+  { name: "Grenada", code: "GD" },
+  { name: "Guadeloupe", code: "GP" },
+  { name: "Guam", code: "GU" },
+  { name: "Guatemala", code: "GT" },
+  { name: "Guernsey", code: "GG" },
+  { name: "Guinea", code: "GN" },
+  { name: "Guinea-Bissau", code: "GW" },
+  { name: "Guyana", code: "GY" },
+  { name: "Haiti", code: "HT" },
+  { name: "Heard Island and Mcdonald Islands", code: "HM" },
+  { name: "Holy See (Vatican City State)", code: "VA" },
+  { name: "Honduras", code: "HN" },
+  { name: "Hong Kong", code: "HK" },
+  { name: "Hungary", code: "HU" },
+  { name: "Iceland", code: "IS" },
+  { name: "India", code: "IN" },
+  { name: "Indonesia", code: "ID" },
+  { name: "Iran, Islamic Republic Of", code: "IR" },
+  { name: "Iraq", code: "IQ" },
+  { name: "Ireland", code: "IE" },
+  { name: "Isle of Man", code: "IM" },
+  { name: "Israel", code: "IL" },
+  { name: "Italy", code: "IT" },
+  { name: "Ivory Coast", code: "CI" },
+  { name: "Jamaica", code: "JM" },
+  { name: "Japan", code: "JP" },
+  { name: "Jersey", code: "JE" },
+  { name: "Jordan", code: "JO" },
+  { name: "Kazakhstan", code: "KZ" },
+  { name: "Kenya", code: "KE" },
+  { name: "Kiribati", code: "KI" },
+  { name: 'Korea, Democratic People"S Republic of', code: "KP" },
+  { name: "Korea, Republic of", code: "KR" },
+  { name: "Kuwait", code: "KW" },
+  { name: "Kyrgyzstan", code: "KG" },
+  { name: 'Lao People"S Democratic Republic', code: "LA" },
+  { name: "Laos", code: "LA" },
+  { name: "Latvia", code: "LV" },
+  { name: "Lebanon", code: "LB" },
+  { name: "Lesotho", code: "LS" },
+  { name: "Liberia", code: "LR" },
+  { name: "Libyan Arab Jamahiriya", code: "LY" },
+  { name: "Liechtenstein", code: "LI" },
+  { name: "Lithuania", code: "LT" },
+  { name: "Luxembourg", code: "LU" },
+  { name: "Macao", code: "MO" },
+  { name: "Macedonia, The Former Yugoslav Republic of", code: "MK" },
+  { name: "Madagascar", code: "MG" },
+  { name: "Malawi", code: "MW" },
+  { name: "Malaysia", code: "MY" },
+  { name: "Maldives", code: "MV" },
+  { name: "Mali", code: "ML" },
+  { name: "Malta", code: "MT" },
+  { name: "Marshall Islands", code: "MH" },
+  { name: "Martinique", code: "MQ" },
+  { name: "Mauritania", code: "MR" },
+  { name: "Mauritius", code: "MU" },
+  { name: "Mayotte", code: "YT" },
+  { name: "Mexico", code: "MX" },
+  { name: "Micronesia, Federated States of", code: "FM" },
+  { name: "Moldova, Republic of", code: "MD" },
+  { name: "Monaco", code: "MC" },
+  { name: "Mongolia", code: "MN" },
+  { name: "Montenegro", code: "ME" },
+  { name: "Montserrat", code: "MS" },
+  { name: "Morocco", code: "MA" },
+  { name: "Mozambique", code: "MZ" },
+  { name: "Myanmar", code: "MM" },
+  { name: "Namibia", code: "NA" },
+  { name: "Nauru", code: "NR" },
+  { name: "Nepal", code: "NP" },
+  { name: "Netherlands", code: "NL" },
+  { name: "Netherlands Antilles", code: "AN" },
+  { name: "New Caledonia", code: "NC" },
+  { name: "New Zealand", code: "NZ" },
+  { name: "Nicaragua", code: "NI" },
+  { name: "Niger", code: "NE" },
+  { name: "Nigeria", code: "NG" },
+  { name: "Niue", code: "NU" },
+  { name: "Norfolk Island", code: "NF" },
+  { name: "Northern Mariana Islands", code: "MP" },
+  { name: "Norway", code: "NO" },
+  { name: "Oman", code: "OM" },
+  { name: "Pakistan", code: "PK" },
+  { name: "Palau", code: "PW" },
+  { name: "Palestinian Territory, Occupied", code: "PS" },
+  { name: "Panama", code: "PA" },
+  { name: "Papua New Guinea", code: "PG" },
+  { name: "Paraguay", code: "PY" },
+  { name: "Peru", code: "PE" },
+  { name: "Philippines", code: "PH" },
+  { name: "Pitcairn", code: "PN" },
+  { name: "Poland", code: "PL" },
+  { name: "Portugal", code: "PT" },
+  { name: "Puerto Rico", code: "PR" },
+  { name: "Qatar", code: "QA" },
+  { name: "RWANDA", code: "RW" },
+  { name: "Reunion", code: "RE" },
+  { name: "Romania", code: "RO" },
+  { name: "Russian Federation", code: "RU" },
+  { name: "Saint Barthelemy", code: "BL" },
+  { name: "Saint Helena", code: "SH" },
+  { name: "Saint Kitts and Nevis", code: "KN" },
+  { name: "Saint Lucia", code: "LC" },
+  { name: "Saint Martin", code: "MF" },
+  { name: "Saint Pierre and Miquelon", code: "PM" },
+  { name: "Saint Vincent and the Grenadines", code: "VC" },
+  { name: "Samoa", code: "WS" },
+  { name: "San Marino", code: "SM" },
+  { name: "Sao Tome and Principe", code: "ST" },
+  { name: "Saudi Arabia", code: "SA" },
+  { name: "Senegal", code: "SN" },
+  { name: "Serbia", code: "RS" },
+  { name: "Seychelles", code: "SC" },
+  { name: "Sierra Leone", code: "SL" },
+  { name: "Singapore", code: "SG" },
+  { name: "Sint Maarten", code: "SX" },
+  { name: "Slovakia", code: "SK" },
+  { name: "Slovenia", code: "SI" },
+  { name: "Solomon Islands", code: "SB" },
+  { name: "Somalia", code: "SO" },
+  { name: "South Africa", code: "ZA" },
+  { name: "South Georgia and the South Sandwich Islands", code: "GS" },
+  { name: "South Sudan", code: "SS" },
+  { name: "Spain", code: "ES" },
+  { name: "Sri Lanka", code: "LK" },
+  { name: "Sudan", code: "SD" },
+  { name: "Suriname", code: "SR" },
+  { name: "Svalbard and Jan Mayen", code: "SJ" },
+  { name: "Swaziland", code: "SZ" },
+  { name: "Sweden", code: "SE" },
+  { name: "Switzerland", code: "CH" },
+  { name: "Syrian Arab Republic", code: "SY" },
+  { name: "Taiwan", code: "TW" },
+  { name: "Tajikistan", code: "TJ" },
+  { name: "Tanzania, United Republic of", code: "TZ" },
+  { name: "Thailand", code: "TH" },
+  { name: "Timor-Leste", code: "TL" },
+  { name: "Togo", code: "TG" },
+  { name: "Tokelau", code: "TK" },
+  { name: "Tonga", code: "TO" },
+  { name: "Trinidad and Tobago", code: "TT" },
+  { name: "Tunisia", code: "TN" },
+  { name: "Turkey", code: "TR" },
+  { name: "Turkmenistan", code: "TM" },
+  { name: "Turks and Caicos Islands", code: "TC" },
+  { name: "Tuvalu", code: "TV" },
+  { name: "Uganda", code: "UG" },
+  { name: "Ukraine", code: "UA" },
+  { name: "United Arab Emirates", code: "AE" },
+  { name: "United Kingdom", code: "GB" },
+  { name: "United States", code: "US" },
+  { name: "United States Minor Outlying Islands", code: "UM" },
+  { name: "Uruguay", code: "UY" },
+  { name: "Uzbekistan", code: "UZ" },
+  { name: "Vanuatu", code: "VU" },
+  { name: "Venezuela", code: "VE" },
+  { name: "Viet Nam", code: "VN" },
+  { name: "Vietnam", code: "VN" },
+  { name: "Virgin Islands, British", code: "VG" },
+  { name: "Virgin Islands, U.S.", code: "VI" },
+  { name: "Wallis and Futuna", code: "WF" },
+  { name: "Western Sahara", code: "EH" },
+  { name: "Yemen", code: "YE" },
+  { name: "Zambia", code: "ZM" },
+  { name: "Zimbabwe", code: "ZW" },
+  { name: "Åland Islands", code: "AX" },
+]

components/TempDesignSystem/Form/Country/country.module.css

@@ -0,0 +1,61 @@
+.container {
+  --select-border: 2px solid var(--some-black-color, #757575);
+  --select-radius: 0.4rem;
+  --select-width: min(28rem, 100%);
+}
+
+.comboBoxContainer {
+  background-color: var(--some-white-color, #fff);
+  display: grid;
+  grid-template-areas: "content";
+  width: var(--select-width);
+}
+
+.input {
+  background-color: var(--some-white-color, #fff);
+  border: var(--select-border);
+  border-radius: var(--select-radius);
+  grid-area: content;
+  height: 4rem;
+  padding: 0.8rem 1.6rem;
+  width: var(--select-width);
+}
+
+.input,
+.listBoxItem {
+  color: var(--some-black-color, #757575);
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  letter-spacing: -1.5%;
+  line-height: 2.4rem;
+}
+
+.button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  grid-area: content;
+  height: 100%;
+  justify-self: flex-end;
+  padding-left: 0;
+  padding-right: 1.6rem;
+}
+
+.popover {
+  background-color: var(--some-white-color, #fff);
+  border: var(--select-border);
+  border-radius: var(--select-radius);
+  overflow: auto;
+  padding: 1.6rem 1.6rem 1.6rem 0.8rem;
+  width: var(--select-width);
+}
+
+.listBoxItem {
+  padding: 0 0.8rem;
+}
+
+.listBoxItem[data-selected="true"],
+.listBoxItem[data-focused="true"] {
+  background-color: rgba(75, 75, 75, 0.2);
+}

components/TempDesignSystem/Form/Country/country.ts

@@ -0,0 +1,7 @@
+import type { RegisterOptions } from "react-hook-form"
+
+export type CountryProps = {
+  name?: string
+  placeholder?: string
+  registerOptions?: RegisterOptions
+}

components/TempDesignSystem/Form/Country/index.tsx

@@ -0,0 +1,109 @@
+"use client"
+import { useController, useFormContext } from "react-hook-form"
+import { useEffect, useRef, useState } from "react"
+
+import { _ } from "@/lib/translation"
+import { countries } from "./countries"
+
+import {
+  Button,
+  ComboBox,
+  FieldError,
+  Input,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  type Key,
+} from "react-aria-components"
+import { ErrorMessage } from "@hookform/error-message"
+import SelectChevron from "../SelectChevron"
+
+import styles from "./country.module.css"
+
+import type { CountryProps } from "./country"
+
+export default function CountrySelect({
+  name = "country",
+  placeholder = "Select a country",
+  registerOptions,
+}: CountryProps) {
+  const divRef = useRef<HTMLDivElement>(null)
+  const [divElement, setDivElement] = useState(divRef.current)
+  const { control, setValue } = useFormContext()
+  const { field } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })
+  const [selectedKey, setSelectedKey] = useState(() => {
+    if (field.value) {
+      const selected = countries.find(
+        (country) =>
+          country.name === field.value || country.code === field.value
+      )
+      if (selected) {
+        return selected.name
+      }
+    }
+    return ""
+  })
+
+  function handleChange(country: Key) {
+    setSelectedKey(String(country))
+    setValue(name, country)
+  }
+
+  useEffect(() => {
+    if (divRef.current) {
+      setDivElement(divRef.current)
+    }
+  }, [divRef.current])
+
+  return (
+    <div className={styles.container} ref={divRef}>
+      <ComboBox
+        className={styles.select}
+        isRequired={!!registerOptions?.required}
+        name={field.name}
+        onBlur={field.onBlur}
+        onSelectionChange={handleChange}
+        ref={field.ref}
+        selectedKey={selectedKey}
+      >
+        <div className={styles.comboBoxContainer}>
+          <Input className={styles.input} placeholder={_(placeholder)} />
+          <Button className={styles.button}>
+            <SelectChevron />
+          </Button>
+        </div>
+        <FieldError>
+          <ErrorMessage name={name} />
+        </FieldError>
+        <Popover
+          className={styles.popover}
+          placement="bottom"
+          shouldFlip={false}
+          /**
+           * react-aria uses portals to render Popover in body
+           * unless otherwise specified. We need it to be contained
+           * by this component to both access css variables assigned
+           * on the container as well as to not overflow it at any time.
+           */
+          UNSTABLE_portalContainer={divElement ?? undefined}
+        >
+          <ListBox>
+            {countries.map((country, idx) => (
+              <ListBoxItem
+                className={styles.listBoxItem}
+                id={country.name}
+                key={`${country.code}-${idx}`}
+              >
+                {country.name}
+              </ListBoxItem>
+            ))}
+          </ListBox>
+        </Popover>
+      </ComboBox>
+    </div>
+  )
+}

components/TempDesignSystem/Form/Date/Select/index.tsx

@@ -0,0 +1,82 @@
+"use client"
+import { useEffect, useRef, useState, type FocusEvent } from "react"
+
+import {
+  Button,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Select as ReactAriaSelect,
+  SelectValue,
+  type Key,
+} from "react-aria-components"
+import SelectChevron from "../../SelectChevron"
+
+import styles from "./select.module.css"
+
+import type { SelectProps } from "./select"
+
+export default function Select({
+  items,
+  label,
+  name,
+  onSelect,
+  placeholder,
+  value,
+}: SelectProps) {
+  const divRef = useRef<HTMLDivElement>(null)
+  const [divElement, setDivElement] = useState(divRef.current)
+
+  function handleOnSelect(key: Key) {
+    onSelect(key, name)
+  }
+
+  useEffect(() => {
+    if (divRef.current) {
+      setDivElement(divRef.current)
+    }
+  }, [divRef.current])
+
+  return (
+    <div className={styles.date} ref={divRef}>
+      <ReactAriaSelect
+        className={styles.select}
+        onSelectionChange={handleOnSelect}
+        placeholder={placeholder}
+        selectedKey={value as Key}
+      >
+        <Label className={styles.label}>{label}</Label>
+        <Button className={styles.input}>
+          <SelectValue />
+          <SelectChevron />
+        </Button>
+        <Popover
+          className={styles.popover}
+          placement="bottom"
+          shouldFlip={false}
+          /**
+           * react-aria uses portals to render Popover in body
+           * unless otherwise specified. We need it to be contained
+           * by this component to both access css variables assigned
+           * on the container as well as to not overflow it at any time.
+           */
+          UNSTABLE_portalContainer={divElement ?? undefined}
+        >
+          <ListBox className={styles.listBox}>
+            {items.map((item) => (
+              <ListBoxItem
+                key={item}
+                className={styles.listBoxItem}
+                id={item}
+                textValue={String(item)}
+              >
+                {item}
+              </ListBoxItem>
+            ))}
+          </ListBox>
+        </Popover>
+      </ReactAriaSelect>
+    </div>
+  )
+}

components/TempDesignSystem/Form/Date/Select/select.module.css

@@ -0,0 +1,54 @@
+.date {
+  position: relative;
+}
+
+.label {
+  font-family: var(--ff-fira-sans);
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+.select {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.input {
+  align-items: center;
+  background-color: var(--some-white-color, #fff);
+  border: var(--border);
+  border-radius: var(--radius);
+  color: var(--some-black-color, #757575);
+  display: grid;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  gap: 1rem;
+  grid-template-columns: 1fr auto;
+  height: 4rem;
+  letter-spacing: -1.5%;
+  line-height: 2.4rem;
+  padding: 0.8rem 1rem 0.8rem 1.6rem;
+}
+
+.popover {
+  background-color: var(--some-white-color, #fff);
+  border: var(--border);
+  border-radius: var(--radius);
+  overflow: auto;
+  width: 100%;
+}
+
+.listBox {
+  padding: 1.6rem 1.6rem 1.6rem 0.8rem;
+}
+
+.listBoxItem {
+  padding: 0 0.8rem;
+}
+
+.listBoxItem[data-selected="true"],
+.listBoxItem[data-focused="true"] {
+  background-color: rgba(75, 75, 75, 0.2);
+}

components/TempDesignSystem/Form/Date/Select/select.ts

@@ -0,0 +1,16 @@
+import type { Key } from "react-aria-components"
+
+export const enum DateName {
+  date = "date",
+  month = "month",
+  year = "year",
+}
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onSelect"> {
+  items: number[]
+  label: string
+  name: DateName
+  onSelect: (key: Key, name: DateName) => void
+  placeholder?: string
+}

components/TempDesignSystem/Form/Date/date.module.css

@@ -0,0 +1,30 @@
+.container {
+  --border: 2px solid var(--some-black-color, #757575);
+  --radius: 0.4rem;
+  --width: min(28rem, 100%);
+
+  --width-day: 6rem;
+  --width-month: 6rem;
+  --width-year: 8rem;
+
+  display: grid;
+  gap: 0.8rem;
+  grid-template-areas: "day month year";
+  grid-template-columns: min(--width-day, 1fr) min(--width-month, 1fr) min(
+      --width-year,
+      2fr
+    );
+  width: var(--width);
+}
+
+.day {
+  grid-area: day;
+}
+
+.month {
+  grid-area: month;
+}
+
+.year {
+  grid-area: year;
+}

components/TempDesignSystem/Form/Date/date.ts

@@ -0,0 +1,9 @@
+import type { Control, RegisterOptions } from "react-hook-form"
+import type { EditProfileSchema } from "@/components/MyProfile/Profile/Edit/Form/schema"
+
+export interface DateProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  control: Control<EditProfileSchema>
+  name: keyof EditProfileSchema
+  registerOptions: RegisterOptions<EditProfileSchema>
+}

components/TempDesignSystem/Form/Date/index.tsx

@@ -0,0 +1,120 @@
+"use client"
+import { parseDate } from "@internationalized/date"
+import { useController, useFormContext, useWatch } from "react-hook-form"
+
+import { _ } from "@/lib/translation"
+import { dt } from "@/lib/dt"
+import { rangeArray } from "@/utils/rangeArray"
+
+import {
+  DateInput,
+  DatePicker,
+  DateSegment,
+  Group,
+} from "react-aria-components"
+import Select from "./Select"
+
+import styles from "./date.module.css"
+
+import { DateName } from "./Select/select"
+import type { DateProps } from "./date"
+import type { Key } from "react-aria-components"
+
+/** TODO: Get selecting with Enter-key to work */
+export default function DateSelect({
+  control,
+  name,
+  registerOptions,
+}: DateProps) {
+  const d = useWatch({ name })
+  const { setValue } = useFormContext()
+  const { field } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })
+  const currentYear = new Date().getFullYear()
+  const months = rangeArray(1, 12)
+  const years = rangeArray(1900, currentYear).reverse()
+
+  function handleOnSelect(select: Key, selector: DateName) {
+    /**
+     * Months are 0 index based and therefore we
+     * must subtract by 1 to get the selected month
+     */
+    if (selector === DateName.month) {
+      select = Number(select) - 1
+    }
+    const newDate = dt(d).set(selector, Number(select))
+    setValue(name, newDate.format("YYYY-MM-DD"))
+  }
+
+  return (
+    <DatePicker
+      granularity="day"
+      isRequired={!!registerOptions.required}
+      name={name}
+      ref={field.ref}
+      value={parseDate(d)}
+    >
+      <Group>
+        <DateInput className={styles.container}>
+          {(segment) => {
+            switch (segment.type) {
+              case "day":
+                let days = []
+                if (segment.maxValue && segment.minValue) {
+                  days = rangeArray(segment.minValue, segment.maxValue)
+                } else {
+                  days = Array.from(Array(segment.maxValue).keys()).map(
+                    (i) => i + 1
+                  )
+                }
+                return (
+                  <DateSegment className={styles.day} segment={segment}>
+                    <Select
+                      items={days}
+                      label={_("Day")}
+                      name={DateName.date}
+                      onSelect={handleOnSelect}
+                      placeholder={_("DD")}
+                      value={segment.value}
+                    />
+                  </DateSegment>
+                )
+              case "month":
+                return (
+                  <DateSegment className={styles.month} segment={segment}>
+                    <Select
+                      items={months}
+                      label={_("Month")}
+                      name={DateName.month}
+                      onSelect={handleOnSelect}
+                      placeholder={_("MM")}
+                      value={segment.value}
+                    />
+                  </DateSegment>
+                )
+              case "year":
+                return (
+                  <DateSegment className={styles.year} segment={segment}>
+                    <Select
+                      items={years}
+                      label={_("Year")}
+                      name={DateName.year}
+                      onSelect={handleOnSelect}
+                      placeholder={_("YYYY")}
+                      value={segment.value}
+                    />
+                  </DateSegment>
+                )
+              default:
+                /** DateInput forces return of ReactElement */
+                return <></>
+            }
+          }}
+        </DateInput>
+      </Group>
+    </DatePicker>
+  )
+}

components/TempDesignSystem/Form/ErrorMessage/error.module.css

@@ -0,0 +1,8 @@
+.message {
+  color: var(--some-red-color, #d64242);
+  font-family: var(--ff-fira-sans);
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 2.2rem;
+  margin: 0.4rem 0 0;
+}

components/TempDesignSystem/Form/ErrorMessage/errorMessage.ts

@@ -0,0 +1,18 @@
+import { FieldValuesFromFieldErrors } from "@hookform/error-message"
+import type {
+  FieldErrors,
+  FieldName,
+  FieldValues,
+  Message,
+  MultipleFieldErrors,
+} from "react-hook-form"
+
+export type ErrorMessageProps<TFieldErrors> = {
+  errors?: FieldErrors<FieldValues>
+  name: FieldName<FieldValuesFromFieldErrors<TFieldErrors>>
+  message?: Message
+  render?: (data: {
+    message: Message
+    messages?: MultipleFieldErrors
+  }) => React.ReactNode
+}