erp-city-vue-components 0.1.0

package/README.md

@@ -0,0 +1,76 @@
+# erp-city-vue-components
+
+Shared Vue 3 components + reactive state used for ERP storefront flows (auth, cart, checkout, favorites, orders).
+Designed to integrate with `erp-city` and `erp-city-client`:
+
+- https://github.com/AntonioPrimera/erp-city
+- https://github.com/AntonioPrimera/erp-city-client
+
+## Install
+
+Local development (recommended in monorepo-style):
+
+```bash
+npm install ../erp-city-vue-components
+```
+
+Or add to your app `package.json`:
+
+```json
+{
+  "dependencies": {
+    "erp-city-vue-components": "file:../erp-city-vue-components"
+  }
+}
+```
+
+Then run:
+
+```bash
+npm install
+```
+
+## Requirements
+
+- Vue 3
+- Axios
+- Ziggy JS (`ziggy-js`)
+- A global `route()` helper (Ziggy) available at runtime
+- A globally registered `v-input` component (used by forms in the sidebar)
+
+## Usage
+
+```js
+import { createApp } from 'vue';
+import {
+  Sidebar,
+  cartState,
+  productsState,
+  authState,
+  favoritesState,
+  sidebarState,
+  setErpCityUiConfig,
+} from 'erp-city-vue-components';
+
+setErpCityUiConfig({
+  showFavorites: false,
+});
+
+productsState.loadProducts();
+cartState.loadCart();
+authState.bootstrap();
+
+const app = createApp({});
+app.component('v-sidebar', Sidebar);
+app.mount('#app');
+
+// Example usage
+sidebarState.open('cart');
+```
+
+## Exports
+
+- Components: `Sidebar`, `CartButton`, `AuthButton`, `AuthSidebar`, `OrdersSidebar`, `FavoritesSidebar`, `CartDetails`, `AddressForm`, `OrderConfirmation`, `PaymentOrderConfirmation`, `ProductCard`, `FavoriteProductCard`, `QuantityInput`
+- State: `authState`, `cartState`, `favoritesState`, `ordersState`, `productsState`, `sidebarState`
+- Composables: `useHandlesFormErrors`
+- Config: `setErpCityUiConfig`, `erpCityUiConfig`

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "erp-city-vue-components",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./components/*": "./src/components/*.vue",
+    "./state/*": "./src/state/*.js",
+    "./composables/*": "./src/composables/*.js"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "axios": "^1.0.0",
+    "vue": "^3.0.0",
+    "ziggy-js": "^2.0.0"
+  }
+}

package/src/components/AddressForm.vue

@@ -0,0 +1,249 @@
+<script setup>
+import axios from "axios";
+import { sidebarState } from "../state/sidebarState.js";
+import { cartState } from "../state/cartState.js";
+import { authState } from "../state/authState.js";
+import { useHandlesFormErrors } from "../composables/handlesFormErrors.js";
+import { onMounted, computed, reactive, ref, watch } from "vue";
+import { erpCityUiConfig } from "../config.js";
+
+const {error, setErrorBag} = useHandlesFormErrors();
+
+const addressData = reactive({
+    name: null,
+    address: null,
+    phone: null,
+    email: null,
+    company: null
+})
+
+let loading = ref(false);
+const cardPaymentsEnabled = ref(true);
+const paymentType = ref(cardPaymentsEnabled.value ? 'card' : 'on_delivery');
+const paymentMethodsLoaded = ref(false);
+const hasPrefilledFromProfile = ref(false);
+const isPrefillingProfile = ref(false);
+const profileFieldMap = {
+    name: "name",
+    email: "email",
+    phone: "phone",
+    address: "address",
+    company: "company",
+};
+const showCompany = computed(() => erpCityUiConfig.showCompany);
+
+watch(addressData, (newData) => {
+    localStorage.setItem('addressData', JSON.stringify(newData));
+}, { deep: true });
+
+const isMissingAddressField = (value) => value === null || value === undefined || value === '';
+
+async function prefillAddressFromProfile() {
+    if (!authState.isAuthenticated || hasPrefilledFromProfile.value || isPrefillingProfile.value) {
+        return;
+    }
+
+    isPrefillingProfile.value = true;
+
+    try {
+        const { data } = await axios.get(route('erp.auth.me'));
+        const profile = data?.data;
+
+        if (!profile) {
+            return;
+        }
+
+        Object.entries(profileFieldMap).forEach(([profileKey, addressKey]) => {
+            const profileValue = profile[profileKey];
+
+            if (profileValue && isMissingAddressField(addressData[addressKey])) {
+                addressData[addressKey] = profileValue;
+            }
+        });
+
+        hasPrefilledFromProfile.value = true;
+    } catch (error) {
+        console.warn('Failed to prefill address data from ERP profile', error);
+    } finally {
+        isPrefillingProfile.value = false;
+    }
+}
+
+function confirmOrder() {
+    loading.value = true;
+
+    axios.post(route('erp.orders.store'), {
+        ...addressData,
+        items: cartState.items,
+        payment_type: cartState.price ? paymentType.value : null,
+        coupon_code: cartState.coupon?.code ?? null,
+    })
+        .then((response) => {
+            const checkoutUrl = response?.data?.checkout_url;
+            if (checkoutUrl) {
+                window.location.href = checkoutUrl;
+                return;
+            }
+
+            if (cartState.price) {
+                sidebarState.open('payment-confirmation');
+            } else {
+                sidebarState.open('confirmation');
+            }
+            cartState.clearCart();
+            localStorage.removeItem('addressData');
+        })
+        .catch(error => {
+            setErrorBag(error);
+            console.error("Error saving order:", error);
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+}
+
+onMounted(() => {
+    const savedAddress = localStorage.getItem('addressData');
+
+    if (savedAddress) {
+        Object.assign(addressData, JSON.parse(savedAddress));
+    }
+
+    if (authState.isAuthenticated) {
+        prefillAddressFromProfile();
+    }
+
+    sidebarState.setHeader('Adresa', true);
+    loadPaymentMethods();
+});
+
+watch(
+    () => authState.isAuthenticated,
+    (isAuthenticated) => {
+        if (isAuthenticated) {
+            prefillAddressFromProfile();
+        } else {
+            hasPrefilledFromProfile.value = false;
+        }
+    }
+);
+
+async function loadPaymentMethods() {
+    try {
+        const { data } = await axios.get(route('erp.paymentMethods'));
+        const cardEnabled = data?.data?.card_enabled;
+        if (typeof cardEnabled === 'boolean') {
+            cardPaymentsEnabled.value = cardEnabled;
+        }
+    } catch (error) {
+        console.warn('Failed to load ERP payment methods', error);
+    } finally {
+        if (!cardPaymentsEnabled.value) {
+            paymentType.value = 'on_delivery';
+        }
+        paymentMethodsLoaded.value = true;
+    }
+}
+</script>
+
+<template>
+    <div class="grid grid-cols-1 gap-4 lg:gap-4">
+        <v-input class="col-span-full"
+                 id="name"
+                 label="Nume și prenume"
+                 placeholder="Nume și prenume"
+                 :error="error('name')"
+                 autofocus
+                 v-model="addressData.name"
+        ></v-input>
+
+        <v-input v-if="showCompany"
+                 id="company"
+                 label="Societatea"
+                 placeholder="Societatea"
+                 :error="error('company')"
+                 v-model="addressData.company"
+        ></v-input>
+
+        <v-input id="address"
+                 label="Adresa"
+                 placeholder="Adresa"
+                 :error="error('address')"
+                 v-model="addressData.address"
+        ></v-input>
+
+        <v-input id="phone"
+                 label="Număr de telefon"
+                 placeholder="Număr de telefon"
+                 inputmode="tel"
+                 :error="error('phone')"
+                 v-model="addressData.phone"
+        ></v-input>
+
+        <v-input id="email"
+                 label="Email"
+                 placeholder="Email"
+                 inputmode="email"
+                 :error="error('email')"
+                 v-model="addressData.email"
+        ></v-input>
+    </div>
+
+    <div v-if="cartState.price && paymentMethodsLoaded" class="mt-8">
+        <div class="font-medium text-lg lg:text-xl mb-4">Selectează metoda de plată</div>
+
+        <div class="space-y-4 lg:space-y-6">
+            <div
+                v-if="cardPaymentsEnabled"
+                class="border border-primary p-7 rounded-xl flex items-center cursor-pointer"
+                :class="{ 'bg-primary/5': paymentType === 'card' }"
+                @click="paymentType = 'card'"
+            >
+                <div class="mr-5.5">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="11.25" fill="white" stroke="#2F5233" stroke-width="1.5"/>
+                        <circle
+                            cx="12.0007"
+                            cy="12"
+                            r="6.66667"
+                            :fill="paymentType === 'card' ? '#2F5233' : 'white'"
+                            :stroke="paymentType === 'card' ? '#2F5233' : 'white'"
+                        />
+                    </svg>
+                </div>
+                <div class="font-medium text-lg lg:text-xl">Card</div>
+            </div>
+
+            <div
+                class="border border-primary p-7 rounded-xl flex items-center cursor-pointer"
+                :class="{ 'bg-primary/5': paymentType === 'on_delivery' }"
+                @click="paymentType = 'on_delivery'"
+            >
+                <div class="mr-5.5">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="11.25" fill="white" stroke="#2F5233" stroke-width="1.5"/>
+                        <circle
+                            cx="12.0007"
+                            cy="12"
+                            r="6.66667"
+                            :fill="paymentType === 'on_delivery' ? '#2F5233' : 'white'"
+                            :stroke="paymentType === 'on_delivery' ? '#2F5233' : 'white'"
+                        />
+                    </svg>
+                </div>
+                <div class="font-medium text-lg lg:text-xl">Ramburs</div>
+            </div>
+        </div>
+    </div>
+
+    <button type="button"
+            class="btn btn-primary btn-full mt-6"
+            @click="confirmOrder"
+    >
+        {{
+            cartState.price
+                ? (cardPaymentsEnabled && paymentType === 'card' ? 'Continuă spre plată' : 'Finalizează')
+                : 'Trimite solicitare'
+        }}
+    </button>
+</template>

package/src/components/AuthButton.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { computed } from 'vue';
+import {authState} from "../state/authState.js";
+import {sidebarState} from "../state/sidebarState.js";
+
+const iconSrc = '/img/icons/auth.svg';
+const initials = computed(() => {
+    const name = authState.user?.name || [authState.user?.first_name, authState.user?.last_name].filter(Boolean).join(' ');
+    if (! name) {
+        return '';
+    }
+
+    return name
+        .split(' ')
+        .filter(Boolean)
+        .slice(0, 2)
+        .map(part => part[0]?.toUpperCase())
+        .join('');
+});
+
+function openAuthSidebar() {
+    sidebarState.setHeader(authState.isAuthenticated ? 'Contul meu' : 'Intră în cont', false);
+    sidebarState.open('auth');
+}
+</script>
+
+<template>
+    <button type="button"
+            class="cursor-pointer flex items-center justify-center ml-4"
+            :class="{'bg-primary text-white rounded-full h-8 w-8' : authState.isAuthenticated}"
+            @click="openAuthSidebar">
+        <span v-if="authState.isAuthenticated" class="text-sm font-semibold">{{ initials }}</span>
+        <img v-else :src="iconSrc" alt="Profil" class="h-5.5 w-5.5" />
+    </button>
+</template>

package/src/components/AuthSidebar.vue

@@ -0,0 +1,218 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { authState } from '../state/authState.js';
+import { favoritesState } from '../state/favoritesState.js';
+import { ordersState } from '../state/ordersState.js';
+import { sidebarState } from '../state/sidebarState.js';
+import { erpCityUiConfig } from '../config.js';
+
+const mode = ref('login');
+const form = ref({
+    email: '',
+    password: '',
+    password_confirmation: '',
+    name: '',
+});
+const formErrors = ref({});
+const generalError = ref('');
+const isLoadingFavorites = computed(() => favoritesState.loading);
+const isLoadingOrders = computed(() => ordersState.loading);
+const showFavorites = computed(() => erpCityUiConfig.showFavorites);
+const showOrders = computed(() => erpCityUiConfig.showOrders);
+
+const sidebarTitle = computed(() => {
+    if (authState.isAuthenticated) {
+        return 'Contul meu';
+    }
+
+    return mode.value === 'login' ? 'Intră în cont' : 'Creează cont';
+});
+
+watch(sidebarTitle, (title) => {
+    sidebarState.setHeader(title, false);
+});
+
+sidebarState.setHeader(sidebarTitle.value, false);
+
+function resetForm() {
+    form.value = {
+        email: '',
+        password: '',
+        password_confirmation: '',
+        name: '',
+    };
+    formErrors.value = {};
+    generalError.value = '';
+}
+
+async function onSubmit() {
+    formErrors.value = {};
+    generalError.value = '';
+
+    try {
+        if (mode.value === 'login') {
+            await authState.login({
+                email: form.value.email,
+                password: form.value.password,
+            });
+        } else {
+            await authState.register({
+                name: form.value.name,
+                email: form.value.email,
+                password: form.value.password,
+                password_confirmation: form.value.password_confirmation,
+            });
+        }
+
+        const nextView = sidebarState.nextView;
+        sidebarState.nextView = null;
+        resetForm();
+
+        if (nextView) {
+            sidebarState.open(nextView);
+        }
+    } catch (error) {
+        const responseData = error.response?.data;
+        const responseErrors = responseData?.errors;
+        if (responseErrors) {
+            formErrors.value = Object.fromEntries(
+                Object.entries(responseErrors).map(([key, messages]) => [key, messages.join(' ')])
+            );
+        } else if (responseData?.message) {
+            generalError.value = responseData.message;
+        }
+    }
+}
+
+function switchMode(newMode) {
+    mode.value = newMode;
+    resetForm();
+}
+
+function viewFavorites() {
+    if (! showFavorites.value) {
+        return;
+    }
+    favoritesState.fetchFavorites();
+    sidebarState.setHeader('Produse favorite', true);
+    sidebarState.open('favorites');
+}
+
+function viewOrders() {
+    if (! showOrders.value) {
+        return;
+    }
+    ordersState.fetchOrders();
+    sidebarState.setHeader('Comenzile mele', true);
+    sidebarState.open('orders');
+}
+
+async function onLogout() {
+    await authState.logout();
+    sidebarState.close();
+}
+</script>
+
+<template>
+    <div class="flex flex-col">
+        <template v-if="!authState.isAuthenticated">
+            <form @submit.prevent="onSubmit" class="flex flex-col flex-1">
+                <div class="space-y-4">
+                    <div v-if="mode === 'register'">
+                        <v-input
+                            id="name"
+                            label="Nume complet"
+                            :error="formErrors.name"
+                            placeholder="Introduceți numele"
+                            v-model="form.name"
+                        />
+                    </div>
+
+                    <v-input
+                        id="email"
+                        label="Email"
+                        :error="formErrors.email"
+                        placeholder="email@example.com"
+                        type="email"
+                        v-model="form.email"
+                    />
+
+                    <v-input
+                        id="password"
+                        label="Parolă"
+                        :error="formErrors.password"
+                        placeholder="Parola"
+                        type="password"
+                        v-model="form.password"
+                    />
+
+                    <div v-if="mode === 'register'">
+                        <v-input
+                            id="password_confirmation"
+                            label="Confirmă parola"
+                            :error="formErrors.password_confirmation"
+                            placeholder="Reintroduceți parola"
+                            type="password"
+                            v-model="form.password_confirmation"
+                        />
+                    </div>
+
+                    <div class="mt-6 mb-2 text-right text-sm text-gray-600">
+                        <div v-if="mode === 'register'">
+                            Ai deja un cont? <span class="underline cursor-pointer" @click="switchMode('login')">Intră în cont</span>
+                        </div>
+                        <div v-else>
+                            Nu ai un cont? <span class="underline cursor-pointer" @click="switchMode('register')">Înregistrează-te</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div v-if="generalError" class="text-red-600 text-sm mb-4">
+                    {{ generalError }}
+                </div>
+
+                <button type="submit" class="btn btn-primary btn-full mt-auto" :disabled="authState.status === 'loading'">
+                    {{ mode === 'login' ? 'Autentifică-te' : 'Înregistrează-te' }}
+                </button>
+            </form>
+        </template>
+
+        <template v-else>
+            <div class="h-full flex flex-col">
+                <div class="-mt-10 mb-4">
+                    <p class="text-sm text-gray-500 mb-1">Ești autentificat ca</p>
+                    <p class="text-lg font-semibold">{{ authState.user?.name || [authState.user?.first_name, authState.user?.last_name].filter(Boolean).join(' ') }}</p>
+                    <p class="text-gray-700">{{ authState.user?.email }}</p>
+                </div>
+
+                <div v-if="showFavorites" class="flex items-center justify-between  pb-8 pt-8 border-b border-b-neutral-200">
+                    <h4 class="text-lg font-semibold">
+                        Produse favorite
+                        <span class="text-neutral-400 font-normal">
+                            ({{ favoritesState.ids.length }})
+                        </span>
+                    </h4>
+                    <button type="button" class="text-primary underline" @click="viewFavorites" :disabled="isLoadingFavorites">
+                        Vezi
+                    </button>
+                </div>
+
+                <div v-if="showOrders" class="flex items-center justify-between pb-8 pt-8 border-b border-b-neutral-200">
+                    <h4 class="text-lg font-semibold">
+                        Comenzile mele
+                        <span class="text-neutral-400 font-normal">
+                            ({{ ordersState.orders.length }})
+                        </span>
+                    </h4>
+                    <button type="button" class="text-primary underline" @click="viewOrders" :disabled="isLoadingOrders">
+                        Vezi
+                    </button>
+                </div>
+            </div>
+
+            <button class="btn btn-primary btn-full mt-8" @click="onLogout" :disabled="authState.status === 'loading'">
+                Deconectează-te
+            </button>
+        </template>
+    </div>
+</template>

package/src/components/CartButton.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { cartState, sidebarState } from "erp-city-vue-components";
+
+const cartIconSrc = '/img/icons/cart.svg';
+</script>
+
+<template>
+    <div class="block relative ml-auto cursor-pointer"
+         @click="sidebarState.open('cart')"
+    >
+        <div v-if="cartState.count"
+             class="absolute bottom-3 left-3 flex items-center justify-center rounded-full bg-[#C73838] w-5.5 h-5.5 text-white text-center"
+        >
+            {{ cartState.count}}
+        </div>
+        <img :src="cartIconSrc" alt="Cart">
+    </div>
+</template>