import angular from 'angular';
import cardTemplate from 'card.template.html';
import multiClubTemplate from 'multiclub.template.html';
import ButtonLoadingIndicator from 'src/utility/loading-indicator/button-loading-indicator.util';
/* FILTER NAMES */
const FILTER_12_MESI = '12 Mesi';
const FILTER_ACTIVE_12 = 'Active 12';
const FILTER_TUTTI = 'Tutti';
const FILTER_SEMPRE = 'Sempre';
const FILTER_DAY_NIGHT = 'Day&Night';
const FILTER_SPECIAL_AGE = 'Special Age';
const FILTER_SMART = 'Smart';
/* vars */
var ConfiguratorApp = angular.module('SubscriptionConfigurator', []);
ConfiguratorApp.config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
}]);
ConfiguratorApp.factory('dataFactory', ['$http', function ($http) {
var urlBase = window.location.pathname;
var dataFactory = {};
dataFactory.getProducts = function (club, filters) {
const query =
'?club=' + club.id +
'&duration=' + filters.duration +
'&age=' + filters.age +
'&time=' + filters.time;
return $http.get(urlBase + '/filter' + query);
};
dataFactory.getClubs = function (id, prodId) {
return $http.get(urlBase + '/clubs' + '?club=' + id + '&prodId=' + prodId );
};
dataFactory.getCartRecap = function (id) {
return $http.get(urlBase + '/cartRecap?productId='+ id);
};
return dataFactory;
}]);
ConfiguratorApp.factory('filterFactory', [function () {
const filters = {
club: '',
duration: '',
age: '',
time: ''
};
return {
getDuration: function () {
return filters.duration;
},
setDuration: function (duration) {
filters.duration = duration;
},
getAge: function () {
return filters.age;
},
setAge: function (age) {
filters.age = age;
},
getTime: function () {
return filters.time;
},
setTime: function (time) {
filters.time = time;
}
};
}]);
ConfiguratorApp.factory('modalService', [function () {
return {
openModal: function (id) {
document.getElementById(id).style.display = 'block';
},
closeModal: function (id) {
document.getElementById(id).style.display = 'none';
},
toggleModal: function (id) {
const modal = document.getElementById(id);
if (modal.style.display == 'none') {
modal.style.display = 'block';
} else {
modal.style.display = 'none';
}
},
showLoader: function (showText = true) {
document.getElementById('vrgnModalLoader').style.display = 'block';
if (!showText) {
document.getElementById('modalText').style.display = 'none';
}
},
hideLoader: function () {
document.getElementById('vrgnModalLoader').style.display = 'none';
document.getElementById('modalText').style.display = 'block';
},
toggleLoader: function () {
const loader = document.getElementById('vrgnModalLoader');
if (loader.style.display == 'none') {
loader.style.display = 'block';
} else {
loader.style.display = 'none';
}
}
};
}]);
ConfiguratorApp.directive('vrgnModal', ['modalService', function (modalService) {
return {
restrict: 'A',
link: function (scope, el, attrs) {
function openModal() {
modalService.toggleModal(attrs.vrgnModal);
}
el.on('click', openModal);
}
}
}]);
ConfiguratorApp.directive('vrgnClose', [function () {
return {
restrict: 'A',
link: function (scope, el, attrs) {
function closeModal() {
document.getElementById(attrs.vrgnClose).style.display = 'none';
}
el.on('click', closeModal);
}
}
}]);
ConfiguratorApp.directive('vrgnProdCard', function () {
return {
restrict: 'EA',
transclude: true,
scope: {
prod: '='
},
controller: ['$scope', function prodCardController($scope) {
$scope.specialPromos = null;
$scope.onClickOpenMulticlub = function (prodId) { $scope.$parent.onClickOpenMulticlub(prodId) };
$scope.openModalSpecialPromo = function () { $scope.$parent.openModalSpecialPromo($scope) };
$scope.onClickOpenCartSummary = function () { $scope.$parent.onClickOpenCartSummary($scope) };
$scope.specialPromoAvailable = function () {
const { exerpPromo, swPromo } = $scope.prod['promo'];
return exerpPromo.filter(promo => promo.active).concat(swPromo.filter(promo => promo.active)).length;
};
$scope.onClickOpenServices = function () { $scope.$parent.onClickOpenServices() };
$scope.onClickOpenCashbackModal = function (id) {$scope.$parent.onClickOpenCashbackModal(id) };
$scope.onClickCloseCashbackModal = function (id) {$scope.$parent.onClickCloseCashbackModal(id) };
$scope.onClickOpenModal = function (id) {$scope.$parent.onClickOpenModal(id) };
$scope.onClickCloseModal = function (id) {$scope.$parent.onClickCloseModal(id) };
$scope.specialPromos = $scope.specialPromoAvailable();
$scope.privacy = window.privacy;
$scope.specialCardDescription = ''
$scope.basePrice = ''
$scope.basePriceDescription = ''
$scope.promoPrice = ''
$scope.promoPriceDescription = ''
$scope.singleLinePromo = false
$scope.twoLinesPromo = false
const prod = $scope.prod;
console.log(prod)
$scope.basePrice = prod.virginExerpFullPrice ? prod.virginExerpFullPrice.toFixed(2) : prod.prices.base_price.toFixed(2);
if ($scope.specialPromos){
if (prod.promo.exerpPromo[0] != null
&& prod.promo.exerpPromo[0].extensions.virginPromotionAttributes[0].specialCardDescription != null)
{
$scope.specialCardDescription = prod.promo.exerpPromo[0].extensions.virginPromotionAttributes[0].specialCardDescription
}
if (prod.promo.exerpPromo.lenght>0
&& prod.promo.exerpPromo[0].extensions.virginPromotionAttributes[0].specialCardFullPriceDescription)
{
$scope.basePriceDescription = prod.promo.exerpPromo[0].extensions.virginPromotionAttributes[0].specialCardFullPriceDescription
}
$scope.promoPrice = prod.prices.promo_price.product.toFixed(2);
if (prod.virginExerpDiscountDescription){
$scope.promoPriceDescription = prod.virginExerpDiscountDescription;
} else if (prod.promo.exerpPromo.lenght>0
&& prod.promo.exerpPromo[0].extensions.virginPromotionAttributes[0].specialCardDiscountedPriceDescription){
$scope.promoPriceDescription = prod.promo.exerpPromo[0].extensions.virginPromotionAttributes[0].specialCardDiscountedPriceDescription
}
if ($scope.basePrice !== $scope.promoPrice && !$scope.promoPriceDescription){
$scope.singleLinePromo = true
} else if ($scope.promoPriceDescription) {
$scope.twoLinesPromo = true
}
}
}],
template: cardTemplate
};
});
ConfiguratorApp.directive('vrgnMulticlub', function () {
return {
restrict: 'EA',
transclude: true,
scope: {
multiclubData: '=' // two way binding
},
controller: ['$scope', function prodCardController($scope) {
$scope.multiclubSearch = '';
}],
template: multiClubTemplate
};
});
/**
Filtro che serve a ritornare il numero di club accessibili dato in input una lista di club e l'attuale livello di abbonamento
*/
ConfiguratorApp.filter('activeClub', function () {
return function (input, currentLevel) {
const out = Array();
for (let i = 0; i < input.length; i++) {
if ((input[i].priority <= currentLevel ) && currentLevel !== 1 ) {
out.push(input[i]);
}
}
// conditional based on optional argument
return out;
};
})
ConfiguratorApp.controller('ConfigController', ['$scope', '$http', 'dataFactory', 'modalService', function ($scope, $http, dataFactory, modalService) {
$scope.greeting = 'Welcome!';
$scope.clubList = [];
$scope.clubSearch = '';
$scope.multiclubSearch = '';
$scope.selectedProductCartRecap = {};
$scope.cardBackground = '';
$scope.tempFirstName = '';
$scope.updatePrivacy = false;
$scope.saveQuotationError = '';
$scope.loginError = '';
$scope.registrationError = '';
$scope.updateDataError = '';
$scope.customerFirstName = window.context.customer.firstName;
$scope.customerLastName = window.context.customer.lastName;
$scope.customerEmail = window.context.customer.email;
$scope.customerNewEmail = window.context.customer.email;
$scope.customerPhone = window.context.customer.customFields.phone_number;
$scope.specialPrimoPrivacyUpdate = window.privacy;
localStorage.setItem('userEmail', window.context.customer.email);
$scope.formUpdateData = {
privacy : window.privacy
}
$scope.formRegisterData = {
privacy : window.privacy
}
$scope.filters = {
club: '',
duration: window.page.durationFacet.find(durationFacetObj => durationFacetObj.default === true).id,
age: window.page.ageFacet.find(ageFacetObj => ageFacetObj.default === true).id,
time: window.page.timeFacet.find(timeFacetObj => timeFacetObj.default === true).id
};
$scope.selectedClub = window.page.preferredClub;
$scope.productList = [];
$scope.upgradeList = [];
$scope.allProducts = [];
$scope.multiclubData = {};
$scope.currentPromoProduct = '';
$scope.oldAgeValue = '';
$scope.init = function () {
$scope.clubList = window.clubList;
$scope.actionSearchProd(true);
$scope.checkActive12Empty();
};
$scope.checkActive12Empty = async function () {
const filters = JSON.parse(JSON.stringify($scope.filters));
filters.duration = $scope.getActive12FilterId();
filters.age = $scope.getTuttiFilterId();
filters.time = $scope.getSempreFilterId();
dataFactory.getProducts(
$scope.selectedClub,
filters
).then(function successCallback(response) {
if(response.data.results.length == 0) {
$scope.disableBtn($scope.getActive12BtnUI());
if ($scope.filters.duration == $scope.getActive12FilterId()) {
$scope.filters.duration = $scope.get12MesiFilterId();
$scope.actionSearchProd();
}
} else {
$scope.enableBtn($scope.getActive12BtnUI());
}
}, function errorCallback(response) {
console.error('Response: ', response);
});
}
$scope.actionSearchProd = function (init, showTextLoading = false) {
modalService.showLoader(showTextLoading);
$scope.checkIntegrityRequest();
document.getElementById('vrgnCartSummaryRecap').style.display = 'none';
if (!init) {
$scope.resetColorLevelChange();
}
dataFactory.getProducts(
$scope.selectedClub,
$scope.filters
).then(function successCallback(response) {
$scope.productList = response.data.results;
if ($scope.productList.length > 0 && $scope.productList[0].upgrades) {
$scope.upgradeList = $scope.productList[0].upgrades;
$scope.allProducts = $scope.productList.concat($scope.productList[0].upgrades);
}
$scope.resetColorLevelChange();
$scope.checkFilters();
$scope.oldAgeValue = $scope.filters.age;
modalService.hideLoader();
}, function errorCallback(response) {
console.error('Response: ', response);
});
};
$scope.checkIntegrityRequest = function () {
if ($scope.isSpecialAgeChecked() && ($scope.filters.age != $scope.oldAgeValue)) {
$scope.filters.time = $scope.getSempreFilterId();
} else if ($scope.isDayNightChecked()) {
$scope.filters.age = $scope.getTuttiFilterId();
}
if ($scope.shouldDisableDaynightTutti()) {
$scope.filters.age = $scope.getTuttiFilterId();
$scope.filters.time = $scope.getSempreFilterId();
}
}
$scope.shouldDisableDaynightTutti = function () {
return $scope.isActive12Checked() || $scope.isSmartChecked();
}
$scope.get12MesiFilterId = function () {
return window.page.durationFacet.find((e) => e.name == FILTER_12_MESI).id;
}
$scope.getActive12FilterId = function () {
return window.page.durationFacet.find((e) => e.name == FILTER_ACTIVE_12).id;
}
$scope.getTuttiFilterId = function () {
return window.page.ageFacet.find((e) => e.name == FILTER_TUTTI).id;
}
$scope.getSempreFilterId = function () {
return window.page.timeFacet.find((e) => e.name == FILTER_SEMPRE).id;
}
$scope.checkFilters = function () {
$scope.enableAgeFilters();
$scope.enableTimeFilters();
if ($scope.shouldDisableDaynightTutti()) {
$scope.disableBtn($scope.getSpecialAgeBtnUI());
$scope.disableBtn($scope.getDayNightBtnUI());
}
}
/* ButtonUI getters */
$scope.getSpecialAgeBtnUI = function () {
return document.getElementById(FILTER_SPECIAL_AGE).parentNode;
}
$scope.getDayNightBtnUI = function () {
return document.getElementById(FILTER_DAY_NIGHT).parentNode;
}
$scope.getSempreBtnUI = function () {
return document.getElementById(FILTER_SEMPRE).parentNode;
}
$scope.getTuttiBtnUI = function () {
return document.getElementById(FILTER_TUTTI).parentNode;
}
$scope.getActive12BtnUI = function () {
return document.getElementById(FILTER_ACTIVE_12).parentNode;
}
/* ButtonUI getters */
$scope.getSpecialAgeBtn = function () {
return $scope.getFilterBtnById(FILTER_SPECIAL_AGE);
}
$scope.getDayNightBtn = function () {
return $scope.getFilterBtnById(FILTER_DAY_NIGHT);
}
$scope.getSempreBtn = function () {
return $scope.getFilterBtnById(FILTER_SEMPRE);
}
$scope.getTuttiBtn = function () {
return $scope.getFilterBtnById(FILTER_TUTTI);
}
/* Button checkers */
$scope.isActive12Checked = function () {
return $scope.isDurationBtnChecked(FILTER_ACTIVE_12);
}
$scope.isSmartChecked = function () {
return $scope.isDurationBtnChecked(FILTER_SMART);
}
$scope.isSpecialAgeChecked = function () {
return $scope.isAgeBtnChecked(FILTER_SPECIAL_AGE);
}
$scope.isDayNightChecked = function () {
return $scope.isTimeBtnChecked(FILTER_DAY_NIGHT);
}
$scope.isDurationBtnChecked = function (id) {
return window.page.durationFacet.some((e) => e.id == $scope.filters.duration && e.name == id);
}
$scope.isAgeBtnChecked = function (id) {
return window.page.ageFacet.some((e) => e.id == $scope.filters.age && e.name == id);
}
$scope.isTimeBtnChecked = function (id) {
return window.page.timeFacet.some((e) => e.id == $scope.filters.time && e.name == id);
}
/* Visibility utils */
$scope.enableAgeFilters = function () {
$scope.enableGroupFilters(document.getElementById('ageGroup'));
}
$scope.enableTimeFilters = function () {
$scope.enableGroupFilters(document.getElementById('timeGroup'));
}
$scope.enableGroupFilters = function (group) {
Array.from(group.children).map((e) => $scope.enableBtn(e));
}
$scope.disableBtn = function (btn) {
btn.classList.add('disabled');
// change the tip to warn that the product is not available
const tooltip = btn.querySelector('.tooltipWrapper');
if (tooltip) {
tooltip.querySelector('.description').classList.add('tooltipHours-disabled');
tooltip.querySelector('.unavailableProductClubTooltipText').classList.remove('tooltipHours-disabled');
}
}
$scope.enableBtn = function (btn) {
btn.classList.remove('disabled');
// change the tip to warn that the product is available
const tooltip = btn.querySelector('.tooltipWrapper');
if (tooltip) {
tooltip.querySelector('.description').classList.remove('tooltipHours-disabled');
tooltip.querySelector('.unavailableProductClubTooltipText').classList.add('tooltipHours-disabled');
}
}
/* Html element utils */
$scope.getFilterBtnById = function (id) {
const inputId = document.getElementById(id).parentNode.getAttribute('for');
return document.querySelector(`input[id='${inputId}']`);
}
$scope.onClickOpenModal = function (modalId) {
document.getElementById(modalId).style.display = 'block';
document.body.style.overflow = 'hidden';
};
$scope.onClickCloseModal = function (modalId) {
document.getElementById(modalId).style.display = 'none';
document.body.style.overflow = 'auto';
// Remove the appended HTML
if (modalId === 'vrgnCfgSpecialPromo' || modalId === 'vrgnCfgUpdatePrivacy') {
const appendedPromoHTML = document.querySelectorAll(`#${modalId} [data-promo-index]`).length > 0;
if (appendedPromoHTML) {
document.querySelectorAll(`#${modalId} [data-promo-index]`).forEach(element => element.remove());
}
}
};
$scope.onClickOpenCashbackModal = function (modalId) {
const el = document.querySelector('div[data-cashbackmodal-id=c' + modalId +']');
if(el) {
el.style.display = 'block';
document.body.style.overflow = 'hidden';
}
};
$scope.onClickCloseCashbackModal = function (modalId) {
const el = document.querySelector('div[data-cashbackmodal-id=c' + modalId +']');
if(el) {
el.style.display = 'none';
document.body.style.overflow = 'auto';
}
};
$scope.onClickSelectClub = function (club) {
$scope.selectedClub = club;
$scope.actionSearchProd(null, true);
$scope.onClickCloseModal('vrgnClubSelectionDialog');
$scope.checkActive12Empty();
};
$scope.onClickOpenMulticlub = function (prodId) {
modalService.showLoader();
dataFactory.getClubs(
$scope.selectedClub.id, prodId
).then(function successCallback(response) {
$scope.multiclubData = response.data.url;
modalService.openModal('vrgnCfgMulticlubDialog');
modalService.hideLoader();
}, function errorCallback(response) {
modalService.hideLoader();
console.error('Response: ', response);
});
};
$scope.openModalSpecialPromo = function (selectedCard) {
// Store the current clicked product, so that we can use it in the modal.
$scope.currentPromoProduct = selectedCard.prod;
modalService.showLoader();
if ($scope.updatePrivacy) {
/* CASE: User has changed privacy value via button in previous modal (NO RELOAD) */
$scope.updateModalPromoData('vrgnCfgSpecialPromo');
modalService.openModal('vrgnCfgSpecialPromo');
} else {
/* CASE: User privacy is `true` (ON PAGE LOAD) */
$scope.updateModalPromoData('vrgnCfgUpdatePrivacy');
modalService.openModal('vrgnCfgUpdatePrivacy');
}
modalService.hideLoader();
};
$scope.openModalQuotation = function () {
modalService.showLoader();
modalService.openModal('quotationPopUp');
modalService.hideLoader();
};
$scope.onClickOpenCartSummary = function (selectedCard) {
dataFactory.getCartRecap(
selectedCard.prod.id
).then(function successCallback(response) {
$scope.selectedProductCartRecap = response.data.results;
document.getElementById('vrgnCartSummaryRecap').style.display = 'flex';
const hiddenProductIdField = document.createElement('input');
hiddenProductIdField.type = 'hidden';
hiddenProductIdField.value = selectedCard.prod.id;
hiddenProductIdField.name = 'productId';
document.getElementById('registrationUserFormCheckout').appendChild(hiddenProductIdField);
document.getElementById('loginUserForm').appendChild(hiddenProductIdField);
$scope.onColorLevelChange(selectedCard.prod);
}, function errorCallback(response) {
document.getElementById('vrgnCartSummaryRecap').style.display = 'none';
console.error('Response Error : ', response);
});
};
$scope.resetColorLevelChange = function () {
const overrideColor = true;
let isPromoDaPaura = false;
if ($scope.productList[0] && 'undefined' !== typeof $scope.productList[0].badgeText && $scope.productList[0].badgeText === 'Promo da paura'){
isPromoDaPaura = true;
}
for (let i = 0; i < document.getElementsByClassName('vrgnCfgFilterGroup').length; i++) {
for (let x = 0; x < document.getElementsByClassName('vrgnCfgFilterGroup')[i].children.length; x++) {
if (document.getElementsByClassName('vrgnCfgFilterGroup')[i].children[x].checked == true) {
var radioChecked = document.getElementsByClassName('vrgnCfgFilterGroup')[i].children[x].nextElementSibling.children[0];
if (overrideColor) {
radioChecked.style.background = '#E10A0A';
} else {
radioChecked.style.background = '#3e3e3e';
}
if (document.getElementsByClassName($scope.cardBackground).length != 0) {
radioChecked.classList.remove($scope.cardBackground)
}
} else if (document.getElementsByClassName('vrgnCfgFilterGroup')[i].children[x].checked == false) {
var radioNotChecked = document.getElementsByClassName('vrgnCfgFilterGroup')[i].children[x].nextElementSibling.children[0];
radioNotChecked.style.background = '#f7f6f9';
if (document.getElementsByClassName($scope.cardBackground).length != 0) {
radioNotChecked.classList.remove($scope.cardBackground)
}
}
if (document.getElementsByClassName('vrgnCfgFilterGroup')[i].children[x].children[0]) {
const obj = document.getElementsByClassName('vrgnCfgFilterGroup')[i].children[x].children[0];
if (isPromoDaPaura && (obj.id == '12' || obj.id == FILTER_SPECIAL_AGE || obj.id == FILTER_DAY_NIGHT)) {
obj.style.background = '#E10A0A';
}
}
}
}
}
$scope.onColorLevelChange = function (selectedCard) {
// REFACTORING
$scope.resetColorLevelChange()
const overrideColor = true;
const overrideGroupColor = 1;
if (overrideColor) {
selectedCard.level = overrideGroupColor;
}
$scope.cardBackground = 'card-background-' + selectedCard.level;
var cardBackground = 'card-background-' + selectedCard.level;
var cardBorder= 'card-border-' + selectedCard.level;
for (let i = 0; i < document.getElementsByClassName('vrgnCfgFilterGroup').length; i++) {
for (let x = 0; x < document.getElementsByClassName('vrgnCfgFilterGroup')[i].children.length; x++) {
if (document.getElementsByClassName('vrgnCfgFilterGroup')[i].children[x].checked == true) {
var radioChecked = document.getElementsByClassName('vrgnCfgFilterGroup')[i].children[x].nextElementSibling.children[0];
radioChecked.classList.add(cardBackground)
}
}
}
var card = 'card_' + selectedCard.id;
const vrgnCartCheckout = document.getElementsByClassName('vrgnCartCheckout')[0]
vrgnCartCheckout.className = vrgnCartCheckout.className.replace(/\bcard-background-+?/g, '');
const rightSectionVrgnCart = document.getElementsByClassName('rightSectionVrgnCart')[0]
rightSectionVrgnCart.className = rightSectionVrgnCart.className.replace(/\bcard-background-+?/g, '');
for (let i = 0; i < document.getElementsByClassName('vrgnCgfCardButtonContainer').length; i++) {
if (!(document.getElementsByClassName('vrgnCgfCardButtonContainer')[i].classList.contains(card))) {
const vrgnCgfCardButtonContainer = document.getElementsByClassName('vrgnCgfCardButtonContainer')[i]
vrgnCgfCardButtonContainer.className = vrgnCgfCardButtonContainer.className.replace(/\bcard-background-+?/g, '');
vrgnCgfCardButtonContainer.children[0].className = vrgnCgfCardButtonContainer.children[0].className.replace(/\bcard-background-+?/g, '');
vrgnCgfCardButtonContainer.children[0].style.cssText = 'border: 1px solid #000'
vrgnCgfCardButtonContainer.children[0].children[0].style.cssText = 'display : none;'
vrgnCgfCardButtonContainer.parentElement.className = vrgnCgfCardButtonContainer.parentElement.className.replace(/\bcard-border-+?/g, '');
}
}
document.getElementsByClassName(card)[0].classList.add(cardBackground);
document.getElementsByClassName(card)[0].children[0].classList.add(cardBackground);
document.getElementsByClassName(card)[0].children[0].style.cssText = 'border: 0px;'
document.getElementsByClassName(card)[0].children[0].children[0].style.cssText = 'display : block; fill : #fff;'
document.getElementsByClassName(card)[0].parentElement.classList.add(cardBorder);
document.getElementsByClassName('vrgnCartCheckout')[0].classList.add(cardBackground);
document.getElementsByClassName('rightSectionVrgnCart')[0].classList.add(cardBackground);
};
$scope.openModalChangePersonalData = function () {
modalService.showLoader();
modalService.openModal('vrgnCfgChangeData');
modalService.hideLoader();
};
$scope.updateUserData = function (event) {
// gestione nome parent nello scope
$scope.tempFirstName = document.getElementsByName('firstName')[0].value;
var formDataArray = $('#formChangeData').serializeArray();
var formData = new FormData();
for (var key in formDataArray) {
formData.append(formDataArray[key].name, formDataArray[key].value)
if(formDataArray[key].name == 'email'){
var newEmail = formDataArray[key].value;
}
if(formDataArray[key].name == 'addUser'){
var newUser = formDataArray[key].value;
}
if(formDataArray[key].name == 'privacy'){
$scope.specialPrimoPrivacyUpdate = formDataArray[key].value == 0 ? false : true;
// HACK to show/hide the different prices, depending on the privacy value
if($scope.specialPrimoPrivacyUpdate){
$scope.showPromoDiscounts();
}
}
}
if(typeof newUser == 'undefined'){
$scope.customerNewEmail = newEmail;
localStorage.setItem('userEmail', newEmail);
}
$http({
method: 'POST',
url: 'configurator/editData',
headers: {'Content-Type': undefined },
data: formData
}).then(function successCallback(response) {
if (response.data.error) {
$scope.updateDataError = response.data.messageSnippet;
} else {
$scope.updateDataError = '';
if (newUser) {
$scope.productList = response.data.results;
}
$scope.onClickCloseModal('vrgnCfgChangeData');
}
const submit = event.target;
$scope.removeSwButtonLoader(submit);
}, function errorCallback(response) {
console.log(response)
});
};
$scope.updateUserDataValues = function (event, addUser) {
const reset = !addUser;
$scope.customerFirstName = !reset ? window.context.customer.firstName : '';
$scope.customerLastName = !reset ? window.context.customer.lastName : '';
$scope.customerEmail = !reset ? window.context.customer.email : '';
$scope.customerPhone = !reset ? window.context.customer.customFields.phone_number : '';
};
$scope.updateUserPrivacy = function (arg) {
var formDataArray = $('#formUpdatePrivacy').serializeArray();
var formData = new FormData();
$scope.updatePrivacy = arg;
for (var key in formDataArray) {
formData.append(formDataArray[key].name, formDataArray[key].value);
}
formData.append('privacy', arg);
if (arg == true) {
$scope.updateImplicitRegistrationPrivacy();
/* CASE: User has changed privacy value to `true` via button in previous modal */
document.getElementById('vrgnCartSummaryRecap').style.display = 'none';
$scope.resetColorLevelChange();
for (let i = 0; i < document.getElementsByClassName('vrgnCgfCardButtonContainer').length; i++) {
const vrgnCgfCardButtonContainer = document.getElementsByClassName('vrgnCgfCardButtonContainer')[i];
vrgnCgfCardButtonContainer.className = vrgnCgfCardButtonContainer.className.replace(/\bcard-background-+?/g, '');
vrgnCgfCardButtonContainer.children[0].className = vrgnCgfCardButtonContainer.children[0].className.replace(/\bcard-background-+?/g, '');
vrgnCgfCardButtonContainer.children[0].style.cssText = 'border: 1px solid #000';
vrgnCgfCardButtonContainer.children[0].children[0].style.cssText = 'display : none;';
vrgnCgfCardButtonContainer.parentElement.className = vrgnCgfCardButtonContainer.parentElement.className.replace(/\bcard-border-+?/g, '');
}
$scope.onClickCloseModal('vrgnCfgUpdatePrivacy');
$scope.specialPrimoPrivacyUpdate = true;
$scope.updateModalPromoData('vrgnCfgSpecialPromo');
// HACK to show/hide the different prices, depending on the privacy value
$scope.showPromoDiscounts();
modalService.openModal('vrgnCfgSpecialPromo');
$http({
method: 'POST',
url: 'configurator/privacyUpdate',
headers: {'Content-Type': undefined },
data: formData
}).then(function successCallback(response) {
console.log(response)
}, function errorCallback(response) {
console.log(response)
});
} else if (arg == null) {
$scope.onClickCloseModal('vrgnCfgUpdatePrivacy');
}
};
$scope.updateImplicitRegistrationPrivacy = function () {
const form = document.querySelector('#registrationUserFormCheckout');
const privacyCheckboxes = document.querySelector('.vrgnPrivacy');
const checkboxSi = document.querySelector('#registrationPrivacySi');
const checkboxNo = document.querySelector('#registrationPrivacyNo');
if (form && privacyCheckboxes && checkboxSi) {
privacyCheckboxes.classList.add('d-none');
checkboxSi.checked = true;
if (checkboxNo) {
checkboxNo.checked = false;
}
}
}
$scope.saveQuotation = function () {
var formDataArray = $('#formSaveQuotation').serializeArray();
var formData = new FormData();
for (var key in formDataArray) {
formData.append(formDataArray[key].name, formDataArray[key].value)
}
$http({
method: 'POST',
url: 'configurator/quotation',
headers: {'Content-Type': undefined },
data: formData
}).then(function successCallback(response) {
if (response.data.success) {
$scope.onClickCloseModal('quotationPopUp');
$scope.selectedProductCartRecap.quotationAvailable = false;
} else {
$scope.saveQuotationError = response.data.snippetMessage;
}
}, function errorCallback(response) {
console.log(response)
});
}
$scope.loginUser = function (event) {
// add loading animation
const loader = new ButtonLoadingIndicator(document.querySelector('#loginUserForm > .loginButton'));
loader.create();
const submit = event.target;
const form = submit.form;
const formData = new FormData(form);
const email = form.querySelector('[name="username"]').value;
const password = form.querySelector('[name="password"]').value;
if (email !== '' && password !== '') {
$http({
method: 'POST',
url: 'configurator/login',
headers: {'Content-Type': undefined },
data: formData
}).then(function successCallback(response) {
loader.remove();
if (response.data.success) {
$scope.loginError = '';
location.reload();
} else {
$scope.loginError = response.data.messageSnippet;
}
$scope.removeSwButtonLoader(submit);
}, function errorCallback(response) {
loader.remove();
console.log(response)
});
} else {
$scope.loginError = 'Inserisci tutti i campi necessari'
}
};
$scope.registrationUser = function () {
// add loading animation
const loader = new ButtonLoadingIndicator(document.querySelector('#registrationUserForm > .registrationButton'));
loader.create();
var formDataArray = $('#registrationUserForm').serializeArray();
var formData = new FormData();
for (var key in formDataArray) {
formData.append(formDataArray[key].name, formDataArray[key].value)
}
$http({
method: 'POST',
url: 'configurator/register',
headers: {'Content-Type': undefined },
data: formData
}).then(function successCallback(response) {
loader.remove();
if (response.data.success) {
$scope.registrationError = '';
location.reload();
} else {
$scope.registrationError = response.data.messageSnippet;
}
}, function errorCallback(response) {
loader.remove();
console.log(response)
});
};
$scope.checkUncheckPrivacyUpdateData = function(event){
if ($scope.formUpdateData.privacy == event.target.value)
$scope.formUpdateData.privacy = '';
};
$scope.checkUncheckPrivacyRegistration = function(event){
if ($scope.formRegisterData.privacy == event.target.value)
$scope.formRegisterData.privacy = '';
};
/**
* Remove appended Shopware loader
*
* INFO: By using `data-form-submit-loader="true"` on the button[type="submit"],
* a SW-plugin is triggered and a loader element will appended to it and the button disabled.
*
* @param submit - The submit button
*/
$scope.removeSwButtonLoader = function (submit) {
const loaderAttr = submit.hasAttribute('data-form-submit-loader');
if (!loaderAttr) return;
const loader = submit.querySelector('.loader');
submit.removeAttribute('disabled');
loader.remove();
};
/**
* Handles the display of active promotion list in the modal
*
* @param {String} modalId - The ID of promo modal
*/
$scope.updateModalPromoData = function (modalId) {
const prodData = $scope.currentPromoProduct;
const promoList = document.querySelector(`#${modalId} .promo-list-target`);
if (!promoList) {
return;
}
const promoDeadlineLabelEl = document.querySelector(`#${modalId} .deadline-promo-label`);
const promoDeadlineLabel = promoDeadlineLabelEl ? promoDeadlineLabelEl.textContent : '' ;
const promos = $scope.getAllProductPromos(prodData);
// Append HTML for each promo
promos.forEach(function (promo, index) {
const promoDesc = promo.extensions.virginPromotionAttributes[0].description;
const promoTitle = promoDesc ? promoDesc : promo.name;
let promoHtml = `
<div class="promo content" data-promo-index="${index}">
<div class="promo-title">${promoTitle}</div>
</div>
`;
if (promo.validUntil && promo.extensions.virginPromotionAttributes[0].hideEndDate !== true) {
const validUntil = new Date(promo.validUntil).toLocaleDateString('it-it');
promoHtml = `
<div class="promo content" data-promo-index="${index}">
<div class="promo-title">${promoTitle}</div>
<div class="promo-deadline">${promoDeadlineLabel} ${validUntil} </div>
</div>
`;
}
promoList.innerHTML += promoHtml;
});
};
/**
* Get all special promotions of current product (on clicked card promo batch)
*
* @param {String} prodData - The data of the current card
*
* @return {object} promos - All promos
*/
$scope.getAllProductPromos = function (prodData) {
const promos = [];
prodData.promo.exerpPromo.forEach(function (exerpPromo) {
if (exerpPromo.active) {
promos.push(exerpPromo);
}
});
prodData.promo.swPromo.forEach(function (swPromo) {
if (swPromo.active) {
promos.push(swPromo);
}
});
return promos;
};
/**
* Check if promotions are available
*
* INFO: The return is NOT working correctly right now. So we use an override CSS-HACK: `d-block`
* @param {object} selectedCard - The ID of promo modal
*
* @return {boolean} result - Returns true/false, when promos are available.
*/
$scope.specialPromoAvailable = function (selectedCard) {
const prodData = selectedCard.prod;
const promos = $scope.getAllProductPromos(prodData);
const result = promos.length > 0;
$scope.specialPromos = promos.length;
if ($scope.specialPromos) {
// HACK: Override the `d-none`!!!
document.querySelector(`#prod_${selectedCard.prod.id} .vrgnCgfSpecialPromo`).classList.add('d-block');
}
return result;
};
/**
* FRONTEND HACK:
* Set class to `.vrgnCardContainer` element, to show/hide the promo prices by CSS depends on the privacy value.
*/
$scope.showPromoDiscounts = function () {
document.querySelector('.vrgnCardContainer').classList.remove('privacy-no');
document.querySelector('.vrgnCardContainer').classList.add('privacy-yes');
const vrgnCgfCardCashback = document.querySelector('.vrgnCgfCardCashback');
if(vrgnCgfCardCashback) {
vrgnCgfCardCashback.style.display = 'block';
}
};
$scope.init();
}]);
export default ConfiguratorApp;