feat: free edit and publish/unpublish toggle for paid listings within 30-day period

js/components/pages/page-my-listings.js

@@ -1,6 +1,7 @@
 import { t, i18n } from '../../i18n.js'
 import { directus } from '../../services/directus.js'
 import { auth } from '../../services/auth.js'
+import { listingsService } from '../../services/listings.js'
 import { escapeHTML } from '../../utils/helpers.js'
 import '../listing-card.js'
 import '../skeleton-card.js'
@@ -112,7 +113,7 @@ class PageMyListings extends HTMLElement {
             const response = await directus.getListings({
                 fields: [
                     'id', 'status', 'title', 'slug', 'price', 'currency',
-                    'condition', 'payment_status', 'expires_at', 'date_created', 'user_created',
+                    'condition', 'payment_status', 'paid_at', 'expires_at', 'date_created', 'user_created',
                     'images.directus_files_id.id',
                     'location.id', 'location.name'
                 ],
@@ -142,7 +143,7 @@ class PageMyListings extends HTMLElement {
         if (listing.status === 'archived') {
             return `<span class="status-badge status-archived">${t('myListings.status.archived')}</span>`
         }
-        if (listing.status === 'draft' && listing.payment_status !== 'processing' && listing.payment_status !== 'pending') {
+        if (listing.status === 'draft' && listing.payment_status !== 'processing' && listing.payment_status !== 'pending' && !listingsService.isPaidAndActive(listing)) {
             return `<span class="status-badge status-draft">${t('myListings.status.draft')}</span>`
         }
         return ''
@@ -209,12 +210,25 @@ class PageMyListings extends HTMLElement {
             `
         }
 
-        return this.listings.map(listing => {
+        const html = this.listings.map(listing => {
             const imageId = listing.images?.[0]?.directus_files_id?.id || listing.images?.[0]?.directus_files_id
             const imageUrl = imageId ? directus.getThumbnailUrl(imageId, 300) : ''
             const locationName = listing.location?.name || ''
             const statusBadge = this.getStatusBadge(listing)
 
+            const paidActive = listingsService.isPaidAndActive(listing)
+            const isPublished = listing.status === 'published'
+            const isDraftPaid = listing.status === 'draft' && paidActive
+            let toggleBtn = ''
+            if (isPublished || isDraftPaid) {
+                const label = isPublished ? t('myListings.unpublish') : t('myListings.republish')
+                toggleBtn = /* html */`
+                    <button class="btn-toggle-status" data-id="${listing.id}" data-status="${isPublished ? 'draft' : 'published'}">
+                        ${label}
+                    </button>
+                `
+            }
+
             return /* html */`
                 <div class="listing-wrapper">
                     ${statusBadge}
@@ -229,9 +243,38 @@ class PageMyListings extends HTMLElement {
                         payment-status="${listing.payment_status || ''}"
                         status="${listing.status || ''}"
                     ></listing-card>
+                    ${toggleBtn}
                 </div>
             `
         }).join('')
+
+        setTimeout(() => this.setupToggleListeners(), 0)
+        return html
+    }
+
+    setupToggleListeners() {
+        this.querySelectorAll('.btn-toggle-status').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                const id = btn.dataset.id
+                const newStatus = btn.dataset.status
+                this.toggleListingStatus(id, newStatus)
+            })
+        })
+    }
+
+    async toggleListingStatus(id, newStatus) {
+        try {
+            await directus.updateListing(id, { status: newStatus })
+            const listing = this.listings.find(l => l.id === id)
+            if (listing) {
+                listing.status = newStatus
+                this.updateContent()
+            }
+        } catch (err) {
+            console.error('Failed to toggle listing status:', err)
+        }
     }
 }
 
@@ -283,6 +326,24 @@ style.textContent = /* css */`
         text-decoration: line-through;
     }
 
+    page-my-listings .btn-toggle-status {
+        display: block;
+        width: 100%;
+        padding: var(--space-xs) var(--space-sm);
+        margin-top: var(--space-xs);
+        background: var(--color-bg-secondary);
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-sm);
+        color: var(--color-text-secondary);
+        font-size: var(--font-size-sm);
+        cursor: pointer;
+        transition: background-color var(--transition-fast);
+    }
+
+    page-my-listings .btn-toggle-status:hover {
+        background: var(--color-bg-tertiary);
+    }
+
     page-my-listings .empty-state {
         grid-column: 1 / -1;
         text-align: center;