@commercejs/ui 0.1.0

package/src/runtime/components/event/CEventCard.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { Product, EventProductMeta } from '@commercejs/types'
+
+/**
+ * CEventCard — Product card for event/ticket products.
+ * Shows event date, venue, virtual badge, and ticket purchase CTA.
+ */
+
+export interface EventCardProps {
+  product: Product
+  event?: EventProductMeta
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    imageWrapper: any
+    dateOverlay: any
+    body: any
+    title: any
+    meta: any
+    actions: any
+  }>
+}
+
+const props = defineProps<EventCardProps>()
+
+const emit = defineEmits<{
+  'get-tickets': [product: Product]
+}>()
+
+const eventMeta = computed(() => props.event || props.product.event)
+
+function t(value: any): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  return value.en || value.ar || Object.values(value)[0] || ''
+}
+
+const productName = computed(() => t(props.product.name))
+const mainImage = computed(() => props.product.primaryImage || props.product.gallery?.[0])
+
+const eventDate = computed(() => {
+  if (!eventMeta.value?.startDate) return null
+  return new Date(eventMeta.value.startDate)
+})
+
+const formattedMonth = computed(() => eventDate.value?.toLocaleString('en', { month: 'short' }).toUpperCase())
+const formattedDay = computed(() => eventDate.value?.getDate())
+const formattedTime = computed(() => eventDate.value?.toLocaleString('en', { hour: 'numeric', minute: '2-digit' }))
+
+const spotsLeft = computed(() => {
+  if (!eventMeta.value?.capacity) return null
+  return eventMeta.value.capacity
+})
+
+// Resolve theme
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.eventCard ?? {})
+
+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'),
+    imageWrapper: merge('imageWrapper'),
+    dateOverlay: merge('dateOverlay'),
+    body: merge('body'),
+    title: merge('title'),
+    meta: merge('meta'),
+    actions: merge('actions'),
+  }
+})
+</script>
+
+<template>
+  <div :class="['group relative rounded-lg overflow-hidden ring ring-default bg-default hover:shadow-lg transition-all duration-200', slotClasses.root]">
+    <!-- Image -->
+    <div :class="['relative aspect-[16/9] overflow-hidden bg-elevated', slotClasses.imageWrapper]">
+      <img
+        v-if="mainImage"
+        :src="mainImage.url"
+        :alt="mainImage.alt || productName"
+        class="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+      />
+
+      <!-- Date overlay -->
+      <div v-if="eventDate" :class="['absolute top-3 start-3 bg-default/90 backdrop-blur-sm rounded-lg w-14 text-center py-1.5 ring ring-default', slotClasses.dateOverlay]">
+        <span class="text-[10px] font-bold text-primary block leading-none">{{ formattedMonth }}</span>
+        <span class="text-xl font-black text-highlighted block leading-tight">{{ formattedDay }}</span>
+      </div>
+
+      <!-- Virtual badge -->
+      <UBadge v-if="eventMeta?.isVirtual" color="info" size="sm" class="absolute top-3 end-3">
+        <UIcon name="i-heroicons-video-camera" class="me-0.5" />
+        Online
+      </UBadge>
+    </div>
+
+    <!-- Body -->
+    <div :class="['p-4 space-y-2', slotClasses.body]">
+      <slot name="title" :name="productName">
+        <h3 :class="['font-medium text-sm text-highlighted line-clamp-2', slotClasses.title]">{{ productName }}</h3>
+      </slot>
+
+      <!-- Event meta -->
+      <div :class="['space-y-1 text-xs text-muted', slotClasses.meta]">
+        <div v-if="formattedTime" class="flex items-center gap-1">
+          <UIcon name="i-heroicons-clock" />
+          <span>{{ formattedTime }}</span>
+        </div>
+        <div v-if="eventMeta?.venue || eventMeta?.location" class="flex items-center gap-1">
+          <UIcon :name="eventMeta.isVirtual ? 'i-heroicons-globe-alt' : 'i-heroicons-map-pin'" />
+          <span class="line-clamp-1">{{ t(eventMeta.venue) || eventMeta.location }}</span>
+        </div>
+        <div v-if="spotsLeft" class="flex items-center gap-1">
+          <UIcon name="i-heroicons-users" />
+          <span>{{ spotsLeft }} spots available</span>
+        </div>
+      </div>
+
+      <!-- Price + CTA -->
+      <div class="flex items-center justify-between pt-1">
+        <CProductPrice v-if="product.price" :price="product.price" size="sm" />
+        <UButton size="xs" color="primary" @click="emit('get-tickets', product)">
+          Get Tickets
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>

