Merge pull request #11 from zenzen-sol/sol/preview

fix: Localization and layout issues

README.md

@@ -1,4 +1,8 @@
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=COMPANY_NAME,SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STORE_DOMAIN,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)
+## IMPORTANT NOTES!!
+
+- Vercel's production instance is currently running on the `sol/narai` branch. For the latest stable version, please refer to that branch.
+- If you're making changes to the site, please make sure to create a new branch and submit a PR to the `sol/preview` branch. This is to ensure that the production instance is always stable.
+- The `sol/preview` branch should be reviewed and approved by the suginomori brewery team before merging to `sol/narai` and deploying to production.
 
 # Next.js Commerce
 

app/[locale]/about/page.tsx

@@ -9,6 +9,8 @@ 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 = {

app/[locale]/bar/sagyobar-detail.tsx

@@ -26,7 +26,7 @@ export default function SagyobarDetail() {
 
       <div
         className={clsx(
-          'font-multilingual mx-auto mx-auto flex w-full max-w-screen-2xl flex-col space-y-12 py-12 text-left font-extralight md:flex-row md:space-x-6 md:space-y-0 md:py-24 md:pb-24'
+          'font-multilingual mx-auto flex w-full max-w-screen-2xl flex-col space-y-12 py-12 text-left font-extralight md:flex-row md:space-x-6 md:space-y-0 md:py-24 md:pb-24'
         )}
       >
         <div className="flex flex-col space-y-4 md:w-1/2">

app/[locale]/layout.tsx

@@ -71,7 +71,7 @@ const noto = Noto_Serif_JP({
 });
 
 export function generateStaticParams() {
-  return [{ locale: 'en' }, { locale: 'ja' }];
+  return [{ locale: 'ja' }, { locale: 'en' }];
 }
 
 export default async function RootLayout({

app/[locale]/opengraph-image.tsx

@@ -1,6 +1,7 @@
 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

@@ -27,6 +27,8 @@ 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;
 
 export const metadata = {

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

@@ -7,6 +7,8 @@ import { cookies } from 'next/headers';
 import { ReactNode, Suspense } from 'react';
 
 export const runtime = 'edge';
+export const revalidate = 300; // 5 minutes in seconds
+
 const { SITE_NAME } = process.env;
 
 export const metadata = {

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

@@ -2,6 +2,7 @@ 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';
 import { AddManyToCart } from 'components/cart/add-many-to-cart';
 import { GridTileImage } from 'components/grid/tile';
@@ -18,7 +19,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
+export const revalidate = 300; // 5 minutes in seconds
 
 export async function generateMetadata({
   params
@@ -152,18 +153,18 @@ export default async function ProductPage({
           </div>
 
           {!!product?.notes && (
-            <div className="bg-base p-12 text-dark">
+            <div className="bg-base py-4 text-dark md:p-12">
               <ProductTastingNotes product={product} />
             </div>
           )}
 
           {!!product?.galleryIntro?.value && (
-            <div className="font-multilingual flex w-full flex-row justify-end whitespace-pre-line">
+            <div className="font-multilingual flex w-full flex-row justify-end whitespace-pre-line px-4 md:px-0">
               <div className="md:w-1/2">{product.galleryIntro.value}</div>
             </div>
           )}
 
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <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) => {
@@ -174,7 +175,7 @@ export default async function ProductPage({
                   <div
                     key={image.url}
                     className={clsx(
-                      isOddAndLast ? 'col-span-2' : 'col-span-1 aspect-square',
+                      isOddAndLast ? 'col-span-1 md:col-span-2' : 'col-span-1 aspect-square',
                       'relative h-full w-full bg-gray-900/10'
                     )}
                   >
@@ -191,7 +192,7 @@ export default async function ProductPage({
           </div>
 
           {!!product?.lower?.value && (
-            <div className="font-multilingual flex w-full flex-row justify-end whitespace-pre-line">
+            <div className="font-multilingual flex w-full flex-row justify-end whitespace-pre-line px-4 md:px-0">
               <div className="md:w-1/2">{product.lower.value}</div>
             </div>
           )}
@@ -211,7 +212,12 @@ async function RelatedProducts({ id }: { id: string }) {
   if (!relatedProducts.length) return null;
 
   return (
-    <div className="border-t border-white/20 px-6 py-12 md:py-24">
+    <div className="relative border-t border-white/20 px-6 py-12 md:py-24">
+      {relatedProducts.length > 1 && (
+        <div className="absolute right-0 top-0 h-full translate-y-1/2">
+          <ChevronDoubleRightIcon className="h-6 w-6 animate-pulse text-white" />
+        </div>
+      )}
       <h2 className="pb-8 font-japan text-[20px]">other products</h2>
       <ul className="flex w-full gap-12 overflow-x-auto pt-1">
         {relatedProducts.map((product) => (

app/[locale]/products/page.tsx

@@ -9,7 +9,7 @@ import { cookies } from 'next/headers';
 import { Suspense } from 'react';
 
 export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
+export const revalidate = 300; // 5 minutes in seconds
 
 const { SITE_NAME } = process.env;
 

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

@@ -2,6 +2,7 @@ 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 });

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

@@ -12,8 +12,7 @@ import { Suspense } from 'react';
 import ShopsNav from './shops-nav';
 
 export const runtime = 'edge';
-
+export const revalidate = 300; // 5 minutes in seconds
-export const revalidate = 43200; // 12 hours in seconds
 
 export async function generateMetadata({
   params

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

@@ -8,6 +8,8 @@ import { cookies } from 'next/headers';
 import { ReactNode, Suspense } from 'react';
 
 export const runtime = 'edge';
+export const revalidate = 300; // 5 minutes in seconds
+
 const { SITE_NAME } = process.env;
 
 export const metadata = {

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

@@ -7,7 +7,9 @@ import { BLOG_HANDLE, HIDDEN_ARTICLE_TAG } from 'lib/constants';
 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

@@ -10,6 +10,8 @@ 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;
 
 export const metadata = {

app/[locale]/terms/page.tsx

@@ -9,6 +9,8 @@ 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 = {

components/cart/add-many-to-cart.tsx

@@ -41,7 +41,7 @@ export function AddManyToCart({
   return (
     <div className="flex flex-col space-y-2">
       <div className="font-multilingual flex flex-row items-center space-x-2 border border-white/50">
-        <div className="w-[80px] px-3">{t('cart.quantity-label')}</div>
+        <div className="w-[120px] px-3">{t('cart.quantity-label')}</div>
         <input
           value={currentQuantity}
           onChange={(e) => setCurrentQuantity(Number(e.target.value))}

components/cart/index.tsx

@@ -14,7 +14,7 @@ export default async function Cart({ locale }: { locale?: SupportedLocale }) {
 
   const promotedItem: Product | undefined = await getProduct({
     handle: 'gift-bag-and-postcard-set',
-    language: locale?.toUpperCase() || 'EN'
+    language: locale?.toUpperCase() || 'JA'
   });
 
   return <CartModal cart={cart} promotedItem={promotedItem} />;

components/layout/navbar/language-control.tsx

@@ -19,7 +19,7 @@ export const LanguageControl = ({ lang }: { lang?: SupportedLocale }) => {
 
   const basePathName = () => {
     const unjoined = pathName.split('/');
-    const unjoinedWithoutLocale = removeItem(unjoined, 'ja');
+    const unjoinedWithoutLocale = removeItem(unjoined, 'en');
     return unjoinedWithoutLocale.join('/') || '/';
   };
 

components/prose.tsx

@@ -10,8 +10,9 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
   return (
     <div
       className={clsx(
-        'prose text-lg leading-7',
+        'prose',
         'font-multilingual text-[15px] font-extralight text-current',
+        'prose-p:whitespace-pre-line prose-p:leading-normal',
         'prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-current',
         'prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg',
         'prose-a:text-white/80 prose-a:underline hover:prose-a:text-current',

deprecated/[page]/opengraph-image.tsx

@@ -2,6 +2,7 @@ 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 });

deprecated/[page]/page.tsx

@@ -5,8 +5,7 @@ import Prose from 'components/prose';
 import { getPage } from 'lib/shopify';
 import { notFound } from 'next/navigation';
 
-// export const runtime = 'edge';
+export const runtime = 'edge';
-
 export const revalidate = 43200; // 12 hours in seconds
 
 export async function generateMetadata({

deprecated/search/[collection]/opengraph-image.tsx

@@ -2,6 +2,7 @@ import OpengraphImage from 'components/opengraph-image';
 import { getCollection } from 'lib/shopify';
 
 export const runtime = 'edge';
+export const revalidate = 300; // 5 minutes in seconds
 
 export default async function Image({ params }: { params: { collection: string } }) {
   const collection = await getCollection({ handle: params.collection });

deprecated/search/[collection]/page.tsx

@@ -7,6 +7,7 @@ import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';
 
 export const runtime = 'edge';
+export const revalidate = 300; // 5 minutes in seconds
 
 export async function generateMetadata({
   params

deprecated/search/page.tsx

@@ -4,6 +4,7 @@ import { defaultSort, sorting } from 'lib/constants';
 import { getProducts } from 'lib/shopify';
 
 export const runtime = 'edge';
+export const revalidate = 300; // 5 minutes in seconds
 
 export const metadata = {
   title: 'Search',

messages/en.json

@@ -551,11 +551,11 @@
         },
         "003": {
           "label": "Date of attendance of the Liquor Sales Management Training",
-          "value": "September 11, 2020"
+          "value": "September 6, 2023"
         },
         "004": {
           "label": "Attendance Deadline of the next Liquor Sales Management Training",
-          "value": "August 31, 2023"
+          "value": "September 5, 2026"
         },
         "005": {
           "label": "Implementing Agency of the Liquor Sales Management Training",

messages/index.ts

@@ -4,8 +4,8 @@ import 'server-only';
 // We enumerate all dictionaries here for better linting and typescript support
 // We also get the default import for cleaner types
 const dictionaries = {
-  en: () => import('./en.json').then((module) => module.default),
+  ja: () => import('./ja.json').then((module) => module.default),
-  ja: () => import('./ja.json').then((module) => module.default)
+  en: () => import('./en.json').then((module) => module.default)
 };
 
 export const getDictionary = async (locale: SupportedLocale) =>

messages/ja.json

@@ -549,11 +549,11 @@
         },
         "003": {
           "label": "酒類販売管理研修受講年月日",
-          "value": "令和2年9月11日"
+          "value": "令和5年9月6日"
         },
         "004": {
           "label": "次回研修の受講期限",
-          "value": "令和5年8月31日"
+          "value": "令和8年9月5日"
         },
         "005": {
           "label": "研修実施団体名",

middleware.ts

@@ -2,10 +2,10 @@ import createMiddleware from 'next-intl/middleware';
 
 export default createMiddleware({
   // A list of all locales that are supported
-  locales: ['en', 'ja'],
+  locales: ['ja', 'en'],
 
   // If this locale is matched, pathnames work without a prefix (e.g. `/about`)
-  defaultLocale: 'en'
+  defaultLocale: 'ja'
 });
 
 export const config = {