merge-ppr-branch-into-narai-commerce

app/[locale]/about/layout.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <>{children}</>;
 }

app/[locale]/about/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getPage, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import AboutNaraiDetail from './about-narai-detail';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -43,9 +39,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
         <AboutNaraiDetail awards={awardsPage.body} />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/add-to-cart-ppr.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { PlusIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+import { addItem } from 'components/cart/actions';
+import LoadingDots from 'components/loading-dots';
+import { ProductVariant } from 'lib/shopify/types';
+import { useSearchParams } from 'next/navigation';
+import React from 'react';
+import { useFormState, useFormStatus } from 'react-dom';
+
+function SubmitButton({
+  availableForSale,
+  selectedVariantId
+}: {
+  availableForSale: boolean;
+  selectedVariantId: string | undefined;
+}) {
+  const { pending } = useFormStatus();
+  const buttonClasses =
+    'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
+  const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
+
+  if (!availableForSale) {
+    return (
+      <button aria-disabled className={clsx(buttonClasses, disabledClasses)}>
+        Out Of Stock
+      </button>
+    );
+  }
+
+  if (!selectedVariantId) {
+    return (
+      <button
+        aria-label="Please select an option"
+        aria-disabled
+        className={clsx(buttonClasses, disabledClasses)}
+      >
+        <div className="absolute left-0 ml-4">
+          <PlusIcon className="h-5" />
+        </div>
+        Add To Cart
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
+        if (pending) e.preventDefault();
+      }}
+      aria-label="Add to cart"
+      aria-disabled={pending}
+      className={clsx(buttonClasses, {
+        'hover:opacity-90': true,
+        disabledClasses: pending
+      })}
+    >
+      <div className="absolute left-0 ml-4">
+        {pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
+      </div>
+      Add To Cart
+    </button>
+  );
+}
+
+export function AddToCart({
+  variants,
+  availableForSale
+}: {
+  variants: ProductVariant[];
+  availableForSale: boolean;
+}) {
+  const [message, formAction] = useFormState(addItem, null);
+  const searchParams = useSearchParams();
+  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
+  const variant = variants.find((variant: ProductVariant) =>
+    variant.selectedOptions.every(
+      (option) => option.value === searchParams.get(option.name.toLowerCase())
+    )
+  );
+  const selectedVariantId = variant?.id || defaultVariantId;
+  const actionWithVariant = formAction.bind(null, selectedVariantId);
+
+  return (
+    <form action={actionWithVariant}>
+      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
+      <p aria-live="polite" className="sr-only" role="status">
+        {message}
+      </p>
+    </form>
+  );
+}

app/[locale]/bar/layout.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <>{children}</>;
 }

app/[locale]/bar/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import SagyobarDetail from './sagyobar-detail';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -41,9 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
         <SagyobarDetail />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/company/layout.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <>{children}</>;
 }

app/[locale]/company/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import CompanyDetail from './company-detail';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -41,9 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
         <CompanyDetail />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/concept/layout.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <>{children}</>;
 }

