erp-city-vue-components 0.1.0

package/src/components/CartDetails.vue

@@ -0,0 +1,152 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { sidebarState } from "../state/sidebarState.js";
+import { cartState } from "../state/cartState.js";
+import { authState } from "../state/authState.js";
+import ProductCard from "./ProductCard.vue";
+
+onMounted(() => {
+    sidebarState.setHeader('Detalii coș', false);
+});
+
+const loginLabel = computed(() =>
+    cartState.price ? 'Autentifică-te pentru plată' : 'Autentifică-te pentru ofertă'
+);
+
+const guestLabel = computed(() =>
+    'Continuă ca invitat'
+);
+
+const couponCode = ref('');
+
+function continueAsGuest() {
+    sidebarState.open('address');
+}
+
+function openAuth() {
+    sidebarState.nextView = 'address';
+    sidebarState.open('auth');
+}
+
+async function applyCoupon() {
+    await cartState.applyCoupon(couponCode.value);
+}
+
+async function clearCoupon() {
+    await cartState.clearCoupon();
+}
+
+watch(
+    () => cartState.coupon,
+    (coupon) => {
+        couponCode.value = coupon?.code ?? '';
+    },
+    { immediate: true }
+);
+</script>
+
+<template>
+    <div class="flex flex-col min-h-[calc(100vh-228px)]">
+        <div class="space-y-4 divide-y divide-gray-200">
+            <product-card v-for="item in cartState.items"
+                          :item="item"
+            ></product-card>
+        </div>
+
+        <div v-if="!cartState.items.length"
+             class="text-center text-lg text-gray-500 mt-20"
+        >
+            Nu ai niciun produs în coșul tău.
+        </div>
+
+        <div v-if="cartState.subtotal"
+             class="mt-auto flex items-center justify-between pt-6 pb-4 border-t border-gray-200"
+        >
+            <div class="text-xl lg:text-2xl font-medium">Subtotal</div>
+            <div class="text-2xl lg:text-3xl">{{ cartState.subtotal }} RON</div>
+        </div>
+
+        <div
+            v-if="cartState.coupon && cartState.subtotal"
+            class="flex items-center justify-between pb-4 border-b border-gray-200"
+        >
+            <div class="text-lg lg:text-xl text-neutral-600">
+                Reducere ({{ cartState.coupon.discountPercent }}%)
+            </div>
+            <div class="text-lg lg:text-xl text-neutral-600">-{{ cartState.discountAmount }} RON</div>
+        </div>
+
+        <div
+            v-if="cartState.coupon && cartState.subtotal"
+            class="flex items-center justify-between py-6"
+        >
+            <div class="text-xl lg:text-2xl font-medium">Total</div>
+            <div class="text-2xl lg:text-3xl">{{ cartState.price }} RON</div>
+        </div>
+
+        <div v-if="cartState.items.length"
+             class="pb-8 flex space-x-2 items-end"
+        >
+            <v-input
+                id="coupon_code"
+                label="Cupon reducere"
+                placeholder="Introdu codul de reducere"
+                :error="cartState.couponError"
+                v-model="couponCode"
+            ></v-input>
+
+            <button
+                type="button"
+                class="p-3 border border-primary text-primary text-sm font-medium rounded-lg"
+                :disabled="cartState.couponLoading || !couponCode"
+                @click="applyCoupon"
+            >
+                Aplică
+            </button>
+
+            <button
+                v-if="cartState.coupon"
+                type="button"
+                class="p-3 border border-red-600 text-red-600 text-sm font-medium rounded-lg"
+                @click="clearCoupon"
+            >
+                Elimină
+            </button>
+        </div>
+
+        <div class="mt-auto border-t-2 border-t-neutral-200 pt-10">
+            <button
+                v-if="authState.isAuthenticated"
+                type="button"
+                class="btn btn-primary btn-full mb-2 lg:mb-6"
+                :disabled="!cartState.items.length"
+                @click="sidebarState.open('address')"
+            >
+                {{ cartState.price ? 'Continuă spre plată' : 'Solicită ofertă' }}
+            </button>
+
+            <div
+                v-else
+                class="flex flex-col gap-4 text-center"
+            >
+                <button
+                    type="button"
+                    class="btn btn-primary btn-full"
+                    :disabled="!cartState.items.length"
+                    @click="openAuth"
+                >
+                    {{ loginLabel }}
+                </button>
+                <div class="text-sm text-neutral-500">sau</div>
+                <button
+                    type="button"
+                    class="btn btn-secondary btn-full"
+                    :disabled="!cartState.items.length"
+                    @click="continueAsGuest"
+                >
+                    {{ guestLabel }}
+                </button>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/FavoriteProductCard.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { favoritesState } from '../state/favoritesState.js';
+import {route} from "ziggy-js";
+
+const props = defineProps({
+    product: {
+        type: Object,
+        required: true,
+    },
+});
+
+async function removeFromFavorites() {
+    await favoritesState.toggle(props.product.id);
+}
+
+</script>
+
+<template>
+    <div class="flex items-center py-4">
+        <a :href="route('shop.products.show', product.id)">
+            <img class="w-24 h-24 object-contain cursor-pointer" :src="product.icon_url || product.image" :alt="product.name">
+        </a>
+        <a class="ml-15 flex-1 cursor-pointer" :href="route('shop.products.show', product.id)">
+            <div class="font-bold text-xl lg:text-2xl mb-1.5">{{ product.name }}</div>
+            <p class="text-sm text-gray-500 line-clamp-2">{{ product.description }}</p>
+        </a>
+        <div class="ml-auto flex flex-col justify-between">
+            <div class="ml-auto hover:brightness-90 cursor-pointer" @click.stop="removeFromFavorites">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.33398 1.66667L7.50065 2.50001H4.16732C3.70732 2.50001 3.33398 2.87334 3.33398 3.33334C3.33398 3.79334 3.70732 4.16667 4.16732 4.16667H5.83398H14.1673H15.834C16.294 4.16667 16.6673 3.79334 16.6673 3.33334C16.6673 2.87334 16.294 2.50001 15.834 2.50001H12.5007L11.6673 1.66667H8.33398ZM4.16732 5.83334V16.6667C4.16732 17.5875 4.91315 18.3333 5.83398 18.3333H14.1673C15.0882 18.3333 15.834 17.5875 15.834 16.6667V5.83334H4.16732Z" fill="#C73838"/>
+                </svg>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/FavoritesSidebar.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed, onMounted } from 'vue';
+import FavoriteProductCard from './FavoriteProductCard.vue';
+import { favoritesState } from '../state/favoritesState.js';
+import { productsState } from '../state/productsState.js';
+import { sidebarState } from '../state/sidebarState.js';
+
+const favoriteProducts = computed(() => favoritesState.ids
+    .map(id => productsState.getProduct(id))
+    .filter(Boolean));
+const isLoading = computed(() => favoritesState.loading);
+const error = computed(() => favoritesState.error);
+
+onMounted(() => {
+    sidebarState.setHeader('Produse favorite', true);
+
+    if (! favoritesState.ids.length && ! favoritesState.loading) {
+        favoritesState.fetchFavorites();
+    }
+});
+</script>
+
+<template>
+    <div class="flex flex-col min-h-[calc(100vh-228px)]">
+        <h4 class="text-lg font-semibold mb-6">Produse favorite</h4>
+
+        <div v-if="isLoading" class="text-gray-500 text-sm mt-4">
+            Se încarcă favoritele...
+        </div>
+
+        <div v-else-if="error" class="text-red-600 text-sm mt-4">
+            {{ error }}
+        </div>
+
+        <div v-else-if="!favoriteProducts.length" class="text-gray-500 text-sm mt-4">
+            Nu ai adăugat încă produse la favorite.
+        </div>
+
+        <div v-else class="space-y-4 divide-y divide-gray-200 flex-1 overflow-y-auto">
+            <favorite-product-card
+                v-for="product in favoriteProducts"
+                :key="product.id"
+                :product="product"
+            ></favorite-product-card>
+        </div>
+    </div>
+</template>

