feat(SimpleCheckoutWindow): design improved

bin/frontend/controls/SimpleCheckout.js

+/**
+ * @event onOrderValid [this] - Fires as soon as all order requirements are met
+ * @event onOrderInvalid [this] - Fires if the order requirements are not met
+ * @event onOrderStart [this] - Fires as soon as the order starts to execute
+ * @event onOrderSuccessfull [this] - Fires if the order was successfully executed
+ */
 define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckout', [
 
     'qui/QUI',
     'qui/controls/Control',
     'qui/controls/loader/Loader',
     'qui/utils/Form',
+    'Locale',
     'Ajax'
 
-], function(QUI, QUIControl, QUILoader, QUIFormUtils, QUIAjax) {
+], function (QUI, QUIControl, QUILoader, QUIFormUtils, QUILocale, QUIAjax) {
     'use strict';
 
+    const lg = 'quiqqer/order-simple-checkout';
+
     return new Class({
 
         Extends: QUIControl,
-        Type: 'package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckout',
+        Type   : 'package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckout',
 
         Binds: [
             'update',
             '$onInject',
-            '$onImport'
+            '$onImport',
+            'toggleAllProducts',
+            'scrollToPayment'
         ],
 
         options: {
-            orderHash: false,
-            loadHashFromUrl: false
+            orderHash           : false,
+            loadHashFromUrl     : false,
+            showPayToOrderBtn   : true,
+            showOrderSuccessInfo: true
         },
 
-        initialize: function(options) {
+        initialize: function (options) {
             this.parent(options);
 
-            this.$Delivery = null;
-            this.$Billing = null;
-            this.$Shipping = null;
-            this.$Payment = null;
-            this.Loader = null;
+            this.$Form              = null;
+            this.$Delivery          = null;
+            this.$Billing           = null;
+            this.$Shipping          = null;
+            this.$Payment           = null;
+            this.Loader             = null;
+            this.$PayToOrderBtn     = null;
+            this.ScrollToPaymentBtn = null;
+
+            this.showAllProductsBtn = null;
 
             this.addEvents({
                 onImport: this.$onImport,
@@ -48,14 +66,18 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             }
         },
 
-        $onImport: function() {
-            this.Loader = new QUILoader().inject(this.getElm());
+        $onImport: function () {
+            const Elm = this.getElm();
+
+            this.Loader = new QUILoader().inject(Elm);
             this.$setAnchor();
 
             if (parseInt(this.getElm().get('data-qui-load-hash-from-url')) === 1) {
                 this.setAttribute('loadHashFromUrl', true);
             }
 
+            this.$Form = Elm.getElement('form');
+
             this.getElm().getElements('a.log-in').addEvent('click', (e) => {
                 e.stop();
 
@@ -64,8 +86,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                 ], (LoginWindow) => {
                     new LoginWindow({
                         redirect: false,
-                        reload: false,
-                        events: {
+                        reload  : false,
+                        events  : {
                             onSuccess: () => {
                                 window.location.reload();
                             }
@@ -79,8 +101,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             if (LoginNode) {
                 require(['package/quiqqer/frontend-users/bin/frontend/controls/login/Login'], (Login) => {
                     new Login({
-                        redirect: false,
-                        reload: false,
+                        redirect : false,
+                        reload   : false,
                         onSuccess: () => {
                             this.getElm().setStyle('minHeight', this.getElm().getSize().y);
                             this.Loader.show();
@@ -119,7 +141,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                 return this.$loadGUI();
             }).then(() => {
                 // Terms of Service
-                this.getElm().getElements('a[data-project]').addEvent('click', function(e) {
+                this.getElm().getElements('a[data-project]').addEvent('click', function (e) {
                     let Target = e.target;
 
                     if (Target.nodeName !== 'A') {
@@ -132,17 +154,16 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
 
                     e.stop();
 
-                    require(['package/quiqqer/controls/bin/site/Window'], function(Win) {
+                    require(['package/quiqqer/controls/bin/site/Window'], function (Win) {
                         new Win({
                             showTitle: true,
-                            project: Target.get('data-project'),
-                            lang: Target.get('data-lang'),
-                            id: Target.get('data-id')
+                            project  : Target.get('data-project'),
+                            lang     : Target.get('data-lang'),
+                            id       : Target.get('data-id')
                         }).open();
                     });
                 });
 
-
                 this.Loader.hide();
 
                 moofx([
@@ -154,7 +175,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             });
         },
 
-        $onInject: function() {
+        $onInject: function () {
             this.$loadProducts().then(() => {
                 return this.$loadCheckout();
             }).catch((err) => {
@@ -180,13 +201,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             });
         },
 
-        $loadOrder: function() {
+        $loadOrder: function () {
             if (this.getAttribute('orderHash')) {
                 return new Promise((resolve, reject) => {
                     QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_getOrder', resolve, {
                         'package': 'quiqqer/order-simple-checkout',
                         orderHash: this.getAttribute('orderHash'),
-                        onError: reject
+                        onError  : reject
                     });
                 });
             }
@@ -194,7 +215,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             return Promise.resolve();
         },
 
-        $loadGUI: function() {
+        $loadGUI: function () {
             const hideLoader = () => {
                 this.Loader.hide();
             };
@@ -203,7 +224,6 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                 this.Loader.show();
             };
 
-
             let SetCurrency = Promise.resolve();
 
             if (typeof window.DEFAULT_USER_CURRENCY !== 'undefined' &&
@@ -221,8 +241,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             }).then((instances) => {
                 this.$Delivery = instances[0];
                 this.$Shipping = instances[1];
-                this.$Payment = instances[2];
-                this.$Billing = instances[3];
+                this.$Payment  = instances[2];
+                this.$Billing  = instances[3];
 
                 if (!this.$Delivery && !this.$Shipping && !this.$Payment && !this.$Billing) {
                     this.Loader.hide();
@@ -230,9 +250,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                 }
 
                 this.$Delivery.setAttribute('Checkout', this);
-                this.$Shipping.setAttribute('Checkout', this);
+                if (this.$Shipping) {
+                    this.$Shipping.setAttribute('Checkout', this);
+                }
                 this.$Payment.setAttribute('Checkout', this);
-                this.$Billing.setAttribute('Checkout', this);
+                if (this.$Billing) {
+                    this.$Billing.setAttribute('Checkout', this);
+                }
 
                 this.$Payment.addEvent('refreshBegin', showLoader);
                 this.$Payment.addEvent('refreshEnd', hideLoader);
@@ -266,17 +290,30 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                     this.update().then(hideLoader);
                 });
 
-                this.$Billing.addEvent('change', () => {
-                    this.Loader.show();
-                    this.update().then(hideLoader);
-                });
+                if (this.$Billing) {
+                    this.$Billing.addEvent('change', () => {
+                        this.Loader.show();
+                        this.update().then(hideLoader);
+                    });
+                }
 
-                this.getElm().getElement('[name="pay"]').addEvent('click', (e) => {
-                    e.stop();
-                    this.orderWithCosts();
-                });
+                this.$PayToOrderBtn = this.getElm().getElement('[name="pay"]');
+
+                if (this.getAttribute('showPayToOrderBtn')) {
+                    this.$PayToOrderBtn.addEvent('click', (e) => {
+                        e.stop();
+                        this.orderWithCosts();
+                    });
+                } else {
+                    this.$PayToOrderBtn.destroy();
+                    this.$PayToOrderBtn = null;
+                }
+
+                this.ScrollToPaymentBtn = this.getElm().querySelector('.quiqqer-simple-checkout__scrollToPaymentBtn');
 
-                this.$setSpacingOnMobile();
+                if (this.ScrollToPaymentBtn) {
+                    this.ScrollToPaymentBtn.addEvent('click', this.scrollToPayment);
+                }
 
                 // load
                 this.$Delivery.fireEvent('change');
@@ -286,7 +323,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             });
         },
 
-        $loadPayment: function() {
+        $loadPayment: function () {
             return new Promise((resolve, reject) => {
                 QUIAjax.post(
                     'package_quiqqer_order-simple-checkout_ajax_frontend_getPaymentStep',
@@ -294,9 +331,9 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                         const Container = this.getElm().getElement('.quiqqer-simple-checkout-container');
 
                         // for the OrderProcess.js
-                        if (this.getElm().getElement('form')) {
-                            this.getElm().getElement('form').set('data-order-hash', result.orderHash);
-                            this.getElm().getElement('form').set('data-products-count', result.productCount);
+                        if (this.$Form) {
+                            this.$Form.set('data-order-hash', result.orderHash);
+                            this.$Form.set('data-products-count', result.productCount);
                         }
 
                         moofx(Container).animate({
@@ -313,8 +350,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                                             if (typeof Container.scrollIntoView === 'function') {
                                                 Container.scrollIntoView({
                                                     behavior: 'smooth',
-                                                    block: 'center',
-                                                    inline: 'start'
+                                                    block   : 'center',
+                                                    inline  : 'start'
                                                 });
                                             }
 
@@ -328,7 +365,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                     {
                         'package': 'quiqqer/order-simple-checkout',
                         orderHash: this.getAttribute('orderHash'),
-                        onError: reject
+                        onError  : reject
                     }
                 );
             });
@@ -336,7 +373,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
 
         },
 
-        $loadProducts: function() {
+        $loadProducts: function () {
             if (this.getAttribute('products') && !this.getAttribute('orderHash')) {
                 return new Promise((resolve, reject) => {
                     QUIAjax.post(
@@ -348,8 +385,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                         },
                         {
                             'package': 'quiqqer/order-simple-checkout',
-                            products: JSON.encode(this.getAttribute('products')),
-                            onError: reject
+                            products : JSON.encode(this.getAttribute('products')),
+                            onError  : reject
                         }
                     );
                 });
@@ -358,7 +395,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             return Promise.resolve();
         },
 
-        $loadCheckout: function() {
+        $loadCheckout: function () {
             this.$setAnchor();
 
             return new Promise((resolve) => {
@@ -377,7 +414,6 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                     QUI.parse(this.getElm()).then(() => {
                         this.fireEvent('loaded', [this]);
                         this.$onImport();
-                        this.$setSpacingOnMobile();
 
                         resolve();
                     });
@@ -388,13 +424,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             });
         },
 
-        setCurrency: function(currency) {
+        setCurrency: function (currency) {
             return new Promise((resolve, reject) => {
                 QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_setCurrency', resolve, {
                     'package': 'quiqqer/order-simple-checkout',
-                    currency: currency,
+                    currency : currency,
                     orderHash: this.getAttribute('orderHash'),
-                    onError: reject
+                    onError  : reject
                 });
             }).then(() => {
                 return this.$refreshBasket();
@@ -408,10 +444,17 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             });
         },
 
-        orderWithCosts: function() {
+        /**
+         * @return {Promise<void>}
+         */
+        orderWithCosts: function () {
             this.Loader.show();
 
-            this.update().then(() => {
+            return this.update().then(() => {
+                if (!this.$Form.reportValidity()) {
+                    return;
+                }
+
                 this.Loader.show();
                 const Terms = this.getElm().getElement('[name="termsAndConditions"]');
 
@@ -431,6 +474,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                     return;
                 }
 
+                this.fireEvent('orderStart', [this]);
+
                 // execute order
                 QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_orderWithCosts', (result) => {
                     const Container = this.getElm().getElement('.quiqqer-simple-checkout-container');
@@ -443,6 +488,12 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                         this.getElm().getElement('form').set('data-products-count', result.productCount);
                     }
 
+                    this.fireEvent('orderSuccessful', [this]);
+
+                    if (!this.getAttribute('showOrderSuccessInfo')) {
+                        return;
+                    }
+
                     moofx(Container).animate({
                         opacity: 0
                     }, {
@@ -459,10 +510,12 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                                         if (typeof Container.scrollIntoView === 'function') {
                                             Container.scrollIntoView({
                                                 behavior: 'smooth',
-                                                block: 'center',
-                                                inline: 'start'
+                                                block   : 'center',
+                                                inline  : 'start'
                                             });
                                         }
+
+                                        this.fireEvent('showOrderSuccessInfo', [this]);
                                     }
                                 });
                             });
@@ -471,7 +524,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                 }, {
                     'package': 'quiqqer/order-simple-checkout',
                     orderHash: this.getAttribute('orderHash'),
-                    onError: (err) => {
+                    onError  : (err) => {
                         if (typeof err.getMessage === 'function') {
                             this.$showError(err.getMessage());
                             this.Loader.hide();
@@ -485,7 +538,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             });
         },
 
-        $getControl: function(Node) {
+        $getControl: function (Node) {
             return new Promise((resolve) => {
                 if (!Node || !Node.get('data-qui')) {
                     return resolve(null);
@@ -510,7 +563,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             });
         },
 
-        $setAnchor: function() {
+        $setAnchor: function () {
             if (!this.getAttribute('loadHashFromUrl')) {
                 return;
             }
@@ -522,13 +575,19 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             window.location.hash = this.getAttribute('orderHash');
         },
 
-        $refreshBasket: function() {
+        $refreshBasket: function () {
             this.Loader.show();
 
             return new Promise((resolve) => {
                 QUIAjax.get('package_quiqqer_order-simple-checkout_ajax_frontend_basket', (basket) => {
                     if (this.getElm().getElement('.quiqqer-simple-checkout-basket__inner')) {
                         this.getElm().getElement('.quiqqer-simple-checkout-basket__inner').set('html', basket);
+
+                        this.showAllProductsBtn = this.getElm().querySelector('.articleList__btnShowMore');
+
+                        if (this.showAllProductsBtn) {
+                            this.showAllProductsBtn.addEvent('click', this.toggleAllProducts);
+                        }
                     }
 
                     this.Loader.hide();
@@ -540,7 +599,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             });
         },
 
-        $showError: function(message) {
+        $showError: function (message) {
             // @todo michael -> schönere error message
             QUI.getMessageHandler().then((MH) => {
                 MH.addError(message);
@@ -549,18 +608,20 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
             console.error(message);
         },
 
-        update: function() {
-            const PayButton = this.getElm().getElement('[name="pay"]');
-
+        update: function () {
             return new Promise((resolve) => {
                 const orderData = QUIFormUtils.getFormData(this.getElm().getElement('form'));
 
                 QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_update', (isValid) => {
-                    PayButton.disabled = !isValid;
+                    if (isValid) {
+                        this.fireEvent('orderValid', [this]);
+                    } else {
+                        this.fireEvent('orderInvalid', [this]);
+                    }
 
                     const Delivery = this.getElm().getElement('.quiqqer-simple-checkout-data-delivery');
                     const Shipping = this.getElm().getElement('.quiqqer-simple-checkout-data-shipping');
-                    const Payment = this.getElm().getElement('.quiqqer-simple-checkout-data-payment');
+                    const Payment  = this.getElm().getElement('.quiqqer-simple-checkout-data-payment');
 
                     if (!isValid) {
                         QUIAjax.get('package_quiqqer_order-simple-checkout_ajax_frontend_validate', (missing) => {
@@ -611,7 +672,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                     'package': 'quiqqer/order-simple-checkout',
                     orderData: JSON.encode(orderData),
                     orderHash: this.getAttribute('orderHash'),
-                    onError: (err) => {
+                    onError  : (err) => {
                         if (typeof err.getMessage === 'function') {
                             this.$showError(err.getMessage());
                             this.Loader.hide();
@@ -628,21 +689,85 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
         },
 
         /**
-         * Calculate needed margin on mobile.
-         * Not pretty solution, needs to be reworked.
+         * Show or hide all products
+         *
+         * @param event
          */
-        $setSpacingOnMobile: function() {
-            if (QUI.getBodySize().x >= 768) {
+        toggleAllProducts: function (event) {
+            event.stop();
+
+            const Elm            = this.getElm();
+            const HiddenList     = Elm.querySelector('.articleList__hidden'),
+                  InnerContainer = Elm.querySelector('.articleList__hiddenInner');
+
+            if (!HiddenList || !InnerContainer) {
+                return;
+            }
+
+            if (HiddenList.offsetHeight > 0) {
+                this.hideHiddenArticles(HiddenList);
+                const max = this.showAllProductsBtn.getAttribute('data-qui-max');
+
+                this.showAllProductsBtn.innerHTML = QUILocale.get(lg, 'ordering.btn.showAllProductsText.open', {
+                    max: max ? max : ''
+                });
+
                 return;
             }
 
-            const PayContainer = this.getElm().querySelector('.quiqqer-simple-checkout-data-pay');
+            this.showHiddenArticles(HiddenList, InnerContainer);
+
+            this.showAllProductsBtn.innerHTML = QUILocale.get(lg, 'ordering.btn.showAllProductsText.close');
+        },
+
+        /**
+         * Show hidden products
+         *
+         * @param ListNode
+         * @param InnerNode
+         */
+        showHiddenArticles: function (ListNode, InnerNode) {
+            moofx(ListNode).animate({
+                height : InnerNode.offsetHeight,
+                opacity: 1
+            }, {
+                callback: () => {
+                    ListNode.style.height = null;
+                }
+            });
+        },
+
+        /**
+         * Hide products
+         *
+         * @param ListNode
+         */
+        hideHiddenArticles: function (ListNode) {
+            moofx(ListNode).animate({
+                height : 0,
+                opacity: 0
+            });
+        },
+
+        /**
+         * Scroll to the payment section.
+         * If some requirements are missing, scroll to the next missing label.
+         *
+         * @param event
+         */
+        scrollToPayment: function (event) {
+            event.stop();
+
+            const Elm           = this.getElm();
+            const SumNode       = Elm.querySelector('.articles-sum-container');
+            const RequiredField = Elm.querySelector('.quiqqer-simple-checkout-require');
 
-            if (!PayContainer) {
+            if (RequiredField) {
+                RequiredField.scrollIntoView({behavior: "smooth"});
                 return;
             }
 
-            this.getElm().setStyle('margin-bottom', PayContainer.offsetHeight + 'px');
+            SumNode.scrollIntoView({behavior: "smooth"});
         }
     });
 });