package/src/runtime/components/gift-card/CGiftCardBalance.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { GiftCard, RedeemGiftCardInput } from '@commercejs/types'
+
+/**
+ * CGiftCardBalance — Displays gift card balance and redeem form.
+ * Used at checkout to apply gift card codes.
+ */
+
+export interface GiftCardBalanceProps {
+  /** Applied gift card (after lookup) */
+  giftCard?: GiftCard | null
+  /** Whether a lookup or redeem is in progress */
+  loading?: boolean
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    card: any
+    form: any
+  }>
+}
+
+const props = withDefaults(defineProps<GiftCardBalanceProps>(), {
+  giftCard: null,
+  loading: false,
+})
+
+const emit = defineEmits<{
+  'lookup': [code: string]
+  'redeem': [input: RedeemGiftCardInput]
+}>()
+
+const code = ref('')
+
+function handleLookup() {
+  if (code.value.trim()) {
+    emit('lookup', code.value.trim())
+  }
+}
+
+function handleRedeem() {
+  emit('redeem', { code: code.value.trim() })
+}
+
+const statusColor = computed(() => {
+  if (!props.giftCard) return 'neutral'
+  const map: Record<string, string> = {
+    active: 'success',
+    inactive: 'warning',
+    redeemed: 'neutral',
+    expired: 'error',
+    cancelled: 'error',
+  }
+  return map[props.giftCard.status] || 'neutral'
+})
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.giftCardBalance ?? {})
+
+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'),
+    card: merge('card'),
+    form: merge('form'),
+  }
+})
+</script>
+
+<template>
+  <div :class="['space-y-4', slotClasses.root]">
+    <!-- Code input -->
+    <div :class="['flex gap-2', slotClasses.form]">
+      <UInput
+        v-model="code"
+        placeholder="Enter gift card code"
+        class="flex-1"
+        :disabled="loading"
+        @keyup.enter="handleLookup"
+      />
+      <UButton @click="handleLookup" :loading="loading" color="neutral" variant="outline">
+        Check Balance
+      </UButton>
+    </div>
+
+    <!-- Card details -->
+    <div v-if="giftCard" :class="['rounded-xl bg-elevated ring ring-default p-5 space-y-3', slotClasses.card]">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-gift" class="text-primary text-lg" />
+          <span class="font-mono text-sm text-muted">{{ giftCard.code }}</span>
+        </div>
+        <UBadge :color="statusColor as any" size="sm">{{ giftCard.status }}</UBadge>
+      </div>
+
+      <div class="flex items-baseline gap-2">
+        <span class="text-3xl font-bold text-highlighted">{{ giftCard.currentBalance.formatted }}</span>
+        <span v-if="giftCard.currentBalance.amount !== giftCard.initialBalance.amount" class="text-sm text-muted">
+          of {{ giftCard.initialBalance.formatted }}
+        </span>
+      </div>
+
+      <div v-if="giftCard.expiresAt" class="text-xs text-muted">
+        Expires: {{ new Date(giftCard.expiresAt).toLocaleDateString() }}
+      </div>
+
+      <UButton
+        v-if="giftCard.status === 'active'"
+        block
+        color="primary"
+        :loading="loading"
+        @click="handleRedeem"
+      >
+        Apply to Order
+      </UButton>
+    </div>
+  </div>
+</template>

