erp-city-vue-components 0.1.0

package/src/index.js

@@ -0,0 +1,24 @@
+export { default as Sidebar } from './components/Sidebar.vue';
+export { default as CartButton } from './components/CartButton.vue';
+export { default as AuthButton } from './components/AuthButton.vue';
+export { default as AuthSidebar } from './components/AuthSidebar.vue';
+export { default as OrdersSidebar } from './components/OrdersSidebar.vue';
+export { default as FavoritesSidebar } from './components/FavoritesSidebar.vue';
+export { default as CartDetails } from './components/CartDetails.vue';
+export { default as AddressForm } from './components/AddressForm.vue';
+export { default as OrderConfirmation } from './components/OrderConfirmation.vue';
+export { default as PaymentOrderConfirmation } from './components/PaymentOrderConfirmation.vue';
+export { default as ProductCard } from './components/ProductCard.vue';
+export { default as FavoriteProductCard } from './components/FavoriteProductCard.vue';
+export { default as QuantityInput } from './components/QuantityInput.vue';
+
+export { authState } from './state/authState.js';
+export { cartState } from './state/cartState.js';
+export { favoritesState } from './state/favoritesState.js';
+export { ordersState } from './state/ordersState.js';
+export { productsState } from './state/productsState.js';
+export { sidebarState } from './state/sidebarState.js';
+
+export { useHandlesFormErrors } from './composables/handlesFormErrors.js';
+
+export { erpCityUiConfig, setErpCityUiConfig } from './config.js';

package/src/state/authState.js

@@ -0,0 +1,189 @@
+import { reactive } from 'vue';
+import axios from 'axios';
+import { route } from 'ziggy-js';
+import { favoritesState } from './favoritesState.js';
+import { ordersState } from './ordersState.js';
+import { erpCityUiConfig } from '../config.js';
+
+const STORAGE_KEY = 'erp_auth';
+const hasStorage = typeof window !== 'undefined' && typeof window.localStorage !== 'undefined';
+
+function normalizeAuthPayload(payload = {}) {
+    return {
+        user: payload.user ?? null,
+        token: payload.token ?? null,
+        token_type: payload.token_type ?? payload.tokenType ?? null,
+        expires_at: payload.expires_at ?? payload.expiresAt ?? null,
+    };
+}
+
+function readStoredAuth() {
+    if (! hasStorage) {
+        return null;
+    }
+
+    try {
+        const value = window.localStorage.getItem(STORAGE_KEY);
+        return value ? normalizeAuthPayload(JSON.parse(value)) : null;
+    } catch (e) {
+        console.warn('Failed to parse stored ERP auth', e);
+        return null;
+    }
+}
+
+function persistAuth(auth) {
+    if (! hasStorage) {
+        return;
+    }
+
+    if (! auth || ! auth.token) {
+        window.localStorage.removeItem(STORAGE_KEY);
+        return;
+    }
+
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(auth));
+}
+
+function applyAuthHeader(token, tokenType = 'Bearer') {
+    if (token) {
+        axios.defaults.headers.common['Authorization'] = `${tokenType ?? 'Bearer'} ${token}`;
+    } else {
+        delete axios.defaults.headers.common['Authorization'];
+    }
+}
+
+function isTokenExpired(expiresAt) {
+    if (! expiresAt) {
+        return false;
+    }
+
+    const expires = new Date(expiresAt);
+
+    return Number.isNaN(expires.getTime()) ? false : expires.getTime() <= Date.now();
+}
+
+const storedAuth = readStoredAuth();
+
+if (storedAuth?.token) {
+    applyAuthHeader(storedAuth.token, storedAuth.token_type);
+}
+
+export const authState = reactive({
+    user: storedAuth?.user ?? null,
+    token: storedAuth?.token ?? null,
+    tokenType: storedAuth?.token_type ?? null,
+    expiresAt: storedAuth?.expires_at ?? null,
+    status: 'idle',
+    error: null,
+
+    get isAuthenticated() {
+        return Boolean(this.user && this.token && ! this.tokenExpired());
+    },
+
+    tokenExpired() {
+        if (isTokenExpired(this.expiresAt)) {
+            this.clearAuth();
+
+            return true;
+        }
+
+        return false;
+    },
+
+    setAuth(payload) {
+        const auth = normalizeAuthPayload(payload);
+
+        if (! auth.token || ! auth.user || isTokenExpired(auth.expires_at)) {
+            this.clearAuth();
+            return;
+        }
+
+        auth.token_type = auth.token_type ?? 'Bearer';
+
+        this.user = auth.user;
+        this.token = auth.token;
+        this.tokenType = auth.token_type;
+        this.expiresAt = auth.expires_at;
+        this.error = null;
+
+        persistAuth(auth);
+        applyAuthHeader(this.token, this.tokenType);
+
+        if (erpCityUiConfig.showFavorites) {
+            favoritesState.fetchFavorites();
+        }
+        if (erpCityUiConfig.showOrders) {
+            ordersState.fetchOrders();
+        }
+    },
+
+    clearAuth() {
+        this.user = null;
+        this.token = null;
+        this.tokenType = null;
+        this.expiresAt = null;
+        this.error = null;
+
+        persistAuth(null);
+        applyAuthHeader(null);
+        favoritesState.reset();
+        ordersState.reset();
+    },
+
+    async bootstrap() {
+        try {
+            const { data } = await axios.get(route('erp.auth.session'));
+
+            if (data.authenticated && data.token && data.user) {
+                this.setAuth(data);
+            } else {
+                this.clearAuth();
+            }
+        } catch (e) {
+            console.warn('Failed to bootstrap ERP auth', e);
+            this.clearAuth();
+        }
+    },
+
+    async login(payload) {
+        this.status = 'loading';
+        this.error = null;
+
+        try {
+            const { data } = await axios.post(route('erp.auth.login'), payload);
+            this.setAuth(data);
+        } catch (error) {
+            this.error = error.response?.data?.message || 'Autentificarea a eșuat.';
+            this.clearAuth();
+            throw error;
+        } finally {
+            this.status = 'idle';
+        }
+    },
+
+    async register(payload) {
+        this.status = 'loading';
+        this.error = null;
+
+        try {
+            const { data } = await axios.post(route('erp.auth.register'), payload);
+            this.setAuth(data);
+        } catch (error) {
+            this.error = error.response?.data?.message || 'Înregistrarea a eșuat.';
+            this.clearAuth();
+            throw error;
+        } finally {
+            this.status = 'idle';
+        }
+    },
+
+    async logout() {
+        this.status = 'loading';
+        try {
+            await axios.post(route('erp.auth.logout'));
+        } finally {
+            this.status = 'idle';
+            this.clearAuth();
+        }
+    },
+});

