// 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: {}, oaiParams: {}, }; if (order._id) pixel.fbParams.eventID = order._id; // Meta advanced matching (guest purchases) — the CAPI handler normalizes and // sha256-hashes each value, so raw values go here. Meta used to get the email and // nothing else, and COD orders rarely carry one, so Purchase reached Events // Manager with no customer data at all — that is the "set up manual advanced // matching" diagnostic. TikTok and OpenAI below already send the full set. const fbAddress = (order.shipping && order.shipping.address) ? order.shipping.address : null; if (order.customer && order.customer.email) pixel.fbParams.user_email = order.customer.email; if (fbAddress && fbAddress.phone) pixel.fbParams.user_phone = fbAddress.phone; if (fbAddress && fbAddress.firstname) pixel.fbParams.user_firstname = fbAddress.firstname; if (fbAddress && fbAddress.lastname) pixel.fbParams.user_lastname = fbAddress.lastname; if (fbAddress && fbAddress.country && fbAddress.country.code) pixel.fbParams.user_country = fbAddress.country.code; if (fbAddress && fbAddress.city && fbAddress.city.name) pixel.fbParams.user_city = fbAddress.city.name; // 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; // OpenAI advanced matching (guest purchases) — the backend normalizes each value per // OpenAI's rules and sha256-hashes it, so raw values go here. These are read on // whichever thanks page the order lands on (the theme's own, or checkout-stores). const oaAddress = (order.shipping && order.shipping.address) ? order.shipping.address : null; if (order.customer && order.customer.email) pixel.oaiParams.user_email = order.customer.email; if (oaAddress && oaAddress.phone) pixel.oaiParams.user_phone = oaAddress.phone; if (oaAddress && oaAddress.firstname) pixel.oaiParams.user_firstname = oaAddress.firstname; if (oaAddress && oaAddress.lastname) pixel.oaiParams.user_lastname = oaAddress.lastname; if (oaAddress && oaAddress.country && oaAddress.country.code) pixel.oaiParams.user_country = oaAddress.country.code.toLowerCase(); if (oaAddress && oaAddress.city && oaAddress.city.name) pixel.oaiParams.user_city = oaAddress.city.name; // encodeURIComponent, not encodeURI: encodeURI leaves `+`, `&` and `#` literal, and // vue-router turns a literal `+` into a space when it parses the query — which // silently corrupted every phone number carried in here. return encodeURIComponent(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; }, // Shipping is free only when every product in the cart is flagged // freeShipping — one regular product and the order pays shipping. // Mirrors isFreeShippingOrder() on the API side. The length guard keeps an // empty cart (items.every() === true) from reading as free while it loads. isFreeShippingOrder() { return ( this.items.length > 0 && this.items.every((item) => item.freeShipping) ); }, 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

Categories

No blogs