feat: surface seller contact methods on public detail pages

apps/web/src/components/organisms/CollectibleDetail.stories.js

@@ -24,6 +24,9 @@ export const ListingDetail = {
       { id: "front", label: "FRONT", alt: "Front of Charizard ex" },
       { id: "back", label: "BACK", alt: "Back of Charizard ex" },
     ],
+    sellerDisplayName: "Pika Collectibles",
+    sellerContactEmail: "hello@pika.example",
+    sellerContactPhone: "555-0100",
   },
 };
 

apps/web/src/components/organisms/CollectibleDetail.vue

@@ -15,6 +15,9 @@ defineProps({
   description: { type: String, default: "" },
   facts: { type: Array, default: () => [] },
   images: { type: Array, default: () => [] },
+  sellerDisplayName: { type: String, default: "" },
+  sellerContactEmail: { type: String, default: "" },
+  sellerContactPhone: { type: String, default: "" },
 });
 </script>
 
@@ -47,6 +50,14 @@ defineProps({
           <dd>{{ fact.value }}</dd>
         </div>
       </dl>
+      <section v-if="sellerDisplayName" class="collectible-detail__seller" aria-labelledby="collectible-detail-seller-title">
+        <p id="collectible-detail-seller-title" class="catalog-kicker">Sold by</p>
+        <p class="collectible-detail__seller-name">{{ sellerDisplayName }}</p>
+        <ul v-if="sellerContactEmail || sellerContactPhone" class="collectible-detail__seller-contacts">
+          <li v-if="sellerContactEmail"><a :href="`mailto:${sellerContactEmail}`">{{ sellerContactEmail }}</a></li>
+          <li v-if="sellerContactPhone"><a :href="`tel:${sellerContactPhone}`">{{ sellerContactPhone }}</a></li>
+        </ul>
+      </section>
     </div>
   </article>
 </template>
@@ -72,6 +83,23 @@ defineProps({
   align-items: center;
   gap: var(--space-4);
 }
+.collectible-detail__seller {
+  border-top: var(--border-thin) solid var(--color-border);
+  padding-top: var(--space-4);
+}
+.collectible-detail__seller-name {
+  font-weight: var(--weight-bold);
+}
+.collectible-detail__seller-contacts {
+  display: grid;
+  gap: var(--space-1);
+  margin: var(--space-2) 0 0;
+  padding: 0;
+  list-style: none;
+}
+.collectible-detail__seller-contacts a {
+  color: var(--color-interactive-text);
+}
 @media (max-width: 768px) {
   .collectible-detail {
     grid-template-columns: 1fr;

apps/web/src/pages/ListingDetailPage.vue

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

apps/web/src/pages/ProductDetailPage.vue

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