@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/commerce/delivery/shipping-methods.stx

@@ -0,0 +1,346 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Shipping Methods')
+<div class="py-6">
+  <div class="mx-auto px-4 sm:px-6 md:px-8 max-w-7xl">
+    <TabNavigation modelValue="methods" :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">Shipping 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 Method
+          </button>
+        </div>
+        <div class="mt-4">
+          <SearchFilter
+            placeholder="Search shipping methods..."
+            @search="handleSearch"
+            class="w-full md:w-96"
+          />
+        </div>
+      </div>
+
+      <ShippingMethodsTable
+        :methods="paginatedShippingMethods"
+        @edit="handleEditMethod"
+        @delete="handleDeleteMethod"
+      />
+
+      <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 Shipping Method 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 Shipping Method</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="method-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Method Name</label>
+                  <div class="mt-2">
+                    <input type="text" id="method-name" x-model="newName" placeholder="Enter 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="method-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="method-description" x-model="newDescription" rows="3" placeholder="Enter method 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>
+                  <label for="base-rate" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Base Rate ($)</label>
+                  <div class="mt-2">
+                    <div class="relative rounded-md shadow-sm">
+                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                        <span class="text-gray-500 sm:text-sm">$</span>
+                      </div>
+                      <input type="number" id="base-rate" x-model.number="newBaseRate" step="0.01" min="0" class="block pl-7 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" />
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <label for="free-shipping" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Free Shipping Threshold ($)</label>
+                  <div class="mt-2">
+                    <div class="relative rounded-md shadow-sm">
+                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                        <span class="text-gray-500 sm:text-sm">$</span>
+                      </div>
+                      <input type="number" id="free-shipping" x-model.number="newFreeShipping" step="0.01" min="0" placeholder="Leave empty for no threshold" class="block pl-7 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" />
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <label for="method-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="method-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="addShippingMethod()" 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 Shipping Method 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 Shipping Method</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="edit-method-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Method Name</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-method-name" x-model="newName" placeholder="Enter 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-method-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-method-description" x-model="newDescription" rows="3" placeholder="Enter method 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>
+                  <label for="edit-base-rate" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Base Rate ($)</label>
+                  <div class="mt-2">
+                    <div class="relative rounded-md shadow-sm">
+                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                        <span class="text-gray-500 sm:text-sm">$</span>
+                      </div>
+                      <input type="number" id="edit-base-rate" x-model.number="newBaseRate" step="0.01" min="0" class="block pl-7 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" />
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <label for="edit-free-shipping" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Free Shipping Threshold ($)</label>
+                  <div class="mt-2">
+                    <div class="relative rounded-md shadow-sm">
+                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                        <span class="text-gray-500 sm:text-sm">$</span>
+                      </div>
+                      <input type="number" id="edit-free-shipping" x-model.number="newFreeShipping" step="0.01" min="0" placeholder="Leave empty for no threshold" class="block pl-7 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" />
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <label for="edit-method-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-method-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="saveShippingMethod()" 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 { useShippingMethods } from '../../../../functions/commerce/shippings/shipping-methods'
+import type { NewShippingMethod } from '../../../../types/defaults'
+// Shared tab nav config — formerly duplicated in every delivery page's
+// `<script server>` block (stacksjs/stacks#1838).
+import { deliveryTabs as tabs } from './tabs'
+
+interface ShippingMethod {
+  id?: number
+  name: string
+  description?: string
+  base_rate: number
+  free_shipping?: number
+  status: string
+}
+
+const { shippingMethods, createShippingMethod, fetchShippingMethods, updateShippingMethod, deleteShippingMethod } = useShippingMethods()
+
+const showAddModal = state(false)
+const showEditModal = state(false)
+const editingMethod = state<ShippingMethod | null>(null)
+
+const newName = state('')
+const newDescription = state('')
+const newBaseRate = state(0)
+const newFreeShipping = state<number | undefined>(undefined)
+const newStatus = state<'Active' | 'Inactive'>('Active')
+
+const searchQuery = state('')
+const currentPage = state(1)
+const itemsPerPage = state(5)
+
+const filteredShippingMethods = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const list = shippingMethods.value as ShippingMethod[]
+  if (!q)
+    return list
+  return list.filter(m =>
+    m.name.toLowerCase().includes(q)
+    || (m.description?.toLowerCase().includes(q) ?? false),
+  )
+})
+
+const paginatedShippingMethods = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredShippingMethods().slice(start, start + itemsPerPage())
+})
+
+const totalItems = derived(() => filteredShippingMethods().length)
+
+function resetForm(): void {
+  newName.set('')
+  newDescription.set('')
+  newBaseRate.set(0)
+  newFreeShipping.set(undefined)
+  newStatus.set('Active')
+}
+
+function openAddModal(): void {
+  resetForm()
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function openEditModal(method: ShippingMethod): void {
+  editingMethod.set(method)
+  newName.set(method.name)
+  newDescription.set(method.description || '')
+  newBaseRate.set(method.base_rate)
+  newFreeShipping.set(method.free_shipping)
+  newStatus.set(method.status as 'Active' | 'Inactive')
+  showEditModal.set(true)
+}
+
+function closeEditModal(): void {
+  showEditModal.set(false)
+  editingMethod.set(null)
+}
+
+async function addShippingMethod(): Promise<void> {
+  const payload: NewShippingMethod = {
+    name: newName(),
+    description: newDescription(),
+    base_rate: newBaseRate(),
+    free_shipping: newFreeShipping(),
+    status: newStatus(),
+  } as NewShippingMethod
+  try {
+    await createShippingMethod(payload)
+    closeAddModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to create shipping method:', error)
+  }
+}
+
+async function saveShippingMethod(): Promise<void> {
+  const target = editingMethod()
+  if (!target)
+    return
+  try {
+    await updateShippingMethod({
+      ...target,
+      name: newName(),
+      description: newDescription(),
+      base_rate: newBaseRate(),
+      free_shipping: newFreeShipping(),
+      status: newStatus(),
+    } as ShippingMethod)
+    closeEditModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to update shipping method:', error)
+  }
+}
+
+function handleSearch(query: string): void {
+  searchQuery.set(query)
+  currentPage.set(1)
+}
+
+function handleEditMethod(method: ShippingMethod): void {
+  openEditModal(method)
+}
+
+async function handleDeleteMethod(method: ShippingMethod): Promise<void> {
+  // eslint-disable-next-line no-alert
+  if (!confirm(`Are you sure you want to delete ${method.name}?`))
+    return
+  try {
+    await deleteShippingMethod(method.id as number)
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to delete shipping method:', 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 fetchShippingMethods()
+})
+</script>
+
+@endsection