From 049d903a5bf60d34981c85a0b7883e912a98045d Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Sat, 29 Jul 2023 00:19:13 +0800
Subject: [PATCH 1/5] Removes unnecessary `useEffect`'s on search sorts (#1124)

---
 components/layout/search/filter/item.tsx | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/components/layout/search/filter/item.tsx b/components/layout/search/filter/item.tsx
index d9298582c..38777ea48 100644
--- a/components/layout/search/filter/item.tsx
+++ b/components/layout/search/filter/item.tsx
@@ -5,22 +5,17 @@ import { SortFilterItem } from 'lib/constants';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
 import type { ListItem, PathFilterItem } from '.';
 
 function PathFilterItem({ item }: { item: PathFilterItem }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const [active, setActive] = useState(pathname === item.path);
+  const active = pathname === item.path;
   const newParams = new URLSearchParams(searchParams.toString());
   const DynamicTag = active ? 'p' : Link;
 
   newParams.delete('q');
 
-  useEffect(() => {
-    setActive(pathname === item.path);
-  }, [pathname, item.path]);
-
   return (
     <li className="mt-2 flex text-black dark:text-white" key={item.title}>
       <DynamicTag
@@ -41,7 +36,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
 function SortFilterItem({ item }: { item: SortFilterItem }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const [active, setActive] = useState(searchParams.get('sort') === item.slug);
+  const active = searchParams.get('sort') === item.slug;
   const q = searchParams.get('q');
   const href = createUrl(
     pathname,
@@ -52,10 +47,6 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
   );
   const DynamicTag = active ? 'p' : Link;
 
-  useEffect(() => {
-    setActive(searchParams.get('sort') === item.slug);
-  }, [searchParams, item.slug]);
-
   return (
     <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
       <DynamicTag

From cccf6afdeb7ad0506184a542bcbf9ce0b5705bd7 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Fri, 28 Jul 2023 16:57:45 -0500
Subject: [PATCH 2/5] Adds anchor for v1 note (#1125)

* Adds anchor for v1 note

* Adds period

---------

Co-authored-by: Lee Robinson <lrobinson2011@gmail.com>
---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c3fa3f6b5..9f1a06883 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,9 @@ A Next.js 13 and App Router-ready ecommerce template featuring:
 - Checkout and payments with Shopify
 - Automatic light/dark mode based on system settings
 
-> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1)
+<h3 id="v1-note"></h3>
+
+> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1).
 
 ## Providers
 

From 1449489c3c8eb66104f7bb699cbb2f4339708589 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Fri, 28 Jul 2023 16:59:27 -0500
Subject: [PATCH 3/5] Fixes copyright spacing on medium screens (#1122)

Co-authored-by: Lee Robinson <lrobinson2011@gmail.com>
---
 components/layout/footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 989f9992c..2f41606e0 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -50,7 +50,7 @@ export default async function Footer() {
         </div>
       </div>
       <div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
-        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 md:flex-row md:gap-0">
+        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 xl:px-0">
           <p>
             &copy; {copyrightDate} {copyrightName}
             {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.

From cd8f4c6b4c17fe7488cc8f8c3df6ce265fa9885c Mon Sep 17 00:00:00 2001
From: Lee Robinson <lrobinson2011@gmail.com>
Date: Fri, 28 Jul 2023 17:00:48 -0500
Subject: [PATCH 4/5] Fix hydration error (#1117)

---------

Co-authored-by: Michael Novotny <manovotny@gmail.com>
---
 components/cart/add-to-cart.tsx         |  21 +++--
 components/product/variant-selector.tsx | 113 +++++++++---------------
 2 files changed, 56 insertions(+), 78 deletions(-)

diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
index 15582acc3..d737b6678 100644
--- a/components/cart/add-to-cart.tsx
+++ b/components/cart/add-to-cart.tsx
@@ -15,7 +15,7 @@ export function AddToCart({
   variants: ProductVariant[];
   availableForSale: boolean;
 }) {
-  const [selectedVariantId, setSelectedVariantId] = useState(variants[0]?.id);
+  const [selectedVariantId, setSelectedVariantId] = useState<string | undefined>(undefined);
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isPending, startTransition] = useTransition();
@@ -27,17 +27,24 @@ export function AddToCart({
       )
     );
 
-    if (variant) {
-      setSelectedVariantId(variant.id);
-    }
+    setSelectedVariantId(variant?.id);
   }, [searchParams, variants, setSelectedVariantId]);
 
+  const title = !availableForSale
+    ? 'Out of stock'
+    : !selectedVariantId
+    ? 'Please select options'
+    : undefined;
+
   return (
     <button
       aria-label="Add item to cart"
-      disabled={isPending}
+      disabled={isPending || !availableForSale || !selectedVariantId}
+      title={title}
       onClick={() => {
-        if (!availableForSale) return;
+        // Safeguard in case someone messes with `disabled` in devtools.
+        if (!availableForSale || !selectedVariantId) return;
+
         startTransition(async () => {
           const error = await addItem(selectedVariantId);
 
@@ -52,7 +59,7 @@ export function AddToCart({
       className={clsx(
         'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
         {
-          'cursor-not-allowed opacity-60': !availableForSale,
+          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
           'cursor-not-allowed': isPending
         }
       )}
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index 7825ec9fd..89f2a322c 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -4,17 +4,12 @@ import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { usePathname, useSearchParams } from 'next/navigation';
 
-type ParamsMap = {
-  [key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
-};
-
-type OptimizedVariant = {
+type Combination = {
   id: string;
   availableForSale: boolean;
-  params: URLSearchParams;
-  [key: string]: string | boolean | URLSearchParams; // ie. { color: 'Red', size: 'Large', ... }
+  [key: string]: string | boolean; // ie. { color: 'Red', size: 'Large', ... }
 };
 
 export function VariantSelector({
@@ -25,8 +20,7 @@ export function VariantSelector({
   variants: ProductVariant[];
 }) {
   const pathname = usePathname();
-  const currentParams = useSearchParams();
-  const router = useRouter();
+  const searchParams = useSearchParams();
   const hasNoOptionsOrJustOneOption =
     !options.length || (options.length === 1 && options[0]?.values.length === 1);
 
@@ -34,78 +28,55 @@ export function VariantSelector({
     return null;
   }
 
-  // Discard any unexpected options or values from url and create params map.
-  const paramsMap: ParamsMap = Object.fromEntries(
-    Array.from(currentParams.entries()).filter(([key, value]) =>
-      options.find((option) => option.name.toLowerCase() === key && option.values.includes(value))
+  const combinations: Combination[] = variants.map((variant) => ({
+    id: variant.id,
+    availableForSale: variant.availableForSale,
+    // Adds key / value pairs for each variant (ie. "color": "Black" and "size": 'M").
+    ...variant.selectedOptions.reduce(
+      (accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.value }),
+      {}
     )
-  );
-
-  // Optimize variants for easier lookups.
-  const optimizedVariants: OptimizedVariant[] = variants.map((variant) => {
-    const optimized: OptimizedVariant = {
-      id: variant.id,
-      availableForSale: variant.availableForSale,
-      params: new URLSearchParams()
-    };
-
-    variant.selectedOptions.forEach((selectedOption) => {
-      const name = selectedOption.name.toLowerCase();
-      const value = selectedOption.value;
-
-      optimized[name] = value;
-      optimized.params.set(name, value);
-    });
-
-    return optimized;
-  });
-
-  // Find the first variant that is:
-  //
-  // 1. Available for sale
-  // 2. Matches all options specified in the url (note that this
-  //    could be a partial match if some options are missing from the url).
-  //
-  // If no match (full or partial) is found, use the first variant that is
-  // available for sale.
-  const selectedVariant: OptimizedVariant | undefined =
-    optimizedVariants.find(
-      (variant) =>
-        variant.availableForSale &&
-        Object.entries(paramsMap).every(([key, value]) => variant[key] === value)
-    ) || optimizedVariants.find((variant) => variant.availableForSale);
-
-  const selectedVariantParams = new URLSearchParams(selectedVariant?.params);
-  const currentUrl = createUrl(pathname, currentParams);
-  const selectedVariantUrl = createUrl(pathname, selectedVariantParams);
-
-  if (currentUrl !== selectedVariantUrl) {
-    router.replace(selectedVariantUrl);
-  }
+  }));
 
   return options.map((option) => (
     <dl className="mb-8" key={option.id}>
       <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
       <dd className="flex flex-wrap gap-3">
         {option.values.map((value) => {
-          // Base option params on selected variant params.
-          const optionParams = new URLSearchParams(selectedVariantParams);
-          // Update the params using the current option to reflect how the url would change.
-          optionParams.set(option.name.toLowerCase(), value);
+          const optionNameLowerCase = option.name.toLowerCase();
 
-          const optionUrl = createUrl(pathname, optionParams);
+          // Base option params on current params so we can preserve any other param state in the url.
+          const optionSearchParams = new URLSearchParams(searchParams.toString());
 
-          // The option is active if it in the url params.
-          const isActive = selectedVariantParams.get(option.name.toLowerCase()) === value;
+          // Update the option params using the current option to reflect how the url *would* change,
+          // if the option was clicked.
+          optionSearchParams.set(optionNameLowerCase, value);
+          const optionUrl = createUrl(pathname, optionSearchParams);
 
-          // The option is available for sale if it fully matches the variant in the option's url params.
-          // It's super important to note that this is the options params, *not* the selected variant's params.
-          // This is the "magic" that will cross check possible future variant combinations and preemptively
-          // disable combinations that are not possible.
-          const isAvailableForSale = optimizedVariants.find((a) =>
-            Array.from(optionParams.entries()).every(([key, value]) => a[key] === value)
-          )?.availableForSale;
+          // In order to determine if an option is available for sale, we need to:
+          //
+          // 1. Filter out all other param state
+          // 2. Filter out invalid options
+          // 3. Check if the option combination is available for sale
+          //
+          // This is the "magic" that will cross check possible variant combinations and preemptively
+          // disable combinations that are not available. For example, if the color gray is only available in size medium,
+          // then all other sizes should be disabled.
+          const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
+            options.find(
+              (option) => option.name.toLowerCase() === key && option.values.includes(value)
+            )
+          );
+          const isAvailableForSale = combinations.find((combination) =>
+            filtered.every(
+              ([key, value]) => combination[key] === value && combination.availableForSale
+            )
+          );
 
+          // The option is active if it's in the url params.
+          const isActive = searchParams.get(optionNameLowerCase) === value;
+
+          // You can't disable a link, so we need to render something that isn't clickable.
           const DynamicTag = isAvailableForSale ? Link : 'p';
           const dynamicProps = {
             ...(isAvailableForSale && { scroll: false })

From 7ae036b385efea563bde34a4fc4c6a19483a5f35 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Sun, 30 Jul 2023 13:18:31 -0500
Subject: [PATCH 5/5] Fixes add to cart for products with a single variant
 (#1127)

---
 components/cart/add-to-cart.tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
index d737b6678..92e2d50b0 100644
--- a/components/cart/add-to-cart.tsx
+++ b/components/cart/add-to-cart.tsx
@@ -6,7 +6,7 @@ import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState, useTransition } from 'react';
+import { useTransition } from 'react';
 
 export function AddToCart({
   variants,
@@ -15,21 +15,16 @@ export function AddToCart({
   variants: ProductVariant[];
   availableForSale: boolean;
 }) {
-  const [selectedVariantId, setSelectedVariantId] = useState<string | undefined>(undefined);
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isPending, startTransition] = useTransition();
-
-  useEffect(() => {
-    const variant = variants.find((variant: ProductVariant) =>
-      variant.selectedOptions.every(
-        (option) => option.value === searchParams.get(option.name.toLowerCase())
-      )
-    );
-
-    setSelectedVariantId(variant?.id);
-  }, [searchParams, variants, setSelectedVariantId]);
-
+  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 title = !availableForSale
     ? 'Out of stock'
     : !selectedVariantId