@pradip1995/segment-powerhouse-shop 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-powerhouse-shop",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/add-to-cart.ts

@@ -0,0 +1,24 @@
+"use server"
+
+import { addToCart as addToCartCore } from "@pradip1995/commerce-core/data/cart"
+import { removeAuthToken, removeCartId } from "@pradip1995/commerce-core/data/cookies"
+
+function isStaleCustomerError(err: unknown) {
+  const message = err instanceof Error ? err.message : String(err)
+  return /customer with id/i.test(message) && /not found/i.test(message)
+}
+
+export async function addToCart(input: {
+  variantId: string
+  quantity: number
+  countryCode: string
+}) {
+  try {
+    await addToCartCore(input)
+  } catch (err) {
+    if (!isStaleCustomerError(err)) throw err
+    await removeAuthToken()
+    await removeCartId()
+    await addToCartCore(input)
+  }
+}

package/src/product-card.tsx

@@ -2,7 +2,7 @@
 
 import { useState, type MouseEvent } from "react"
 import { useRouter } from "next/navigation"
-import { addToCart } from "@pradip1995/commerce-core/client/actions/cart"
+import { addToCart } from "./add-to-cart"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import { isNextRedirect } from "@pradip1995/segment-primitives/is-next-redirect"
@@ -22,9 +22,11 @@ function snippet(value?: string | null, length = 140) {
 export default function ShopProductCard({
   product,
   countryCode,
+  layout = "grid",
 }: {
   product: HttpTypes.StoreProduct
   countryCode: string
+  layout?: "grid" | "list"
 }) {
   const router = useRouter()
   const [adding, setAdding] = useState(false)
@@ -43,7 +45,8 @@ export default function ShopProductCard({
   const lowStock = inventory != null && inventory > 0 && inventory <= 5
   const href = `/products/${product.handle}`
   const hasOptions = variants.length > 1
-  const copy = snippet(product.description)
+  const copy = snippet(product.description, layout === "list" ? 220 : 140)
+  const isList = layout === "list"
 
   const handleAdd = async (event: MouseEvent) => {
     event.preventDefault()
@@ -67,8 +70,46 @@ export default function ShopProductCard({
     }
   }
 
+  const priceBlock =
+    price != null ? (
+      <div className="powerhouse-shop__price">
+        {onSale && originalPrice != null ? (
+          <span className="powerhouse-shop__compare">{formatPrice(originalPrice, currency)}</span>
+        ) : null}
+        <span className="powerhouse-shop__current">{formatPrice(price, currency)}</span>
+      </div>
+    ) : null
+
+  const actionBlock = (
+    <div className="powerhouse-shop__actions">
+      {inStock ? (
+        <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__quickshop">
+          Quick shop
+        </LocalizedLink>
+      ) : null}
+      {!inStock ? (
+        <button type="button" className="powerhouse-shop__atc" disabled>
+          Sold out
+        </button>
+      ) : hasOptions ? (
+        <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__atc">
+          Choose options
+        </LocalizedLink>
+      ) : (
+        <button
+          type="button"
+          className="powerhouse-shop__atc"
+          onClick={handleAdd}
+          disabled={adding || !variant?.id}
+        >
+          {adding ? "Adding…" : "Add to cart"}
+        </button>
+      )}
+    </div>
+  )
+
   return (
-    <article className={`powerhouse-shop__card${onSale ? " is-sale" : ""}`}>
+    <article className={`powerhouse-shop__card${onSale ? " is-sale" : ""}${isList ? " is-list-card" : ""}`}>
       <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__media" tabIndex={-1}>
         {product.thumbnail?.trim() ? (
           <img src={product.thumbnail.trim()} alt={product.title || ""} />
@@ -78,55 +119,50 @@ export default function ShopProductCard({
         {onSale && saved != null ? (
           <span className="powerhouse-shop__badge">Save {formatPrice(saved, currency)}</span>
         ) : null}
-        {!inStock ? <span className="powerhouse-shop__sold">Sold out</span> : null}
+        {!inStock && !isList ? <span className="powerhouse-shop__sold">Sold out</span> : null}
       </LocalizedLink>
 
-      <div className="powerhouse-shop__info">
-        <h2 className="powerhouse-shop__name">
-          <LocalizedLink href={href} countryCode={countryCode}>
-            {product.title}
-          </LocalizedLink>
-        </h2>
-
-        {lowStock ? (
-          <p className="powerhouse-shop__stock">Only {inventory} left!</p>
-        ) : inStock ? (
-          <p className="powerhouse-shop__stock is-ok">in stock</p>
-        ) : (
-          <p className="powerhouse-shop__stock is-out">Out of stock</p>
-        )}
-
-        {copy ? <p className="powerhouse-shop__excerpt">{copy}</p> : null}
-
-        {price != null ? (
-          <div className="powerhouse-shop__price">
-            {onSale && originalPrice != null ? (
-              <span className="powerhouse-shop__compare">{formatPrice(originalPrice, currency)}</span>
+      {isList ? (
+        <>
+          <div className="powerhouse-shop__copy">
+            <h2 className="powerhouse-shop__name">
+              <LocalizedLink href={href} countryCode={countryCode}>
+                {product.title}
+              </LocalizedLink>
+            </h2>
+            {lowStock ? (
+              <p className="powerhouse-shop__stock">Only {inventory} left!</p>
+            ) : !inStock ? (
+              <p className="powerhouse-shop__stock is-out">Out of stock</p>
             ) : null}
-            <span className="powerhouse-shop__current">{formatPrice(price, currency)}</span>
+            {copy ? <p className="powerhouse-shop__excerpt">{copy}</p> : null}
+            <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__details-link">
+              View full details
+            </LocalizedLink>
           </div>
-        ) : null}
-
-        <div className="powerhouse-shop__actions">
-          <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__quickshop">
-            Quick shop
-          </LocalizedLink>
-          {hasOptions ? (
-            <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__atc">
-              Choose options
+          <div className="powerhouse-shop__aside">
+            {priceBlock}
+            {actionBlock}
+          </div>
+        </>
+      ) : (
+        <div className="powerhouse-shop__info">
+          {priceBlock}
+          <h2 className="powerhouse-shop__name">
+            <LocalizedLink href={href} countryCode={countryCode}>
+              {product.title}
             </LocalizedLink>
+          </h2>
+          {lowStock ? (
+            <p className="powerhouse-shop__stock">Only {inventory} left!</p>
+          ) : inStock ? (
+            <p className="powerhouse-shop__stock is-ok">in stock</p>
           ) : (
-            <button
-              type="button"
-              className="powerhouse-shop__atc"
-              onClick={handleAdd}
-              disabled={adding || !variant?.id || !inStock}
-            >
-              {adding ? "Adding…" : !inStock ? "Sold out" : "Add to cart"}
-            </button>
+            <p className="powerhouse-shop__stock is-out">Out of stock</p>
           )}
+          {actionBlock}
         </div>
-      </div>
+      )}
     </article>
   )
 }