package/src/components/OrderConfirmation.vue

@@ -0,0 +1,30 @@
+<script setup>
+import {sidebarState} from "../state/sidebarState.js";
+import {onMounted} from "vue";
+
+onMounted(() => {
+    sidebarState.setHeader('', false);
+});
+</script>
+
+<template>
+    <div class="flex flex-col items-center text-center pt-32">
+        <svg width="91" height="91" viewBox="0 0 91 91" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M45.5 91C70.629 91 91 70.629 91 45.5C91 20.371 70.629 0 45.5 0C20.371 0 0 20.371 0 45.5C0 70.629 20.371 91 45.5 91Z" fill="#028163"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M31.293 67.6904L14.6522 49.8798C12.374 47.4414 12.5047 43.5836 14.9431 41.3054C17.3815 39.0272 21.2393 39.1583 23.5175 41.5963L36.3535 55.3344L56.6713 36.3509C56.854 36.18 57.0449 36.0234 57.2423 35.8794L66.797 26.9525C69.2354 24.6742 73.0935 24.8054 75.3714 27.2437C77.6496 29.6818 77.5185 33.5399 75.0805 35.8182L45.8982 63.0841L45.867 63.0508L35.7724 72.4826L31.293 67.6904Z" fill="white"/>
+        </svg>
+
+        <h3 class="mt-6 mb-4">Solicitarea a fost trimisă cu succes!</h3>
+        <div class="text-lg lg:text-xl max-w-sm mb-10">
+            Mulțumim pentru încredere. Vom procesa solicitarea ta cât mai curând și te vom contacta pentru confirmare.
+        </div>
+        <button type="button"
+                class="btn btn-secondary btn-full"
+                @click="sidebarState.close()"
+        >
+            Închide
+        </button>
+    </div>
+</template>
+
+

