@tower_74/cms-app 0.4.0 → 0.6.0

package/src/pages/Admin/Commerce/Products/Edit.vue

@@ -1,167 +0,0 @@
-<script setup lang="ts">
-import BlockEditor from '@/components/BlockEditor.vue';
-import OptionsEditor from '@/components/commerce/OptionsEditor.vue';
-import VariantsEditor from '@/components/commerce/VariantsEditor.vue';
-import AdminLayout from '@/layouts/AdminLayout.vue';
-import { Link, useForm } from '@inertiajs/vue3';
-import { Button, FormBuilder, FormField, MediaPicker, type MediaItem, type MediaSelection } from '@tower_74/cms-ui';
-import axios from 'axios';
-import { computed, ref } from 'vue';
-
-interface Option {
-    name: string;
-    values: string[];
-}
-interface Variant {
-    sku: string;
-    price: string;
-    stock: number | string;
-    options: Record<string, string>;
-}
-interface Block {
-    type: string;
-    data: Record<string, unknown>;
-}
-interface BlockDef {
-    type: string;
-    label: string;
-    fields: Array<Record<string, unknown>>;
-    defaults: Record<string, unknown>;
-}
-interface ProductData {
-    id: number;
-    name: string;
-    description: string | null;
-    status: string;
-    tax_class: string;
-    featured_media_id: number | null;
-    options: Option[];
-    variants: Variant[];
-}
-
-const props = defineProps<{
-    product: ProductData | null;
-    currencySymbol: string;
-    featuredMedia: MediaItem | null;
-    mediaItems: MediaItem[];
-    blocks: Block[];
-    blockRegistry: BlockDef[];
-}>();
-
-const isEdit = computed(() => props.product !== null);
-
-const fields = [
-    { name: 'name', label: 'Name', required: true },
-    {
-        name: 'status',
-        label: 'Status',
-        type: 'select' as const,
-        options: [
-            { label: 'Draft', value: 'draft' },
-            { label: 'Published', value: 'published' },
-        ],
-    },
-    {
-        name: 'tax_class',
-        label: 'Tax class',
-        type: 'select' as const,
-        options: [
-            { label: 'Standard', value: 'standard' },
-            { label: 'Reduced', value: 'reduced' },
-            { label: 'Zero-rated', value: 'zero' },
-        ],
-    },
-    { name: 'description', label: 'Description', type: 'textarea' as const },
-];
-
-const form = useForm({
-    name: props.product?.name ?? '',
-    status: props.product?.status ?? 'draft',
-    tax_class: props.product?.tax_class ?? 'standard',
-    description: props.product?.description ?? '',
-    featured_media_id: props.product?.featured_media_id ?? null,
-    options: (props.product?.options ?? []) as Option[],
-    variants: (props.product?.variants ?? []) as Variant[],
-    blocks: (props.blocks ?? []) as Block[],
-});
-
-const model = computed({
-    get: () => ({ name: form.name, status: form.status, tax_class: form.tax_class, description: form.description }),
-    set: (value: Record<string, unknown>) => {
-        form.name = (value.name as string) ?? '';
-        form.status = (value.status as string) ?? 'draft';
-        form.tax_class = (value.tax_class as string) ?? 'standard';
-        form.description = (value.description as string) ?? '';
-    },
-});
-
-const optionsModel = computed({ get: () => form.options, set: (value: Option[]) => (form.options = value) });
-const variantsModel = computed({ get: () => form.variants, set: (value: Variant[]) => (form.variants = value) });
-const blocksModel = computed({ get: () => form.blocks, set: (value: Block[]) => (form.blocks = value) });
-
-// Shared media library for the featured-image picker and any block galleries.
-const mediaItems = ref<MediaItem[]>([...props.mediaItems]);
-const onUpload = async (file: File) => {
-    const data = new FormData();
-    data.append('file', file);
-    const { data: res } = await axios.post('/admin/media/upload', data);
-    mediaItems.value = [res.item, ...mediaItems.value];
-};
-
-const featured = ref<MediaSelection | null>(
-    props.featuredMedia ? { id: props.featuredMedia.id, src: props.featuredMedia.url, alt: props.featuredMedia.name ?? '' } : null,
-);
-const onFeatured = (value: MediaSelection | MediaSelection[] | null) => {
-    featured.value = (value as MediaSelection | null) ?? null;
-    form.featured_media_id = featured.value?.id ?? null;
-};
-
-const submit = () => {
-    if (isEdit.value && props.product) {
-        form.put(`/admin/commerce/products/${props.product.id}`);
-    } else {
-        form.post('/admin/commerce/products');
-    }
-};
-</script>
-
-<template>
-    <AdminLayout>
-        <template #title>{{ isEdit ? 'Edit product' : 'New product' }}</template>
-
-        <form class="max-w-4xl" @submit.prevent="submit">
-            <div class="max-w-xl">
-                <FormBuilder v-model="model" :fields="fields" :errors="form.errors" />
-
-                <div class="mt-4">
-                    <FormField label="Featured image" :error="form.errors.featured_media_id" help="Shown on the product card and page.">
-                        <MediaPicker :model-value="featured" :items="mediaItems" @update:model-value="onFeatured" @upload="onUpload" />
-                    </FormField>
-                </div>
-            </div>
-
-            <div class="mt-8">
-                <h3 class="mb-3 text-base font-semibold">Options</h3>
-                <OptionsEditor v-model="optionsModel" />
-            </div>
-
-            <div class="mt-8">
-                <h3 class="mb-3 text-base font-semibold">Variants</h3>
-                <p v-if="form.errors.variants" class="mb-2 text-sm text-danger">{{ form.errors.variants }}</p>
-                <VariantsEditor v-model="variantsModel" :options="form.options" :currency-symbol="currencySymbol" />
-            </div>
-
-            <div class="mt-8">
-                <h3 class="mb-3 text-base font-semibold">Product page blocks</h3>
-                <BlockEditor v-model="blocksModel" :registry="blockRegistry" :media-items="mediaItems" @upload="onUpload" />
-            </div>
-
-            <div class="mt-8 flex items-center gap-2">
-                <Button type="submit" :disabled="form.processing">
-                    {{ isEdit ? 'Save changes' : 'Create product' }}
-                </Button>
-                <Link href="/admin/commerce/products"><Button variant="ghost" type="button">Cancel</Button></Link>
-            </div>
-        </form>
-    </AdminLayout>
-</template>

