'\n + order.billing.payment.selectedPaymentInstruments[0].maskedCreditCardNumber\n + '
').append($.parseHTML(html));\n\n var body = $html.find('.choice-of-bonus-product');\n var footer = $html.find('.modal-footer').children();\n\n return { body: body, footer: footer };\n}\n\n/**\n * Retrieves url to use when adding a product to the cart\n *\n * @param {Object} data - data object used to fill in dynamic portions of the html\n */\nfunction chooseBonusProducts(data) {\n $('.modal-body').spinner().start();\n\n if ($('#chooseBonusProductModal').length !== 0) {\n $('#chooseBonusProductModal').remove();\n }\n var bonusUrl;\n if (data.bonusChoiceRuleBased) {\n bonusUrl = data.showProductsUrlRuleBased;\n } else {\n bonusUrl = data.showProductsUrlListBased;\n }\n\n var htmlString = ''\n + '
'\n + '
'\n + '
'\n + ''\n + '
'\n + ''\n + '
'\n + ''\n + '
'\n + '
'\n + '
';\n $('body').append(htmlString);\n $('.modal-body').spinner().start();\n\n $.ajax({\n url: bonusUrl,\n method: 'GET',\n dataType: 'json',\n success: function (response) {\n var parsedHtml = parseHtml(response.renderedTemplate);\n $('#chooseBonusProductModal .modal-body').empty();\n $('#chooseBonusProductModal .enter-message').text(response.enterDialogMessage);\n $('#chooseBonusProductModal .modal-header .close .sr-only').text(response.closeButtonText);\n $('#chooseBonusProductModal .modal-body').html(parsedHtml.body);\n $('#chooseBonusProductModal .modal-footer').html(parsedHtml.footer);\n $('#chooseBonusProductModal').modal('show');\n $.spinner().stop();\n },\n error: function () {\n $.spinner().stop();\n }\n });\n}\n\n/**\n * Updates the Mini-Cart quantity value after the customer has pressed the \"Add to Cart\" button\n * @param {string} response - ajax response from clicking the add to cart button\n */\nfunction handlePostCartAdd(response) {\n $('.minicart').trigger('count:update', response);\n var messageType = response.error ? 'alert-danger' : 'alert-success';\n // show add to cart toast\n if (response.newBonusDiscountLineItem\n && Object.keys(response.newBonusDiscountLineItem).length !== 0) {\n chooseBonusProducts(response.newBonusDiscountLineItem);\n } else {\n if ($('.add-to-cart-messages').length === 0) {\n $('body').append(\n '
'\n );\n }\n\n $('.add-to-cart-messages').append(\n '
'\n + response.message\n + '
'\n );\n\n setTimeout(function () {\n $('.add-to-basket-alert').remove();\n }, 5000);\n }\n}\n\n/**\n * Retrieves the bundle product item ID's for the Controller to replace bundle master product\n * items with their selected variants\n *\n * @return {string[]} - List of selected bundle product item ID's\n */\nfunction getChildProducts() {\n var childProducts = [];\n $('.bundle-item').each(function () {\n childProducts.push({\n pid: $(this).find('.product-id').text(),\n quantity: parseInt($(this).find('label.quantity').data('quantity'), 10)\n });\n });\n\n return childProducts.length ? JSON.stringify(childProducts) : [];\n}\n\n/**\n * Retrieve product options\n *\n * @param {jQuery} $productContainer - DOM element for current product\n * @return {string} - Product options and their selected values\n */\nfunction getOptions($productContainer) {\n var options = $productContainer\n .find('.product-option')\n .map(function () {\n var $elOption = $(this).find('.options-select');\n var urlValue = $elOption.val();\n var selectedValueId = $elOption.find('option[value=\"' + urlValue + '\"]')\n .data('value-id');\n return {\n optionId: $(this).data('option-id'),\n selectedValueId: selectedValueId\n };\n }).toArray();\n\n return JSON.stringify(options);\n}\n\n/**\n * Makes a call to the server to report the event of adding an item to the cart\n *\n * @param {string | boolean} url - a string representing the end point to hit so that the event can be recorded, or false\n */\nfunction miniCartReportingUrl(url) {\n if (url) {\n $.ajax({\n url: url,\n method: 'GET',\n success: function () {\n // reporting urls hit on the server\n },\n error: function () {\n // no reporting urls hit on the server\n }\n });\n }\n}\n\nmodule.exports = {\n attributeSelect: attributeSelect,\n methods: {\n editBonusProducts: function (data) {\n chooseBonusProducts(data);\n }\n },\n\n focusChooseBonusProductModal: function () {\n $('body').on('shown.bs.modal', '#chooseBonusProductModal', function () {\n $('#chooseBonusProductModal').siblings().attr('aria-hidden', 'true');\n $('#chooseBonusProductModal .close').focus();\n });\n },\n\n onClosingChooseBonusProductModal: function () {\n $('body').on('hidden.bs.modal', '#chooseBonusProductModal', function () {\n $('#chooseBonusProductModal').siblings().attr('aria-hidden', 'false');\n });\n },\n\n trapChooseBonusProductModalFocus: function () {\n $('body').on('keydown', '#chooseBonusProductModal', function (e) {\n var focusParams = {\n event: e,\n containerSelector: '#chooseBonusProductModal',\n firstElementSelector: '.close',\n lastElementSelector: '.add-bonus-products'\n };\n focusHelper.setTabNextFocus(focusParams);\n });\n },\n\n colorAttribute: function () {\n $(document).on('click', '[data-attr=\"color\"] button', function (e) {\n e.preventDefault();\n\n if ($(this).attr('disabled')) {\n return;\n }\n var $productContainer = $(this).closest('.set-item');\n if (!$productContainer.length) {\n $productContainer = $(this).closest('.product-detail');\n }\n\n attributeSelect($(this).attr('data-url'), $productContainer);\n });\n },\n\n selectAttribute: function () {\n $(document).on('change', 'select[class*=\"select-\"], .options-select', function (e) {\n e.preventDefault();\n\n var $productContainer = $(this).closest('.set-item');\n if (!$productContainer.length) {\n $productContainer = $(this).closest('.product-detail');\n }\n attributeSelect(e.currentTarget.value, $productContainer);\n });\n },\n\n availability: function () {\n $(document).on('change', '.quantity-select', function (e) {\n e.preventDefault();\n\n var $productContainer = $(this).closest('.product-detail');\n if (!$productContainer.length) {\n $productContainer = $(this).closest('.modal-content').find('.product-quickview');\n }\n\n if ($('.bundle-items', $productContainer).length === 0) {\n attributeSelect($(e.currentTarget).find('option:selected').data('url'),\n $productContainer);\n }\n });\n },\n\n addToCart: function () {\n $(document).on('click', 'button.add-to-cart, button.add-to-cart-global', function () {\n var addToCartUrl;\n var pid;\n var pidsObj;\n var setPids;\n\n $('body').trigger('product:beforeAddToCart', this);\n\n if ($('.set-items').length && $(this).hasClass('add-to-cart-global')) {\n setPids = [];\n\n $('.product-detail').each(function () {\n if (!$(this).hasClass('product-set-detail')) {\n setPids.push({\n pid: $(this).find('.product-id').text(),\n qty: $(this).find('.quantity-select').val(),\n options: getOptions($(this))\n });\n }\n });\n pidsObj = JSON.stringify(setPids);\n }\n\n pid = getPidValue($(this));\n\n var $productContainer = $(this).closest('.product-detail');\n if (!$productContainer.length) {\n $productContainer = $(this).closest('.quick-view-dialog').find('.product-detail');\n }\n\n addToCartUrl = getAddToCartUrl();\n\n var form = {\n pid: pid,\n pidsObj: pidsObj,\n childProducts: getChildProducts(),\n quantity: getQuantitySelected($(this))\n };\n\n if (!$('.bundle-item').length) {\n form.options = getOptions($productContainer);\n }\n\n $(this).trigger('updateAddToCartFormData', form);\n if (addToCartUrl) {\n $.ajax({\n url: addToCartUrl,\n method: 'POST',\n data: form,\n success: function (data) {\n handlePostCartAdd(data);\n $('body').trigger('product:afterAddToCart', data);\n $.spinner().stop();\n miniCartReportingUrl(data.reportingURL);\n },\n error: function () {\n $.spinner().stop();\n }\n });\n }\n });\n },\n selectBonusProduct: function () {\n $(document).on('click', '.select-bonus-product', function () {\n var $choiceOfBonusProduct = $(this).parents('.choice-of-bonus-product');\n var pid = $(this).data('pid');\n var maxPids = $('.choose-bonus-product-dialog').data('total-qty');\n var submittedQty = parseInt($choiceOfBonusProduct.find('.bonus-quantity-select').val(), 10);\n var totalQty = 0;\n $.each($('#chooseBonusProductModal .selected-bonus-products .selected-pid'), function () {\n totalQty += $(this).data('qty');\n });\n totalQty += submittedQty;\n var optionID = $choiceOfBonusProduct.find('.product-option').data('option-id');\n var valueId = $choiceOfBonusProduct.find('.options-select option:selected').data('valueId');\n if (totalQty <= maxPids) {\n var selectedBonusProductHtml = ''\n + '
'\n + '
'\n + $choiceOfBonusProduct.find('.product-name').html()\n + '
'\n + '
'\n + '
'\n ;\n $('#chooseBonusProductModal .selected-bonus-products').append(selectedBonusProductHtml);\n $('.pre-cart-products').html(totalQty);\n $('.selected-bonus-products .bonus-summary').removeClass('alert-danger');\n } else {\n $('.selected-bonus-products .bonus-summary').addClass('alert-danger');\n }\n });\n },\n removeBonusProduct: function () {\n $(document).on('click', '.selected-pid', function () {\n $(this).remove();\n var $selected = $('#chooseBonusProductModal .selected-bonus-products .selected-pid');\n var count = 0;\n if ($selected.length) {\n $selected.each(function () {\n count += parseInt($(this).data('qty'), 10);\n });\n }\n\n $('.pre-cart-products').html(count);\n $('.selected-bonus-products .bonus-summary').removeClass('alert-danger');\n });\n },\n enableBonusProductSelection: function () {\n $('body').on('bonusproduct:updateSelectButton', function (e, response) {\n $('button.select-bonus-product', response.$productContainer).attr('disabled',\n (!response.product.readyToOrder || !response.product.available));\n var pid = response.product.id;\n $('button.select-bonus-product', response.$productContainer).data('pid', pid);\n });\n },\n showMoreBonusProducts: function () {\n $(document).on('click', '.show-more-bonus-products', function () {\n var url = $(this).data('url');\n $('.modal-content').spinner().start();\n $.ajax({\n url: url,\n method: 'GET',\n success: function (html) {\n var parsedHtml = parseHtml(html);\n $('.modal-body').append(parsedHtml.body);\n $('.show-more-bonus-products:first').remove();\n $('.modal-content').spinner().stop();\n },\n error: function () {\n $('.modal-content').spinner().stop();\n }\n });\n });\n },\n addBonusProductsToCart: function () {\n $(document).on('click', '.add-bonus-products', function () {\n var $readyToOrderBonusProducts = $('.choose-bonus-product-dialog .selected-pid');\n var queryString = '?pids=';\n var url = $('.choose-bonus-product-dialog').data('addtocarturl');\n var pidsObject = {\n bonusProducts: []\n };\n\n $.each($readyToOrderBonusProducts, function () {\n var qtyOption =\n parseInt($(this)\n .data('qty'), 10);\n\n var option = null;\n if (qtyOption > 0) {\n if ($(this).data('optionid') && $(this).data('option-selected-value')) {\n option = {};\n option.optionId = $(this).data('optionid');\n option.productId = $(this).data('pid');\n option.selectedValueId = $(this).data('option-selected-value');\n }\n pidsObject.bonusProducts.push({\n pid: $(this).data('pid'),\n qty: qtyOption,\n options: [option]\n });\n pidsObject.totalQty = parseInt($('.pre-cart-products').html(), 10);\n }\n });\n queryString += JSON.stringify(pidsObject);\n queryString = queryString + '&uuid=' + $('.choose-bonus-product-dialog').data('uuid');\n queryString = queryString + '&pliuuid=' + $('.choose-bonus-product-dialog').data('pliuuid');\n $.spinner().start();\n $.ajax({\n url: url + queryString,\n method: 'POST',\n success: function (data) {\n $.spinner().stop();\n if (data.error) {\n $('#chooseBonusProductModal').modal('hide');\n if ($('.add-to-cart-messages').length === 0) {\n $('body').append('
');\n }\n $('.add-to-cart-messages').append(\n '
'\n + data.errorMessage + '
'\n );\n setTimeout(function () {\n $('.add-to-basket-alert').remove();\n }, 3000);\n } else {\n $('.configure-bonus-product-attributes').html(data);\n $('.bonus-products-step2').removeClass('hidden-xl-down');\n $('#chooseBonusProductModal').modal('hide');\n\n if ($('.add-to-cart-messages').length === 0) {\n $('body').append('
');\n }\n $('.minicart-quantity').html(data.totalQty);\n $('.add-to-cart-messages').append(\n '
'\n + data.msgSuccess + '
'\n );\n setTimeout(function () {\n $('.add-to-basket-alert').remove();\n if ($('.cart-page').length) {\n location.reload();\n }\n }, 1500);\n }\n },\n error: function () {\n $.spinner().stop();\n }\n });\n });\n },\n\n getPidValue: getPidValue,\n getQuantitySelected: getQuantitySelected,\n miniCartReportingUrl: miniCartReportingUrl\n};\n","/* eslint-disable require-jsdoc */\nmodule.exports = function(containerElement) {\n function Constructor() {\n this.containerEl = containerElement;\n }\n\n Constructor.prototype.show = function() {\n this.containerEl.style.display = 'block';\n };\n\n Constructor.prototype.hide = function() {\n this.containerEl.style.display = 'none';\n };\n\n return new Constructor();\n};\n","const loaderInstance = require('../components/loader');\nconst helper = require('./helper');\nconst $loaderContainer = document.querySelector('.paypalLoader');\nconst loader = loaderInstance($loaderContainer);\nconst CONTENT_TYPE_JSON = 'application/json';\n\nconst AlertHandlerModel = require('../models/alertHandler');\nconst alertHandler = new AlertHandlerModel();\n\n/**\n * Updates information about an order\n * @param {boolean} isAddressNeedChange - if we need to change shipping address\n * @returns {Object} Call handling result\n */\nfunction updateOrderData(isAddressNeedChange = false) {\n loader.show();\n\n return $.ajax({\n url: helper.getUrlWithCsrfToken([window.paypalUrls.updateOrderData,\n '?isCartFlow=true', '&isAddressNeedChange=', isAddressNeedChange].join('')),\n type: 'PATCH',\n success: () => {\n loader.hide();\n window.location.href = window.paypalUrls.placeOrderStage;\n },\n error: (err) => {\n const error = JSON.parse(err.responseText);\n\n loader.hide();\n alertHandler.showError(error.errorMsg);\n\n if (error.transactionExpired) {\n location.reload();\n }\n }\n });\n}\n\n/**\n * Gets Billing Agreement Token\n *\n * @param {boolean} isCartFlow - billing agreement flow from cart\n * @param {boolean} isSkipShippingAddress - whether skip or add possibility to edit the shipping address in PayPal window\n * @returns {string} billingToken - returns a JSON response that includes token, an approval URL\n */\nfunction getBillingAgreementToken(isCartFlow, isSkipShippingAddress = false) {\n const url = helper.getUrlWithCsrfToken([window.paypalUrls.createBillingAgreementToken,\n '?isCartFlow=', isCartFlow, '&isSkipShippingAddress=', isSkipShippingAddress].join(''));\n\n return $.get(url)\n .then((data) => data);\n}\n\n/**\n * Gets Billing Agreement\n * After buyer approval, you use a billing agreement token to create the agreement.\n * @returns {Object} JSON response body that includes the billing agreement ID,\n * the state of the agreement, which is ACTIVE, and information about the payer\n */\nfunction createBillingAgreementCall() {\n return $.ajax({\n url: helper.getUrlWithCsrfToken(window.paypalUrls.createBillingAgreement),\n type: 'POST',\n contentType: CONTENT_TYPE_JSON\n });\n}\n\n/**\n * Create billing formData from fields data\n *\n * @param {Object} fieldsData - fields data values\n * @param {Element} $paypalButton - paypal button selector\n * @returns {Object} cart billing form data\n */\nfunction createCartBillingFormData(fieldsData, $paypalButton) {\n const cartBillingFormData = new FormData();\n\n if (!$paypalButton) {\n $paypalButton = document.getElementById('paypal-static-image')\n || document.getElementById('paypal-image')\n || document.getElementById('venmo-image');\n }\n\n const cartBillingFields = $paypalButton && JSON.parse($paypalButton.getAttribute('data-paypal-billing-form-fields'));\n\n Object.entries(cartBillingFields)\n .forEach(entry => {\n const [key, field] = entry;\n\n if (typeof field === 'object') {\n cartBillingFormData.append(field.name, fieldsData && fieldsData[key] ? fieldsData[key] : field.value);\n }\n });\n\n return cartBillingFormData;\n}\n\n/**\n * Calls to returnFromCart endpoint for Static image button, redirects to place order stage or shows error if it exists\n * @param {boolean} isAddressNeedChange - true if static image address same as BA\n * @returns {Object} Call handling result\n */\nfunction returnFromCart(isAddressNeedChange = false) {\n loader.show();\n\n return helper.returnFromCart(isAddressNeedChange)\n .catch((error) => {\n loader.hide();\n alertHandler.showError(error.responseText);\n });\n}\n\n/**\n * Calls to Paypal-ValidateStaticImage endpoint\n * @returns {Promise} promise from fetch with response from Paypal-ValidateStaticImage endpoint\n */\nfunction validateStaticImageAddress() {\n const paypalStaticImage = document.getElementById('paypal-static-image')\n || document.getElementById('paypal-image');\n\n return fetch(helper.getUrlWithCsrfToken(window.paypalUrls.validateStaticImage), {\n method: 'POST',\n headers: {\n 'Content-Type': CONTENT_TYPE_JSON\n },\n body: JSON.stringify({\n email: paypalStaticImage.getAttribute('data-paypal-default-ba-email'),\n formFields: paypalStaticImage.getAttribute('data-paypal-billing-form-fields')\n })\n })\n .then(response => response.json())\n .then(data => {\n return data.isAddressNeedChange;\n })\n .catch(() => {\n return false;\n });\n}\n\n/**\n * Call finishPayNow endpoint\n * @param {string} fundingSource The current paypal funding source\n * @returns {Promise} ajax call\n */\nfunction finishPayNowFlow(fundingSource) {\n const $usedPaymentMethod = document.querySelector('#usedPaymentMethod');\n const pmName = $usedPaymentMethod ? $usedPaymentMethod.value : fundingSource;\n\n return $.ajax({\n url: helper.getUrlWithCsrfToken(window.paypalUrls.finishPayNowFlow),\n type: 'POST',\n contentType: CONTENT_TYPE_JSON,\n data: JSON.stringify({\n pmName\n })\n });\n}\n\n/**\n * Makes call on saving a PayPal default address to the storefront customer.\n * @param {Object} addressObject PayPal address information.\n * @param {boolean} isAccountPage Identifies whether the source page is account.\n * @returns {Object} Whether a success or failed JSON response body.\n */\nfunction savePaypalDefaultAddress(addressObject, isAccountPage) {\n return $.ajax({\n url: window.paypalUrls.savePaypalDefaultAddress,\n type: 'POST',\n contentType: CONTENT_TYPE_JSON,\n data: JSON.stringify({ addressObject, isAccountPage })\n });\n}\n\n/**\n * Finish a PayPal payment by PayPal Pay Now flow\n * @param {string} usedPaymentMethod Current payment method name\n */\nfunction finishPayNowPayment(usedPaymentMethod) {\n finishPayNowFlow(usedPaymentMethod)\n .then(({ redirectUrl }) => {\n loader.hide();\n helper.processPayNowConfirmForm(redirectUrl);\n })\n .catch(function() {\n loader.hide();\n });\n}\n\n/**\n * Creates and sets a payPal order id\n * @param {Object} paymentSourceData The payment source data (card, apple_pay...))\n * @returns {string} paypal order id\n */\nfunction getPaypalOrderId(paymentSourceData) {\n let url = helper.getUrlWithCsrfToken(window.paypalUrls.getPaypalOrderId);\n\n url = paymentSourceData ? [url, '&paymentSourceData=', JSON.stringify(paymentSourceData)].join('') : url;\n\n return $.ajax({\n url: url,\n type: 'GET',\n contentType: CONTENT_TYPE_JSON,\n async: false\n }).responseJSON.id;\n}\n\n/**\n * Validates the hosted fields\n * @param {Object} fieldsState contains fields and validation from PP side\n * @returns {Promise} call from server with validation result\n */\nfunction validateHostedFields(fieldsState) {\n return fetch(helper.getUrlWithCsrfToken(window.paypalUrls.validateHostedFields), {\n method: 'POST',\n body: JSON.stringify(fieldsState),\n headers: { 'Content-Type': 'application/json' }\n });\n}\n\nexport {\n updateOrderData,\n getBillingAgreementToken,\n createBillingAgreementCall,\n returnFromCart,\n finishPayNowFlow,\n createCartBillingFormData,\n savePaypalDefaultAddress,\n finishPayNowPayment,\n getPaypalOrderId,\n validateStaticImageAddress,\n validateHostedFields\n};\n","'use strict';\n\nconst defaultStyle = {\n color: 'gold',\n shape: 'rect',\n layout: 'vertical',\n label: 'paypal',\n tagline: false\n};\n\nconst HIDE_CLASS = 'none';\nconst PRODUCT_DETAIL_CLASS = '.product-detail';\nconst PDP_PRICE_VALUE_CLASS = '.price .sales .value';\nconst INVALID_CLASSNAME = 'is-invalid';\n\nconst base = require('base/product/base');\n\n/**\n * Gets paypal button styles\n * @param {Element} button - button element\n * @returns {Object} with button styles or if error appears with default styles\n */\nfunction getPaypalButtonStyle(button) {\n try {\n const config = button.getAttribute('data-paypal-button-config');\n\n if (config) {\n const buttonConfigs = JSON.parse(config);\n\n return buttonConfigs.style;\n }\n\n return {\n style: defaultStyle\n };\n } catch (error) {\n return {\n style: defaultStyle\n };\n }\n}\n\n/**\n * Creates a redirecting form to Order-Confirm endpoint\n * @param {Object} param The helping object for creating a from\n * @returns {Object} form element\n */\nfunction createConfirmForm(param) {\n const form = $('