From 03444d76cffb55002c97f1ce8629cd703a3b7b8e Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <gustavoluigisouza@gmail.com>
Date: Sun, 4 Sep 2022 21:41:13 +0200
Subject: [PATCH] refactor scripts

---
 assets/js/checkout.js            |  80 +++++++++++++
 assets/js/data.js                |   4 +
 assets/js/methods.js             | 148 +++++++++++++++++++++++
 assets/js/script.js              | 127 ++++++++++++++++++++
 content/master.blade.php         | 195 +------------------------------
 content/pages/checkout.blade.php |  85 +-------------
 6 files changed, 363 insertions(+), 276 deletions(-)
 create mode 100644 assets/js/checkout.js
 create mode 100644 assets/js/data.js
 create mode 100644 assets/js/methods.js
 create mode 100644 assets/js/script.js

diff --git a/assets/js/checkout.js b/assets/js/checkout.js
new file mode 100644
index 0000000..216209e
--- /dev/null
+++ b/assets/js/checkout.js
@@ -0,0 +1,80 @@
+function clearAddressFields() {
+    $('#address-components').hide();
+    $('#street-number').val('');
+    $('#street-number').prop('disabled', true);
+    $('#route').val('');
+    $('#locality').val('');
+    $('#postal-code').val('');
+}
+function getAddressFiedlValue(addressComponents, $field){
+    let field = addressComponents.find(obj => obj.types.indexOf($field) > -1);
+    return field != undefined?field.long_name:'';
+}
+function initialize() {
+    let input = document.getElementById('field_location');
+    let options = {
+        types: ['address'],
+        componentRestrictions: { country: "de" }
+    };
+    var autocomplete = new google.maps.places.Autocomplete(input, options);
+    autocomplete.addListener("place_changed", () => {
+        clearAddressFields();
+        const place = autocomplete.getPlace();
+        if (!place.geometry) return;
+        var componentMap = {
+            country: 'country',
+            locality: 'locality',
+            administrative_area_level_1 : 'administrative_area_level_1',
+            administrative_area_level_2 : 'administrative_area_level_2',
+            postal_code: 'postal_code',
+            route: 'route',
+            street_number : 'street_number',
+        };
+        $('#address-components').show();
+        let addressComponents = autocomplete.getPlace().address_components;
+        let streetNumber = getAddressFiedlValue(addressComponents, 'street_number');
+        if(streetNumber == '') {
+            $('#street-number').prop('disabled', false);
+            $('#street-number').focus();
+        }
+        else {
+            $('#street-number').prop('disabled', true);
+            $('#street-number').val(streetNumber);
+        }
+        let country = getAddressFiedlValue(addressComponents, 'country');
+        let route = getAddressFiedlValue(addressComponents, 'route');
+        $('#route').val(route);
+        let locality = getAddressFiedlValue(addressComponents, 'locality');
+        $('#locality').val(locality);
+        let postalCode = getAddressFiedlValue(addressComponents, 'postal_code');
+        $('#postal-code').val(postalCode);
+        $('#street-number').blur(function(){
+            if($('#street-number').val() == '') $('#street-number').focus();
+            else{
+                $('#street-number').prop('disabled', true);
+                $('#field_location').val(route+' '+$('#street-number').val()+', '+locality+', '+country);
+            }
+        });
+    });
+}
+$(window).on('load', google.maps.event, initialize);
+let input = document.querySelector("#ctelefon");
+let iti = window.intlTelInput(input, {
+    initialCountry: "de",
+    preferredCountries: ["de"],
+    geoIpLookup: function(callback) {
+        $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
+            let countryCode = (resp && resp.country)?resp.country:"us";
+            callback(countryCode);
+        });
+    },
+    utilsScript: "{{storage('assets/libs/intl-tel-input/js/utils.min.js')}}",
+});
+// iti.getNumber();
+function updateProducts(){}
+$(window).on('load', function(){
+    $('#anfrage').submit(function(){
+        objProducts = [];
+        localStorage.setItem("products", JSON.stringify(objProducts));
+    });
+});
\ No newline at end of file
diff --git a/assets/js/data.js b/assets/js/data.js
new file mode 100644
index 0000000..40164a7
--- /dev/null
+++ b/assets/js/data.js
@@ -0,0 +1,4 @@
+let objProducts = [];
+let totalPrice = 0;
+let cartLink = null;
+let shareData = [];
\ No newline at end of file
diff --git a/assets/js/methods.js b/assets/js/methods.js
new file mode 100644
index 0000000..167f5db
--- /dev/null
+++ b/assets/js/methods.js
@@ -0,0 +1,148 @@
+function getInfoFromSelectedProduct(){
+    let ids = objProducts.map(obj => obj.id);
+    return $.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","));
+}
+
+function numberToEuroFormat(number){
+    let formatter = new Intl.NumberFormat('de', {style: 'currency', currency: 'EUR'});
+    return formatter.format(number);
+}
+
+function getQuantityOfProducts(){
+    let quantitys = objProducts.map(obj => obj.quantity);
+    let quantityOfProducts = 0;
+    for(let i = 0; i < quantitys.length; i++) { if(Number.isInteger(Number(quantitys[i]))) quantityOfProducts += Number(quantitys[i]); }
+    return quantityOfProducts;
+}
+
+function getProductInfo(productInfo){
+    let objProduct = objProducts.find(obj => obj.id == productInfo.id);
+    return jQuery.extend(objProduct, productInfo);
+}
+
+function createProductElement(objProduct){
+    let elementProduct = `
+    <tr>
+        <td class="text-start">
+            <img class="rounded img-fluid" src="https://picsum.photos/120/120">
+        </td>
+        <td class="text-start">
+            <span class="fs-5">${objProduct.title}</span>
+            <br>
+            <small class="text-success">sofort verfügbar</small>
+            <br>
+            <select class="form-select form-select-sm select-quantity" data-id="${objProduct.id}" style="width:125px;" aria-label="Default select example">`;
+            for(let i = 1; i <= 15; i++){
+                if(objProduct.quantity == i) elementProduct += `<option selected value="${i}">Anzahl: ${i}</option>`;
+                else elementProduct += `<option value="${i}">Anzahl: ${i}</option>`;
+            }
+            elementProduct += `
+            </select>
+            <button data-id="${objProduct.id}" class="btn-remove-product text-muted small text-decoration-none" style="padding: 0; border: none; background: transparen;">Löschen</button>
+        </td>
+        <td class="align-middle text-end">${numberToEuroFormat(objProduct.preis)}</td>
+    </tr>`;
+    return elementProduct;
+}
+
+function addToBag(productId){
+    let objProductInfo = objProducts.find(obj => obj.id == productId);
+    let index = objProducts.indexOf(objProductInfo);
+    if(index == -1) objProducts.push({id: productId, quantity: 1});
+    updateProductsInLocalStorage();
+}
+
+function isJson(str) {
+    try { JSON.parse(str); }
+    catch(e) { return false; }
+    return true;
+}
+
+function isEncoded(str){
+    try { atob(str); }
+    catch(e) { return false; }
+    return true;
+}
+
+function hasCartCode(){
+    let urlPath = window.location.pathname;
+    let code = urlPath.split("/");
+    code = code[code.length-1];
+    if(isEncoded(code)){
+        let productLink = atob(code);
+        if(isJson(productLink)) return true;
+    }
+    return false;
+}
+
+function updateProductsInLocalStorage(){
+    localStorage.setItem("products", JSON.stringify(objProducts));
+    $('#count-products-in-bag').text(getQuantityOfProducts());
+    $('#list-products-in-bag').html('');
+    if(typeof updateProducts === "function") $('#list-products').html('');
+    totalPrice = 0;
+    if(objProducts.length > 0){
+        getInfoFromSelectedProduct().done(function(response, status){
+            response.contents.forEach(function(product){
+                let objProduct = getProductInfo(product);
+                totalPrice += objProduct.preis*objProduct.quantity;
+                let elementProduct = createProductElement(objProduct);
+                $('#list-products-in-bag').append(elementProduct);
+                if(typeof updateProducts === "function") $('#list-products').append(elementProduct);
+            });
+            $('#total-price').text(numberToEuroFormat(totalPrice));
+            if(typeof updateProducts === "function") $('#total-checkout-price').text(numberToEuroFormat(totalPrice));
+        });
+        $('.cart-link').show();
+        $(".btn-share").show();
+        $('#count-products-in-bag').show();
+        $('#list-products-in-bag').parent().parent().parent().parent().parent().find('.modal-footer').show();
+        $('#total-price').parent().parent().parent().show();
+        $('#no-products').hide();
+        if(typeof updateProducts === "function"){
+            $('#form-section').show();
+            $('#list-products').parent().parent().parent().parent().parent().find('.modal-footer').show();
+            $('#total-checkout-price').parent().parent().parent().show();
+            $('#no-products-in-checkout').hide();
+        }
+        
+        if(window.location.origin == 'http://localhost') cartLink = window.location.origin+'/areya-energy/public/'+btoa(JSON.stringify(objProducts));
+        else cartLink = window.location.origin+'/'+btoa(JSON.stringify(objProducts));
+        $('.cart-link').val(cartLink);
+        shareData = {
+            title: "Share cart list",
+            text: 'share cart list',
+            url: cartLink,
+        };
+
+    }else{
+        $('.cart-link').hide();
+        $(".btn-share").hide();
+        $('#count-products-in-bag').hide();
+        $('#list-products-in-bag').parent().parent().parent().parent().parent().find('.modal-footer').hide();
+        $('#total-price').parent().parent().parent().hide();
+        $('#no-products').show();
+        if(typeof updateProducts === "function"){
+            $('#form-section').hide();
+            $('#list-products').parent().parent().parent().parent().parent().find('.modal-footer').hide();
+            $('#total-checkout-price').parent().parent().parent().hide();
+            $('#no-products-in-checkout').show();
+        }
+    }
+    let productId = $('meta[name="product-id"]').attr('content');
+    if(productId != undefined){
+        let objProduct = objProducts.find(obj => obj.id == productId);
+        if(objProduct == undefined) {
+            $('#btn-add-to-bag').show();
+            $('#btn-show-bag').hide();
+            if(objProducts.length > 0) $('#btn-check-out').parent().hide();
+            else $('#btn-check-out').parent().show();
+        }
+        else {
+            $('#btn-add-to-bag').hide();
+            $('#btn-show-bag').show();
+            $('#btn-check-out').parent().hide();
+            $('#count-items-in-bag').html(objProduct.quantity+`<svg style="fill: white; width: 12px; margin-left: 3px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>`);
+        }
+    }
+}
\ No newline at end of file
diff --git a/assets/js/script.js b/assets/js/script.js
new file mode 100644
index 0000000..1ab97d5
--- /dev/null
+++ b/assets/js/script.js
@@ -0,0 +1,127 @@
+$(window).on('load', function(){
+    if(localStorage.getItem("dismiss-message") == 1) $('.alert-dismissible').remove();
+    else $('.alert-dismissible').show();
+    $('#btn-close-message').click(function(){ localStorage.setItem("dismiss-message", 1); });
+    if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
+    updateProductsInLocalStorage();
+    if(hasCartCode()){
+        if(objProducts.length > 0) $('#modal-confirm-product-replacement').modal('show');
+        else $('#modal-confirm-addition-of-products').modal('show');
+        $('.btn-confirm-product-link').click(function(){
+            objProducts = JSON.parse(productLink);
+            updateProductsInLocalStorage();
+            window.location.replace($('meta[name="checkout"]').attr('content'));
+        });
+    }
+    $(document).on('click', '.btn-remove-product', function(){
+        let productId = $(this).attr('data-id');
+        let objProductInfo = objProducts.find(obj => obj.id == productId);
+        let index = objProducts.indexOf(objProductInfo);
+        if(index != -1) objProducts.splice(index, 1);
+        localStorage.setItem("products", JSON.stringify(objProducts));
+        $(this).parent().parent().remove();
+
+        $('#count-products-in-bag').text(getQuantityOfProducts());
+        if(objProducts.length > 0){
+            $('.cart-link').show();
+            $(".btn-share").show();
+            $('#count-products-in-bag').show();
+            $('#list-products-in-bag').parent().parent().parent().parent().parent().find('.modal-footer').show();
+            $('#total-price').parent().parent().parent().show();
+            $('#no-products').hide();
+            if(typeof updateProducts === "function"){
+                $('#form-section').show();
+                $('#list-products').parent().parent().parent().parent().parent().find('.modal-footer').show();
+                $('#total-checkout-price').parent().parent().parent().show();
+                $('#no-products-in-checkout').hide();
+            }
+        }else{
+            $('.cart-link').hide();
+            $(".btn-share").hide();
+            $('#count-products-in-bag').hide();
+            $('#list-products-in-bag').parent().parent().parent().parent().parent().find('.modal-footer').hide();
+            $('#total-price').parent().parent().parent().hide();
+            $('#no-products').show();
+            if(typeof updateProducts === "function"){
+                $('#form-section').hide();
+                $('#list-products').parent().parent().parent().parent().parent().find('.modal-footer').hide();
+                $('#total-checkout-price').parent().parent().parent().hide();
+                $('#no-products-in-checkout').show();
+            }
+        }
+
+        getInfoFromSelectedProduct().done(function(response, status){
+            totalPrice = 0;
+            if(response.contents != undefined) response.contents.forEach(function(product){
+                let objProduct = getProductInfo(product);
+                totalPrice += objProduct.preis*objProduct.quantity;
+            });
+            $('#total-price').text(numberToEuroFormat(totalPrice));
+            if(typeof updateProducts === "function") $('#total-checkout-price').text(numberToEuroFormat(totalPrice));
+        });
+
+        productId = $('meta[name="product-id"]').attr('content');
+        if(productId != undefined){
+            let objProduct = objProducts.find(obj => obj.id == productId);
+            if(objProduct == undefined) {
+                $('#btn-add-to-bag').show();
+                $('#btn-show-bag').hide();
+                if(objProducts.length > 0) $('#btn-check-out').parent().hide();
+                else $('#btn-check-out').parent().show();
+            }
+            else {
+                $('#btn-add-to-bag').hide();
+                $('#btn-show-bag').show();
+                $('#btn-check-out').parent().hide();
+                $('#count-items-in-bag').html(objProduct.quantity+`<svg style="fill: white; width: 12px; margin-left: 3px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>`);
+            }
+        }
+
+    });
+    $(document).on('change', '.select-quantity', function(){
+        let quantity = $(this).val();
+        let productId = $(this).attr('data-id');
+        let objProductInfo = objProducts.find(obj => obj.id == productId);
+        let index = objProducts.indexOf(objProductInfo);
+        objProducts[index].quantity = quantity;
+        localStorage.setItem("products", JSON.stringify(objProducts));
+
+        $('#count-products-in-bag').text(getQuantityOfProducts());
+        getInfoFromSelectedProduct().done(function(response, status){
+            totalPrice = 0;
+            response.contents.forEach(function(product){
+                let objProduct = getProductInfo(product);
+                totalPrice += objProduct.preis*objProduct.quantity;
+            });
+            $('#total-price').text(numberToEuroFormat(totalPrice));
+            if(typeof updateProducts === "function") $('#total-checkout-price').text(numberToEuroFormat(totalPrice));
+        });
+
+        productId = $('meta[name="product-id"]').attr('content');
+        if(productId != undefined){
+            let objProduct = objProducts.find(obj => obj.id == productId);
+            if(objProduct == undefined) {
+                $('#btn-add-to-bag').show();
+                $('#btn-show-bag').hide();
+                if(objProducts.length > 0) $('#btn-check-out').parent().hide();
+                else $('#btn-check-out').parent().show();
+            }
+            else {
+                $('#btn-add-to-bag').hide();
+                $('#btn-show-bag').show();
+                $('#btn-check-out').parent().hide();
+                $('#count-items-in-bag').html(objProduct.quantity+`<svg style="fill: white; width: 12px; margin-left: 3px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>`);
+            }
+        }
+
+    });
+    $('#btn-copy-cart-link').click(function(){
+        $('.cart-link').select();
+        document.execCommand("copy");
+        $(this).html(`<svg style="fill: green; width: 18px;"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 32c8.823 0 16 7.178 16 16v352c0 8.822-7.177 16-16 16H48c-8.822 0-16-7.178-16-16V80c0-8.822 7.178-16 16-16h352m-34.301 98.293l-8.451-8.52c-4.667-4.705-12.265-4.736-16.97-.068l-163.441 162.13-68.976-69.533c-4.667-4.705-12.265-4.736-16.97-.068l-8.52 8.451c-4.705 4.667-4.736 12.265-.068 16.97l85.878 86.572c4.667 4.705 12.265 4.736 16.97.068l180.48-179.032c4.704-4.667 4.735-12.265.068-16.97z"/></svg>`);
+    });
+    $(".btn-share").click(async function() {
+        if(navigator.share) { try { await navigator.share(shareData); } catch(err) { console.warn(err); } }
+        else { console.warn('Native Web Sharing not supported'); }
+    });
+});
\ No newline at end of file
diff --git a/content/master.blade.php b/content/master.blade.php
index af8e40d..136edc2 100644
--- a/content/master.blade.php
+++ b/content/master.blade.php
@@ -273,198 +273,9 @@
     @yield('content')
     @insert("content.includes.footer")
     @insert("content.includes.scripts")