package/src/pages/Admin/Commerce/Products/Index.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import Pagination from '@/components/Pagination.vue';
-import AdminLayout from '@/layouts/AdminLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-import { Badge, Button, DataTable } from '@tower_74/cms-ui';
-
-interface ProductRow {
-    id: number;
-    name: string;
-    status: string;
-    variants_count: number;
-    price_from: string | null;
-}
-interface PageLink {
-    url: string | null;
-    label: string;
-    active: boolean;
-}
-
-defineProps<{ products: { data: ProductRow[]; links: PageLink[] } }>();
-
-const columns = [
-    { key: 'name', label: 'Name' },
-    { key: 'status', label: 'Status' },
-    { key: 'variants_count', label: 'Variants', align: 'right' as const },
-    { key: 'price_from', label: 'From', align: 'right' as const },
-    { key: 'actions', label: '', align: 'right' as const },
-];
-
-const destroy = (row: ProductRow) => {
-    if (confirm(`Delete “${row.name}”?`)) {
-        router.delete(`/admin/commerce/products/${row.id}`, { preserveScroll: true });
-    }
-};
-</script>
-
-<template>
-    <AdminLayout>
-        <template #title>Products</template>
-
-        <div class="mb-4 flex items-center justify-between">
-            <h2 class="text-lg font-semibold">Products</h2>
-            <Link href="/admin/commerce/products/create"><Button>New product</Button></Link>
-        </div>
-
-        <DataTable :columns="columns" :rows="products.data" empty="No products yet.">
-            <template #cell-status="{ value }">
-                <Badge :variant="value === 'published' ? 'success' : 'neutral'">{{ value }}</Badge>
-            </template>
-            <template #cell-price_from="{ value }">
-                <span class="text-muted">{{ value ?? '—' }}</span>
-            </template>
-            <template #cell-actions="{ row }">
-                <div class="flex justify-end gap-2">
-                    <Link :href="`/admin/commerce/products/${(row as ProductRow).id}/edit`">
-                        <Button variant="ghost" size="sm">Edit</Button>
-                    </Link>
-                    <Button variant="danger" size="sm" @click="destroy(row as ProductRow)">Delete</Button>
-                </div>
-            </template>
-        </DataTable>
-
-        <Pagination :links="products.links" />
-    </AdminLayout>
-</template>

