// Constants and Configuration const CONF = { DEBOUNCE_DELAY: 1000, MIN_NAME_LENGTH: 2, MIN_ADDRESS_LENGTH: 4, MIN_PASSWORD_LENGTH: 4, FILE_UPLOAD_LIMIT: 8, PHONE_MIN_DEFAULT: 6, PHONE_MAX_DEFAULT: 14, }; const LANGUAGE_CODES = { AR: "AR", EN: "EN", FR: "FR", }; // Utility functions const Utils = { validateEmail: (email) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email), validatePhone: ( phone, min = CONF.PHONE_MIN_DEFAULT, max = CONF.PHONE_MAX_DEFAULT ) => { if (!phone) return false; const cleanPhone = phone.replace(/[^0-9\u0660-\u0669+]/g, ""); return ( cleanPhone.length >= parseInt(min) && cleanPhone.length <= parseInt(max) ); }, tokenDecode: (token) => { try { if ( !/^[A-Za-z0-9-_=]+\.[A-Za-z0-9-_=]+\.[A-Za-z0-9-_.+/=]*$/.test(token) || token.split(".").length <= 1 ) { return null; } const data = token.split(".")[1]; const decodedData = atob(data); const text = decodeURIComponent(escape(decodedData)); return JSON.parse(text); } catch (error) { console.warn("Token decode failed:", error); return null; } }, cookieToObject: (cookie) => { if (!cookie) return {}; try { return cookie.split(";").reduce((result, item) => { const [key, ...valueParts] = item.split("="); if (key && valueParts.length) { result[key.trim()] = valueParts.join("=").trim(); } return result; }, {}); } catch (error) { console.warn("Cookie parsing failed:", error); return {}; } }, hexToRgb: (hex) => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16), } : { r: 0, g: 0, b: 0 }; }, getPixel: (order) => { const pixel = { content_ids: order.details.map((d) => d.product._id), contents: order.details.map((d) => ({ name: d.product.name.replace("&", "and"), id: d.product._id, price: d.product.price.salePrice, quantity: d.quantity, })), total: order.total, fbParams: {}, ttParams: {}, }; if (order._id) pixel.fbParams.eventID = order._id; if (order.customer.email) pixel.fbParams.user_email = order.customer.email; // TikTok advanced matching (guest purchases) — backend sha256-hashes these if (order.customer && order.customer.email) pixel.ttParams.user_email = order.customer.email; if (order.shipping && order.shipping.address && order.shipping.address.phone) pixel.ttParams.user_phone = order.shipping.address.phone; return encodeURI(JSON.stringify(pixel)); }, sortedObject: (unordered) => { return Object.keys(unordered) .sort() .reduce((obj, key) => { obj[key] = unordered[key]; return obj; }, {}); }, deepClone: (obj) => JSON.parse(JSON.stringify(obj)), debounce: (func, delay) => { let timeoutId; return function (...args) { const context = this; // Capture this clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); }; }, }; // Translation utilities const Translations = { method: { [LANGUAGE_CODES.AR]: { Hyperpay: "Hyperpay", CashOnDelivery: "الدفع عند الاستلام", PayPal: "الدفع عبر بايبال", transfer: "تحويل بنكي", Stripe: "الدفع ببطاقة الائتمان", "Paypal-Credit-Card": "الدفع ببطاقة الائتمان", cmi: "الدفع ببطاقة الائتمان مغربية", paytech: "Paytech", cashplus: "كاش بلوس", "payzone-cash": "Payzone Cash", }, [LANGUAGE_CODES.EN]: { Hyperpay: "Hyperpay", CashOnDelivery: "Cash on delivery", PayPal: "PayPal", transfer: "Bank transfer", Stripe: "Credit Card", "Paypal-Credit-Card": "Credit Card", cmi: "Credit Card Moroccan", cashplus: "Cash Plus", paytech: "Paytech", "payzone-cash": "Payzone Cash", }, [LANGUAGE_CODES.FR]: { Hyperpay: "Hyperpay", CashOnDelivery: "Paiement à la livraison", PayPal: "PayPal", transfer: "Transfert bancaire", Stripe: "Carte bancaire", "Paypal-Credit-Card": "Carte bancaire", cmi: "Carte bancaire Marocain", cashplus: "Cash Plus", paytech: "Paytech", "payzone-cash": "Payzone Cash", }, }, getMethodTranslation: (value, lang) => { return Translations.method[lang]?.[value] || value; }, getCancelText: (langCode) => { const translations = { [LANGUAGE_CODES.AR]: "إلغاء", [LANGUAGE_CODES.EN]: "Cancel", [LANGUAGE_CODES.FR]: "Annuler", }; return translations[langCode] || translations[LANGUAGE_CODES.EN]; }, getFreeShippingText: (langCode) => { const translations = { [LANGUAGE_CODES.AR]: "التوصيل بالمجان", [LANGUAGE_CODES.EN]: "Free Shipping", [LANGUAGE_CODES.FR]: "Livraison gratuite", }; return translations[langCode] || translations[LANGUAGE_CODES.EN]; }, // OTP verification texts (defaults; can be overridden from settings) otp: { [LANGUAGE_CODES.AR]: { title: "تأكيد رقم الهاتف", subtitle: "أدخل رمز التحقق الذي أرسلناه إلى", placeholder: "رمز التحقق", verify: "تأكيد", verifying: "جاري التحقق...", resend: "إعادة إرسال الرمز", resendIn: "إعادة الإرسال خلال", sending: "جاري إرسال الرمز...", sent: "تم إرسال رمز التحقق", invalid: "رمز غير صحيح، يرجى المحاولة مرة أخرى", sendFailed: "تعذر إرسال الرمز، يرجى المحاولة مرة أخرى", cancel: "إلغاء", seconds: "ثانية", }, [LANGUAGE_CODES.EN]: { title: "Verify your phone number", subtitle: "Enter the verification code we sent to", placeholder: "Verification code", verify: "Verify", verifying: "Verifying...", resend: "Resend code", resendIn: "Resend in", sending: "Sending code...", sent: "Verification code sent", invalid: "Invalid code, please try again", sendFailed: "Could not send the code, please try again", cancel: "Cancel", seconds: "s", }, [LANGUAGE_CODES.FR]: { title: "Vérifiez votre numéro de téléphone", subtitle: "Saisissez le code de vérification envoyé au", placeholder: "Code de vérification", verify: "Vérifier", verifying: "Vérification...", resend: "Renvoyer le code", resendIn: "Renvoyer dans", sending: "Envoi du code...", sent: "Code de vérification envoyé", invalid: "Code invalide, veuillez réessayer", sendFailed: "Impossible d'envoyer le code, veuillez réessayer", cancel: "Annuler", seconds: "s", }, }, getOtpText: (key, langCode) => { const pack = Translations.otp[langCode] || Translations.otp[LANGUAGE_CODES.EN]; return pack[key]; }, }; // Global handler management let currentProductHandler = null; // Main Vue instance const vm = new StoreinoApp({ el: "#app_expresscheckout", data() { return { // Configuration and tools config: __DATA__, tools: { getPixel: Utils.getPixel, validateEmail: Utils.validateEmail, validatePhone: Utils.validatePhone, tokenDecode: Utils.tokenDecode, cookieToObject: Utils.cookieToObject, }, // UI State showCaptcha: false, sending: false, displayMap: false, isPaypalToCheckoutActive: false, isOpen: false, open: false, manualTrigger: false, // Data products: [], items: [], preferredCountries: [], imagesToUpload: [], attachments: [], relatedProductds: [], collectionsRelated: [], selectedProduct: [], // Store state store: { state: { cart: [], language: { code: LANGUAGE_CODES.EN, name: "English" }, currency: { code: "USD", symbol: "$" }, }, }, // Loading states loading: { zones: true, cart: true, zoneTimes: 0, }, // Settings and configuration settings: null, subSeller: null, errors: {}, // UI visibility show: { products: false, coupon: false, }, // Map configuration map: null, marker: null, localization: { position: {}, zoom: 12, center: [51.505, -0.09], url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attribution: '© OpenStreetMap contributors', markerPos: [51.505, -0.09], }, // Local state locals: { create_account: false, ship_to_different_address: false, shippers: [], shipper: null, methods: [], method: null, subtotal: 0, shipping: 0, discount: { type: "percentage", value: 0, price: 0 }, tva: { type: "Percentage", value: 0, price: 0 }, total: 0, variants: [], }, // Location data singular: { countries: "country", provinces: "province", cities: "city" }, shipLocations: { countries: [], provinces: [], cities: [] }, locations: { countries: [], provinces: [], cities: [] }, // Customer data customer: { firstname: "", lastname: "", fullname: "", password: "", email: "", phone: "", token: undefined, ipAddress: undefined, address: { address1: "", address2: "", country: null, province: null, city: { name: "", _id: undefined }, }, }, // Order data order: { customer: { firstname: "", lastname: "", fullname: "", email: "" }, shipping: { zone: null, shipper: null, price: 0, address: { firstname: "", lastname: "", fullname: "", address1: "", address2: "", phone: "", country: null, province: null, city: { name: "", _id: undefined }, }, }, discount: null, details: [], customerNote: "", method: null, }, // Additional state details: null, pickedColle: "", packPrice: false, fromInitCart: false, isAffiliate: false, isLoggedIn: false, countEvent: 0, thanksPath: "#", ctk: null, // OTP verification state (code is sent server-side on customer create) otp: { show: false, // modal visibility verified: false, // becomes true once the code is validated code: "", // code typed by the customer verifying: false, // verify request in flight error: null, // localized error message to display info: null, // localized info message (e.g. "code sent") }, activeCountry: { code: "ma" }, selectedIndex: null, typeToFindInput: "", typeToFindTimer: null, }; }, // Computed properties for better performance computed: { contactFields() { return [ { key: "email", map: this.customer, type: "email" }, { key: "password", map: this.customer, type: "password" }, { key: "phone", map: this.customer, type: "text" }, { key: "address1", map: this.customer.address, type: "text" }, { key: "address2", map: this.customer.address, type: "text" }, ].filter((e) => { if (this.isLoggedIn && (e.key === "email" || e.key === "password")) return false; return this.settings?.checkout_required_fields?.[`show_${e.key}`]; }); }, locationFields() { return ["countries", "provinces", "cities"].filter( (e) => !this.settings?.checkout_defaults?.[`has_${this.singular[e]}`] ); }, shippingFields() { return [ { key: "firstname", type: "text" }, { key: "lastname", type: "text" }, { key: "fullname", type: "text" }, { key: "phone", type: "text" }, { key: "address1", type: "text" }, { key: "address2", type: "text" }, ].filter( (e) => this.settings?.checkout_required_fields?.[`show_${e.key}`] ); }, shouldShowShipping() { return ( (this.loading.zoneTimes > 3 && this.locals.shippers.length > 1) || this.locals.shippers.length > 1 || (this.loading.zoneTimes > 3 && this.errors.shipping) ); }, isFreeShipping() { const defaults = this.settings?.checkout_defaults; if (!defaults?.has_min_price_freeshipping) return false; const freeshippingConfig = defaults.min_price_freeshipping; if ( typeof freeshippingConfig === "object" && freeshippingConfig[this.store.state.currency.code] ) { const minPrice = freeshippingConfig[this.store.state.currency.code].value; return this.locals.subtotal > minPrice; } return this.locals.subtotal > freeshippingConfig; }, bankDetails() { return window.$nuxt?.$store?.state?.settings?.store?.transfer; }, // OTP is active only when the merchant enabled it in checkout settings isOtpEnabled() { return !!this.settings?.checkout_required_fields?.active_OTP; }, }, // Watchers with optimized performance watch: { "store.state.cart": { handler() { this.calculate("fromWatch"); }, deep: true, }, "localization.position": { deep: true, handler(value) { this.localization.position = value; this.localization.markerPos = [value.lat, value.lng]; this.$emit("input", value); }, }, locals: { handler() { this.calculate("fromLocal"); }, deep: true, }, order: { handler() { this.debouncedAbandonmentCart(); }, deep: true, }, customer: { handler() { this.debouncedAbandonmentCart(); }, deep: true, }, "customer.address": { handler(val) { this.handleAddressChange(val); }, deep: true, }, "order.shipping.address.country": { handler() { this.handleShippingLocationChange("country"); }, deep: true, }, "order.shipping.address.province": { handler() { this.handleShippingLocationChange("province"); }, deep: true, }, "order.shipping.address.city": { handler() { this.handleShippingLocationChange("city"); }, deep: true, }, "locals.ship_to_different_address"(val) { if (!val) { this.syncShippingWithBilling(); } }, // Invalidate a previous OTP verification if the phone number is edited "customer.phone"() { if (this.otp.verified) { this.otp.verified = false; this.otp.code = ""; } }, }, // Lifecycle hooks created() { this.cleanupEventListeners(); // Create debounced abandonment cart method this.debouncedAbandonmentCart = Utils.debounce(() => { this.abandonmentCart(); }, 500); // Create debounced getZones method }, async mounted() { try { await this.initializeApp(); } catch (error) { console.error("App initialization failed:", error); window.sentryLog?.captureException(error); } }, destroyed() { this.cleanupEventListeners(); }, // Filters filters: { method: Translations.getMethodTranslation, formatPrice: (value) => Number(value).toFixed(2), }, // Methods methods: { // Initialization methods async initializeApp() { try { // First, always load the initial data (settings) await this.loadInitialData(); // Only setup event handlers AFTER settings are loaded this.setupEventHandlers(); // Continue with the rest of initialization await this.setupConfiguration(); await this.loadResources(); this.finalizeInitialization(); } catch (error) { console.error("App initialization failed:", error); window.sentryLog?.captureException(error); } }, setupEventHandlers() { currentProductHandler = (e) => this.handleCurrentProduct(e); window.addEventListener("CURRENT_PRODUCT", currentProductHandler, true); }, cleanupEventListeners() { if (currentProductHandler) { window.removeEventListener( "CURRENT_PRODUCT", currentProductHandler, true ); currentProductHandler = null; } }, async loadInitialData() { // Initialize products if (!window.products) window.products = []; this.products = window.products; // Load settings this.settings = await this.getSettings(); }, async setupConfiguration() { // Setup currency this.setupCurrency(); this.normalizeSettings(); this.setDefaultColors(); // Detect logged-in customer from CUSTOMER cookie this.detectLoggedInCustomer(); // Reset city selections if manual typing is disabled if (!this.settings.checkout_required_fields.typing_city_manually) { this.order.shipping.address.city = null; this.customer.address.city = null; } }, detectLoggedInCustomer() { const customerToken = Utils.cookieToObject(document.cookie).CUSTOMER; if (!customerToken) return; const decoded = Utils.tokenDecode(customerToken); if (!decoded || !decoded.customer || !decoded.customer._id) return; this.isLoggedIn = true; this.ctk = customerToken; const c = decoded.customer; if (c.firstname) this.customer.firstname = c.firstname; if (c.lastname) this.customer.lastname = c.lastname; if (c.firstname || c.lastname) { this.customer.fullname = [c.firstname, c.lastname].filter(Boolean).join(" "); } if (c.email) this.customer.email = c.email; this.order.customer._id = c._id; this.order.customer.firstname = c.firstname || ""; this.order.customer.lastname = c.lastname || ""; if (c.email) this.order.customer.email = c.email; }, setupCurrency() { const defaultCurrency = this.settings?.store_currencies?.find( (currency) => currency.default ); if (defaultCurrency) { this.store.state.currency = defaultCurrency; } if (window.$nuxt?.$store?.state?.currency) { this.store.state.currency = window.$nuxt.$store.state.currency; } }, setDefaultColors() { const headlines = this.settings.checkout_headlines; const defaults = { buy_now_color: "#40c11f", text_color: "#444444", price_color: "#ff3344", bg_color: "#ffffff", page_bg_color: "#eeeeee", }; Object.entries(defaults).forEach(([key, value]) => { if (!headlines[key]) { this.$set(headlines, key, value); } }); }, async loadResources() { // Load methods and locations await Promise.all([ this.getMethods(), this.getLocations("world", undefined), ]); // Load country info this.getCountriesInfo(); if ( this.settings.checkout_required_fields.show_ship_to_different_address ) { this.shipLocations = Utils.deepClone(this.locations); } }, finalizeInitialization() { this.checkMethods(); // Load optional resources if (this.settings.checkout_required_fields.show_captcha) { this.loadScript("https://www.google.com/recaptcha/api.js", "recaptcha") .then(() => { console.log("reCAPTCHA script loaded successfully"); }) .catch((error) => { console.error("Failed to load reCAPTCHA:", error); }); } // Auto-apply coupon if configured if ( this.settings.checkout_required_fields.auto_coupon && this.settings.checkout_headlines.auto_code_coupon ) { this.show.coupon = true; this.locals.discount.code = this.settings.checkout_headlines.auto_code_coupon; this.applyCoupon(); } // Setup variants if (this.settings.checkout_required_fields.show_variant_on_checkout) { this.locals.variants = window.products?.[0]?.variants ?? []; } // Dispatch app loaded event - this tells the theme the checkout is ready window.dispatchEvent(new CustomEvent("APP_LOADER")); // Request product info from theme (in case event was dispatched before we were ready) window.dispatchEvent(new CustomEvent("REQUEST_CURRENT_PRODUCT")); }, // Utility methods hexToRgb: Utils.hexToRgb, formatTotal(total) { return Number.isInteger(total) ? total : total.toFixed(2); }, // Product and variant handling setVariant(variant) { const cartItem = this.store?.state?.cart?.[0]; if (!cartItem) return; window.dispatchEvent( new CustomEvent("CURRENT_PRODUCT", { detail: { product_id: cartItem._id, product_quantity: cartItem.quantity, product_variant: variant._id, product_currency: this.store.state.currency?.code ?? "MAD", product_price: { salePrice: variant.price.salePrice, comparePrice: variant.price.comparePrice, }, }, }) ); }, handleCurrentProduct(e) { // Guard clause - don't process if settings aren't loaded if (!this.settings) { // Queue the event to process later if (!this.queuedEvents) this.queuedEvents = []; this.queuedEvents.push(e); return; } this.currentProduct(e); }, async currentProduct(e) { this.countEvent++; // Validate product ID if available const productId = document.querySelector( '[itemprop="productID"]' )?.content; if (productId && productId !== e.detail.product_id) { return; } // Check if details haven't changed const currentDetails = this.details ? Utils.sortedObject(this.details) : {}; const newDetails = Utils.sortedObject(e.detail); const currentStr = JSON.stringify(currentDetails); const newStr = JSON.stringify(newDetails); if (currentStr === newStr) { return; } this.details = e.detail; // Setup cart item const cartItem = { _id: e.detail.product_id, quantity: e.detail.product_quantity || 1, }; if (e.detail.product_variant) { cartItem.variant = { _id: e.detail.product_variant }; } // Update currency const productCurrency = this.settings.store_currencies.find( (currency) => currency.code === e.detail.product_currency ); if (productCurrency) { this.store.state.currency = productCurrency; } this.locals.subtotal = e.detail.product_price.salePrice * cartItem.quantity; this.store.state.cart = []; await this.initCart([cartItem]); this.calculate("fromCurrentProduct"); }, // Script loading loadScript(url, id) { return new Promise((resolve) => { const existing = document.getElementById(id); if (existing) { resolve(); return; } const script = document.createElement("script"); Object.assign(script, { src: url, async: true, defer: true, id: id, onload: resolve, }); document.body.appendChild(script); }); }, // Map functionality initMap() { const { zoom, url, attribution } = this.localization; const pos = this.localization.markerPos; this.map = L.map("map").setView(pos, zoom); L.tileLayer(url, { attribution }).addTo(this.map); this.marker = L.marker(pos, { draggable: true, icon: L.icon({ iconUrl: "http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/map-marker-icon.png", iconSize: [30, 30], }), }).addTo(this.map); this.localization.position = { lat: pos[0], lng: pos[1] }; // Event handlers this.marker.on("moveend", (e) => { const movedPos = e.target.getLatLng(); this.updateMapPosition(movedPos.lat, movedPos.lng); }); this.map.on("dblclick", (e) => { const { lat, lng } = e.latlng; this.updateMapPosition(lat, lng); }); }, updateMapPosition(lat, lng) { this.localization.position = { lat, lng }; this.localization.markerPos = [lat, lng]; this.marker.setLatLng([lat, lng]); this.map.setView([lat, lng]); }, currentLocal(position) { const { latitude: lat, longitude: lng } = position.coords; this.updateMapPosition(lat, lng); }, openMap() { this.displayMap = true; navigator.geolocation.getCurrentPosition( (position) => { this.currentLocal(position); this.initMap(); }, (error) => { console.warn("Geolocation error:", error); this.initMap(); } ); }, // File handling previewFiles(e) { const imageFiles = Array.from(e.target.files); if (!imageFiles?.length) return; imageFiles.forEach((img) => { if (this.imagesToUpload.length >= CONF.FILE_UPLOAD_LIMIT) return; const reader = new FileReader(); reader.onload = (e) => { this.imagesToUpload.push({ title: "", src: e.target.result, }); }; reader.readAsDataURL(img); }); }, async upload(key) { try { const response = await StoreinoApp.$store.create( "images", { target: "livechat" }, this.imagesToUpload[key] ); this.attachments.push({ type: "image", url: response }); } catch (err) { window.sentryLog?.captureException(err); if (err.response) alert(err.response); } }, async uploadAll() { for (const [index] of this.imagesToUpload.entries()) { await this.upload(index); } }, removeImagesUpload(key) { this.imagesToUpload.splice(key, 1); }, // Settings and configuration async getSettings() { // Try to get settings from $nuxt store first if (window.$nuxt?.$store?.state?.settings) { if (window.$nuxt.$store.state.IP) { this.customer.ipAddress = window.$nuxt.$store.state.IP; } const settings = window.$nuxt.$store.state.settings; return this.extractSettingsData(settings); } // Fallback to API call try { const response = await StoreinoApp.$store.search("settings", { "key-in": [ "checkout_defaults", "store_currencies", "checkout_error_messages", "checkout_headlines", "checkout_labels", "checkout_placeholders", "checkout_required_fields", "checkout_steps", ], }); const settings = {}; response.results.forEach((result) => { settings[result.key] = result.value; }); return this.extractSettingsData(settings); } catch (error) { console.error("Failed to load settings:", error); throw error; } }, extractSettingsData(settings) { const requiredKeys = [ "checkout_defaults", "store_currencies", "checkout_error_messages", "checkout_headlines", "checkout_labels", "checkout_placeholders", "checkout_required_fields", "checkout_steps", ]; return requiredKeys.reduce((result, key) => { result[key] = settings[key]; return result; }, {}); }, checkMethods() { if (!this.settings.checkout_defaults.active_payment_time) return; const now = new Date(); const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String( now.getMinutes() ).padStart(2, "0")}`; const availableMethods = this.locals.methods.filter((method) => { const timeConfig = this.settings.checkout_defaults.active_payment_time[method.name]; if (!timeConfig?.is_active) return true; return currentTime >= timeConfig.start && currentTime <= timeConfig.end; }); this.locals.methods = availableMethods; if (availableMethods.length > 0) { this.locals.method = availableMethods[0]; } }, // Text utilities cancelText() { return Translations.getCancelText(this.store.state.language.code); }, freeshippingText() { return Translations.getFreeShippingText( this.store.state.CURRENT_LANGUAGE ); }, // PayPal integration async initPaypal( order, paypalOrder, clientId, thanksPath, customerToken = "" ) { this.isPaypalToCheckoutActive = false; try { const linkPaypal = `https://www.paypal.com/sdk/js?client-id=${clientId}&components=buttons,funding-eligibility`; await this.loadScript(linkPaypal, "paypalToCheckout"); if (!window.paypal) { throw new Error("PayPal SDK not loaded"); } this.setupPayPalButtons(order, paypalOrder, thanksPath, customerToken); } catch (err) { console.error("PayPal initialization failed:", err); window.sentryLog?.captureException(err); this.isPaypalToCheckoutActive = false; } }, setupPayPalButtons(order, paypalOrder, thanksPath, customerToken) { const vm = this; window.paypal.getFundingSources().forEach((fundingSource) => { const button = window.paypal.Buttons({ style: { height: 55 }, fundingSource: fundingSource, createOrder: (data, actions) => actions.order.create(paypalOrder), onCancel: () => { vm.isPaypalToCheckoutActive = false; }, onApprove: (data, actions) => { return actions.order.capture().then((details) => { StoreinoApp.$store.customUpdate( "orders", { orderId: order.orderId }, { payment: { isPaid: true, method: "PAYPAL CHECKOUT" } }, { "x-auth-token": customerToken } ); location.href = thanksPath; }); }, }); if (button.isEligible() && fundingSource !== "paypal") { button.render("#paypal_credit_cart"); vm.isPaypalToCheckoutActive = true; } }); }, // Main checkout process async next() { if (this.sending) return; this.errors = {}; this.sending = true; try { // Handle CAPTCHA if (this.showCaptcha) { // Wait for reCAPTCHA to be ready if (!window.grecaptcha) { console.error("reCAPTCHA not loaded"); this.sending = false; return; } // Try to get the response try { const token = window.grecaptcha.getResponse(); if (token) { this.customer.token = token; this.showCaptcha = false; } else { // reCAPTCHA needs to be solved this.sending = false; // Render reCAPTCHA if not already rendered this.$nextTick(() => { this.renderRecaptcha(); }); return; } } catch (error) { console.error("reCAPTCHA error:", error); this.sending = false; return; } } // Check minimum cost if (!this.checkMinimumCost()) { this.sending = false; return; } // Process customer data. // Skipped when resuming after OTP verification (customer already created). if (!this.otp.verified) { const customerData = await this.processCustomerData(); if (!customerData) { this.sending = false; return; } } // OTP gate: the customer now exists and the server has sent the code on // create. Require verification before building/creating the order. if (this.isOtpEnabled && !this.otp.verified) { this.sending = false; this.startOtpFlow(); return; } // Process order data const orderData = this.buildOrderData(); console.log({orderData}); if (!this.isValid("order", orderData)) { console.log(this.errors); this.sending = false; return; } // Create order const orderResponse = await this.createOrder(orderData); await this.handleOrderResponse(orderResponse); } catch (err) { this.handleCheckoutError(err); } }, renderRecaptcha() { if (!window.grecaptcha) { console.error("grecaptcha not available"); return; } // Check if reCAPTCHA is already rendered const recaptchaElement = document.querySelector(".g-recaptcha"); if (!recaptchaElement || recaptchaElement.children.length > 0) { // Already rendered return; } try { window.grecaptcha.render(recaptchaElement, { sitekey: "6LegpsoeAAAAAH61sw8-CoHkQqtrXikF34EDZdNk", callback: (token) => { console.log("reCAPTCHA solved:", token); this.customer.token = token; // Automatically continue after solving this.next(); }, "error-callback": () => { console.error("reCAPTCHA error occurred"); }, }); } catch (error) { console.error("Failed to render reCAPTCHA:", error); } }, checkMinimumCost() { const minCostConfig = this.settings.checkout_defaults; if ( minCostConfig.is_min_cost && typeof minCostConfig.min_cost === "object" && minCostConfig.min_cost[this.store.state.currency.code] ) { const minCost = minCostConfig.min_cost[this.store.state.currency.code].value; if (this.locals.subtotal < minCost) { this.errors.min_cost = true; return false; } } return true; }, async processCustomerData() { if (this.settings.checkout_required_fields.show_fullname) { this.fillName(this.customer); } const customerData = Utils.deepClone(this.customer); // Setup customer data if (this.locals.create_account) customerData.isRegistred = true; customerData.address.firstname = this.customer.firstname; customerData.address.lastname = this.customer.lastname; if (this.customer.phone) customerData.address.phone = this.customer.phone; delete customerData.fullname; const sourceCS = localStorage.getItem("CSource"); customerData.source = sourceCS || ""; if ( this.settings.checkout_required_fields.show_localisation && Object.keys(this.localization.position).length > 0 ) { customerData.address.location = this.localization.position; } if (!this.isValid("customer", customerData)) { console.log("Customer validation failed:", { errors: this.errors, customerData }); return null; } this.normalize(customerData); if (this.isAffiliate) { customerData.forAffiliate = true; } // Handle customer creation or update return await this.handleCustomerCreation(customerData); }, async handleCustomerCreation(customerData) { let action = "create"; const customerToken = Utils.cookieToObject(document.cookie).CUSTOMER; if (customerToken) { const customerDecoded = Utils.tokenDecode(customerToken); if (customerDecoded?.customer?._id) { this.order.customer = customerDecoded.customer; } } if (this.order.customer._id) { action = "update"; customerData.lastOrder = Date.now(); customerData.toDayOrders += 1; } const query = this.order.customer._id ? { _id: this.order.customer._id } : {}; const customerResponse = await StoreinoApp.$store[action]( "customers", query, customerData ); if (action === "create") { this.order.customer = customerResponse.customer; this.ctk = customerResponse.tokenCustomer; document.cookie = `CUSTOMER=${customerResponse.tokenCustomer}; path=/`; // Track registration event this.trackRegistrationEvent(); } else { this.order.customer = customerResponse; } return customerResponse; }, trackRegistrationEvent() { try { if (window._fbpx) { window._fbpx( "CompleteRegistration", { content_name: document.title, status: true, value: this.locals.subtotal, currency: this.store.state.currency, }, {} ); } } catch (err) { console.error("Facebook tracking failed:", err); window.sentryLog?.captureException(err); } }, buildOrderData() { const orderData = Utils.deepClone(this.order); // Set payment method if (this.locals.method) { orderData.method = { _id: this.locals.method._id, name: this.locals.method.name, }; } // Set shipping if (this.locals.shipper?._id) { orderData.shipping.zone = this.locals.shipper.zone; orderData.shipping.shipper = { _id: this.locals.shipper._id, name: this.locals.shipper.name, }; } // Set discount if (this.locals.discount?._id) { orderData.discount = { _id: this.locals.discount._id, code: this.locals.discount.code, }; } // Handle shipping address // Handle shipping address if (!this.locals.ship_to_different_address) { orderData.shipping.address = Utils.deepClone(this.customer.address); // Add the missing name fields from customer orderData.shipping.address.firstname = this.customer.firstname; orderData.shipping.address.lastname = this.customer.lastname; orderData.shipping.address.fullname = this.customer.fullname; if (this.customer.phone && !orderData.shipping.address.phone) { orderData.shipping.address.phone = this.customer.phone; } } if (this.settings.checkout_required_fields.show_fullname) { this.fillName(orderData.shipping.address); } orderData.shipping.address.fullname = undefined; // Add attachments and seller if (this.imagesToUpload.length > 0) { orderData.attachments = this.attachments; } if (this.subSeller) { orderData.sellerId = this.subSeller; } // Fill order details orderData.details = this.store.state.cart.map((item) => { const detail = { product: { _id: item._id }, quantity: item.quantity, }; if (item.variant?._id) detail.product.variant = { _id: item.variant._id }; if (item.upsell?._id) detail.upsell = { _id: item.upsell._id }; return detail; }); this.normalize(orderData); return orderData; }, async createOrder(orderData) { // Upload attachments if needed if (this.imagesToUpload.length > 0) { await this.uploadAll(); orderData.attachments = this.attachments; } return await StoreinoApp.$store.create( "orders", { cur: this.store.state.currency.code, lang: this.store.state.language.code, }, orderData ); }, async handleOrderResponse(orderResponse) { const order = orderResponse.result; // Set cookies and dispatch event document.cookie = `ORDER_ID=${order.orderId}; path=/`; document.cookie = `ORDER_STATE=${JSON.stringify(order)}; path=/`; window.dispatchEvent( new CustomEvent("ORDER_PLACED", { detail: { _id: order._id } }) ); // Build thanks path const pixel = Utils.getPixel(order); let thanksPath = `${location.origin}/thanks/?method=${order.method.name}&code=${order.orderId}&pixel=${pixel}`; const codeSnap = location.href .split("&") .find((e) => e.includes("ScCid")); if (codeSnap) thanksPath += `&${codeSnap}`; this.thanksPath = thanksPath; // Handle payment redirects if (orderResponse.paymentResponse.approveLink) { const redirectUrl = order.method.name !== "Hyperpay" ? orderResponse.paymentResponse.approveLink : `${orderResponse.paymentResponse.approveLink}&redirect=${thanksPath}`; location.href = redirectUrl; return; } // Handle PayPal if ( orderResponse.paymentResponse.clientId && orderResponse.paymentResponse.paypalOrder ) { await this.initPaypal( orderResponse.result, orderResponse.paymentResponse.paypalOrder, orderResponse.paymentResponse.clientId, thanksPath, this.ctk ); this.sending = false; return; } // Handle upsells if (this.settings.checkout_steps.show_upsells_after_checkout) { location.href = `${location.origin}/checkout/thanks/?method=${order.method.name}&code=${order.orderId}&pixel=${pixel}`; this.sending = false; return; } // Default redirect location.href = thanksPath; }, handleCheckoutError(err) { console.error("Checkout error:", err); this.sending = false; if (err.response?.data === "solve_captcha") { this.showCaptcha = true; this.$nextTick(() => { this.renderRecaptcha(); }); return; } if (err.response?.data === "customer_blocked") { const messages = { [LANGUAGE_CODES.AR]: "لقد تم حظرك", [LANGUAGE_CODES.EN]: "You are blocked", [LANGUAGE_CODES.FR]: "Tu es bloqué", }; alert( messages[this.store.state.language.code] || messages[LANGUAGE_CODES.EN] ); return; } // Handle field-specific errors const error = err.response ? JSON.stringify(err.response.data) : err.message; let errorKey = null; Object.keys(this.settings.checkout_error_messages).forEach((key) => { if (error.indexOf(key) > -1) { errorKey = key; this.errors[key] = true; } }); const errorMessage = errorKey ? this.settings.checkout_error_messages[errorKey] : err.response?.data || error; alert(errorMessage); window.sentryLog?.captureException(err); }, // OTP verification flow otpText(key) { // Allow merchants to override the defaults via checkout_headlines (otp_) const override = this.settings?.checkout_headlines?.[`otp_${key}`] || this.settings?.checkout_labels?.[`otp_${key}`]; return ( override || Translations.getOtpText(key, this.store.state.language.code) ); }, // Open the modal. The code was already sent server-side on customer create. startOtpFlow() { this.otp.code = ""; this.otp.error = null; this.otp.info = this.otpText("sent"); this.otp.verified = false; this.otp.show = true; }, async verifyOtp() { const code = (this.otp.code || "").trim(); if (!code) { this.otp.error = this.otpText("invalid"); return; } if (this.otp.verifying) return; const customerId = this.order.customer?._id; if (!customerId) { this.otp.error = this.otpText("invalid"); return; } this.otp.verifying = true; this.otp.error = null; this.otp.info = null; try { // PUT /api/customers/verifyOTP?_id= body: { code } const nuxtStore = window.$nuxt?.$store; const baseUrl = nuxtStore.state.settings.store.subdomain.includes( ".world" ) ? "https://api-stores.storeino.world" : "https://api-stores.storeino.com"; const response = await nuxtStore.$http.put( `${baseUrl}/api/customers/verifyOTP`, { code }, { params: { _id: customerId, }, } ); // Server throws/4xx on an invalid code; guard an explicit false too. if ( response && (response.valid === false || response.verified === false) ) { this.otp.error = this.otpText("invalid"); return; } // Verified: close the modal and resume the checkout this.otp.verified = true; this.otp.show = false; this.next(); } catch (err) { console.error("OTP verification failed:", err); this.otp.error = this.otpText("invalid"); } finally { this.otp.verifying = false; } }, cancelOtp() { this.otp.show = false; this.otp.code = ""; this.otp.error = null; this.otp.info = null; }, // Coupon handling async applyCoupon() { if (!this.locals.discount.code) return; try { const response = await StoreinoApp.$store.get("discounts", { code: this.locals.discount.code, }); // Validate coupon for selected products if (response.target === "SELECTED" && response.products.length > 0) { if (!this.validateCouponForProduct(response)) { this.$set(this.errors, "coupon", true); return; } } this.locals.discount._id = response._id; this.locals.discount.type = response.type; this.locals.discount.value = response.value; this.calculate("fromCoupon"); } catch (err) { console.error("Coupon application failed:", err); window.sentryLog?.captureException(err); this.$set(this.errors, "coupon", true); } }, validateCouponForProduct(couponResponse) { const productId = this.details.product_id; // Check string product IDs if (typeof couponResponse.products[0] === "string") { return couponResponse.products.includes(productId); } // Check object product IDs with quantity rules if (typeof couponResponse.products[0] === "object") { const matchingProduct = couponResponse.products.find( (prod) => prod._id === productId ); if (!matchingProduct) return false; if ( matchingProduct.by_quantity && matchingProduct.quantity >= this.items[0]?.quantity?.value ) { return false; } } return true; }, // API calls async getMethods() { try { const { results } = await StoreinoApp.$store.search("methods", {}); this.locals.methods = results; if (results.length > 0) { const codIndex = results.findIndex( (method) => method.name === "CashOnDelivery" ); this.locals.method = results[codIndex > -1 ? codIndex : 0]; } } catch (err) { console.error("Failed to load methods:", err); window.sentryLog?.captureException(err); location.reload(); } }, async getLocations(type, parentId, isShipping = false) { this.loading.zoneTimes++; this.loading.zones = true; if (type === "city") { if ( this.loading.zoneTimes > 3 || this.settings.checkout_required_fields.typing_city_manually ) { this.getZones(); } return; } const object = isShipping ? this.order.shipping : this.customer; const base = isShipping ? "shipLocations" : "locations"; const params = { [type]: parentId }; if (type === "province") { if (!object.address.country) return; params.country = object.address.country._id; } try { const { results } = await StoreinoApp.$store.search( "locations", params ); await this.processLocationResults( type, results, object, base, isShipping ); } catch (err) { console.error("Failed to load locations:", err); window.sentryLog?.captureException(err); location.reload(); } }, async processLocationResults(type, results, object, base, isShipping) { const customZone = this.settings.checkout_defaults.customize_zone; const isCustomized = this.settings.checkout_defaults.isCustomize_zone && customZone; switch (type) { case "country": this[base].provinces = this.filterCustomizedResults( results, customZone?.provinces, isCustomized ); this[base].cities = []; await this.handleDefaultCountrySelection(object, base, isShipping); break; case "province": this[base].cities = this.filterCustomizedResults( results, customZone?.cities, isCustomized ); await this.handleDefaultCitySelection(object, base); break; default: // world this[base].countries = this.filterCustomizedResults( results, customZone?.countries, isCustomized ); this[base].provinces = []; this[base].cities = []; await this.handleDefaultWorldSelection(object, base, isShipping); break; } }, filterCustomizedResults(results, customList, isCustomized) { if (!isCustomized || !customList?.length) return results; const filtered = results.filter((item) => customList.includes(item._id)); return filtered.length > 0 ? filtered : results; }, async handleDefaultCountrySelection(object, base, isShipping) { const defaults = this.settings.checkout_defaults; if (defaults.has_province && defaults.province) { object.address.province = defaults.province; await this.getLocations("province", defaults.province._id, isShipping); } else if (this[base].provinces.length > 0) { await this.getLocations( "province", this[base].provinces[0]._id, isShipping ); } }, async handleDefaultCitySelection(object, base) { const defaults = this.settings.checkout_defaults; if (defaults.has_city && defaults.city) { object.address.city = defaults.city; } }, async handleDefaultWorldSelection(object, base, isShipping) { const defaults = this.settings.checkout_defaults; if (defaults.country && defaults.country.name !== "DISABLED") { object.address.country = defaults.country; await this.getLocations("country", defaults.country._id, isShipping); } }, // Zone handling with debouncing getZones: Utils.debounce(function () { this.getZonesImplementation(); }, CONF.DEBOUNCE_DELAY), async getZonesImplementation() { this.loading.zones = true; this.errors.shipping = false; this.locals.shippers = []; try { const { results: zones } = await StoreinoApp.$store.search("zones", { country: this.order.shipping.address.country?._id, province: this.order.shipping.address.province?._id, city: this.order.shipping.address.city?._id, }); this.processZoneShippers(zones); this.calculate("fromZone"); } catch (err) { console.error("Failed to load zones:", err); window.sentryLog?.captureException(err); } finally { this.loading.zones = false; } }, processZoneShippers(zones) { // Process shippers from zones zones.forEach((zone) => { zone.shippers.forEach((shipper) => { const existingIndex = this.locals.shippers.findIndex( (s) => s._id === shipper._id ); if (existingIndex > -1) { // Update if this shipper has a better price if (this.locals.shippers[existingIndex].price > shipper.price) { this.locals.shippers[existingIndex].price = shipper.price; this.locals.shippers[existingIndex].zone = { _id: zone._id, name: zone.name, }; this.locals.shippers[existingIndex].shippingRates = zone.shippingRates || []; } } else { // Add new shipper shipper.zone = { _id: zone._id, name: zone.name }; shipper.shippingRates = zone.shippingRates || []; this.locals.shippers.push(shipper); } }); }); // Set default shipper if (this.locals.shippers.length > 0) { if ( !this.locals.shipper || !this.locals.shippers.find((s) => s._id === this.locals.shipper._id) ) { this.locals.shipper = this.locals.shippers[0]; } else { this.locals.shipper = this.locals.shippers.find( (s) => s._id === this.locals.shipper._id ); } } else { this.locals.shipper = null; } }, // Product selection and cart management selectd(product) { if (this.selectedProduct.find((p) => p._id === product._id)) return; this.selectedProduct.push(product); // Add to cart this.store.state.cart.push({ _id: product._id, quantity: product.quantity.default, price: product.price.salePrice, parents: [], }); // Create cart item const cartItem = this.createCartItemFromProduct(product); this.items.push(cartItem); this.isOpen = false; }, createCartItemFromProduct(product) { const cartItem = { _id: product._id, slug: product.slug, name: product.name, price: product.price.salePrice, quantity: { ...product.quantity, value: product.quantity.default }, image: product.images.length > 0 ? product.images[0].src : "", }; // Handle variant if (product.variant?._id) { cartItem.variant = product.variants.find( (v) => v._id === product.variant._id ); cartItem.price = cartItem.variant.price.salePrice; if (cartItem.variant.quantity.pack > 0) { cartItem.quantity.value = cartItem.variant.quantity.pack; } } // Handle upsell if (product.upsell) { cartItem.upsell = product.upsell; const discount = cartItem.upsell.type === "percentage" ? cartItem.price * (cartItem.upsell.value / 100) : cartItem.upsell.value; cartItem.originalPrice = cartItem.price; cartItem.price -= discount; } cartItem.total = cartItem.price * cartItem.quantity.value; return cartItem; }, onRemove(itemId) { this.selectedProduct = this.selectedProduct.filter( (p) => p._id !== itemId ); this.store.state.cart = this.store.state.cart.filter( (p) => p._id !== itemId ); this.items = this.items.filter((p) => p._id !== itemId); }, async pickCollectionReq(collections) { try { const { results } = await StoreinoApp.$store.search( "products", { "collections.slug-in[]": collections, status: "PUBLISH", "outStock.disabled": true, limit: 1000, }, true ); this.relatedProductds = results; } catch (error) { console.error("Failed to load related products:", error); } }, pickCollection(collections) { this.pickedColle = collections; this.pickCollectionReq(collections); }, // Cart initialization async initCart(cart) { this.collectionsRelated = []; this.store.state.cart = cart; this.loading.cart = true; if (cart.length === 0) { this.loading.cart = false; return; } try { const item = cart[0]; let product = this.findProductInCache(item._id); if (!product) { await this.loadProductFromAPI(item._id); product = this.findProductInCache(item._id); } if (!product) { throw new Error(`Product ${item._id} not found`); } this.processProductForCart(product, item); this.calculate("fromInitCart"); } catch (err) { console.error("Cart initialization failed:", err); window.sentryLog?.captureException(err); } finally { this.loading.cart = false; } }, findProductInCache(productId) { return window.products.find((p) => p._id === productId); }, async loadProductFromAPI(productId) { const response = await StoreinoApp.$store.search("products", { _id: productId, status: "all", }); this.products = response.results; const combinedProducts = [...window.products, ...this.products]; window.products = Array.from( new Set(combinedProducts.map(JSON.stringify)) ).map(JSON.parse); if (this.settings.checkout_required_fields.show_variant_on_checkout) { this.locals.variants = this.products[0]?.variants ?? []; } }, processProductForCart(product, item) { // Set affiliate and seller info if (product.user?.whoIs?.toLowerCase() === "subseller") { this.subSeller = product.user._id; } this.isAffiliate = product.source === "affiliate" && product.affiliateId; // Handle related products if ( this.settings.checkout_required_fields.show_related_upsell && product.collections.length > 0 ) { product.collections.forEach((col) => { if (!this.collectionsRelated.includes(col.slug)) { this.collectionsRelated.push(col.slug); } }); this.pickCollectionReq(this.collectionsRelated); } // Set variant from cart item so createCartItemFromProduct can use it if (item.variant) { product.variant = item.variant; } // Create cart item const cartItem = this.createCartItemFromProduct(product); cartItem.quantity.value = item.quantity || 1; // Handle pack pricing this.packPrice = false; if (item.variant?.id && cartItem.variant?.quantity.pack > 0) { cartItem.quantity.value = cartItem.variant.quantity.pack; this.store.state.cart[0].quantity = cartItem.variant.quantity.pack; this.packPrice = true; cartItem.total = cartItem.price; // Pack price replaces total calculation } this.items = [cartItem]; // Handle auto coupon by quantity if ( this.settings.checkout_required_fields.auto_coupon_by_quantity && this.settings.checkout_headlines.auto_code_coupon ) { this.handleAutoCouponByQuantity(cartItem); } }, async handleAutoCouponByQuantity(cartItem) { try { this.locals.discount.code = this.settings.checkout_headlines.auto_code_coupon; const response = await StoreinoApp.$store.get("discounts", { code: this.locals.discount.code, }); if ( response.target === "SELECTED" && typeof response.products[0] === "object" ) { const matchingProduct = response.products.find( (prod) => prod._id === cartItem._id ); if (matchingProduct) { const quantityConditionMet = !matchingProduct.by_quantity || matchingProduct.quantity <= cartItem.quantity.value; if (quantityConditionMet) { this.locals.discount._id = response._id; this.locals.discount.type = response.type; this.locals.discount.value = response.value; } else { this.resetDiscount(); } } else { this.resetDiscount(); } } } catch (error) { console.error("Auto coupon by quantity failed:", error); this.resetDiscount(); } }, resetDiscount() { this.locals.discount = { _id: "", type: "percentage", value: 0, price: 0, code: "", }; }, // Price calculation async calculate(source) { if (source === "fromInitCart") { this.fromInitCart = true; } // Calculate subtotal this.locals.subtotal = this.packPrice ? this.items.reduce((total, item) => total + item.total, 0) : this.items.reduce( (total, item) => total + item.price * item.quantity.value, 0 ); // Calculate shipping let shipping = this.calculateShipping(); // Handle auto coupon by total await this.handleAutoCouponByTotal(); // Apply free shipping if applicable if (this.isFreeShipping) { shipping = 0; } // Calculate TVA this.calculateTva(); // Calculate discount this.calculateDiscount(); // Apply free shipping discount if (this.locals.discount.type === "free_shipping") { shipping = 0; } // Final totals this.locals.shipping = shipping; this.locals.total = this.locals.subtotal + this.locals.shipping + this.locals.tva.price - this.locals.discount.price; // Handle empty cart if ( this.items.length === 0 && this.locals.subtotal === 0 && this.fromInitCart ) { location.reload(); } }, calculateShipping() { if (this.settings.checkout_defaults.has_shipping) { const shippingConfig = this.settings.checkout_defaults.shipping; if (typeof shippingConfig === "object") { return Number( shippingConfig[this.store.state.currency.code]?.value || 0 ); } return Number(shippingConfig || 0); } // If shipper has shipping rates, calculate by weight if ( this.locals.shipper?.shippingRates && this.locals.shipper.shippingRates.length > 0 ) { return this.calculateShippingByWeight( this.locals.shipper.shippingRates ); } return this.locals.shipper?.price || 0; }, getShipperPrice(shipper) { if (shipper?.shippingRates && shipper.shippingRates.length > 0) { return this.calculateShippingByWeight(shipper.shippingRates); } return shipper?.price || 0; }, calculateShippingByWeight(shippingRates) { // Calculate total weight from all items let totalWeight = 0; this.items.forEach((item) => { const product = this.products.find((p) => p._id === item._id); const productWeight = product?.weight?.value || 0; const productUnit = (product?.weight?.unit || "kg").toLowerCase(); // Convert to KG if needed const weightInKg = productUnit === "g" ? productWeight / 1000 : productWeight; totalWeight += weightInKg * (item.quantity?.value || 1); }); // Find matching shipping rate const matchingRate = shippingRates.find( (rate) => totalWeight >= rate.minWeight && totalWeight <= rate.maxWeight ); if (matchingRate) { return Number(matchingRate.value || 0); } // If no matching rate found, use the highest range rate as fallback const sortedRates = [...shippingRates].sort( (a, b) => b.maxWeight - a.maxWeight ); if (totalWeight > sortedRates[0]?.maxWeight) { return Number(sortedRates[0]?.value || 0); } return 0; }, async handleAutoCouponByTotal() { const autoCouponConfig = this.settings.checkout_required_fields.isAuto_coupon_by_total && this.settings.checkout_defaults.auto_coupon_by_total?.[ this.store.state.currency.code ]; if (!autoCouponConfig) return; const minTotal = Number(autoCouponConfig.value); if (this.locals.subtotal >= minTotal) { if (!this.locals.discount._id) { await this.applyAutoCoupon(); } } else if (this.locals.discount._id) { this.resetDiscount(); } }, async applyAutoCoupon() { try { this.locals.discount.code = this.settings.checkout_headlines.auto_code_coupon; const response = await StoreinoApp.$store.get("discounts", { code: this.locals.discount.code, }); this.locals.discount._id = response._id; this.locals.discount.type = response.type; this.locals.discount.value = response.value; } catch (err) { console.error("Auto coupon application failed:", err); window.sentryLog?.captureException(err); this.$set(this.errors, "coupon", true); } }, calculateTva() { if (!this.settings.checkout_required_fields.applyTva) { this.locals.tva.price = 0; return; } const applyTo = this.settings.checkout_defaults.tva_apply_to || "all"; if (applyTo === "specific") { const allowed = Array.isArray( this.settings.checkout_defaults.tva_methods ) ? this.settings.checkout_defaults.tva_methods : []; const currentMethodId = this.locals.method && this.locals.method._id; if (!currentMethodId || allowed.indexOf(currentMethodId) === -1) { this.locals.tva.price = 0; return; } } if (this.settings.checkout_defaults.tva_type === "Percentage") { this.locals.tva.price = this.locals.subtotal * (Number(this.settings.checkout_defaults.tva_value) / 100); } else { this.locals.tva.price = Number( this.settings.checkout_defaults.tva_value ); } }, calculateDiscount() { if (this.locals.discount.value === 0) { this.locals.discount.price = 0; return; } if (this.locals.discount.type === "percentage") { this.locals.discount.price = this.locals.subtotal * (this.locals.discount.value / 100); } else { this.locals.discount.price = this.locals.discount.value; } }, // Country info handling async getCountriesInfo() { const nuxtStore = window.$nuxt?.$store; if (!nuxtStore?.state?.settings) return; if ( this.settings.checkout_required_fields.autoDetectCountry && nuxtStore.state.IP ) { try { const baseUrl = nuxtStore.state.settings.store.subdomain.includes( ".world" ) ? "https://api-stores.storeino.world" : "https://api-stores.storeino.com"; if(nuxtStore.state.IP && nuxtStore.state.IP.split(",")[0]) nuxtStore.state.IP = nuxtStore.state.IP.split(",")[0]; const countryByIp = await nuxtStore.$http.get( `https://api-views.storeino.com/api/geoLite/get?ip=${nuxtStore.state.IP}` ); const countriesResponse = await nuxtStore.$http.get( `${baseUrl}/api/countries/search`, { params: { only: ["name", "dialCode", "code"], code: countryByIp.data.geoplugin_countryCode, }, } ); if (countriesResponse.status === 200 ) { if (countriesResponse.data.results.length > 0) { this.preferredCountries = countriesResponse.data.results; this.customer.address.country = this.preferredCountries[0]; await this.getLocations("country", this.preferredCountries[0]._id); } } } catch (error) { console.error("Failed to get country info:", error); } } }, // Helper methods for form filling and validation fillName(obj = this.customer) { if (!obj.fullname) return; const names = obj.fullname.trim().split(" "); switch (names.length) { case 1: obj.firstname = names[0]; obj.lastname = names[0]; break; case 2: obj.firstname = names[0]; obj.lastname = names[1]; break; case 3: obj.firstname = names[0]; obj.lastname = names[1] + " " + names[2]; break; default: obj.firstname = names[0] + " " + names[1]; obj.lastname = names[2] + " " + names[3]; break; } }, // Validation methods isValid(type, data) { this.errors = {}; if (type === "customer") { this.validateCustomerData(data); } else { this.validateOrderData(data); } if (Object.keys(this.errors).length > 0) { this.scrollToFirstError(); return false; } return true; }, validateCustomerData(data) { const settings = this.settings; const required = settings.checkout_required_fields; // Name validation if (data.firstname.length < CONF.MIN_NAME_LENGTH) { this.errors.firstname = true; this.errors.fullname = true; } if (data.lastname.length < CONF.MIN_NAME_LENGTH) { this.errors.lastname = true; this.errors.fullname = true; } // Email validation if (!this.isLoggedIn && ((required.show_email && data.email) || required.email)) { if (!Utils.validateEmail(data.email)) { this.errors.email = true; } } // Phone validation if ((required.show_phone && data.phone) || required.phone) { if ( !Utils.validatePhone( data.phone, settings.checkout_defaults.phone_min, settings.checkout_defaults.phone_max ) ) { this.errors.phone = true; } } // Password validation if ( !this.isLoggedIn && ((required.show_password && this.locals.create_account) || required.password) ) { if (data.password.length < CONF.MIN_PASSWORD_LENGTH) { this.errors.password = true; } } // Address validation this.validateAddressFields(data.address, required); // Location validation this.validateLocationFields(data.address, required); }, validateAddressFields(address, required) { const addressFields = [ { key: "address1", min: CONF.MIN_ADDRESS_LENGTH }, { key: "address2", min: CONF.MIN_ADDRESS_LENGTH }, ]; addressFields.forEach((field) => { const showField = required[`show_${field.key}`] && address[field.key]; const requiredField = required[field.key]; if (showField || requiredField) { if (address[field.key].length < field.min) { this.errors[field.key] = true; } } }); }, validateLocationFields(address, required) { const defaults = this.settings.checkout_defaults; // Countries if (required.countries && required.show_countries && !defaults.has_country) { if (!(address.country && address.country._id)) { this.errors.countries = true; } } // Provinces if (required.provinces && required.show_provinces && !defaults.has_province) { if (!(address.province && address.province._id)) { this.errors.provinces = true; } } // Cities if (required.show_cities && required.cities && !required.typing_city_manually) { if (!(address.city && address.city._id)) { this.errors.cities = true; } } if (required.show_cities && required.typing_city_manually) { if (!address.city) { this.errors.cities = true; } else if ( address.city.name.length < CONF.MIN_NAME_LENGTH && required.cities ) { this.errors.cities = true; } } }, validateOrderData(data) { const address = data.shipping.address; const required = this.settings.checkout_required_fields; data.shipping.address.firstname = data.customer.firstname.trim(); data.shipping.address.lastname = data.customer.lastname.trim(); // Shipping address name validation if (data.shipping.address.firstname && data.shipping.address.firstname.length < CONF.MIN_NAME_LENGTH) { this.errors.address_firstname = true; this.errors.address_fullname = true; } if (data.shipping.address.lastname && data.shipping.address.lastname.length < CONF.MIN_NAME_LENGTH) { this.errors.address_lastname = true; this.errors.address_fullname = true; } // Shipping address phone validation // if ((required.show_phone && data.customer.phone) || required.phone) { // if ( // Utils.validatePhone( // data.customer.phone, // this.settings.checkout_defaults.phone_min, // this.settings.checkout_defaults.phone_max // ) // ) { // this.errors.address_phone = true; // } // } // Shipping address field validation const shippingFields = ["address1", "address2"]; shippingFields.forEach((field) => { const showField = required[`show_${field}`] && address[field]; const requiredField = required[field]; if (showField || requiredField) { if ( address[field] && address[field].length < CONF.MIN_ADDRESS_LENGTH ) { this.errors[`address_${field}`] = true; } else if (!address[field] && requiredField) { this.errors[`address_${field}`] = true; } } }); }, scrollToFirstError() { this.$nextTick(() => { const errorElement = document.querySelector(".ck-error"); if (errorElement) { errorElement.parentNode.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest", }); } else { window.scrollTo(0, 0); } }); }, // Data normalization normalize(data) { Object.keys(data).forEach((key) => { if (typeof data[key] === "object") { if (data[key] === null) { data[key] = undefined; return; } this.normalize(data[key]); } else if (typeof data[key] === "string") { if (key === "phone") { data[key] = data[key].replace(/[^0-9\u0660-\u0669+]/g, ""); } data[key] = data[key].trim(); if (!data[key]) { data[key] = undefined; } } }); return data; }, normalizeSettings() { const required = this.settings.checkout_required_fields; Object.keys(required).forEach((key) => { const showKey = `show_${key}`; // Set show field if it doesn't exist but required field is true if (!Object.hasOwnProperty.call(required, showKey) && required[key]) { required[showKey] = required[key]; } // Disable required field if show field is false if (!required[showKey] && required[key]) { required[key] = false; } }); // Special case: disable password if email is not required if (required.show_password && !required.email) { required.show_password = false; required.password = false; } }, // Event handlers for watchers handleAddressChange(val) { this.abandonmentCart(); if (!this.locals.ship_to_different_address) { this.syncShippingWithBilling(); } }, syncShippingWithBilling() { this.shipLocations = Utils.deepClone(this.locations); this.order.shipping.address.country = this.customer.address.country; this.order.shipping.address.province = this.customer.address.province; this.order.shipping.address.city = this.customer.address.city; }, handleShippingLocationChange(locationType) { if (this.loading.zoneTimes <= 3) return; this.getZones(); if (locationType === "country") { this.resetLocationSelections(["province", "city"]); } else if (locationType === "province") { this.resetLocationSelections(["city"]); } }, resetLocationSelections(locations) { locations.forEach((location) => { if ( !this.settings.checkout_required_fields.typing_city_manually || location !== "city" ) { this.order.shipping.address[location] = null; this.customer.address[location] = null; } }); }, // Cart abandonment tracking abandonmentCart() { if (this.isAffiliate) return; const order = Utils.deepClone(this.order); order.details = this.store.state.cart.map((item) => ({ product: { _id: item._id }, quantity: item.quantity || 1, variant: item.variant ? item.variant._id : null, })); order.customer = Utils.deepClone(this.customer); order.shipping.address = Utils.deepClone(this.customer.address); this.fillName(order.customer); window.dispatchEvent(new CustomEvent("ORDER_UPDATED", { detail: order })); }, // Country selection utilities initializeCountry() { if (this.preferredCountries.length > 0) { this.activeCountry.code = this.findCountry( this.preferredCountries[0].code.toLowerCase() )?.code.toLowerCase() || this.preferredCountries[0].code.toLowerCase(); } }, getCountries(list = []) { return list .map((countryCode) => this.findCountry(countryCode.code)) .filter(Boolean); }, findCountry(iso = "") { return this.preferredCountries.find( (country) => country.code === iso.toUpperCase() ); }, getItemClass(index, code) { const isHighlighted = this.selectedIndex === index; const isLastPreferred = index === this.preferredCountries.length - 1; const isPreferred = this.preferredCountries .map((c) => c.code.toUpperCase()) .includes(code); return { highlighted: isHighlighted, "last-preferred": isLastPreferred, preferred: isPreferred, }; }, choose(country) { this.activeCountry = { code: country.code.toLowerCase(), dialCode: country.dialCode, name: country.name, }; this.$emit("onSelect", this.activeCountry); }, toggleDropdown() { if (this.disabled) return; this.open = !this.open; }, manualDropdown() { if (this.disabled) return; this.manualTrigger = true; this.open = true; }, clickedOutside() { if (this.manualTrigger) { this.manualTrigger = false; return; } this.open = false; }, keyboardNav(e) { const keyCode = e.keyCode; if (keyCode === 40) { // down arrow this.handleDownArrow(); } else if (keyCode === 38) { // up arrow this.handleUpArrow(); } else if (keyCode === 13) { // enter this.handleEnterKey(); } else { this.handleTyping(e.key); } }, handleDownArrow() { this.open = true; if (this.selectedIndex === null) { this.selectedIndex = 0; } else { this.selectedIndex = Math.min( this.preferredCountries.length - 1, this.selectedIndex + 1 ); } this.scrollToSelected(); }, handleUpArrow() { this.open = true; if (this.selectedIndex === null) { this.selectedIndex = this.preferredCountries.length - 1; } else { this.selectedIndex = Math.max(0, this.selectedIndex - 1); } this.scrollToSelected(); }, handleEnterKey() { if (this.selectedIndex !== null) { this.choose(this.preferredCountries[this.selectedIndex]); } this.open = !this.open; }, handleTyping(key) { this.typeToFindInput += key; clearTimeout(this.typeToFindTimer); this.typeToFindTimer = setTimeout(() => { this.typeToFindInput = ""; }, 700); const typedCountryIndex = this.preferredCountries .slice(this.preferredCountries.length) .findIndex((c) => c.name.toLowerCase().startsWith(this.typeToFindInput) ); if (typedCountryIndex !== -1) { this.selectedIndex = this.preferredCountries.length + typedCountryIndex; this.scrollToSelected(); } }, scrollToSelected() { if (!this.$refs.list || this.selectedIndex === null) return; const selectedElement = this.$refs.list.children[this.selectedIndex]; if (!selectedElement) return; const listElement = this.$refs.list; const elementTop = selectedElement.offsetTop; const elementBottom = elementTop + selectedElement.clientHeight; const listTop = listElement.scrollTop; const listBottom = listTop + listElement.clientHeight; if (elementBottom > listBottom) { listElement.scrollTop = elementTop - listElement.clientHeight + selectedElement.clientHeight; } else if (elementTop < listTop) { listElement.scrollTop = elementTop; } }, reset() { this.selectedIndex = this.preferredCountries .map((c) => c.code) .indexOf(this.activeCountry.code.toUpperCase()); this.open = false; }, // Helper method to get autocomplete attributes getAutocomplete(fieldKey) { const autocompleteMap = { email: "email", phone: "tel", address1: "street-address", address2: "address-line2", firstname: "given-name", lastname: "family-name", fullname: "name", }; return autocompleteMap[fieldKey] || "off"; }, // Helper method to generate dynamic styles generateDynamicStyles() { if (!this.settings?.checkout_headlines) return ""; const styles = this.settings.checkout_headlines; const buyColorRgb = Utils.hexToRgb(styles.buy_now_color); return ``; }, }, });

Smart Watches

Montres Casual Premium

Montres Couple

Montres Business

Montres Minimalistes

Filtres

Collections

Prix

Tailles

Couleurs

Tags

Marques

Filtres

Trier Par

Trier Par

Aucun produit trouvé

Guess Collection

Rolex Oyster Perpetual Datejust