-    <script>
-        let objProducts = [];
-        let formatter = new Intl.NumberFormat('de', {style: 'currency', currency: 'EUR'});
-        let totalPrice = 0;
-        function updateProductsInLocalStorage(){
-            localStorage.setItem("products", JSON.stringify(objProducts));
-            let quantitys = objProducts.map(obj => obj.quantity);
-            let quantityOfProducts = 0;
-            for(let i = 0; i < quantitys.length; i++) { if(Number.isInteger(Number(quantitys[i]))) quantityOfProducts += Number(quantitys[i]); }
-            $('#count-products-in-bag').text(quantityOfProducts);
-            $('#list-products-in-bag').html('');
-            if(typeof updateProducts === "function") $('#list-products').html('');
-            totalPrice = 0;
-            if(objProducts.length > 0) {
-                $('.cart-link').show();
-                $(".btn-share").show();
-                let ids = objProducts.map(obj => obj.id);
-                $.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){
-                    response.contents.forEach(function(item){
-                        let objProductInfo = objProducts.find(obj => obj.id == item.id);
-                        let elementProduct = `
-                        <tr>
-                            <td class="text-start">
-                                <img class="rounded img-fluid" src="https://picsum.photos/120/120">
-                            </td>
-                            <td class="text-start">
-                                <span class="fs-5">${item.title}</span>
-                                <br>
-                                <small class="text-success">sofort verfügbar</small>
-                                <br>
-                                <select class="form-select form-select-sm select-quantity" data-id="${item.id}" style="width:125px;" aria-label="Default select example">`;
-                                for(let i = 1; i <= 15; i++){
-                                    if(objProductInfo.quantity == i) elementProduct += `<option selected value="${i}">Anzahl: ${i}</option>`;
-                                    else elementProduct += `<option value="${i}">Anzahl: ${i}</option>`;
-                                }
-                                totalPrice += item.data_fields.preis*objProductInfo.quantity;
-                                elementProduct += `
-                                    </select>
-                               <button data-id="${item.id}" class="btn-remove-product text-muted small text-decoration-none" style="padding: 0; border: none; background: transparen;">Löschen</button>
-                            </td>
-                            <td class="align-middle text-end">${formatter.format(item.data_fields.preis)}</td>
-                        </tr>`;
-                        $('#list-products-in-bag').append(elementProduct);
-                        if(typeof updateProducts === "function") {
-                            elementProduct = `
-                            <tr>
-                                <td class="text-start">
-                                    <img class="rounded img-fluid" src="https://picsum.photos/120/120">
-                                </td>
-                                <td class="text-start">
-                                    <span class="fs-5">${item.title}</span>
-                                    <br>
-                                    <small class="text-success">sofort verfügbar</small>
-                                    <br>
-                                    <select class="form-select form-select-sm select-quantity" data-id="${item.id}" style="width:125px;" aria-label="Default select example">`;
-                                    for(let i = 1; i <= 15; i++){
-                                        if(objProductInfo.quantity == i) elementProduct += `<option selected value="${i}">Anzahl: ${i}</option>`;
-                                        else elementProduct += `<option value="${i}">Anzahl: ${i}</option>`;
-                                    }
-                                    elementProduct += `
-                                        </select>
-                                <button data-id="${item.id}" class="btn-remove-product text-muted small text-decoration-none" style="padding: 0; border: none; background: transparen;">Löschen</button>
-                                </td>
-                                <td class="align-middle text-end">${formatter.format(item.data_fields.preis)}</td>
-                            </tr>`;
-                            $('#list-products').append(elementProduct);
-                        }
-                    });
-                    $('#total-price').text(formatter.format(totalPrice));
-                    if(typeof updateProducts === "function") $('#total-checkout-price').text(formatter.format(totalPrice));
-                });
-                $('#count-products-in-bag').show();
-                $('#list-products-in-bag').parent().parent().parent().parent().parent().find('.modal-footer').show();
-                $('#total-price').parent().parent().parent().show();
-                $('#no-products').hide();
-                if(typeof updateProducts === "function"){
-                    $('#form-section').show();
-                    $('#list-products').parent().parent().parent().parent().parent().find('.modal-footer').show();
-                    $('#total-checkout-price').parent().parent().parent().show();
-                    $('#no-products-in-checkout').hide();
-                }
-            }else {
-                $('#count-products-in-bag').hide();
-                $('#list-products-in-bag').parent().parent().parent().parent().parent().find('.modal-footer').hide();
-                $('#total-price').parent().parent().parent().hide();
-                $('#no-products').show();
-                if(typeof updateProducts === "function"){
-                    $('#form-section').hide();
-                    $('#list-products').parent().parent().parent().parent().parent().find('.modal-footer').hide();
-                    $('#total-checkout-price').parent().parent().parent().hide();
-                    @if(!session()->has('success'))
-                    $('#no-products-in-checkout').show();
-                    @endif
-                }
-                $('.cart-link').hide();
-                $(".btn-share").hide();
-            }
-            $('#total-price').text(formatter.format(totalPrice));
-            let productId = $('meta[name="product-id"]').attr('content');
-            if(productId != undefined){
-                let objProductInfo = objProducts.find(obj => obj.id == productId);
-                if(objProductInfo == undefined) {
-                    $('#btn-add-to-bag').show();
-                    $('#btn-show-bag').hide();
-                    if(objProducts.length > 0) $('#btn-check-out').parent().hide();
-                    else $('#btn-check-out').parent().show();
-                }
-                else {
-                    $('#btn-add-to-bag').hide();
-                    $('#btn-show-bag').show();
-                    $('#btn-check-out').parent().hide();
-                    $('#count-items-in-bag').html(objProductInfo.quantity+`<svg style="fill: white; width: 12px; margin-left: 3px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>`);
-                }
-            }
-            if(objProducts.length > 0) {
-                let url = null;
-                if(window.location.origin == 'http://localhost') url = window.location.origin+'/areya-energy/public/'+btoa(JSON.stringify(objProducts));
-                else url = window.location.origin+'/'+btoa(JSON.stringify(objProducts));
-                $('.cart-link').val(url);
-                const shareData = {
-                    title: "Share cart list",
-                    text: 'share cart list',
-                    url: url,
-                };
-                $(".btn-share").click(async function() {
-                    if(navigator.share) { try { await navigator.share(shareData); } catch(err) { console.warn(err); } }
-                    else { console.warn('Native Web Sharing not supported'); }
-                });
-            }else{
-                $('.cart-link').hide();
-                $(".btn-share").hide();
-            }
-        }
-        function addToBag(productId){
-            let objProductInfo = objProducts.find(obj => obj.id == productId);
-            let index = objProducts.indexOf(objProductInfo);
-            if(index == -1) objProducts.push({id: productId, quantity: 1});
-            updateProductsInLocalStorage();
-        }
-        function isJson(str) {
-            try { JSON.parse(str); }
-            catch(e) { return false; }
-            return true;
-        }
-        function isEncoded(str){
-            try { atob(str); }
-            catch(e) { return false; }
-            return true;
-        }
-        $(window).on('load', function(){
-            if(localStorage.getItem("dismiss-message") == 1) $('.alert-dismissible').remove();
-            else $('.alert-dismissible').show();
-            $('#btn-close-message').click(function(){ localStorage.setItem("dismiss-message", 1); });
-            if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
-            let urlPath = window.location.pathname;
-            let code = urlPath.split("/");
-            code = code[code.length-1];
-            if(isEncoded(code)){
-                let productLink = atob(code);
-                if(isJson(productLink)){
-                    if(objProducts.length > 0) $('#modal-confirm-product-replacement').modal('show');
-                    else $('#modal-confirm-addition-of-products').modal('show');
-                }
-                $('.btn-confirm-product-link').click(function(){
-                    objProducts = JSON.parse(productLink);
-                    updateProductsInLocalStorage();
-                    window.location.replace($('meta[name="checkout"]').attr('content'));
-                });
-            }
-            updateProductsInLocalStorage();
-            $(document).on('click', '.btn-remove-product', function(){
-                let productId = $(this).attr('data-id');
-                let objProductInfo = objProducts.find(obj => obj.id == productId);
-                let index = objProducts.indexOf(objProductInfo);
-                if(index != -1) objProducts.splice(index, 1);
-                updateProductsInLocalStorage();
-            });
-            $(document).on('change', '.select-quantity', function(){
-                let quantity = $(this).val();
-                let productId = $(this).attr('data-id');
-                let objProductInfo = objProducts.find(obj => obj.id == productId);
-                let index = objProducts.indexOf(objProductInfo);
-                objProducts[index].quantity = quantity;
-                updateProductsInLocalStorage();
-            });
-            $('#btn-copy-cart-link').click(function(){
-                $('.cart-link').select();
-                document.execCommand("copy");
-                $(this).html(`<svg style="fill: green; width: 18px;"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 32c8.823 0 16 7.178 16 16v352c0 8.822-7.177 16-16 16H48c-8.822 0-16-7.178-16-16V80c0-8.822 7.178-16 16-16h352m-34.301 98.293l-8.451-8.52c-4.667-4.705-12.265-4.736-16.97-.068l-163.441 162.13-68.976-69.533c-4.667-4.705-12.265-4.736-16.97-.068l-8.52 8.451c-4.705 4.667-4.736 12.265-.068 16.97l85.878 86.572c4.667 4.705 12.265 4.736 16.97.068l180.48-179.032c4.704-4.667 4.735-12.265.068-16.97z"/></svg>`);
-            });
-        });
-    </script>
+    <script src="{{storage('assets/js/data.js')}}"></script>
+    <script src="{{storage('assets/js/methods.js')}}"></script>
+    <script src="{{storage('assets/js/script.js')}}"></script>
     @yield('scripts')
 </body>
 </html>
