workarea-storefront 3.4.12

data/app/assets/javascripts/workarea/storefront/modules/authenticity_token.js

@@ -0,0 +1,27 @@
+/**
+ * @namespace WORKAREA.authenticityToken
+ */
+WORKAREA.registerModule('authenticityToken', (function () {
+    'use strict';
+
+    var authenticityToken = JST['workarea/storefront/templates/authenticity_token'],
+        appendAuthenticityToken = function(index, form) {
+            WORKAREA.currentUser.gettingUserData.done(function(user) {
+                var $form = $(form),
+                    $existingInput = $('input[name="'+user.csrf_param+'"]', $form);
+
+                if (_.isEmpty($existingInput)) {
+                    $form.append(authenticityToken(user));
+                } else {
+                    $existingInput.val(user.csrf_token);
+                }
+            });
+        },
+        init = function($scope) {
+            $('form', $scope).each(appendAuthenticityToken);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/modules/back_to_top_button.js

@@ -0,0 +1,47 @@
+/**
+ * Appends a `.back-to-top-button` component to the document's body.
+ *
+ * @namespace WORKAREA.backToTopButton
+ */
+WORKAREA.registerModule('backToTopButton', (function () {
+    'use strict';
+
+    var backToTopButton = JST['workarea/storefront/templates/back_to_top_button'],
+
+        toggleBackToTop = function (direction) {
+            $('#back-to-top-button')
+            .toggleClass('back-to-top-button--visible', direction === 'down');
+        },
+
+        initWaypoint = function (element) {
+            $(element).data('backToTopWaypoint', new Waypoint({
+                element: element,
+                handler: toggleBackToTop,
+                offset: WORKAREA.config.backToTopButton.waypointOffset
+            }));
+        },
+
+        injectButton = function (index, element) {
+            $('#main_content').append(backToTopButton());
+            return element;
+        },
+
+        setup = _.flow(injectButton, initWaypoint),
+
+        /**
+         * Add a `data-back-to-top-button` attribute to any element that should
+         * be used as a Waypoint trigger that conditionally displays a global
+         * "Back To Top" button UI.
+         *
+         * @method
+         * @name init
+         * @memberof WORKAREA.backToTopButton
+         */
+        init = function ($scope) {
+            $('[data-back-to-top-button]', $scope).each(setup);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/modules/break_points.js

@@ -0,0 +1,67 @@
+/**
+ * @namespace WORKAREA.breakPoints
+ */
+WORKAREA.registerModule('breakPoints', (function () {
+    'use strict';
+
+    var breakPoints,
+        currentMatches = [],
+        supportsMatchMedia = window.feature.matchMedia,
+        fullSupport = false,
+
+        createBreakPoints = function () {
+            if (supportsMatchMedia) {
+                breakPoints = _.reduce(WORKAREA.config.storefrontBreakPoints.sizes, function (obj, widthValue, widthName) {
+                    obj[widthName] = window.matchMedia('(min-width: ' + widthValue + 'px)');
+                    return obj;
+                }, {});
+            }
+        },
+
+        queryCurrentMatches = function () {
+            currentMatches = _.reduce(breakPoints, function (newArray, mediaQuery, sizeName) {
+                if (mediaQuery.matches) {
+                    newArray.push(sizeName);
+                }
+                return newArray;
+            }, []);
+        },
+
+        getInitialMatches = function () {
+            if (!supportsMatchMedia) {
+                currentMatches = WORKAREA.config.storefrontBreakPoints.ie9Matches;
+                return;
+            }
+
+            queryCurrentMatches();
+            fullSupport = true;
+        },
+
+        /**
+         * @method
+         * @name currentlyLessThan
+         * @memberof WORKAREA.breakPoints
+         * @param {string} widthName - Name of the breakpoint, e.g. 'small' or 'medium'
+         */
+        currentlyLessThan = function (widthName) {
+            if (_.includes(_.keys(breakPoints), widthName)) {
+                return !_.includes(currentMatches, widthName);
+            } else {
+                return false;
+            }
+        };
+
+    createBreakPoints();
+    getInitialMatches();
+
+    if (fullSupport) {
+        $(window).on('resize', _.debounce(queryCurrentMatches, 250));
+    }
+
+    return {
+        currentlyLessThan: currentlyLessThan,
+        currentMatches: currentMatches,
+        // Public method for testing only
+        createBreakPoints: createBreakPoints
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/modules/cart_count.js

@@ -0,0 +1,51 @@
+/**
+ * @namespace WORKAREA.cartCount
+ */
+WORKAREA.registerModule('cartCount', (function () {
+    'use strict';
+
+    var cartCountTemplate = JST['workarea/storefront/templates/page_header_cart_count'],
+
+        update = function ($cartCount, quantity) {
+            $cartCount.replaceWith(cartCountTemplate({
+                quantity: quantity
+            }));
+        },
+
+        show = function (quantity) {
+            var $cartCount = $('#cart_link .page-header__cart-count');
+
+            if (_.isEmpty($cartCount)) {
+                create(quantity);
+            } else {
+                update($cartCount, quantity);
+            }
+        },
+
+        create = function (quantity) {
+            $('#cart_link').append(cartCountTemplate({
+                quantity: quantity
+            }));
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.cartCount
+         */
+        init = function ($scope) {
+            var quantity = $('[data-cart-count]', $scope).data('cartCount');
+
+            if (_.isUndefined(quantity)) { return; }
+
+            show(quantity);
+        };
+
+    WORKAREA.currentUser.gettingUserData.done(function (user) {
+        create(user.cart_quantity);
+    });
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/modules/checkout_addresses_forms.js

@@ -0,0 +1,222 @@
+/**
+ * @namespace WORKAREA.checkoutAddressesForms
+ */
+WORKAREA.registerModule('checkoutAddressesForms', (function () {
+    'use strict';
+
+    var insertSameAsShippingTemplate = function (instance) {
+            var $template = $(instance.sameAsShippingTemplate());
+
+            instance.$billingAddressSection
+                .find('.checkout-addresses__heading')
+                .after($template);
+        },
+
+        toggleSameAsShipping = function (instance, checked) {
+            instance.$billingAddressSection
+                .find('[name=same_as_shipping]')
+                .prop('checked', checked)
+                .trigger('change');
+        },
+
+        showBillingAddressFields = function (instance) {
+            instance.$billingAddressSection
+                .find('.checkout-addresses__fields')
+                .removeClass('hidden-if-js-enabled');
+        },
+
+        hideBillingAddressFields = function (instance) {
+            instance.$billingAddressSection
+                .find('.checkout-addresses__fields')
+                .addClass('hidden-if-js-enabled');
+        },
+
+        serializeObject = function ($fields) {
+            var result = {},
+                fieldsArray = $fields.serializeArray();
+
+            _.forEach(fieldsArray, function (field) {
+                if (result[field.name] !== undefined) {
+                    if (!result[field.name].push) {
+                        result[field.name] = [result[field.name]];
+                    }
+
+                    result[field.name].push(field.value || '');
+                } else {
+                    result[field.name] = field.value || '';
+                }
+            });
+
+            return result;
+        },
+
+        setSerializedAddresses = function (instance) {
+            instance.shippingAddress = serializeObject(instance.$shippingAddressFields);
+            instance.billingAddress = serializeObject(instance.$billingAddressFields);
+        },
+
+        getSelectedAddress = function (instance, $select) {
+            var selectedAddressId = $select.val();
+
+            return _.find(instance.savedAddresses, { '_id': selectedAddressId });
+        },
+
+        populateSelectedAddress = function (instance, $addressSection) {
+            var region;
+
+            _.forEach(instance.selectedAddress, function (value, key) {
+                var $input = $('[name$="[' + key + ']"]', $addressSection);
+                $input.val(value);
+                if ( ! _.isEmpty(value)) { $input.trigger('change'); }
+                if (key === 'region') { region = value; }
+            });
+
+            if ( ! _.isEmpty(region)) {
+                $('[name$=address_region_select]', $addressSection).val(region);
+            }
+        },
+
+        addressesMatch = function (instance) {
+            return _.isEqual(_.values(instance.shippingAddress), _.values(instance.billingAddress));
+        },
+
+        listenForSavedAddressChange = function (instance, $addressSection) {
+            $addressSection
+                .find('select[name^="saved_addresses"]')
+                .on('change', function () {
+                    var $select = $(this);
+
+                    instance.selectedAddress = getSelectedAddress(instance, $select);
+                    populateSelectedAddress(instance, $addressSection);
+                });
+        },
+
+        setupSavedAddresses = function (instance) {
+            var insertAddresses = function ($addressSection, index) {
+                    var $template = $(instance.savedAddressesTemplate({
+                            counter: index,
+                            addresses: instance.savedAddresses
+                        }));
+
+                    $addressSection
+                        .find('.address-fields')
+                        .prepend($template);
+                };
+
+            if (_.isEmpty(instance.savedAddresses)) { return; }
+
+            instance.$shippingAddressSection
+                .add(instance.$billingAddressSection)
+                .each(function (index, section) {
+
+                    insertAddresses($(section), index);
+                    listenForSavedAddressChange(instance, $(section));
+                });
+        },
+
+        setSameAsShippingToggleState = function (instance) {
+            if (addressesMatch(instance)) {
+                toggleSameAsShipping(instance, true);
+            } else {
+                toggleSameAsShipping(instance, false);
+                showBillingAddressFields(instance);
+            }
+        },
+
+        resetSavedAddressSelect = function ($section) {
+            $section
+                .find('select[name^="saved_addresses"]')
+                .prop('selectedIndex', 0)
+                .trigger('change');
+        },
+
+        forceShippingToBilling = function (instance) {
+            instance.shippingAddress = serializeObject(instance.$shippingAddressFields);
+
+            _.forEach(instance.shippingAddress, function (value, key) {
+                key = key.replace('shipping_address', '');
+
+                $('[name$="' + key + '"]', instance.$billingAddressSection).val(value);
+            });
+        },
+
+        listenForSameAsShippingChange = function (instance) {
+            instance.$billingAddressSection
+                .find('[name=same_as_shipping]')
+                .on('change', function () {
+                    if ($(this).is(':checked')) {
+                        hideBillingAddressFields(instance);
+                        resetSavedAddressSelect(instance.$billingAddressSection);
+                    } else {
+                        showBillingAddressFields(instance);
+                    }
+                });
+        },
+
+        listenForShippingFormSubmit = function (instance) {
+            var $sameAsShippingToggle = instance.$billingAddressSection.find('[name=same_as_shipping]');
+
+            instance.$checkoutAddressesForm.on('submit', function (event) {
+                if ($sameAsShippingToggle.is(':checked')) {
+                    event.preventDefault();
+
+                    if ($(this).valid()) {
+                        forceShippingToBilling(instance);
+                        this.submit();
+                    }
+                }
+            });
+        },
+
+        consumeInstance = function (instance) {
+            setupSavedAddresses(instance);
+            setSerializedAddresses(instance);
+
+            if ($('.checkout-addresses__section--shipping').length) {
+                insertSameAsShippingTemplate(instance);
+            }
+
+            listenForSameAsShippingChange(instance);
+            setSameAsShippingToggleState(instance);
+
+            listenForShippingFormSubmit(instance);
+        },
+
+        createInstance = function ($scope, $checkoutAddressesForm) {
+            return {
+                $scope: $scope,
+                $checkoutAddressesForm: $checkoutAddressesForm,
+                $shippingAddressSection: $('.checkout-addresses__section--shipping', $checkoutAddressesForm),
+                $shippingAddressFields: $('[name*="shipping_address"]', $checkoutAddressesForm),
+                $billingAddressSection: $('.checkout-addresses__section--billing', $checkoutAddressesForm),
+                $billingAddressFields: $('[name*="billing_address"]', $checkoutAddressesForm),
+                savedAddresses: $checkoutAddressesForm.data('checkoutAddressesForm').savedAddresses,
+                shippingAddress: undefined,
+                billingAddress: undefined,
+                selectedAddress: undefined,
+                sameAsShippingTemplate: JST['workarea/storefront/templates/same_as_shipping_button_property'],
+                savedAddressesTemplate: JST['workarea/storefront/templates/saved_addresses_property']
+            };
+        },
+
+        initInstance = _.flowRight(consumeInstance, createInstance),
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.checkoutAddressesForms
+         */
+        init = function ($scope) {
+            var $checkoutAddressesForm = $(
+                    '[data-checkout-addresses-form]', $scope
+                );
+
+            if (_.isEmpty($checkoutAddressesForm)) { return; }
+
+            initInstance($scope, $checkoutAddressesForm);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/modules/checkout_primary_payments.js

@@ -0,0 +1,66 @@
+/**
+ * @namespace WORKAREA.checkoutPrimaryPayments
+ */
+WORKAREA.registerModule('checkoutPrimaryPayments', (function () {
+    'use strict';
+
+    var fieldExists = function ($field) {
+            return !_.isEmpty($field);
+        },
+
+        fieldNeedsRule = function ($field) {
+            return !$field.rules().creditcard;
+        },
+
+        addCreditCardValidation = function ($form) {
+            var $field = $('[name="credit_card[number]"]', $form);
+
+            if (fieldExists($field) && fieldNeedsRule($field)) {
+                $form
+                    .find('input[name="credit_card[number]"]')
+                    .rules('add', { extendedCreditCard: true });
+            }
+        },
+
+        handlePaymentMethodClick = function (event) {
+            $(event.currentTarget)
+                .find('input[name="payment"]')
+                .prop('checked', true)
+                .trigger('change');
+        },
+
+        activatePaymentMethod = function (event) {
+            var $selection = $(event.currentTarget),
+                $form = $selection.closest('form'),
+                $all = $form.find('.checkout-payment__primary-method'),
+                $current = $selection.closest('.checkout-payment__primary-method');
+
+            $all.removeClass('checkout-payment__primary-method--selected');
+            $current.addClass('checkout-payment__primary-method--selected');
+        },
+
+        setupForm = function (index, section) {
+            var $form = $('form', section);
+
+            addCreditCardValidation($form);
+
+            $('input[name="payment"]', $form)
+            .on('change', activatePaymentMethod);
+
+            $('.checkout-payment__primary-method', $form)
+            .on('click', handlePaymentMethodClick);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.checkoutPrimaryPayments
+         */
+        init = function ($scope) {
+            $('[data-checkout-primary-payment]', $scope).each(setupForm);
+        };
+
+    return {
+        init: init
+    };
+}()));