Create and embed media galleries

const gallery = await sdk.assets.dam.createGallery({
  name: 'Chair product gallery',
  entries: [{
    publication_id: approvedModelPublicationId,
    fallback_publication_id: approvedImagePublicationId,
    role: 'hero', locale: 'en', alt: 'Oak chair viewed from the front',
  }],
})
// Review the draft delivery before the authorized publishing action.
const preview = await sdk.assets.dam.resolveGallery(gallery.id, true)
const published = await sdk.assets.dam.transitionGallery(gallery.id, gallery.revision, 'publish')
// Later edits use updateGallery(id, currentRevision, { name, entries }).

// Call only after authorizing the viewer and loading the product's saved IDs.
async function galleryResponse(savedGalleryId: string) {
  const delivery = await sdk.assets.dam.resolveGallery(savedGalleryId)
  return Response.json(delivery, { headers: { 'Cache-Control': 'private, no-store' } })
}

async function galleryARResponse(savedGalleryId: string, allowedPublicationId: string) {
  // The caller must verify that this publication belongs to the saved product gallery.
  const ar = await sdk.assets.dam.resolveGalleryAR(savedGalleryId, allowedPublicationId)
  return Response.json(ar, { headers: { 'Cache-Control': 'private, no-store' } })
}

import { StackshiftAssetsGallery } from '@stackshift-cloud/assets-gallery/react'

async function readResponse(response: Response) {
  if (!response.ok) throw new Error('Product media is unavailable')
  return response.json()
}
export function ProductGallery() {
  return <StackshiftAssetsGallery
    getGallery={signal => fetch('/api/product-gallery', { signal, cache: 'no-store' }).then(readResponse)}
    getAR={(entry, signal) => fetch('/api/product-gallery/ar', {
      method: 'POST', signal, cache: 'no-store',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ publication_id: entry.reference.publication_id }),
    }).then(readResponse)}
  />
}