// 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 true; 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: {}, }; if (order._id) pixel.fbParams.event_id = order._id; if (order.customer.email) pixel.fbParams.user_email = order.customer.email; 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", }, [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", paytech: "Paytech", }, [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", paytech: "Paytech", }, }, 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]; }, }; // 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, countEvent: 0, thanksPath: "#", ctk: null, 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) => 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() { return ( this.settings?.checkout_defaults?.has_min_price_freeshipping && this.locals.subtotal > this.settings.checkout_defaults.min_price_freeshipping ); }, bankDetails() { return window.$nuxt?.$store?.state?.settings?.store?.transfer; }, }, // 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(); } }, }, // Lifecycle hooks created() { this.cleanupEventListeners(); // Create debounced abandonment cart method this.debouncedAbandonmentCart = Utils.debounce(() => { this.abandonmentCart(); }, 500); }, 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(); // 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; } }, 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 window.dispatchEvent(new CustomEvent("APP_LOADER")); }, // 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) { console.warn("Settings not loaded yet, queuing event"); // 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); if (JSON.stringify(currentDetails) === JSON.stringify(newDetails)) 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 const customerData = await this.processCustomerData(); if (!customerData) { this.sending = false; return; } // Process order data const orderData = this.buildOrderData(); if (!this.isValid("order", orderData)) { 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)) { 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 (this.order.customer._id || customerToken) { if (customerToken) { const customerDecoded = Utils.tokenDecode(customerToken); this.order.customer = customerDecoded.customer; } 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); }, // 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.has_country && defaults.country) { 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, }; } } else { // Add new shipper shipper.zone = { _id: zone._id, name: zone.name }; 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); } // 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.settings.checkout_defaults.has_min_price_freeshipping && this.locals.subtotal > this.settings.checkout_defaults.min_price_freeshipping ) { 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); } return this.locals.shipper?.price || 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; } 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"; 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) { 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 ((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 ( (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 locationFields = ["countries", "provinces", "cities"]; locationFields.forEach((field) => { if (!required[`show_${field}`] || !required[field]) return; const singular = this.singular[field]; if (field === "cities" && required.typing_city_manually) { if (required.cities && !address.city) { this.errors.cities = true; } else if (address.city.name.length < CONF.MIN_NAME_LENGTH) { this.errors.cities = true; } } else if (!(address[singular] && address[singular]._id)) { this.errors[field] = true; } }); }, validateOrderData(data) { const address = data.shipping.address; const required = this.settings.checkout_required_fields; // Shipping address name validation - check if properties exist first if ( address.firstname && address.firstname.length < CONF.MIN_NAME_LENGTH ) { this.errors.address_firstname = true; this.errors.address_fullname = true; } else if ( !address.firstname && (required.show_firstname || required.firstname) ) { this.errors.address_firstname = true; this.errors.address_fullname = true; } if (address.lastname && address.lastname.length < CONF.MIN_NAME_LENGTH) { this.errors.address_lastname = true; this.errors.address_fullname = true; } else if ( !address.lastname && (required.show_lastname || required.lastname) ) { this.errors.address_lastname = true; this.errors.address_fullname = true; } // Shipping address phone validation if ((required.show_phone && address.phone) || required.phone) { if ( Utils.validatePhone( address.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 ``; }, }, });

Four color game

Four color game