feat: surface listing publication blockers

apps/web/src/components/molecules/AdminListingStatus.vue

@@ -1,11 +1,17 @@
 <script setup>
-defineProps({
+import { computed } from 'vue';
+
+const props = defineProps({
   listing: { type: Object, required: true },
   blockers: { type: Array, default: () => [] },
   isSaving: { type: Boolean, default: false },
   errorMessage: { type: String, default: '' },
 });
 defineEmits(['publish', 'pending']);
+const computedBlockers = computed(() => props.blockers.length ? props.blockers : [
+  ...(props.listing.status === 'DRAFT' && props.listing.imageCount < 1 ? ['Add at least one image before publishing.'] : []),
+  ...(props.listing.inventoryStatus === 'SOLD' || props.listing.inventoryStatus === 'ARCHIVED' ? ['Sold or archived inventory cannot be published.'] : []),
+]);
 </script>
 
 <template>
@@ -16,12 +22,12 @@ defineEmits(['publish', 'pending']);
       <span class="fixture-label">${{ (listing.askingPriceMinor / 100).toFixed(2) }}</span>
     </div>
     <span class="status" :class="`status--${listing.status.toLowerCase()}`">{{ listing.status }}</span>
-    <ul v-if="blockers.length" class="admin-listing-status__blockers" aria-label="Publication blockers">
-      <li v-for="blocker in blockers" :key="blocker">{{ blocker }}</li>
+    <ul v-if="computedBlockers.length" class="admin-listing-status__blockers" aria-label="Publication blockers">
+      <li v-for="blocker in computedBlockers" :key="blocker">{{ blocker }}</li>
     </ul>
     <p v-if="errorMessage" class="state state--error" role="alert">{{ errorMessage }}</p>
     <div class="admin-listing-status__actions">
-      <button v-if="listing.status === 'DRAFT'" class="button button--primary" type="button" :disabled="isSaving || blockers.length > 0" @click="$emit('publish')">{{ isSaving ? 'Publishing...' : 'Publish' }}</button>
+      <button v-if="listing.status === 'DRAFT'" class="button button--primary" type="button" :disabled="isSaving || computedBlockers.length > 0" @click="$emit('publish')">{{ isSaving ? 'Publishing...' : 'Publish' }}</button>
       <button v-if="listing.status === 'DRAFT'" class="button button--secondary" type="button" :disabled="isSaving" @click="$emit('pending')">Mark pending</button>
     </div>
   </article>