init starter package

src/app/[countryCode]/(main)/account/@dashboard/addresses/page.tsx

@@ -0,0 +1,38 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import AddressBook from "@modules/account/components/address-book"
+
+import { getRegion } from "@lib/data/regions"
+import { retrieveCustomer } from "@lib/data/customer"
+
+export const metadata: Metadata = {
+  title: "Addresses",
+  description: "View your addresses",
+}
+
+export default async function Addresses(props: {
+  params: Promise<{ countryCode: string }>
+}) {
+  const params = await props.params
+  const { countryCode } = params
+  const customer = await retrieveCustomer()
+  const region = await getRegion(countryCode)
+
+  if (!customer || !region) {
+    notFound()
+  }
+
+  return (
+    <div className="w-full" data-testid="addresses-page-wrapper">
+      <div className="mb-8 flex flex-col gap-y-4">
+        <h1 className="text-2xl-semi">Shipping Addresses</h1>
+        <p className="text-base-regular">
+          View and update your shipping addresses, you can add as many as you
+          like. Saving your addresses will make them available during checkout.
+        </p>
+      </div>
+      <AddressBook customer={customer} region={region} />
+    </div>
+  )
+}

src/app/[countryCode]/(main)/account/@dashboard/loading.tsx

@@ -0,0 +1,9 @@
+import Spinner from "@modules/common/icons/spinner"
+
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center w-full h-full text-ui-fg-base">
+      <Spinner size={36} />
+    </div>
+  )
+}

src/app/[countryCode]/(main)/account/@dashboard/orders/details/[id]/page.tsx

@@ -0,0 +1,33 @@
+import { retrieveOrder } from "@lib/data/orders"
+import OrderDetailsTemplate from "@modules/order/templates/order-details-template"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+type Props = {
+  params: Promise<{ id: string }>
+}
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
+  const order = await retrieveOrder(params.id).catch(() => null)
+
+  if (!order) {
+    notFound()
+  }
+
+  return {
+    title: `Order #${order.display_id}`,
+    description: `View your order`,
+  }
+}
+
+export default async function OrderDetailPage(props: Props) {
+  const params = await props.params
+  const order = await retrieveOrder(params.id).catch(() => null)
+
+  if (!order) {
+    notFound()
+  }
+
+  return <OrderDetailsTemplate order={order} />
+}

src/app/[countryCode]/(main)/account/@dashboard/orders/page.tsx

@@ -0,0 +1,37 @@
+import { Metadata } from "next"
+
+import OrderOverview from "@modules/account/components/order-overview"
+import { notFound } from "next/navigation"
+import { listOrders } from "@lib/data/orders"
+import Divider from "@modules/common/components/divider"
+import TransferRequestForm from "@modules/account/components/transfer-request-form"
+
+export const metadata: Metadata = {
+  title: "Orders",
+  description: "Overview of your previous orders.",
+}
+
+export default async function Orders() {
+  const orders = await listOrders()
+
+  if (!orders) {
+    notFound()
+  }
+
+  return (
+    <div className="w-full" data-testid="orders-page-wrapper">
+      <div className="mb-8 flex flex-col gap-y-4">
+        <h1 className="text-2xl-semi">Orders</h1>
+        <p className="text-base-regular">
+          View your previous orders and their status. You can also create
+          returns or exchanges for your orders if needed.
+        </p>
+      </div>
+      <div>
+        <OrderOverview orders={orders} />
+        <Divider className="my-16" />
+        <TransferRequestForm />
+      </div>
+    </div>
+  )
+}

src/app/[countryCode]/(main)/account/@dashboard/page.tsx

@@ -0,0 +1,22 @@
+import { Metadata } from "next"
+
+import Overview from "@modules/account/components/overview"
+import { notFound } from "next/navigation"
+import { retrieveCustomer } from "@lib/data/customer"
+import { listOrders } from "@lib/data/orders"
+
+export const metadata: Metadata = {
+  title: "Account",
+  description: "Overview of your account activity.",
+}
+
+export default async function OverviewTemplate() {
+  const customer = await retrieveCustomer().catch(() => null)
+  const orders = (await listOrders().catch(() => null)) || null
+
+  if (!customer) {
+    notFound()
+  }
+
+  return <Overview customer={customer} orders={orders} />
+}

src/app/[countryCode]/(main)/account/@dashboard/profile/page.tsx

@@ -0,0 +1,54 @@
+import { Metadata } from "next"
+
+import ProfilePhone from "@modules/account//components/profile-phone"
+import ProfileBillingAddress from "@modules/account/components/profile-billing-address"
+import ProfileEmail from "@modules/account/components/profile-email"
+import ProfileName from "@modules/account/components/profile-name"
+import ProfilePassword from "@modules/account/components/profile-password"
+
+import { notFound } from "next/navigation"
+import { listRegions } from "@lib/data/regions"
+import { retrieveCustomer } from "@lib/data/customer"
+
+export const metadata: Metadata = {
+  title: "Profile",
+  description: "View and edit your Medusa Store profile.",
+}
+
+export default async function Profile() {
+  const customer = await retrieveCustomer()
+  const regions = await listRegions()
+
+  if (!customer || !regions) {
+    notFound()
+  }
+
+  return (
+    <div className="w-full" data-testid="profile-page-wrapper">
+      <div className="mb-8 flex flex-col gap-y-4">
+        <h1 className="text-2xl-semi">Profile</h1>
+        <p className="text-base-regular">
+          View and update your profile information, including your name, email,
+          and phone number. You can also update your billing address, or change
+          your password.
+        </p>
+      </div>
+      <div className="flex flex-col gap-y-8 w-full">
+        <ProfileName customer={customer} />
+        <Divider />
+        <ProfileEmail customer={customer} />
+        <Divider />
+        <ProfilePhone customer={customer} />
+        <Divider />
+        {/* <ProfilePassword customer={customer} />
+        <Divider /> */}
+        <ProfileBillingAddress customer={customer} regions={regions} />
+      </div>
+    </div>
+  )
+}
+
+const Divider = () => {
+  return <div className="w-full h-px bg-gray-200" />
+}
+;``

src/app/[countryCode]/(main)/account/@login/page.tsx

@@ -0,0 +1,12 @@
+import { Metadata } from "next"
+
+import LoginTemplate from "@modules/account/templates/login-template"
+
+export const metadata: Metadata = {
+  title: "Sign in",
+  description: "Sign in to your Medusa Store account.",
+}
+
+export default function Login() {
+  return <LoginTemplate />
+}

src/app/[countryCode]/(main)/account/layout.tsx

@@ -0,0 +1,20 @@
+import { retrieveCustomer } from "@lib/data/customer"
+import { Toaster } from "@medusajs/ui"
+import AccountLayout from "@modules/account/templates/account-layout"
+
+export default async function AccountPageLayout({
+  dashboard,
+  login,
+}: {
+  dashboard?: React.ReactNode
+  login?: React.ReactNode
+}) {
+  const customer = await retrieveCustomer().catch(() => null)
+
+  return (
+    <AccountLayout customer={customer}>
+      {customer ? dashboard : login}
+      <Toaster />
+    </AccountLayout>
+  )
+}

src/app/[countryCode]/(main)/account/loading.tsx

@@ -0,0 +1,9 @@
+import Spinner from "@modules/common/icons/spinner"
+
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center w-full h-full text-ui-fg-base">
+      <Spinner size={36} />
+    </div>
+  )
+}