(SP: 3) [SHOP] fix post-review storefront photo flow, PDP fallback, gallery tests, and migration SQL consistency

Author: liudmylasovetovs

frontend/app/[locale]/admin/shop/products/[id]/edit/page.tsx

@@ -2,6 +2,7 @@ import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { z } from 'zod';
 
+import { ProductNotFoundError } from '@/lib/errors/products';
 import { issueCsrfToken } from '@/lib/security/csrf';
 import { getAdminProductByIdWithPrices } from '@/lib/services/products';
 import type { CurrencyCode } from '@/lib/shop/currency';
@@ -38,8 +39,12 @@ export default async function EditProductPage({
   let product;
   try {
     product = await getAdminProductByIdWithPrices(parsed.data.id);
-  } catch {
-    notFound();
+  } catch (error) {
+    if (error instanceof ProductNotFoundError) {
+      notFound();
+    }
+
+    throw error;
   }
 
   const prices = product.prices;

frontend/app/[locale]/admin/shop/products/_components/ProductForm.tsx

@@ -6,6 +6,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter } from '@/i18n/routing';
 import { CATEGORIES, COLORS, PRODUCT_TYPES, SIZES } from '@/lib/config/catalog';
 import { logError } from '@/lib/logging';
+import type { AdminProductPhotoPlan } from '@/lib/validation/shop';
 import type { ProductAdminInput, ProductImage } from '@/lib/validation/shop';
 
 const localSlugify = (input: string): string => {
@@ -46,9 +47,9 @@ type UiPriceRow = {
   originalPrice: string;
 };
 
-type UiPhoto = {
+export type UiPhoto = {
   key: string;
-  source: 'existing' | 'new';
+  source: 'existing' | 'legacy' | 'new';
   imageId?: string;
   uploadId?: string;
   previewUrl: string;
@@ -152,7 +153,54 @@ function normalizeUiPhotos(photos: UiPhoto[]): UiPhoto[] {
   }));
 }
 
-function ensureUiPhotos(fromInitial: {
+type SerializableUiPhoto =
+  | (UiPhoto & { source: 'existing'; imageId: string })
+  | (UiPhoto & { source: 'new'; uploadId: string; file?: File });
+
+function isSerializableUiPhoto(photo: UiPhoto): photo is SerializableUiPhoto {
+  if (photo.source === 'existing') {
+    return typeof photo.imageId === 'string' && photo.imageId.trim().length > 0;
+  }
+
+  if (photo.source === 'new') {
+    return (
+      typeof photo.uploadId === 'string' && photo.uploadId.trim().length > 0
+    );
+  }
+
+  return false;
+}
+
+export function buildPhotoPlanSubmission(photos: UiPhoto[]): {
+  photoPlan?: AdminProductPhotoPlan;
+  newPhotos: Array<UiPhoto & { source: 'new'; uploadId: string; file: File }>;
+} {
+  const serializablePhotos = photos.filter(isSerializableUiPhoto);
+
+  if (serializablePhotos.length === 0) {
+    return { photoPlan: undefined, newPhotos: [] };
+  }
+
+  const primaryIndex = serializablePhotos.findIndex(photo => photo.isPrimary);
+  const effectivePrimaryIndex = primaryIndex >= 0 ? primaryIndex : 0;
+
+  const photoPlan = serializablePhotos.map((photo, index) => ({
+    imageId: photo.source === 'existing' ? photo.imageId : undefined,
+    uploadId: photo.source === 'new' ? photo.uploadId : undefined,
+    isPrimary: index === effectivePrimaryIndex,
+  }));
+
+  const newPhotos = serializablePhotos.filter(
+    (
+      photo
+    ): photo is UiPhoto & { source: 'new'; uploadId: string; file: File } =>
+      photo.source === 'new' && Boolean(photo.file)
+  );
+
+  return { photoPlan, newPhotos };
+}
+
+export function ensureUiPhotos(fromInitial: {
   images?: ProductImage[];
   imageUrl?: string;
 }): UiPhoto[] {
@@ -177,8 +225,7 @@ function ensureUiPhotos(fromInitial: {
     return [
       {
         key: 'legacy-image',
-        source: 'existing',
-        imageId: 'legacy-image',
+        source: 'legacy',
         previewUrl: fromInitial.imageUrl,
         isPrimary: true,
       },
@@ -507,29 +554,18 @@ export function ProductForm({
       formData.append('isActive', isActive ? 'true' : 'false');
       formData.append('isFeatured', isFeatured ? 'true' : 'false');
 
-      const photoPlan = photos.map(photo => ({
-        imageId: photo.source === 'existing' ? photo.imageId : undefined,
-        uploadId: photo.source === 'new' ? photo.uploadId : undefined,
-        isPrimary: photo.isPrimary,
-      }));
-
-      const newPhotos = photos.filter(
-        (
-          photo
-        ): photo is UiPhoto & { source: 'new'; uploadId: string; file: File } =>
-          photo.source === 'new' &&
-          Boolean(photo.uploadId) &&
-          Boolean(photo.file)
-      );
+      const { photoPlan, newPhotos } = buildPhotoPlanSubmission(photos);
 
-      formData.append('photoPlan', JSON.stringify(photoPlan));
-      formData.append(
-        'newImageUploadIds',
-        JSON.stringify(newPhotos.map(photo => photo.uploadId))
-      );
-      newPhotos.forEach(photo => {
-        formData.append('newImages', photo.file);
-      });
+      if (photoPlan?.length) {
+        formData.append('photoPlan', JSON.stringify(photoPlan));
+        formData.append(
+          'newImageUploadIds',
+          JSON.stringify(newPhotos.map(photo => photo.uploadId))
+        );
+        newPhotos.forEach(photo => {
+          formData.append('newImages', photo.file);
+        });
+      }
 
       if (!csrfToken) {
         setError('Security token missing. Refresh the page and retry.');
@@ -1127,7 +1163,11 @@ export function ProductForm({
                         </span>
                       ) : null}
                       <span className="text-muted-foreground text-xs">
-                        {photo.source === 'existing' ? 'Saved' : 'New upload'}
+                        {photo.source === 'existing'
+                          ? 'Saved'
+                          : photo.source === 'legacy'
+                            ? 'Legacy image'
+                            : 'New upload'}
                       </span>
                     </div>
 

frontend/app/[locale]/shop/products/[slug]/page.tsx

@@ -71,6 +71,7 @@ export default async function ProductPage({
 
       <div className="mt-8 grid gap-8 lg:grid-cols-2 lg:gap-16">
         <ProductGallery
+          key={product.id}
           productName={product.name}
           images={galleryImages}
           badgeLabel={badgeLabel}

frontend/app/api/shop/admin/products/[id]/route.ts

@@ -405,9 +405,6 @@ export async function PATCH(
     }
 
     const parsed = parseAdminProductForm(formData, { mode: 'update' });
-    const parsedPhotos = parseAdminProductPhotosForm(formData, {
-      mode: 'update',
-    });
     if (!parsed.ok) {
       const issuesCount = getIssuesCount(parsed.error);
 
@@ -428,6 +425,9 @@ export async function PATCH(
         { status: 400 }
       );
     }
+    const parsedPhotos = parseAdminProductPhotosForm(formData, {
+      mode: 'update',
+    });
     if (!parsedPhotos.ok) {
       logWarn('admin_product_update_invalid_photos', {
         ...baseMeta,

frontend/app/api/shop/admin/products/route.ts

@@ -12,7 +12,6 @@ import {
   AdminUnauthorizedError,
   requireAdminApi,
 } from '@/lib/auth/admin';
-import { destroyProductImage } from '@/lib/cloudinary';
 import { logError, logWarn } from '@/lib/logging';
 import { requireAdminCsrf } from '@/lib/security/admin-csrf';
 import { guardBrowserSameOrigin } from '@/lib/security/origin';
@@ -354,10 +353,8 @@ export async function POST(request: NextRequest) {
           durationMs: Date.now() - startedAtMs,
         });
 
-        let rollbackDeleted = false;
         try {
           await deleteProduct(inserted.id);
-          rollbackDeleted = true;
         } catch (rollbackError) {
           logError(
             'admin_product_create_audit_rollback_failed',
@@ -372,25 +369,6 @@ export async function POST(request: NextRequest) {
           );
         }
 
-        try {
-          if (rollbackDeleted && inserted.imagePublicId) {
-            await destroyProductImage(inserted.imagePublicId);
-          }
-        } catch (imgError) {
-          logError(
-            'admin_product_create_audit_rollback_image_failed',
-            imgError,
-            {
-              ...baseMeta,
-              code: 'AUDIT_ROLLBACK_IMAGE_FAILED',
-              productId: inserted.id,
-              slug: inserted.slug,
-              imagePublicId: inserted.imagePublicId ?? null,
-              durationMs: Date.now() - startedAtMs,
-            }
-          );
-        }
-
         throw auditError;
       }
 

frontend/components/shop/ProductCard.tsx

@@ -101,7 +101,7 @@ export function ProductCard({ product }: ProductCardProps) {
             className="text-muted-foreground mt-2 min-h-4 text-xs leading-4"
             {...(availabilityState === 'available_to_order'
               ? { 'aria-label': t('availability.availableToOrder') }
-              : { role: 'status' })}
+              : {})}
           >
             {availabilityState === 'available_to_order'
               ? t('availability.availableToOrder')

frontend/components/shop/ProductGallery.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Image from 'next/image';
+import type { KeyboardEvent } from 'react';
 import { useState } from 'react';
 
 import { SHOP_FOCUS } from '@/lib/shop/ui-classes';
@@ -52,6 +53,22 @@ export function ProductGallery({
   const [selectedIndex, setSelectedIndex] = useState(0);
   const selectedImage = galleryImages[selectedIndex] ?? galleryImages[0];
 
+  const handleThumbnailKeyDown = (
+    event: KeyboardEvent<HTMLButtonElement>,
+    index: number
+  ) => {
+    if (
+      event.key !== ' ' &&
+      event.key !== 'Space' &&
+      event.key !== 'Spacebar'
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    setSelectedIndex(index);
+  };
+
   return (
     <div className="space-y-4" aria-label="Product gallery">
       <div className="bg-muted relative aspect-square overflow-hidden rounded-lg">
@@ -86,6 +103,7 @@ export function ProductGallery({
                 key={image.id}
                 type="button"
                 onClick={() => setSelectedIndex(index)}
+                onKeyDown={event => handleThumbnailKeyDown(event, index)}
                 aria-label={`Show ${productName} photo ${index + 1}`}
                 aria-pressed={isSelected}
                 className={cn(

frontend/db/queries/shop/products.ts

@@ -61,16 +61,37 @@ export type PublicProductBaseRow = Pick<
   | 'updatedAt'
 >;
 
+type PublicProductBaseResolvedRow = Omit<
+  PublicProductBaseRow,
+  'imageUrl' | 'imagePublicId'
+> &
+  ReturnType<typeof resolveProductImages>;
+
 export async function getPublicProductBaseBySlug(
   slug: string
-): Promise<PublicProductBaseRow | null> {
+): Promise<PublicProductBaseResolvedRow | null> {
   const rows = await db
     .select(publicProductBaseSelect)
     .from(products)
     .where(and(eq(products.slug, slug), eq(products.isActive, true)))
     .limit(1);
 
-  return rows[0] ?? null;
+  const row = rows[0];
+  if (!row) return null;
+
+  const imagesByProductId = await getProductImagesByProductIds([row.id]);
+  const resolvedImages = resolveProductImages(
+    row,
+    imagesByProductId.get(row.id)
+  );
+
+  return {
+    ...row,
+    imageUrl: resolvedImages.imageUrl,
+    imagePublicId: resolvedImages.imagePublicId,
+    images: resolvedImages.images,
+    primaryImage: resolvedImages.primaryImage,
+  };
 }
 
 const publicProductSelect = {

frontend/drizzle/0034_melodic_pet_avengers.sql

@@ -1,4 +1,4 @@
-CREATE TABLE IF NOT EXISTS "ai_learned_terms" (
+CREATE TABLE IF NOT EXISTS "public"."ai_learned_terms" (
 	"id" text PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
 	"user_id" text NOT NULL,
 	"term" text NOT NULL,
@@ -20,7 +20,7 @@ BEGIN
 		WHERE conname = 'ai_learned_terms_user_id_users_id_fk'
 		  AND conrelid = 'public.ai_learned_terms'::regclass
 	) THEN
-		ALTER TABLE "ai_learned_terms"
+		ALTER TABLE "public"."ai_learned_terms"
 		ADD CONSTRAINT "ai_learned_terms_user_id_users_id_fk"
 		FOREIGN KEY ("user_id")
 		REFERENCES "public"."users"("id")

frontend/lib/services/products/photo-plan.ts

@@ -38,6 +38,27 @@ function photoPayloadError(
   return error;
 }
 
+function assertUniqueUploadIds(
+  uploads: ProductImageUploadInput[],
+  mode: ResolvePhotoPlanOptions['mode']
+) {
+  const seen = new Set<string>();
+
+  for (const upload of uploads) {
+    if (seen.has(upload.uploadId)) {
+      throw photoPayloadError(
+        'Uploaded photo payload contains duplicate upload ids.',
+        {
+          uploadId: upload.uploadId,
+          mode,
+        }
+      );
+    }
+
+    seen.add(upload.uploadId);
+  }
+}
+
 export function resolvePhotoPlan({
   mode,
   photoPlan,
@@ -48,6 +69,8 @@ export function resolvePhotoPlan({
     throw photoPayloadError('At least one product photo is required.');
   }
 
+  assertUniqueUploadIds(uploads, mode);
+
   const existingById = new Map(existingImages.map(image => [image.id, image]));
   const uploadsById = new Map(uploads.map(upload => [upload.uploadId, upload]));