feat: improve simple checkout window

Related: pcsg/kunden/freemom/umsetzung#823


(cherry picked from commit 18b726f7)

Co-authored-by: Michael Danielczok <michael@pcsg.de>

bin/frontend/controls/SimpleCheckoutWindow.css

-@media screen and (min-width: 768px) {
-    .SimpleCheckoutWindow .qui-window-popup-content,
-    .SimpleCheckoutWindow .qui-window-popup-sheet-content {
-        padding: 2rem;
-    }
+.SimpleCheckoutWindow .qui-window-popup-content {
+    padding: 0
 }
 
-.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-cancel {
-    cursor: pointer;
-    color: inherit;
+.SimpleCheckoutWindow__btnClose {
+    position: fixed;
+    top: 0;
+    right: 0.5rem;
     background: none;
+    color: inherit;
     border: none;
-    outline: none;
 }
 
-.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-close {
-    float: right !important;
+/* order process */
+.SimpleCheckoutWindow__checkoutWrapper {
+    padding: 3rem 1rem 1rem;
 }
 
-.SimpleCheckoutWindow .buttons-multiple {
-    display: flex;
-    float: none !important;
-    justify-content: space-between;
-    height: auto !important;
-    padding-inline: 1rem;
-}
+@media screen and (min-width: 768px) {
+    .SimpleCheckoutWindow__checkoutWrapper {
+        overflow: auto;
+        height: 100%;
+        padding: 3rem 2rem 2rem;
+    }
 
-.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-payToOrder {
-    order: 1;
+    .SimpleCheckoutWindow__btnClose {
+        right: 1rem;
+    }
 }
 
-/* order process */
 .SimpleCheckoutWindow .quiqqer-simple-checkout {
     --_sticky-positionTop: var(--sticky-positionTop, 0);
+
+    margin-inline: auto;
+    max-width: 1300px;
 }
\ No newline at end of file

bin/frontend/controls/SimpleCheckoutWindow.js

@@ -24,20 +24,24 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
         ],
 
         options: {
-            'class'    : 'SimpleCheckoutWindow',
-            closeButton: false
+            'class': 'SimpleCheckoutWindow',
+            closeButton: true
         },
 
         initialize: function (options) {
             this.setAttributes({
-                maxHeight: 800,
-                maxWidth : 1200
+                maxHeight: 10000, // workaround, qui popup
+                maxWidth : 10000, // does not support full screen
+                draggable: false,
+                resizable: false,
+                buttons: false,
+                closeButton: false,
+                title: false
             });
 
             this.parent(options);
             this.$Checkout      = null;
             this.$PayToOrderBtn = null;
-            this.$isOrdering    = false;
 
             this.addEvents({
                 onOpen: this.$onOpen
@@ -49,71 +53,32 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                 return;
             }
 
-            this.$Buttons.addClass('buttons-multiple');
-
-            this.$PayToOrderBtn = new QUIButton({
-                'class'  : 'SimpleCheckoutWindow-btn-payToOrder',
-                textimage: 'fas fa-shopping-cart',
-                disabled : true,
-                text     : QUILocale.get('quiqqer/order', 'ordering.btn.pay.to.order'),
-                title    : QUILocale.get('quiqqer/order', 'ordering.btn.pay.to.order'),
-                events   : {
-                    onClick: () => {
-                        this.$PayToOrderBtn.disable();
-
-                        this.$Checkout.orderWithCosts().catch((e) => {
-                            this.$PayToOrderBtn.enable();
-                        });
-                    }
-                }
-            });
+            this.Loader.show();
+            this.getContent().set('html', '');
 
-            const CancelBtn = new Element('button', {
-                'class': 'SimpleCheckoutWindow-btn-cancel',
-                html   : QUILocale.get('quiqqer/order-simple-checkout', 'SimpleCheckoutWindow.btn.cancel'),
-                events : {
+            new Element('button', {
+                'class': 'SimpleCheckoutWindow__btnClose',
+                html: '<i class="fa fa-times"></i>',
+                events: {
                     click: () => {
-                        this.fireEvent('cancel', [this]);
                         this.close();
                     }
                 }
-            }).inject(this.$Buttons);
-
-            this.addButton(this.$PayToOrderBtn);
+            }).inject(this.getContent());
 
-            this.Loader.show();
-            this.getContent().set('html', '');
+            const CheckoutWrapper = new Element('div', {
+                'class': 'SimpleCheckoutWindow__checkoutWrapper',
+            }).inject(this.getContent());
 
             this.$Checkout = new SimpleCheckout({
                 products         : this.getAttribute('products'),
-                showPayToOrderBtn: false,
+                showPayToOrderBtn: true,
                 events           : {
                     onLoaded         : () => {
                         this.Loader.hide();
                     },
-                    onOrderStart     : () => {
-                        CancelBtn.disabled = true;
-                        this.$PayToOrderBtn.disable();
-                    },
                     onOrderSuccessful: () => {
-                        this.$Buttons.removeClass('buttons-multiple');
-                        CancelBtn.destroy();
-                        this.$PayToOrderBtn.destroy();
-
-                        this.addButton(new QUIButton({
-                            'class'  : 'SimpleCheckoutWindow-btn-close',
-                            textimage: 'fas fa-check',
-                            text     : QUILocale.get('quiqqer/order-simple-checkout', 'SimpleCheckoutWindow.btn.continue'),
-                            title    : QUILocale.get('quiqqer/order-simple-checkout', 'SimpleCheckoutWindow.btn.continue'),
-                            events   : {
-                                onClick: () => {
-                                    this.fireEvent('closeOrderSuccessful', [this]);
-                                    this.close();
-                                }
-                            }
-                        }));
-
-                        this.getContent().scrollToTop = 0;
+                        new Fx.Scroll(CheckoutWrapper).toTop();
                     },
                     onLoadedError    : () => {
                         require([
@@ -131,19 +96,9 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
                                 }
                             }).open();
                         });
-                    },
-                    onOrderValid     : () => {
-                        if (this.$isOrdering) {
-                            return;
-                        }
-
-                        this.$PayToOrderBtn.enable();
-                    },
-                    onOrderInvalid   : () => {
-                        this.$PayToOrderBtn.disable();
                     }
                 }
-            }).inject(this.getContent());
+            }).inject(CheckoutWrapper);
         }
     });
 });

