@mframework/layer-commerce 0.0.5 → 0.0.8

package/app/components/shop/cart/cartItem.vue

@@ -0,0 +1,182 @@
+<template>
+    <section class="shop2 marketm4_shop2 cid-uHg6RhKlpj" id="shop2-av">
+        <div class="container">
+            <div class="row justify-content-between align-items-center">
+                <div class="col-xl-6 col-lg-7 col-md-12 content__block">
+                    <h2 class="mbr-section-title mbr-bold mbr-fonts-style display-5">
+                        Shopping Cart ({{ itemCount }} items)
+                    </h2>
+                    <div class="block__products">
+                        <div v-if="product" class="d-sm-flex align-items-center product__item">
+                            <!-- Product Image -->
+                            <div class="image__item shrink-0">
+                                <NuxtImg :src="product?.featuredAsset?.preview" :alt="product?.name" loading="lazy" />
+                            </div>
+                            <!-- Product Details -->
+                            <div class="item__text">
+                                <div class="d-flex justify-content-between align-items-baseline item__title">
+                                    <p class="name__item mbr-medium mbr-fonts-style display-4">
+                                        {{ product?.name }}
+                                    </p>
+                                    <p class="item__price mbr-fonts-style display-4">
+                                        {{ formatPrice(product?.unitPriceWithTax) }}
+                                    </p>
+                                </div>
+                                <!-- Quantity Controls -->
+                                <div class="item__buttons">
+                                    <div class="mbr-section-btn">
+                                        <div class="flex border border-neutral-300 rounded-md">
+                                            <!-- Decrease Quantity -->
+                                            <v-btn variant="tertiary" :disabled="count <= min" square
+                                                class="rounded-r-none p-3" :aria-controls="inputId"
+                                                aria-label="Decrease quantity" @click="handleDecrease">
+                                                <SfIconRemove />
+                                            </v-btn>
+
+                                            <!-- Quantity Input -->
+                                            <input :id="inputId" v-model="count" type="number"
+                                                class="grow appearance-none mx-2 w-8 text-center bg-transparent font-medium"
+                                                :min="min" :max="max" @change="handleQuantityChange"
+                                                aria-label="Product quantity" />
+
+                                            <!-- Increase Quantity -->
+                                            <v-btn variant="tertiary" :disabled="count >= max" square
+                                                class="rounded-l-none p-3" :aria-controls="inputId"
+                                                aria-label="Increase quantity" @click="handleIncrease">
+                                                <SfIconAdd />
+                                            </v-btn>
+                                        </div>
+                                        <!-- Stock Information -->
+                                        <p class="self-center mt-1 mb-4 text-xs text-neutral-500 xs:mb-0">
+                                            <strong class="text-neutral-900">{{ max }}</strong> in stock
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Empty State -->
+                        <div v-else class="empty-product">
+                            <p>Product not available</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import {  SfIconAdd, SfIconRemove, useId } from '@storefront-ui/vue';
+import { useVendureMutation } from '../../composables/useVendureMutation';
+import adjustOrderLineMutation from '#graphql/app/commerce/mutations/adjustOrderLine.gql';
+import removeOrderLineMutation from '#graphql/app/commerce/mutations/removeOrderLine.gql';
+
+const props = defineProps({
+    product: { type: Object, required: true },
+    min: { type: Number, default: 1 },
+    max: { type: Number, default: 99 },
+    cart: { type: Object, required: false }, // for itemCount
+});
+
+const count = ref(props.product.quantity);
+const inputId = useId();
+
+const { mutate: adjustOrderLine } = useVendureMutation(adjustOrderLineMutation);
+const { mutate: removeOrderLine } = useVendureMutation(removeOrderLineMutation);
+
+const itemCount = computed(() => {
+    return props.cart?.lines?.reduce((total: number, line: any) => total + (line.quantity || 1), 0) || 0;
+});
+
+const formatPrice = (amount: number) => {
+    if (!amount) return '$0.00';
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+    }).format(amount / 100);
+};
+
+const handleQuantityChange = async () => {
+    if (count.value >= props.min && count.value <= props.max) {
+        await adjustOrderLine({ orderLineId: props.product.id, quantity: count.value });
+    }
+};
+
+const handleIncrease = async () => {
+    if (count.value < props.max) {
+        count.value++;
+        await adjustOrderLine({ orderLineId: props.product.id, quantity: count.value });
+    }
+};
+
+const handleDecrease = async () => {
+    if (count.value > props.min) {
+        count.value--;
+        await adjustOrderLine({ orderLineId: props.product.id, quantity: count.value });
+    } else {
+        await removeOrderLine({ orderLineId: props.product.id });
+    }
+};
+
+watch(() => props.product.quantity, (newQuantity) => {
+    if (newQuantity !== count.value) {
+        count.value = newQuantity;
+    }
+}, { immediate: true });
+</script>
+
+<style scoped>
+    .product__item {
+        padding: 1rem;
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #eee;
+    }
+
+    .image__item {
+        width: 100px;
+        height: 100px;
+        margin-right: 1rem;
+    }
+
+    .image__item img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 4px;
+    }
+
+    .item__text {
+        flex: 1;
+    }
+
+    .name__item {
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+    }
+
+    .item__price {
+        font-weight: bold;
+        color: var(--primary-color);
+    }
+
+    .item__buttons {
+        margin-top: 1rem;
+    }
+
+    input[type="number"] {
+        -moz-appearance: textfield;
+    }
+
+    input[type="number"]::-webkit-outer-spin-button,
+    input[type="number"]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    .empty-product {
+        padding: 1rem;
+        text-align: center;
+        color: #666;
+    }
+</style>

