@commercejs/ui 0.1.0

package/src/runtime/components/wholesale/CPriceTierTable.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { PriceTier } from '@commercejs/types'
+
+/**
+ * CPriceTierTable — Displays volume-based pricing tiers for B2B/wholesale products.
+ */
+
+export interface PriceTierTableProps {
+  /** Price tiers from product.priceTiers */
+  tiers: PriceTier[]
+  /** Currently selected / applicable quantity */
+  currentQuantity?: number
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    row: any
+    activeRow: any
+  }>
+}
+
+const props = withDefaults(defineProps<PriceTierTableProps>(), {
+  currentQuantity: 0,
+})
+
+function t(value: any): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  return value.en || value.ar || Object.values(value)[0] || ''
+}
+
+function isActiveTier(tier: PriceTier): boolean {
+  if (props.currentQuantity < tier.minQuantity) return false
+  if (tier.maxQuantity && props.currentQuantity > tier.maxQuantity) return false
+  return true
+}
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.priceTierTable ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [base[slot], props.ui?.[slot as keyof typeof props.ui]]
+  return {
+    root: merge('root'),
+    row: merge('row'),
+    activeRow: merge('activeRow'),
+  }
+})
+</script>
+
+<template>
+  <div :class="['overflow-hidden rounded-lg ring ring-default', slotClasses.root]">
+    <table class="w-full text-sm">
+      <thead class="bg-elevated text-muted">
+        <tr>
+          <th class="text-start py-2 px-3 font-medium">Quantity</th>
+          <th class="text-start py-2 px-3 font-medium">Price / Unit</th>
+          <th v-if="tiers.some(t => t.label)" class="text-start py-2 px-3 font-medium">Tier</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(tier, i) in tiers"
+          :key="i"
+          :class="[
+            'border-t border-default transition-colors',
+            isActiveTier(tier) ? 'bg-primary/5 font-medium' : '',
+            slotClasses.row,
+            isActiveTier(tier) ? slotClasses.activeRow : '',
+          ]"
+        >
+          <td class="py-2.5 px-3 text-highlighted">
+            {{ tier.minQuantity }}{{ tier.maxQuantity ? ` – ${tier.maxQuantity}` : '+' }}
+          </td>
+          <td class="py-2.5 px-3">
+            <span :class="isActiveTier(tier) ? 'text-primary font-semibold' : 'text-highlighted'">
+              {{ tier.unitPrice.formatted }}
+            </span>
+          </td>
+          <td v-if="tiers.some(t => t.label)" class="py-2.5 px-3 text-muted">
+            {{ t(tier.label) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/runtime/components/wholesale/CQuoteRequestForm.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { CreateQuoteInput } from '@commercejs/types'
+
+/**
+ * CQuoteRequestForm — B2B Request-for-Quote form.
+ * Allows buyers to submit RFQ with line items, target prices, and company info.
+ */
+
+export interface QuoteRequestFormProps {
+  /** Pre-populated items (e.g., from cart) */
+  initialItems?: Array<{
+    productId: string
+    productName?: string
+    quantity: number
+    targetPrice?: number
+  }>
+  /** Whether the form is submitting */
+  loading?: boolean
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    items: any
+    contact: any
+  }>
+}
+
+const props = withDefaults(defineProps<QuoteRequestFormProps>(), {
+  initialItems: () => [],
+  loading: false,
+})
+
+const emit = defineEmits<{
+  'submit': [input: CreateQuoteInput]
+}>()
+
+// Form state
+const items = ref(props.initialItems.map(item => ({
+  productId: item.productId,
+  productName: item.productName || '',
+  quantity: item.quantity,
+  targetPrice: item.targetPrice,
+  note: '',
+})))
+
+const companyName = ref('')
+const contactEmail = ref('')
+const note = ref('')
+
+function addItem() {
+  items.value.push({ productId: '', productName: '', quantity: 1, targetPrice: undefined, note: '' })
+}
+
+function removeItem(index: number) {
+  items.value.splice(index, 1)
+}
+
+function handleSubmit() {
+  emit('submit', {
+    items: items.value.map(item => ({
+      productId: item.productId,
+      quantity: item.quantity,
+      targetPrice: item.targetPrice,
+      note: item.note || undefined,
+    })),
+    companyName: companyName.value || undefined,
+    contactEmail: contactEmail.value,
+    note: note.value || undefined,
+  })
+}
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.quoteRequestForm ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [base[slot], props.ui?.[slot as keyof typeof props.ui]]
+  return {
+    root: merge('root'),
+    items: merge('items'),
+    contact: merge('contact'),
+  }
+})
+</script>
+
+<template>
+  <form :class="['space-y-6', slotClasses.root]" @submit.prevent="handleSubmit">
+    <h3 class="text-lg font-semibold text-highlighted">Request for Quote</h3>
+
+    <!-- Line items -->
+    <div :class="['space-y-4', slotClasses.items]">
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        class="rounded-lg bg-elevated p-4 ring ring-default relative"
+      >
+        <UButton
+          v-if="items.length > 1"
+          icon="i-heroicons-x-mark-20-solid"
+          variant="ghost"
+          color="error"
+          size="xs"
+          class="absolute top-2 end-2"
+          @click="removeItem(i)"
+        />
+
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          <UFormField label="Product">
+            <UInput v-model="item.productName" :placeholder="item.productId || 'Product ID'" disabled size="sm" />
+          </UFormField>
+          <UFormField label="Quantity">
+            <UInput v-model.number="item.quantity" type="number" min="1" size="sm" required />
+          </UFormField>
+          <UFormField label="Target Price (optional)">
+            <UInput v-model.number="item.targetPrice" type="number" min="0" step="0.01" placeholder="Your ideal price" size="sm" />
+          </UFormField>
+        </div>
+        <UFormField label="Note" class="mt-2">
+          <UInput v-model="item.note" placeholder="Special requirements…" size="sm" />
+        </UFormField>
+      </div>
+
+      <UButton variant="outline" size="sm" @click="addItem" icon="i-heroicons-plus-20-solid">
+        Add Item
+      </UButton>
+    </div>
+
+    <USeparator />
+
+    <!-- Contact info -->
+    <div :class="['grid grid-cols-1 sm:grid-cols-2 gap-4', slotClasses.contact]">
+      <UFormField label="Company Name">
+        <UInput v-model="companyName" placeholder="Your company" />
+      </UFormField>
+      <UFormField label="Contact Email" required>
+        <UInput v-model="contactEmail" type="email" placeholder="buyer@company.com" required />
+      </UFormField>
+    </div>
+
+    <UFormField label="Additional Notes">
+      <UTextarea v-model="note" placeholder="Any additional requirements, delivery timeline, etc." rows="3" />
+    </UFormField>
+
+    <UButton type="submit" block size="lg" color="primary" :loading="loading">
+      Submit Quote Request
+    </UButton>
+  </form>
+</template>

