Skip to content

Commit

Permalink
Merge pull request #22 from tinloof/tin-2231-country-selector
Browse files Browse the repository at this point in the history
[WIP] Implement country selector
  • Loading branch information
haninekkoub authored Oct 18, 2024
2 parents b95a56c + 4b0fb18 commit 8a79e89
Show file tree
Hide file tree
Showing 71 changed files with 417 additions and 167 deletions.
5 changes: 3 additions & 2 deletions storefront/actions/medusa/order.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,9 @@ export async function placeOrder() {

if (cartRes?.type === "order") {
removeCartId();
// TODO: make this us the country code
redirect(`/order/confirmed/${cartRes.order.id}`);
const countryCode =
cartRes.order.shipping_address?.country_code?.toLowerCase();
redirect(`/${countryCode}/order/confirmed/${cartRes.order.id}`);
}

return cartRes.cart;
Expand Down
44 changes: 0 additions & 44 deletions storefront/app/(country-code)/layout.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import type {TEXT_PAGE_QUERYResult} from "@/types/sanity.generated";
import type {BlocksBody} from "@/utils/content/toc";

import LocalizedLink from "@/components/shared/localized-link";
import TocSelect from "@/components/shared/toc-select";
import Body from "@/components/shared/typography/body";
import getBlocksToc from "@/utils/content/toc";
import {getPtComponentId} from "@/utils/ids";
import {toPlainText} from "@portabletext/react";
import Link from "next/link";
import React from "react";

export default function TableOfContents({
body,
Expand All @@ -24,7 +25,7 @@ export default function TableOfContents({
index,
) =>
!item.isSub && (
<Link
<LocalizedLink
href={`#${getPtComponentId(item.block as any)}`}
key={index}
scroll
Expand All @@ -36,7 +37,7 @@ export default function TableOfContents({
>
{toPlainText(item.block)}
</Body>
</Link>
</LocalizedLink>
),
)}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {notFound} from "next/navigation";

import TextPage from "./text-page.template";

export type DynamicRouteProps = PageProps<"...path">;
export type DynamicRouteProps = PageProps<"...path" | "countryCode">;

export async function generateMetadata(
{params}: DynamicRouteProps,
Expand All @@ -34,14 +34,14 @@ export async function generateMetadata(

export default async function DynamicRoute({params}: DynamicRouteProps) {
const initialData = await loadPageByPathname({params});

if (!initialData) return notFound();

switch (initialData._type) {
case "modular.page":
case "home":
return (
<SectionsRenderer
countryCode={params.countryCode}
{...{fieldName: "body", sections: initialData.sections || []}}
/>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export default function AddToCart({
variant: "PDP" | "sticky";
}) {
const {activeVariant} = useProductVariants();

return (
<AddToCartButton
className={cx("", {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import type {StoreProduct} from "@medusajs/types";

import LocalizedLink from "@/components/shared/localized-link";
import Body from "@/components/shared/typography/body";
import Link from "next/link";

export default function BreadCrumbs({
collection,
title,
}: Pick<StoreProduct, "collection" | "title">) {
return (
<Body className="-mb-1" desktopSize="base" font="sans" mobileSize="sm">
<Link href="/">Home</Link>{" "}
<LocalizedLink href="/">Home</LocalizedLink>{" "}
{collection && (
<>
{" / "}
<Link href={`/collections/${collection.handle}`}>
<LocalizedLink href={`/collections/${collection.handle}`}>
{collection.title}
</Link>{" "}
</LocalizedLink>{" "}
</>
)}
{" / "}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,10 @@ import {ProductImagesCarousel} from "./_parts/image-carousel";
import ProductInformation from "./_parts/product-information";
import StickyAtc from "./_parts/sticky-atc";

type ProductPageProps = PageProps<"handle">;
type ProductPageProps = PageProps<"countryCode" | "handle">;

export default async function ProductPage({params}: ProductPageProps) {
const region = await getRegion(
// TODO: Make this come from the params
process.env.NEXT_PUBLIC_MEDUSA_DEFAULT_COUNTRY_CODE!,
);

const region = await getRegion(params.countryCode);
if (!region) {
console.log("No region found");
return notFound();
Expand All @@ -43,7 +39,11 @@ export default async function ProductPage({params}: ProductPageProps) {
</section>

{content?.sections && (
<SectionsRenderer fieldName="body" sections={content.sections} />
<SectionsRenderer
countryCode={params.countryCode}
fieldName="body"
sections={content.sections}
/>
)}
<StickyAtc {...product} region_id={region.id} />
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ import Heading from "@/components/shared/typography/heading";
import {Suspense} from "react";

type CollectionPageProps = PageProps<
never,
"countryCode",
"category" | "collection" | "page" | "sort"
>;

export default async function CollectionPage({
params,
searchParams,
}: CollectionPageProps) {
return (
Expand All @@ -25,7 +26,10 @@ export default async function CollectionPage({
<div className="flex flex-col gap-6">
<Refinement />
<Suspense fallback={<ProductsSkeleton />}>
<PaginatedProducts searchParams={searchParams} />
<PaginatedProducts
countryCode={params.countryCode}
searchParams={searchParams}
/>
</Suspense>
</div>
</section>
Expand Down
52 changes: 52 additions & 0 deletions storefront/app/[countryCode]/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import type {PageProps} from "@/types";
import type {PropsWithChildren} from "react";

import {CountryCodeProvider} from "@/components/context/country-code-context";
import {ExitPreview} from "@/components/exit-preview";
import {TailwindIndicator} from "@/components/tailwind-indicator";
import cache from "next/cache";
import {draftMode} from "next/headers";
import VisualEditing from "next-sanity/visual-editing/client-component";

type LayoutProps = PropsWithChildren<
Omit<PageProps<"countryCode">, "searchParams">
>;

export default function Layout({children, params}: LayoutProps) {
const shouldEnableDraftModeToggle =
process.env.NODE_ENV === "development" && draftMode().isEnabled;
return (
<CountryCodeProvider countryCode={params.countryCode}>
<body className="relative flex min-h-screen min-w-min-screen flex-col overflow-x-clip">
{children}
{draftMode().isEnabled && (
<VisualEditing
refresh={async (payload) => {
"use server";
if (!draftMode().isEnabled) {
console.debug(
"Skipped manual refresh because draft mode is not enabled",
);
return;
}
if (payload.source === "mutation") {
if (payload.document.slug?.current) {
const tag = `${payload.document._type}:${payload.document.slug.current}`;
console.log("Revalidate slug", tag);
await cache.revalidateTag(tag);
}
console.log("Revalidate tag", payload.document._type);
return cache.revalidateTag(payload.document._type);
}
await cache.revalidatePath("/", "layout");
}}
/>
)}
<TailwindIndicator />
{shouldEnableDraftModeToggle && (
<ExitPreview enable={draftMode().isEnabled} />
)}
</body>
</CountryCodeProvider>
);
}
32 changes: 32 additions & 0 deletions storefront/components/context/country-code-context.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
"use client";
import type {PropsWithChildren} from "react";

import {createContext, useContext} from "react";

type CountryCodeContextType = {
countryCode: string;
};

type CountryCodeProviderProps = PropsWithChildren<CountryCodeContextType>;

export const CountryCodeContext = createContext<
CountryCodeContextType | undefined
>(undefined);

export function CountryCodeProvider({
children,
countryCode,
}: CountryCodeProviderProps) {
return (
<CountryCodeContext.Provider value={{countryCode}}>
{children}
</CountryCodeContext.Provider>
);
}
export function useCountryCode() {
const context = useContext(CountryCodeContext);
if (context === undefined) {
throw new Error("useCountryCode must be used within a CountryCodeProvider");
}
return context.countryCode;
}
10 changes: 5 additions & 5 deletions storefront/components/global/footer/parts/bottom-links.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type {Footer} from "@/types/sanity.generated";

import LocalizedLink from "@/components/shared/localized-link";
import Label from "@/components/shared/typography/label";
import Link from "next/link";
import React from "react";

export default function BottomLinks({
Expand All @@ -19,15 +19,15 @@ export default function BottomLinks({
{bottomLinks?.map((link) => {
if (!link.link) return null;
return (
<Link
<LocalizedLink
className="whitespace-nowrap"
href={link.link}
key={link._key}
>
<Label desktopSize="xs" font="display" mobileSize="2xs">
{link.label}
</Label>
</Link>
</LocalizedLink>
);
})}
</div>
Expand All @@ -36,11 +36,11 @@ export default function BottomLinks({
{socialLinks?.map((link) => {
if (!link.link) return null;
return (
<Link href={link.link} key={link._key}>
<LocalizedLink href={link.link} key={link._key}>
<Label desktopSize="xs" font="display" mobileSize="2xs">
{link.label}
</Label>
</Link>
</LocalizedLink>
);
})}
</div>
Expand Down
6 changes: 3 additions & 3 deletions storefront/components/global/footer/parts/top-links.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type {Footer} from "@/types/sanity.generated";

import LocalizedLink from "@/components/shared/localized-link";
import {RichText} from "@/components/shared/rich-text";
import Body from "@/components/shared/typography/body";
import Link from "next/link";

export default function TopLinks({information, linkList}: NonNullable<Footer>) {
return (
Expand All @@ -26,11 +26,11 @@ export default function TopLinks({information, linkList}: NonNullable<Footer>) {
{list.links?.map((link) => {
if (!link.link) return null;
return (
<Link href={link.link} key={link._key}>
<LocalizedLink href={link.link} key={link._key}>
<Body desktopSize="base" font="sans" mobileSize="sm">
{link.label}
</Body>
</Link>
</LocalizedLink>
);
})}
</div>
Expand Down
4 changes: 2 additions & 2 deletions storefront/components/global/header/cart/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import type {Header} from "@/types/sanity.generated";

import Icon from "@/components/shared/icon";
import {CloseDialog, Dialog, SideDialog} from "@/components/shared/side-dialog";
import Body from "@/components/shared/typography/body";
import {fetchCart} from "@/data/medusa/cart";
import {Suspense} from "react";

import CartAddons from "./cart-addons";
import {CartProvider} from "./cart-context";
import {CloseDialog, Dialog, SideDialog} from "./cart-dialog";
import CartFooter from "./cart-footer";
import CartHeading from "./cart-heading";
import LineItem from "./line-item";
Expand All @@ -26,7 +26,7 @@ export default async function Cart({cartAddons}: Props) {
<CartProvider cart={cart}>
<Dialog>
<OpenCart />
<SideDialog align="right">
<SideDialog>
<div className="relative flex h-full w-full flex-col border-l border-accent bg-background">
<CartHeading />
<div className="h-px w-full bg-accent" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
"use client";
import Icon from "@/components/shared/icon";
import {OpenDialog} from "@/components/shared/side-dialog";
import Body from "@/components/shared/typography/body";

import {useCart} from "./cart-context";
import {OpenDialog} from "./cart-dialog";

export default function OpenCart() {
const {cart} = useCart();
Expand Down
Loading

0 comments on commit 8a79e89

Please sign in to comment.