@meeovi/layer-commerce 1.0.5 → 1.0.7

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

@@ -1,182 +0,0 @@
-<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

@@ -1,415 +0,0 @@
-<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>