package/src/runtime/components/gift-card/CGiftCardForm.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type { GiftCard, PurchaseGiftCardInput } from '@commercejs/types'
+import { useFormField } from '@nuxt/ui/runtime/composables/useFormField.js'
+import { ref, computed, nextTick } from 'vue'
+
+/**
+ * CGiftCardForm — Gift card purchase form.
+ * Allows customers to select amount, recipient details, and personalize the card.
+ */
+
+export interface GiftCardFormProps {
+  /** Pre-defined amount options */
+  amounts?: number[]
+  /** Currency code */
+  currency?: string
+  /** Whether the form is submitting */
+  loading?: boolean
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    amounts: any
+    recipient: any
+  }>
+}
+
+const props = withDefaults(defineProps<GiftCardFormProps>(), {
+  amounts: () => [25, 50, 100, 150, 200, 500],
+  currency: 'SAR',
+  loading: false,
+})
+
+const emit = defineEmits<{
+  'submit': [input: PurchaseGiftCardInput]
+}>()
+
+const selectedAmount = ref<number | null>(null)
+const customAmount = ref<number | null>(null)
+const recipientEmail = ref('')
+const recipientName = ref('')
+const senderName = ref('')
+const message = ref('')
+const isDigital = ref(true)
+
+const finalAmount = computed(() => customAmount.value || selectedAmount.value || 0)
+const isCustom = computed(() => selectedAmount.value === null)
+const customInputRef = ref<any>(null)
+
+function selectAmount(amount: number) {
+  selectedAmount.value = amount
+  customAmount.value = null
+}
+
+async function handleCustomAmount() {
+  selectedAmount.value = null
+  await nextTick()
+  customInputRef.value?.$el?.querySelector('input')?.focus()
+}
+
+function handleSubmit() {
+  if (!finalAmount.value) return
+  emit('submit', {
+    amount: finalAmount.value,
+    currency: props.currency,
+    recipientEmail: recipientEmail.value || undefined,
+    recipientName: recipientName.value || undefined,
+    senderName: senderName.value || undefined,
+    message: message.value || undefined,
+    isDigital: isDigital.value,
+  })
+}
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.giftCardForm ?? {})
+
+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'),
+    amounts: merge('amounts'),
+    recipient: merge('recipient'),
+  }
+})
+
+</script>
+
+<template>
+  <UForm :class="['space-y-6', slotClasses.root]" @submit.prevent="handleSubmit">
+    <!-- Amount selection -->
+    <div :class="['space-y-3', slotClasses.amounts]">
+      <!-- <UFormField label="Select Amount"> -->
+      <URadioGroup v-model="selectedAmount" :items="amounts" value-key="value" indicator="hidden"
+        legend="Select Amount">
+        <template #label="{ item }">
+          <UButton size="lg" class="justify-center font-semibold w-full"
+            :color="selectedAmount === item.value ? 'primary' : 'neutral'" variant="outline"
+            @click="selectAmount(item.value)">
+            {{ currency }} {{ item.value }}
+          </UButton>
+        </template>
+      </URadioGroup>
+      <UCollapsible>
+        <UButton size="lg" class="justify-center font-semibold w-full"
+          :color="isCustom ? 'primary' : 'neutral'" variant="outline"
+          @click="handleCustomAmount">
+          Custom Amount
+        </UButton>
+        <template #content>
+          <UFormField label="Enter amount" class="py-1">
+            <UInput ref="customInputRef" v-model.number="customAmount" type="number" min="1"
+              :placeholder="`${currency} amount`" size="lg" class="w-full" />
+          </UFormField>
+        </template>
+      </UCollapsible>
+    </div>
+
+    <USeparator />
+
+    <!-- Card type -->
+    <UFormField>
+      <URadioGroup v-model="isDigital" :items="[{label: 'Digital (Email)', value: true}, {label: 'Physical Card', value: false}]" value-key="value" indicator="hidden" legend="Select Card Type">
+        <template #label="{ item }">
+          <UButton size="lg" class="justify-center font-semibold w-full"
+            :color="isDigital === item.value ? 'primary' : 'neutral'" variant="outline"
+            @click="isDigital = item.value">
+            {{ item.label }}
+          </UButton>
+        </template>
+      </URadioGroup>
+    </UFormField>
+
+    <!-- Recipient -->
+    <div :class="['space-y-3', slotClasses.recipient]">
+      <h4 class="text-sm font-medium text-highlighted">Recipient Details</h4>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <UFormField label="Recipient Name">
+          <UInput v-model="recipientName" placeholder="Their name" />
+        </UFormField>
+        <UFormField v-if="isDigital" label="Recipient Email">
+          <UInput v-model="recipientEmail" type="email" placeholder="their@email.com" />
+        </UFormField>
+      </div>
+      <UFormField label="Your Name">
+        <UInput v-model="senderName" placeholder="From…" />
+      </UFormField>
+      <UFormField label="Personal Message">
+        <UTextarea v-model="message" placeholder="Add a personal message…" rows="3" class="w-full" />
+      </UFormField>
+    </div>
+
+    <UButton type="submit" block size="lg" color="primary" :loading="loading" :disabled="!finalAmount">
+      <UIcon name="i-heroicons-gift-20-solid" class="me-2" />
+      Purchase Gift Card — {{ currency }} {{ finalAmount }}
+    </UButton>
+  </UForm>
+</template>