package/src/runtime/components/wishlist/CWishlistGrid.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { WishlistItem, Product } from '@commercejs/types'
+
+/**
+ * CWishlistGrid — Displays wishlist items in a responsive grid.
+ * Composes CProductCard for each item with remove + add-to-cart actions.
+ */
+
+export interface WishlistGridProps {
+  items: WishlistItem[]
+  /** Number of grid columns (2–6) */
+  columns?: 2 | 3 | 4 | 5 | 6
+  /** Whether any action is loading */
+  loading?: boolean
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    item: any
+    actions: any
+  }>
+}
+
+const props = withDefaults(defineProps<WishlistGridProps>(), {
+  columns: 4,
+  loading: false,
+})
+
+const emit = defineEmits<{
+  'remove': [itemId: string]
+  'add-to-cart': [product: Product]
+}>()
+
+const colClass = computed(() => {
+  const map: Record<number, string> = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+    4: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4',
+    5: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5',
+    6: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6',
+  }
+  return map[props.columns] || map[4]
+})
+
+// Resolve theme
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.wishlistGrid ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [base[slot], props.ui?.[slot as keyof typeof props.ui]]
+  return {
+    root: merge('root'),
+    item: merge('item'),
+    actions: merge('actions'),
+  }
+})
+</script>
+
+<template>
+  <div v-if="items.length === 0">
+    <CEmptyState
+      icon="i-heroicons-heart"
+      title="Your wishlist is empty"
+      description="Save your favorite products to find them later"
+      action-label="Start Shopping"
+      action-to="/products"
+    />
+  </div>
+
+  <div v-else :class="['grid gap-4', colClass, slotClasses.root]">
+    <div v-for="item in items" :key="item.id" :class="['relative group', slotClasses.item]">
+      <CProductCard :product="item.product" />
+
+      <!-- Wishlist-specific actions overlay -->
+      <div :class="['absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/60 to-transparent p-3 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity', slotClasses.actions]">
+        <UButton
+          size="xs"
+          color="primary"
+          class="flex-1"
+          :loading="loading"
+          @click="emit('add-to-cart', item.product)"
+        >
+          <UIcon name="i-heroicons-shopping-cart-20-solid" class="me-1" />
+          Add to Cart
+        </UButton>
+        <UButton
+          icon="i-heroicons-trash-20-solid"
+          size="xs"
+          variant="ghost"
+          color="error"
+          @click="emit('remove', item.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>