CouponCodeInput.js

/**
 * CouponCodeInput
 *
 * @module package/quiqqer/coupons/bin/frontend/classes/CouponCodeInput
 * @author www.pcsg.de (Patrick Müller)
 */
define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [

    'qui/QUI',
    'qui/controls/Control',
    'qui/controls/loader/Loader',
    'utils/Session',

    'package/quiqqer/coupons/bin/frontend/CouponCodes',

    'Ajax',
    'Locale',
    'Mustache',

    'text!package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput.html',
    'css!package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput.css'

], function(QUI, QUIControl, QUILoader, Sessions, CouponCodes, QUIAjax, QUILocale, Mustache, template) {
    'use strict';

    const lg = 'quiqqer/coupons';

    return new Class({

        Extends: QUIControl,
        Type: 'package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput',

        Binds: [
            '$submit',
            'handleError'
        ],

        initialize: function(options) {
            this.parent(options);

            this.$Input = null;
            this.$ErrorMsgContainer = null;
            this.Loader = new QUILoader();
            this.$running = false;


            this.addEvents({
                onInject: this.$onInject
            });
        },

        /**
         * Event: onInject
         */
        $onInject: function() {
            const self = this;
            const lgPrefix = 'controls.frontend.CouponCodeInput.template.';

            this.$Elm.addClass('quiqqer-coupons-field');

            if (this.$Elm.getParent('[data-name="quiqqer-simple-checkout"]')) {
                this.$Elm.addClass('quiqqer-coupons-field-simpleCheckout');
            }

            this.$Elm.set('html', Mustache.render(template, {
                labelInput: QUILocale.get(lg, lgPrefix + 'labelInput'),
                labelInputPlaceholder: QUILocale.get(lg, lgPrefix + 'labelInputPlaceholder'),
                submitBtnText: QUILocale.get(lg, lgPrefix + 'submitBtnText')
            }));

            this.$ErrorMsgContainer = this.$Elm.querySelector('[data-ref="errorMsg"]');

            this.Loader.inject(this.$Elm);

            this.$Input = this.$Elm.getElement('[data-ref="code-input"]');

            let timeoutId = null;
            let previousValue = '';
            let currentValue = '';

            const keyUpFunc = function(event ){
                currentValue = self.$Input.value.trim();

                if (event.code === 13) {
                    clearTimeout(timeoutId);
                    previousValue = currentValue;
                    self.$submit();
                } else {
                    clearTimeout(timeoutId);

                    timeoutId = setTimeout(function() {
                        if (
                            (currentValue !== previousValue || currentValue === '') &&
                            self.$ErrorMsgContainer.getAttribute('data-show')
                        ) {
                            self.hideErrorMessage();
                            self.resetInvalidInput();
                        }
                        previousValue = currentValue;
                    }, 400);
                }
            };

            this.$Input.addEvent('keyup', keyUpFunc);

            this.$Elm.getElement('[data-ref="submit-coupon-code"]').addEvent('click', function(event) {
                event.stop();
                self.$submit();
            });

            if (this.isInOrder()) {
                const OrderProcess = this.getOrderProcess();

                new Promise(function(resolve) {
                    if (!OrderProcess.isLoaded()) {
                        return OrderProcess.addEvent('onLoad', resolve);
                    }

                    resolve();
                }).then(function() {
                    if (OrderProcess.getAttribute('basketEditable') === false) {
                        // remove coupon codes button
                        new Element('button', {
                            'class': 'quiqqer-coupons-remove',
                            'html': '<span class="fa fa-close"></span>',
                            title: QUILocale.get(lg, 'remove.coupons.button'),
                            events: {
                                click: function(e) {
                                    e.stop();
                                    self.removeCouponsFromOrder().catch(function(e) {
                                        console.error(e);
                                    });
                                }
                            }
                        }).inject(self.$Elm.getElement('.quiqqer-coupons-couponcodeinput'));
                    }
                });
            }
        },

        /**
         * Submit a CouponCode
         */
        $submit: function() {
            if (this.$running) {
                return;
            }

            const self = this;
            const code = this.$Input.value.trim();

            if (code === '') {
                this.$Input.focus();
                return;
            }

            this.$running = true;
            this.Loader.show();

            // simple order
            const SimpleCheckoutNode = this.getElm().getParent('[data-name="quiqqer-simple-checkout"]');

            if (SimpleCheckoutNode) {
                const SimpleCheckout = QUI.Controls.getById(SimpleCheckoutNode.get('data-quiid'));
                let orderHash = window.location.hash.substring(1);

                if (!orderHash || orderHash === '') {
                    orderHash = SimpleCheckout.getAttribute('orderHash');
                }

                QUIAjax.get('package_quiqqer_order-simple-checkout_ajax_frontend_getOrder', (response) => {
                    CouponCodes.addCouponCodeToBasket(code, response.order.uuid).then(() => {
                        if (SimpleCheckout) {
                            SimpleCheckout.$refreshBasket().then(() => {
                                this.$running = false;
                                this.Loader.hide();
                            });

                            return;
                        }

                        this.$running = false;
                        this.Loader.hide();
                    }).catch(self.handleError);
                }, {
                    'package': 'quiqqer/order-simple-checkout',
                    orderHash: orderHash
                });

                return;
            }

            // get order process
            if (!this.isInOrder()) {
                QUIAjax.get('package_quiqqer_order_ajax_frontend_basket_getLastOrder', function(order) {
                    CouponCodes.addCouponCodeToBasket(code, order.hash).then(function(redeemed) {
                        if (!redeemed) {
                            self.$running = false;
                            self.Loader.hide();
                            return;
                        }

                        self.$addCouponCodeToSession(code).then(function() {
                            QUIAjax.get('package_quiqqer_order_ajax_frontend_basket_getOrderProcessUrl', function(url) {
                                window.location = url + '?coupon=' + code;
                            }, {
                                'package': 'quiqqer/order'
                            });
                        });
                    }).catch(self.handleError);
                }, {
                    'package': 'quiqqer/order'
                });

                return;
            }

            const OrderProcess = this.getOrderProcess();

            OrderProcess.Loader.show();

            OrderProcess.getOrder().then(function(orderHash) {
                CouponCodes.addCouponCodeToBasket(code, orderHash).then(() => {
                    self.$running = false;

                    self.$addCouponCodeToSession(code).then(function() {
                        OrderProcess.reload();
                    });
                }).catch((err) => {
                    OrderProcess.Loader.hide();
                    self.handleError(err);
                });
            });
        },

        /**
         *
         * @param code
         * @return {Promise}
         */
        $addCouponCodeToSession: function(code) {
            return Sessions.get('quiqqer-coupons').then(function(coupons) {
                if (!coupons || typeOf(coupons) !== 'array') {
                    coupons = [];
                }

                coupons.push(code);

                coupons = coupons.filter(function(value, index, self) {
                    return self.indexOf(value) === index;
                });

                return Sessions.set('quiqqer-coupons', JSON.encode(coupons));
            });
        },

        /**
         * Is the coupon in the order process?
         * @return {boolean}
         */
        isInOrder: function() {
            const OrderProcessNode = this.getElm().getParent(
                '[data-qui="package/quiqqer/order/bin/frontend/controls/OrderProcess"]'
            );

            return !!OrderProcessNode;
        },

        /**
         * Return the order process
         *
         * @return {Object}
         */
        getOrderProcess: function() {
            const OrderProcessNode = this.getElm().getParent(
                '[data-qui="package/quiqqer/order/bin/frontend/controls/OrderProcess"]'
            );

            return window.QUI.Controls.getById(OrderProcessNode.get('data-quiid'));
        },

        /**
         * Remove all coupons from the order
         *
         * @return {Promise}
         */
        removeCouponsFromOrder: function() {
            if (!this.isInOrder()) {
                return Promise.resolve();
            }

            const self = this;

            return new Promise(function(resolve) {
                const OrderProcess = self.getOrderProcess();

                OrderProcess.Loader.show();
                OrderProcess.getOrder().then(function(orderHash) {
                    QUIAjax.get('package_quiqqer_coupons_ajax_frontend_removeCoupons', function() {
                        resolve();
                        OrderProcess.reload();
                    }, {
                        'package': 'quiqqer/coupon',
                        orderHash: orderHash
                    });
                });
            });
        },

        /**
         * Show error message container
         * @param msg
         */
        showErrorMessage: function( msg) {
            if (!msg) {
                console.log("no error message provided");

                return;
            }

            if (!this.$ErrorMsgContainer) {
                return;
            }

            this.$ErrorMsgContainer.set('html', msg);
            this.$ErrorMsgContainer.setAttribute('data-show', '1');
        },

        /**
         * Hide error message container
         */
        hideErrorMessage: function() {
            if (!this.$ErrorMsgContainer) {
                return;
            }

            this.$ErrorMsgContainer.removeAttribute('data-show');
        },

        /**
         * Set data-invalid attribute to the input
         */
        highlightInvalidInput: function() {
            this.$Input.setAttribute('data-invalid', '1');
        },

        /**
         * Remove data-invalid attribute from the input
         */
        resetInvalidInput: function() {
            this.$Input.removeAttribute('data-invalid');
        },

        /**
         * Handle error message (show error message and highlight invalid input)
         *
         * @param err
         */
        handleError: function(err) {
            console.error(err);

            if (err.options !== undefined && err.options.message) {
                const msg = err.options.message;
                this.showErrorMessage(msg);
                this.highlightInvalidInput();
            }

            this.$running = false;
            this.Loader.hide();
        }

    });
});