let currentProductHandler = null; var vm = new StoreinoApp({ el: "#app_expresscheckout", data() { return { config: __DATA__, tools: { getPixel: (order) => { let pixel = { content_ids: order.details.map(d => d.product._id), contents: order.details.map(d => { return { name: d.product.name.replace('&', 'and'), id: d.product._id, price: d.product.price.salePrice, quantity: d.quantity } }), total: order.total, fbParams: {} }; // if (order.shipping.address && order.shipping.address.firstname) pixel.fbParams['user_firstname'] = order.shipping.address.firstname; // if (order.shipping.address && order.shipping.address.lastname) pixel.fbParams['user_lastname'] = order.shipping.address.lastname; // if (order.shipping.address && order.shipping.address.country && order.shipping.address.country.code) pixel.fbParams['user_country'] = order.shipping.address.country.code.toLowerCase(); // if (order.shipping.address && order.shipping.address.phone) pixel.fbParams['user_phone'] = order.shipping.address.phone; if (order._id) pixel.fbParams['event_id'] = order._id; if (order.customer.email) pixel.fbParams['user_email'] = order.customer.email; pixel = JSON.stringify(pixel); pixel = encodeURI(pixel); return pixel; }, validateEmail: (email) => { // is valid email if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) return true return false }, validatePhone: (phone, min = 6, max = 14) => { // Get digits if (!phone) return true; phone = phone.replace(/[^0-9\u0660-\u0669+]/g, ''); // is valid phone if (phone.length < parseInt(min) || phone.length > parseInt(max)) { return true } return false }, tokenDecode(token) { if (/^[A-Za-z0-9-_=]+\.[A-Za-z0-9-_=]+\.[A-Za-z0-9-_.+/=]*$/.test(token) && token.split(".").length > 1) { let data = token.split(".")[1]; let decodedData = atob(data); // atob is a built-in function to decode base64 strings let text = decodeURIComponent(escape(decodedData)); // Ensure ASCII compatibility return JSON.parse(text); } else { return null; } }, cookieToObject : (cookie)=> { if(!cookie) return {}; console.log("cookieToObject__1"); const cookies = cookie.split(';'); const result = {}; console.log("cookieToObject__2"); for(let i = 0; i < cookies.length; i++){ const key = cookies[i].split('=')[0].trim(); console.log("cookieToObject__key",key); var value = cookies[i].substring(cookies[i].indexOf('=')+1).trim(); console.log("cookieToObject__value",value); result[key] = value; } console.log("cookieToObject__4"); return result; } }, showCaptcha: false, products: [], store: { state: { cart: [], language: { code: 'EN', name: 'English' }, currency: { code: 'USD', symbol: '$' }, }, }, sending: false, displayMap: false, loading: { zones: true, cart: true, zoneTimes: 0 }, settings: null, subSeller: null, errors: {}, show: { products: false, coupon: false, }, 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], }, 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: [] }, items: [], preferredCountries: [], infoContry: {}, singular: { countries: 'country', provinces: 'province', cities: 'city' }, shipLocations: { countries: [], provinces: [], cities: [] }, locations: { countries: [], provinces: [], cities: [] }, customer: { firstname: '', lastname: '', fullname: '', password: '', email: '', phone: '', token: undefined, ipAddress: undefined, address: { address1: '', address2: '', country: null, province: null, city: { name: '', _id: undefined } } }, 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 }, details: null, pickedColle: '', packPrice: false, fromInitCart: false, imagesToUpload: [], attachments: [], isAffiliate: false, relatedProductds: [], collectionsRelated: [], selectedProduct: [], isOpen: false, countEvent: 0, isPaypalToCheckoutActive: false, thanksPath: "#", ctk: null, activeCountry: { code: "ma" }, open: false, manualTrigger: false, selectedIndex: null, typeToFindInput: "", typeToFindTimer: null } }, watch: { "store.state.cart": { handler: function () { this.calculate("fronWatch"); }, deep: true }, 'localization.position': { deep: true, async handler(value) { this.localization.position = value this.localization.markerPos = [value.lat, value.lng]; this.$emit("input", value); } }, "locals": { handler: function () { this.calculate("fromLocal"); }, deep: true }, "order": { handler: function () { this.abandonmentCart(); }, deep: true }, "customer": { handler: function () { this.abandonmentCart(); }, deep: true }, "customer.address": { handler: function (val) { this.abandonmentCart(); if (!this.locals.ship_to_different_address) { this.shipLocations = JSON.parse(JSON.stringify(this.locations)); this.order.shipping.address.country = val.country; this.order.shipping.address.province = val.province; this.order.shipping.address.city = val.city; } }, deep: true }, "order.shipping.address.country": { handler: function (val) { if (this.loading.zoneTimes > 3) { this.getZones(); if (!this.settings.checkout_required_fields.typing_city_manually) { this.order.shipping.address.city = null this.customer.address.city = null } this.order.shipping.address.province = null this.customer.address.province = null } }, deep: true }, "order.shipping.address.province": { handler: function (val) { if (this.loading.zoneTimes > 3) { this.getZones(); if (!this.settings.checkout_required_fields.typing_city_manually) { this.order.shipping.address.city = null this.customer.address.city = null } } }, deep: true }, "order.shipping.address.city": { handler: function (val) { if (this.loading.zoneTimes > 3 || this.settings.checkout_required_fields.typing_city_manually) this.getZones(); }, deep: true }, "locals.ship_to_different_address"(val) { if (!val) { this.shipLocations = JSON.parse(JSON.stringify(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; } } }, created() { console.log('created component'); // Remove any previous listeners to avoid duplicates if (currentProductHandler) { window.removeEventListener('CURRENT_PRODUCT', currentProductHandler, true); } }, async mounted() { // Create a stable handler reference currentProductHandler = (e) => this.handleCurrentProduct(e); window.removeEventListener('CURRENT_PRODUCT', currentProductHandler, true); window.addEventListener('CURRENT_PRODUCT', currentProductHandler, true); // Delete Code // this.fetchJsonAndAssign('product.json', 'products'); // this.fetchJsonAndAssign('nuxt.json', '$nuxt'); // Delete Code console.log('mounted 1'); // if (!window.products) window.products = [] this.products = window.products // window.removeEventListener('CURRENT_PRODUCT', currentProductHandler, true); this.settings = await this.getSettings(); console.log('mounted 2'); // this.store.state.currency = this.settings.store_currencies.find(currency => currency.default) || this.store.state.currency; this.store.state.currency = window.$nuxt ? window.$nuxt.$store.state.currency : this.store.state.currency this.normalizeSettings(); console.log('mounted 3'); // if (!this.settings.checkout_headlines.buy_now_color) this.$set(this.settings.checkout_headlines, 'buy_now_color', "#40c11f"); if (!this.settings.checkout_headlines.text_color) this.$set(this.settings.checkout_headlines, 'text_color', "#444444"); if (!this.settings.checkout_headlines.price_color) this.$set(this.settings.checkout_headlines, 'price_color', "#ff3344"); if (!this.settings.checkout_headlines.bg_color) this.$set(this.settings.checkout_headlines, 'bg_color', "#ffffff"); if (!this.settings.checkout_headlines.bg_color) this.$set(this.settings.checkout_headlines, 'bg_color', "#eeeeee"); if (!this.settings.checkout_required_fields.typing_city_manually) { this.order.shipping.address.city = null this.customer.address.city = null } console.log('mounted 4'); // 1 await this.getMethods(); console.log('mounted ??'); await this.getLocations('world', undefined); console.log('mounted 5'); // this.getCountriesInfo() if (this.settings.checkout_required_fields.show_ship_to_different_address) { this.shipLocations = JSON.parse(JSON.stringify(this.locations)); } console.log('mounted 6'); // this.checkMethods() // window.addEventListener("CURRENT_PRODUCT", currentProductHandler, true); window.dispatchEvent(new CustomEvent("APP_LOADER")); console.log('mounted 7'); // Delete Code // window.dispatchEvent(new CustomEvent('CURRENT_PRODUCT', { // detail: { // "product_id": "6627a106ebc115634f595d47", // "product_quantity": 1, // "product_variant": "6627a106ebc115634f595d58", // "product_currency": "MAD", // "product_price": { // "salePrice": 8.99, // "comparePrice": 17.99 // } // } // })); // Delete Code console.log(this.store.state); if (this.settings.checkout_required_fields.show_captcha) { this.loadScript('https://www.google.com/recaptcha/api.js', 'recaptcha'); } console.log('mounted 8'); // 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() } console.log('mounted 9'); if (this.settings.checkout_required_fields.show_variant_on_checkout) { // Variants this.locals.variants = window.products?.[0]?.variants ?? []; } console.log('mounted 0'); }, destroyed() { if (currentProductHandler) { window.removeEventListener('CURRENT_PRODUCT', currentProductHandler, true); } }, filters: { method(value, lang) { const translates = { AR: { Hyperpay: 'Hyperpay', CashOnDelivery: 'الدفع عند الاستلام', PayPal: 'الدفع عبر بايبال',transfer: 'تحويل بنكي', Stripe: 'الدفع ببطاقة الائتمان', "Paypal-Credit-Card": 'الدفع ببطاقة الائتمان', 'cmi': 'الدفع ببطاقة الائتمان مغربية', paytech: 'Paytech' }, 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' }, 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' }, } return translates[lang][value]; } }, methods: { // Delete Code // fetchJsonAndAssign(url, variableName) { // fetch(url) // .then(response => { // if (!response.ok) { // throw new Error('Network response was not ok'); // } // return response.json(); // }) // .then(data => { // window[variableName] = data; // }) // .catch(error => { // console.error('Error fetching JSON file:', error); // }); // }, // Delete Code hexToRgb(hex) { var 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 }; }, setVariant(variant) { const cartItem = this.store?.state?.cart?.[0]; if (cartItem) { 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 } } })); } }, loadScript(url, id) { return new Promise(function (resolve, reject) { const exists = document.getElementById(id); if (!exists) { const script = document.createElement('script'); script.src = url; script.async = true; script.defer = true; script.id = id; document.body.appendChild(script); script.onload = () => { resolve(); } } else resolve(); }); }, 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] }; // Keep marker and map center in sync on drag this.marker.on('moveend', (e) => { const movedPos = e.target.getLatLng(); this.localization.position = { lat: movedPos.lat, lng: movedPos.lng }; this.localization.markerPos = [movedPos.lat, movedPos.lng]; this.map.setView([movedPos.lat, movedPos.lng]); // recenter the map }); // Move marker and center on double click this.map.on('dblclick', (e) => { const { lat, lng } = e.latlng; this.marker.setLatLng([lat, lng]); this.localization.position = { lat, lng }; this.localization.markerPos = [lat, lng]; this.map.setView([lat, lng]); // recenter the map }); }, currentLocal(position) { const lat = position.coords.latitude; const lng = position.coords.longitude; this.localization.position = { lat, lng }; this.localization.markerPos = [lat, lng]; // If map already exists (reopen), move marker and center if (this.map && this.marker) { this.marker.setLatLng([lat, lng]); this.map.setView([lat, lng]); } }, openMap() { this.displayMap = true // Get current location first, then initialize the map window.navigator.geolocation.getCurrentPosition((position) => { this.currentLocal(position) this.initMap() }, (error) => { // Fallback if location not allowed console.warn("Geolocation error:", error) this.initMap() }) }, sortedObject(unordered) { return Object.keys(unordered).sort().reduce( (obj, key) => { obj[key] = unordered[key]; return obj; }, {}); }, previewFiles(e) { let imageFiles = Array.from(e.target.files); if (imageFiles && imageFiles.length > 0) { imageFiles.forEach(img => { if (this.imagesToUpload.length > 7) return; let reader = new FileReader(); reader.onload = async e => { let image = {}; image.title = ''; image.src = e.target.result; this.imagesToUpload.push(image); }; reader.readAsDataURL(img); }); } else { console.log("No image"); } }, async upload(key, mutiple = false) { try { const response = await StoreinoApp.$store.create('images', { target: 'livechat' }, this.imagesToUpload[key] ) console.log(response); this.attachments.push({ type: 'image', url: response }); } catch (err) { sentryLog.captureException(err); if (err.response) alert(err.response); } }, async uploadAll() { for (const [index, iterator] of this.imagesToUpload.entries()) { await this.upload(index, true); } }, handleCurrentProduct(e) { // Call your main handler this.currentProduct(e); }, async currentProduct(e) { // this.countEvent += 1 console.log({count:this.countEvent}); const productId = document.querySelector('[itemprop="productID"]') ? document.querySelector('[itemprop="productID"]').content : null; if (productId && productId != e.detail.product_id) return; // if (JSON.stringify(this.sortedObject(this.details ? this.details : '{}')) === JSON.stringify(this.sortedObject(e.detail))) return; this.details = e.detail; // 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 }; // this.store.state.currency = this.settings.store_currencies.find(currency => currency.code == e.detail.product_currency) || this.store.state.currency; this.locals.subtotal = e.detail.product_price.salePrice * (e.detail.product_quantity || 1); // console.log("e.detail", e.detail); this.store.state.cart = []; // await this.initCart([cartItem]); this.calculate("fromCurrentP"); }, checkMethods() { if (this.settings.checkout_defaults.active_payment_time) { const hours = new Date().getHours(); const Minute = new Date().getMinutes(); const date = `${String(hours).length === 1 ? '0' + hours : hours}:${String(Minute).length === 1 ? '0' + Minute : Minute}` const check_methods = this.locals.methods.filter(meth => this.settings.checkout_defaults.active_payment_time[meth.name] && this.settings.checkout_defaults.active_payment_time[meth.name].is_active); const methods = this.locals.methods.filter(meth => !this.settings.checkout_defaults.active_payment_time[meth.name] || !this.settings.checkout_defaults.active_payment_time[meth.name].is_active); if (check_methods.length > 0) { for (const method of check_methods) { if (this.settings.checkout_defaults.active_payment_time[method.name].start >= date || this.settings.checkout_defaults.active_payment_time[method.name].end <= date) { methods.push(method) } } this.locals.methods = methods if (this.locals.methods.length > 0) { this.locals.method = this.locals.methods[0]; } } } console.log('and method time check'); }, async getSettings() { if (window.$nuxt && window.$nuxt.$store && window.$nuxt.$store.state.settings) { if (window.$nuxt.$store.state.IP) this.customer.ipAddress = window.$nuxt.$store.state.IP; return (({ checkout_defaults, store_currencies, checkout_error_messages, checkout_headlines, checkout_labels, checkout_placeholders, checkout_required_fields, checkout_steps }) => ({ checkout_defaults, store_currencies, checkout_error_messages, checkout_headlines, checkout_labels, checkout_placeholders, checkout_required_fields, checkout_steps }))($nuxt.$store.state.settings); } 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 = {}; for (result of response.results) { settings[result.key] = result.value; }; return (({ checkout_defaults, store_currencies, checkout_error_messages, checkout_headlines, checkout_labels, checkout_placeholders, checkout_required_fields, checkout_steps }) => ({ checkout_defaults, store_currencies, checkout_error_messages, checkout_headlines, checkout_labels, checkout_placeholders, checkout_required_fields, checkout_steps }))(settings); }, cancelText() { let txt = "Cancel"; switch (this.store.state.language.code) { case "AR": txt = "إلغاء" break; case "EN": txt = "Cancel" break; case "FR": txt = "Annuler" break; } return txt; }, freeshippingText() { let txt = "Free Shipping"; switch (this.store.state.CURRENT_LANGUAGE) { case "AR": txt = "التوصيل بالمجان" break; case "EN": txt = "Free Shipping" break; case "FR": txt = "Livraison gratuite" break; } return txt; }, async initPaypal(order, paypalOrder, clientId, thanksPath, customerToken = '') { this.isPaypalToCheckoutActive = false; try { let linkPaypal = `https://www.paypal.com/sdk/js?client-id=${clientId}&components=buttons,funding-eligibility`; await this.loadScript(linkPaypal, 'paypalToCheckout'); } catch (err) { sentryLog.captureException(err); console.error("failed to load the PayPal JS SDK script", err); } if (paypal) { try { const vm = this; paypal.getFundingSources().forEach(function (fundingSource) { let button = paypal.Buttons({ style: { height: 55, }, fundingSource: fundingSource, createOrder(data, actions) { return actions.order.create(paypalOrder); }, onCancel: function (data) { // location.href = thanksPath; vm.isPaypalToCheckoutActive = false; }, onApprove(data, actions) { try { return actions.order.capture().then(function (details) { StoreinoApp.$store.customUpdate('orders', { orderId: order.orderId }, { payment: { isPaid: true, method: 'PAYPAL CHECKOUT' } }, { 'x-auth-token': customerToken }); location.href = thanksPath; }); } catch (err) { sentryLog.captureException(err); console.log({ err }); } } }); if (button.isEligible() && fundingSource != "paypal") { button.render('#paypal_credit_cart'); vm.isPaypalToCheckoutActive = true; } }); } catch (err) { sentryLog.captureException(err); console.error("failed to render the PayPal Buttons", err); vm.isPaypalToCheckoutActive = false; } } }, async next() { console.log("next____1"); if (this.sending) return; this.errors = {}; this.sending = true; console.log("next____2"); if (this.showCaptcha) { const token = await grecaptcha.getResponse(); if (token) { this.customer.token = token; this.showCaptcha = false; } else { return this.showCaptcha = true; } } console.log("next____3"); if (this.settings.checkout_defaults.is_min_cost && typeof this.settings.checkout_defaults.min_cost === 'object' && this.settings.checkout_defaults.min_cost[this.store.state.currency.code] && this.locals.subtotal < this.settings.checkout_defaults.min_cost[this.store.state.currency.code].value) { this.errors.min_cost = true; this.sending = false; return; } console.log("next____4"); if (this.settings.checkout_required_fields.show_fullname) this.fillName(this.customer); try { // cData => customer data let cData = JSON.parse(JSON.stringify(this.customer)); if (this.locals.create_account) cData.isRegistred = true; cData.address.firstname = this.customer.firstname; cData.address.lastname = this.customer.lastname; // dialCode if (this.customer.phone) cData.address.phone = this.customer.phone; delete cData.fullname; const sourceCS = localStorage.getItem('CSource'); cData.source = sourceCS ? sourceCS : '' if (this.settings.checkout_required_fields.show_localisation && Object.keys(this.localization.position).length > 0) cData.address.location = this.localization.position let valid = this.isValid('customer', cData); if (!valid) { this.sending = false; return; } this.normalize(cData); // cResponse => customer response if (this.isAffiliate) { cData.forAffiliate = true // this for affiliate product to hide costomer info on user dashboar } console.log("next____5"); // let action = 'create' ; let customerToken = this.tools.cookieToObject(document.cookie)['CUSTOMER']; console.log("customerToken",customerToken); if (this.order.customer._id || customerToken) { if(customerToken){ let customerDecoded = this.tools.tokenDecode(customerToken) this.order.customer = customerDecoded.customer console.log("customerDecoded",customerDecoded); } action = 'update' console.log({action}); cData.lastOrder = Date.now() console.log("cData.lastOrder",cData.lastOrder); cData.toDayOrders += 1 // cData = { // $set: cData, // Update the fields specified in updateData // $inc: { toDayOrders: 1 } // Increment the todayOrders field by 1 // } console.log("cData",cData); }else { action = 'create' console.log("else___"); } console.log("next____6"); const query = this.order.customer._id ? { _id: this.order.customer._id } : {}; const cResponse = await StoreinoApp.$store[action]('customers', query, cData); if (action == 'create') { this.order.customer = cResponse.customer; this.ctk = cResponse.tokenCustomer; document.cookie = `CUSTOMER=${cResponse.tokenCustomer}; path=/`; console.log("next____7"); try { let fbparams = {}; console.log("fb_start"); if (window && window._fbpx) { _fbpx('CompleteRegistration', { content_name: document.title, status: true, value: this.locals.subtotal, currency: this.store.state.currency, }, fbparams); } } catch (err) { console.log({fb_catch: err }); sentryLog.captureException(err); } } else { this.order.customer = cResponse; } console.log("next____8"); // oData => order data const oData = JSON.parse(JSON.stringify(this.order)); if (this.locals.method) { oData.method = { _id: this.locals.method._id, name: this.locals.method.name }; } if (this.locals.shipper && this.locals.shipper._id) { oData.shipping.zone = this.locals.shipper.zone; oData.shipping.shipper = { _id: this.locals.shipper._id, name: this.locals.shipper.name }; } if (this.locals.discount && this.locals.discount._id) oData.discount = { _id: this.locals.discount._id, code: this.locals.discount.code }; if (!this.locals.ship_to_different_address) { oData.shipping.address = cData.address; } if (this.settings.checkout_required_fields.show_fullname) this.fillName(oData.shipping.address); oData.shipping.address.fullname = undefined; console.log("next____9"); // add attachments if (this.imagesToUpload.length > 0) { await this.uploadAll() oData['attachments'] = this.attachments } if (this.subSeller) oData['sellerId'] = this.subSeller // Fill details oData.details = []; for (const item of this.store.state.cart) { const detail = { product: { _id: item._id }, quantity: item.quantity }; if (item.variant && item.variant._id) detail.product.variant = { _id: item.variant._id }; if (item.upsell && item.upsell._id) detail.upsell = { _id: item.upsell._id }; oData.details.push(detail); } valid = this.isValid('order', oData); if (!valid) { this.sending = false; return; } this.normalize(oData); console.log("next____10"); // oResponse => order response const oResponse = await StoreinoApp.$store.create('orders', { cur: this.store.state.currency.code, lang: this.store.state.language.code }, oData); const order = oResponse.result; 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 } })); let pixel = this.tools.getPixel(order); let thanksPath = `${location.origin}/thanks/?method=${order.method.name}&code=${order.orderId}&pixel=${pixel}`; let codeSnap = location.href.split("&").filter(e => e.includes('ScCid'))[0] if (codeSnap) { thanksPath += `&${codeSnap}` } console.log("next____11"); this.thanksPath = thanksPath; if (oResponse.paymentResponse.approveLink) { if (order.method.name != 'Hyperpay') location.href = oResponse.paymentResponse.approveLink; else location.href = `${oResponse.paymentResponse.approveLink}&redirect=${thanksPath}`; return; } if (oResponse.paymentResponse.clientId && oResponse.paymentResponse.paypalOrder) { this.initPaypal(oResponse.result, oResponse.paymentResponse.paypalOrder, oResponse.paymentResponse.clientId, thanksPath, this.ctk); this.sending = false; return; } console.log("next____12"); if (this.settings.checkout_steps.show_upsells_after_checkout) { this.sending = false; location.href = `${location.origin}/checkout/thanks/?method=${order.method.name}&code=${order.orderId}&pixel=${pixel}`; return; } location.href = thanksPath; return; } catch (err) { console.log({error___: err }); this.sending = false; if (err.response && err.response.data === 'solve_captcha') { this.showCaptcha = true; return; } if (err.response && err.response.data === "customer_blocked") { switch (this.store.state.language.code) { case "AR": alert("لقد تم حظرك") break; case "EN": alert("You are blocked") break; case "FR": alert("Tu es bloqué") break; } return; } console.log("next____error"); const error = err.response ? JSON.stringify(err.response.data) : err.message; let key1 = null; for (const key in this.settings.checkout_error_messages) { if (error.indexOf(key) > -1) { key1 = key; this.errors[key] = true; } } console.log("next____error2",this.errors); console.log(this.settings.checkout_error_messages); console.log(this.settings.checkout_error_messages[key1],key1); if (key1) alert(this.settings.checkout_error_messages[key1]); else alert(err.response); sentryLog.captureException(err); return; } }, removeImagesUpload(key) { this.imagesToUpload.splice(key, 1); }, async getCountriesInfo() { if (window.$nuxt && window.$nuxt.$store && window.$nuxt.$store.state.settings) { if (this.settings.checkout_required_fields.autoDetectCountry && window.$nuxt.$store.state.IP) { const baseUrl = window.$nuxt.$store.state.settings.store.subdomain.includes('.world') ? 'https://api-stores.storeino.world' : 'https://api-stores.storeino.com' const contryByIp = await window.$nuxt.$store.$http.get(`https://api-views.storeino.com/api/geoLite/get?ip=${window.$nuxt.$store.state.IP}`); const data4 = await window.$nuxt.$store.$http.get(`${baseUrl}/api/countries/search`, { params: { only: ['name', 'dialCode', 'code'], code: contryByIp.data.geoplugin_countryCode } }); this.preferredCountries = data4.status === 200 ? data4.data.results : []; this.customer.address.country = this.preferredCountries[0] await this.getLocations("country", this.preferredCountries[0]._id); } } }, async applyCoupon() { if (!this.locals.discount.code) return; try { const response = await StoreinoApp.$store.get('discounts', { code: this.locals.discount.code }); if (response.target === 'SELECTED' && response.products.length > 0) { if (typeof response.products[0] === 'string' && !response.products.includes(this.details.product_id)) { return this.$set(this.errors, 'coupon', true); } if (typeof response.products[0] === 'object') { let prod = response.products.filter(prod => prod._id === this.details.product_id) if (prod.length === 0) { return this.$set(this.errors, 'coupon', true); } else if (prod[0].by_quantity && prod[0].quantity >= this.items[0].quantity.value) { return; } } } this.locals.discount._id = response._id; this.locals.discount.type = response.type; this.locals.discount.value = response.value; this.calculate("fromCoupon"); } catch (err) { sentryLog.captureException(err); console.log({ err }); this.$set(this.errors, 'coupon', true); } }, async getMethods() { try { console.log('getMethods____1'); const { results } = await StoreinoApp.$store.search('methods', {}); console.log('getMethods____1,5',results); this.locals.methods = results; console.log('getMethods____1,7',this.locals.methods ); if (this.locals.methods.length > 0) { let index = this.locals.methods.findIndex(({name}) => name === "CashOnDelivery") index > -1 ? index : 0 this.locals.method = this.locals.methods[index]; } console.log('getMethods____2'); } catch (err) { sentryLog.captureException(err); console.log({ 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' && !object.address.country) return; if (type == "province") params.country = object.address.country._id; try { const { results } = await StoreinoApp.$store.search('locations', params); if (type == "country") { this[base].provinces = results; this[base].cities = []; if (this.settings.checkout_defaults.isCustomize_zone && this.settings.checkout_defaults.customize_zone && this.settings.checkout_defaults.customize_zone.provinces) { if (this.settings.checkout_defaults.customize_zone.provinces.length > 0) { this[base].provinces = results.filter(province => this.settings.checkout_defaults.customize_zone.provinces.includes(province._id)) if (this[base].provinces.length < 1) { this[base].provinces = results } } } if (this.settings.checkout_defaults.province && !this[base].provinces.find(e => e._id === this.settings.checkout_defaults.province._id)) { this.settings.checkout_defaults.province = { _id: '5feb408a2ef4130539efb9e0', name: 'DISABLED' }; } if (this.settings.checkout_defaults.has_province && this.settings.checkout_defaults.province) { object.address.province = this.settings.checkout_defaults.province; await this.getLocations("province", this.settings.checkout_defaults.province._id, isShipping); } else if (this[base].provinces.length > 0) { // object.address.province = this[base].provinces[0]; await this.getLocations("province", this[base].provinces[0]._id, isShipping); } } else if (type == "province") { this[base].cities = results; if (this.settings.checkout_defaults.isCustomize_zone && this.settings.checkout_defaults.customize_zone && this.settings.checkout_defaults.customize_zone.cities) { if (this.settings.checkout_defaults.customize_zone.cities.length > 0) { this[base].cities = results.filter(city => this.settings.checkout_defaults.customize_zone.cities.includes(city._id)) if (this[base].cities.length < 1) { this[base].cities = results } } } if (this.settings.checkout_defaults.city && !this[base].cities.find(e => e._id === this.settings.checkout_defaults.city._id)) { this.settings.checkout_defaults.city = { _id: '5feb408a2ef4130539efb9e0', name: 'DISABLED' }; } if (this.settings.checkout_defaults.has_city && this.settings.checkout_defaults.city) { object.address.city = this.settings.checkout_defaults.city; } else if (this[base].cities.length > 0 && !this.settings.checkout_required_fields.typing_city_manually) { // object.address.city = this[base].cities[0]; } } else { this[base].countries = results; this[base].provinces = []; this[base].cities = []; if (this.settings.checkout_defaults.isCustomize_zone && this.settings.checkout_defaults.customize_zone && this.settings.checkout_defaults.customize_zone.countries) { if (this.settings.checkout_defaults.customize_zone.countries.length > 0) { this[base].countries = results.filter(country => this.settings.checkout_defaults.customize_zone.countries.includes(country._id)) console.log("countries=====>2", this[base].countries.filter(country => this.settings.checkout_defaults.customize_zone.countries.includes(country._id))) console.log("countries=====>", this[base].countries) } } console.log('_____isCustomize_zone'); if (this.settings.checkout_defaults.has_country && this.settings.checkout_defaults.country) { object.address.country = this.settings.checkout_defaults.country; await this.getLocations("country", this.settings.checkout_defaults.country._id, isShipping); } else if (this[base].countries.length > 0) { // object.address.country = this[base].countries[0]; // await this.getLocations("country", object.address.country._id, isShipping); } console.log('_____isCustomize_zone_2'); } } catch (err) { sentryLog.captureException(err); console.log({ err }); location.reload() } }, async getZones() { this.loading.zones = true; this.errors.shipping = false; clearTimeout(window.zoneTimeout); window.zoneTimeout = setTimeout(async () => { this.getZonesDebounced(); }, 1000); }, async getZonesDebounced() { this.locals.shippers = []; try { const { results } = await StoreinoApp.$store.search('zones', { country: this.order.shipping.address.country && this.order.shipping.address.country._id, province: this.order.shipping.address.province && this.order.shipping.address.province._id, city: this.order.shipping.address.city && this.order.shipping.address.city._id }); const zones = results; for (const zone of zones) { for (const shipper of zone.shippers) { const index = this.locals.shippers.findIndex(e => e._id === shipper._id); if (index > -1) { if (this.locals.shippers[index].price > shipper.price) { this.locals.shippers[index].price = shipper.price; this.locals.shippers[index].zone = { _id: zone._id, name: zone.name }; } } else { shipper.zone = { _id: zone._id, name: zone.name }; this.locals.shippers.push(shipper); } } } if (this.locals.shippers.length > 0 && !this.locals.shipper) { this.locals.shipper = this.locals.shippers[0]; } else if (this.locals.shippers.length > 0 && this.locals.shippers.find(e => e._id === this.locals.shipper._id)) { this.locals.shipper = this.locals.shippers.find(e => e._id === this.locals.shipper._id); } else if (this.locals.shippers.length > 0) { this.locals.shipper = this.locals.shippers[0]; } this.calculate("fromZone"); } catch (err) { sentryLog.captureException(err); console.log({ err }); } if (this.locals.shippers.length == 0) { this.locals.shipper = null; this.locals.zone = null; } this.loading.zones = false; }, selectd(product) { let index = this.selectedProduct.findIndex(p => p._id === product._id) if (index > -1) return; this.selectedProduct.push(product) let cartItem = {}; this.store.state.cart.push({ "_id": product._id, "quantity": product.quantity.default, "price": product.price.salePrice, "parents": [] }) console.log('cart__1', this.store.state.cart); cartItem._id = product._id; cartItem.slug = product.slug; cartItem.name = product.name; cartItem.price = product.price.salePrice; cartItem.quantity = { ...product.quantity, value: product.quantity.default } cartItem.quantity.value = product.quantity.default; cartItem.image = product.images.length > 0 ? product.images[0].src : ''; if (product.variant && product.variant._id) { cartItem.variant = product.variants.find(variant => variant._id === product.variant._id); cartItem.price = cartItem.variant.price.salePrice; if (cartItem.variant.quantity.pack && cartItem.variant.quantity.pack > 0) { cartItem.quantity.value = cartItem.variant.quantity.pack; } } 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 = cartItem.price - discount; } cartItem.total = cartItem.price * cartItem.quantity.value; this.items.push(cartItem) console.log('items___&', this.items); this.isOpen = !this.isOpen }, 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(arrColl) { const productsResult = await StoreinoApp.$store.search('products', { "collections.slug-in[]": arrColl, "status": "PUBLISH", "outStock.disabled": true, limit: 1000 }, true ); this.relatedProductds = productsResult.results }, pickCollection(arrColl) { this.pickedColle = arrColl this.pickCollectionReq(this.pickedColle) }, async initCart(cart) { this.collectionsRelated = []; this.store.state.cart = []; this.store.state.cart = cart; // const ids = cart.map(e => e._id); this.loading.cart = true; // if (ids.length > 0) { try { const item = cart[0] || {}; let product = window.products.find(p => p._id === item._id); if (!product) { const response = await StoreinoApp.$store.search('products', { '_id': ids[0], status: 'all' }); this.products = response.results; let windowProduct = [...window.products, ...this.products] window.products = Array.from(new Set(windowProduct.map(JSON.stringify))).map(JSON.parse) if (this.settings.checkout_required_fields.show_variant_on_checkout) { // Variants this.locals.variants = this.products?.[0]?.variants ?? []; } } product = window.products.find(p => p._id === item._id); if (product.user && product.user.whoIs && product.user.whoIs.toLowerCase() === 'subseller') this.subSeller = product.user._id this.isAffiliate = product.source == 'affiliate' && product.affiliateId; if (this.settings.checkout_required_fields.show_related_upsell) { if (product && product.collections.length != 0) { product.collections.forEach(col => { if (!this.collectionsRelated.includes(col.slug)) this.collectionsRelated.push(col.slug); }); this.pickCollectionReq(this.collectionsRelated) } } const cartItem = {}; this.packPrice = false; cartItem._id = product._id; cartItem.slug = product.slug; cartItem.name = product.name; cartItem.price = product.price.salePrice; cartItem.quantity = product.quantity; cartItem.quantity.value = item.quantity || 1; cartItem.image = product.images.length > 0 ? product.images[0].src : ''; if (item.variant && item.variant._id) { cartItem.variant = product.variants.find(variant => variant._id === item.variant._id); cartItem.price = cartItem.variant.price.salePrice; if (cartItem.variant.quantity.pack && 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; } } if (item.upsell) { cartItem.upsell = item.upsell; const discount = cartItem.upsell.type == 'percentage' ? cartItem.price * (cartItem.upsell.value / 100) : cartItem.upsell.value cartItem.originalPrice = cartItem.price; cartItem.price = cartItem.price - discount; } // if product have pack condition total price replace by price of pack if (this.packPrice) { cartItem.total = cartItem.price } else { cartItem.total = cartItem.price * cartItem.quantity.value; } this.items = [cartItem]; if (this.settings.checkout_required_fields.auto_coupon_by_quantity && this.settings.checkout_headlines.auto_code_coupon) { this.locals.discount.code = this.settings.checkout_headlines.auto_code_coupon const response = await StoreinoApp.$store.get('discounts', { code: this.locals.discount.code }); if (typeof response.products[0] === 'object' && response.target === 'SELECTED') { let prod = response.products.filter(prod => prod._id === this.items[0]._id) if (prod.length > 0 && prod[0].by_quantity && prod[0].quantity <= cartItem.quantity.value) { this.locals.discount._id = response._id; this.locals.discount.type = response.type; this.locals.discount.value = response.value; } else if (prod.length > 0 && !prod[0].by_quantity) { this.locals.discount._id = response._id; this.locals.discount.type = response.type; this.locals.discount.value = response.value; } else { this.locals.discount._id = ""; this.locals.discount.type = ""; this.locals.discount.value = 0; this.locals.discount.price = 0 } } } this.calculate("fromInitCart"); } catch (err) { sentryLog.captureException(err); console.log('error check', err); console.log({ err }); } } // this.loading.cart = false; }, async calculate(from) { if (from === 'fromInitCart') { this.fromInitCart = true; } let shipping = 0; if (this.packPrice) { this.locals.subtotal = this.items.reduce((total, item) => total + item.total, 0); } else { this.locals.subtotal = this.items.reduce((total, item) => total + (item.price * item.quantity.value), 0); } if (this.settings.checkout_defaults.has_shipping) { if (typeof this.settings.checkout_defaults.shipping === 'object') { if (this.settings.checkout_defaults.shipping[this.store.state.currency.code]) { shipping = Number(this.settings.checkout_defaults.shipping[this.store.state.currency.code].value); } else { shipping = 0; } } else { shipping = Number(this.settings.checkout_defaults.shipping); } this.locals.shipper = null; } else shipping = 0; if (this.locals.shipper) shipping = this.locals.shipper.price; if (this.settings.checkout_required_fields.isAuto_coupon_by_total && this.settings.checkout_defaults.auto_coupon_by_total[this.store.state.currency.code]) { if (this.locals.subtotal >= Number(this.settings.checkout_defaults.auto_coupon_by_total[this.store.state.currency.code].value)) { this.locals.discount.code = this.settings.checkout_headlines.auto_code_coupon try { 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) { sentryLog.captureException(err); this.$set(this.errors, 'coupon', true); } } else if (this.locals.discount._id) { this.locals.discount = { type: 'percentage', value: 0, price: 0 } } } if (this.settings.checkout_defaults.has_min_price_freeshipping && this.locals.subtotal > this.settings.checkout_defaults.min_price_freeshipping) { shipping = 0; } if (this.settings.checkout_required_fields.applyTva) { 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); } } if (this.locals.discount.value != 0) { 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; } } if (this.locals.discount.type == 'free_shipping') { shipping = 0; } this.locals.shipping = shipping; this.locals.total = this.locals.subtotal + this.locals.shipping + this.locals.tva.price - this.locals.discount.price; if (this.items.length === 0 && this.locals.subtotal === 0 && this.fromInitCart) { location.reload(); } }, fillName(obj = this.customer) { if (obj.fullname) { 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; } } }, isValid(type, data) { this.errors = {}; if (type == 'customer') { // "firstname":"Invalid first name", if (data.firstname.length < 2) { this.errors.firstname = true; this.errors.fullname = true; } // "lastname":"Invalid last name", if (data.lastname.length < 2) { this.errors.lastname = true; this.errors.fullname = true; } // "email":"Invalid email", if ((this.settings.checkout_required_fields.show_email && data.email) || this.settings.checkout_required_fields.email) { if (!this.tools.validateEmail(data.email)) this.errors.email = true; } // "phone":"Invalid phone", if ((this.settings.checkout_required_fields.show_phone && data.phone) || this.settings.checkout_required_fields.phone) { if (this.tools.validatePhone(data.phone, this.settings.checkout_defaults.phone_min, this.settings.checkout_defaults.phone_max)) { this.errors.phone = true; } } // "password":"Invalid password", if ((this.settings.checkout_required_fields.show_password && this.locals.create_account) || this.settings.checkout_required_fields.password) { if (data.password.length < 4) this.errors.password = true; } // "address1":"Invalid address1", if ((this.settings.checkout_required_fields.show_address1 && data.address.address1) || this.settings.checkout_required_fields.address1) { if (data.address.address1.length < 4) this.errors.address1 = true; } // "address2":"Invalid address2", if ((this.settings.checkout_required_fields.show_address2 && data.address.address2) || this.settings.checkout_required_fields.address2) { if (data.address.address2.length < 4) this.errors.address2 = true; } // "countries":"Invalid country", if (this.settings.checkout_required_fields.show_countries && this.settings.checkout_required_fields.countries) { if (!(data.address.country && data.address.country._id)) this.errors.countries = true; } // "provinces":"Invalid province", if (this.settings.checkout_required_fields.show_provinces && this.settings.checkout_required_fields.provinces) { if (!(data.address.province && data.address.province._id)) this.errors.provinces = true; } // "cities":"Invalid city", if (this.settings.checkout_required_fields.show_cities && this.settings.checkout_required_fields.cities && !this.settings.checkout_required_fields.typing_city_manually) { if (!(data.address.city && data.address.city._id)) this.errors.cities = true; } if (this.settings.checkout_required_fields.show_cities && this.settings.checkout_required_fields.typing_city_manually) { if (this.settings.checkout_required_fields.cities && !data.address.city) this.errors.cities = true; else if (data.address.city.name.length < 2) this.errors.cities = true; } } else { // "address_firstname":"Invalid first name", if (data.shipping.address.firstname.length < 2) { this.errors.address_firstname = true; this.errors.address_fullname = true; } // "address_lastname":"Invalid last name", if (data.shipping.address.lastname.length < 2) { this.errors.address_lastname = true; this.errors.address_fullname = true; } // "address_phone":"Invalid phone", if ((this.settings.checkout_required_fields.show_phone && data.shipping.address.phone) || this.settings.checkout_required_fields.phone) { if (this.tools.validatePhone(data.shipping.address.phone, this.settings.checkout_defaults.phone_min, this.settings.checkout_defaults.phone_max)) { this.errors.address_phone = true; } } // "address_address1":"Invalid address1", if ((this.settings.checkout_required_fields.show_address1 && data.shipping.address.address1) || this.settings.checkout_required_fields.address1) { if (data.shipping.address.address1.length < 4) this.errors.address_address1 = true; } // "address_address2":"Invalid address2", if ((this.settings.checkout_required_fields.show_address2 && data.shipping.address.address2) || this.settings.checkout_required_fields.address2) { if (data.shipping.address.address2.length < 4) this.errors.address_address2 = true; } } if (Object.keys(this.errors).length > 0) { this.$nextTick(() => { const view = document.querySelector('.ck-error'); if (view) { view.parentNode.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' }); } else window.scrollTo(0, 0); }) return false; } return true; }, normalize(data) { for (const key in data) { if (typeof data[key] === 'object') { if (data[key] === null) { data[key] = undefined; continue; } for (const key2 in data[key]) { if (data[key][key2] === null) { data[key][key2] = undefined; continue; } if (typeof data[key][key2] === 'string') { if (key2 == 'phone') data[key][key2] = data[key][key2].replace(/[^0-9\u0660-\u0669+]/g, ''); data[key][key2] = data[key][key2].trim(); if (data[key][key2] == '') data[key][key2] = undefined; } } } 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() { for (const key in this.settings.checkout_required_fields) { if (!Object.hasOwnProperty.call(this.settings.checkout_required_fields, `show_${key}`) && this.settings.checkout_required_fields[key]) this.settings.checkout_required_fields[`show_${key}`] = this.settings.checkout_required_fields[key]; if (!this.settings.checkout_required_fields[`show_${key}`] && this.settings.checkout_required_fields[key]) this.settings.checkout_required_fields[key] = false; } if (this.settings.checkout_required_fields.show_password && !this.settings.checkout_required_fields.email) { this.settings.checkout_required_fields.show_password = false; this.settings.checkout_required_fields.password = false; } }, abandonmentCart() { if (this.isAffiliate) return; const order = JSON.parse(JSON.stringify(this.order)); order.details = this.store.state.cart.map(item => { return { product: { _id: item._id }, quantity: item.quantity || 1 , variant: item.variant ? item.variant._id : null, } }); order.customer = JSON.parse(JSON.stringify(this.customer)); order.shipping.address = JSON.parse(JSON.stringify(this.customer.address)); this.fillName(order.customer); window.dispatchEvent(new CustomEvent('ORDER_UPDATED', { detail: order })) }, initializeCountry() { this.activeCountry.code = this.findCountry(this.preferredCountries[0].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 highlighted = this.selectedIndex === index; const lastPreferred = index === this.preferredCountries.length - 1; const preferred = !!~this.preferredCountries .map(c => c.code.toUpperCase()) .indexOf(code); return { highlighted, "last-preferred": lastPreferred, preferred }; }, 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; }, // Method to enable programmatic trigger of the dropdown by an element in the DOM manualDropdown() { if (this.disabled) { return; } this.manualTrigger = true; this.open = true; }, clickedOutside() { // If this was caused by a programmatic trigger, allow it, then reset the manualTrigger if (this.manualTrigger) { this.manualTrigger = false; return; } this.open = false; }, keyboardNav(e) { if (e.keyCode === 40) { // down arrow this.open = true; if (this.selectedIndex === null) { this.selectedIndex = 0; } else { this.selectedIndex = Math.min( this.preferredCountries.length - 1, this.selectedIndex + 1 ); } let selEle = this.$refs.list.children[this.selectedIndex]; if ( selEle.offsetTop + selEle.clientHeight > this.$refs.list.scrollTop + this.$refs.list.clientHeight ) this.$refs.list.scrollTop = selEle.offsetTop - this.$refs.list.clientHeight + selEle.clientHeight; } else if (e.keyCode === 38) { // up arrow this.open = true; if (this.selectedIndex === null) { this.selectedIndex = this.preferredCountries.length - 1; } else { this.selectedIndex = Math.max(0, this.selectedIndex - 1); } let selEle = this.$refs.list.children[this.selectedIndex]; if (selEle.offsetTop < this.$refs.list.scrollTop) this.$refs.list.scrollTop = selEle.offsetTop; } else if (e.keyCode === 13) { // enter key if (this.selectedIndex !== null) { this.choose(this.preferredCountries[this.selectedIndex]); } this.open = !this.open; } else { // typing a country's name this.typeToFindInput += e.key; clearTimeout(this.typeToFindTimer); this.typeToFindTimer = setTimeout(() => { this.typeToFindInput = ""; }, 700); // don't include preferred countries so we jump to the right place in the alphabet let typedCountryI = this.preferredCountries .slice(this.preferredCountries.length) .findIndex(c => c.name.toLowerCase().startsWith(this.typeToFindInput) ); if (~typedCountryI) { this.selectedIndex = this.preferredCountries.length + typedCountryI; let selEle = this.$refs.list.children[this.selectedIndex]; if ( selEle.offsetTop < this.$refs.list.scrollTop || selEle.offsetTop + selEle.clientHeight > this.$refs.list.scrollTop + this.$refs.list.clientHeight ) { this.$refs.list.scrollTop = selEle.offsetTop - this.$refs.list.clientHeight / 2; } } } }, reset() { this.selectedIndex = this.preferredCountries .map(c => c.code) .indexOf(this.activeCountry.code.toUpperCase()); this.open = false; } }, });