package/src/pages/Public/Cart/Index.vue

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import Seo from '@/components/Seo.vue';
-import PublicLayout from '@/layouts/PublicLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-import { type Block, Button, CartLineItem, CartSummary } from '@tower_74/cms-ui';
-
-interface CartItem {
-    variant_id: number;
-    name: string;
-    variant: string | null;
-    price: string;
-    quantity: number;
-    line_total: string;
-    max: number;
-    image: { src: string; alt?: string } | null;
-}
-interface ShippingOption {
-    id: string;
-    label: string;
-    cost: string;
-}
-
-defineProps<{
-    site: { name: string };
-    menu: Array<{ label: string; url: string }>;
-    footerWidgets: Block[];
-    cartCount?: number | null;
-    items: CartItem[];
-    shippingOptions: ShippingOption[];
-    selectedShipping: string | null;
-    summary: { subtotal: string; shipping?: string | null; tax?: string | null; total: string };
-    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
-}>();
-
-const updateQty = (variantId: number, quantity: number) => router.patch(`/cart/${variantId}`, { quantity }, { preserveScroll: true });
-
-const removeItem = (variantId: number) => router.delete(`/cart/${variantId}`, { preserveScroll: true });
-
-const chooseShipping = (method: string) => router.post('/cart/shipping', { method }, { preserveScroll: true });
-</script>
-
-<template>
-    <Seo :seo="seo" />
-
-    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
-        <div class="mx-auto max-w-5xl px-4 py-12 sm:px-6">
-            <h1 class="mb-8 text-3xl font-bold tracking-tight">Cart</h1>
-
-            <div v-if="items.length" class="grid gap-10 lg:grid-cols-[1fr_320px]">
-                <div>
-                    <CartLineItem
-                        v-for="item in items"
-                        :key="item.variant_id"
-                        :name="item.name"
-                        :variant="item.variant ?? undefined"
-                        :image="item.image ?? undefined"
-                        :price="item.price"
-                        :quantity="item.quantity"
-                        :line-total="item.line_total"
-                        :max="item.max"
-                        @update:quantity="updateQty(item.variant_id, $event)"
-                        @remove="removeItem(item.variant_id)"
-                    />
-
-                    <div v-if="shippingOptions.length" class="mt-6">
-                        <h2 class="mb-2 text-sm font-medium">Shipping</h2>
-                        <label
-                            v-for="option in shippingOptions"
-                            :key="option.id"
-                            class="flex cursor-pointer items-center justify-between rounded border border-border px-3 py-2 text-sm"
-                            :class="option.id === selectedShipping ? 'border-primary' : ''"
-                        >
-                            <span class="flex items-center gap-2">
-                                <input
-                                    type="radio"
-                                    name="shipping"
-                                    :value="option.id"
-                                    :checked="option.id === selectedShipping"
-                                    @change="chooseShipping(option.id)"
-                                />
-                                {{ option.label }}
-                            </span>
-                            <span class="text-muted">{{ option.cost }}</span>
-                        </label>
-                    </div>
-                </div>
-
-                <CartSummary
-                    :subtotal="summary.subtotal"
-                    :shipping="summary.shipping ?? undefined"
-                    :tax="summary.tax ?? undefined"
-                    :total="summary.total"
-                >
-                    <template #actions>
-                        <Link href="/checkout"><Button class="w-full">Checkout</Button></Link>
-                    </template>
-                </CartSummary>
-            </div>
-
-            <div v-else class="rounded-lg border border-border bg-background px-4 py-16 text-center">
-                <p class="text-muted">Your cart is empty.</p>
-                <Link href="/shop" class="mt-4 inline-block">
-                    <Button variant="secondary">Continue shopping</Button>
-                </Link>
-            </div>
-        </div>
-    </PublicLayout>
-</template>

package/src/pages/Public/Checkout/Confirmation.vue