package/src/components/OrdersSidebar.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { computed, onMounted } from 'vue';
+import { ordersState } from '../state/ordersState.js';
+import { sidebarState } from '../state/sidebarState.js';
+
+const orders = computed(() => ordersState.orders);
+const isLoading = computed(() => ordersState.loading);
+const error = computed(() => ordersState.error);
+
+function formatDate(value) {
+    if (!value) {
+        return '-';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+        return '-';
+    }
+
+    return date.toLocaleDateString('ro-RO', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    });
+}
+
+function formatCurrency(amount, currency) {
+    if (amount === null || amount === undefined) {
+        return '-';
+    }
+
+    const value = Number(amount);
+
+    if (Number.isNaN(value)) {
+        return '-';
+    }
+
+    return `${value.toFixed(2)} ${currency || 'RON'}`;
+}
+
+onMounted(() => {
+    sidebarState.setHeader('Comenzile mele', true);
+
+    if (!ordersState.orders.length && !ordersState.loading) {
+        ordersState.fetchOrders();
+    }
+});
+</script>
+
+<template>
+    <div class="flex flex-col min-h-[calc(100vh-228px)]">
+        <div v-if="isLoading" class="text-gray-500 text-sm mt-4">
+            Se încarcă comenzile...
+        </div>
+
+        <div v-else-if="error" class="text-red-600 text-sm mt-4">
+            {{ error }}
+        </div>
+
+        <div v-else-if="!orders.length" class="text-gray-500 text-sm mt-4">
+            Nu ai plasat încă nicio comandă.
+        </div>
+
+        <div v-else class="space-y-4 flex-1 overflow-y-auto">
+            <div v-for="order in orders" :key="order.id" class="pt-4 border border-neutral-300 rounded-lg p-4">
+                <div class="flex items-center justify-between pb-4 border-b border-neutral-300">
+                    <div class="font-medium">
+                        Comanda nr. #{{ order.id }} · <span class="text-neutral-500">{{ formatDate(order.date) }}</span>
+                    </div>
+                    <div class="font-semibold">
+                        {{ formatCurrency(order.total, order.currency) }}
+                    </div>
+                </div>
+
+                <div class="text-sm text-neutral-700 mt-4">
+                    <span class="font-medium">Produse: </span>
+                </div>
+
+                <div v-if="order.items?.length" class="mt-2 text-sm text-neutral-600 space-y-1">
+                    <div
+                        v-for="(item, index) in order.items"
+                        :key="`${order.id}-${index}`"
+                        class="flex items-center justify-between"
+                    >
+                        <div>
+                            {{ item.name || 'Produs' }}
+                            <span v-if="item.quantity">({{ item.quantity }} buc)</span>
+                        </div>
+                        <div>
+                            {{ formatCurrency(item.price * item.quantity, item.currency || order.currency) }}
+                        </div>
+                    </div>
+                </div>
+
+                <div v-else>-</div>
+
+                <div class="text-sm text-neutral-600 mt-3">
+                    <span class="font-medium">Status: </span>
+                    {{ order.status?.label || '-' }}
+                </div>
+                <div class="text-sm text-neutral-600 mt-2">
+                    <span class="font-medium">Plată: </span>
+                    {{ order.payment_type?.label || '-' }}
+                </div>
+
+                <div class="mt-3 text-sm text-neutral-600 space-y-1">
+                    <div class="flex items-center justify-between">
+                        <span class="font-medium">Subtotal:</span>
+                        <span>{{ formatCurrency(order.subtotal, order.currency) }}</span>
+                    </div>
+                    <div v-if="order.discount_percent" class="text-sm text-neutral-600 mt-2">
+                        <span class="font-medium">Discount:</span>
+                        {{ order.discount_percent }}%
+                        <span v-if="order.coupon_code">({{ order.coupon_code }})</span>
+                    </div>
+                    <div v-if="order.discount_percent" class="flex items-center justify-between">
+                        <span class="font-medium">Reducere:</span>
+                        <span>-{{ formatCurrency(order.subtotal - order.total, order.currency) }}</span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span class="font-medium">Total final:</span>
+                        <span>{{ formatCurrency(order.total, order.currency) }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/PaymentOrderConfirmation.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { sidebarState } from "../state/sidebarState.js";
+import { onMounted } from "vue";
+
+onMounted(() => {
+    sidebarState.setHeader('', false);
+});
+</script>
+
+<template>
+    <div class="flex flex-col items-center text-center pt-32">
+        <svg width="91" height="91" viewBox="0 0 91 91" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M45.5 91C70.629 91 91 70.629 91 45.5C91 20.371 70.629 0 45.5 0C20.371 0 0 20.371 0 45.5C0 70.629 20.371 91 45.5 91Z" fill="#028163"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M31.293 67.6904L14.6522 49.8798C12.374 47.4414 12.5047 43.5836 14.9431 41.3054C17.3815 39.0272 21.2393 39.1583 23.5175 41.5963L36.3535 55.3344L56.6713 36.3509C56.854 36.18 57.0449 36.0234 57.2423 35.8794L66.797 26.9525C69.2354 24.6742 73.0935 24.8054 75.3714 27.2437C77.6496 29.6818 77.5185 33.5399 75.0805 35.8182L45.8982 63.0841L45.867 63.0508L35.7724 72.4826L31.293 67.6904Z" fill="white"/>
+        </svg>
+
+        <h3 class="mt-6 mb-4">Comanda a fost trimisă cu succes!</h3>
+        <div class="text-lg lg:text-xl max-w-sm mb-10">
+            Mulțumim pentru încredere. Vom procesa comanda ta cât mai curând și te vom contacta pentru confirmare.
+        </div>
+        <button type="button"
+                class="btn btn-secondary btn-full"
+                @click="sidebarState.close()"
+        >
+            Închide
+        </button>
+    </div>
+</template>

package/src/components/ProductCard.vue

@@ -0,0 +1,69 @@
+<script setup>
+import {computed, onMounted, ref, watch} from "vue";
+import {productsState} from "../state/productsState.js";
+import {cartState} from "../state/cartState.js";
+
+import QuantityInput from "./QuantityInput.vue";
+
+//--- Props -----------------------------------------------------------------------------------------------------------
+const props = defineProps({
+    item: {
+        type: Object,
+        required: true
+    }
+});
+
+//--- Data ------------------------------------------------------------------------------------------------------------
+let quantity = ref(null);
+const product = computed(() => productsState.getProduct(props.item.id));
+
+//--- Watch -----------------------------------------------------------------------------------------------------------
+watch(quantity, (newQuantity, oldQuantity) => {
+    if (newQuantity !== oldQuantity)
+        cartState.updateQuantity(props.item.id, newQuantity, props.item.price);
+});
+
+watch(() => props.item.quantity, (newQty) => {
+    quantity.value = newQty;
+});
+
+//--- Mounted ---------------------------------------------------------------------------------------------------------
+onMounted(() => {
+    quantity.value = props.item.quantity;
+});
+</script>
+
+<template>
+    <div class="flex items-center pb-4">
+        <img v-if="product.icon_url"
+             class="w-24 h-24 object-contain"
+             :src="product.icon_url"
+             :alt="product.name"
+        >
+        <div v-else class="w-24 h-24">
+
+        </div>
+        <div class="ml-15">
+            <div class="font-bold text-xl lg:text-2xl mb-1.5">{{ product.name }}</div>
+            <div v-if="product.price && product.price > 0"
+                 class="text-lg lg:text-xl"
+            >
+                {{ product.price }} {{ product.currency }}/buc
+            </div>
+        </div>
+        <div class="ml-auto flex flex-col justify-between">
+            <!-- Delete icon ------------------------------------------------------------------------------------->
+            <div class="ml-auto hover:brightness-90 cursor-pointer mb-8"
+                 @click="cartState.removeItem(props.item.id)"
+            >
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.33398 1.66667L7.50065 2.50001H4.16732C3.70732 2.50001 3.33398 2.87334 3.33398 3.33334C3.33398 3.79334 3.70732 4.16667 4.16732 4.16667H5.83398H14.1673H15.834C16.294 4.16667 16.6673 3.79334 16.6673 3.33334C16.6673 2.87334 16.294 2.50001 15.834 2.50001H12.5007L11.6673 1.66667H8.33398ZM4.16732 5.83334V16.6667C4.16732 17.5875 4.91315 18.3333 5.83398 18.3333H14.1673C15.0882 18.3333 15.834 17.5875 15.834 16.6667V5.83334H4.16732Z" fill="#C73838"/>
+                </svg>
+            </div>
+
+            <quantity-input v-if="product.price && product.price > 0"
+                            v-model="quantity"
+            ></quantity-input>
+        </div>
+    </div>
+</template>

package/src/components/QuantityInput.vue

@@ -0,0 +1,44 @@
+<script setup>
+import {ref, watch} from "vue";
+
+const emits = defineEmits(['update:model-value']);
+let quantity = ref(1);
+
+watch(quantity, (newValue) => {
+    emits('update:model-value', newValue);
+});
+
+const props = defineProps({
+    modelValue: {
+        type: Number,
+        default: 1
+    }
+});
+
+watch(() => props.modelValue, (newValue) => {
+    quantity.value = newValue;
+});
+</script>
+
+<template>
+    <div class="flex text-gray-500">
+        <button class="cursor-pointer hover:bg-gray-100 active:bg-gray-200 h-11 w-8.5 border border-gray-200 rounded-l flex items-center justify-center"
+                :disabled="quantity <= 1"
+                @click="quantity = quantity > 1 ? quantity - 1 : 1"
+        >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13.3333 7.33334H2.66667C2.29867 7.33334 2 7.63201 2 8.00001C2 8.36801 2.29867 8.66668 2.66667 8.66668H13.3333C13.7013 8.66668 14 8.36801 14 8.00001C14 7.63201 13.7013 7.33334 13.3333 7.33334Z" fill="#6E7077"/>
+            </svg>
+        </button>
+
+        <input id="quantity" label="Cantitate" class="h-11 w-12 lg:w-16 flex border-t border-b border-gray-200 items-center text-center justify-center text-lg lg:text-xl" v-model="quantity">
+
+        <button class="cursor-pointer hover:bg-gray-100 active:bg-gray-200 h-11 w-8.5 border border-gray-200 rounded-r flex items-center justify-center"
+                @click="quantity++"
+        >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13.3333 7.33333H8.66667V2.66667C8.66667 2.29867 8.368 2 8 2C7.632 2 7.33333 2.29867 7.33333 2.66667V7.33333H2.66667C2.29867 7.33333 2 7.632 2 8C2 8.368 2.29867 8.66667 2.66667 8.66667H7.33333V13.3333C7.33333 13.7013 7.632 14 8 14C8.368 14 8.66667 13.7013 8.66667 13.3333V8.66667H13.3333C13.7013 8.66667 14 8.368 14 8C14 7.632 13.7013 7.33333 13.3333 7.33333Z" fill="#6E7077"/>
+            </svg>
+        </button>
+    </div>
+</template>

package/src/components/Sidebar.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { sidebarState } from '../state/sidebarState.js';
+import { erpCityUiConfig } from '../config.js';
+
+import AddressForm from "./AddressForm.vue";
+import CartDetails from "./CartDetails.vue";
+import OrderConfirmation from "./OrderConfirmation.vue";
+import PaymentOrderConfirmation from "./PaymentOrderConfirmation.vue";
+import AuthSidebar from "./AuthSidebar.vue";
+import FavoritesSidebar from "./FavoritesSidebar.vue";
+import OrdersSidebar from "./OrdersSidebar.vue";
+</script>
+
+<template>
+    <div v-if="sidebarState.isOpen"
+         class="bg-white z-30 px-6 py-6 fixed right-0 w-full max-w-[42rem] shadow-lg overflow-y-auto"
+    >
+        <!-- Header -------------------------------------------------------------------------------------------------->
+        <div class="flex items-center justify-between mb-15">
+            <!-- Back icon ------------------------------------------------------------------------------------------->
+            <div v-if="sidebarState.withBack"
+                 class="cursor-pointer"
+                 @click="sidebarState.goBack()"
+            >
+                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13.3324 7.1224C12.9912 7.1224 12.6497 7.25496 12.3897 7.51563L4.84803 15.0573C4.3267 15.5786 4.3267 16.4227 4.84803 16.9427L12.3897 24.4844C12.911 25.0057 13.7551 25.0057 14.2751 24.4844L14.3897 24.3698C14.911 23.8485 14.911 23.0044 14.3897 22.4844L9.23866 17.3333H26.6657C27.4017 17.3333 27.9991 16.736 27.9991 16C27.9991 15.264 27.4017 14.6667 26.6657 14.6667H9.23866L14.3897 9.51563C14.911 8.99429 14.911 8.15021 14.3897 7.63021L14.2751 7.51563C14.0144 7.25496 13.6736 7.1224 13.3324 7.1224Z" fill="black"/>
+                </svg>
+            </div>
+
+            <!-- Title ----------------------------------------------------------------------------------------------->
+            <h3>
+                {{ sidebarState.title }}
+            </h3>
+
+            <!-- Close icon ------------------------------------------------------------------------------------------>
+            <div class="cursor-pointer"
+                 @click="sidebarState.close()"
+            >
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.99105 3.99024C4.79212 3.99029 4.59772 4.04967 4.43271 4.16079C4.2677 4.2719 4.13958 4.4297 4.06472 4.61401C3.98986 4.79832 3.97167 5.00077 4.01248 5.19548C4.05328 5.39018 4.15122 5.56829 4.29379 5.70704L10.5868 12L4.29379 18.293C4.19781 18.3851 4.12119 18.4955 4.0684 18.6176C4.01562 18.7397 3.98773 18.8712 3.98638 19.0042C3.98503 19.1373 4.01023 19.2692 4.06052 19.3924C4.11081 19.5156 4.18517 19.6275 4.27925 19.7216C4.37333 19.8157 4.48523 19.89 4.60841 19.9403C4.73159 19.9906 4.86356 20.0158 4.9966 20.0144C5.12964 20.0131 5.26108 19.9852 5.38321 19.9324C5.50533 19.8796 5.6157 19.803 5.70785 19.707L12.0008 13.4141L18.2938 19.707C18.3859 19.803 18.4963 19.8796 18.6184 19.9324C18.7406 19.9852 18.872 20.0131 19.005 20.0145C19.1381 20.0158 19.27 19.9906 19.3932 19.9403C19.5164 19.89 19.6283 19.8157 19.7224 19.7216C19.8165 19.6275 19.8908 19.5156 19.9411 19.3924C19.9914 19.2692 20.0166 19.1373 20.0153 19.0042C20.0139 18.8712 19.986 18.7397 19.9332 18.6176C19.8804 18.4955 19.8038 18.3851 19.7078 18.293L13.4149 12L19.7078 5.70704C19.8523 5.56658 19.951 5.38574 19.991 5.18822C20.031 4.9907 20.0103 4.78571 19.9318 4.60013C19.8532 4.41454 19.7205 4.25701 19.5509 4.14818C19.3812 4.03935 19.1827 3.9843 18.9813 3.99024C18.7215 3.99798 18.4749 4.10656 18.2938 4.29298L12.0008 10.5859L5.70785 4.29298C5.61466 4.19718 5.50321 4.12104 5.3801 4.06904C5.25698 4.01704 5.1247 3.99025 4.99105 3.99024Z" fill="black"/>
+                </svg>
+            </div>
+        </div>
+
+        <cart-details v-if="sidebarState.currentView === 'cart'"
+        ></cart-details>
+
+        <address-form v-else-if="sidebarState.currentView === 'address'"
+        ></address-form>
+
+        <order-confirmation v-else-if="sidebarState.currentView === 'confirmation'"
+        ></order-confirmation>
+
+        <payment-order-confirmation v-else-if="sidebarState.currentView === 'payment-confirmation'"
+        ></payment-order-confirmation>
+
+        <auth-sidebar v-else-if="sidebarState.currentView === 'auth'"
+        ></auth-sidebar>
+
+        <favorites-sidebar v-else-if="erpCityUiConfig.showFavorites && sidebarState.currentView === 'favorites'"
+        ></favorites-sidebar>
+
+        <orders-sidebar v-else-if="erpCityUiConfig.showOrders && sidebarState.currentView === 'orders'"
+        ></orders-sidebar>
+    </div>
+</template>

package/src/composables/handlesFormErrors.js

@@ -0,0 +1,39 @@
+import {ref} from "vue";
+
+export function useHandlesFormErrors() {
+    let errorBag = ref({});
+    let genericError = ref(null);
+
+    //--- Methods -----------------------------------------------------------------------------------------------------
+
+    function setErrorBag(error) {
+        // Validation errors
+        if (error.response.status === 422)
+            errorBag.value = error.response.data.errors;
+
+        genericError.value = error.response.data.message;
+    }
+
+    function emptyErrorBag() {
+        errorBag.value = {};
+    }
+
+    function errorBagIsEmpty() {
+        return !Object.keys(errorBag.value).length;
+    }
+
+    function error(fieldName) {
+        if (fieldName === 'genericError')
+            return genericError.value;
+
+        return errorBag.value[fieldName] ? errorBag.value[fieldName][0] : '';
+    }
+
+    return {
+        error,
+        genericError,
+        setErrorBag,
+        emptyErrorBag,
+        errorBagIsEmpty,
+    }
+}

package/src/config.js

@@ -0,0 +1,11 @@
+import { reactive } from 'vue';
+
+export const erpCityUiConfig = reactive({
+    showFavorites: true,
+    showOrders: true,
+    showCompany: true
+});
+
+export function setErpCityUiConfig(partial = {}) {
+    Object.assign(erpCityUiConfig, partial);
+}