380 lines
15 KiB
JavaScript
380 lines
15 KiB
JavaScript
/*
|
|
* 2007-2020 PayPal
|
|
*
|
|
* NOTICE OF LICENSE
|
|
*
|
|
* This source file is subject to the Academic Free License (AFL 3.0)
|
|
* that is bundled with this package in the file LICENSE.txt.
|
|
* It is also available through the world-wide-web at this URL:
|
|
* http://opensource.org/licenses/afl-3.0.php
|
|
* If you did not receive a copy of the license and are unable to
|
|
* obtain it through the world-wide-web, please send an email
|
|
* to license@prestashop.com so we can send you a copy immediately.
|
|
*
|
|
* DISCLAIMER
|
|
*
|
|
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
|
|
* versions in the future. If you wish to customize PrestaShop for your
|
|
* needs please refer to http://www.prestashop.com for more information.
|
|
*
|
|
* @author 2007-2020 PayPal
|
|
* @author 202 ecommerce <tech@202-ecommerce.com>
|
|
* @copyright PayPal
|
|
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
|
|
*/
|
|
|
|
// Import functions for scrolling effect to necessary block on click
|
|
import {hoverConfig, hoverTabConfig} from './functions.js';
|
|
import { SetupAdmin } from './adminSetup.js';
|
|
import {Tools} from './tools.js';
|
|
|
|
var CustomizeCheckout = {
|
|
init() {
|
|
// Scroll to necessary block
|
|
$('[data-pp-link-settings]').on('click', (e) => {
|
|
let el = $(e.target.attributes.href.value);
|
|
if (el.length) {
|
|
hoverConfig(el);
|
|
} else {
|
|
hoverTabConfig();
|
|
}
|
|
});
|
|
|
|
// Remove effect after leaving cursor from the block
|
|
$('.defaultForm').on('mouseleave', (e) => {
|
|
$(e.currentTarget).removeClass('pp-settings-link-on');
|
|
});
|
|
|
|
CustomizeCheckout.checkConfigurations();
|
|
CustomizeCheckout.updateHookPreview();
|
|
$('input').change(CustomizeCheckout.checkConfigurations);
|
|
$('select').change(CustomizeCheckout.checkConfigurations);
|
|
$(document).on('click', '[toggle-style-configuration]', function (e) {
|
|
CustomizeCheckout.toggleStyleConfiguration(e);
|
|
CustomizeCheckout.updatePreviewButton(e);
|
|
CustomizeCheckout.updateColorDescription(e);
|
|
});
|
|
$(document).on('change', '[customize-style-shortcut-container]', CustomizeCheckout.updatePreviewButton);
|
|
$(document).on('change', '[data-type="color"]', CustomizeCheckout.updateColorDescription);
|
|
$(document).on('change', '.pp-select-preview-container', CustomizeCheckout.updateHookPreview);
|
|
$(document).on('change', '[data-type="height"]', CustomizeCheckout.checkHeight);
|
|
$(document).on('change', '[data-type="width"]', CustomizeCheckout.checkWidth);
|
|
|
|
if (typeof sectionSelector !== 'undefined') {
|
|
CustomizeCheckout.scrollTo(sectionSelector);
|
|
}
|
|
},
|
|
|
|
checkConfigurations() {
|
|
const paypalEcEnabled = $('input[name="paypal_mb_ec_enabled"]');
|
|
const paypalApiCard = $('input[name="paypal_api_card"]');
|
|
const EcOptions = [
|
|
'paypal_express_checkout_in_context',
|
|
'paypal_express_checkout_shortcut_cart',
|
|
'paypal_express_checkout_shortcut',
|
|
'paypal_express_checkout_shortcut_signup',
|
|
'paypal_api_advantages',
|
|
'paypal_config_brand',
|
|
'paypal_config_logo'
|
|
];
|
|
const MbCardOptions = [
|
|
'paypal_vaulting',
|
|
'paypal_merchant_installment'
|
|
];
|
|
const customOrderStatus = $('[name="paypal_customize_order_status"]');
|
|
const statusOptions = [
|
|
'paypal_os_refunded',
|
|
'paypal_os_canceled',
|
|
'paypal_os_accepted',
|
|
'paypal_os_capture_canceled',
|
|
'paypal_os_waiting_validation',
|
|
'paypal_os_accepted_two',
|
|
'paypal_os_processing',
|
|
'paypal_os_validation_error',
|
|
'paypal_os_refunded_paypal'
|
|
];
|
|
const customShortcutStyle = document.querySelector('[name="PAYPAL_EXPRESS_CHECKOUT_CUSTOMIZE_SHORTCUT_STYLE"]');
|
|
const shortcutLocationProduct = $('[name="paypal_express_checkout_shortcut"]');
|
|
const shortcutLocationCart = $('[name="paypal_express_checkout_shortcut_cart"]');
|
|
const shortcutLocationSignup = $('[name="paypal_express_checkout_shortcut_signup"]');
|
|
const showShortcutOnProductPage = document.querySelector('[name="paypal_express_checkout_shortcut"]');
|
|
const displayModeProductPage = document.querySelector('[name="PAYPAL_EXPRESS_CHECKOUT_DISPLAY_MODE_PRODUCT"]');
|
|
const showShortcutOnCartPage = document.querySelector('[name="paypal_express_checkout_shortcut_cart"]');
|
|
const displayModeCartPage = document.querySelector('[name="PAYPAL_EXPRESS_CHECKOUT_DISPLAY_MODE_CART"]');
|
|
const showShortcutOnSignupPage = document.querySelector('[name="paypal_express_checkout_shortcut_signup"]');
|
|
const displayModeSignupPage = document.querySelector('[name="PAYPAL_EXPRESS_CHECKOUT_DISPLAY_MODE_SIGNUP"]');
|
|
|
|
|
|
// Show the product page display configurations of a shortcut if need
|
|
if (showShortcutOnProductPage.checked && customShortcutStyle.checked) {
|
|
$('[data-section-customize-mode-product]').closest('.form-group').show();
|
|
CustomizeCheckout.showConfiguration('PAYPAL_EXPRESS_CHECKOUT_DISPLAY_MODE_PRODUCT');
|
|
CustomizeCheckout.showConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_STYLE_COLOR_PRODUCT');
|
|
|
|
if (displayModeProductPage.value === '1') {
|
|
CustomizeCheckout.showConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_HOOK_PRODUCT');
|
|
CustomizeCheckout.hideConfiguration('productPageWidgetCode');
|
|
} else if (displayModeProductPage.value === '2') {
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_HOOK_PRODUCT');
|
|
CustomizeCheckout.showConfiguration('productPageWidgetCode');
|
|
}
|
|
} else {
|
|
$('[data-section-customize-mode-product]').closest('.form-group').hide();
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_DISPLAY_MODE_PRODUCT');
|
|
CustomizeCheckout.hideConfiguration('productPageWidgetCode');
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_HOOK_PRODUCT');
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_STYLE_COLOR_PRODUCT');
|
|
}
|
|
|
|
// Show the cart page display configurations of a shortcut if need
|
|
if (showShortcutOnCartPage.checked && customShortcutStyle.checked) {
|
|
$('[data-section-customize-mode-cart]').closest('.form-group').show();
|
|
CustomizeCheckout.showConfiguration('PAYPAL_EXPRESS_CHECKOUT_DISPLAY_MODE_CART');
|
|
CustomizeCheckout.showConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_STYLE_COLOR_CART');
|
|
|
|
if (displayModeCartPage.value === '1') {
|
|
CustomizeCheckout.showConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_HOOK_CART');
|
|
CustomizeCheckout.hideConfiguration('cartPageWidgetCode');
|
|
} else if (displayModeCartPage.value === '2') {
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_HOOK_CART');
|
|
CustomizeCheckout.showConfiguration('cartPageWidgetCode');
|
|
}
|
|
} else {
|
|
$('[data-section-customize-mode-cart]').closest('.form-group').hide();
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_DISPLAY_MODE_CART');
|
|
CustomizeCheckout.hideConfiguration('cartPageWidgetCode');
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_HOOK_CART');
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_STYLE_COLOR_CART');
|
|
}
|
|
|
|
// Show the signup page display configurations of a shortcut if need
|
|
if (showShortcutOnSignupPage.checked && customShortcutStyle.checked) {
|
|
$('[data-section-customize-mode-signup]').closest('.form-group').show();
|
|
CustomizeCheckout.showConfiguration('PAYPAL_EXPRESS_CHECKOUT_DISPLAY_MODE_SIGNUP');
|
|
CustomizeCheckout.showConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_STYLE_COLOR_SIGNUP');
|
|
|
|
if (displayModeSignupPage.value === '1') {
|
|
CustomizeCheckout.showConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_HOOK_SIGNUP');
|
|
CustomizeCheckout.hideConfiguration('signupPageWidgetCode');
|
|
} else if (displayModeSignupPage.value === '2') {
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_HOOK_SIGNUP');
|
|
CustomizeCheckout.showConfiguration('signupPageWidgetCode');
|
|
}
|
|
} else {
|
|
$('[data-section-customize-mode-signup]').closest('.form-group').hide();
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_DISPLAY_MODE_SIGNUP');
|
|
CustomizeCheckout.hideConfiguration('signupPageWidgetCode');
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_HOOK_SIGNUP');
|
|
CustomizeCheckout.hideConfiguration('PAYPAL_EXPRESS_CHECKOUT_SHORTCUT_STYLE_COLOR_SIGNUP');
|
|
}
|
|
|
|
if (paypalEcEnabled.length > 0 ) {
|
|
if (paypalEcEnabled.prop('checked') == true) {
|
|
EcOptions.forEach(CustomizeCheckout.showConfiguration);
|
|
$('.message-context').show();
|
|
} else {
|
|
EcOptions.forEach(CustomizeCheckout.hideConfiguration);
|
|
$('.message-context').hide();
|
|
}
|
|
}
|
|
|
|
if (paypalApiCard.length > 0) {
|
|
if (paypalApiCard.prop('checked') == true) {
|
|
MbCardOptions.forEach(CustomizeCheckout.showConfiguration);
|
|
} else {
|
|
MbCardOptions.forEach(CustomizeCheckout.hideConfiguration);
|
|
}
|
|
}
|
|
|
|
if (customOrderStatus.length > 0) {
|
|
if (customOrderStatus.prop('checked') == true) {
|
|
statusOptions.forEach(CustomizeCheckout.showConfiguration);
|
|
$('.advanced-help-message').show();
|
|
} else {
|
|
statusOptions.forEach(CustomizeCheckout.hideConfiguration);
|
|
$('.advanced-help-message').hide();
|
|
}
|
|
}
|
|
|
|
// Show the alert if the customize shortcut style is active and any shortcut location is not active
|
|
if (customShortcutStyle !== null) {
|
|
if (
|
|
customShortcutStyle.checked === true
|
|
&& shortcutLocationProduct.prop('checked') === false
|
|
&& shortcutLocationCart.prop('checked') === false
|
|
&& shortcutLocationSignup.prop('checked') === false
|
|
) {
|
|
$('.shortcut-customize-style-alert').closest('.form-group').show();
|
|
$('.shortcut-customize-style-alert').removeClass('hidden');
|
|
} else {
|
|
$('.shortcut-customize-style-alert').closest('.form-group').hide();
|
|
$('.shortcut-customize-style-alert').addClass('hidden');
|
|
}
|
|
}
|
|
},
|
|
|
|
// Hide block while switch inactive
|
|
hideConfiguration(name) {
|
|
let selector = `[name="${name}"]`;
|
|
let configuration = $(selector);
|
|
let formGroup = configuration.closest('.col-lg-9').closest('.form-group');
|
|
|
|
formGroup.hide();
|
|
},
|
|
|
|
// Show block while switch is active
|
|
showConfiguration(name) {
|
|
let selector = `[name="${name}"]`;
|
|
let configuration = $(selector);
|
|
let formGroup = configuration.closest('.col-lg-9').closest('.form-group');
|
|
|
|
formGroup.show();
|
|
},
|
|
|
|
toggleStyleConfiguration(e) {
|
|
var button = $(e.target);
|
|
var configurations = button.closest('[customize-style-shortcut-container]').find('[configuration-section]');
|
|
var preview = button.closest('[customize-style-shortcut-container]').find('[preview-section]');
|
|
|
|
if (configurations.hasClass('hidden')) {
|
|
button.find('i').addClass('icon-remove');
|
|
button.find('i').removeClass('icon-edit');
|
|
configurations.removeClass('hidden');
|
|
preview.removeClass('invisible');
|
|
} else {
|
|
button.find('i').removeClass('icon-remove');
|
|
button.find('i').addClass('icon-edit');
|
|
configurations.addClass('hidden');
|
|
preview.addClass('invisible');
|
|
}
|
|
},
|
|
|
|
updatePreviewButton(e) {
|
|
var container = $(e.target).closest('[customize-style-shortcut-container]');
|
|
var preview = container.find('[preview-section]').find('[button-container]');
|
|
var configurations = container.find('[configuration-section]');
|
|
var color = configurations.find('[data-type="color"]').val();
|
|
var shape = configurations.find('[data-type="shape"]').val();
|
|
var label = configurations.find('[data-type="label"]').val();
|
|
var width = configurations.find('[data-type="width"]').val();
|
|
var height = configurations.find('[data-type="height"]').val();
|
|
|
|
$.ajax({
|
|
url: controllerUrl,
|
|
type: 'POST',
|
|
dataType: 'JSON',
|
|
data: {
|
|
ajax: true,
|
|
action: 'getShortcut',
|
|
color: color,
|
|
shape: shape,
|
|
label: label,
|
|
height: height,
|
|
width: width
|
|
},
|
|
success(response) {
|
|
if ('content' in response) {
|
|
preview.html(response.content);
|
|
}
|
|
},
|
|
})
|
|
},
|
|
|
|
updateColorDescription(e) {
|
|
var container = $(e.target).closest('[customize-style-shortcut-container]');
|
|
var color = container.find('[data-type="color"]').val();
|
|
|
|
container.find('[after-select-content] [data-color]').hide();
|
|
|
|
if (color === 'gold') {
|
|
container.find('[after-select-content] [data-color="gold"]').show();
|
|
} else if(color === 'blue') {
|
|
container.find('[after-select-content] [data-color="blue"]').show();
|
|
} else if (['silver', 'white', 'black'].includes(color)) {
|
|
container.find('[after-select-content] [data-color="other"]').show();
|
|
}
|
|
|
|
},
|
|
|
|
updateHookPreview() {
|
|
const containers = $('.pp-select-preview-container');
|
|
|
|
containers.each((index, container) => {
|
|
container = $(container);
|
|
let option = container.find('option:selected');
|
|
let previewPath = option.attr('data-preview-image');
|
|
let previewContainter = container.find('.pp-preview');
|
|
previewContainter.css('background-image', `url(${previewPath})`);
|
|
});
|
|
},
|
|
|
|
checkHeight(e) {
|
|
const containerSize = $(e.target).closest('[chain-input-container]');
|
|
const msgContainer = containerSize.closest('[field]').find('[msg-container]');
|
|
const inputHeight = containerSize.find('[data-type="height"]');
|
|
let height = inputHeight.val();
|
|
let msg = null;
|
|
|
|
if (height == 'undefined') {
|
|
return true;
|
|
}
|
|
|
|
height = parseInt(height);
|
|
|
|
if (height > 55 || height < 25) {
|
|
msg = Tools.getAlert(inputHeight.attr('data-msg-error'), 'danger');
|
|
}
|
|
|
|
if (msg == null) {
|
|
msgContainer.html('');
|
|
return true;
|
|
}
|
|
|
|
msgContainer.html(msg);
|
|
return true;
|
|
},
|
|
|
|
checkWidth(e) {
|
|
const containerSize = $(e.target).closest('[chain-input-container]');
|
|
const msgContainer = containerSize.closest('[field]').find('[msg-container]');
|
|
const inputWidth = containerSize.find('[data-type="width"]');
|
|
let width = inputWidth.val();
|
|
let msg = null;
|
|
|
|
if (width == 'undefined') {
|
|
return true;
|
|
}
|
|
|
|
width = parseInt(width);
|
|
|
|
if (width < 150) {
|
|
msg = Tools.getAlert(inputWidth.attr('data-msg-error'), 'danger');
|
|
}
|
|
|
|
if (msg == null) {
|
|
msgContainer.html('');
|
|
return true;
|
|
}
|
|
|
|
msgContainer.html(msg);
|
|
return true;
|
|
},
|
|
|
|
scrollTo(selector) {
|
|
const el = $(sectionSelector);
|
|
// Scroll to current block
|
|
$('html, body').animate({
|
|
scrollTop: el.offset().top - 200 + "px"
|
|
}, 900);
|
|
}
|
|
|
|
};
|
|
|
|
$(document).ready(() => {
|
|
CustomizeCheckout.init();
|
|
// Handle click on "Install Prestashop Checkout" button
|
|
$('.install-ps-checkout').click(() => {
|
|
SetupAdmin.psCheckoutHandleAction('install');
|
|
})
|
|
});
|