@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import Seo from '@/components/Seo.vue';
-import PublicLayout from '@/layouts/PublicLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-import { type Block, Button, OrderSummary } from '@tower_74/cms-ui';
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-
-interface OrderItem {
-    name: string;
-    variant: string | null;
-    quantity: number;
-    lineTotal: string;
-}
-
-const props = defineProps<{
-    site: { name: string };
-    menu: Array<{ label: string; url: string }>;
-    footerWidgets: Block[];
-    cartCount?: number | null;
-    order: {
-        number: string;
-        status: string;
-        paymentStatus: string;
-        email: string;
-        items: OrderItem[];
-        subtotal: string;
-        discount?: string | null;
-        shipping?: string | null;
-        tax?: string | null;
-        total: string;
-    };
-    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
-}>();
-
-// The webhook — not this redirect — sets the true payment status, so poll until paid
-// (or failed) instead of assuming success (PLANNING §13.4 step 10).
-const paymentStatus = ref(props.order.paymentStatus);
-const isPaid = computed(() => paymentStatus.value === 'paid');
-const isFailed = computed(() => paymentStatus.value === 'failed');
-const pending = computed(() => !isPaid.value && !isFailed.value);
-
-let timer: ReturnType<typeof setInterval> | undefined;
-
-const poll = async () => {
-    try {
-        const response = await fetch(`/checkout/status/${props.order.number}`, {
-            headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
-            credentials: 'same-origin',
-        });
-        if (!response.ok) return;
-        const data = await response.json();
-        paymentStatus.value = data.paymentStatus;
-        if (!pending.value && timer) clearInterval(timer);
-    } catch {
-        // transient; the next tick retries
-    }
-};
-
-onMounted(() => {
-    if (pending.value) {
-        timer = setInterval(poll, 3000);
-    }
-});
-
-onBeforeUnmount(() => {
-    if (timer) clearInterval(timer);
-});
-
-const refresh = () => router.reload();
-</script>
-
-<template>
-    <Seo :seo="seo" />
-
-    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
-        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6">
-            <div class="mb-8 text-center">
-                <h1 class="text-3xl font-bold tracking-tight">
-                    <span v-if="isPaid">Thank you for your order!</span>
-                    <span v-else-if="isFailed">Payment failed</span>
-                    <span v-else>We're confirming your payment…</span>
-                </h1>
-                <p class="mt-2 text-muted">
-                    Order <span class="font-medium text-text">{{ order.number }}</span> — a receipt is on its way to {{ order.email }}.
-                </p>
-
-                <p v-if="pending" class="mt-4 inline-flex items-center gap-2 rounded-full bg-surface px-4 py-1.5 text-sm text-muted">
-                    <span class="h-2 w-2 animate-pulse rounded-full bg-primary" />
-                    Awaiting payment confirmation…
-                </p>
-                <p v-else-if="isFailed" class="mt-4 text-sm text-danger">Your payment didn't go through. Please try again from your cart.</p>
-            </div>
-
-            <OrderSummary
-                :items="order.items"
-                :subtotal="order.subtotal"
-                :discount="order.discount ?? undefined"
-                :shipping="order.shipping ?? undefined"
-                :tax="order.tax ?? undefined"
-                :total="order.total"
-                title="Order details"
-            />
-
-            <div class="mt-8 flex justify-center gap-3">
-                <Link href="/shop"><Button variant="secondary">Continue shopping</Button></Link>
-                <Button v-if="pending" variant="ghost" @click="refresh">Refresh status</Button>
-            </div>
-        </div>
-    </PublicLayout>
-</template>

package/src/pages/Public/Checkout/Index.vue