package/src/runtime/components/gift-card/CGiftCardForm.vue.backup

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { GiftCard, PurchaseGiftCardInput } from '@commercejs/types'
+
+/**
+ * CGiftCardForm — Gift card purchase form.
+ * Allows customers to select amount, recipient details, and personalize the card.
+ */
+
+export interface GiftCardFormProps {
+  /** Pre-defined amount options */
+  amounts?: number[]
+  /** Currency code */
+  currency?: string
+  /** Whether the form is submitting */
+  loading?: boolean
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    amounts: any
+    recipient: any
+  }>
+}
+
+const props = withDefaults(defineProps<GiftCardFormProps>(), {
+  amounts: () => [25, 50, 100, 150, 200, 500],
+  currency: 'SAR',
+  loading: false,
+})
+
+const emit = defineEmits<{
+  'submit': [input: PurchaseGiftCardInput]
+}>()
+
+const selectedAmount = ref<number | null>(null)
+const customAmount = ref<number | null>(null)
+const recipientEmail = ref('')
+const recipientName = ref('')
+const senderName = ref('')
+const message = ref('')
+const isDigital = ref(true)
+
+const finalAmount = computed(() => customAmount.value || selectedAmount.value || 0)
+
+function selectAmount(amount: number) {
+  selectedAmount.value = amount
+  customAmount.value = null
+}
+
+function handleSubmit() {
+  if (!finalAmount.value) return
+  emit('submit', {
+    amount: finalAmount.value,
+    currency: props.currency,
+    recipientEmail: recipientEmail.value || undefined,
+    recipientName: recipientName.value || undefined,
+    senderName: senderName.value || undefined,
+    message: message.value || undefined,
+    isDigital: isDigital.value,
+  })
+}
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.giftCardForm ?? {})
+
+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'),
+    amounts: merge('amounts'),
+    recipient: merge('recipient'),
+  }
+})
+</script>
+
+<template>
+  <form :class="['space-y-6', slotClasses.root]" @submit.prevent="handleSubmit">
+    <!-- Amount selection -->
+    <div :class="['space-y-3', slotClasses.amounts]">
+      <label class="text-sm font-medium text-highlighted">Select Amount</label>
+      <div class="grid grid-cols-3 gap-2">
+        <UButton
+          v-for="amount in amounts"
+          :key="amount"
+          :variant="selectedAmount === amount && !customAmount ? 'soft' : 'outline'"
+          :color="selectedAmount === amount && !customAmount ? 'primary' : 'neutral'"
+          size="lg"
+          class="justify-center font-semibold"
+          @click="selectAmount(amount)"
+        >
+          {{ currency }} {{ amount }}
+        </UButton>
+      </div>
+      <UFormField label="Or enter custom amount">
+        <UInput
+          v-model.number="customAmount"
+          type="number"
+          min="1"
+          :placeholder="`${currency} amount`"
+          @focus="selectedAmount = null"
+        />
+      </UFormField>
+    </div>
+
+    <USeparator />
+
+    <!-- Card type -->
+    <div class="flex items-center gap-4">
+      <URadio v-model="isDigital" :value="true" label="Digital (Email)" />
+      <URadio v-model="isDigital" :value="false" label="Physical Card" />
+    </div>
+
+    <!-- Recipient -->
+    <div :class="['space-y-3', slotClasses.recipient]">
+      <h4 class="text-sm font-medium text-highlighted">Recipient Details</h4>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <UFormField label="Recipient Name">
+          <UInput v-model="recipientName" placeholder="Their name" />
+        </UFormField>
+        <UFormField v-if="isDigital" label="Recipient Email">
+          <UInput v-model="recipientEmail" type="email" placeholder="their@email.com" />
+        </UFormField>
+      </div>
+      <UFormField label="Your Name">
+        <UInput v-model="senderName" placeholder="From…" />
+      </UFormField>
+      <UFormField label="Personal Message">
+        <UTextarea v-model="message" placeholder="Add a personal message…" rows="3" class="w-full" />
+      </UFormField>
+    </div>
+
+    <UButton type="submit" block size="lg" color="primary" :loading="loading" :disabled="!finalAmount">
+      <UIcon name="i-heroicons-gift-20-solid" class="me-2" />
+      Purchase Gift Card — {{ currency }} {{ finalAmount }}
+    </UButton>
+  </form>
+</template>