src/QUI/ERP/Order/SimpleCheckout/Basket.css

@@ -147,7 +147,7 @@ ul.articleData__fields {
 /*******/
 /* sum */
 /*******/
-.articles-sum-container {
+:where(.quiqqer-simple-checkout) .articles-sum-container {
     background-color: var(--_bg);
     margin-top: 0.5rem;
     border-radius: 0.5rem;
@@ -159,7 +159,7 @@ ul.articleData__fields {
     float: none;
     text-align: right;
     margin-bottom: 0;
-    font-size: 0.925rem;
+    font-size: 1rem;
 }
 
 .articles-sum tr {
@@ -167,15 +167,10 @@ ul.articleData__fields {
 }
 
 .articles-sum td {
-    padding: 0;
+    padding: 2px;
     border: none;
 }
 
-.articles-sum-row-sum {
-    font-weight: bold;
-    font-size: 1.125rem;
-}
-
 /****************************/
 /* Simple basket for header */
 /****************************/

src/QUI/ERP/Order/SimpleCheckout/Checkout.css

@@ -131,8 +131,9 @@
 }
 
 .quiqqer-simple-checkout-basket__pay > :where(.quiqqer-order-step-checkout-notice) label {
-    display: block;
+    display: flex;
     cursor: pointer;
+    align-items: baseline;
 }
 
 .quiqqer-simple-checkout-basket__pay :where(.quiqqer-order-step-checkout-notice label) {
@@ -206,4 +207,71 @@
         grid-template-columns: auto max(25%, 150px) 1fr;
         grid-template-areas: 'select icon text' '. . price';
     }
-}
\ No newline at end of file
+}
+
+/*******/
+/* sum */
+/*******/
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-total {
+    background-color: #f8f8f8;
+    margin-top: 0.5rem;
+    padding: 1rem;
+}
+
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-information-orderData-table {
+    border: none;
+    float: none;
+    text-align: right;
+    margin-bottom: 0;
+    font-size: 1rem;
+}
+
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-information-orderData-table tr {
+    border: none;
+}
+
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-information-orderData-table td {
+    padding: 2px;
+    border: none;
+}
+
+:where(.quiqqer-simple-checkout) .articles-sum-row-sum,
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-information-orderData-sum-title,
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-information-orderData-value {
+    font-weight: bold;
+    font-size: 1.125rem;
+}
+
+/***************/
+/* Finish step */
+/***************/
+.quiqqer-simple-checkout .quiqqer-order-profile-orders-order-articles-article-articleNo {
+    font-size: 0.875rem;
+    opacity: 0.5;
+}
+
+.quiqqer-simple-checkout .quiqqer-order-step-finish .quiqqer-order-control-order {
+    display: flow-root;
+    margin-top: 2rem;
+}
+
+.quiqqer-simple-checkout .quiqqer-order-control-order-information,
+.quiqqer-simple-checkout .quiqqer-order-control-order-articles {
+    padding: 1rem;
+    width: 100%;
+    background: #f8f8f8;
+}
+
+.quiqqer-simple-checkout .quiqqer-order-control-order-articles article {
+    margin-bottom: 0.5rem;
+    width: 100%;
+    background: #fff;
+    padding: 1rem;
+    border-radius: 0.5rem;
+}
+
+.quiqqer-simple-checkout .quiqqer-order-profile-orders-order-articles-article-image {
+    max-height: 120px;
+    height: initial;
+}
+