package/src/state/cartState.js

@@ -0,0 +1,106 @@
+import { reactive } from 'vue';
+import axios from 'axios';
+import { route } from 'ziggy-js';
+import {productsState} from "./productsState.js";
+
+export const cartState = reactive({
+    items: [],
+    coupon: null,
+    couponError: null,
+    couponLoading: false,
+
+    get count() {
+        return this.items.reduce((sum, item) => sum + item.quantity, 0);
+    },
+
+    get subtotal() {
+        return this.items.reduce((sum, item) => {
+            const product = productsState.getProduct(item.id);
+            return sum + (product ? product.price * item.quantity : 0);
+        }, 0);
+    },
+
+    get discountAmount() {
+        if (!this.coupon || !this.subtotal) {
+            return 0;
+        }
+
+        const percent = this.coupon.discountPercent ?? 0;
+        return (this.subtotal * percent) / 100;
+    },
+
+    get price() {
+        return Math.max(0, this.subtotal - this.discountAmount);
+    },
+
+    setCart(newCart) {
+        this.items = newCart;
+    },
+
+    async loadCart() {
+        const { data } = await axios.get(route('erp.cart.index'));
+        this.setCart(data);
+    },
+
+    async addToCart(productId, quantity = 1, price) {
+        const { data } = await axios.post(route('erp.cart.add'), { id: productId, quantity, price });
+        this.setCart(data);
+    },
+
+    async updateQuantity(productId, quantity, price) {
+        const { data } = await axios.post(route('erp.cart.update'), { id: productId, quantity, price });
+        this.setCart(data);
+    },
+
+    async removeItem(productId) {
+        const { data } = await axios.delete(route('erp.cart.remove', productId));
+        this.setCart(data);
+    },
+
+    async clearCart() {
+        const { data } = await axios.delete(route('erp.cart.clear'));
+        this.setCart(data);
+        this.coupon = null;
+        this.couponError = null;
+    },
+
+    async applyCoupon(code) {
+        const normalized = (code || '').trim();
+        this.couponError = null;
+
+        if (!normalized) {
+            this.coupon = null;
+            return;
+        }
+
+        this.couponLoading = true;
+
+        try {
+            const { data } = await axios.post(route('erp.cart.coupon.apply'), { code: normalized });
+            const coupon = data?.data;
+            this.coupon = coupon
+                ? {
+                    code: coupon.code,
+                    discountPercent: coupon.discount_percent,
+                }
+                : null;
+        } catch (error) {
+            const message = error?.response?.data?.message || 'Cupon invalid.';
+            this.couponError = message;
+            this.coupon = null;
+        } finally {
+            this.couponLoading = false;
+        }
+    },
+
+    async clearCoupon() {
+        this.coupon = null;
+        this.couponError = null;
+
+        try {
+            await axios.delete(route('erp.cart.coupon.clear'));
+        } catch (error) {
+            console.warn('Failed to clear coupon', error);
+        }
+    },
+});

package/src/state/favoritesState.js

