// import * as Sentry from "@sentry/browser"; // import { Integrations } from "@sentry/tracing"; // // Sentry.init({ // // dsn: "https://8269dd83371d4eaeb7815ff3f9d42983@logs.storeino.com/19", // // integrations: [new Integrations.BrowserTracing()], // // // Set tracesSampleRate to 1.0 to capture 100% // // // of transactions for performance monitoring. // // // We recommend adjusting this value in production // // tracesSampleRate: 1.0, // // }); // import _ from 'lodash' 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.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 } }, 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, errors: {}, show:{ products: false, coupon: false, }, 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 }, total: 0 }, 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, fromInitCart:false, 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 ); } }, // defaultCountry(newVal) { // const defaultCountry = this.findCountry(newVal); // this.choose(defaultCountry); // }, "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(); 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(); 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; } } }, // computed: { // filteredCountries() { // // List countries after filtered // if (this.onlyCountries.length) { // return this.getCountries(this.onlyCountries); // } // return preferredCountries; // }, // // sortedCountries() { // // // Sort the list countries: from preferred countries to all countries // // const preferredCountries = this.getCountries( // // this.preferredCountries // // ).map(country => ({ ...country, preferred: true })); // // return [...preferredCountries, ...this.filteredCountries]; // // } // }, async mounted(){ if (!window.products) window.products = [] this.products = window.products console.log("express checkout loaded"); window.removeEventListener('CURRENT_PRODUCT', this.currentProduct, true); this.settings = await this.getSettings(); this.store.state.currency = this.settings.store_currencies.find(currency => currency.default) || this.store.state.currency; this.normalizeSettings(); 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 } // 1 this.getCountriesInfo() await this.getMethods(); await this.getLocations('world', undefined); if(this.settings.checkout_required_fields.show_ship_to_different_address){ this.shipLocations = JSON.parse(JSON.stringify(this.locations)); } this.checkMethods() // this.initializeCountry(); // this.$emit("onSelect", this.activeCountry); // console.log(window.getEventListeners(window)); // window.removeEventListener('CURRENT_PRODUCT', this.currentProduct, true); // if(window.getEventListeners(window).CURRENT_PRODUCT && window.getEventListeners(window).CURRENT_PRODUCT.length < 1) { // console.log("I'm here _____"); // } window.addEventListener("CURRENT_PRODUCT", this.currentProduct, true); window.dispatchEvent(new CustomEvent("APP_LOADER")); if(this.settings.checkout_required_fields.show_captcha){ this.loadScript('https://www.google.com/recaptcha/api.js', 'recaptcha'); } // if(this.settings.checkout_required_fields.show_localisation){ // this.loadScript('https://unpkg.com/leaflet/dist/leaflet.js', 'leaflet'); // this.loadScript('https://unpkg.com/vue2-leaflet', 'vue2-leaflet'); // this.loadStyle('https://unpkg.com/leaflet/dist/leaflet.css','leafletcss'); // } }, filters:{ method(value, lang){ const translates = { AR: { Hyperpay:'Hyperpay', CashOnDelivery: 'الدفع عند الاستلام', PayPal: 'الدفع عبر بايبال', Stripe: 'الدفع ببطاقة الائتمان',"Paypal-Credit-Card": 'الدفع ببطاقة الائتمان','cmi': 'الدفع ببطاقة الائتمان مغربية',paytech: 'Paytech' }, EN: { Hyperpay:'Hyperpay', CashOnDelivery: 'Cash on delivery', PayPal: 'PayPal', Stripe: 'Credit Card',"Paypal-Credit-Card": 'Credit Card',cmi: 'Credit Card Moroccan',paytech: 'Paytech' }, FR: { Hyperpay:'Hyperpay', CashOnDelivery: 'Paiement à la livraison', PayPal: 'PayPal', Stripe: 'Carte bancaire',"Paypal-Credit-Card": 'Carte bancaire',cmi: 'Carte bancaire Marocain',paytech: 'Paytech' }, } return translates[lang][value]; } }, methods: { 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(); }); }, tickLocal(position){ this.localization.position = {lat: position.coords.latitude,lng : position.coords.longitude} this.localization.markerPos = [ position.coords.latitude,position.coords.longitude] }, openMap(){ window.navigator.geolocation.getCurrentPosition(this.tickLocal); this.displayMap = true; }, onMapClick(value) { this.localization.position = value.latlng; this.localization.markerPos = [value.latlng.lat,value.latlng.lng]; }, updateMarker(e) { this.localization.markerPos = [e.target._latlng.lat,e.target._latlng.lng]; this.localization.position = e.target._latlng; }, sortedObject(unordered) { return Object.keys(unordered).sort().reduce( (obj, key) => { obj[key] = unordered[key]; return obj; }, {}); }, async currentProduct(e){ 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; 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].is_active); const methods = this.locals.methods.filter(meth => !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]; } } } }, 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; }, 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 (error) { console.error("failed to load the PayPal JS SDK script", error); } if (paypal) { try { const vm = this; paypal.getFundingSources().forEach(function(fundingSource) { let button = paypal.Buttons({ style: { height: 55, }, fundingSource: fundingSource, createOrder(data, actions) { console.log("----- createOrder"); return actions.order.create(paypalOrder); }, onCancel: function (data) { console.log("----- onCancel"); // location.href = thanksPath; vm.isPaypalToCheckoutActive = false; }, onApprove(data, actions){ console.log("----- onApprove"); try { return actions.order.capture().then(function(details) { console.log('Transaction completed by ' + details.payer.name.given_name); StoreinoApp.$store.customUpdate('orders',{ orderId: order.orderId },{ payment: { isPaid: true, method: 'PAYPAL CHECKOUT' } },{ 'x-auth-token': customerToken }); location.href = thanksPath; }); } catch (error) { console.log(error); } } }); // console.log(fundingSource); if (button.isEligible() && fundingSource != "paypal") { button.render('#paypal_credit_cart'); vm.isPaypalToCheckoutActive = true; } }); } catch (error) { console.error("failed to render the PayPal Buttons", error); vm.isPaypalToCheckoutActive = false; } } }, async next(){ if(this.sending) return; this.errors = {}; this.sending = true; if(this.showCaptcha){ const token = await grecaptcha.getResponse(); if(token){ this.customer.token = token; this.showCaptcha = false; }else{ return this.showCaptcha = true; } } 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; } if(this.settings.checkout_required_fields.show_fullname) this.fillName(this.customer); try{ // cData => customer data const 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; // const dialCode = this.infoContry ? this.infoContry :'' if(this.customer.phone) cData.address.phone = this.customer.phone; delete cData.fullname; const action = this.order.customer._id ? 'update' : 'create'; const query = this.order.customer._id ? { _id: this.order.customer._id } : { }; 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 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=/`; try { let fbparams = {}; // if (this.dataCustomer.Customer.firstname) fbparams['user_firstname'] = this.dataCustomer.Customer.firstname; // if (this.dataCustomer.Customer.lastname) fbparams['user_lastname'] = this.dataCustomer.Customer.lastname; // if (this.dataCustomer.Customer.phone) fbparams['user_phone'] = this.dataCustomer.Customer.phone; // if (this.dataCustomer.Customer.email) fbparams['user_email'] = this.dataCustomer.Customer.email; _fbpx('CompleteRegistration',{ content_name: document.title, status: true, value: this.locals.subtotal, currency: this.store.state.currency, },fbparams); } catch (error) {} }else{ this.order.customer = cResponse; } // 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; // 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); // 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}/checkout/thanks/?method=${order.method.name}&code=${order.orderId}&pixel=${pixel}`; 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; } location.href = thanksPath; return; }catch(e){ console.log({e}); this.sending = false; if(e.response && e.response.data == 'solve_captcha'){ this.showCaptcha = true; return; } const error = e.response ? JSON.stringify(e.response.data) : e.message; let key1 = null; for (const key in this.settings.checkout_error_messages) { if(error.indexOf(key) > -1){ key1 = key; this.errors[key] = true; } } if(key1) alert(this.settings.checkout_error_messages[key1]); else alert(e.response); return; } }, async getCountriesInfo(){ if(window.$nuxt && window.$nuxt.$store && window.$nuxt.$store.state.settings){ if(this.preferredCountries.length > 0) return; const baseUrl = window.$nuxt.$store.state.settings.store.subdomain.includes('.world') ? 'https://api-stores.storeino.world' : 'https://api-stores.storeino.com' const data4 = await window.$nuxt.$store.$axios.get(`${baseUrl}/api/countries/search`, { params:{only: ['name','dialCode','code'], limit: 1000 }}); this.preferredCountries = data4.status === 200 ? data4.data.results : []; if( this.settings.checkout_required_fields.autoDetectCountry && window.$nuxt.$store.state.IP ){ const contryByIp = await window.$nuxt.$store.$axios.get(`https://ipapi.co/${window.$nuxt.$store.state.IP}/json/`); let selected = this.preferredCountries.filter(ct => ct.code.toLowerCase() === contryByIp.data.country_code.toLowerCase()) let customerContry = this.locations.countries.filter(cnt => cnt.name.toLowerCase() === selected[0].name.toLowerCase()) this.customer.address.country = customerContry[0] console.log("auto detect country",customerContry[0]); } // this.$store.state.form.user.country = this.$store.state.countries.find(country => country.code == this.$store.state.form.user.country.code); // this.$store.state.form.user.phone.code = this.$store.state.form.user.country.dialCode; } }, async applyCoupon(){ if(!this.locals.discount.code) return; 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; this.calculate("fromCoupon"); }catch(e){ console.log(e); this.$set(this.errors,'coupon', true); } }, async getMethods(){ try { const { results } = await StoreinoApp.$store.search('methods',{}); this.locals.methods = results; if(this.locals.methods.length > 0){ this.locals.method = this.locals.methods[0]; } } catch (error) { console.log(error); } }, 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.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.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.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({object}); } catch (error) { console.log(error); } }, 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._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 (error) { console.log(error); } if(this.locals.shippers.length == 0){ this.locals.shipper = null; this.locals.zone = null; } this.loading.zones = false; }, async initCart(cart){ this.store.state.cart = []; this.store.state.cart = cart; // this.items = []; 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] }); this.products = response.results; let windowProduct = [...window.products, ...this.products] window.products = Array.from(new Set(windowProduct.map(JSON.stringify))).map(JSON.parse) // window.products = [...window.products, ...this.products] } product = window.products.find(p => p._id === item._id); const cartItem = {}; 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(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; } cartItem.total = cartItem.price * cartItem.quantity.value; this.items = [cartItem]; this.calculate("fromInitCart"); }catch(e){ console.log("unit cart errour",e); } } this.loading.cart = false; }, calculate(from){ if (from === 'fromInitCart') { this.fromInitCart = true; } let shipping = 0; const subTotal = this.items.reduce((total, item) => total + (item.price * item.quantity.value), 0); this.locals.subtotal = subTotal 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_defaults.has_min_price_freeshipping && this.locals.subtotal > this.settings.checkout_defaults.min_price_freeshipping){ shipping = 0; } 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 if(this.locals.discount.type == 'free_shipping'){ this.locals.discount.price = shipping; }else{ this.locals.discount.price = this.locals.discount.value; } } this.locals.shipping = shipping; this.locals.total = this.locals.subtotal + this.locals.shipping - this.locals.discount.price; if(this.items.length === 0 && 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){ console.log({ errors: this.errors }); 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(){ 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 } }); 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() { /** * 1. Use default country if passed from parent */ // if (this.defaultCountry) { // const defaultCountry = this.findCountry(this.defaultCountry); // if (defaultCountry) { // this.activeCountry = defaultCountry; // return; // } // } /** * 2. Use the first country from preferred list (if available) or all countries list */ this.activeCountry.code = this.findCountry(this.preferredCountries[0].code.toLowerCase()) || this.preferredCountries[0].code.toLowerCase(); /** * 3. Check if fetching country based on user's IP is allowed, set it as the default country */ // if (!this.disabledFetchingCountry) { // getCountry().then(res => { // this.choose(this.findCountry(res) || this.activeCountry); // }); // } }, /** * Get the list of countries from the list of code code */ 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; } }, });