// 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, mobileSummary: false, openSelect: null, // Which custom-select dropdown is open (string key or null) 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); } // Close any open custom-select when clicking outside this._ckOutsideClick = (e) => { if (!this.locals.openSelect) return; const target = e.target; if (target.closest && target.closest(".ck-customselect")) return; this.locals.openSelect = null; }; document.addEventListener("mousedown", this._ckOutsideClick); document.addEventListener("touchstart", this._ckOutsideClick); // Autofill / prefilled-value label sync — some browsers (Safari, Firefox) // don't update :placeholder-shown when a value is set programmatically or // by autofill, so the floating label sits on top of the value until first // focus. We toggle .is-filled on the wrapping .ck-label to force the float. this._ckLabelSync = () => { document.querySelectorAll(".ck-checkout .ck-label").forEach((label) => { const input = label.querySelector(".ck-input"); if (!input) return; if (input.value && input.value.length > 0) { label.classList.add("is-filled"); } else { label.classList.remove("is-filled"); } }); }; // Run once after Vue paints, again after a tick for late-arriving autofill this.$nextTick(this._ckLabelSync); setTimeout(this._ckLabelSync, 200); setTimeout(this._ckLabelSync, 800); // Also catch WebKit autofill via the CSS animation trick above this._ckAutofillListener = (e) => { if (e.animationName === "ck-autofill") this._ckLabelSync(); }; document.addEventListener("animationstart", this._ckAutofillListener, true); // And run on every input event so the class is always in sync this._ckInputListener = (e) => { if (e.target && e.target.classList && e.target.classList.contains("ck-input")) { this._ckLabelSync(); // First real interaction with the checkout form → fire InitiateCheckout once. this.fireInitiateCheckout(); } }; document.addEventListener("input", this._ckInputListener, true); document.addEventListener("change", this._ckInputListener, true); }, destroyed() { this.cleanupEventListeners(); if (this._ckOutsideClick) { document.removeEventListener("mousedown", this._ckOutsideClick); document.removeEventListener("touchstart", this._ckOutsideClick); } if (this._ckAutofillListener) { document.removeEventListener("animationstart", this._ckAutofillListener, true); } if (this._ckInputListener) { document.removeEventListener("input", this._ckInputListener, true); document.removeEventListener("change", this._ckInputListener, true); } }, // 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 — keep the panel collapsed on load, // the user opens it manually via the "Coupon Code" toggle. if ( this.settings.checkout_required_fields.auto_coupon && this.settings.checkout_headlines.auto_code_coupon ) { 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) { const n = Number(total); if (!isFinite(n)) return "0"; return Number.isInteger(n) ? n : n.toFixed(2); }, // ============================================================ // Custom dropdown helpers (replace native

Sneakers

Mocassins

Chelsea Boots

Derby Shoes

Filtres

Collections

Prix

Tailles

Couleurs

Tags

Marques

Filtres

Trier Par

Trier Par

Aucun produit trouvé

Olive Crest

Velvet Black

Marmi Grigio Sneakers