@@ -0,0 +1,94 @@
+import { reactive } from 'vue';
+import axios from 'axios';
+import { route } from 'ziggy-js';
+
+function normalizeFavoriteId(favorite) {
+    if (typeof favorite === 'object' && favorite !== null) {
+        return Number(favorite.id);
+    }
+
+    return Number(favorite);
+}
+
+export const favoritesState = reactive({
+    ids: [],
+    loading: false,
+    error: null,
+
+    isFavorite(productId) {
+        return this.ids.includes(Number(productId));
+    },
+
+    setFavorites(favorites = []) {
+        if (! Array.isArray(favorites)) {
+            this.ids = [];
+            return;
+        }
+
+        this.ids = favorites
+            .map(normalizeFavoriteId)
+            .filter(id => Number.isInteger(id) && id > 0);
+    },
+
+    reset() {
+        this.ids = [];
+        this.error = null;
+        this.loading = false;
+    },
+
+    async fetchFavorites() {
+        this.loading = true;
+        this.error = null;
+
+        try {
+            const { data } = await axios.get(route('erp.account.favorites.index'));
+            this.setFavorites(data.favorites);
+        } catch (error) {
+            if (error.response?.status === 401) {
+                this.reset();
+            } else {
+                this.error = error.response?.data?.message || 'Nu am putut încărca favoritele.';
+            }
+        } finally {
+            this.loading = false;
+        }
+    },
+
+    toggleLocal(productId) {
+        const id = Number(productId);
+
+        if (! Number.isInteger(id) || id <= 0) {
+            return;
+        }
+
+        if (this.ids.includes(id)) {
+            this.ids = this.ids.filter(existingId => existingId !== id);
+        } else {
+            this.ids = [...this.ids, id];
+        }
+    },
+
+    async toggle(productId) {
+        if (! productId) {
+            return;
+        }
+
+        this.loading = true;
+        this.error = null;
+
+        try {
+            const { data } = await axios.post(route('erp.account.favorites.toggle', productId));
+
+            if (Array.isArray(data?.favorites)) {
+                this.setFavorites(data.favorites);
+            } else {
+                this.toggleLocal(productId);
+            }
+        } catch (error) {
+            this.error = error.response?.data?.message || 'Nu am putut actualiza favoritele.';
+            throw error;
+        } finally {
+            this.loading = false;
+        }
+    },
+});

package/src/state/ordersState.js

@@ -0,0 +1,42 @@
+import { reactive } from 'vue';
+import axios from 'axios';
+import { route } from 'ziggy-js';
+
+export const ordersState = reactive({
+    orders: [],
+    loading: false,
+    error: null,
+
+    setOrders(orders = []) {
+        if (! Array.isArray(orders)) {
+            this.orders = [];
+            return;
+        }
+
+        this.orders = orders;
+    },
+
+    reset() {
+        this.orders = [];
+        this.error = null;
+        this.loading = false;
+    },
+
+    async fetchOrders() {
+        this.loading = true;
+        this.error = null;
+
+        try {
+            const { data } = await axios.get(route('erp.account.orders.index'));
+            this.setOrders(data.orders);
+        } catch (error) {
+            if (error.response?.status === 401) {
+                this.reset();
+            } else {
+                this.error = error.response?.data?.message || 'Nu am putut încărca comenzile.';
+            }
+        } finally {
+            this.loading = false;
+        }
+    },
+});

package/src/state/productsState.js

@@ -0,0 +1,16 @@
+import { reactive } from 'vue';
+import axios from 'axios';
+import { route } from 'ziggy-js';
+
+export const productsState = reactive({
+    products: [],
+
+    getProduct(id) {
+        return this.products.find(product => product.id === id);
+    },
+
+    async loadProducts() {
+        const { data } = await axios.get(route('products.index'));
+        this.products = data;
+    }
+});

package/src/state/sidebarState.js

@@ -0,0 +1,45 @@
+import {reactive} from 'vue';
+
+export const sidebarState = reactive({
+    isOpen: false,
+    currentView: null,
+    title: '',
+    withBack: false,
+    viewStack: [],
+    nextView: null,
+
+    open(view) {
+        this.currentView = view;
+
+        if (this.currentView) {
+            this.viewStack.push(this.currentView);
+        }
+
+        this.isOpen = true;
+    },
+
+    close() {
+        this.isOpen = false;
+        this.currentView = null;
+        this.title = '';
+        this.withBack = false;
+        this.viewStack = [];
+        this.nextView = null;
+    },
+
+    setHeader(title, withBack) {
+        this.title = title;
+        this.withBack = withBack;
+    },
+
+    goBack() {
+        if (this.viewStack.length > 1) {
+            // Remove current view
+            this.viewStack.pop();
+            // Set previous view (last in stack)
+            this.currentView = this.viewStack[this.viewStack.length - 1];
+        } else {
+            this.close();
+        }
+    }
+});