app/[locale]/concept/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import ConceptDetail from './concept-detail';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -41,9 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
         <ConceptDetail />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/disclosures/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import Disclosures from './disclosures';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -45,9 +41,7 @@ export default async function DisclosuresPage({
         <Disclosures />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/layout.tsx

@@ -1,106 +0,0 @@
-import { Lato, Noto_Serif_JP } from 'next/font/google';
-import localFont from 'next/font/local';
-import { ReactNode, Suspense } from 'react';
-
-import { SupportedLocale } from 'components/layout/navbar/language-control';
-import { NextIntlClientProvider } from 'next-intl';
-import { notFound } from 'next/navigation';
-import Analytics from './analytics';
-import './globals.css';
-
-const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
-const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
-  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
-  : 'http://localhost:3000';
-
-export const metadata = {
-  metadataBase: new URL(baseUrl),
-  title: {
-    default: SITE_NAME!,
-    template: `%s | ${SITE_NAME}`
-  },
-  robots: {
-    follow: true,
-    index: true
-  },
-  ...(TWITTER_CREATOR &&
-    TWITTER_SITE && {
-      twitter: {
-        card: 'summary_large_image',
-        creator: TWITTER_CREATOR,
-        site: TWITTER_SITE
-      }
-    })
-};
-
-// Font files can be colocated inside of `app`
-const cinzel = localFont({
-  src: '../fonts/Cinzel-Regular.ttf',
-  display: 'swap',
-  variable: '--font-cinzel'
-});
-
-const alpina = localFont({
-  src: [
-    {
-      path: '../fonts/GT-Alpina-Regular-Trial.woff2',
-      weight: '400',
-      style: 'normal'
-    },
-    {
-      path: '../fonts/GT-Alpina-Bold-Trial.woff2',
-      weight: '700',
-      style: 'normal'
-    }
-  ],
-  variable: '--font-alpina'
-});
-
-const lato = Lato({
-  subsets: ['latin'],
-  display: 'swap',
-  weight: ['300'],
-  variable: '--font-lato'
-});
-
-const noto = Noto_Serif_JP({
-  subsets: ['latin'],
-  display: 'swap',
-  weight: ['200', '400', '600'],
-  variable: '--font-noto'
-});
-
-export function generateStaticParams() {
-  return [{ locale: 'ja' }, { locale: 'en' }];
-}
-
-export default async function RootLayout({
-  children,
-  params
-}: {
-  children: ReactNode;
-  params: { locale?: SupportedLocale };
-}) {
-  let messages;
-  try {
-    messages = (await import(`../../messages/${params?.locale}.json`)).default;
-  } catch (error) {
-    notFound();
-  }
-
-  return (
-    <html
-      lang={params.locale}
-      className={`${cinzel.variable} ${alpina.variable} ${noto.variable} ${lato.variable}`}
-    >
-      <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
-        <NextIntlClientProvider locale={params?.locale} messages={messages}>
-          <Suspense>
-            <Analytics />
-            <main>{children}</main>
-          </Suspense>
-        </NextIntlClientProvider>
-      </body>
-    </html>
-  );
-}

app/[locale]/opengraph-image.tsx

@@ -1,7 +1,6 @@
 import OpengraphImage from 'components/opengraph-image';
 
 export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
 
 export default async function Image() {
   return await OpengraphImage();

app/[locale]/page.tsx

@@ -24,10 +24,6 @@ import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
 import Image from 'next/image';
-import { Suspense } from 'react';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
 
 const { SITE_NAME } = process.env;
 
@@ -152,9 +148,7 @@ export default async function HomePage({
         />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} promotedItem={promotedItem} />
-      </Suspense>
+      <Footer cart={cart} promotedItem={promotedItem} />
     </div>
   );
 }

app/[locale]/privacy/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import PrivacyPolicy from './privacy-policy';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -45,9 +41,7 @@ export default async function PrivacyPage({
         <PrivacyPolicy />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/product/[handle]/layout.tsx

@@ -4,10 +4,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Navbar from 'components/layout/navbar';
 import { getCart } from 'lib/shopify';
 import { cookies } from 'next/headers';
-import { ReactNode, Suspense } from 'react';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
+import { ReactNode } from 'react';
 
 const { SITE_NAME } = process.env;
 
@@ -37,9 +34,7 @@ export default async function ProductLayout({
     <div>
       <Navbar cart={cart} locale={locale} compact />
       {children}
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/product/[handle]/page.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { Suspense } from 'react';
 
 import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
@@ -17,9 +16,7 @@ import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image as MediaImage, Product } from 'lib/shopify/types';
 import Image from 'next/image';
 import Link from 'next/link';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
+import { Suspense } from 'react';
 
 export async function generateMetadata({
   params
@@ -136,13 +133,17 @@ export default async function ProductPage({
                 </div>
 
                 <div className="max-w-sm">
-                  <VariantSelector options={product.options} variants={product.variants} />
+                  <Suspense>
+                    <VariantSelector options={product.options} variants={product.variants} />
+                  </Suspense>
 
-                  <AddManyToCart
-                    quantity={1}
-                    variants={product.variants}
-                    availableForSale={product.availableForSale}
-                  />
+                  <Suspense>
+                    <AddManyToCart
+                      quantity={1}
+                      variants={product.variants}
+                      availableForSale={product.availableForSale}
+                    />
+                  </Suspense>
                 </div>
 
                 <div className="border-b border-white/20 pb-6"></div>
@@ -165,30 +166,32 @@ export default async function ProductPage({
           )}
 
           <div className="grid grid-cols-1 gap-4 px-4 md:grid-cols-2 md:px-0">
-            {!!otherImages &&
-              otherImages?.length > 0 &&
-              otherImages.map((image, index) => {
-                const isOdd = otherImages.length % 2 != 0;
-                const isLast = index === otherImages.length - 1;
-                const isOddAndLast = isOdd && isLast;
-                return (
-                  <div
-                    key={image.url}
-                    className={clsx(
-                      isOddAndLast ? 'col-span-1 md:col-span-2' : 'col-span-1 aspect-square',
-                      'relative h-full w-full bg-gray-900/10'
-                    )}
-                  >
-                    <Image
-                      src={image.url}
-                      alt={image.altText}
-                      height={image.height}
-                      width={image.width}
-                      className="h-full w-full object-cover"
-                    />
-                  </div>
-                );
-              })}
+            <Suspense fallback={null}>
+              {!!otherImages &&
+                otherImages?.length > 0 &&
+                otherImages.map((image, index) => {
+                  const isOdd = otherImages.length % 2 != 0;
+                  const isLast = index === otherImages.length - 1;
+                  const isOddAndLast = isOdd && isLast;
+                  return (
+                    <div
+                      key={image.url}
+                      className={clsx(
+                        isOddAndLast ? 'col-span-1 md:col-span-2' : 'col-span-1 aspect-square',
+                        'relative h-full w-full bg-gray-900/10'
+                      )}
+                    >
+                      <Image
+                        src={image.url}
+                        alt={image.altText}
+                        height={image.height}
+                        width={image.width}
+                        className="h-full w-full object-cover"
+                      />
+                    </div>
+                  );
+                })}
+            </Suspense>
           </div>
 
           {!!product?.lower?.value && (
@@ -197,9 +200,7 @@ export default async function ProductPage({
             </div>
           )}
 
-          <Suspense>
-            <RelatedProducts id={product.id} />
-          </Suspense>
+          <RelatedProducts id={product.id} />
         </div>
       </div>
     </>

app/[locale]/products/page.tsx

@@ -6,10 +6,6 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
 
 const { SITE_NAME } = process.env;
 
@@ -45,9 +41,7 @@ export default async function ProductPage({
         <ProductGrid lang={locale} />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/shop-list/layout.tsx

@@ -1,7 +1,3 @@
-import { Suspense } from 'react';
-
-export const revalidate = 300; // 5 minutes in seconds
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <>{children}</>;
 }

app/[locale]/shop-list/opengraph-image.tsx

@@ -1,9 +1,6 @@
 import OpengraphImage from 'components/opengraph-image';
 import { getPage } from 'lib/shopify';
 
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
-
 export default async function Image({ params }: { params: { page: string } }) {
   const page = await getPage({ handle: params.page });
   const title = page.seo?.title || page.title;

app/[locale]/shop-list/page.tsx

@@ -8,11 +8,8 @@ import { getCart, getPage, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
-import { Suspense } from 'react';
 import ShopsNav from './shops-nav';
 
-export const revalidate = 300; // 5 minutes in seconds
-
 export async function generateMetadata({
   params
 }: {
@@ -61,9 +58,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
         <Prose html={page.body as string} />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/stories/[handle]/layout.tsx

@@ -5,10 +5,7 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { ReactNode, Suspense } from 'react';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
+import { ReactNode } from 'react';
 
 const { SITE_NAME } = process.env;
 
@@ -43,9 +40,7 @@ export default async function BlogLayout({
     <div>
       <Navbar cart={cart} locale={locale} compact promotedItem={promotedItem} />
       {children}
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/stories/[handle]/page.tsx

@@ -8,9 +8,6 @@ import { getBlogArticle } from 'lib/shopify';
 import { BlogArticle } from 'lib/shopify/types';
 import Image from 'next/image';
 
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
-
 export async function generateMetadata({
   params
 }: {

app/[locale]/stories/page.tsx

@@ -7,10 +7,6 @@ import { BLOG_HANDLE } from 'lib/constants';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
 
 const { SITE_NAME } = process.env;
 
@@ -46,9 +42,7 @@ export default async function StoriesPage({
         <StoriesDetail handle={BLOG_HANDLE} locale={locale} />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }

app/[locale]/terms/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import TermsOfUse from './terms-of-use';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -45,9 +41,7 @@ export default async function TermsPage({
         <TermsOfUse />
       </div>
 
-      <Suspense>
-        <Footer cart={cart} />
-      </Suspense>
+      <Footer cart={cart} />
     </div>
   );
 }