feat: ship creator journey v2 and profile updates

2026-04-12 21:42:07 +02:00
parent a2457f4e49
commit d5cff21ea2
335 changed files with 20147 additions and 1545 deletions
--- a/resources/js/components/artwork/ArtworkAwards.jsx
+++ b/resources/js/components/artwork/ArtworkAwards.jsx
@@ -1,13 +1,120 @@
 import React, { useState, useCallback } from 'react'
+import Modal from '../ui/Modal'
+import Button from '../ui/Button'

 const MEDALS = [
-  { key: 'gold',   label: 'Gold',   emoji: '🥇', weight: 3 },
-  { key: 'silver', label: 'Silver', emoji: '🥈', weight: 2 },
+  { key: 'gold',   label: 'Gold',   emoji: '🥇', weight: 5 },
+  { key: 'silver', label: 'Silver', emoji: '🥈', weight: 3 },
  { key: 'bronze', label: 'Bronze', emoji: '🥉', weight: 1 },
 ]

+function getMedalMeta(medalKey) {
+  return MEDALS.find((medal) => medal.key === medalKey) ?? null
+}
+
+function getMedalWeight(medalKey) {
+  return getMedalMeta(medalKey)?.weight ?? 0
+}
+
+function buildConfirmationContent(pendingConfirmation) {
+  if (!pendingConfirmation) {
+    return null
+  }
+
+  const nextMedal = getMedalMeta(pendingConfirmation.medal)
+  const previousMedal = getMedalMeta(pendingConfirmation.previousMedal)
+
+  if (pendingConfirmation.action === 'remove') {
+    return {
+      title: `Remove ${nextMedal?.label ?? 'medal'} medal?`,
+      summary: `This will remove your ${nextMedal?.label ?? ''} medal from this artwork.`,
+      details: 'Your contribution to the medal score will be removed immediately after confirmation.',
+      confirmLabel: 'Remove medal',
+      confirmVariant: 'danger',
+      modalVariant: 'danger',
+    }
+  }
+
+  return {
+    title: `Change medal to ${nextMedal?.label ?? 'selected medal'}?`,
+    summary: `You already awarded ${previousMedal?.label ?? 'a medal'} to this artwork.`,
+    details: `Confirm to switch your medal from ${previousMedal?.label ?? 'the current medal'} to ${nextMedal?.label ?? 'the selected medal'}.`,
+    confirmLabel: `Change to ${nextMedal?.label ?? 'selected medal'}`,
+    confirmVariant: 'accent',
+    modalVariant: 'default',
+  }
+}
+
+function describeMedalError(message) {
+  const normalized = String(message || '').trim()
+  const lower = normalized.toLowerCase()
+
+  if (lower.includes('verify your email')) {
+    return {
+      title: 'Email verification required',
+      summary: 'Medals are limited to verified accounts to reduce abuse and low-quality vote spam.',
+      details: 'Open your account email, use the verification link, then reload this page and try again.',
+    }
+  }
+
+  if (lower.includes('at least') && lower.includes('hours old')) {
+    return {
+      title: 'Account is too new',
+      summary: normalized,
+      details: 'This cooldown is there to stop throwaway accounts from mass-awarding artworks immediately after signup.',
+    }
+  }
+
+  if (lower.includes('your own artwork')) {
+    return {
+      title: 'Own artwork cannot be medaled',
+      summary: 'Creators cannot add medals to their own work.',
+      details: 'Only other community members can award medals so the score stays community-driven.',
+    }
+  }
+
+  if (lower.includes('not published yet')) {
+    return {
+      title: 'Artwork is not published yet',
+      summary: 'This artwork has not reached a public, medal-eligible state yet.',
+      details: 'Medals are only available after the artwork is published and visible publicly.',
+    }
+  }
+
+  if (lower.includes('not eligible for medals')) {
+    return {
+      title: 'Artwork is not eligible for medals',
+      summary: 'This artwork is currently blocked from medal voting.',
+      details: 'That usually means it is private, unapproved, or otherwise not available for public medal activity.',
+    }
+  }
+
+  if (lower.includes('no longer available')) {
+    return {
+      title: 'Artwork is unavailable',
+      summary: 'This artwork can no longer receive medals.',
+      details: 'The artwork may have been removed or is no longer publicly available.',
+    }
+  }
+
+  if (lower.includes('disabled')) {
+    return {
+      title: 'Medals are temporarily unavailable',
+      summary: normalized,
+      details: 'This is a site-wide setting, not a problem with your account.',
+    }
+  }
+
+  return {
+    title: 'Unable to add medal',
+    summary: normalized || 'The medal request could not be completed.',
+    details: 'Check that you are signed in with an eligible account and that the artwork is publicly medal-eligible.',
+  }
+}
+
 export default function ArtworkAwards({ artwork, initialAwards = null, isAuthenticated = false }) {
  const artworkId = artwork?.id
+  const isOwnArtwork = Boolean(artwork?.viewer?.id && artwork?.user?.id && artwork.viewer.id === artwork.user.id)

  const [awards, setAwards] = useState({
    gold:   initialAwards?.gold   ?? 0,
@@ -15,16 +122,20 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
    bronze: initialAwards?.bronze ?? 0,
    score:  initialAwards?.score  ?? 0,
  })
-  const [viewerAward, setViewerAward] = useState(initialAwards?.viewer_award ?? null)
+  const [viewerAward, setViewerAward] = useState(initialAwards?.current_user_medal ?? initialAwards?.viewer_award ?? null)
  const [loading, setLoading] = useState(null) // which medal is pending
  const [error, setError] = useState(null)
+  const [pendingConfirmation, setPendingConfirmation] = useState(null)
+
+  const errorDetails = error ? describeMedalError(error) : null
+  const confirmationContent = buildConfirmationContent(pendingConfirmation)

  const csrfToken = typeof document !== 'undefined'
    ? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
    : null

  const apiFetch = useCallback(async (method, body = null) => {
-    const res = await fetch(`/api/artworks/${artworkId}/award`, {
+    const res = await fetch(`/api/artworks/${artworkId}/medal`, {
      method,
      headers: {
        'Content-Type': 'application/json',
@@ -44,19 +155,21 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
  }, [artworkId, csrfToken])

  const applyServerResponse = useCallback((data) => {
-    if (data?.awards) {
+    const payload = data?.medals || data?.awards || null
+
+    if (payload) {
      setAwards({
-        gold:   data.awards.gold   ?? 0,
-        silver: data.awards.silver ?? 0,
-        bronze: data.awards.bronze ?? 0,
-        score:  data.awards.score  ?? 0,
+        gold:   payload.gold   ?? 0,
+        silver: payload.silver ?? 0,
+        bronze: payload.bronze ?? 0,
+        score:  payload.score  ?? 0,
      })
    }
-    setViewerAward(data?.viewer_award ?? null)
+    setViewerAward(data?.current_user_medal ?? data?.viewer_award ?? null)
  }, [])

-  const handleMedalClick = useCallback(async (medal) => {
-    if (!isAuthenticated) return
+  const handleMedalAction = useCallback(async ({ action, medal, previousMedal = null }) => {
+    if (!isAuthenticated || isOwnArtwork) return
    if (loading) return

    setError(null)
@@ -65,17 +178,12 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
    const prevAwards   = { ...awards }
    const prevViewer   = viewerAward

-    const delta = (m) => {
-      const weight = MEDALS.find(x => x.key === m)?.weight ?? 0
-      return weight
-    }
-
-    if (viewerAward === medal) {
+    if (action === 'remove') {
      // Undo: remove award
      setAwards(a => ({
        ...a,
        [medal]: Math.max(0, a[medal] - 1),
-        score:   Math.max(0, a.score - delta(medal)),
+        score:   Math.max(0, a.score - getMedalWeight(medal)),
      }))
      setViewerAward(null)

@@ -90,102 +198,174 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
      } finally {
        setLoading(null)
      }
-    } else if (viewerAward) {
-      // Change: swap medals
-      const prev = viewerAward
-      setAwards(a => ({
-        ...a,
-        [prev]:  Math.max(0, a[prev] - 1),
-        [medal]: a[medal] + 1,
-        score:   a.score - delta(prev) + delta(medal),
-      }))
-      setViewerAward(medal)
-
-      setLoading(medal)
-      try {
-        const data = await apiFetch('PUT', { medal })
-        applyServerResponse(data)
-      } catch (e) {
-        setAwards(prevAwards)
-        setViewerAward(prevViewer)
-        setError(e.message)
-      } finally {
-        setLoading(null)
-      }
-    } else {
-      // New award
-      setAwards(a => ({
-        ...a,
-        [medal]: a[medal] + 1,
-        score:   a.score + delta(medal),
-      }))
-      setViewerAward(medal)
-
-      setLoading(medal)
-      try {
-        const data = await apiFetch('POST', { medal })
-        applyServerResponse(data)
-      } catch (e) {
-        setAwards(prevAwards)
-        setViewerAward(prevViewer)
-        setError(e.message)
-      } finally {
-        setLoading(null)
-      }
+      return
    }
-  }, [isAuthenticated, loading, awards, viewerAward, apiFetch, applyServerResponse])
+
+    if (action === 'change' && previousMedal) {
+      // Change: swap medals
+      setAwards(a => ({
+        ...a,
+        [previousMedal]:  Math.max(0, a[previousMedal] - 1),
+        [medal]: a[medal] + 1,
+        score:   a.score - getMedalWeight(previousMedal) + getMedalWeight(medal),
+      }))
+      setViewerAward(medal)
+
+      setLoading(medal)
+      try {
+        const data = await apiFetch('POST', { medal_type: medal })
+        applyServerResponse(data)
+      } catch (e) {
+        setAwards(prevAwards)
+        setViewerAward(prevViewer)
+        setError(e.message)
+      } finally {
+        setLoading(null)
+      }
+      return
+    }
+
+    // New award
+    setAwards(a => ({
+      ...a,
+      [medal]: a[medal] + 1,
+      score:   a.score + getMedalWeight(medal),
+    }))
+    setViewerAward(medal)
+
+    setLoading(medal)
+    try {
+      const data = await apiFetch('POST', { medal_type: medal })
+      applyServerResponse(data)
+    } catch (e) {
+      setAwards(prevAwards)
+      setViewerAward(prevViewer)
+      setError(e.message)
+    } finally {
+      setLoading(null)
+    }
+  }, [isAuthenticated, isOwnArtwork, loading, awards, viewerAward, apiFetch, applyServerResponse])
+
+  const handleMedalClick = useCallback((medal) => {
+    if (!isAuthenticated || isOwnArtwork) return
+    if (loading) return
+
+    setError(null)
+
+    if (viewerAward === medal) {
+      setPendingConfirmation({ action: 'remove', medal, previousMedal: medal })
+      return
+    }
+
+    if (viewerAward) {
+      setPendingConfirmation({ action: 'change', medal, previousMedal: viewerAward })
+      return
+    }
+
+    void handleMedalAction({ action: 'add', medal })
+  }, [isAuthenticated, isOwnArtwork, loading, viewerAward, handleMedalAction])
+
+  const closeConfirmation = useCallback(() => {
+    if (loading) return
+    setPendingConfirmation(null)
+  }, [loading])
+
+  const confirmPendingAction = useCallback(async () => {
+    if (!pendingConfirmation || loading) return
+
+    const action = pendingConfirmation
+    setPendingConfirmation(null)
+    await handleMedalAction(action)
+  }, [pendingConfirmation, loading, handleMedalAction])

  return (
-    <div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
-      <h2 className="text-xs font-semibold uppercase tracking-wider text-white/30">Awards</h2>
+    <>
+      <div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-white/30">Medals</h2>

-      {error && (
-        <p className="mt-2 text-xs text-red-400">{error}</p>
-      )}
+        {errorDetails && (
+          <div className="mt-3 rounded-xl border border-red-400/20 bg-red-500/10 px-4 py-3 text-left">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-red-300/90">{errorDetails.title}</div>
+            <p className="mt-2 text-sm leading-6 text-red-200">{errorDetails.summary}</p>
+            <p className="mt-2 text-xs leading-5 text-red-100/75">{errorDetails.details}</p>
+          </div>
+        )}

-      <div className="mt-4 flex flex-col gap-3 sm:flex-row">
-        {MEDALS.map(({ key, label, emoji }) => {
-          const isActive  = viewerAward === key
-          const isPending = loading === key
+        <div className="mt-4 flex flex-col gap-3 sm:flex-row">
+          {MEDALS.map(({ key, label, emoji }) => {
+            const isActive  = viewerAward === key
+            const isPending = loading === key

-          return (
-            <button
-              key={key}
-              type="button"
-              disabled={!isAuthenticated || loading !== null}
-              onClick={() => handleMedalClick(key)}
-              title={!isAuthenticated ? 'Sign in to award' : isActive ? `Remove ${label} award` : `Award ${label}`}
-              className={[
-                'inline-flex min-h-11 flex-1 flex-col items-center justify-center gap-1 rounded-lg border px-3 py-2 text-sm transition-all',
-                isActive
-                  ? 'border-accent/40 bg-accent/10 font-semibold text-accent shadow-lg shadow-accent/10'
-                  : 'border-white/[0.08] bg-white/[0.03] text-white/70 hover:bg-white/[0.06] hover:border-white/[0.12]',
-                (!isAuthenticated || loading !== null) && 'cursor-not-allowed opacity-60',
-              ].filter(Boolean).join(' ')}
-            >
-              <span className="text-xl leading-none" aria-hidden="true">
-                {isPending ? '…' : emoji}
-              </span>
-              <span className="text-xs font-medium leading-none">{label}</span>
-              <span className="text-xs text-soft tabular-nums">
-                {awards[key]}
-              </span>
-            </button>
-          )
-        })}
+            return (
+              <button
+                key={key}
+                type="button"
+                disabled={!isAuthenticated || isOwnArtwork || loading !== null}
+                onClick={() => handleMedalClick(key)}
+                title={!isAuthenticated ? 'Sign in to medal' : isOwnArtwork ? 'You cannot medal your own artwork' : isActive ? `Remove ${label} medal` : viewerAward ? `Change medal to ${label}` : `Give ${label} medal`}
+                className={[
+                  'inline-flex min-h-11 flex-1 flex-col items-center justify-center gap-1 rounded-lg border px-3 py-2 text-sm transition-all',
+                  isActive
+                    ? 'border-accent/40 bg-accent/10 font-semibold text-accent shadow-lg shadow-accent/10'
+                    : 'border-white/[0.08] bg-white/[0.03] text-white/70 hover:bg-white/[0.06] hover:border-white/[0.12]',
+                  (!isAuthenticated || isOwnArtwork || loading !== null) && 'cursor-not-allowed opacity-60',
+                ].filter(Boolean).join(' ')}
+              >
+                <span className="text-xl leading-none" aria-hidden="true">
+                  {isPending ? '…' : emoji}
+                </span>
+                <span className="text-xs font-medium leading-none">{label}</span>
+                <span className="text-xs text-soft tabular-nums">
+                  {awards[key]}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+
+        {awards.score > 0 && (
+          <p className="mt-3 text-right text-xs text-soft">
+            Score: <span className="font-semibold text-white">{awards.score}</span>
+          </p>
+        )}
+
+        {!isAuthenticated && (
+          <p className="mt-3 text-center text-xs text-soft">
+            <a href="/login" className="text-accent hover:underline">Sign in</a> to medal this artwork
+          </p>
+        )}
+
+        {isAuthenticated && isOwnArtwork && (
+          <p className="mt-3 text-center text-xs text-soft">
+            You cannot medal your own artwork.
+          </p>
+        )}
      </div>

-      {awards.score > 0 && (
-        <p className="mt-3 text-right text-xs text-soft">
-          Score: <span className="font-semibold text-white">{awards.score}</span>
-        </p>
-      )}
-
-      {!isAuthenticated && (
-        <p className="mt-3 text-center text-xs text-soft">
-          <a href="/login" className="text-accent hover:underline">Sign in</a> to award this artwork
-        </p>
-      )}
-    </div>
+      <Modal
+        open={Boolean(confirmationContent)}
+        onClose={closeConfirmation}
+        title={confirmationContent?.title}
+        size="sm"
+        variant={confirmationContent?.modalVariant}
+        footer={confirmationContent ? (
+          <div className="ml-auto flex items-center gap-2">
+            <Button variant="ghost" size="sm" onClick={closeConfirmation} disabled={loading !== null}>
+              Cancel
+            </Button>
+            <Button variant={confirmationContent.confirmVariant} size="sm" onClick={confirmPendingAction} loading={loading !== null}>
+              {confirmationContent.confirmLabel}
+            </Button>
+          </div>
+        ) : null}
+      >
+        {confirmationContent ? (
+          <div className="space-y-3">
+            <p className="text-sm leading-6 text-slate-200">{confirmationContent.summary}</p>
+            <p className="text-xs leading-5 text-slate-400">{confirmationContent.details}</p>
+          </div>
+        ) : null}
+      </Modal>
+    </>
  )
 }