From 904b0f58389b7b69abebd3770f1f6d6f1fe48242 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 19:32:02 +0100
Subject: [PATCH] Fix all designJson access in cart page

Parse designJson string to object before accessing front/back properties.
Prevents TypeError when rendering custom design items in cart.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/app/cart/page.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index dec07fb..a60a81a 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -62,7 +62,12 @@ export default function CartPage() {
       <h1 className="font-display text-4xl">Your bag</h1>
 
       <div className="mt-8 divide-y divide-line border-t border-line">
-        {items.map((item) => (
+        {items.map((item) => {
+          const design = typeof item.designJson === 'string' ? JSON.parse(item.designJson) : item.designJson;
+          const hasFront = (design.front?.length ?? 0) > 0;
+          const hasBack = (design.back?.length ?? 0) > 0;
+
+          return (
           <div key={item.cartItemId} className="flex flex-wrap items-center gap-4 py-6">
             <div className="h-24 w-24 shrink-0 border border-line bg-surface p-1">
               {item.placementPreviewUrl || item.designPreviewUrl ? (
@@ -89,18 +94,18 @@ export default function CartPage() {
                 </span>
                 {item.size && <span>Size {item.size}</span>}
               </div>
-              {(item.designJson.front.length > 0 || item.designJson.back.length > 0) && (
+              {(hasFront || hasBack) && (
                 <div className="mt-1">
                   <p className="text-xs text-muted">
                     Custom design
-                    {item.designJson.front.length > 0 && item.designJson.back.length > 0
+                    {hasFront && hasBack
                       ? ' — front & back'
-                      : item.designJson.back.length > 0
+                      : hasBack
                         ? ' — back'
                         : ' — front'}
                   </p>
                   <div className="mt-1 flex gap-3">
-                    {item.designJson.front.length > 0 && item.designPreviewUrl && (
+                    {hasFront && item.designPreviewUrl && (
                       <a
                         href={item.designPreviewUrl}
                         download={`${item.slug}-front-print.png`}
@@ -109,7 +114,7 @@ export default function CartPage() {
                         Download front PNG
                       </a>
                     )}
-                    {item.designJson.back.length > 0 && item.designPreviewUrlBack && (
+                    {hasBack && item.designPreviewUrlBack && (
                       <a
                         href={item.designPreviewUrlBack}
                         download={`${item.slug}-back-print.png`}
@@ -152,7 +157,8 @@ export default function CartPage() {
               Remove
             </button>
           </div>
-        ))}
+          );
+        })}
       </div>
 
       {hasCustomDesign && (