diff --git a/content/pages/checkout.blade.php b/content/pages/checkout.blade.php
index 9c04834..cdf7ab9 100644
--- a/content/pages/checkout.blade.php
+++ b/content/pages/checkout.blade.php
@@ -269,88 +269,5 @@
 @stop
 @section('scripts')
 <script src="{{storage('assets/libs/intl-tel-input/js/intlTelInput.min.js')}}"></script>
-<script>
-    function clearAddressFields() {
-        $('#address-components').hide();
-        $('#street-number').val('');
-        $('#street-number').prop('disabled', true);
-        $('#route').val('');
-        $('#locality').val('');
-        $('#postal-code').val('');
-    }
-    function getAddressFiedlValue(addressComponents, $field){
-        let field = addressComponents.find(obj => obj.types.indexOf($field) > -1);
-        return field != undefined?field.long_name:'';
-    }
-    function initialize() {
-        let input = document.getElementById('field_location');
-        let options = {
-            types: ['address'],
-            componentRestrictions: { country: "de" }
-        };
-        var autocomplete = new google.maps.places.Autocomplete(input, options);
-        autocomplete.addListener("place_changed", () => {
-            clearAddressFields();
-            const place = autocomplete.getPlace();
-            if (!place.geometry) return;
-            var componentMap = {
-                country: 'country',
-                locality: 'locality',
-                administrative_area_level_1 : 'administrative_area_level_1',
-                administrative_area_level_2 : 'administrative_area_level_2',
-                postal_code: 'postal_code',
-                route: 'route',
-                street_number : 'street_number',
-            };
-            $('#address-components').show();
-            let addressComponents = autocomplete.getPlace().address_components;
-            let streetNumber = getAddressFiedlValue(addressComponents, 'street_number');
-            if(streetNumber == '') {
-                $('#street-number').prop('disabled', false);
-                $('#street-number').focus();
-            }
-            else {
-                $('#street-number').prop('disabled', true);
-                $('#street-number').val(streetNumber);
-            }
-            let country = getAddressFiedlValue(addressComponents, 'country');
-            let route = getAddressFiedlValue(addressComponents, 'route');
-            $('#route').val(route);
-            let locality = getAddressFiedlValue(addressComponents, 'locality');
-            $('#locality').val(locality);
-            let postalCode = getAddressFiedlValue(addressComponents, 'postal_code');
-            $('#postal-code').val(postalCode);
-            $('#street-number').blur(function(){
-                if($('#street-number').val() == '') $('#street-number').focus();
-                else{
-                    $('#street-number').prop('disabled', true);
-                    $('#field_location').val(route+' '+$('#street-number').val()+', '+locality+', '+country);
-                }
-            });
-        });
-    }
-    $(window).on('load', google.maps.event, initialize);
-    let input = document.querySelector("#ctelefon");
-    let iti = window.intlTelInput(input, {
-        initialCountry: "de",
-        preferredCountries: ["de"],
-        geoIpLookup: function(callback) {
-            $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
-                let countryCode = (resp && resp.country)?resp.country:"us";
-                callback(countryCode);
-            });
-        },
-        utilsScript: "{{storage('assets/libs/intl-tel-input/js/utils.min.js')}}",
-    });
-    // iti.getNumber();
-
-    function updateProducts(){}
-
-    $(window).on('load', function(){
-        $('#anfrage').submit(function(){
-            objProducts = [];
-            updateProductsInLocalStorage();
-        });
-    });
-</script>
+<script src="{{storage('assets/js/checkout.js')}}"></script>
 @stop