feat: configure and display public seller descriptions

apps/web/src/pages/AdminSettingsPage.stories.js

@@ -1,5 +1,34 @@
+import { expect, userEvent, within, waitFor } from '@storybook/test';
 import AdminSettingsPage from './AdminSettingsPage.vue';
 
-export default { title: 'Pages/AdminSettingsPage', component: AdminSettingsPage };
+export default {
+  title: 'Pages/AdminSettingsPage', component: AdminSettingsPage,
+  beforeEach: () => {
+    const originalFetch = globalThis.fetch;
+    let stored = { general: { publicDescription: 'Independent collector.', publicContactEmail: 'collector@example.test' } };
+    globalThis.fetch = async (url, options) => {
+      if (!String(url).endsWith('/admin/settings')) return originalFetch(url, options);
+      if (options?.method === 'PATCH') stored = JSON.parse(options.body);
+      return new Response(JSON.stringify({ data: stored }), { headers: { 'content-type': 'application/json' } });
+    };
+    return () => { globalThis.fetch = originalFetch; };
+  },
+};
 
 export const SettingsForm = {};
+export const EditAndClearDescription = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const field = await canvas.findByLabelText('Public seller description (optional)');
+    await expect(field).toHaveValue('Independent collector.');
+    await userEvent.clear(field);
+    await userEvent.type(field, 'Cards and collectibles.');
+    await userEvent.click(canvas.getByRole('button', { name: 'Save settings' }));
+    await waitFor(() => expect(canvas.getByRole('status')).toHaveTextContent('Settings saved.'));
+    await expect(field).toHaveValue('Cards and collectibles.');
+    await userEvent.clear(field);
+    await userEvent.click(canvas.getByRole('button', { name: 'Save settings' }));
+    await waitFor(() => expect(canvas.getByRole('status')).toHaveTextContent('Settings saved.'));
+    await expect(field).toHaveValue('');
+  },
+};

apps/web/src/pages/AdminSettingsPage.vue

@@ -4,7 +4,7 @@ import { onMounted, reactive, ref } from 'vue';
 import { getAdminSettings, updateAdminSettings } from '@/services/admin-settings-service.js';
 
 const settings = reactive({
-  general: { publicContactEmail: '', publicContactPhone: '' },
+  general: { publicDescription: '', publicContactEmail: '', publicContactPhone: '' },
   inventory: { maxImagesPerItem: 10 },
   pricing: { defaultStrategy: 'median' },
   security: { sessionIdleMinutes: 60 },
@@ -63,6 +63,9 @@ onMounted(load);
     <form v-if="!isLoading" class="admin-workspace-grid" @submit.prevent="save">
       <fieldset class="showcase-panel">
         <legend>General</legend>
+        <label class="fixture-label" for="settings-description">Public seller description (optional)</label>
+        <p id="settings-description-help">Shown on public listing and product pages. Up to 2,000 characters. Clear to remove.</p>
+        <textarea id="settings-description" v-model="settings.general.publicDescription" class="fixture-input" rows="5" maxlength="2000" aria-describedby="settings-description-help" />
         <label class="fixture-label" for="settings-email">Public contact email</label>
         <input id="settings-email" v-model="settings.general.publicContactEmail" class="fixture-input" type="email" />
         <label class="fixture-label" for="settings-phone">Public contact phone</label>

apps/web/src/pages/ListingDetailPage.stories.js

@@ -1,5 +1,21 @@
+import { expect, within } from '@storybook/test';
 import ListingDetailPage from './ListingDetailPage.vue';
 
 export default { title: 'Pages/ListingDetailPage', component: ListingDetailPage };
 
 export const Overview = {};
+
+export const PublicSellerDescription = {
+  beforeEach: () => {
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = async () => new Response(JSON.stringify({ data: {
+      id: 'listing-1', name: 'Pikachu', productName: 'Pikachu', status: 'AVAILABLE',
+      askingPriceMinor: 2500, sellerDisplayName: 'Pika Collectibles',
+      sellerDescription: 'Independent Pokémon collector.', images: [], tags: [],
+    } }), { headers: { 'content-type': 'application/json' } });
+    return () => { globalThis.fetch = originalFetch; };
+  },
+  play: async ({ canvasElement }) => {
+    await expect(await within(canvasElement).findByText('Independent Pokémon collector.')).toBeVisible();
+  },
+};

apps/web/src/pages/ListingDetailPage.vue

@@ -45,6 +45,7 @@ onMounted(async () => {
       "
       :description="listing.notes"
       :images="listing.images"
+      :seller-description="listing.sellerDescription"
       :seller-display-name="listing.sellerDisplayName"
       :seller-contact-email="listing.sellerContactEmail"
       :seller-contact-phone="listing.sellerContactPhone"

apps/web/src/pages/ProductDetailPage.stories.js

@@ -1,5 +1,21 @@
+import { expect, within } from '@storybook/test';
 import ProductDetailPage from './ProductDetailPage.vue';
 
 export default { title: 'Pages/ProductDetailPage', component: ProductDetailPage };
 
 export const Overview = {};
+
+export const PublicSellerDescription = {
+  beforeEach: () => {
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = async () => new Response(JSON.stringify({ data: {
+      id: 'listing-1', name: 'Pikachu', productName: 'Pikachu', status: 'AVAILABLE',
+      askingPriceMinor: 2500, sellerDisplayName: 'Pika Collectibles',
+      sellerDescription: 'Independent Pokémon collector.', images: [], tags: [],
+    } }), { headers: { 'content-type': 'application/json' } });
+    return () => { globalThis.fetch = originalFetch; };
+  },
+  play: async ({ canvasElement }) => {
+    await expect(await within(canvasElement).findByText('Independent Pokémon collector.')).toBeVisible();
+  },
+};

apps/web/src/pages/ProductDetailPage.vue

@@ -37,6 +37,7 @@ onMounted(async () => {
         ...(product.cardNumber ? [{ label: 'Card number', value: product.cardNumber }] : []),
         ...(product.releaseYear ? [{ label: 'Release year', value: product.releaseYear }] : []),
       ]"
+      :seller-description="product.sellerDescription"
       :seller-display-name="product.sellerDisplayName"
       :seller-contact-email="product.sellerContactEmail"
       :seller-contact-phone="product.sellerContactPhone"