package/app/components/shop/cart/checkout.vue

@@ -0,0 +1,415 @@
+<template>
+    <div class="checkout-form">
+        <form @submit.prevent="handleSubmit">
+            <div v-if="error" class="error-message">
+                {{ error }}
+            </div>
+
+            <!-- Shipping Address -->
+            <div class="form-section">
+                <h3>Shipping Address</h3>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="shipping-firstname">First Name*</label>
+                        <input 
+                            id="shipping-firstname"
+                            v-model="shippingAddress.firstname"
+                            type="text"
+                            required
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="shipping-lastname">Last Name*</label>
+                        <input 
+                            id="shipping-lastname"
+                            v-model="shippingAddress.lastname"
+                            type="text"
+                            required
+                        />
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="shipping-street">Street Address*</label>
+                    <input 
+                        id="shipping-street"
+                        v-model="shippingAddress.street[0]"
+                        type="text"
+                        required
+                    />
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="shipping-city">City*</label>
+                        <input 
+                            id="shipping-city"
+                            v-model="shippingAddress.city"
+                            type="text"
+                            required
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="shipping-postcode">Postcode*</label>
+                        <input 
+                            id="shipping-postcode"
+                            v-model="shippingAddress.postcode"
+                            type="text"
+                            required
+                        />
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="shipping-country">Country*</label>
+                        <select 
+                            id="shipping-country"
+                            v-model="shippingAddress.country_code"
+                            required
+                        >
+                            <option value="">Select Country</option>
+                            <option v-for="country in countries" :key="country.id" :value="country.id">
+                                {{ country.full_name_locale }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="shipping-telephone">Phone Number*</label>
+                        <input 
+                            id="shipping-telephone"
+                            v-model="shippingAddress.telephone"
+                            type="tel"
+                            required
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <!-- Shipping Methods -->
+            <div class="form-section">
+                <h3>Shipping Method</h3>
+                <ShippingOptions v-model="selectedShipping" />
+            </div>
+
+            <!-- Billing Address -->
+            <div class="form-section">
+                <h3>Billing Address</h3>
+                <div class="form-check">
+                    <input 
+                        type="checkbox"
+                        id="same-as-shipping"
+                        v-model="sameAsShipping"
+                    />
+                    <label for="same-as-shipping">Same as shipping address</label>
+                </div>
+                <div v-if="!sameAsShipping">
+                    <!-- Billing address fields (same structure as shipping) -->
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="billing-firstname">First Name*</label>
+                            <input 
+                                id="billing-firstname"
+                                v-model="billingAddress.firstname"
+                                type="text"
+                                required
+                            />
+                        </div>
+                        <div class="form-group">
+                            <label for="billing-lastname">Last Name*</label>
+                            <input 
+                                id="billing-lastname"
+                                v-model="billingAddress.lastname"
+                                type="text"
+                                required
+                            />
+                        </div>
+                    </div>
+                    <!-- Add other billing address fields similar to shipping -->
+                </div>
+            </div>
+
+            <!-- Payment Section -->
+            <div class="form-section">
+                <h3>Payment</h3>
+                <p>You will be redirected to a secure Stripe Checkout page to complete payment.</p>
+            </div>
+
+            <!-- Order Summary -->
+            <div class="form-section">
+                <h3>Order Summary</h3>
+                <div class="order-summary">
+                    <div class="summary-row">
+                        <span>Subtotal:</span>
+                        <span>{{ formatPrice(cart.subtotal) }}</span>
+                    </div>
+                    <div class="summary-row">
+                        <span>Shipping:</span>
+                        <span>{{ formatPrice(cart.shipping) }}</span>
+                    </div>
+                    <div class="summary-row">
+                        <span>Tax:</span>
+                        <span>{{ formatPrice(cart.tax) }}</span>
+                    </div>
+                    <div class="summary-row total">
+                        <span>Total:</span>
+                        <span>{{ formatPrice(cart.total) }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <button class="submit-button" type="submit" :disabled="loading">
+                <span v-if="loading">Processing...</span>
+                <span v-else>Pay {{ formatPrice(cart.total) }}</span>
+            </button>
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watch } from 'vue'
+import { loadStripe } from '@stripe/stripe-js'
+import { useCartStore } from '~/stores/cart'
+import ShippingOptions from '../../catalog/product/shippingOptions.vue'
+
+// Component state
+const loading = ref(false)
+const error = ref(null)
+const sameAsShipping = ref(true)
+
+const shippingAddress = ref({
+    firstname: '',
+    lastname: '',
+    street: [''],
+    city: '',
+    region: { code: '', label: '' },
+    postcode: '',
+    country_code: '',
+    telephone: ''
+})
+
+const billingAddress = ref({
+    firstname: '',
+    lastname: '',
+    street: [''],
+    city: '',
+    region: { code: '', label: '' },
+    postcode: '',
+    country_code: '',
+    telephone: ''
+})
+
+// Cart store
+const cartStore = useCartStore()
+const cart = computed(() => cartStore.cart ?? { subtotal: 0, tax_amount: 0, shipping_amount: 0, total: 0, currency: 'USD' })
+
+// Selected shipping (v-model) bound to ShippingOptions
+const selectedShipping = computed({
+    get: () => cartStore.cart?.shipping_method_id ?? cartStore.cart?.shipping_method ?? null,
+    set: async (val) => {
+        try {
+            if (cartStore && cartStore.setShippingOption) {
+                await cartStore.setShippingOption({ id: val })
+            }
+        } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn('Failed to set shipping from checkout', e)
+        }
+    }
+})
+
+const nuxtApp = useNuxtApp()
+
+// Watch for same as shipping changes
+watch(sameAsShipping, (newValue) => {
+    if (newValue) {
+        billingAddress.value = { ...shippingAddress.value }
+    }
+})
+
+// We use Stripe Checkout (server-created session) instead of client Payment Element
+
+// Handle form submission: persist addresses to Directus cart record and proceed to Stripe
+const handleSubmit = async () => {
+    try {
+        loading.value = true
+        error.value = null
+
+        const cartId = cartStore.cart?.id
+        if (!cartId) throw new Error('Cart not found')
+
+        // Persist addresses to cart
+        try {
+            const payload = {
+                shipping_address: shippingAddress.value,
+                billing_address: sameAsShipping.value ? shippingAddress.value : billingAddress.value,
+                updated_at: new Date().toISOString()
+            }
+            await nuxtApp.$directus.request(nuxtApp.$updateItem('cart', cartId, payload))
+            await cartStore.fetchCart()
+        } catch (e) {
+            console.warn('Failed to persist addresses to Directus cart', e)
+        }
+
+        // Create Stripe Checkout session via server API
+        const data = await cartStore.createCheckoutSession(cartId)
+        if (data?.url) {
+            window.location.href = data.url
+            return
+        }
+
+        if (data?.id) {
+            // fallback: try client redirect using session id
+            const stripeKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY
+            if (!stripeKey) throw new Error('Stripe publishable key missing')
+            const stripe = await loadStripe(stripeKey)
+            await stripe.redirectToCheckout({ sessionId: data.id })
+            return
+        }
+
+        throw new Error('Failed to create checkout session')
+    } catch (err) {
+        error.value = err?.message || 'Payment failed. Please try again.'
+        console.error('Checkout error:', err)
+    } finally {
+        loading.value = false
+    }
+}
+
+// Directory (countries)
+import { useDirectory } from '../../composables/sales/useDirectory'
+const { getCountries } = useDirectory()
+const countries = ref([])
+onMounted(async () => {
+    try {
+        countries.value = await getCountries()
+    } catch (e) {
+        // ignore
+    }
+})
+
+// Format price helper - accepts numbers or objects { value, currency }
+const formatPrice = (price) => {
+    let amount = 0
+    let currency = 'USD'
+    if (!price) return '$0.00'
+    if (typeof price === 'number') {
+        amount = price
+    } else if (price && typeof price === 'object') {
+        amount = Number(price.value ?? price.amount ?? 0)
+        currency = price.currency ?? price.currency_code ?? 'USD'
+    }
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: (currency || 'USD').toUpperCase() }).format(amount)
+}
+// initializeStripe is invoked onMounted above
+</script>
+
+<style scoped>
+.checkout-form {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.form-section {
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    border: 1px solid #e6e6e6;
+    border-radius: 8px;
+}
+
+.form-section h3 {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #e6e6e6;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+.form-check {
+    margin-bottom: 1rem;
+}
+
+.error-message {
+    color: #df1b41;
+    margin-bottom: 16px;
+    padding: 12px;
+    border-radius: 4px;
+    background-color: #fff0f0;
+}
+
+.submit-button {
+    background: #5469d4;
+    color: #ffffff;
+    border-radius: 4px;
+    border: 0;
+    padding: 12px 16px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    display: block;
+    width: 100%;
+    transition: all 0.2s ease;
+    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
+    margin-top: 24px;
+}
+
+.submit-button:hover {
+    filter: brightness(1.1);
+}
+
+.submit-button:disabled {
+    opacity: 0.5;
+    cursor: default;
+    background-color: #7795f8;
+}
+
+.order-summary {
+    margin-top: 1rem;
+    padding: 1rem;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+}
+
+.summary-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
+.summary-row.total {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e6e6e6;
+    font-weight: 600;
+    font-size: 1.1rem;
+}
+
+:deep(.stripe-element) {
+    padding: 12px;
+    border: 1px solid #e6e6e6;
+    border-radius: 4px;
+    background: white;
+}
+</style>