@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import Seo from '@/components/Seo.vue';
-import PublicLayout from '@/layouts/PublicLayout.vue';
-import { router } from '@inertiajs/vue3';
-import { type Block, Button, CheckoutForm, OrderSummary } from '@tower_74/cms-ui';
-import { nextTick, ref } from 'vue';
-
-interface SummaryItem {
-    name: string;
-    variant: string | null;
-    image: { src: string; alt?: string } | null;
-    quantity: number;
-    lineTotal: string;
-}
-interface ShippingOption {
-    id: string;
-    label: string;
-    cost: string;
-}
-
-const props = defineProps<{
-    site: { name: string };
-    menu: Array<{ label: string; url: string }>;
-    footerWidgets: Block[];
-    cartCount?: number | null;
-    summary: {
-        items: SummaryItem[];
-        subtotal: string;
-        discount?: string | null;
-        shipping?: string | null;
-        tax?: string | null;
-        total: string;
-    };
-    shippingOptions: ShippingOption[];
-    selectedShipping: string | null;
-    gateway: string;
-    stripeKey: string | null;
-    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
-}>();
-
-const errors = ref<Record<string, string>>({});
-const generalError = ref<string | null>(null);
-const processing = ref(false);
-
-// Stripe (browser-only; loaded lazily so SSR stays clean).
-const showPayment = ref(false);
-const paymentEl = ref<HTMLDivElement | null>(null);
-
-let stripe: any = null;
-
-let elements: any = null;
-let returnUrl = '';
-
-const onShippingChange = (id: string) => router.post('/cart/shipping', { method: id }, { preserveScroll: true, preserveState: true });
-
-const placeOrder = async (payload: any) => {
-    processing.value = true;
-    errors.value = {};
-    generalError.value = null;
-
-    try {
-        const response = await fetch('/checkout', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-                'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content ?? '',
-            },
-            credentials: 'same-origin',
-            body: JSON.stringify(payload),
-        });
-
-        const data = await response.json();
-
-        if (response.status === 422) {
-            errors.value = data.errors ? flattenErrors(data.errors) : {};
-            generalError.value = data.errors ? null : (data.message ?? 'Please check your details.');
-            return;
-        }
-        if (!response.ok) {
-            generalError.value = data.message ?? 'Something went wrong. Please try again.';
-            return;
-        }
-
-        returnUrl = data.returnUrl;
-
-        if (data.gateway === 'stripe' && props.stripeKey) {
-            await mountStripe(data.clientSecret);
-        } else {
-            router.visit(returnUrl);
-        }
-    } catch {
-        generalError.value = 'We could not reach the payment service. Please try again.';
-    } finally {
-        processing.value = false;
-    }
-};
-
-const flattenErrors = (raw: Record<string, string[]>): Record<string, string> =>
-    Object.fromEntries(Object.entries(raw).map(([key, value]) => [key, value[0]]));
-
-const mountStripe = async (clientSecret: string) => {
-    const { loadStripe } = await import('@stripe/stripe-js');
-    stripe = await loadStripe(props.stripeKey as string);
-    if (!stripe) {
-        generalError.value = 'Stripe failed to load.';
-        return;
-    }
-    elements = stripe.elements({ clientSecret });
-    showPayment.value = true;
-    await nextTick();
-    elements.create('payment').mount(paymentEl.value);
-};
-
-const confirmPayment = async () => {
-    if (!stripe || !elements) return;
-    processing.value = true;
-    const { error } = await stripe.confirmPayment({
-        elements,
-        confirmParams: { return_url: returnUrl },
-    });
-    if (error) {
-        generalError.value = error.message ?? 'Payment could not be completed.';
-        processing.value = false;
-    }
-};
-</script>
-
-<template>
-    <Seo :seo="seo" />
-
-    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
-        <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6">
-            <h1 class="mb-8 text-3xl font-bold tracking-tight">Checkout</h1>
-
-            <div class="grid gap-12 lg:grid-cols-[1fr_360px]">
-                <div>
-                    <p v-if="generalError" class="border-danger/40 bg-danger/10 mb-6 rounded border px-4 py-3 text-sm text-danger">
-                        {{ generalError }}
-                    </p>
-
-                    <CheckoutForm
-                        v-if="!showPayment"
-                        :shipping-options="shippingOptions"
-                        :selected-shipping="selectedShipping"
-                        :errors="errors"
-                        :processing="processing"
-                        submit-label="Continue to payment"
-                        @update:shipping-method="onShippingChange"
-                        @submit="placeOrder"
-                    />
-
-                    <div v-else>
-                        <h2 class="mb-4 text-lg font-semibold">Payment</h2>
-                        <div ref="paymentEl" class="mb-6" />
-                        <Button size="lg" class="w-full" :disabled="processing" @click="confirmPayment">
-                            {{ processing ? 'Processing…' : 'Pay now' }}
-                        </Button>
-                    </div>
-                </div>
-
-                <OrderSummary
-                    :items="summary.items"
-                    :subtotal="summary.subtotal"
-                    :discount="summary.discount ?? undefined"
-                    :shipping="summary.shipping ?? undefined"
-                    :tax="summary.tax ?? undefined"
-                    :total="summary.total"
-                />
-            </div>
-        </div>
-    </PublicLayout>
-</template>

package/src/pages/Public/Shop/Index.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import Pagination from '@/components/Pagination.vue';
-import Seo from '@/components/Seo.vue';
-import PublicLayout from '@/layouts/PublicLayout.vue';
-import { type Block, ProductGrid } from '@tower_74/cms-ui';
-
-interface ProductItem {
-    name: string;
-    url: string;
-    price: string | null;
-    image: { src: string; alt?: string } | null;
-}
-interface PageLink {
-    url: string | null;
-    label: string;
-    active: boolean;
-}
-
-defineProps<{
-    site: { name: string };
-    menu: Array<{ label: string; url: string }>;
-    footerWidgets: Block[];
-    cartCount?: number | null;
-    products: { data: ProductItem[]; links: PageLink[] };
-    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
-}>();
-</script>
-
-<template>
-    <Seo :seo="seo" />
-
-    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
-        <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6">
-            <h1 class="mb-8 text-3xl font-bold tracking-tight">Shop</h1>
-            <ProductGrid :products="products.data" :columns="3" empty="No products available yet." />
-            <Pagination :links="products.links" />
-        </div>
-    </PublicLayout>
-</template>