package/src/runtime/components/marketing/CHeroBanner.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+/**
+ * CHeroBanner — Full-width marketing hero banner with CTA.
+ * Supports image/video backgrounds, overlays, and multiple content slots.
+ */
+
+export interface HeroBannerProps {
+  /** Background image URL */
+  imageUrl?: string
+  /** Optional video URL for background */
+  videoUrl?: string
+  /** Title text */
+  title?: string
+  /** Subtitle text */
+  subtitle?: string
+  /** Primary CTA label */
+  ctaLabel?: string
+  /** Primary CTA link */
+  ctaTo?: string
+  /** Secondary CTA label */
+  secondaryCtaLabel?: string
+  /** Secondary CTA link */
+  secondaryCtaTo?: string
+  /** Content alignment */
+  align?: 'start' | 'center' | 'end'
+  /** Overlay intensity */
+  overlay?: 'none' | 'light' | 'dark'
+  /** Height variant */
+  height?: 'sm' | 'md' | 'lg' | 'full'
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    background: any
+    overlay: any
+    content: any
+    title: any
+    subtitle: any
+    actions: any
+  }>
+}
+
+const props = withDefaults(defineProps<HeroBannerProps>(), {
+  align: 'center',
+  overlay: 'dark',
+  height: 'lg',
+})
+
+const heightClass = computed(() => {
+  const map = {
+    sm: 'min-h-[240px] md:min-h-[320px]',
+    md: 'min-h-[320px] md:min-h-[480px]',
+    lg: 'min-h-[400px] md:min-h-[560px]',
+    full: 'min-h-screen',
+  }
+  return map[props.height] || map.lg
+})
+
+const alignClass = computed(() => {
+  const map = {
+    start: 'items-start text-start',
+    center: 'items-center text-center',
+    end: 'items-end text-end',
+  }
+  return map[props.align] || map.center
+})
+
+const overlayClass = computed(() => {
+  const map = {
+    none: '',
+    light: 'bg-white/30',
+    dark: 'bg-black/50',
+  }
+  return map[props.overlay] || map.dark
+})
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.heroBanner ?? {})
+
+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'),
+    background: merge('background'),
+    overlay: merge('overlay'),
+    content: merge('content'),
+    title: merge('title'),
+    subtitle: merge('subtitle'),
+    actions: merge('actions'),
+  }
+})
+</script>
+
+<template>
+  <div :class="['relative overflow-hidden flex', heightClass, slotClasses.root]">
+    <!-- Background -->
+    <slot name="background" :image-url="imageUrl" :video-url="videoUrl">
+      <video
+        v-if="videoUrl"
+        :src="videoUrl"
+        autoplay
+        muted
+        loop
+        playsinline
+        :class="['absolute inset-0 size-full object-cover', slotClasses.background]"
+      />
+      <img
+        v-else-if="imageUrl"
+        :src="imageUrl"
+        alt=""
+        :class="['absolute inset-0 size-full object-cover', slotClasses.background]"
+      />
+    </slot>
+
+    <!-- Overlay -->
+    <div :class="['absolute inset-0 z-10', overlayClass, slotClasses.overlay]" />
+
+    <!-- Content -->
+    <div :class="['relative z-20 flex flex-col justify-center px-6 md:px-12 lg:px-24 w-full', alignClass, slotClasses.content]">
+      <slot>
+        <h1 v-if="title" :class="['text-3xl md:text-5xl lg:text-6xl font-bold text-white mb-4', slotClasses.title]">
+          {{ title }}
+        </h1>
+        <p v-if="subtitle" :class="['text-lg md:text-xl text-white/80 max-w-2xl mb-8', slotClasses.subtitle]">
+          {{ subtitle }}
+        </p>
+        <div v-if="ctaLabel || secondaryCtaLabel" :class="['flex gap-3 flex-wrap', alignClass.includes('center') ? 'justify-center' : '', slotClasses.actions]">
+          <UButton v-if="ctaLabel" :to="ctaTo" size="lg" color="primary">
+            {{ ctaLabel }}
+          </UButton>
+          <UButton v-if="secondaryCtaLabel" :to="secondaryCtaTo" size="lg" variant="outline" color="neutral" class="text-white border-white/30 hover:bg-white/10">
+            {{ secondaryCtaLabel }}
+          </UButton>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>