@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/commerce/delivery/digital-delivery.stx

@@ -0,0 +1,332 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Digital Delivery')
+<div class="py-6">
+  <div class="mx-auto px-4 sm:px-6 md:px-8 max-w-7xl">
+    <TabNavigation modelValue="digital" :tabs="tabs" />
+
+    <div class="overflow-hidden mt-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-neutral-700">
+        <div class="flex items-center justify-between">
+          <h2 class="font-medium text-gray-900 text-lg dark:text-white">Digital Delivery Methods</h2>
+          <button @click="openAddModal()" type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">
+            <div class="mr-2 h-5 w-5 i-hugeicons-plus-sign"></div>
+            Add Digital Method
+          </button>
+        </div>
+        <div class="mt-4">
+          <div class="w-full md:w-96"><SearchFilter placeholder="Search digital delivery methods..." @search="handleSearch" /></div>
+        </div>
+      </div>
+
+      <DigitalDeliveryTable :methods="paginatedDigitalDeliveries" @edit="openEditModal" @delete="handleDeleteDigitalMethod" />
+
+      <div class="px-4 py-3 bg-gray-50 dark:bg-neutral-900 border-gray-200 border-t dark:border-neutral-700">
+        <Pagination :currentPage="currentPage" :totalItems="totalItems" :itemsPerPage="itemsPerPage" @prev="handlePrevPage" @next="handleNextPage" @page="handlePageChange" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Add Digital Delivery Modal -->
+  <div :show="showAddModal" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeAddModal()"></div>
+      <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
+        <div>
+          <div class="mt-3 sm:mt-5 text-center">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Add New Digital Delivery Method</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="delivery-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Name</label>
+                  <div class="mt-2">
+                    <input type="text" id="delivery-name" x-model="newName" placeholder="Enter delivery method name" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                  </div>
+                </div>
+                <div>
+                  <label for="delivery-description" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Description</label>
+                  <div class="mt-2">
+                    <textarea id="delivery-description" x-model="newDescription" rows="3" placeholder="Enter description" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm"></textarea>
+                  </div>
+                </div>
+                <div class="grid gap-4 grid-cols-2">
+                  <div>
+                    <label for="delivery-download-limit" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Download Limit</label>
+                    <div class="mt-2">
+                      <input type="number" id="delivery-download-limit" x-model.number="newDownloadLimit" placeholder="Leave empty for unlimited" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                    </div>
+                  </div>
+                  <div>
+                    <label for="delivery-expiry-days" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Expiry Days</label>
+                    <div class="mt-2">
+                      <input type="number" id="delivery-expiry-days" x-model.number="newExpiryDays" placeholder="Leave empty for no expiry" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                    </div>
+                  </div>
+                </div>
+                <div class="space-y-3">
+                  <div class="flex items-center">
+                    <input id="delivery-requires-login" type="checkbox" x-model="newRequiresLogin" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+                    <label for="delivery-requires-login" class="block ml-2 text-gray-900 text-sm dark:text-neutral-200">Requires Login</label>
+                  </div>
+                  <div class="flex items-center">
+                    <input id="delivery-automatic-delivery" type="checkbox" x-model="newAutomaticDelivery" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+                    <label for="delivery-automatic-delivery" class="block ml-2 text-gray-900 text-sm dark:text-neutral-200">Automatic Delivery</label>
+                  </div>
+                </div>
+                <div>
+                  <label for="delivery-status" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Status</label>
+                  <div class="mt-2">
+                    <select id="delivery-status" x-model="newStatus" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
+                      <option value="Active">Active</option>
+                      <option value="Inactive">Inactive</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+          <button type="button" @click="addDigitalDelivery()" class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Add Method</button>
+          <button type="button" @click="closeAddModal()" class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Edit Digital Delivery Modal -->
+  <div :show="showEditModal" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeEditModal()"></div>
+      <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
+        <div>
+          <div class="mt-3 sm:mt-5 text-center">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Edit Digital Delivery Method</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="edit-delivery-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Name</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-delivery-name" x-model="newName" placeholder="Enter delivery method name" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                  </div>
+                </div>
+                <div>
+                  <label for="edit-delivery-description" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Description</label>
+                  <div class="mt-2">
+                    <textarea id="edit-delivery-description" x-model="newDescription" rows="3" placeholder="Enter description" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm"></textarea>
+                  </div>
+                </div>
+                <div class="grid gap-4 grid-cols-2">
+                  <div>
+                    <label for="edit-delivery-download-limit" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Download Limit</label>
+                    <div class="mt-2">
+                      <input type="number" id="edit-delivery-download-limit" x-model.number="newDownloadLimit" placeholder="Leave empty for unlimited" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                    </div>
+                  </div>
+                  <div>
+                    <label for="edit-delivery-expiry-days" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Expiry Days</label>
+                    <div class="mt-2">
+                      <input type="number" id="edit-delivery-expiry-days" x-model.number="newExpiryDays" placeholder="Leave empty for no expiry" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                    </div>
+                  </div>
+                </div>
+                <div class="space-y-3">
+                  <div class="flex items-center">
+                    <input id="edit-delivery-requires-login" type="checkbox" x-model="newRequiresLogin" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+                    <label for="edit-delivery-requires-login" class="block ml-2 text-gray-900 text-sm dark:text-neutral-200">Requires Login</label>
+                  </div>
+                  <div class="flex items-center">
+                    <input id="edit-delivery-automatic-delivery" type="checkbox" x-model="newAutomaticDelivery" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+                    <label for="edit-delivery-automatic-delivery" class="block ml-2 text-gray-900 text-sm dark:text-neutral-200">Automatic Delivery</label>
+                  </div>
+                </div>
+                <div>
+                  <label for="edit-delivery-status" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Status</label>
+                  <div class="mt-2">
+                    <select id="edit-delivery-status" x-model="newStatus" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
+                      <option value="Active">Active</option>
+                      <option value="Inactive">Inactive</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+          <button type="button" @click="saveDigitalDelivery()" class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Save Changes</button>
+          <button type="button" @click="closeEditModal()" class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+import { useDigitalDeliveries } from '../../../../functions/commerce/shippings/digital-deliveries'
+// Shared tab nav config — formerly duplicated in every delivery page's
+// `<script server>` block (stacksjs/stacks#1838).
+import { deliveryTabs as tabs } from './tabs'
+
+interface DigitalDelivery {
+  id?: number
+  name: string
+  description: string
+  download_limit?: number
+  expiry_days: number
+  requires_login?: boolean
+  automatic_delivery?: boolean
+  status?: string
+}
+
+const { digitalDeliveries, createDigitalDelivery, fetchDigitalDeliveries, updateDigitalDelivery, deleteDigitalDelivery } = useDigitalDeliveries()
+
+const showAddModal = state(false)
+const showEditModal = state(false)
+const editingDelivery = state<DigitalDelivery | null>(null)
+
+const newName = state('')
+const newDescription = state('')
+const newDownloadLimit = state<number | undefined>(undefined)
+const newExpiryDays = state(30)
+const newRequiresLogin = state(false)
+const newAutomaticDelivery = state(true)
+const newStatus = state('Active')
+
+const searchQuery = state('')
+const currentPage = state(1)
+const itemsPerPage = state(5)
+
+const filteredDigitalDeliveries = derived(() => {
+  const list = (digitalDeliveries.value as DigitalDelivery[]) || []
+  const q = searchQuery().toLowerCase()
+  if (!q)
+    return list
+  return list.filter(d => d.name.toLowerCase().includes(q) || d.description.toLowerCase().includes(q))
+})
+
+const paginatedDigitalDeliveries = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredDigitalDeliveries().slice(start, start + itemsPerPage())
+})
+
+const totalItems = derived(() => filteredDigitalDeliveries().length)
+
+function resetForm(): void {
+  newName.set('')
+  newDescription.set('')
+  newDownloadLimit.set(undefined)
+  newExpiryDays.set(30)
+  newRequiresLogin.set(false)
+  newAutomaticDelivery.set(true)
+  newStatus.set('Active')
+}
+
+function openAddModal(): void {
+  resetForm()
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function openEditModal(delivery: DigitalDelivery): void {
+  editingDelivery.set(delivery)
+  newName.set(delivery.name)
+  newDescription.set(delivery.description)
+  newDownloadLimit.set(delivery.download_limit ?? undefined)
+  newExpiryDays.set(delivery.expiry_days ?? 30)
+  newRequiresLogin.set(delivery.requires_login ?? false)
+  newAutomaticDelivery.set(delivery.automatic_delivery ?? true)
+  newStatus.set(delivery.status ?? 'Active')
+  showEditModal.set(true)
+}
+
+function closeEditModal(): void {
+  showEditModal.set(false)
+  editingDelivery.set(null)
+}
+
+async function addDigitalDelivery(): Promise<void> {
+  try {
+    await createDigitalDelivery({
+      name: newName(),
+      description: newDescription(),
+      download_limit: newDownloadLimit(),
+      expiry_days: newExpiryDays(),
+      requires_login: newRequiresLogin(),
+      automatic_delivery: newAutomaticDelivery(),
+      status: newStatus(),
+    } as DigitalDelivery)
+    closeAddModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to create digital delivery:', error)
+  }
+}
+
+async function saveDigitalDelivery(): Promise<void> {
+  const target = editingDelivery()
+  if (!target)
+    return
+  try {
+    await updateDigitalDelivery({
+      ...target,
+      name: newName(),
+      description: newDescription(),
+      download_limit: newDownloadLimit(),
+      expiry_days: newExpiryDays(),
+      requires_login: newRequiresLogin(),
+      automatic_delivery: newAutomaticDelivery(),
+      status: newStatus(),
+    })
+    closeEditModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to update digital delivery:', error)
+  }
+}
+
+function handleSearch(query: string): void {
+  searchQuery.set(query)
+  currentPage.set(1)
+}
+
+async function handleDeleteDigitalMethod(delivery: DigitalDelivery): Promise<void> {
+  // eslint-disable-next-line no-alert
+  if (!confirm('Are you sure you want to delete this digital delivery method?'))
+    return
+  try {
+    await deleteDigitalDelivery(delivery.id as number)
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to delete digital delivery:', error)
+  }
+}
+
+function handlePrevPage(): void {
+  if (currentPage() > 1)
+    currentPage.update(p => p - 1)
+}
+
+function handleNextPage(): void {
+  const totalPages = Math.ceil(totalItems() / itemsPerPage())
+  if (currentPage() < totalPages)
+    currentPage.update(p => p + 1)
+}
+
+function handlePageChange(page: number): void {
+  currentPage.set(page)
+}
+
+onMount(async () => {
+  await fetchDigitalDeliveries()
+})
+</script>
+
+@endsection