Initial commit

api-wiaas/client/js/components/activity/activityChecker.directive.js

@@ -0,0 +1,43 @@
+(function () {
+    global.dashModule
+        .controller('activityCheckerCtrl', ['$scope', '$timeout', '$window', '$http', 'utilsService', activityCheckerCtrl])
+        .directive('activityChecker', [activityCheckerDirective]);
+
+    function activityCheckerDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'utils/html/activityCheckerTemplate'
+        };
+    }
+
+    function activityCheckerCtrl($scope, $timeout, $window, $http, utilsService) {
+        $scope.checkLastActivity = checkLastActivity;
+        $scope.activityDialogClose = activityDialogClose;
+        $scope.hasTimeExpired = false;
+
+        const MAX_INACTIVE_TIME = 1000 * 60 * 24;
+
+        function checkLastActivity() {
+            $timeout(checkActivityOnServer, MAX_INACTIVE_TIME);
+        }
+
+        function checkActivityOnServer(){
+            $http({
+                method: 'POST',
+                url: 'utils/api/checkActivityStatus'
+            }).then(showInactiveMessage, utilsService.onHttpError);
+        }
+
+        function showInactiveMessage(response) {
+            if(response.data && response.data.hasSessionExpired === true){
+                $scope.hasTimeExpired = true;
+            }else{
+                checkLastActivity();
+            }
+        }
+
+        function activityDialogClose(){
+            $window.location.href = 'logout.php';
+        }
+    }
+})();

api-wiaas/client/js/components/bids/add-bid-margin.controller.js

@@ -0,0 +1,46 @@
+(function () {
+    global.dashModule
+        .controller('addBidMarginCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', addBidMarginCtrl])
+        .directive('addBidMargin', [addBidMarginDirective]);
+
+    function addBidMarginDirective(){
+        return {
+            restrict: 'E',
+            templateUrl: 'bids/html/addBidMarginTemplate'
+        };
+    }
+    function addBidMarginCtrl($scope, $http, $, $translate, utilsService) {
+        $scope.init = init;
+        $scope.saveBidMargin = saveBidMargin;
+        $scope.bidMargin = {};
+
+        function init(bid){
+            $scope.bidMargin.fixedExtra = bid.fixedExtra;
+            $scope.bidMargin.recurrentExtra = bid.recurrentExtra;
+            $scope.bidMargin.servicesExtra = bid.servicesExtra;
+        }
+
+        function saveBidMargin(params){
+            $http({
+                method: 'POST',
+                url: 'bids/api/addBidMargin',
+                data: $.param({
+                    idBid: params.bid.idBid,
+                    bidMargin: JSON.stringify($scope.bidMargin)
+                })
+            }).then((response)=>{displayMessage(response, params.getBids);} , utilsService.onHttpError);
+        }
+
+        function displayMessage(response, callback){
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('bids.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if(messageObj.code === 'success'){
+                        callback();
+                    }
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/bids/add-bid.directive.js

@@ -0,0 +1,145 @@
+(function () {
+    global.dashModule
+        .controller('addBidCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', addBidController])
+        .directive('addBid', [addBidDirective]);
+
+    function addBidDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'bids/html/addBidTemplate'
+        };
+    }
+
+    function addBidController($scope, $http, $, $translate, utilsService) {
+        $scope.initAddBid = initAddBid;
+        $scope.bid = {};
+        $scope.onCLSelect = onCLSelect;
+        $scope.onCustomerSelect = onCustomerSelect;
+        $scope.onPackageSelect = onPackageSelect;
+        $scope.onPayTypeSelect = onPayTypeSelect;
+        $scope.isAddSupBidDialogVisible = false;
+        $scope.isLinkSupBidDialogVisible = false;
+        $scope.showSupBidDialog = showSupBidDialog;
+        $scope.showLinkBidDialog = showLinkBidDialog;
+        $scope.linkSuppliers = linkSuppliers;
+        $scope.saveBid = saveBid;
+        $scope.supplierBids = [];
+
+        function initAddBid() {
+            getClCustomers();
+        }
+
+        function getClCustomers() {
+            $http({
+                method: 'GET',
+                url: 'bids/api/getClCustomers'
+            }).then(setClCustomers, utilsService.onHttpError);
+        }
+
+        function setClCustomers(response) {
+            if (response.data) {
+                $scope.clCustomers = response.data;
+            }
+        }
+
+        function getPackages(idCommercialLead, idCustomer) {
+            $http({
+                method: 'POST',
+                url: 'bids/api/getPackages',
+                data: $.param({
+                    idCommercialLead,
+                    idCustomer
+                })
+            }).then(setPackages, utilsService.onHttpError);
+        }
+
+        function setPackages(response) {
+            if (response.data) {
+                $scope.packages = response.data;
+            }
+        }
+
+        function getPaymentTypes(idCommercialLead, idCustomer, idPackage) {
+            $http({
+                method: 'POST',
+                url: 'bids/api/getPayTypes',
+                data: $.param({
+                    idCommercialLead,
+                    idCustomer,
+                    idPackage
+                })
+            }).then(setPayTypes, utilsService.onHttpError);
+        }
+
+        function setPayTypes(response) {
+            if (response.data) {
+                $scope.payTypes = response.data;
+            }
+        }
+
+        function onCLSelect(){
+            $scope.selectedCustomer = null;
+        }
+
+        function onCustomerSelect() {
+            $scope.selectedPackage = null;
+            $scope.bid.idCustomerInstance = $scope.selectedCustomer ? $scope.selectedCustomer.idCustomerInstance : 0;
+
+            if ($scope.selectedCl.idCommercialLead && $scope.selectedCustomer.idCustomer) {
+                getPackages($scope.selectedCl.idCommercialLead, $scope.selectedCustomer.idCustomer);
+            }
+        }
+
+        function onPackageSelect() {
+            $scope.selectedPayType = null;
+            $scope.bid.idPackage = $scope.selectedPackage ? $scope.selectedPackage.idPackage : 0;
+            if($scope.selectedCl.idCommercialLead && $scope.selectedCustomer.idCustomer && $scope.selectedPackage){
+                getPaymentTypes($scope.selectedCl.idCommercialLead, $scope.selectedCustomer.idCustomer, $scope.selectedPackage.idPackage);
+            }
+        }
+
+        function onPayTypeSelect() {
+            $scope.bid.idPaymentType = $scope.selectedPayType ? $scope.selectedPayType.idPaymentType : 0;
+        }
+
+        function showSupBidDialog() {
+            $scope.$evalAsync(() => {
+                $scope.isAddSupBidDialogVisible = !$scope.isAddSupBidDialogVisible;
+            });
+        }
+
+        function showLinkBidDialog() {
+            $scope.$evalAsync(() => {
+                $scope.isLinkSupBidDialogVisible = !$scope.isLinkSupBidDialogVisible;
+            });
+        }
+
+        function linkSuppliers(params){
+            $scope.bid.supplierBids = params.selectedBids;
+        }
+
+        function saveBid(){
+            $http({
+                method: 'POST',
+                url: 'bids/api/addBid',
+                data: $.param({
+                    bid: JSON.stringify($scope.bid)
+                })
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function displayMessage(response){
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('bids.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if(messageObj.code === 'success'){
+                        $scope.$evalAsync(() => {
+                            $scope.bid = {};
+                        });
+                    }
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/bids/add-supplier-bid.controller.js

@@ -0,0 +1,73 @@
+(function () {
+    global.dashModule
+        .controller('addSupplierBidCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', addSupplierBidCtrl]);
+
+    function addSupplierBidCtrl($scope, $http, $, $translate, utilsService) {
+        $scope.getSuppliers = getSuppliers();
+        $scope.saveSupplierBid = saveSupplierBid;
+        $scope.onSupplierSelect = onSupplierSelect;
+        $scope.onProductSelect = onProductSelect;
+        $scope.supplierBid = {};
+
+        function getSuppliers(){
+            $http({
+                method: 'GET',
+                url: 'bids/api/getSuppliers'
+            }).then(setSuplliers, utilsService.onHttpError);
+        }
+
+        function setSuplliers(response){
+            if (response.data) {
+                $scope.suppliers = response.data;
+            }
+        }
+
+        function getProducts(idSupplier){
+            $http({
+                method: 'POST',
+                url: 'bids/api/getProducts',
+                data: $.param({
+                    idSupplier
+                })
+            }).then(setProducts, utilsService.onHttpError);
+        }
+
+        function setProducts(response){
+            if (response.data) {
+                $scope.products = response.data;
+            }
+        }
+
+        function onSupplierSelect(){
+            $scope.selectedProduct = null;
+            $scope.supplierBid.idSupplier = $scope.selectedSupplier.idSupplier;
+
+            if ($scope.selectedSupplier.idSupplier) {
+                getProducts($scope.selectedSupplier.idSupplier);
+            }
+        }
+
+        function onProductSelect(){
+            $scope.supplierBid.idProduct = $scope.selectedProduct ? $scope.selectedProduct.idProduct : 0;
+        }
+
+        function saveSupplierBid(){
+            $http({
+                method: 'POST',
+                url: 'bids/api/addSupplierBid',
+                data: $.param({
+                    supplierBid: JSON.stringify($scope.supplierBid)
+                })
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function displayMessage(response){
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('bids.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/bids/bids-view.directive.js

@@ -0,0 +1,112 @@
+(function () {
+    global.dashModule
+        .controller('bidsViewCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', bidsViewController])
+        .directive('bidsView', [bidsViewDirective]);
+
+    function bidsViewDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'bids/html/bidsViewTemplate'
+        };
+    }
+
+    function bidsViewController($scope, $http, $, $translate, utilsService) {
+        $scope.getBids = getBids;
+        $scope.showBidMarginDialog = showBidMarginDialog;
+        $scope.closeBidMarginDialog = closeBidMarginDialog;
+        $scope.showBidRemoveDialog = showBidRemoveDialog;
+        $scope.closeRemoveDialog = closeRemoveDialog;
+        $scope.isCommercialLead = isCommercialLead;
+        $scope.filterBids = filterBids;
+        $scope.isUsedText = isUsedText;
+        $scope.filteredBids = [];
+        $scope.bidType = 'all';
+        let bids = [];
+        $scope.isMarginsDialogVisible = {};
+        $scope.isRemoveDialogVisible = {};
+        $scope.HEADER_COL = 'bid-header col-lg-4 col-md-5 col-sm-6 col-xs-6';
+        $scope.LABEL_COL = 'col-lg-8 col-md-7 col-sm-6 col-xs-6';
+        let userType = '';
+
+        function getBids() {
+            $http({
+                method: 'POST',
+                url: 'bids/api/getBids',
+                data: $.param({
+                    filter: {}
+                })
+            }).then(setBids, utilsService.onHttpError);
+        }
+
+        function setBids(response) {
+            if (response.data && response.data.bids) {
+                bids = response.data.bids;
+                $scope.filteredBids = bids;
+                userType = response.data.userType;
+            }
+        }
+
+        function isCommercialLead() {
+            return userType === 'commercial_lead';
+        }
+
+        function showBidMarginDialog(idBid) {
+            $scope.$evalAsync(() => {
+                $scope.isMarginsDialogVisible[idBid] = !$scope.isMarginsDialogVisible[idBid];
+            });
+        }
+
+        function closeBidMarginDialog() {
+            $scope.$evalAsync(() => {
+                $scope.isMarginsDialogVisible = {};
+            });
+        }
+
+        function showBidRemoveDialog(idBid) {
+            $scope.$evalAsync(() => {
+                $scope.isRemoveDialogVisible[idBid] = !$scope.isRemoveDialogVisible[idBid];
+            });
+        }
+
+        function closeRemoveDialog() {
+            $scope.$evalAsync(() => {
+                $scope.isRemoveDialogVisible = {};
+            });
+        }
+
+        function isSearchedValue(bid, searchText){
+            const regExpresion = new RegExp(searchText, 'i');
+            return regExpresion.test(String(bid.bidNumber)) ||
+                regExpresion.test(bid.packageName) ||
+                regExpresion.test(bid.customer) ||
+                regExpresion.test(bid.commercialLead);
+        }
+
+        function filterBids(filterType) {
+            if (filterType === 'all') {
+                $scope.filteredBids = bids;
+                $scope.searchText = '';
+            }else if (filterType === 'available') {
+                $scope.filteredBids = bids.filter((bid) => {
+                    return bid.status === 'available' && isSearchedValue(bid, $scope.searchText);
+                });
+            }else if (filterType === 'used') {
+                $scope.filteredBids = bids.filter((bid) => {
+                    return bid.isUsed === 1 && isSearchedValue(bid, $scope.searchText);
+                });
+            }else if (filterType === 'expired') {
+                $scope.filteredBids = bids.filter((bid) => {
+                    return bid.status === 'expired' && isSearchedValue(bid, $scope.searchText);
+                });
+            }else{
+                $scope.filteredBids = bids.filter((bid) => {
+                    return isSearchedValue(bid, $scope.searchText);
+                });
+            }
+        }
+
+        function isUsedText(bid){
+            return bid.isUsed === 1 ? 'Yes' : 'No';
+        }
+    }
+})();

api-wiaas/client/js/components/bids/bids.directive.js

@@ -0,0 +1,38 @@
+(function () {
+    global.dashModule
+        .controller('bidsCtrl', ['$scope', bidsController])
+        .directive('bids', [bidsDirective]);
+
+    function bidsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'bids/html/bidsTemplate'
+        };
+    }
+
+    function bidsController($scope) {
+        $scope.isSubmoduleVisible = isSubmoduleVisible;
+        $scope.setSubModule = setSubModule;
+        $scope.subModule = global.getParameterByName('subModule') || 'bidsView';
+        addUrlListener();
+
+        function addUrlListener() {
+            window.addEventListener('popstate', function (e) {
+                $scope.$evalAsync($scope => {
+                    $scope.subModule = e.state ? e.state.subModule : 'bidsView';
+                });
+            }, false);
+        }
+
+        function setSubModule($event) {
+            $scope.subModule = $event.currentTarget.attributes.subModule.value;
+            history.pushState({
+                subModule: $scope.subModule
+            }, null, '?subModule=' + $scope.subModule);
+        }
+
+        function isSubmoduleVisible(subModule) {
+            return subModule === $scope.subModule;
+        }
+    }
+})();

api-wiaas/client/js/components/bids/bids.less

@@ -0,0 +1,82 @@
+@background-layer: rgba(255, 255, 255, 0.8);
+
+.module-layer {
+    background: @background-layer;
+    margin-top: 1%;
+    margin-bottom: 2%;
+}
+
+#bids-view{
+    .module-layer;
+
+    .bid-item{
+        position: relative;
+        display: block;
+        padding: 1rem;
+        border: 1px solid #3bb9ff;
+        border-radius: 5px;
+        min-height: 36rem;
+        margin-top: 1rem;
+    }
+
+    .bid-header{
+        font-weight: 600;
+    }
+
+    .bid-date{
+        font-size: 70%;
+    }
+
+    .bid-number{
+        font-weight: 600;
+    }
+
+    .add-bid-margin-btn, .remove-bid-btn{
+        position: absolute;
+        margin-top: 1rem;
+        bottom: 1rem;
+        left: 2rem;
+    }
+
+    .expired {
+        background: rgba(217, 83, 79, 0.1);
+    }
+
+    .used-status {
+        color: rgb(31, 97, 141);
+        font-weight: 600;
+    }
+
+    .expired-status{
+        color: rgb(217, 83, 79);
+        font-weight: 600;
+    }
+}
+
+#add-bid{
+    .module-layer;
+}
+
+#link-supplier-bids{
+    .supplier-bid-header{
+        font-weight: 600;
+    }
+
+    .supplier-bid{
+        cursor: pointer;
+    }
+
+    .supplier-bid:hover{
+        background: rgba(255, 255, 0, 0.5);
+
+    }
+
+    .supplier-bids-list{
+        height: 25rem;
+        overflow-y: scroll;
+    }
+
+    .selected-bid{
+        background: rgba(59, 185, 255, 0.2);
+    }
+}

api-wiaas/client/js/components/bids/link-supplier-bids.controller.js

@@ -0,0 +1,50 @@
+(function () {
+    global.dashModule
+        .controller('linkSupplierBidsCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', linkSupplierBidsCtrl]);
+
+    function linkSupplierBidsCtrl($scope, $http, $, $translate, utilsService) {
+        $scope.getUnlinkedSupplierBids = getUnlinkedSupplierBids();
+        $scope.onSupBidSelect = onSupBidSelect;
+        $scope.init = init;
+        $scope.supplierBids = [];
+        $scope.selectedBids = [];
+        let existingSelection = [];
+
+        function init(supplierBids){
+            existingSelection = supplierBids || [];
+        }
+
+        function getUnlinkedSupplierBids(){
+            $http({
+                method: 'GET',
+                url: 'bids/api/getUnlinkedSupplierBids'
+            }).then(setUnlinkedSupplierBids, utilsService.onHttpError);
+        }
+
+        function setUnlinkedSupplierBids(response){
+            if (response.data) {
+                $scope.supplierBids = response.data;
+                if(existingSelection){
+                    existingSelection.forEach((existingSelection) => {
+                        const selected = $scope.supplierBids.find((supplierBid) => {
+                            return existingSelection.idSupplierBid === supplierBid.idSupplierBid;
+                        });
+                        onSupBidSelect(selected);
+                    });
+                }
+            }
+        }
+
+        function onSupBidSelect(supplierBid){
+            const elemPosition = $scope.selectedBids.indexOf(supplierBid);
+
+            if(elemPosition === -1){
+                supplierBid.class = 'selected-bid';
+                $scope.selectedBids.push(supplierBid);
+            }else{
+                supplierBid.class = 'not-selected-bid';
+                $scope.selectedBids.splice(elemPosition);
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/bids/remove-bid.controller.js

@@ -0,0 +1,30 @@
+(function () {
+    global.dashModule
+        .controller('removeBidCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', removeBidCtrl]);
+
+    function removeBidCtrl($scope, $http, $, $translate, utilsService) {
+        $scope.removeBid = removeBid;
+
+        function removeBid(params){
+            $http({
+                method: 'POST',
+                url: 'bids/api/removeBid',
+                data: $.param({
+                    idBid: params.bid.idBid
+                })
+            }).then((response)=>{displayMessage(response, params.getBids);} , utilsService.onHttpError);
+        }
+
+        function displayMessage(response, callback){
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('bids.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if(messageObj.code === 'success'){
+                        callback();
+                    }
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/contact/contact-page.directive.js

@@ -0,0 +1,30 @@
+(function () {
+    global.dashModule
+        .controller('contactPageCtrl', ['$scope', '$http', 'utilsService', contactPageCtrl])
+        .directive('contactPage', [contactPageDirective]);
+
+    function contactPageDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'contact/html/contactTemplate'
+        };
+    }
+
+    function contactPageCtrl($scope, $http, utilsService) {
+        $scope.contactInfo = [];
+        $scope.getContactInfo = getContactInfo;
+
+        function getContactInfo() {
+            $http({
+                method: 'GET',
+                url: 'contact/api/getContactInfo'
+            }).then(setContactInfo, utilsService.onHttpError);
+        }
+
+        function setContactInfo(response) {
+            if(response.data){
+                $scope.contactInfo = response.data;
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/contact/contact.less

@@ -0,0 +1,50 @@
+#contact-module{
+    padding-bottom:3%;
+
+    .contact-info-layer{
+        position: relative;
+        background: rgba(255, 255, 255, 0.8);
+        padding: 3%;
+        margin-top: 1%;
+        min-height: 460px;
+    }
+
+    .contact-info-box{
+        font-size: 120%;
+        margin-top: 1%;
+    }
+
+    .contact-info-title{
+        margin-bottom: 5%;
+        border-bottom: 2px solid #000;
+    }
+
+    .info-icon{
+        display: inline-block;
+    }
+
+    .info-big-text{
+        display: inline-block;
+    }
+
+    .info-text{
+        display: inline-block;
+        margin-left: 5%;
+    }
+
+    .contact-info-addresses-layer{
+        margin-top: 5%;
+    }
+
+    .contact-info-address{
+        margin-top: 5%;
+    }
+
+    .contact-info-country{
+        display: inline-block;
+    }
+
+    .flag-icon{
+        border-radius: 3px;
+    }
+}

api-wiaas/client/js/components/customers/customers-view.directive.js

@@ -0,0 +1,101 @@
+(function () {
+    global.dashModule
+        .controller('customersViewCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', customersViewController])
+        .directive('customersView', [customersViewDirective]);
+
+    function customersViewDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'customers/html/customersViewTemplate'
+        };
+    }
+
+    function customersViewController($scope, $http, $, $translate, utilsService) {
+        $scope.viewCustomersIntit = viewCustomersIntit;
+        $scope.saveDefaultOrderType = saveDefaultOrderType;
+        $scope.saveCustomerOrderTypes = saveCustomerOrderTypes;
+        $scope.isSameCompany = isSameCompany;
+
+        const RESELLER_ORDER_TYPE = '2';
+
+        function viewCustomersIntit(){
+            getCustomers();
+            getOrderTypes();
+        }
+
+        function getCustomers() {
+            const params = $.param({
+                idPackage: global.getParameterByName('idPackage') || 0
+            });
+
+            $http({
+                method: 'POST',
+                url: 'customers/api/getComercialLeadCustomers',
+                data: params
+            }).then(showCustomers, utilsService.onHttpError);
+        }
+
+        function showCustomers(response) {
+            if (response.data) {
+                $scope.customers = response.data.customers;
+                $scope.defaultIdOrderType = response.data.defaultIdOrderType;
+
+                $scope.customers.forEach(customer => {
+                    if(isSameCompany(customer.isSameCompanyAsCl)){
+                        customer.idOrderType = RESELLER_ORDER_TYPE;
+                    }
+                });
+            }
+        }
+
+        function getOrderTypes() {
+            $http({
+                method: 'GET',
+                url: 'customers/api/getOrderTypes'
+            }).then(setOrderTypes, utilsService.onHttpError);
+        }
+
+        function setOrderTypes(response) {
+            if(response.data) {
+                $scope.orderTypes = response.data;
+            }
+        }
+
+        function saveDefaultOrderType(){
+            const params = $.param({
+                defaultIdOrderType: $scope.defaultIdOrderType
+            });
+
+            $http({
+                method: 'POST',
+                url: 'customers/api/saveDefaultOrderType',
+                data: params
+            }).then(showUpdateDefaultMessage, utilsService.onHttpError);
+        }
+
+        function saveCustomerOrderTypes(){
+            const params = $.param({
+                customers: JSON.stringify($scope.customers)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'customers/api/saveCustomersOrderTypes',
+                data: params
+            }).then(showUpdateDefaultMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateDefaultMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    let translatedMessage = $translate.instant('customers.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+
+        function isSameCompany(isSameCompanyAsCl){
+            return parseInt(isSameCompanyAsCl) === 1;
+        }
+    }
+})();

api-wiaas/client/js/components/customers/customers.directive.js

@@ -0,0 +1,38 @@
+(function () {
+    global.dashModule
+        .controller('customersCtrl', ['$scope', customersController])
+        .directive('customers', [customersDirective]);
+
+    function customersDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'customers/html/customersTemplate'
+        };
+    }
+
+    function customersController($scope) {
+        $scope.isSubmoduleVisible = isSubmoduleVisible;
+        $scope.setSubModule = setSubModule;
+        $scope.subModule = global.getParameterByName('subModule') || 'customersView';
+        addUrlListener();
+
+        function addUrlListener() {
+            window.addEventListener('popstate', function (e) {
+                $scope.$evalAsync($scope => {
+                    $scope.subModule = e.state ? e.state.subModule : 'customersView';
+                });
+            }, false);
+        }
+
+        function setSubModule($event) {
+            $scope.subModule = $event.currentTarget.attributes.subModule.value;
+            history.pushState({
+                subModule: $scope.subModule
+            }, null, '?subModule=' + $scope.subModule);
+        }
+
+        function isSubmoduleVisible(subModule) {
+            return subModule === $scope.subModule;
+        }
+    }
+})();

api-wiaas/client/js/components/customers/customers.less

@@ -0,0 +1,25 @@
+@background-layer: rgba(255, 255, 255, 0.8);
+
+.module-layer {
+    background: @background-layer;
+    margin-top: 1%;
+    margin-bottom: 2%;
+}
+
+#customers-view-layer {
+    .module-layer;
+
+    .title-header {
+        font-weight: bold;
+        font-size: 2rem;
+        padding: 1rem 0;
+    }
+
+    .customer-row {
+        padding: 1rem 0;
+    }
+
+    .custom-border {
+        border-bottom: 2px solid #337ab7;
+    }
+}

api-wiaas/client/js/components/dashboards/create-dashboard.directive.js

@@ -0,0 +1,235 @@
+(function () {
+    global.dashModule
+        .controller('createDashboardCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', createDashboardCtrl])
+        .directive('createDashboard', [createDashboardDirective]);
+
+    function createDashboardDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'dashboards/html/createDashboardTemplate'
+        };
+    }
+
+    function createDashboardCtrl($scope, $http, $, $translate, utilsService) {
+        const visibilityObjects = {
+            'public': {
+                icon: 'open',
+                value: 'public'
+            },
+            'private': {
+                icon: 'close',
+                value: 'private'
+            }
+        };
+        const ID_BROKER_TYPE = '1';
+
+        $scope.initCreate = initCreate;
+        $scope.getGadgets = getGadgets;
+        $scope.showHideGadgets = showHideGadgets;
+        $scope.addGadget = addGadget;
+        $scope.removeGadget = removeGadget;
+        $scope.gadgetDragStart = gadgetDragStart;
+        $scope.gadgetDragStop = gadgetDragStop;
+        $scope.gadgetDropped = gadgetDropped;
+        $scope.createDashboard = createDashboard;
+        $scope.changeVisibility = changeVisibility;
+        $scope.getButtonTranslationKey = getButtonTranslationKey;
+        $scope.isPublic = isPublic;
+        $scope.getUserTypes = getUserTypes;
+        $scope.canChangeVisibility = canChangeVisibility;
+        $scope.gadgets = [];
+        $scope.viewGadgets = false;
+        $scope.selectedGadgets = [];
+        $scope.dashboardName = '';
+        $scope.visibility = visibilityObjects.private;
+        $scope.idDashboard = 0;
+        $scope.userTypes = [];
+        $scope.selectedUserType = 0;
+
+        function initCreate() {
+            $scope.idDashboard = parseInt(global.getParameterByName('idDashboard')) || 0;
+
+            if ($scope.idDashboard !== 0) {
+                getDashboardInfo();
+            } else {
+                $scope.selectedGadgets = [];
+                $scope.dashboardName = '';
+                $scope.visibility = visibilityObjects.private;
+                getGadgets();
+            }
+        }
+
+        function getGadgets() {
+            const params = $.param({
+                idDashboard: $scope.idDashboard,
+                selectedUserType: $scope.visibility.value === 'public' ? $scope.selectedUserType : 0
+            });
+            $http({
+                method: 'POST',
+                url: 'dashboards/api/getAllGadgets',
+                data: params
+            }).then(setGadgets, utilsService.onHttpError);
+        }
+
+        function setGadgets(response) {
+            $scope.selectedGadgets = [];
+            if (response.data && response.data.length) {
+                $scope.gadgets = response.data;
+                $scope.gadgets.forEach((gadget) => {
+                    gadget.isSelected = parseInt(gadget.isSelected) === 1 ? true : false;
+                    if (gadget.isSelected) {
+                        addGadget(gadget);
+                    }
+                });
+            } else {
+                $scope.gadgets = [];
+            }
+        }
+
+        function getDashboardInfo() {
+            const params = $.param({
+                idDashboard: $scope.idDashboard
+            });
+            $http({
+                method: 'POST',
+                url: 'dashboards/api/getDashboardInfo',
+                data: params
+            }).then(setDashboardInfo, utilsService.onHttpError);
+        }
+
+        function setDashboardInfo(response) {
+            if (response.data && response.data.dashboardInfo) {
+                $scope.dashboardName = response.data.dashboardInfo.name;
+                $scope.visibility = visibilityObjects[response.data.dashboardInfo.visibility];
+                $scope.selectedUserType = response.data.dashboardInfo.idUserType;
+                getGadgets();
+                getUserTypes();
+            } else if (response.data && response.data.messages) {
+                let translatedMessage = $translate.instant('dashboards.messages.' + response.data.messages.message);
+                utilsService.displayMessage(response.data.messages.code, translatedMessage);
+            }
+        }
+
+        function showHideGadgets() {
+            $scope.viewGadgets = !$scope.viewGadgets;
+        }
+
+        function addGadget(gadget) {
+            if ($scope.selectedGadgets.indexOf(gadget) === -1) {
+                $scope.selectedGadgets.push(gadget);
+                gadget.isSelected = true;
+                gadget.position = $scope.selectedGadgets.length;
+            }
+            $scope.viewGadgets = false;
+        }
+
+        function removeGadget(gadget) {
+            const posOfGadget = $scope.selectedGadgets.indexOf(gadget);
+            if (posOfGadget !== -1) {
+                $scope.selectedGadgets.splice(posOfGadget, 1);
+                gadget.isSelected = false;
+            }
+        }
+
+        function gadgetDragStart(event, ui) {
+            $(ui.helper).css({
+                'z-index': 1001
+            });
+            $('.drop-zone').show();
+        }
+
+        function gadgetDragStop() {
+            $('.drop-zone').hide();
+        }
+
+        function getGadgetById(idGadget) {
+            return $scope.selectedGadgets.find((element) => {
+                return element.idGadget === idGadget;
+            });
+        }
+
+        function reorderGadgets(idGadgetToReposition, idGadgetToReplace) {
+            const gadgetToReposition = getGadgetById(idGadgetToReposition);
+            const gadgetToReplace = getGadgetById(idGadgetToReplace);
+            const oldPosition = gadgetToReposition.position;
+            gadgetToReposition.position = gadgetToReplace.position;
+            gadgetToReplace.position = oldPosition;
+            $scope.selectedGadgets.sort((a, b) => {
+                return utilsService.sortByAtribute(a, b, 'position');
+            });
+        }
+
+        function gadgetDropped(event, ui, currentGadget) {
+            reorderGadgets(ui.helper.attr('idGadget'), currentGadget.idGadget);
+        }
+
+        function createDashboard() {
+            const params = $.param({
+                idDashboard: $scope.idDashboard,
+                name: $scope.dashboardName,
+                visibility: $scope.visibility.value,
+                selectedUserType: $scope.selectedUserType,
+                selectedGadgets: JSON.stringify($scope.selectedGadgets)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'dashboards/api/createDashboard',
+                data: params
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('dashboards.headers.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('dashboards.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+
+        function changeVisibility() {
+            if ($scope.visibility.value === 'private') {
+                $scope.visibility = visibilityObjects.public;
+                if ($scope.userTypes.length === 0) {
+                    getUserTypes();
+                }
+            } else {
+                if ($scope.selectedUserType !== ID_BROKER_TYPE) {
+                    $scope.selectedGadgets = [];
+                }
+                $scope.visibility = visibilityObjects.private;
+            }
+        }
+
+        function getButtonTranslationKey() {
+            return $scope.idDashboard === 0 ? 'CREATE' : 'UPDATE';
+        }
+
+        function isPublic() {
+            return $scope.visibility.value === 'public' && $scope.idDashboard === 0;
+        }
+
+        function getUserTypes() {
+            $http({
+                method: 'POST',
+                url: 'dashboards/api/getUserTypes'
+            }).then(setUserTypes, utilsService.onHttpError);
+        }
+
+        function setUserTypes(response) {
+            if (response.data.length > 0) {
+                $scope.userTypes = response.data;
+                if ($scope.selectedUserType === 0) {
+                    $scope.selectedUserType = response.data[0].id;
+                }
+            }
+        }
+
+        function canChangeVisibility(){
+            return $scope.idDashboard === 0 || ($scope.idDashboard !== 0 && $scope.selectedUserType === ID_BROKER_TYPE);
+        }
+    }
+})();

api-wiaas/client/js/components/dashboards/dashboards-filters.directive.js

@@ -0,0 +1,44 @@
+(function () {
+    global.dashModule
+        .controller('dashboardsFiltersCtrl', ['$scope', 'dashboardsFiltersService', dashboardsFiltersCtrl])
+        .directive('dashboardsFilters', [dashboardsFiltersDirective]);
+
+    function dashboardsFiltersDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'dashboards/html/dashboardsFiltersTemplate'
+        };
+    }
+
+    function dashboardsFiltersCtrl($scope, dashboardsFiltersService) {
+        $scope.applyFilter = applyFilter;
+        $scope.setFilterParams = setFilterParams;
+        $scope.isFilterSet = isFilterSet;
+        $scope.getFilterText = dashboardsFiltersService.getFilterText;
+        $scope.clearFilter = clearFilter;
+        $scope.filters = {};
+        $scope.filterKey = '';
+
+        function applyFilter(gadget){
+            dashboardsFiltersService.updateFilter(gadget, $scope.filters);
+        }
+
+        function clearFilter(gadget){
+            dashboardsFiltersService.clearFilter(gadget);
+            $scope.filters = dashboardsFiltersService.getFilters(gadget);
+        }
+
+        function setFilterParams(gadget){
+            $scope.filterKey = () => {
+                return dashboardsFiltersService.getFilterActiveKey(gadget);
+            };
+
+            $scope.filters = dashboardsFiltersService.getFilters(gadget);
+        }
+
+        function isFilterSet(){
+            return Object.keys($scope.filters).length > 0;
+        }
+
+    }
+})();

api-wiaas/client/js/components/dashboards/dashboards-filters.service.js

@@ -0,0 +1,117 @@
+(function () {
+    global.dashModule.service('dashboardsFiltersService', ['$', dashboardsFiltersService]);
+
+    function dashboardsFiltersService($) {
+        const gadets = {};
+        const sortIcons = {
+            NAN : 'glyphicon-sort',
+            ASC : 'glyphicon-sort-by-attributes',
+            DESC : 'glyphicon-sort-by-attributes-alt'
+        };
+
+        return {
+            getFilters,
+            getFilterActiveKey,
+            showFilter,
+            isFilterVisible,
+            isFilterSet,
+            updateFilter,
+            getFilterText,
+            clearFilter,
+            registerOnReloadData,
+            reloadData,
+            sortBy,
+            getSortIcon
+        };
+
+        function isFilterSet(gadget){
+            return gadets[gadget] && gadets[gadget].filters && Object.keys(gadets[gadget].filters).length !== 0;
+        }
+
+        function getFilterActiveKey(gadget) {
+            return gadets[gadget].filterActiveKey;
+        }
+
+        function getFilters(gadget) {
+            return gadets[gadget] && gadets[gadget].filters ? gadets[gadget].filters : {};
+        }
+
+        function getFilterText(gadget) {
+            let fiterText = '';
+
+            if (gadets[gadget] && gadets[gadget].filters) {
+                $.each(gadets[gadget].filters, (key, value) => {
+                    fiterText += key + ' is ' + value + ' and ';
+                });
+            }
+            fiterText = fiterText.replace(/and\s$/, '');
+
+            return fiterText;
+        }
+
+        function registerOnReloadData(gadget, callbackFunction) {
+            if (!gadets[gadget]) {
+                gadets[gadget] = {};
+            }
+            gadets[gadget].onReloadData = callbackFunction;
+        }
+
+        function reloadData(gadget) {
+            gadets[gadget].onReloadData(gadets[gadget].filters, gadets[gadget].sortBy);
+        }
+
+        function showFilter(gadget, key) {
+            if (!gadets[gadget]) {
+                gadets[gadget] = {};
+            }
+
+            if (gadets[gadget].filterVisible && gadets[gadget].filterActiveKey !== key) {
+                gadets[gadget].filterActiveKey = key;
+                return;
+            }
+
+            gadets[gadget].filterActiveKey = key;
+            gadets[gadget].filterVisible = !gadets[gadget].filterVisible;
+        }
+
+        function isFilterVisible(gadget) {
+            return gadets[gadget] && gadets[gadget].filterVisible ? gadets[gadget].filterVisible : false;
+        }
+
+        function updateFilter(gadget, filters) {
+            gadets[gadget].filters = filters;
+            reloadData(gadget);
+        }
+
+        function clearFilter(gadget) {
+            if (gadets[gadget] && gadets[gadget].filters) {
+                gadets[gadget].filters = {};
+            }
+
+            reloadData(gadget);
+        }
+
+        function sortBy(gadget, key) {
+            let direction;
+            if (!gadets[gadget]) {
+                gadets[gadget] = {};
+            }
+
+            direction = gadets[gadget].sortBy && gadets[gadget].sortBy.direction === 'ASC' ? 'DESC' : 'ASC';
+
+            gadets[gadget].sortBy = {
+                key,
+                direction
+            };
+            reloadData(gadget);
+        }
+
+        function getSortIcon(gadget, sortKey){
+            if(gadets[gadget] && gadets[gadget].sortBy && gadets[gadget].sortBy.key === sortKey){
+                return sortIcons[gadets[gadget].sortBy.direction];
+            }
+
+            return sortIcons.NAN;
+        }
+    }
+})();

api-wiaas/client/js/components/dashboards/dashboards-view.directive.js

@@ -0,0 +1,124 @@
+global.dashModule
+    .controller('dashboardsViewCtrl', ['$scope', '$http', '$', '$rootScope', '$compile', '$translate', 'utilsService', dashboardsViewCtrl])
+    .directive('dashboardsView', dashboardsViewDirective);
+
+function dashboardsViewDirective() {
+    return {
+        restrict: 'E',
+        templateUrl: 'dashboards/html/dashboardsViewTemplate'
+    };
+}
+
+function dashboardsViewCtrl($scope, $http, $, $rootScope, $compile, $translate, utilsService) {
+    $scope.initMyDashborad = initMyDashborad;
+    $scope.gadgetsDirective = gadgetsDirective;
+    $scope.showSelectDashborad = showSelectDashborad;
+    $scope.getMyDashboard = getMyDashboard;
+    $scope.getDashboradIcon = getDashboradIcon;
+    $scope.showHideRemoveDialog = showHideRemoveDialog;
+    $scope.removeDashboard = removeDashboard;
+    $scope.isRemoveDialogVisible = false;
+    $scope.isSelectDashboardVisible = false;
+    $scope.allDashboards = [];
+    $scope.dashboardInfo = {};
+    $scope.gadgets = [];
+
+    function initMyDashborad() {
+        getUserDashboards();
+        getMyDashboard();
+    }
+
+    function getUserDashboards() {
+        $http({
+            method: 'POST',
+            url: 'dashboards/api/getUserDashboards'
+        }).then(setUserDashboards, utilsService.onHttpError);
+    }
+
+    function setUserDashboards(response) {
+        if (response.data) {
+            $scope.allDashboards = response.data;
+        }
+    }
+
+    function getDashboradFromStorage(){
+        return (typeof (Storage) !== 'undefined' && localStorage.myDashboard) ? localStorage.myDashboard : 0;
+    }
+
+    function setDashboardInStorage(idDashboard){
+        const idDashboardChecked = idDashboard || 0;
+
+        if (typeof (Storage) !== 'undefined'){
+            localStorage.myDashboard = idDashboardChecked;
+        }
+    }
+    function getMyDashboard(idDashboard) {
+        const myDashboard = idDashboard || getDashboradFromStorage(idDashboard);
+        setDashboardInStorage(myDashboard);
+        const params = $.param({
+            myDashboard
+        });
+        $http({
+            method: 'POST',
+            url: 'dashboards/api/getMyDashboard',
+            data: params
+        }).then(showDashboard, utilsService.onHttpError);
+    }
+
+    function showDashboard(response) {
+        if (response.data && response.data.info) {
+            response.data.info.isOwner = parseInt(response.data.info.isOwner) === 1;
+            $scope.dashboardInfo = response.data.info;
+            $scope.gadgets = response.data.gadgets ? response.data.gadgets : [];
+            $scope.isSelectDashboardVisible = false;
+        }
+    }
+
+    function gadgetsDirective(gadget) {
+        const directiveHtml = '<' + gadget.module + '></' + gadget.module + '>';
+        const scope = $rootScope.$new();
+
+        scope.gadget = gadget;
+        const comp = $compile($(directiveHtml))(scope);
+
+        $scope.$evalAsync(() => {
+            $('#dashboard-gadget-' + gadget.idGadget).append(comp);
+        });
+    }
+
+    function showSelectDashborad() {
+        $scope.isSelectDashboardVisible = !$scope.isSelectDashboardVisible;
+    }
+
+    function getDashboradIcon(visibility){
+        return visibility === 'private' ? 'close' : 'open';
+    }
+
+    function showHideRemoveDialog(){
+        $scope.$evalAsync(() => {
+            $scope.isRemoveDialogVisible = !$scope.isRemoveDialogVisible;
+        });
+    }
+
+    function removeDashboard(idDashboard){
+        const params = $.param({
+            idDashboard
+        });
+        $http({
+            method: 'POST',
+            url: 'dashboards/api/removeDashboard',
+            data: params
+        }).then(showRemoveMessage, utilsService.onHttpError);
+    }
+
+    function showRemoveMessage(response){
+        if (typeof response.data.messages !== 'undefined') {
+            response.data.messages.forEach((messageObj) => {
+                const translatedMessage = $translate.instant('dashboards.messages.' + messageObj.message);
+                utilsService.displayMessage(messageObj.code, translatedMessage);
+            });
+            setDashboardInStorage(0);
+            initMyDashborad();
+        }
+    }
+}

api-wiaas/client/js/components/dashboards/dashboards.directive.js

@@ -0,0 +1,41 @@
+global.dashModule
+    .controller('dashboardsCtrl', ['$scope', dashboardsCtrl])
+    .directive('dashboards', dashboardsDirective);
+
+function dashboardsDirective() {
+    return {
+        restrict: 'E',
+        templateUrl: 'dashboards/html/dashboardsTemplate'
+    };
+}
+
+function dashboardsCtrl($scope) {
+    $scope.isSubmoduleVisible = isSubmoduleVisible;
+    $scope.setSubModule = setSubModule;
+    $scope.getHeaderKey = getHeaderKey;
+    $scope.subModule = global.getParameterByName('subModule') || 'dashborardsView';
+    addUrlListener();
+
+    function addUrlListener() {
+        window.addEventListener('popstate', function (e) {
+            $scope.$evalAsync($scope => {
+                $scope.subModule = e.state ? e.state.subModule : 'dashborardsView';
+            });
+        }, false);
+    }
+
+    function setSubModule($event) {
+        $scope.subModule = $event.currentTarget.attributes.subModule.value;
+        history.pushState({
+            subModule: $scope.subModule
+        }, null, '?subModule=' + $scope.subModule);
+    }
+
+    function isSubmoduleVisible(subModule) {
+        return subModule === $scope.subModule;
+    }
+
+    function getHeaderKey(action){
+        return action === 'create' ? 'CREATE_DASHBOARD' : 'EDIT_DASHBOARD';
+    }
+}

api-wiaas/client/js/components/dashboards/dashboards.less

@@ -0,0 +1,313 @@
+@order-status-open-color: #045FB4;
+@order-status-in-progress-color: #FF8040;
+@order-status-production-color: #4CC417;
+@order-status-canceled-color: #F70D1A;
+@order-status-end-of-life-color: #800080;
+
+#dashboards {
+    position: relative;
+    margin-top: 1%;
+    margin-bottom: 3%;
+    padding-bottom: 1%;
+}
+
+#dashboards-layer {
+    .dashboard-name {
+        position: relative;
+        font-size: 200%;
+        padding: 1% 0;
+    }
+
+    .select-dashboard-layer {
+        z-index: 9999;
+        background: rgba(255, 255, 255, 0.8);
+        border: 1px solid #3bb9ff;
+        padding: 5px;
+    }
+
+    .select-dashboard-title {
+        text-align: center;
+    }
+
+    .select-dashboard-type{
+        text-align: center;
+        margin-top: 1%;
+    }
+
+    .dashboard-row {
+        cursor: pointer;
+        border-bottom: 1px solid #3bb9ff;
+        padding: 1%;
+        font-size: 60%;
+    }
+
+    .dashboard-row:hover {
+        background: rgba(59, 185, 255, 0.1);
+    }
+
+    .private {
+        color: #C11B17;
+    }
+
+    .public {
+        color: #2184be;
+    }
+
+    .visibility-icon {
+        float: right;
+        margin-right: 5px;
+    }
+
+    .dashborad-selected-name{
+        margin-right: 2%;
+    }
+
+    .dashborad-btn{
+        cursor: pointer;
+        font-size: 80%;
+    }
+
+    .edit-dashboard-btn {
+        .dashborad-btn;
+    }
+
+    .owner-btns a {
+        color: #000;
+        text-decoration: none;
+    }
+
+    .remove-dashborad-btn{
+        .dashborad-btn;
+    }
+
+    .select-dashboard-btn {
+        .dashborad-btn;
+    }
+
+    .confirm-name{
+        font-weight: bold;
+    }
+
+    .gadget {
+        padding: 3%;
+        background: rgba(255, 255, 255, 0.8);
+    }
+
+    .gadget-header {
+        font-weight: bold;
+        font-size: 120%;
+    }
+
+    .gadget-row {
+        padding: 10px 0;
+        border-bottom: 1px solid #3bb9ff;
+    }
+
+    .gadget-row-column {
+        display: inline-block;
+    }
+
+    .gadget-row-column a {
+        cursor: pointer;
+    }
+
+    .order-status {
+        font-size: 110%;
+        font-weight: bold;
+    }
+
+    .order-status-open {
+        .order-status;
+        color: @order-status-open-color;
+    }
+
+    .order-status-no-process {
+        .order-status;
+        color: @order-status-open-color;
+    }
+
+    .order-status-in-progress {
+        .order-status;
+        color: @order-status-in-progress-color;
+    }
+
+    .order-status-production {
+        .order-status;
+        color: @order-status-production-color;
+    }
+
+    .order-status-canceled {
+        .order-status;
+        color: @order-status-canceled-color;
+    }
+
+    .order-status-processing {
+        .order-status;
+        color: @order-status-in-progress-color;
+    }
+
+    .order-status-end-of-life {
+        .order-status;
+        color: @order-status-end-of-life-color;
+    }
+
+    .fitler-layer {
+        border-top: 1px solid #3bb9ff;
+        border-bottom: 1px solid #3bb9ff;
+        padding: 1% 0;
+    }
+
+    .filter-title {
+        font-weight: bold;
+    }
+
+    .filter-logic {
+        padding: 1% 0;
+    }
+
+    .filter-apply {
+        margin-top: 1%;
+    }
+
+    .filter-clear {
+        margin-top: 1%;
+        margin-left: 2%;
+    }
+
+    .filter-value,
+    .sort-icon {
+        cursor: pointer;
+        margin-left: 5%;
+        color: #045FB4;
+    }
+
+    .is-fitlered{
+        font-size: 80%;
+    }
+
+    .action-status{
+        font-weight: bold;
+    }
+
+    .invalid {
+        color: #d58512;
+    }
+
+    .pending {
+        color: #800080;
+    }
+
+    .not-accepted {
+        color: #800080;
+    }
+
+    .in-progress {
+        color: #FF8040;
+    }
+}
+
+#create-dashboard-container {
+    .dashborad-input {
+        font-size: 130%;
+    }
+
+    .user-type-select-layer {
+        font-size: 130%;
+
+    }
+
+    .user-type-select {
+        padding: 5px 0;
+    }
+
+    .create-dashboard-label {
+        font-weight: bold;
+        display: inline-block;
+    }
+
+    .gadget {
+        position: relative;
+        margin-top: 1%;
+        padding: 3%;
+        background: rgba(255, 255, 255, 0.8);
+        text-align: center;
+        height: 25em;
+    }
+
+    .add-gadget {
+        color: #000;
+        margin-top: 3em;
+        font-size: 200%;
+        padding: 2em 0;
+    }
+
+    .add-gadget:hover {
+        color: #204d74;
+        border: 5px dashed #204d74;
+        cursor: pointer;
+    }
+
+    .drag-gadget {
+        color: #000;
+        margin-top: 3em;
+        font-size: 200%;
+        padding: 2em 0;
+    }
+
+    .drop-zone {
+        background: #FFF;
+        color: #000;
+        margin-top: 3em;
+        font-size: 200%;
+        padding: 2em 0;
+        border: 5px dashed #5cb85c;
+        display: none;
+        position: absolute;
+        z-index: 1000;
+        width: 90%;
+    }
+
+    .drag-gadget:hover {
+        color: #204d74;
+        border: 5px dashed #204d74;
+        cursor: move;
+    }
+
+    .remove-gadget {
+        margin-top: 1%;
+        position: relative;
+        float: right;
+    }
+
+    .create-box {
+        margin: 1em 0;
+    }
+
+    .visibility-layer {
+        display: inline-block;
+        font-size: 130%;
+        margin-left: 1%;
+    }
+
+    .visibility-icon {
+        cursor: pointer;
+    }
+
+    .visibility-message {
+        display: none;
+    }
+
+    .visibility-layer:hover .visibility-message {
+        display: inline-block;
+        font-weight: bold;
+        cursor: pointer;
+    }
+
+    .private {
+        color: #C11B17;
+    }
+
+    .public {
+        color: #2184be;
+    }
+}

api-wiaas/client/js/components/dashboards/gadget-assigned-orders.directive.js

@@ -0,0 +1,37 @@
+(function () {
+    global.dashModule
+        .controller('gadgetAssignedOrdersCtrl', ['$scope', '$http', '$', 'utilsService', 'dashboardsFiltersService', gadgetAssignedOrdersCtrl])
+        .directive('gadgetAssignedOrders', [gadgetAssignedOrdersDirective]);
+
+    function gadgetAssignedOrdersDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'dashboards/html/assignedOrdersTemplate'
+        };
+    }
+
+    function gadgetAssignedOrdersCtrl($scope, $http, $, utilsService, dashboardsFiltersService) {
+        $scope.getStatusIcon = utilsService.getStatusIcon;
+        $scope.getAssignedOrdersInfo = getAssignedOrdersInfo;
+        $scope.filterService = dashboardsFiltersService;
+
+        dashboardsFiltersService.registerOnReloadData($scope.gadget.module, getAssignedOrdersInfo);
+
+        function getAssignedOrdersInfo(filters, sortBy) {
+            const params = $.param({
+                filters : JSON.stringify(filters) || null,
+                sortBy : JSON.stringify(sortBy) || null
+            });
+
+            return $http({
+                method: 'POST',
+                url: 'dashboards/api/getAssignedOrdersInfo',
+                data: params
+            }).then(setGadgetInfo, utilsService.onHttpError);
+        }
+
+        function setGadgetInfo(response) {
+            $scope.orders = (response.data && response.data.length) ? response.data : [];
+        }
+    }
+})();

api-wiaas/client/js/components/dashboards/gadget-next-actions.directive.js

@@ -0,0 +1,37 @@
+(function () {
+    global.dashModule
+        .controller('gadgetNextActionsCtrl', ['$scope', '$http', '$', 'utilsService', 'dashboardsFiltersService', gadgetNextActionsCtrl])
+        .directive('gadgetNextActions', [gadgetNextActionsDirective]);
+
+    function gadgetNextActionsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'dashboards/html/nextActionsTemplate'
+        };
+    }
+
+    function gadgetNextActionsCtrl($scope, $http, $, utilsService, dashboardsFiltersService) {
+        $scope.filterService = dashboardsFiltersService;
+        dashboardsFiltersService.registerOnReloadData($scope.gadget.module, getNextActionsInfo);
+        $scope.actions = [];
+
+        getNextActionsInfo();
+
+        function getNextActionsInfo(filters, sortBy) {
+            const params = $.param({
+                filters: JSON.stringify(filters) || null,
+                sortBy : JSON.stringify(sortBy) || null
+            });
+
+            return $http({
+                method: 'POST',
+                url: 'dashboards/api/getNextActionsInfo',
+                data: params
+            }).then(setGadgetInfo, utilsService.onHttpError);
+        }
+
+        function setGadgetInfo(response) {
+            $scope.actions = (response.data && response.data.length) ? response.data : [];
+        }
+    }
+})();

api-wiaas/client/js/components/dashboards/gadget-order-central.directive.js

@@ -0,0 +1,37 @@
+(function () {
+    global.dashModule
+        .controller('gadgetOrderCentralCtrl', ['$scope', '$http', '$', 'dashboardsFiltersService', 'utilsService', gadgetOrderCentralCtrl])
+        .directive('gadgetOrderCentral', [gadgetOrderCentraltDirective]);
+
+    function gadgetOrderCentraltDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'dashboards/html/orderCentralTemplate'
+        };
+    }
+
+    function gadgetOrderCentralCtrl($scope, $http, $, dashboardsFiltersService, utilsService) {
+        $scope.getStatusIcon = utilsService.getStatusIcon;
+        $scope.getOrderCentralInfo = getOrderCentralInfo;
+        $scope.filterService = dashboardsFiltersService;
+
+        dashboardsFiltersService.registerOnReloadData($scope.gadget.module, getOrderCentralInfo);
+
+        function getOrderCentralInfo(filters, sortBy) {
+            const params = $.param({
+                filters : JSON.stringify(filters) || null,
+                sortBy : JSON.stringify(sortBy) || null
+            });
+
+            return $http({
+                method: 'POST',
+                url: 'dashboards/api/getOrderCentralInfo',
+                data: params
+            }).then(setGadgetInfo, utilsService.onHttpError);
+        }
+
+        function setGadgetInfo(response) {
+            $scope.orders = (response.data && response.data.length) ? response.data : [];
+        }
+    }
+})();

api-wiaas/client/js/components/dataTableHelper/dataTableHelper.service.js

@@ -0,0 +1,131 @@
+(function () {
+    global.dashModule.service('dataTableHelper', ['$translate', '$', dataTableHelper]);
+
+    function dataTableHelper($translate, $) {
+        const language = {
+            lengthMenu: 'Display _MENU_ records per page',
+            zeroRecords: 'Nothing found - sorry',
+            info: 'Showing page _PAGE_ of _PAGES_',
+            infoEmpty: 'No records available',
+            infoFiltered: '(filtered from _MAX_ total records)'
+        };
+
+        return {
+            generateColumns,
+            showTable,
+            setDataTableLanguage
+        };
+
+        function setDataTableLanguage() {
+            const translationPath = 'dataTable.';
+            const dataTableKeys = ['dataTable.lengthMenu', 'dataTable.zeroRecords', 'dataTable.info', 'dataTable.infoEmpty', 'dataTable.infoFiltered'];
+            $translate(dataTableKeys).then(translations => {
+                Object.keys(language).forEach(key => {
+                    language[key] = translations[translationPath + key];
+                });
+                redrawTables();
+            });
+        }
+
+        /**
+         * Genereates the columns to shod the data table from source data
+         * @param  {[type]}   keys                               resource keys (headers) from witch the datable is created
+         * @param  {[type]}   translationPath                    path to module translate
+         * @param  {Function} callback                           callback function to be triggered after translation
+         * @param  {[type]}   callbackParams                     extra parameters for callback function (includes extra options for the table)
+         * @param  {[type]}   [customFormatColumns=formatColumn] custom function for formating the columns, if none is given the default one is used form the helper
+         * @return {[type]}                                      returns promies with datable created object as response
+         */
+        function generateColumns(keys, translationPath, callback, callbackParams, customFormatColumns = formatColumn) {
+            const keysArray = [];
+            keys.forEach(value => {
+                keysArray.push(translationPath + value);
+            });
+
+            return $translate(keysArray).then((translations => {
+                return setColumns(translations);
+            }), translationIds => {
+                return setColumns(translationIds);
+            });
+
+            function setColumns(translations) {
+                const columns = [];
+                if (typeof callbackParams.hasDetails !== 'undefined') {
+                    columns.push({
+                        className: 'info-control',
+                        orderable: false,
+                        data: null,
+                        defaultContent: '',
+                        title: '<div class="data-tabel-info-icon glyphicon glyphicon-info-sign"></div>'
+                    });
+                }
+
+                if (typeof callbackParams.hasEdit !== 'undefined') {
+                    columns.push({
+                        className: 'info-edit',
+                        orderable: false,
+                        data: null,
+                        defaultContent: '<div class="data-table-edit glyphicon glyphicon-pencil"></div>',
+                        width: '20px',
+                        title: '<div class="data-table-edit-title glyphicon glyphicon-pencil"></div>'
+                    });
+                }
+
+                keys.forEach((value) => {
+                    columns.push(customFormatColumns(value, translations, translationPath));
+                });
+
+                return callback(columns, callbackParams);
+            }
+        }
+
+        function formatColumn(value, translations, translationPath) {
+            return {
+                data: value,
+                title: translations[translationPath + value]
+            };
+        }
+
+        /**
+         * Append datatable to the dom and returns the created object
+         * @param  {[type]} columns generated columns for witch the table should be rendered
+         * @param  {[type]} params  extra parameters for the table (ajax urle, extra table options)
+         * @return {[type]}         data table object that has been rendered to the doom
+         */
+        function showTable(columns, params) {
+            const tableOptions = {
+                ajax: {
+                    url: params.url,
+                    method: 'POST',
+                    data: params.data
+                },
+                language,
+                columns,
+                responsive: true,
+                autoWidth: false,
+                iDisplayLength: 50
+            };
+
+            if (typeof params.extraTableOptions !== 'undefined') {
+                $.extend(tableOptions, params.extraTableOptions);
+            }
+
+            if ($.fn.dataTable.fnIsDataTable($(params.selector))) {
+                tableOptions.destroy = true;
+            }
+
+            return $(params.selector).DataTable(tableOptions);
+        }
+
+        function redrawTables() {
+            $('table').each(function () {
+                if ($.fn.dataTable.fnIsDataTable(this)) {
+                    $(this).DataTable({
+                        destroy: true,
+                        language
+                    });
+                }
+            });
+        }
+    }
+})();

api-wiaas/client/js/components/datepicker/datepicker.directive.js

@@ -0,0 +1,34 @@
+(function () {
+    global.dashModule
+        .directive('datepicker', ['$timeout', '$', datepickerDirective]);
+
+    function datepickerDirective($timeout, $) {
+        return {
+            restrict: 'A',
+            require: 'ngModel',
+            scope: {
+                onDateSelected: '=',
+                elementData: '='
+            },
+            transclude: true,
+            link: function ($scope, $element, $attrs, ngModelCtrl) {
+                $timeout(function () {
+                    $($element).datepicker({
+                        dateFormat: 'yy-mm-dd',
+                        showButtonPanel: true,
+                        changeYear: true,
+                        onSelect: function (date) {
+                            ngModelCtrl.$setViewValue(date);
+                            $scope.$apply();
+                        },
+                        onClose: function (date) {
+                            if(typeof $scope.onDateSelected !== 'undefined' && date){
+                                $scope.onDateSelected(date, $scope.elementData);
+                            }
+                        }
+                    });
+                });
+            }
+        };
+    }
+})();

api-wiaas/client/js/components/dialog/dialog.directive.js

@@ -0,0 +1,73 @@
+(function () {
+    global.dashModule
+        .directive('dialog', ['$timeout', '$', 'utilsService', dialogDirective]);
+
+    function dialogDirective($timeout, $, utilsService) {
+        return {
+            restrict: 'A',
+            scope: {
+                buttonsNames: '=',
+                onConfirmation: '=',
+                onCancel: '=',
+                onClose: '=',
+                parameters: '=',
+                hasButtons: '=',
+                isModal: '='
+            },
+            link: function ($scope, $element) {
+                utilsService.registerFunction('setButtonEnabled', setButtonEnabled);
+                $timeout(function () {
+                    let buttons = {};
+                    if ($scope.hasButtons) {
+                        const confirmationBtn = $scope.buttonsNames ? $scope.buttonsNames.confirmation : 'Yes';
+                        const cancelBtn = $scope.buttonsNames ? $scope.buttonsNames.cancel : 'Cancel';
+                        buttons[confirmationBtn] = {
+                            id: 'yes-confirmation-btn',
+                            text: confirmationBtn,
+                            click: function () {
+                                $scope.onConfirmation($scope.parameters);
+                                $(this).dialog('close');
+                            }
+                        };
+                        buttons[cancelBtn] = {
+                            id: 'cancel-btn',
+                            text: cancelBtn,
+                            click: function () {
+                                $(this).dialog('close');
+                            }
+                        };
+                    }
+
+                    $($element).dialog({
+                        resizable: false,
+                        height: 'auto',
+                        width: '35%',
+                        position: {
+                            my: 'top',
+                            at: 'top',
+                            of: window
+                        },
+                        modal: $scope.isModal,
+                        close: function () {
+                            if (typeof $scope.onClose !== 'undefined') {
+                                $scope.onClose($scope.parameters);
+                            }
+                        },
+                        buttons
+                    });
+                });
+
+                function setButtonEnabled(isConfirmationButtonEnabled) {
+                    if (isConfirmationButtonEnabled) {
+                        $('#yes-confirmation-btn').removeClass('confirmation-button-disabled');
+                        $('#yes-confirmation-btn').attr('disabled', false);
+                    } else {
+                        $('#yes-confirmation-btn').addClass('confirmation-button-disabled');
+                        $('#yes-confirmation-btn').attr('disabled', true);
+                    }
+                }
+
+            }
+        };
+    }
+})();

api-wiaas/client/js/components/dialog/dialog.less

@@ -0,0 +1,3 @@
+.confirmation-button-disabled {
+    background: #d3d3d3;
+}

api-wiaas/client/js/components/documents/documents-add.directive.js

@@ -0,0 +1,95 @@
+(function () {
+    global.dashModule
+        .controller('documentsAddCtrl', ['$scope', '$http', '$', '$translate', 'Upload', 'utilsService', documentsAddController])
+        .directive('documentsAdd', [documentsAddDirective]);
+
+    function documentsAddDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'documents/html/documentsAddTemplate'
+        };
+    }
+
+    function documentsAddController($scope, $http, $, $translate, Upload, utilsService) {
+        $scope.getDocumentTypes = getDocumentTypes;
+        $scope.setDocumentTypes = setDocumentTypes;
+        $scope.uploadFile = uploadFile;
+        $scope.selectType = selectType;
+        $scope.getTypeRowClass = getTypeRowClass;
+        $scope.addNewType = addNewType;
+        $scope.hasInfo = hasInfo;
+        $scope.documentTypes = [];
+        $scope.documentName = '';
+        $scope.documentNewType = '';
+        $scope.selectedType = {};
+
+        function getDocumentTypes() {
+            $http({
+                method: 'GET',
+                url: 'documents/api/getDocumentTypes'
+            }).then(setDocumentTypes, utilsService.onHttpError);
+        }
+
+        function setDocumentTypes(response) {
+            if (response.data && response.data.length) {
+                $scope.documentTypes = response.data;
+            }
+        }
+
+        function uploadFile(file) {
+            if (parseInt($scope.selectedType.isSpecialType) === 1) {
+                displayMessage({data: {messages: [{code:'error', 'message': 'INVALID_DOC_TYPE'}]}});
+            } else {
+                Upload.upload({
+                    url: 'documents/api/uploadNewDocument',
+                    method: 'POST',
+                    file: file,
+                    data: {
+                        idDocumentType: $scope.selectedType.idDocumentType || 0,
+                        documentName: $scope.documentName
+                    }
+                }).then(displayMessage, utilsService.onHttpError);
+            }
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('documents.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if (messageObj.code === 'success') {
+                        getDocumentTypes();
+                        $scope.documentName = '';
+                        $scope.documentNewType = '';
+                    }
+                });
+            }
+        }
+
+        function getTypeRowClass(docType) {
+            let rowClass = parseInt(docType.isSpecialType) === 0 ? 'can-add-document' : 'special-document';
+            rowClass += $scope.selectedType === docType ? ' selected-document' : '';
+            return rowClass;
+        }
+
+        function selectType(docType) {
+            $scope.selectedType = docType;
+        }
+
+        function addNewType() {
+            const params = $.param({
+                documentNewType: $scope.documentNewType
+            });
+
+            $http({
+                method: 'POST',
+                url: 'documents/api/addNewDocumnetType',
+                data: params
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+    }
+
+    function hasInfo(selectedType) {
+        return parseInt(selectedType.isSpecialType) === 1 || parseInt(selectedType.idDocumentType) === 1 || parseInt(selectedType.idDocumentType) === 6;
+    }
+})();

api-wiaas/client/js/components/documents/documents-link.directive.js

@@ -0,0 +1,120 @@
+(function () {
+    global.dashModule
+        .controller('documentsLinkCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', documentsLinkController])
+        .directive('documentsLink', [documentsLinkDirective]);
+
+    function documentsLinkDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'documents/html/documentsLinkTemplate'
+        };
+    }
+
+    function documentsLinkController($scope, $http, $, $translate, utilsService) {
+        $scope.getDocumentsAndPackages = getDocumentsAndPackages;
+        $scope.selectPackage = selectPackage;
+        $scope.getPackageClass = getPackageClass;
+        $scope.documentDragStart = documentDragStart;
+        $scope.documentDragStop = documentDragStop;
+        $scope.documentDropped = documentDropped;
+        $scope.updatePackageDocuments = updatePackageDocuments;
+        $scope.documents = [];
+        $scope.packages = [];
+        $scope.selectedPackage = {};
+
+        function getDocumentsAndPackages() {
+            $http({
+                method: 'POST',
+                url: 'documents/api/getDocumentsAndPackages'
+            }).then(setDocumentsAndPackages, utilsService.onHttpError);
+        }
+
+        function setDocumentsAndPackages(response) {
+            if (response.data && response.data.documents && response.data.packages) {
+                $scope.documents = response.data.documents;
+                $scope.packages = response.data.packages;
+                $scope.documents.forEach(hideLinkedDocuments);
+                $scope.selectedPackage = response.data.packages[0] || {};
+            }
+        }
+
+        function hideLinkedDocuments(curentDocument) {
+            let isDocumentInArray = false;
+            if ($scope.selectedPackage.documents) {
+                isDocumentInArray = $scope.selectedPackage.documents.find((doc) => {
+                    return doc.idDocument === curentDocument.idDocument;
+                });
+            }
+
+            curentDocument.isNotLinked = isDocumentInArray ? curentDocument.isNotLinked = false : curentDocument.isNotLinked = true;
+        }
+
+        function selectPackage(selected) {
+            $scope.selectedPackage = selected;
+            $scope.documents.forEach(hideLinkedDocuments);
+        }
+
+        function getPackageClass(curent) {
+            return curent === $scope.selectedPackage ? 'selected-package' : '';
+        }
+
+        function documentDragStart(event, ui, selector) {
+            $('#'+selector).css({
+                overflow: 'visible',
+            });
+        }
+
+        function documentDragStop(event, ui, selector) {
+            $('#'+ selector).css({
+                'overflow': 'auto'
+            });
+        }
+
+        function documentDropped(event, ui, dropContainer) {
+            const dropToSelector = $(ui.helper).attr('drop-to');
+            const idDocument = $(ui.helper).attr('id-document');
+
+            if(dropContainer !== dropToSelector){
+                return;
+            }
+
+            if (dropToSelector === 'linked-documents') {
+                const dragedDocument = $scope.documents.find((doc) => {
+                    return doc.idDocument === idDocument;
+                });
+
+                $scope.selectedPackage.documents.push(dragedDocument);
+                $scope.documents.forEach(hideLinkedDocuments);
+            } else if(dropToSelector === 'all-documents') {
+                const dragedDocumentIndex = $scope.selectedPackage.documents.findIndex((doc) => {
+                    return doc.idDocument === idDocument;
+                });
+                $scope.selectedPackage.documents.splice(dragedDocumentIndex, 1);
+                $scope.documents.forEach(hideLinkedDocuments);
+            }
+
+        }
+
+        function updatePackageDocuments() {
+            const params = $.param({
+                idPackage: $scope.selectedPackage.idPackage,
+                documents: JSON.stringify($scope.selectedPackage.documents)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'documents/api/updatePackageDocuments',
+                data: params
+            }).then(updateMessage, utilsService.onHttpError);
+        }
+
+        function updateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    let translatedMessage = $translate.instant('documents.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/documents/documents-view.directive.js

@@ -0,0 +1,70 @@
+(function () {
+    global.dashModule
+        .controller('documentsViewCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', documentsViewController])
+        .directive('documentsView', [documentsViewDirective]);
+
+    function documentsViewDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'documents/html/documentsViewTemplate'
+        };
+    }
+
+    function documentsViewController($scope, $http, $, $translate, utilsService) {
+        $scope.getDocuments = getDocuments;
+        $scope.showHideRemoveDialog = showHideRemoveDialog;
+        $scope.removeDocument = removeDocument;
+        $scope.documents = [];
+        $scope.isRemoveDialogVisible = false;
+
+        function getDocuments() {
+            $http({
+                method: 'POST',
+                url: 'documents/api/getDocuments',
+                data: $.param({
+                    idDocument: global.getParameterByName('idDocument') || 0,
+                    idPackage: global.getParameterByName('idPackage') || 0
+                })
+            }).then(setDocuments, utilsService.onHttpError);
+        }
+
+        function setDocuments(response) {
+            if (response.data) {
+                $scope.documents = response.data;
+            }
+        }
+
+        function showHideRemoveDialog(document) {
+            if(document){
+                $scope.selectedDocument = document;
+            }
+            $scope.$evalAsync(() => {
+                $scope.isRemoveDialogVisible = !$scope.isRemoveDialogVisible;
+            });
+        }
+
+        function removeDocument(document) {
+            const params = $.param({
+                idDocument: document.idDocument
+            });
+
+            $http({
+                method: 'POST',
+                url: 'documents/api/removeDocument',
+                data: params
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('documents.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if (messageObj.code === 'success') {
+                        getDocuments();
+                    }
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/documents/documents.directive.js

@@ -0,0 +1,38 @@
+(function () {
+    global.dashModule
+        .controller('documentsCtrl', ['$scope', documentsController])
+        .directive('documents', [documentsDirective]);
+
+    function documentsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'documents/html/documentsTemplate'
+        };
+    }
+
+    function documentsController($scope) {
+        $scope.isSubmoduleVisible = isSubmoduleVisible;
+        $scope.setSubModule = setSubModule;
+        $scope.subModule = global.getParameterByName('subModule') || 'documentsView';
+        addUrlListener();
+
+        function addUrlListener() {
+            window.addEventListener('popstate', function (e) {
+                $scope.$evalAsync($scope => {
+                    $scope.subModule = e.state ? e.state.subModule : 'documentsView';
+                });
+            }, false);
+        }
+
+        function setSubModule($event) {
+            $scope.subModule = $event.currentTarget.attributes.subModule.value;
+            history.pushState({
+                subModule: $scope.subModule
+            }, null, '?subModule=' + $scope.subModule);
+        }
+
+        function isSubmoduleVisible(subModule) {
+            return subModule === $scope.subModule;
+        }
+    }
+})();

api-wiaas/client/js/components/documents/documents.less

@@ -0,0 +1,198 @@
+@background-layer: rgba(255, 255, 255, 0.8);
+
+.module-layer {
+    background: @background-layer;
+    margin-top: 1%;
+    margin-bottom: 2%;
+}
+
+#documents-module {
+    .document-icon-layer {
+        position: relative;
+    }
+
+    .document-icon {
+        font-size: 200%;
+    }
+
+    .document-icon-text {
+        position: absolute;
+        bottom: 5%;
+        color: #FFF;
+        padding: 2px;
+        font-size: 61%;
+    }
+
+    .docx, .doc {
+        color: rgb(35, 114, 186);
+    }
+
+    .pdf {
+        color: rgb(231, 76, 60);
+    }
+
+    .xlsx, .xls {
+        color: rgb(0, 102, 0);
+    }
+}
+
+#documents-view-layer {
+    .module-layer;
+
+    .document-categ {
+        margin-top: 1%;
+    }
+
+    .document-layer {
+        padding: 1% 0;
+        border-bottom: 2px solid #337ab7;
+    }
+
+    .document-layer:hover {
+        background: rgba(59, 185, 255, 0.5);
+    }
+
+    .document-name {
+        font-size: 130%;
+        font-weight: bold;
+    }
+}
+
+#documents-link-layer {
+    .module-layer;
+    padding-top: 2%;
+
+    .documents-header {
+        padding: 1%;
+        text-align: center;
+        background: #337ab7;
+        color: #FFF;
+        font-size: 120%;
+        font-weight: bold;
+    }
+
+    .documents-big-container{
+        height: 445px;
+        overflow: hidden;
+    }
+
+    .documents-container {
+        border: 2px solid #337ab7;
+        border-radius: 10px;
+    }
+
+    .documents-list{
+        min-height: 400px;
+        height: 400px;
+        overflow: auto;
+    }
+
+    .package-layer {
+        padding: 1%;
+        border-bottom: 2px solid #337ab7;
+        cursor: pointer;
+    }
+
+    .document-row {
+        padding: 1%;
+        border-bottom: 2px solid #337ab7;
+        cursor: move;
+    }
+
+    .document-row:hover,
+    .package-layer:hover {
+        background: rgba(59, 185, 255, 0.5);
+    }
+
+    .selected-package {
+        background: rgba(59, 185, 255, 1);
+    }
+
+    .document-icon-layer {
+        display: inline-block;
+        margin-right: 2%;
+    }
+
+    .documents-link-buttons {
+        margin: 2% 0;
+    }
+}
+
+#documents-add-layer {
+    .module-layer;
+
+    .documents-add-layer {
+        padding: 2% 0;
+    }
+
+    .documents-header {
+        padding: 1%;
+        text-align: center;
+        background: #337ab7;
+        color: #FFF;
+        font-size: 120%;
+        font-weight: bold;
+    }
+
+    .documetns-types {
+        border: 2px solid #337ab7;
+        border-radius: 10px;
+    }
+
+    .document-types-list{
+      overflow-y: scroll;
+      max-height: 30rem;
+      border-bottom: 2px solid #337ab7;
+    }
+
+    .add-type-layer{
+      margin-top: 1rem;
+    }
+
+    .document-type-row{
+        padding: 1%;
+        border-bottom: 2px solid #337ab7;
+    }
+
+    .can-add-document {
+        cursor: pointer;
+    }
+
+    .can-add-document:hover {
+        background: rgba(59, 185, 255, 0.5);
+    }
+
+    .special-document {
+        cursor: pointer;
+        background: rgba(192, 192, 192, 0.5);
+    }
+
+    .special-document:hover {
+        background: rgba(59, 185, 255, 0.5);
+    }
+
+    .selected-document {
+        background: rgba(59, 185, 255, 1);
+    }
+
+
+    .drop-box {
+        margin-top: 2%;
+        color: #337ab7;
+        border: 5px dashed #337ab7;
+        border-radius: 10px;
+        text-align: center;
+        vertical-align: middle;
+        font-size: 150%;
+        padding: 10% 0;
+        cursor: pointer;
+    }
+
+    .dragover {
+        border: 5px dashed #4CC417;
+    }
+
+    .doc-type-info {
+        margin-top: 1%;
+    }
+}

api-wiaas/client/js/components/errors/errorsDialog.directive.js

@@ -0,0 +1,11 @@
+(function () {
+    global.dashModule
+        .directive('errorDialog', [errorDialogDirective]);
+
+    function errorDialogDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'utils/html/errorDialogTemplate'
+        };
+    }
+})();

api-wiaas/client/js/components/financing/financing.directive.js

@@ -0,0 +1,63 @@
+(function () {
+    global.dashModule
+        .controller('financingController', ['$scope', '$http', '$', '$translate', 'utilsService', financingController])
+        .directive('financing', [financingDirective]);
+
+    function financingDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'financing/html/financingTemplate'
+        };
+    }
+
+    function financingController($scope, $http, $, $translate, utilsService) {
+        $scope.getInterestRate = getInterestRate;
+        $scope.interestRate = 0;
+        $scope.saveInterestRate = saveInterestRate;
+        $scope.subModule = 'setInterestRate';
+        $scope.setSubModule = setSubModule;
+        $scope.isSubmoduleVisible = isSubmoduleVisible;
+
+        function setSubModule($event) {
+            $scope.subModule = $event.currentTarget.attributes.subModule.value;
+        }
+
+        function isSubmoduleVisible(subModule) {
+            return subModule === $scope.subModule;
+        }
+
+        function getInterestRate(){
+            $http({
+                method: 'POST',
+                url: 'financing/api/getInterestRate'
+            }).then(setInterestRate, utilsService.onHttpError);
+        }
+
+        function setInterestRate(response){
+            if(response.data && response.data.interestRate){
+                $scope.interestRate = response.data.interestRate;
+            }
+        }
+
+        function saveInterestRate(){
+            const params = $.param({
+                interestRate: $scope.interestRate
+            });
+
+            $http({
+                method: 'POST',
+                url: 'financing/api/saveInterestRate',
+                data: params
+            }).then(showUpdateDefaultMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateDefaultMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    let translatedMessage = $translate.instant('financing.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/financing/financing.less

@@ -0,0 +1,33 @@
+.module-layer {
+    position: relative;
+    margin-top: 1%;
+    background: rgba(255, 255, 255, 0.8);
+    margin-bottom: 3%;
+    min-height: 50rem;
+}
+
+#financing-module-layer {
+    .module-layer;
+
+    .edit-interest-rate {
+        width: 7rem;
+        padding: 0 0.6rem;
+    }
+}
+
+#set-customers-discount-module-container {
+    .customer-info-discount {
+        padding: 0.3% 0% 0.3% 1%;
+    }
+    .customer-info-discount:hover {
+        background: rgba(59, 185, 255, 0.1);
+    }
+
+    .customer-discount-message {
+        padding: 1% 0;
+    }
+
+    .edit-interest-rate-discount {
+        width: 70%;
+    }
+}

api-wiaas/client/js/components/financing/financing.service.js

@@ -0,0 +1,56 @@
+(function () {
+    global.dashModule.service('finanncingService', [finanncingService]);
+
+    function finanncingService() {
+        return {
+            calculateFinancing
+        };
+
+        /**
+         * Copy of Excel's PMT function.
+         * Credit: http://stackoverflow.com/questions/2094967/excel-pmt-function-in-js
+         *
+         * @param ratePerPeriod       The interest rate for the loan.
+         * @param numberOfPayments    The total number of payments for the loan in months.
+         * @param presentValue         The present value, or the total amount that a series of future payments is worth now;
+         *                              Also known as the principal.
+         * @param futureValue          The future value, or a cash balance you want to attain after the last payment is made.
+         *                              If fv is omitted, it is assumed to be 0 (zero), that is, the future value of a loan is 0.
+         * @param type                  Optional, defaults to 0. The number 0 (zero) or 1 and indicates when payments are due.
+         *                              0 = At the end of period
+         *                              1 = At the beginning of the period
+         * @returns {number}
+         */
+        function calculateFinancing(ratePerPeriod, numberOfPayments, presentValue, futureValue = 0, type = 0) {
+            /*var q = 0;
+            var c = 0;
+            const monthlyRatePerPeriod = ratePerPeriod / 12;
+
+            if (monthlyRatePerPeriod !== 0.0) {
+                // Interest rate exists
+                q = Math.pow(1 + monthlyRatePerPeriod, numberOfPayments);
+                c = (monthlyRatePerPeriod * (futureValue + (q * presentValue))) / ((-1 + q) * (1 + monthlyRatePerPeriod * (type)));
+                return c.toFixed(2);
+
+            } else if (numberOfPayments !== 0.0) {
+                // No interest rate, but number of payments exists
+                return -(futureValue + presentValue) / numberOfPayments;
+            }
+
+            return 0;*/
+            const rates = {
+                24 : 4.282,
+                30 : 3.451,
+                36 : 2.896,
+                42 : 2.500,
+                48 : 2.223,
+                54 : 2.025,
+                60 : 1.834
+            };
+
+            const interest = rates[numberOfPayments] || 10;
+
+            return presentValue * (interest / 100);
+        }
+    }
+})();

api-wiaas/client/js/components/financing/set-customers-discount.directive.js

@@ -0,0 +1,93 @@
+(function () {
+    global.dashModule
+        .controller('setCustomersDiscountCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', setCustomersDiscountController])
+        .directive('setCustomersDiscount', [setCustomersDiscountDirective]);
+
+    function setCustomersDiscountDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'financing/html/setCustomersDiscountTemplate'
+        };
+    }
+
+    function setCustomersDiscountController($scope, $http, $, $translate, utilsService) {
+        $scope.getCustomersAndDiscount = getCustomersAndDiscount;
+        $scope.saveCustomersDiscount = saveCustomersDiscount;
+        $scope.getNewInterestRate = getNewInterestRate;
+        $scope.customers = {};
+        $scope.discounts = {};
+        $scope.interestRate = 0;
+        $scope.showMessage = false;
+        $scope.getMaxInterestRateValue = getMaxInterestRateValue;
+        $scope.searchText = '';
+
+        function getCustomersAndDiscount() {
+            $http({
+                method: 'POST',
+                url: 'financing/api/getCustomersAndDiscount'
+            }).then(setCustomersAndDiscount, utilsService.onHttpError);
+        }
+
+        function setCustomersAndDiscount(response) {
+            $scope.customers = response.data.customers ? response.data.customers : {};
+            $scope.interestRate = response.data.interestRate ? response.data.interestRate : 0;
+
+            $scope.customers.forEach(detail => {
+                $scope.discounts[detail.idCustomer] = parseFloat(detail.discount);
+            });
+        }
+
+        function getNewInterestRate(idCustomer) {
+            const newDiscount = $scope.discounts[idCustomer] || 0;
+            const newInterestRate = $scope.interestRate - newDiscount;
+            $scope.showMessage = newInterestRate <= 0 ||
+                newInterestRate > $scope.interestRate ||
+                $scope.discounts[idCustomer] === undefined ?
+                true : false;
+
+            return newInterestRate.toFixed(2);
+        }
+
+        function saveCustomersDiscount() {
+            const modifiedDiscounts = getOnlyModifiedDiscounts();
+            const params = $.param({
+                discounts: modifiedDiscounts
+            });
+
+            $http({
+                method: 'POST',
+                url: 'financing/api/saveCustomersDiscount',
+                data: params
+            }).then(showUpdateDefaultMessage, utilsService.onHttpError);
+        }
+
+        function getOnlyModifiedDiscounts() {
+            const filteredCustomers = $scope.customers.filter(info => {
+                $scope.discounts[info.idCustomer] = $scope.discounts[info.idCustomer] || 0;
+
+                return parseFloat(info.discount) !== $scope.discounts[info.idCustomer];
+            });
+
+            filteredCustomers.map(info => {
+                info.discount = $scope.discounts[info.idCustomer].toFixed(2);
+            });
+
+            return filteredCustomers;
+        }
+
+        function showUpdateDefaultMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key || '';
+                    let translatedMessage = $translate.instant('financing.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? translatedMessage + ': ' + key : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+
+        function getMaxInterestRateValue() {
+            return ($scope.interestRate - 0.01).toFixed(2);
+        }
+    }
+})();

api-wiaas/client/js/components/financing/set-interest-rate.directive.js

@@ -0,0 +1,52 @@
+(function () {
+    global.dashModule
+        .controller('setInterestRateCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', setInterestRateController])
+        .directive('setInterestRate', [setInterestRateDirective]);
+
+    function setInterestRateDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'financing/html/setInterestRateTemplate'
+        };
+    }
+
+    function setInterestRateController($scope, $http, $, $translate, utilsService) {
+        $scope.getInterestRate = getInterestRate;
+        $scope.interestRate = 0;
+        $scope.saveInterestRate = saveInterestRate;
+
+        function getInterestRate(){
+            $http({
+                method: 'POST',
+                url: 'financing/api/getInterestRate'
+            }).then(setInterestRate, utilsService.onHttpError);
+        }
+
+        function setInterestRate(response){
+            if(response.data && response.data.interestRate){
+                $scope.interestRate = response.data.interestRate;
+            }
+        }
+
+        function saveInterestRate(){
+            const params = $.param({
+                interestRate: $scope.interestRate
+            });
+
+            $http({
+                method: 'POST',
+                url: 'financing/api/saveInterestRate',
+                data: params
+            }).then(showUpdateDefaultMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateDefaultMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    let translatedMessage = $translate.instant('financing.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/orderProjects/order-projects-edit.directive.js

@@ -0,0 +1,42 @@
+(function () {
+    global.dashModule
+        .controller('orderProjectsEditCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', orderProjectsEditCtrl])
+        .directive('orderProjectsEdit', [orderProjectsEditDirective]);
+
+    function orderProjectsEditDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orderProjects/html/orderProjectsEditTemplate'
+        };
+    }
+
+    function orderProjectsEditCtrl($scope, $http, $, $translate, utilsService) {
+        $scope.editOrderProject = editOrderProject;
+
+        function editOrderProject(){
+            const params = $.param({
+                projectData: JSON.stringify($scope.data)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orderProjects/api/editOrderProject',
+                data: params
+            }).then(showUpdateMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('orders.tables.headers.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('orderProjects.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if (typeof $scope.onUpdated !== 'undefined' && messageObj.code === 'success') {
+                        $scope.onUpdated();
+                    }
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/orderProjects/order-projects.directive.js

@@ -0,0 +1,101 @@
+(function () {
+    global.dashModule
+        .controller('orderProjectsController', ['$scope', '$rootScope', '$http', '$compile', '$translate', '$', 'dataTableHelper', 'utilsService', orderProjectsController])
+        .directive('orderProjects', [orderProjectsDirective]);
+    function orderProjectsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orderProjects/html/orderProjectsTemplate'
+        };
+    }
+
+    function orderProjectsController($scope, $rootScope, $http, $compile, $translate, $, dataTableHelper, utilsService) {
+        $scope.getOrderProjectsHeaders = getOrderProjectsHeaders;
+        const translationPath = 'orders.tables.headers.';
+
+        function getOrderProjectsHeaders() {
+            $http({
+                method: 'POST',
+                url: 'orderProjects/api/getOrderProjectsHeaders',
+            }).then(showOrderProjects, utilsService.onHttpError);
+        }
+
+        function showOrderProjects(response) {
+            if (response.data.headers.length > 0) {
+                const params = {
+                    selector: '#order-projects-table',
+                    url: 'orderProjects/api/getOrderProjects?available=0',
+                    hasEdit: true,
+                    extraTableOptions: {
+                        responsive: false,
+                        order: [
+                            [1, 'asc']
+                        ]
+                    }
+                };
+                dataTableHelper.generateColumns(response.data.headers, translationPath, dataTableHelper.showTable, params, formatOrderProjectsColumn)
+                    .then((table) => {
+                        addEditEvent(table, params.selector, 'order-projects-edit', 'orderProjectsEditCtrl', getOrderProjectsHeaders);
+                    });
+            }
+        }
+
+        function addEditEvent(table, containerSelector, directive, controller, callback) {
+            $(containerSelector + ' tbody').off('click', 'td.info-edit');
+            $(containerSelector + ' tbody').on('click', 'td.info-edit', function () {
+                var tr = $(this).closest('tr');
+                var row = table.row(tr);
+
+                if (row.child.isShown()) {
+                    row.child.hide();
+                    tr.removeClass('shown');
+                } else {
+                    const newScope = $rootScope.$new();
+                    newScope.data = $.extend(true, {}, row.data());
+                    newScope.data.isAvailable = String(newScope.data.isAvailable);
+                    const directiveHtml = '<' + directive + ' class="' + directive + '" ng-controller="' + controller + '"></' + directive + '>';
+                    const layerId = newScope.data.idProject;
+                    newScope.formAction = 'EDIT';
+                    newScope.onUpdated = callback;
+                    const layerSelector = 'edit-layer-' + layerId;
+                    row.child('<div class="edit-tr" id="' + layerSelector + '"></div>').show();
+
+                    const comp = $compile($(directiveHtml))(newScope);
+                    newScope.$apply();
+
+                    $('#' + layerSelector).append(comp);
+                    tr.addClass('shown');
+                }
+            });
+        }
+
+        function formatOrderProjectsColumn(value, translations) {
+            const columnObj = {
+                data: value,
+                title: translations[translationPath + value]
+            };
+            const renders = getOrderProjectsRenders();
+            columnObj.visible = isColumnVisible(value);
+            if (typeof renders[value] !== 'undefined') {
+                columnObj.render = renders[value];
+            }
+
+            return columnObj;
+        }
+
+        function getOrderProjectsRenders(){
+            return {
+                isAvailable: isAvailableRender
+            };
+
+            function isAvailableRender(data){
+                return data === 1 ? 'available' : 'unavailable';
+            }
+        }
+
+        function isColumnVisible(value){
+            const notVisibleFields = [];
+            return notVisibleFields.indexOf(value) === -1;
+        }
+    }
+})();

api-wiaas/client/js/components/orders/assign-broker.directive.js

@@ -0,0 +1,65 @@
+(function () {
+    global.dashModule
+        .controller('assignBrokerCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', assignBrokerCtrl])
+        .directive('assignBroker', [assignBrokerDirective]);
+
+    function assignBrokerDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orders/html/assignBrokerTemplate'
+        };
+    }
+
+    function assignBrokerCtrl($scope, $http, $, $translate, utilsService) {
+        $scope.assignBroker = assignToBroker;
+        $scope.removeAssign = removeAssign;
+        $scope.selectedBroker = '';
+
+        function getIdBroker(brokerName) {
+            const foundBroker = $scope.brokers.find(broker => {
+                return broker.brokerName === brokerName;
+            });
+
+            return foundBroker && foundBroker.idBroker ? foundBroker.idBroker : 0;
+        }
+
+        function assignToBroker() {
+            const idBroker = getIdBroker($scope.selectedBroker);
+
+            if (idBroker === 0) {
+                const translatedMessage = $translate.instant('orders.messages.INVALID_BROKER');
+                utilsService.displayMessage('error', translatedMessage);
+                $scope.selectedBroker = '';
+            } else {
+                const params = $.param({
+                    idOrder: $scope.idOrder,
+                    idBroker
+                });
+
+                $http({
+                    method: 'POST',
+                    url: 'orders/api/assignBroker',
+                    data: params
+                }).then(showAssignMessage, utilsService.onHttpError);
+            }
+
+        }
+
+        function removeAssign() {
+            $('#assign-broker-' + $scope.idOrder).remove();
+        }
+
+        function showAssignMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    removeAssign();
+                    if(typeof $scope.onUpdate !== 'undefined'){
+                        $scope.onUpdate();
+                    }
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/orders/change-orders-steps.directive.js

@@ -0,0 +1,555 @@
+(function () {
+    global.dashModule
+        .controller('changeOrdersStepsCtrl', ['$scope', '$rootScope', '$http', '$', '$translate', '$compile', '$sce', 'utilsService', 'ordersUtilsService', 'ORDER_STATUSES_ICONS', 'ORDER_STATUSES', changeOrdersStepsCtrl])
+        .directive('changeOrdersSteps', [changeOrdersStepsDirective]);
+    function changeOrdersStepsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orders/html/changeOrdersStepsTemplate'
+        };
+    }
+
+    function changeOrdersStepsCtrl($scope, $rootScope, $http, $, $translate, $compile, $sce, utilsService, ordersUtilsService, ORDER_STATUSES_ICONS, ORDER_STATUSES) {
+        const expandedProces = [];
+        let currentStepStatus = '';
+        let firstInactivePosition = 0;
+        let ordersDetailsMail = [];
+        $scope.startOrdersStepsModule = startOrdersStepsModule;
+        $scope.getStatusClass = getStatusClass;
+        $scope.isNextButtonVisible = isNextButtonVisible;
+        $scope.toggleInfo = toggleInfo;
+        $scope.isEstimationDisabled = isEstimationDisabled;
+        $scope.isStepVisible = isStepVisible;
+        $scope.hasMoreSteps = hasMoreSteps;
+        $scope.showAllSteps = showAllSteps;
+        $scope.isExpanded = isExpanded;
+        $scope.isExpandedAndFirstStepInactive = isExpandedAndFirstStepInactive;
+        $scope.goToNextStep = goToNextStep;
+        $scope.undoStep = undoStep;
+        $scope.getOrderStatusIcon = getOrderStatusIcon;
+        $scope.updatePackageEndOfLife = updatePackageEndOfLife;
+        $scope.updateOrderEstimation = updateOrderEstimation;
+        $scope.updateStepActualDate = updateStepActualDate;
+        $scope.cancelOrder = cancelOrder;
+        $scope.isCancelDialogVisible = false;
+        $scope.isProcessDialogVisible = false;
+        $scope.isNextDialogVisible = {};
+        $scope.isUndoDialogVisible = {};
+        $scope.showHideCancelDialog = showHideCancelDialog;
+        $scope.showHideProcessDialog = showHideProcessDialog;
+        $scope.showHideNextDialog = showHideNextDialog;
+        $scope.isOrderOngoing = isOrderOngoing;
+        $scope.setProcessForOrder = setProcessForOrder;
+        $scope.hasNoSelectedProcess = hasNoSelectedProcess;
+        $scope.updateStepCommentVisibility = updateStepCommentVisibility;
+        $scope.isCommentVisible = isCommentVisible;
+        $scope.stepVisibleForCustomer = stepVisibleForCustomer;
+        $scope.setNewCommentVisibility = setNewCommentVisibility;
+        $scope.canAddComment = canAddComment;
+        $scope.hasAgreement = hasAgreement;
+        $scope.formatStepText = formatStepText;
+        $scope.isMyOrder = isMyOrder;
+        $scope.hasExtraAction = ordersUtilsService.hasExtraAction;
+        $scope.extraActionDirective = extraActionDirective;
+        $scope.enableAssignBrokerEdit = enableAssignBrokerEdit;
+        $scope.calculatePrice = ordersUtilsService.calculatePrice;
+        $scope.processSteps = [];
+        $scope.availableProcesses = [];
+        $scope.ordersInfo = {};
+        $scope.selections = [];
+        $scope.brokers = [];
+        $scope.selectedProcess = {};
+        $scope.orderComments = [];
+        $scope.orderOptions = [];
+        $scope.isNextBtnDisabled = isNextBtnDisabled;
+        $scope.getIconStepStatus = getIconStepStatus;
+        $scope.getDisplayDescriptionClass = getDisplayDescriptionClass;
+        $scope.isExtraActionOpen = {};
+        $scope.updateStepComment = updateStepComment;
+        $scope.updateOrderComment = updateOrderComment;
+        $scope.isSupportMailBtnVisible = false;
+        $scope.showHideSupportDialog = showHideSupportDialog;
+        $scope.sendSupportMail = sendSupportMail;
+        $scope.allowedLanguages = '';
+        $scope.allowedLanguagesDescription = '';
+        $scope.renderHtml = renderHtml;
+        $scope.getStatusText = getStatusText;
+        $scope.supportBtnNames = {
+            confirmation: $translate.instant('orders.buttons.SEND'),
+            cancel: $translate.instant('orders.buttons.CANCEL')
+        };
+        $scope.tinymceOptions = utilsService.getTynimceOptions({
+            height: '150px'
+        });
+
+        function getStatusText(status){
+            return ORDER_STATUSES[status] || status;
+        }
+
+        function renderHtml(htmlCode) {
+            return $sce.trustAsHtml(htmlCode);
+        }
+        function startOrdersStepsModule() {
+            ordersUtilsService.registerOrderFunction('showOrderInfo', showOrderInfo);
+            getSystemAllowedLanguages();
+            getOrderInfo();
+            getOrderSteps();
+            utilsService.registerFunction('isNextBtnDisabled', isNextBtnDisabled);
+        }
+        function isMyOrder(ordersInfo) {
+            return Object.keys(ordersInfo).length !== 0;
+        }
+        function getOrderInfo() {
+            ordersUtilsService.getOrderInfo();
+        }
+        function showOrderInfo(response) {
+            if (typeof response.data.info !== 'undefined' &&
+                typeof response.data.availableProcesses !== 'undefined' &&
+                typeof response.data.packages !== 'undefined' &&
+                typeof response.data.products !== 'undefined') {
+                $scope.ordersInfo = response.data.info[0];
+                $scope.packages = response.data.packages;
+                $scope.products = response.data.products;
+                $scope.orderComments = response.data.orderComments;
+                $scope.orderOptions = response.data.orderOptions;
+                $scope.additionalPackages = response.data.additionalPackages;
+                $scope.selections = response.data.selections;
+                $scope.availableProcesses = response.data.availableProcesses;
+                $scope.orderDocuments = response.data.orderDocuments;
+                ordersDetailsMail = {
+                    idOrder: $scope.ordersInfo.id,
+                    orderNumber: $scope.ordersInfo.orderNumber,
+                    customer: $scope.ordersInfo.customer,
+                    commercialLead: $scope.ordersInfo.commercialLead
+                };
+                getAvailabilityForSendSupportMail();
+            }
+        }
+        function getOrderSteps() {
+            const idOrder = global.getParameterByName('idOrder') || 0;
+            const params = $.param({
+                idOrder
+            });
+            $http({
+                method: 'POST',
+                url: 'orders/api/getOrderSteps',
+                data: params
+            }).then(showOrderSteps, utilsService.onHttpError);
+        }
+        function showOrderSteps(response) {
+            const idOrder = global.getParameterByName('idOrder') || 0;
+            if (typeof response.data === 'object') {
+                $scope.processSteps = response.data;
+                $.each($scope.processSteps, (processKey) => {
+                    $scope.isExtraActionOpen[idOrder + '-' + processKey] = false;
+                });
+            }
+        }
+        function hasAgreement(packagePayPeriod, servicesContractPeriod) {
+            return parseInt(packagePayPeriod) > 0 || parseInt(servicesContractPeriod) > 0;
+        }
+        function enableAssignBrokerEdit() {
+            $('#enalbe-assign-edit').off('click');
+            $('#enalbe-assign-edit').on('click', function () {
+                const assignSelector = $(this).parent().find('.assign-broker');
+                if (assignSelector.length) {
+                    assignSelector.remove();
+                } else {
+                    const parent = $(this).parent();
+                    const idOrder = parent.attr('id-order');
+                    const directiveHtml = '<assign-broker id="assign-broker-' + idOrder + '" class="assign-broker" ng-controller="assignBrokerCtrl"></assign-broker>';
+                    const scope = $rootScope.$new();
+                    scope.idOrder = idOrder;
+                    scope.onUpdate = getOrderInfo;
+                    if ($scope.brokers.length > 0) {
+                        scope.brokers = $scope.brokers;
+                        const comp = $compile($(directiveHtml))(scope);
+                        parent.append(comp);
+                    } else {
+                        $http({
+                            method: 'POST',
+                            url: 'orders/api/getBrokers'
+                        }).then((response) => {
+                            $scope.brokers = response.data;
+                            scope.brokers = $scope.brokers;
+                            const comp = $compile($(directiveHtml))(scope);
+                            parent.append(comp);
+                        }, utilsService.onHttpError);
+                    }
+                }
+            });
+        }
+        function isCommentVisible(isVisible, isStepVisible) {
+            if (isStepVisible === '1') {
+                return isVisible === '1' ? 'glyphicon-eye-open' : 'glyphicon-eye-close';
+            }
+            return '';
+        }
+        function stepVisibleForCustomer(stepVisibleForCustomer) {
+            return stepVisibleForCustomer === '1' ? 'glyphicon-eye-open' : 'glyphicon-eye-close';
+        }
+        function isNextButtonVisible(stepStatus) {
+            return stepStatus === 'in-progress';
+        }
+        function getStatusClass(status) {
+            const statusClasses = {
+                'in-progress': 'step-in-progress',
+                'done': 'step-done'
+            };
+            currentStepStatus = status;
+            return statusClasses[status] || 'step-in-future';
+        }
+        function toggleInfo($event) {
+            $($event.target)
+                .parent()
+                .parent()
+                .find('.order-toggle-info')
+                .toggle('slow');
+            if ($($event.target).hasClass('glyphicon-plus-sign')) {
+                $($event.target).removeClass('glyphicon-plus-sign');
+                $($event.target).addClass('glyphicon-minus-sign');
+            } else {
+                $($event.target).removeClass('glyphicon-minus-sign');
+                $($event.target).addClass('glyphicon-plus-sign');
+            }
+        }
+        function isEstimationDisabled(status) {
+            return status === 'inactive' || status === 'done';
+        }
+        function isStepVisible(position, steps, proc) {
+            const currentStep = steps[position];
+            const nextStep = steps[position + 1] || {};
+            const prevStep = steps[position - 1] || {};
+            return (expandedProces.indexOf(proc.idProcess) >= 0) || !(nextStep.status === 'done' || (currentStep.status === 'inactive' && prevStep.status === 'inactive'));
+        }
+        function hasMoreSteps(position, steps, proc, location) {
+            const currentStepVisible = isStepVisible(position, steps, proc);
+            const prevStepVisible = steps[position - 1] ? isStepVisible(position - 1, steps, proc) : true;
+            const nextStepVisible = steps[position + 1] ? isStepVisible(position + 1, steps, proc) : true;
+            return (location === 'start' && currentStepVisible && !prevStepVisible) ||
+                (location === 'end' && currentStepVisible && !nextStepVisible);
+        }
+        function showAllSteps(proc) {
+            const elementIndex = expandedProces.indexOf(proc.idProcess);
+            if (elementIndex < 0) {
+                expandedProces.push(proc.idProcess);
+            } else {
+                expandedProces.splice(elementIndex);
+            }
+        }
+        function isExpanded(proc) {
+            return expandedProces.indexOf(proc.idProcess) >= 0;
+        }
+        function isExpandedAndFirstStepInactive(processStep, step, stepPosition) {
+            if (expandedProces.indexOf(processStep.idProcess) >= 0) {
+                if (step.status === 'in-progress') {
+                    firstInactivePosition = stepPosition + 1;
+                }
+                return firstInactivePosition && firstInactivePosition === stepPosition ? true : false;
+            }
+            return false;
+        }
+        function goToNextStep(fctParams) {
+            const idNextBtn = fctParams.idOrder + '-' + fctParams.idProcess;
+            ordersDetailsMail = Object.assign(ordersDetailsMail, {
+                idProcess: fctParams.idProcess
+            });
+            if (!$scope.isExtraActionOpen[idNextBtn]) {
+                const params = $.param({
+                    idOrder: fctParams.idOrder,
+                    idProcessStep: fctParams.idProcessStep,
+                    ordersDetailsMail: JSON.stringify(ordersDetailsMail)
+                });
+                $http({
+                    method: 'POST',
+                    url: 'orders/api/goToNextStep',
+                    data: params
+                }).then((response) => {
+                    showStepUpdateMessage(response, fctParams.idOrder);
+                }, utilsService.onHttpError);
+            }
+        }
+        function undoStep(fctParams) {
+            const params = $.param({
+                idOrder: fctParams.idOrder,
+                idProcessStep: fctParams.idProcessStep
+            });
+            $http({
+                method: 'POST',
+                url: 'orders/api/undoStep',
+                data: params
+            }).then((response) => {
+                showStepUpdateMessage(response, fctParams.idOrder);
+            }, utilsService.onHttpError);
+        }
+        function showStepUpdateMessage(response, idOrder) {
+            const stepsIdsForDeliveryDates = {
+                firstStepEnabled: 5,
+                lastStepEnabled: 6
+            };
+            ordersUtilsService.checkIfIsNextStepWanted(idOrder, 'setDeliveryDates', stepsIdsForDeliveryDates);
+            ordersUtilsService.checkIfIsNextStepWanted(idOrder, 'installationScheduling', stepsIdsForDeliveryDates);
+            updateMessage(response, startOrdersStepsModule);
+        }
+        function updateMessage(response, callback) {
+            if (typeof response.data.messages !== 'undefined') {
+                let shouldCallCallbackFunction = true;
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('orders.messages.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    if('additionalMessage' in messageObj) {
+                        translatedMessage += messageObj.additionalMessage;
+                    }
+                    if (messageObj.message === 'ALLOWED_LANGUAGE') {
+                        translatedMessage += $scope.allowedLanguages;
+                    }
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+                if (callback && shouldCallCallbackFunction) {
+                    callback();
+                }
+            }
+        }
+        function getOrderStatusIcon(status) {
+            return ORDER_STATUSES_ICONS[status];
+        }
+        function updateOrderEstimation(estimationDate) {
+            const idOrder = global.getParameterByName('idOrder') || 0;
+            const params = $.param({
+                idOrder,
+                estimationDate
+            });
+            $http({
+                method: 'POST',
+                url: 'orders/api/updateOrderEstimation',
+                data: params
+            }).then(showUpdateEstimation, utilsService.onHttpError);
+        }
+        function showUpdateEstimation(response) {
+            updateMessage(response, getOrderInfo);
+        }
+        function updatePackageEndOfLife(endOfLifeDate, extraParams) {
+            const params = $.param({
+                idOrder: extraParams.idOrder,
+                endOfLife: endOfLifeDate,
+                idPackage: extraParams.idPackage,
+                ordersDetailsMail: JSON.stringify(ordersDetailsMail)
+            });
+            $http({
+                method: 'POST',
+                url: 'orders/api/updatePackageEndOfLife',
+                data: params
+            }).then(showUpdateEndOfLife, utilsService.onHttpError);
+        }
+        function showUpdateEndOfLife(response) {
+            updateMessage(response, getOrderInfo);
+        }
+        function updateStepActualDate(actualDate, step) {
+            const params = $.param({
+                idOrder: step.idOrder || 0,
+                idProcessStep: step.idProcessStep || 0,
+                actualDate,
+                ordersDetailsMail: JSON.stringify(ordersDetailsMail)
+            });
+            $http({
+                method: 'POST',
+                url: 'orders/api/updateStepActualDate',
+                data: params
+            }).then(showUpdateEstimation, utilsService.onHttpError);
+        }
+        function updateStepComment(comment, step) {
+            if (typeof comment !== 'undefined' && comment && step) {
+                const params = $.param({
+                    idOrder: step.idOrder || 0,
+                    idProcessStep: step.idProcessStep || 0,
+                    comment,
+                    isVisible: step.isNewCommentVisible,
+                    ordersDetailsMail: JSON.stringify(ordersDetailsMail)
+                });
+                $http({
+                    method: 'POST',
+                    url: 'orders/api/updateStepComment',
+                    data: params
+                }).then(showUpdateStepComment, utilsService.onHttpError);
+            }
+        }
+        function showUpdateStepComment(response) {
+            updateMessage(response, startOrdersStepsModule);
+        }
+        function updateOrderComment() {
+            if (typeof $scope.ordersInfo.orderCommentText !== 'undefined' && $scope.ordersInfo.orderCommentText !== '') {
+                const params = $.param({
+                    idOrder: global.getParameterByName('idOrder') || 0,
+                    comment: $scope.ordersInfo.orderCommentText,
+                    ordersDetailsMail: JSON.stringify(ordersDetailsMail)
+                });
+                $http({
+                    method: 'POST',
+                    url: 'orders/api/updateOrderComment',
+                    data: params
+                }).then(showUpdateOrderComment, utilsService.onHttpError);
+            }
+        }
+        function showUpdateOrderComment(response) {
+            updateMessage(response, startOrdersStepsModule);
+        }
+        function showHideCancelDialog() {
+            $scope.$evalAsync(() => {
+                $scope.isCancelDialogVisible = !$scope.isCancelDialogVisible;
+            });
+        }
+        function showHideNextDialog(params) {
+            const idNextBtn = params.idOrder + '-' + params.idProcess;
+            $scope.$evalAsync(() => {
+                if (params.action === 'next' && !$scope.isExtraActionOpen[idNextBtn]) {
+                    $scope.isNextDialogVisible[params.idProcess] = !$scope.isNextDialogVisible[params.idProcess];
+                }
+                if (params.action === 'undo') {
+                    $scope.isUndoDialogVisible[params.idProcess] = !$scope.isUndoDialogVisible[params.idProcess];
+                }
+            });
+        }
+        function showHideProcessDialog(selectedProcess) {
+            $scope.selectedProcess = selectedProcess;
+            $scope.$evalAsync(() => {
+                $scope.isProcessDialogVisible = !$scope.isProcessDialogVisible;
+            });
+        }
+        function showHideSupportDialog() {
+            $scope.$evalAsync(() => {
+                $scope.isSupportMailBtnVisible = !$scope.isSupportMailBtnVisible;
+            });
+        }
+        function cancelOrder(idOrder) {
+            const params = $.param({
+                idOrder,
+                ordersDetailsMail: JSON.stringify(ordersDetailsMail)
+            });
+            $http({
+                method: 'POST',
+                url: 'orders/api/cancelOrder',
+                data: params
+            }).then(showOrderCancelMessage, utilsService.onHttpError);
+        }
+        function showOrderCancelMessage(response) {
+            updateMessage(response, startOrdersStepsModule);
+        }
+        function isOrderOngoing(status) {
+            const orderFinishedStatuses = ['canceled', 'production', 'end-of-life'];
+            return orderFinishedStatuses.indexOf(status) === -1;
+        }
+        function setProcessForOrder(selectedProcess) {
+            const params = $.param({
+                idOrder: global.getParameterByName('idOrder') || 0,
+                idProcess: selectedProcess.idProcess,
+                ordersDetailsMail: JSON.stringify(ordersDetailsMail)
+            });
+            $scope.selectedProcess = selectedProcess;
+            $http({
+                method: 'POST',
+                url: 'orders/api/setProcessForOrder',
+                data: params
+            }).then(showProcessSelectedMessage, utilsService.onHttpError);
+        }
+        function showProcessSelectedMessage(response) {
+            updateMessage(response, startOrdersStepsModule);
+        }
+        function hasNoSelectedProcess(status) {
+            return status === 'open' ? true : false;
+        }
+        function updateStepCommentVisibility(commentObj) {
+            const isVisibleNewVal = commentObj.isVisible === '1' ? 0 : 1;
+            const params = $.param({
+                idComment: commentObj.id,
+                isVisible: isVisibleNewVal,
+                ordersDetailsMail: JSON.stringify(ordersDetailsMail)
+            });
+            $http({
+                method: 'POST',
+                url: 'orders/api/updateStepCommentVisibility',
+                data: params
+            }).then(showUpdateStepComment, utilsService.onHttpError);
+        }
+        function setNewCommentVisibility(step) {
+            step.isNewCommentVisible = step.isNewCommentVisible === '1' ? '0' : '1';
+        }
+        function canAddComment(step) {
+            return step.status === 'in-progress';
+        }
+        function formatStepText(stepStatus) {
+            return stepStatus.replace('-', '_');
+        }
+        function extraActionDirective(step) {
+            const directiveHtml = '<' + step.actionCode + '></' + step.actionCode + '>';
+            const scope = $rootScope.$new();
+            scope.step = step;
+            scope.packages = $scope.packages;
+            const comp = $compile($(directiveHtml))(scope);
+            $scope.$evalAsync(() => {
+                $('#extra-action-' + step.idProcess).append(comp);
+            });
+        }
+        function isNextBtnDisabled(stepInfo) {
+            const idNextBtn = stepInfo.idOrder + '-' + stepInfo.idProcess;
+            $scope.isExtraActionOpen[idNextBtn] = stepInfo.isNextButtonDisabled;
+        }
+        function getIconStepStatus() {
+            return currentStepStatus && currentStepStatus === 'in-progress' ? 'glyphicon-minus-sign' : 'glyphicon-plus-sign';
+        }
+        function getDisplayDescriptionClass() {
+            return currentStepStatus && currentStepStatus === 'in-progress' ? '' : 'order-step-description-display';
+        }
+        function getAvailabilityForSendSupportMail() {
+            const params = $.param({
+                idOrder: $scope.ordersInfo.id
+            });
+            $http({
+                method: 'POST',
+                url: 'orders/api/getAvailabilityForSendSupportMail',
+                data: params
+            }).then(setAvailabilityForSendSupportMail, utilsService.onHttpError);
+        }
+        function setAvailabilityForSendSupportMail(response) {
+            if (typeof response.data !== 'undefined') {
+                $scope.isSendSupportMailBtnAvailable = response.data;
+            }
+        }
+        function sendSupportMail(userText) {
+            if (!userText) {
+                const translatedMessage = $translate.instant('orders.messages.MAIL_TEXT_EMPTY');
+                utilsService.displayMessage('error', translatedMessage);
+            } else {
+                const params = $.param({
+                    ordersInfo: JSON.stringify($scope.ordersInfo),
+                    orderPackages: JSON.stringify($scope.packages),
+                    userText
+                });
+                $http({
+                    method: 'POST',
+                    url: 'orders/api/sendSupportMail',
+                    data: params
+                }).then(updateMessage, utilsService.onHttpError);
+            }
+        }
+        function getSystemAllowedLanguages() {
+            $http({
+                method: 'POST',
+                url: 'orders/api/getSystemAllowedLanguages'
+            }).then(setSystemAllowedLanguages, utilsService.onHttpError);
+        }
+        function setSystemAllowedLanguages(response) {
+            if (typeof response.data !== 'undefined' && Object.keys(response.data).length > 0) {
+                if(!$scope.allowedLanguages) {
+                    response.data.languages.forEach(language => {
+                        $scope.allowedLanguages = $scope.allowedLanguages ? $scope.allowedLanguages + ', ' + language : language;
+                    });
+                }
+                const translatedMessage = $translate.instant('orders.messages.ALLOWED_LANGUAGE');
+                if (!$scope.allowedLanguagesDescription) {
+                    $scope.allowedLanguagesDescription = translatedMessage + $scope.allowedLanguages + '!';
+                }
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/orders/extra-actions/choose-installation.directive.js

@@ -0,0 +1,78 @@
+(function () {
+    global.dashModule
+        .controller('chooseInstallationCtrl', ['$scope', '$', '$http', '$translate', 'utilsService', chooseInstallationCtrl])
+        .directive('chooseInstallation', [chooseInstallationDirective]);
+
+    function chooseInstallationDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orders/html/chooseInstallationTemplate'
+        };
+    }
+
+    function chooseInstallationCtrl($scope, $, $http, $translate, utilsService) {
+        const step = $scope.$parent.step;
+        const idOrder = step.idOrder || 0;
+        const idPackage = step.idPackage || 0;
+        $scope.saveInstallationForPackage = saveInstallationForPackage;
+        $scope.getInstallCompaniesForPackage = getInstallCompaniesForPackage;
+        $scope.installCompany = {};
+        $scope.multipleInstallCompanies = false;
+
+        function getInstallCompaniesForPackage(step) {
+            const params = $.param({
+                idOrder,
+                idPackage
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/getInstallCompaniesForPackage'
+            }).then((response) => {
+                setInstallationCompanies(response, step);
+            }, utilsService.onHttpError);
+        }
+
+        function setInstallationCompanies(response, step) {
+            const availableInstallationCompanies = response.data.available;
+            const selectedInstallationCompany = response.data.selected;
+            if (response.data && availableInstallationCompanies.length) {
+                if (availableInstallationCompanies.length === 1) {
+                    $scope.multipleInstallCompanies = false;
+                    step.installationCompany = availableInstallationCompanies[0];
+                } else {
+                    $scope.multipleInstallCompanies = true;
+                    if (selectedInstallationCompany.length > 0) {
+                        step.installationCompany = selectedInstallationCompany[0];
+                    }
+                    step.installCompanies = availableInstallationCompanies;
+                }
+            }
+        }
+
+        function saveInstallationForPackage(step) {
+            const params = $.param({
+                idOrder,
+                idPackage,
+                idInstallation: step.installationCompany.id
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/saveInstallationCompany'
+            }).then(showConfirmationMessage, utilsService.onHttpError);
+        }
+
+        function showConfirmationMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+
+    }
+})();

api-wiaas/client/js/components/orders/extra-actions/customer-acceptance.directive.js

@@ -0,0 +1,188 @@
+(function () {
+    global.dashModule
+        .controller('customerAcceptanceCtrl', ['$scope', '$', '$http', '$translate', 'Upload', 'utilsService', customerAcceptanceCtrl])
+        .directive('customerAcceptance', [customerAcceptanceDirective]);
+
+    function customerAcceptanceDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orders/html/customerAcceptanceTemplate'
+        };
+    }
+
+    function customerAcceptanceCtrl($scope, $, $http, $translate, Upload, utilsService) {
+        const step = $scope.$parent.step;
+        const idOrder = step.idOrder;
+        const idProcess = step.idProcess;
+        const stepInfo = {
+            idOrder,
+            idProcess,
+            isNextButtonDisabled: true
+        };
+        $scope.getCustmerAcceptance = getCustmerAcceptance;
+        $scope.getDueDateClass = getDueDateClass;
+        $scope.uploadFile = uploadFile;
+        $scope.acceptDeclineInstallation = acceptDeclineInstallation;
+        $scope.getStatusIcon = getStatusIcon;
+        $scope.acceptance = {};
+        $scope.isInstallationNotAccepted = {};
+        $scope.showHideDialog = showHideDialog;
+        $scope.showDeclineInstallation = showDeclineInstallation;
+        $scope.isAcceptInstallationDisabled = false;
+        $scope.isDeclineInstallationDisabled = false;
+        $scope.isInstallationDeclined = {};
+        $scope.isDialogVisible = {};
+        $scope.getAcceptanceClass = getAcceptanceClass;
+        $scope.showCustomerAcceptance = showCustomerAcceptance;
+        $scope.getCustomerAcceptanceDescription = getCustomerAcceptanceDescription;
+        $scope.removeAcceptanceDocument = removeAcceptanceDocument;
+
+        function getCustmerAcceptance() {
+            const params = $.param({
+                idOrder
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/getCustomerAcceptance'
+            }).then(setCustomerAcceptance, utilsService.onHttpError);
+        }
+
+        function setCustomerAcceptance(response) {
+            if (response.data && Object.keys(response.data).length) {
+                $scope.acceptance = response.data[idOrder];
+                stepInfo.isNextButtonDisabled = parseInt($scope.acceptance.customerAccepted) === 0;
+                $scope.isAcceptInstallationDisabled = parseInt($scope.acceptance.customerAccepted) === 1;
+                $scope.isDeclineInstallationDisabled = parseInt($scope.acceptance.customerAccepted) === -1;
+            }
+            utilsService.executeRegisteredFunction('isNextBtnDisabled', stepInfo);
+        }
+
+        function getDueDateClass() {
+            if ($scope.acceptance.daysDiff <= 0) {
+                return 'alert-danger';
+            }
+
+            if ($scope.acceptance.daysDiff <= 3) {
+                return 'alert-warning';
+            }
+
+            return 'alert-info';
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+
+                    if (messageObj.code === 'success') {
+                        getCustmerAcceptance();
+                    }
+
+                    if (messageObj.message === 'INSTALLATION_DECLINED') {
+                        showDeclineInstallation();
+                        $scope.installationDeclinedReason = '';
+                        $scope.isDeclineInstallationDisabled = true;
+                    }
+                });
+            }
+        }
+
+        function uploadFile(file) {
+            Upload.upload({
+                url: 'orders/api/uploadAcceptanceDocument',
+                method: 'POST',
+                file: file,
+                data: {
+                    idPackage,
+                    idOrder
+                }
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function acceptDeclineInstallation(actionType) {
+            const params = $.param({
+                idOrder,
+                idPackage,
+                actionType,
+                declineReason: $scope.installationDeclinedReason
+            });
+
+            if ((actionType === 'accept' && !$scope.isAcceptInstallationDisabled) ||
+                (actionType === 'decline' && !$scope.isDeclineInstallationDisabled)) {
+                $http({
+                    method: 'POST',
+                    data: params,
+                    url: 'orders/api/acceptDeclineInstallation'
+                }).then(displayMessage, utilsService.onHttpError);
+            }
+        }
+
+        function getStatusIcon(status) {
+            let icon = 'time';
+            if (parseInt(status) === -1) {
+                icon = 'remove';
+            } else if (parseInt(status) === 1) {
+                icon = 'ok';
+            }
+
+            return icon;
+        }
+
+        function showHideDialog(actionType) {
+            $scope.$evalAsync(() => {
+                $scope.isDialogVisible[actionType] = !$scope.isDialogVisible[actionType];
+            });
+        }
+
+        function showDeclineInstallation() {
+            if (!$scope.isDeclineInstallationDisabled) {
+                $scope.$evalAsync(() => {
+                    $scope.isInstallationDeclined[idPackage] = !$scope.isInstallationDeclined[idPackage];
+                });
+            }
+        }
+
+        function getAcceptanceClass(acceptanceStatus) {
+            let cssClass = 'warning';
+            if (parseInt(acceptanceStatus) === -1) {
+                cssClass = 'danger';
+            } else if (parseInt(acceptanceStatus) === 1) {
+                cssClass = 'success';
+            }
+
+            return cssClass;
+        }
+
+        function showCustomerAcceptance(acceptance) {
+            return acceptance !== 0;
+        }
+
+        function getCustomerAcceptanceDescription(customerAcceptance) {
+            let acceptanceStatus = 'WAITING';
+            if (parseInt(customerAcceptance) === -1) {
+                acceptanceStatus = 'DECLINED';
+            } else if (parseInt(customerAcceptance) === 1) {
+                acceptanceStatus = 'ACCEPTED';
+            }
+
+            return $translate.instant('orders.messages.CUSTOMER_INSTALLATION_' + acceptanceStatus);
+        }
+
+        function removeAcceptanceDocument(idDocument) {
+            const params = $.param({
+                idOrder,
+                idPackage,
+                idDocument
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/removeOrderDocument'
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+    }
+})();

api-wiaas/client/js/components/orders/extra-actions/procurement.directive.js

@@ -0,0 +1,96 @@
+(function () {
+    global.dashModule
+        .controller('procurementCtrl', ['$scope', '$', '$http', '$translate', 'Upload', 'utilsService', 'ordersUtilsService', procurementCtrl])
+        .directive('procurement', [procurementDirective]);
+
+    function procurementDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orders/html/procurementTemplate'
+        };
+    }
+
+    function procurementCtrl($scope, $, $http, $translate, Upload, utilsService, ordersUtilsService) {
+        const step = $scope.$parent.step;
+        const idOrder = step.idOrder;
+        $scope.getSuppliersByPackageOrder = getSuppliersByPackageOrder;
+        $scope.uploadFile = uploadFile;
+        $scope.removeOrderDocument = removeOrderDocument;
+        $scope.isDialogVisible = {};
+        $scope.showHideDialog = showHideDialog;
+        $scope.selectPackage = selectPackage;
+        $scope.selectedPackage = {};
+
+        function selectPackage(packageObj, idSupplier){
+            $scope.selectedPackage[idSupplier] = packageObj;
+        }
+
+        function getSuppliersByPackageOrder() {
+            const params = $.param({
+                idOrder,
+                documentType: 'configuration'
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/getSuppliersByPackageOrder'
+            }).then(setProductEstimations, utilsService.onHttpError);
+        }
+
+        function setProductEstimations(response) {
+            if (response.data) {
+                $scope.suppliersData = response.data;
+                $.each($scope.suppliersData, (name, details) => {
+                    details.documents.forEach(docDetails => {
+                        $scope.isDialogVisible[docDetails.idDocument] = false;
+                    });
+                });
+            }
+        }
+
+        function uploadFile(file, idSupplier) {
+            Upload.upload({
+                url: 'orders/api/uploadConfigurationDocument',
+                method: 'POST',
+                file: file,
+                data: {
+                    idPackage : $scope.selectedPackage[idSupplier] && $scope.selectedPackage[idSupplier].idPackage || 0,
+                    idOrder,
+                    idSupplier
+                }
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    getSuppliersByPackageOrder();
+                    ordersUtilsService.getOrderInfo();
+                });
+            }
+        }
+
+        function removeOrderDocument(document) {
+            const params = $.param({
+                idOrder,
+                idPackage: document.idPackage,
+                idDocument: document.idDocument
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/removeOrderDocument'
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function showHideDialog(idDocument) {
+            $scope.$evalAsync(() => {
+                $scope.isDialogVisible[idDocument] = !$scope.isDialogVisible[idDocument];
+            });
+        }
+    }
+})();

api-wiaas/client/js/components/orders/extra-actions/schedule-meeting.directive.js

@@ -0,0 +1,147 @@
+(function () {
+    global.dashModule
+        .controller('scheduleMeetingCtrl', ['$scope', '$', '$http', '$translate', 'utilsService', scheduleMeetingCtrl])
+        .directive('scheduleMeeting', [scheduleMeetingDirective]);
+
+    function scheduleMeetingDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orders/html/scheduleMeetingTemplate'
+        };
+    }
+
+    function scheduleMeetingCtrl($scope, $, $http, $translate, utilsService) {
+        $scope.updateScheduledDates = updateScheduledDates;
+        $scope.getScheduledDates = getScheduledDates;
+        $scope.addNewSchedule = addNewSchedule;
+        $scope.getIcon = getIcon;
+        $scope.canNotEditDate = canNotEditDate;
+        $scope.changeScheduleStatus = changeScheduleStatus;
+        $scope.parentStep = $scope.$parent.step;
+        const stepInfo = {
+            isNextButtonDisabled: true,
+            idOrder: $scope.$parent.step.idOrder,
+            idPackage: $scope.$parent.step.idPackage,
+            idProcess: $scope.$parent.step.idProcess
+        };
+        utilsService.executeRegisteredFunction('isNextBtnDisabled', stepInfo);
+
+        function getScheduledDates(step) {
+            const params = $.param({
+                idOrder: step.idOrder,
+                idPackage: step.idPackage,
+                idProcessStep: step.idProcessStep || 0
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orders/api/getScheduledDates',
+                data: params
+            }).then((response) => {
+                setScheduleDates(response, step);
+            }, utilsService.onHttpError);
+        }
+
+        function setScheduleDates(response, step) {
+            if (response.data && response.data.length) {
+                step.scheduledDates = response.data;
+            } else {
+                addNewSchedule(step);
+            }
+            checkIfDateConfirmed(step);
+        }
+
+        function addNewSchedule(step) {
+            if (!step.scheduledDates) {
+                step.scheduledDates = [];
+            }
+
+            step.scheduledDates.push((() => {
+                return {
+                    idSchedule: 0,
+                    isDateConfirmed : 0,
+                    scheduledDate: '',
+                    idPackage: step.idPackage,
+                    idProcessStep: step.idProcessStep
+                };
+            })());
+        }
+
+        function updateScheduledDates(newDate, data) {
+            const params = $.param({
+                idOrder: data.step.idOrder,
+                idPackage: data.step.idPackage,
+                idProcess: data.step.idProcess,
+                idProcessStep: data.step.idProcessStep || 0,
+                idSchedule: data.scheduleDate.idSchedule,
+                newDate: newDate,
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orders/api/updateScheduledDates',
+                data: params
+            }).then((response) => {
+                showConfirmationMessage(response, data.step);
+            }, utilsService.onHttpError);
+        }
+
+        function showConfirmationMessage(response, step) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('orders.messages.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if (messageObj.code === 'success') {
+                        getScheduledDates(step);
+                    }
+                });
+            }
+        }
+
+        function getIcon(status){
+            const statusesIcons = {
+                pending: 'time',
+                accepted: 'ok',
+                declined: 'ban-circle'
+            };
+
+            return statusesIcons[status];
+        }
+
+        function canNotEditDate(scheduleDate){
+            return parseInt(scheduleDate.isDateConfirmed) !== 0;
+        }
+
+        function changeScheduleStatus(scheduleDate, status, step){
+            const params = $.param({
+                idSchedule : scheduleDate.idSchedule,
+                idOrder: step.idOrder,
+                idPackage: step.idPackage,
+                actionCode: step.actionCode,
+                status
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orders/api/updateScheduleDateStatus',
+                data: params
+            }).then((response) => {
+                showConfirmationMessage(response, step);
+            }, utilsService.onHttpError);
+        }
+
+        function checkIfDateConfirmed(step){
+            let isConfirmed = false;
+            step.scheduledDates.forEach((date) => {
+                if(date.isDateConfirmed && parseInt(date.isDateConfirmed) === 1){
+                    isConfirmed = true;
+                }
+            });
+
+            stepInfo.isNextButtonDisabled = !isConfirmed;
+            utilsService.executeRegisteredFunction('isNextBtnDisabled', stepInfo);
+        }
+    }
+})();

api-wiaas/client/js/components/orders/extra-actions/validate-questionnaire.directive.js

@@ -0,0 +1,178 @@
+(function () {
+    global.dashModule
+        .controller('validateQuestionnaireCtrl', ['$scope', '$', '$http', '$translate', 'Upload', 'utilsService', validateQuestionnaireCtrl])
+        .directive('validateQuestionnaire', [validateQuestionnaireDirective]);
+
+    function validateQuestionnaireDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orders/html/validateQuestionnaireTemplate'
+        };
+    }
+
+    function validateQuestionnaireCtrl($scope, $, $http, $translate, Upload, utilsService) {
+        $scope.customerDocuments = [];
+        $scope.getDocumentsAndQuestionnaireComments = getDocumentsAndQuestionnaireComments;
+        $scope.getValidationStatus = getValidationStatus;
+        $scope.validateQuestionaire = validateQuestionaire;
+        $scope.uploadFile = uploadFile;
+        $scope.needsUplaod = needsUplaod;
+        $scope.isQuestionaireInvalid = {};
+        $scope.isValidationDialogVisible = {
+            validated : {},
+            invalid : {}
+        };
+        $scope.showHideValidationDialog = showHideValidationDialog;
+        $scope.showInvalidTextbox = showInvalidTextbox;
+        $scope.waitingResponseFromCustomer = {};
+        $scope.getInvalidReasonsHeader = getInvalidReasonsHeader;
+        $scope.questionnaireCommentsExist = false;
+        const step = $scope.$parent.step;
+        const idOrder = step.idOrder;
+        const idProcessStep = step.idProcessStep;
+        const stepInfo = {
+            idOrder,
+            idProcess: step.idProcess
+        };
+
+        function getDocumentsAndQuestionnaireComments() {
+            getCustomerDocuments();
+            getQuestionnaireComments();
+        }
+
+        function getCustomerDocuments() {
+            const params = $.param({
+                idOrder,
+                documentType: 'orderQuestionaire'
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'v2/orders/api/getOrderDocumentsPerType'
+            }).then(setCustomerDocuments, utilsService.onHttpError);
+        }
+
+        function showHideValidationDialog(fctParams) {
+            if(!$scope.waitingResponseFromCustomer[fctParams.idDocument]) {
+                $scope.$evalAsync(() => {
+                    $scope.isValidationDialogVisible[fctParams.validationStatus][fctParams.idDocument] = !$scope.isValidationDialogVisible[fctParams.validationStatus][fctParams.idDocument];
+                });
+            }
+        }
+
+        function checkIfAllValid() {
+            let allValid = true;
+            Object.keys($scope.customerDocuments).forEach(key => {
+                const packageDocuments = $scope.customerDocuments[key];
+                packageDocuments.forEach((doc) => {
+                    if (doc.validation !== 'validated') {
+                        allValid = false;
+                    }
+                    $scope.waitingResponseFromCustomer[doc.idDocument] = doc.validation !== 'not-validated';
+                });
+            });
+
+            stepInfo.isNextButtonDisabled = !allValid;
+            utilsService.executeRegisteredFunction('isNextBtnDisabled', stepInfo);
+        }
+
+        function setCustomerDocuments(response) {
+            if (response.data && response.data.documents) {
+                $scope.customerDocuments = response.data.documents;
+                checkIfAllValid();
+            }
+        }
+
+        function getValidationStatus(status, documentValidation) {
+            return status === documentValidation;
+        }
+
+        function validateQuestionaire(fctParams) {
+            const params = $.param({
+                idOrder,
+                idPackage: fctParams.idPackage,
+                idDocument: fctParams.idDocument,
+                idProcessStep,
+                validationStatus: fctParams.validationStatus,
+                invalidQuestionaireReason: $scope.invalidQuestionaireReason
+            });
+
+            if (!$scope.waitingResponseFromCustomer[fctParams.idDocument]) {
+                $http({
+                    method: 'POST',
+                    data: params,
+                    url: 'orders/api/validateQuestionaire'
+                }).then(displayMessage, utilsService.onHttpError);
+            }
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+
+                    if (messageObj.code === 'success') {
+                        $scope.invalidQuestionaireReason = '';
+                        $scope.isQuestionaireInvalid = {};
+                        getDocumentsAndQuestionnaireComments();
+                    }
+
+                    if (messageObj.message === 'REASON_EMPTY') {
+                        $('#invalid-questionaire-comment').focus();
+                    }
+                });
+            }
+        }
+
+        function needsUplaod(validation) {
+            return validation === 'invalid';
+        }
+
+        function uploadFile(file, idDocument, idPackage) {
+            Upload.upload({
+                url: 'orders/api/reUploadQuestionaire',
+                method: 'POST',
+                file: file,
+                data: {
+                    idPackage,
+                    idOrder,
+                    idDocument
+                }
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function showInvalidTextbox(idDocument) {
+            $scope.isQuestionaireInvalid[idDocument] = (!$scope.isQuestionaireInvalid[idDocument] && !$scope.waitingResponseFromCustomer[idDocument]);
+        }
+
+        function getQuestionnaireComments() {
+            const params = $.param({
+                idOrder,
+                idProcessStep,
+                commentType: 'invalidQuestionnaireComment'
+            });
+
+            $http({
+                method: 'POST',
+                url: 'v2/orders/api/getCommentsByType',
+                data: params
+            }).then(setQuestionnaireComments, utilsService.onHttpError);
+        }
+
+        function setQuestionnaireComments(response) {
+            if (typeof response.data !== 'undefined') {
+                if (response.data.messages) {
+                    displayMessage(response);
+                }
+                $scope.invalidQuestionaireComments = response.data;
+                $scope.questionnaireCommentsExist = $scope.invalidQuestionaireComments.length > 0;
+            }
+        }
+
+        function getInvalidReasonsHeader() {
+            return $translate.instant('orders.tables.extra.INVALID_REASONS');
+        }
+    }
+})();

api-wiaas/client/js/components/orders/installation-scheduler.directive.js

@@ -0,0 +1,376 @@
+(function () {
+    global.dashModule
+        .controller('installationSchedulerCtrl', ['$scope', '$', '$http', '$translate', '$timeout', 'Upload', 'utilsService', 'ordersUtilsService', installationSchedulerCtrl])
+        .directive('installationScheduler', [installationSchedulerDirective]);
+
+    function installationSchedulerDirective() {
+        return {
+            restrict: 'E'
+        };
+    }
+
+    function installationSchedulerCtrl($scope, $, $http, $translate, $timeout, Upload, utilsService, ordersUtilsService) {
+        const idOrder = global.getParameterByName('idOrder');
+        const idPackage = $scope.$parent.orderPackage.idPackage;
+        const stepsIdsForInstallation = {
+            firstStepEnabled: 5,
+            lastStepEnabled: 6
+        };
+        $scope.idPackage = idPackage;
+        $scope.idOrder = idOrder;
+        $scope.getInstallationDetails = getInstallationDetails;
+        $scope.installationDates = [];
+        $scope.earliestInstallationDate = () => {
+            return ordersUtilsService.getEarliestInstallationDate(idOrder);
+        };
+        $scope.saveInstallationForPackage = saveInstallationForPackage;
+        $scope.installCompany = {};
+        $scope.multipleInstallCompanies = false;
+        $scope.updateInstallationDate = updateInstallationDate;
+        $scope.getIcon = getIcon;
+        $scope.shouldShowAddNewDate = shouldShowAddNewDate;
+        $scope.showAddNewDate = true;
+        $scope.isRemoveBtnVisible = isRemoveBtnVisible;
+        $scope.isDateProposedByMe = isDateProposedByMe;
+        $scope.removeMyDate = removeMyDate;
+        $scope.isAcceptDialogVisible = {};
+        $scope.isDeclineDialogVisible = {};
+        $scope.isRemoveDialogVisible = {};
+        $scope.showHideAcceptDialog = showHideAcceptDialog;
+        $scope.showHideDeclineDialog = showHideDeclineDialog;
+        $scope.showHideRemoveDialog = showHideRemoveDialog;
+        $scope.isInstallationInOrder = true;
+        $scope.isInstallationSet = false;
+        $scope.canUserAcceptOrDecline = canUserAcceptOrDecline;
+        $scope.userButtonAction = userButtonAction;
+        $scope.isMyInstallationCompany = false;
+        $scope.isInstallationSchedulingDisabled = () => {
+            const schedulingDisabled = ordersUtilsService.isComponentDisabled(idOrder, 'installationScheduling') || $scope.earliestInstallationDate() === '-';
+            $scope.optionClass = schedulingDisabled ? 'installation-company-disabled' : '';
+
+            return schedulingDisabled;
+        };
+        $scope.isInstallCompanySelectedAndScheduleDisabled = () => {
+            return $scope.isInstallationSchedulingDisabled() || !$scope.isInstallationSet;
+        };
+        utilsService.registerFunction('setMinDateAvailable', setMinDateAvailable);
+        $scope.installationDocuments = {};
+        $scope.uploadFile = uploadFile;
+        $scope.removeInstallDocument = removeInstallDocument;
+        $scope.isDialogVisible = {};
+        $scope.showHideDialog = showHideDialog;
+        $scope.showHideInstallationDialog = showHideInstallationDialog;
+        $scope.isInstallationDialogVisible = {};
+        $scope.isChangeInstallationAvailable = false;
+        $scope.activateChangeInstallation = activateChangeInstallation;
+        $scope.showHideChangingInstallationDialog = showHideChangingInstallationDialog;
+        $scope.isChangingInstallationDialogVisible = false;
+        $scope.showDateDetails = showDateDetails;
+
+        function getInstallationInformations() {
+            getInstallCompaniesForPackage();
+            getConfirmationInstallationDates();
+            getInstallationDocuments();
+            checkIfDateAlreadyAccepted();
+            utilsService.registerFunction('getConfirmationInstallationDates', getConfirmationInstallationDates);
+        }
+
+        function getInstallationDetails() {
+            getInstallationInformations();
+            ordersUtilsService.checkIfIsNextStepWanted(idOrder, 'installationScheduling', stepsIdsForInstallation);
+            ordersUtilsService.getEarliestInstallationDateFromDb(idOrder);
+        }
+
+        function setMinDateAvailable(paramData) {
+            $('#installation-date-propose-' + paramData.idPackage).datepicker('option', 'minDate', new Date(paramData.minDate));
+        }
+
+        function getConfirmationInstallationDates() {
+            const params = $.param({
+                idOrder,
+                idPackage
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orders/api/getInstallationDates',
+                data: params
+            }).then(setInstallationDates, utilsService.onHttpError);
+        }
+
+        function setInstallationDates(response) {
+            if (response.data && Object.keys(response.data).length) {
+                $scope.confirmationDates = response.data;
+                $scope.showAddNewDate = false;
+            } else {
+                $scope.confirmationDates = {};
+                $scope.showAddNewDate = true;
+            }
+        }
+
+        function getInstallCompaniesForPackage() {
+            const params = $.param({
+                idOrder,
+                idPackage
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/getInstallCompaniesForPackage'
+            }).then(setInstallationCompanies, utilsService.onHttpError);
+        }
+
+        function setInstallationCompanies(response) {
+            if (typeof response.data !== 'undefined') {
+                const availableInstallationCompanies = response.data.available ? response.data.available : [];
+                const selectedInstallationCompany = response.data.selected ? response.data.selected : [];
+                $scope.isMyInstallationCompany = response.data.isMyInstallationCompany;
+
+                if (availableInstallationCompanies.length === 0 && selectedInstallationCompany.length === 0) {
+                    $scope.isInstallationInOrder = false;
+                } else if (availableInstallationCompanies.length > 0) {
+                    if (availableInstallationCompanies.length === 1) {
+                        $scope.multipleInstallCompanies = false;
+                        $scope.installationCompany = availableInstallationCompanies[0];
+                        $scope.isInstallationSet = true;
+                    } else {
+                        $scope.multipleInstallCompanies = true;
+                        if (selectedInstallationCompany.length > 0) {
+                            $scope.installationCompany = selectedInstallationCompany[0];
+                            $scope.isInstallationSet = true;
+                        }
+                        $scope.installCompanies = availableInstallationCompanies;
+                    }
+                }
+                $scope.isChangeInstallationAvailable = $scope.multipleInstallCompanies && $scope.isInstallationSet;
+            }
+        }
+
+        function getInstallationDocuments() {
+            const params = $.param({
+                idOrder,
+                idPackage,
+                documentType: 'installationProtocol'
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orders/api/getOrderDocumentsPerType',
+                data: params
+            }).then(setInstallationDocuments, utilsService.onHttpError);
+        }
+
+        function setInstallationDocuments(response) {
+            if (typeof response.data !== 'undefined') {
+                $scope.installationDocuments = response.data;
+            }
+        }
+
+        function saveInstallationForPackage(idInstallation) {
+            const params = $.param({
+                idOrder,
+                idPackage,
+                idInstallation
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/saveInstallationCompany'
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function checkIfDateAlreadyAccepted() {
+            const params = $.param({
+                idOrder,
+                idPackage
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orders/api/checkIfDateAlreadyAccepted',
+                data: params
+            }).then(setInstallationAlreadyAccepted, utilsService.onHttpError);
+        }
+
+        function setInstallationAlreadyAccepted(response) {
+            if (typeof response !== 'undefined') {
+                $scope.isDateAlreadyAccepted = response.data;
+            }
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    let translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    if ('key' in messageObj) {
+                        translatedMessage += ' ' + messageObj.key;
+                    }
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+
+                    if (messageObj.code === 'success') {
+                        $scope.installationDate = '';
+                        getInstallationInformations();
+                    }
+                });
+            }
+        }
+
+        function updateInstallationDate(installationDate, status = 'proposed') {
+            if (Date.parse(installationDate)) {
+                const params = $.param({
+                    idOrder,
+                    idPackage,
+                    installationDate,
+                    status
+                });
+
+                $http({
+                    method: 'POST',
+                    url: 'orders/api/updateInstallationDate',
+                    data: params
+                }).then(displayMessage, utilsService.onHttpError);
+            } else {
+                const translatedMessage = $translate.instant('orders.messages.WRONG_DATE_FORMAT');
+                utilsService.displayMessage('error', translatedMessage);
+            }
+        }
+
+        function getIcon(status) {
+            const statusesIcons = {
+                proposed: 'time',
+                accepted: 'ok',
+                canceled: 'remove-circle',
+                declined: 'ban-circle',
+                invalid: 'remove-circle'
+            };
+
+            return statusesIcons[status];
+        }
+
+        function shouldShowAddNewDate() {
+            $scope.$evalAsync(() => {
+                $scope.showAddNewDate = !$scope.showAddNewDate;
+            });
+        }
+
+        function isDateProposedByMe(installationDate) {
+            return $scope.confirmationDates[installationDate].lastStatus === 'proposed' &&
+                $scope.confirmationDates[installationDate].isProposedByMe === true;
+        }
+
+        function removeMyDate(installationDate) {
+            const params = $.param({
+                idOrder,
+                idPackage,
+                installationDate
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/removeMyDate'
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function showHideAcceptDialog(confirmationDate) {
+            checkIfDateAlreadyAccepted();
+            $scope.isAcceptDialogVisible[confirmationDate] = !$scope.isAcceptDialogVisible[confirmationDate];
+
+        }
+
+        function showHideDeclineDialog(confirmationDate) {
+            $scope.$evalAsync(() => {
+                $scope.isDeclineDialogVisible[confirmationDate] = !$scope.isDeclineDialogVisible[confirmationDate];
+            });
+        }
+
+        function showHideRemoveDialog(confirmationDate) {
+            $scope.$evalAsync(() => {
+                $scope.isRemoveDialogVisible[confirmationDate] = !$scope.isRemoveDialogVisible[confirmationDate];
+            });
+        }
+
+        function userButtonAction(data) {
+            if (data.userStatus && data.confirmationDate) {
+                updateInstallationDate(data.confirmationDate, data.userStatus);
+            }
+        }
+
+        function canUserAcceptOrDecline(confirmationDate, dateInfo, lastStatus) {
+            let additionalCondition = false;
+            if (dateInfo.lastStatus === 'proposed') {
+                $scope.offsetClass = 'col-md-offset-1';
+            } else {
+                $scope.offsetClass = 'col-md-offset-3';
+            }
+            if (lastStatus === 'declined') {
+                additionalCondition = dateInfo.lastStatus === 'canceled' && dateInfo.isProposedByMe;
+            }
+            return !$scope.isInstallationSchedulingDisabled() &&
+                ((dateInfo.lastStatus === 'proposed' && !dateInfo.isProposedByMe) ||
+                    (dateInfo.lastStatus === lastStatus && dateInfo.isProposedByMe) ||
+                    additionalCondition);
+        }
+
+        function isRemoveBtnVisible(confirmationDate) {
+            return !$scope.isInstallationSchedulingDisabled() && isDateProposedByMe(confirmationDate);
+        }
+
+        function uploadFile(file) {
+            const idSupplier = $scope.installationCompany && $scope.installationCompany.idSupplier ? $scope.installationCompany.idSupplier : 0;
+            Upload.upload({
+                url: 'orders/api/uploadInstallationDocument',
+                method: 'POST',
+                file: file,
+                data: {
+                    idPackage,
+                    idOrder,
+                    idSupplier,
+                    fileType: 'installationProtocol'
+                }
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function showHideDialog(idDocument) {
+            $scope.$evalAsync(() => {
+                $scope.isDialogVisible[idDocument] = !$scope.isDialogVisible[idDocument];
+            });
+        }
+
+        function showHideInstallationDialog(idInstallationCompany) {
+            $scope.$evalAsync(() => {
+                $scope.isInstallationDialogVisible[idInstallationCompany] = !$scope.isInstallationDialogVisible[idInstallationCompany];
+            });
+        }
+
+        function removeInstallDocument(idDocument) {
+            const params = $.param({
+                idOrder,
+                idPackage,
+                idDocument
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/removeOrderDocument'
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function activateChangeInstallation() {
+            $scope.isChangeInstallationAvailable = !$scope.isChangeInstallationAvailable;
+        }
+
+        function showHideChangingInstallationDialog() {
+            $scope.$evalAsync(() => {
+                $scope.isChangingInstallationDialogVisible = !$scope.isChangingInstallationDialogVisible;
+            });
+        }
+
+        function showDateDetails(installationDate) {
+            installationDate.isInfoVisible = !installationDate.isInfoVisible;
+        }
+    }
+})();

api-wiaas/client/js/components/orders/orders-details.directive.js

@@ -0,0 +1,18 @@
+(function () {
+    global.dashModule
+        .controller('ordersDetailsCtrl', ['$scope', 'utilsService', 'ordersUtilsService', ordersDetailsCtrl])
+        .directive('ordersDetails', [ordersDetailsDirective]);
+
+    function ordersDetailsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orders/html/ordersDetailsTemplate'
+        };
+    }
+
+    function ordersDetailsCtrl($scope, utilsService, ordersUtilsService) {
+        $scope.getStatusIcon = utilsService.getStatusIcon;
+        $scope.hasAgreement = ordersUtilsService.hasAgreement;
+        $scope.calculatePrice = ordersUtilsService.calculatePrice;
+    }
+})();

api-wiaas/client/js/components/orders/orders-utils.service.js

@@ -0,0 +1,164 @@
+(function () {
+    global.dashModule.service('ordersUtilsService', ['$', '$http', '$translate', 'utilsService', ordersUtilsService]);
+
+    function ordersUtilsService($, $http, $translate, utilsService) {
+        let maxDeliveryDate = '';
+        const earliestInstallationDate = {};
+        const isNextStepTheOneWanted = {};
+        const callbackMethods = {};
+
+        return {
+            hasExtraAction,
+            calculatePrice,
+            hasAgreement,
+            setMaximumDeliveryDate,
+            getEarliestInstallationDateFromDb,
+            getEarliestInstallationDate,
+            checkIfIsNextStepWanted,
+            isComponentDisabled,
+            registerOrderFunction,
+            getOrderInfo
+        };
+
+        function hasExtraAction(step) {
+            return step.stepType === 'extraAction' && step.status === 'in-progress';
+        }
+
+        function calculatePrice(values, units) {
+            let total = 0;
+            values.forEach((val) => {
+                total += parseFloat(val);
+            });
+
+            return units ? total * units : 0;
+        }
+
+        function hasAgreement(packagePayPeriod, servicesContractPeriod) {
+            return parseInt(packagePayPeriod) > 0 || parseInt(servicesContractPeriod) > 0;
+        }
+
+        function setMaximumDeliveryDate(idOrder, idPackage, earliestIntallationDate) {
+            const params = $.param({
+                idOrder,
+                idPackage,
+                maxDeliveryDate: earliestIntallationDate
+            });
+
+            if (!maxDeliveryDate) {
+                maxDeliveryDate = '-';
+            }
+
+            if (earliestIntallationDate && earliestIntallationDate !== '-') {
+                maxDeliveryDate = earliestIntallationDate;
+                $http({
+                    method: 'POST',
+                    url: 'orders/api/setEarliestInstallationDateInDb',
+                    data: params
+                }).then(getMaximumDeliveryDate, utilsService.onHttpError);
+            }
+        }
+
+        function getMaximumDeliveryDate(response) {
+            if (typeof response.data !== 'undefined' && Object.keys(response.data).length) {
+                getEarliestInstallationDateFromDb(response.data.idOrder, response.data.idPackage);
+                displayMessage(response);
+
+                if('callConfirmationInstallationDatesFct' in response.data && response.data.callConfirmationInstallationDatesFct) {
+                    utilsService.executeRegisteredFunction('getConfirmationInstallationDates');
+                }
+            }
+        }
+
+        function getEarliestInstallationDateFromDb(idOrder, idPackage) {
+            const params = $.param({
+                idOrder,
+                idPackage,
+                maxDeliveryDate: maxDeliveryDate[idPackage]
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orders/api/getEarliestInstallationDate',
+                data: params
+            }).then(setEarliestInstallationDate, utilsService.onHttpError);
+        }
+
+        function setEarliestInstallationDate(response) {
+            if (typeof response.data !== 'undefined') {
+                if (response.data.messages) {
+                    displayMessage(response);
+                }
+                if (response.data.earliestInstallationDate) {
+                    const paramData = {
+                        idPackage: response.data.idPackage,
+                        minDate: response.data.earliestInstallationDate
+                    };
+                    earliestInstallationDate[response.data.idOrder] = response.data.earliestInstallationDate;
+                    utilsService.executeRegisteredFunction('setMinDateAvailable', paramData);
+                }
+            }
+        }
+
+        function getEarliestInstallationDate(idOrder) {
+            return earliestInstallationDate[idOrder] || '-';
+        }
+
+        function checkIfIsNextStepWanted(idOrder, usedForDirective, stepIds) {
+            const params = $.param({
+                idOrder,
+                stepIds: JSON.stringify(stepIds)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orders/api/checkIfIsNextStepWanted',
+                data: params
+            }).then((response) => {
+                isNextStepWanted(response, idOrder, usedForDirective);
+            }, utilsService.onHttpError);
+        }
+
+        function isNextStepWanted(response, idOrder, usedForDirective) {
+            if(typeof response.data !== 'undefined') {
+                if(!isNextStepTheOneWanted[usedForDirective]) {
+                    isNextStepTheOneWanted[usedForDirective] = {};
+                }
+                isNextStepTheOneWanted[usedForDirective][idOrder] = response.data;
+            }
+        }
+
+        function isComponentDisabled(idOrder, usedForDirective) {
+            if(isNextStepTheOneWanted[usedForDirective] && isNextStepTheOneWanted[usedForDirective][idOrder]) {
+                return isNextStepTheOneWanted[usedForDirective][idOrder];
+            }
+            return false;
+        }
+
+        function registerOrderFunction(key, showOrderInfo) {
+            callbackMethods[key] = showOrderInfo;
+        }
+
+        function getOrderInfo() {
+            const idOrder = global.getParameterByName('idOrder') || 0;
+            const params = $.param({
+                idOrder
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orders/api/getOrderInfo',
+                data: params
+            }).then(callbackMethods.showOrderInfo, utilsService.onHttpError);
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    let translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    const messageKey = 'key' in messageObj ? ' ' + messageObj.key : '';
+                    utilsService.displayMessage(messageObj.code, translatedMessage + messageKey);
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/orders/orders.directive.js

@@ -0,0 +1,196 @@
+(function () {
+    global.dashModule
+        .controller('ordersController', ['$scope', '$rootScope', '$http', '$compile', '$translate', '$', 'dataTableHelper', 'utilsService', 'ORDER_STATUSES_ICONS', 'ORDER_STATUSES', ordersController])
+        .directive('orders', [ordersDirective]);
+    function ordersDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orders/html/ordersTemplate'
+        };
+    }
+
+    function ordersController($scope, $rootScope, $http, $compile, $translate, $, dataTableHelper, utilsService, ORDER_STATUSES_ICONS, ORDER_STATUSES) {
+        const translationPath = 'orders.tables.headers.';
+        $scope.subModule = global.getParameterByName('subModule') || 'ongoing_orders';
+        $scope.setSubModule = setSubModule;
+        $scope.isSubmoduleVisible = isSubmoduleVisible;
+        $scope.getOngoingOrders = getOngoingOrders;
+        $scope.getOrdersHistory = getOrdersHistory;
+        $scope.brokers = [];
+        addUrlListener();
+        function addUrlListener() {
+            window.addEventListener('popstate', function (e) {
+                $scope.$evalAsync($scope => {
+                    $scope.subModule = e.state ? e.state.subModule : 'ongoing_orders';
+                });
+            }, false);
+        }
+        function setSubModule($event) {
+            $scope.subModule = $event.currentTarget.attributes.subModule.value;
+            history.pushState({
+                subModule: $scope.subModule
+            }, null, '?subModule=' + $scope.subModule);
+        }
+        function isSubmoduleVisible(subModule) {
+            return subModule === $scope.subModule;
+        }
+        function getOngoingOrders() {
+            $http({
+                method: 'POST',
+                url: 'orders/api/getOngoingOrdersHeaders',
+            }).then(showOngoingOrders, utilsService.onHttpError);
+        }
+        function showOngoingOrders(response) {
+            if (response.data.brokers && response.data.brokers.length > 0) {
+                $scope.brokers = response.data.brokers;
+            }
+            if (response.data.headers.length > 0) {
+                const params = {
+                    selector: '#ongoing-orders',
+                    url: 'orders/api/getOngoingOrders',
+                    hasDetails: true,
+                    extraTableOptions: {
+                        responsive: false,
+                        order: [
+                            [1, 'asc']
+                        ]
+                    }
+                };
+                dataTableHelper.generateColumns(response.data.headers, translationPath, dataTableHelper.showTable, params, formatOrderColumn)
+                    .then((table) => {
+                        addDetailsEvent(table, params.selector);
+                        addAssignBrokerDirectives();
+                    });
+            }
+        }
+        function addAssignBrokerDirectives() {
+            $('#ongoing-orders tbody').off('click', '.assign-icon');
+            $('#ongoing-orders tbody').on('click', '.assign-icon', function () {
+                const assignSelector = $(this).parent().find('.assign-broker');
+                if (assignSelector.length) {
+                    assignSelector.remove();
+                } else {
+                    const parent = $(this).parent();
+                    const idOrder = parent.attr('id-order');
+                    const directiveHtml = '<assign-broker id="assign-broker-' + idOrder + '" class="assign-broker" ng-controller="assignBrokerCtrl"></assign-broker>';
+                    const scope = $rootScope.$new();
+                    scope.brokers = $scope.brokers;
+                    scope.idOrder = idOrder;
+                    scope.onUpdate = getOngoingOrders;
+                    const comp = $compile($(directiveHtml))(scope);
+                    parent.append(comp);
+                }
+            });
+        }
+        function getOrdersHistory() {
+            $http({
+                method: 'POST',
+                url: 'orders/api/getOrdersHistoryHeaders',
+            }).then(showOrdersHistory, utilsService.onHttpError);
+        }
+        function showOrdersHistory(response) {
+            if (response.data.length > 0) {
+                const params = {
+                    selector: '#orders-history',
+                    url: 'orders/api/getOrdersHistory',
+                    hasDetails: true,
+                    extraTableOptions: {
+                        responsive: false,
+                        order: [
+                            [1, 'asc']
+                        ]
+                    }
+                };
+                dataTableHelper.generateColumns(response.data, translationPath, dataTableHelper.showTable, params, formatOrderColumn)
+                    .then((table) => {
+                        addDetailsEvent(table, params.selector);
+                    });
+            }
+        }
+        function addDetailsEvent(table, containerSelector) {
+            $(containerSelector + ' tbody').off('click', 'td.info-control');
+            $(containerSelector + ' tbody').on('click', 'td.info-control', function () {
+                var tr = $(this).closest('tr');
+                var row = table.row(tr);
+                if (row.child.isShown()) {
+                    row.child.hide();
+                    tr.removeClass('shown');
+                } else {
+                    const directiveHtml = '<orders-details ng-controller="ordersDetailsCtrl"></orders-details>';
+                    const scope = $rootScope.$new();
+                    scope.data = row.data();
+                    const layerSelector = 'details-layer-' + scope.data.id;
+                    row.child('<div id="' + layerSelector + '"></div>').show();
+                    const comp = $compile($(directiveHtml))(scope);
+                    $('#' + layerSelector).append(comp);
+                    tr.addClass('shown');
+                }
+            });
+        }
+        function formatOrderColumn(value, translations) {
+            const columnObj = {
+                data: value,
+                title: translations[translationPath + value]
+            };
+            const renders = getOrderRenders();
+            columnObj.visible = isColumnVisible(value);
+            if (typeof renders[value] !== 'undefined') {
+                columnObj.render = renders[value];
+            }
+            return columnObj;
+        }
+        function isColumnVisible(value) {
+            const notVisibleFields = [
+                'id',
+                'idCustomer',
+                'idCommercialLead',
+                'idCommercialLeadUser',
+                'idCustomerInstance',
+                'deliveryAddress',
+                'customerPhone',
+                'customerMail',
+                'commercialLeadPhone',
+                'commercialLeadMail'
+            ];
+            return notVisibleFields.indexOf(value) === -1;
+        }
+        function getOrderRenders() {
+            return {
+                orderNumber: ordersNumberRenderer,
+                status: ordersStatusRenderer,
+                orderItems: orderItemsRender,
+                step: orderStepRender,
+                assignedTo: assignedToRender
+            };
+            function ordersNumberRenderer(data, type, row) {
+                return '<a href="orders?subModule=orders_steps&idOrder=' + row.id + '&orderNumber=' + row.orderNumber + '">' + data + '</a>';
+            }
+            function ordersStatusRenderer(data) {
+                const status = ORDER_STATUSES[data] || data;
+                return '<div class="order-status-' + data + '"><span class="' + ORDER_STATUSES_ICONS[data] + '"></span> ' + status + '</div>';
+            }
+            function orderItemsRender(data, type, row) {
+                let html = '';
+                row.packages.forEach((pacakgeObj) => {
+                    html += '<div class="order-item">';
+                    html += pacakgeObj.units + ' x ' + pacakgeObj.packageName;
+                    html += typeof pacakgeObj.shortDesc !== 'undefined' ? ' ( ' + pacakgeObj.shortDesc + ' )' : '';
+                    html += ' <span class="order-status-' + pacakgeObj.status + ' ' + ORDER_STATUSES_ICONS[pacakgeObj.status] + '"></span>';
+                    html += '</div>';
+                });
+                return html;
+            }
+            function orderStepRender(data) {
+                return data.replace(/,/g, '<br/>');
+            }
+            function assignedToRender(data, type, row) {
+                const newData = data === '' ? $translate.instant('orders.tables.extra.NOT_ASSIGNED') : data;
+                let html = '<div class="assign-broker-layer" id-order="' + row.id + '">';
+                html += '<div class="assigned-broker">' + newData + '</div>';
+                html += '<div class="assign-icon glyphicon glyphicon-pencil"></div>';
+                html += '</div>';
+                return html;
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/orders/set-delivery-dates.directive.js

@@ -0,0 +1,303 @@
+(function () {
+    global.dashModule
+        .controller('setDeliveryDatesCtrl', ['$scope', '$', '$http', '$translate', 'utilsService', 'ordersUtilsService', setDeliveryDatesCtrl])
+        .directive('setDeliveryDates', [setDeliveryDatesDirective]);
+
+    function setDeliveryDatesDirective() {
+        return {
+            restrict: 'E'
+        };
+    }
+
+    function setDeliveryDatesCtrl($scope, $, $http, $translate, utilsService, ordersUtilsService) {
+        let areEstimatedDatesSet = false;
+        let areConfirmedDatesSet = false;
+        const stepIdsForDeliveryDates = {
+            firstStepEnabled: 5,
+            lastStepEnabled: 6
+        };
+        $scope.isDatePickerOpen = {
+            estimatedDate: {},
+            confirmedDate: {}
+        };
+        const idOrder = global.getParameterByName('idOrder');
+        const process = $scope.$parent.process;
+        const idPackage = process.idPackage;
+        const idProcess = process.idProcess;
+        const stepInfo = {
+            idOrder,
+            idPackage,
+            idProcess
+        };
+        $scope.idPackage = idPackage;
+        $scope.getEstimationsAndEarliestInstallDate = getEstimationsAndEarliestInstallDate;
+        $scope.updateSupplierEstimation = updateSupplierEstimation;
+        $scope.getEstimationIcon = getEstimationIcon;
+        $scope.getEstimatedOrConfirmedMaxDate = getEstimatedOrConfirmedMaxDate;
+        $scope.updateTracking = updateTracking;
+        $scope.addTracking = addTracking;
+        $scope.supplierEstimations = [];
+        $scope.shouldShowAddNewTracking = shouldShowAddNewTracking;
+        $scope.showAddNewTracking = {};
+        $scope.removeTracking = removeTracking;
+        $scope.isRemoveDialogVisible = {};
+        $scope.showHideRemoveDialog = showHideRemoveDialog;
+        $scope.isTrackingEmpty = isTrackingEmpty;
+        $scope.removeSupplierEstimation = removeSupplierEstimation;
+        $scope.areProductsInOrder = true;
+        $scope.openDatePicker = openDatePicker;
+        $scope.isDateEditable = isDateEditable;
+        $scope.isRemoveDatesDialogVisible = {
+            'estimated': {},
+            'confirmed': {}
+        };
+        $scope.showHideRemoveDatesDialog = showHideRemoveDatesDialog;
+        $scope.earliestInstallationDate = () => {
+            return ordersUtilsService.getEarliestInstallationDate(idOrder);
+        };
+        $scope.isSetDeliveryDatesDisabled = () => {
+            return ordersUtilsService.isComponentDisabled(idOrder, 'setDeliveryDates');
+        };
+
+        function getEstimationsAndEarliestInstallDate() {
+            getSupplierEstimations();
+            ordersUtilsService.checkIfIsNextStepWanted(idOrder, 'setDeliveryDates', stepIdsForDeliveryDates);
+            ordersUtilsService.getEarliestInstallationDateFromDb(idOrder, idPackage);
+            utilsService.registerFunction('getSupplierEstimations', getSupplierEstimations);
+        }
+
+        function getSupplierEstimations(onInit = false) {
+            const params = $.param({
+                idOrder
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/getSupplierEstimations'
+            }).then((response) => {
+                setSuppliersEstimations(response, onInit);
+            }, utilsService.onHttpError);
+        }
+
+        function setSuppliersEstimations(response, onInit = false) {
+            areEstimatedDatesSet = false;
+            areConfirmedDatesSet = false;
+
+            if (response.data) {
+                $scope.supplierEstimations = response.data;
+                if ($scope.supplierEstimations.length === 0) {
+                    $scope.areProductsInOrder = false;
+                }
+
+                $scope.supplierEstimations.forEach(supplierEstimation => {
+                    $scope.showAddNewTracking[supplierEstimation.idSupplier] = !supplierEstimation.trackings.length;
+                });
+            }
+
+            if (!onInit) {
+                areEstimatedDatesSet = checkEstimatedDateSet($scope.supplierEstimations);
+                areConfirmedDatesSet = checkConfirmedDateSet($scope.supplierEstimations);
+
+                if (areConfirmedDatesSet) {
+                    const maxConfDate = getEstimatedOrConfirmedMaxDate('confirmedDate');
+                    ordersUtilsService.setMaximumDeliveryDate(idOrder, 0, maxConfDate);
+                } else if (areEstimatedDatesSet) {
+                    const maxEstimatedDate = getEstimatedOrConfirmedMaxDate('estimatedDate');
+                    const maxConfDate = getEstimatedOrConfirmedMaxDate('confirmedDate');
+                    const maxDate = maxConfDate !== '-' ? maxConfDate > maxEstimatedDate ? maxConfDate : maxEstimatedDate : maxEstimatedDate;
+                    ordersUtilsService.setMaximumDeliveryDate(idOrder, 0, maxDate);
+                }
+            }
+
+            utilsService.executeRegisteredFunction('isNextBtnDisabled', stepInfo);
+        }
+
+        function checkEstimatedDateSet(supplierEstimations) {
+            return supplierEstimations.every(supplierEstimation => {
+                return supplierEstimation.estimatedDate !== null;
+            });
+        }
+
+        function checkConfirmedDateSet(supplierEstimations) {
+            return supplierEstimations.every(supplierEstimation => {
+                return supplierEstimation.confirmedDate !== null;
+            });
+        }
+
+        function addTracking(idSupplier, trackingNumber, trackingUrl) {
+            const params = $.param({
+                idOrder,
+                idSupplier,
+                trackingNumber,
+                trackingUrl
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/addTracking'
+            }).then(displayUpdateMessage, utilsService.onHttpError);
+        }
+
+        function updateTracking(trackingInfo) {
+            const params = $.param({
+                idTracking: trackingInfo.idTracking,
+                trackingNumber: trackingInfo.trackingNumber,
+                trackingUrl: trackingInfo.trackingUrl
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/updateTracking'
+            }).then(displayUpdateMessage, utilsService.onHttpError);
+        }
+
+        function removeSupplierEstimation(fctParams) {
+            const params = $.param({
+                idOrder,
+                type: fctParams.type,
+                idSupplier: fctParams.idSupplier
+            });
+
+            if(areEstimatedDatesSet) {
+                if(!areConfirmedDatesSet && fctParams.type === 'estimation') {
+                    ordersUtilsService.setMaximumDeliveryDate(idOrder, 0, 'remove');
+                }
+            } else if(!areEstimatedDatesSet && areConfirmedDatesSet){
+                ordersUtilsService.setMaximumDeliveryDate(idOrder, 0, 'remove');
+            } else if(areEstimatedDatesSet || areConfirmedDatesSet) {
+                const maxEstimatedDate = getEstimatedOrConfirmedMaxDate('estimatedDate');
+                const maxConfDate = getEstimatedOrConfirmedMaxDate('confirmedDate');
+                const maxDate = maxConfDate !== '-' ? maxConfDate > maxEstimatedDate ? maxConfDate : maxEstimatedDate : maxEstimatedDate;
+                ordersUtilsService.setMaximumDeliveryDate(idOrder, 0, maxDate);
+            }
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'orders/api/removeSupplierEstimation'
+            }).then(displayUpdateMessage, utilsService.onHttpError);
+        }
+
+        function updateSupplierEstimation(date, supplierEstimation) {
+            if (Date.parse(date)) {
+                const params = $.param({
+                    idOrder,
+                    idSupplier: supplierEstimation.idSupplier,
+                    estimatedDate: supplierEstimation.estimatedDate,
+                    confirmedDate: supplierEstimation.confirmedDate
+                });
+
+                if (supplierEstimation.confirmedDate && areEstimatedDatesSet) {
+                    const maxEstimatedDate = getEstimatedOrConfirmedMaxDate('estimatedDate');
+                    const maxConfDate = getEstimatedOrConfirmedMaxDate('confirmedDate');
+                    let maxDate = maxEstimatedDate;
+                    if(maxConfDate !== '-') {
+                        if(maxConfDate > maxEstimatedDate) {
+                            maxDate = maxConfDate;
+                        }
+                    }
+                    ordersUtilsService.setMaximumDeliveryDate(idOrder, 0, maxDate);
+                }
+
+                $http({
+                    method: 'POST',
+                    data: params,
+                    url: 'orders/api/updateSupplierEstimation'
+                }).then(displayUpdateMessage, utilsService.onHttpError);
+            } else {
+                const translatedMessage = $translate.instant('orders.messages.WRONG_DATE_FORMAT');
+                utilsService.displayMessage('error', translatedMessage);
+            }
+        }
+
+        function displayUpdateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    const messageKey = 'key' in messageObj ? messageObj.key : '';
+                    utilsService.displayMessage(messageObj.code, translatedMessage + messageKey);
+
+                    if (response.data.messages[0].code === 'success') {
+                        getSupplierEstimations();
+                        if ('idProduct' in response.data) {
+                            $scope.isDatePickerOpen['estimatedDate'][response.data.idProduct] = false;
+                            $scope.isDatePickerOpen['confirmedDate'][response.data.idProduct] = false;
+                        }
+                    }
+                });
+            }
+        }
+
+        function getEstimationIcon(confirmedDate) {
+            return confirmedDate ? 'glyphicon-ok' : 'glyphicon-time';
+        }
+
+        function getEstimatedOrConfirmedMaxDate(key) {
+            let maxDate = '2000-01-01';
+            let d1;
+            let d2;
+
+            const maxTempDate = $scope.supplierEstimations.length > 0 ?
+                $scope.supplierEstimations.reduce((a, b) => {
+                    d1 = new Date(a[key]);
+                    d2 = new Date(b[key]);
+
+                    return d1 < d2 ? b : a;
+                }) : maxDate;
+
+            d1 = new Date(maxTempDate[key]);
+            d2 = new Date(maxDate);
+            maxDate = d1 > d2 ? maxTempDate[key] : maxDate;
+
+            return maxDate !== '2000-01-01' ? maxDate : '-';
+        }
+
+        function shouldShowAddNewTracking(idSupplier) {
+            $scope.$evalAsync(() => {
+                $scope.showAddNewTracking[idSupplier] = !$scope.showAddNewTracking[idSupplier];
+            });
+        }
+
+        function showHideRemoveDialog(idTracking) {
+            $scope.$evalAsync(() => {
+                $scope.isRemoveDialogVisible[idTracking] = !$scope.isRemoveDialogVisible[idTracking];
+            });
+        }
+
+        function removeTracking(trackingInfo) {
+            const params = $.param({
+                idTracking: trackingInfo.idTracking
+            });
+
+            $http({
+                method: 'POST',
+                url: 'orders/api/removeTracking',
+                data: params
+            }).then(displayUpdateMessage, utilsService.onHttpError);
+        }
+
+        function isTrackingEmpty(trackingData) {
+            return trackingData.length === 0;
+        }
+
+        function openDatePicker(dateType, idSupplier) {
+            if (!(idSupplier in $scope.isDatePickerOpen[dateType])) {
+                $scope.isDatePickerOpen[dateType][idSupplier] = false;
+            }
+            $scope.isDatePickerOpen[dateType][idSupplier] = !$scope.isDatePickerOpen[dateType][idSupplier];
+        }
+
+        function isDateEditable(dateType, supplierEstimation) {
+            return $scope.isDatePickerOpen[dateType][supplierEstimation.idSupplier] || !supplierEstimation[dateType];
+        }
+
+        function showHideRemoveDatesDialog(type, supplierEstimation) {
+            $scope.$evalAsync(() => {
+                $scope.isRemoveDatesDialogVisible[type][supplierEstimation.idSupplier] = !$scope.isRemoveDatesDialogVisible[type][supplierEstimation.idSupplier];
+            });
+        }
+    }
+})();

api-wiaas/client/js/components/orders/suppliers-procurement-view.directive.js

@@ -0,0 +1,35 @@
+(function () {
+    global.dashModule
+        .controller('suppliersProcurementViewCtrl', ['$scope', '$', '$http', '$rootScope', '$compile', 'utilsService', 'ordersUtilsService', suppliersProcurementViewCtrl])
+        .directive('suppliersProcurementView', [suppliersProcurementViewDirective]);
+
+    function suppliersProcurementViewDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'orders/html/suppliersProcurementViewTemplate'
+        };
+    }
+
+    function suppliersProcurementViewCtrl($scope, $, $http, $rootScope, $compile, utilsService, ordersUtilsService) {
+        $scope.hasExtraAction = ordersUtilsService.hasExtraAction;
+        $scope.getOrderSteps = getOrderSteps;
+
+        function getOrderSteps() {
+            const idOrder = global.getParameterByName('idOrder') || 0;
+            const params = $.param({
+                idOrder
+            });
+            $http({
+                method: 'POST',
+                url: 'orders/api/getOrderSteps',
+                data: params
+            }).then(showOrderSteps, utilsService.onHttpError);
+        }
+
+        function showOrderSteps(response) {
+            if (typeof response.data === 'object') {
+                $scope.processSteps = response.data;
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/orders/support-mail.directive.js

@@ -0,0 +1,21 @@
+(function () {
+    global.dashModule
+        .directive('supportMail', ['utilsService', 'ordersUtilsService', supportMailDirective]);
+
+    function supportMailDirective(utilsService, ordersUtilsService) {
+        return {
+            restrict: 'A',
+            templateUrl: 'orders/html/supportMailTemplate',
+            scope: {
+                ordersDetails: '<',
+                packages: '<',
+                supportMailText: '='
+            },
+            link: function (scope) {
+                scope.calculatePrice = ordersUtilsService.calculatePrice;
+                scope.getStatusIcon = utilsService.getStatusIcon;
+                scope.hasAgreement = ordersUtilsService.hasAgreement;
+            }
+        };
+    }
+})();

api-wiaas/client/js/components/orders/upload-documents-for-order-package.directive.js

@@ -0,0 +1,80 @@
+(function () {
+    global.dashModule
+        .controller('uploadDocumentsForOrderPackageCtrl', ['$scope', '$', '$http', '$translate', 'utilsService', 'Upload', uploadDocumentsForOrderPackageCtrl])
+        .directive('uploadDocumentsForOrderPackage', [uploadDocumentsForOrderPackageDirective]);
+
+    function uploadDocumentsForOrderPackageDirective() {
+        return {
+            restrict: 'E'
+        };
+    }
+
+    function uploadDocumentsForOrderPackageCtrl($scope, $, $http, $translate, utilsService, Upload) {
+        $scope.getDocumentTypes = getDocumentTypes;
+        $scope.setDocumentTypes = setDocumentTypes;
+        $scope.uploadFile = uploadFile;
+        $scope.selectFileType = selectFileType;
+        $scope.selectPackage = selectPackage;
+        $scope.documentTypes = [];
+        $scope.fileName = '';
+        $scope.selectedFileType = {};
+        $scope.selectedPackage = {};
+        $scope.isOrderOngoingOrCompleted = isOrderOngoingOrCompleted;
+
+        function getDocumentTypes() {
+            $http({
+                url: 'documents/api/getDocumentTypes',
+                method: 'POST',
+                data: $.param({
+                    withoutTemplates: true
+                })
+            }).then(setDocumentTypes, utilsService.onHttpError);
+        }
+
+        function setDocumentTypes(response){
+            if(response.data && response.data.length){
+                $scope.documentTypes = response.data.filter((documentType) => {
+                    return documentType.isSpecialType !== 1;
+                });
+            }
+        }
+
+        function uploadFile(file) {
+            Upload.upload({
+                url: 'orders/api/uploadOrderDocument',
+                method: 'POST',
+                file: file,
+                data: {
+                    idOrder: global.getParameterByName('idOrder') || 0,
+                    idPackage: $scope.selectedPackage.idPackage || 0,
+                    idDocumentType: $scope.selectedFileType.idDocumentType || 0,
+                    fileName : $scope.fileName
+                }
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('orders.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if(messageObj.code === 'success'){
+                        $scope.fileName = '';
+                    }
+                });
+            }
+        }
+
+        function selectFileType(docType){
+            $scope.selectedFileType = docType;
+        }
+
+        function selectPackage(packageObj){
+            $scope.selectedPackage = packageObj;
+        }
+
+        function isOrderOngoingOrCompleted() {
+            return ['in-progress', 'production'].includes($scope.$parent.$parent.$parent.ordersInfo.status);
+        }
+    }
+})();

api-wiaas/client/js/components/packages/add-virtual-products.directive.js

@@ -0,0 +1,53 @@
+(function () {
+    global.dashModule
+        .directive('addVirtualProducts', addVirtualProductsDirective)
+        .controller('addVirtualProductsCtrl', ['$scope', '$', '$http', '$translate', 'utilsService', 'packagesUtilsService', addVirtualProductsCtrl]);
+
+    function addVirtualProductsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'packages/html/addVirtualProductsTemplate'
+        };
+    }
+
+    function addVirtualProductsCtrl($scope, $, $http, $translate, utilsService, packagesUtilsService) {
+        $scope.getProductCategories = getProductCategories;
+        $scope.addVirtualProduct = addVirtualProduct;
+
+        function getProductCategories(selectedCategory = '') {
+            $scope.selectedCategory = selectedCategory;
+            packagesUtilsService.getProductCategories().then(showProductCategories, utilsService.onHttpError);
+        }
+
+        function showProductCategories(response) {
+            $scope.productCategories = response.data && response.data.length ? response.data : [];
+        }
+
+        function addVirtualProduct() {
+            const params = $.param({
+                productName: $scope.name,
+                idCategory: $scope.category && $scope.category.id ? $scope.category.id : 0
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'packages/api/addVirtualProduct'
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('packages.forms.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+
+                    if(messageObj.code === 'success') {
+                        $scope.name = '';
+                        utilsService.executeRegisteredFunction('getVirtualProductsByCategories');
+                    }
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/packages/create-packages-from-template.directive.js

@@ -0,0 +1,356 @@
+(function () {
+    global.dashModule
+        .directive('createPackagesFromTemplate', createPackagesFromTemplateDirective)
+        .controller('createPackagesFromTemplateController', ['$scope', '$http', '$', '$translate', '$timeout', 'utilsService', 'packagesUtilsService', createPackagesFromTemplateCtrl]);
+
+    function createPackagesFromTemplateDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'packages/html/createPackagesFromTemplateTemplate'
+        };
+    }
+
+    function createPackagesFromTemplateCtrl($scope, $http, $, $translate, $timeout, utilsService, packagesUtilsService) {
+        const virtualCategoryNonExisting = [];
+        const categories = [];
+        const hasMultipleProducts = {};
+        let droppedRealPackage;
+        let realProductKeyReturned;
+        let virtualProductKeyReturned;
+        let elementDragged = '';
+        $scope.isCountryAndPackageSelected = false;
+        $scope.getTitle = packagesUtilsService.getTitle;
+        $scope.productUnit = {};
+        $scope.updateProducts = updateProducts;
+        $scope.updateVirtualProducts = updateVirtualProducts;
+        $scope.createPackageFromTemplate = createPackageFromTemplate;
+        $scope.countrySelected = '';
+        $scope.onDragStartFromProducts = onDragStartFromProducts;
+        $scope.onDragStop = onDragStop;
+        $scope.onDragStartFromPackage = onDragStartFromPackage;
+        $scope.productDropped = productDropped;
+        $scope.areTemplateAndCountrySelected = areTemplateAndCountrySelected;
+        $scope.getCountryTranslationKey = getCountryTranslationKey;
+        $scope.checkQuantityAmount = utilsService.verifyAmountAdded;
+        $scope.initializeCreatePackages = initializeCreatePackages;
+        $scope.packages = [];
+        $scope.isCategoryInTemplate = isCategoryInTemplate;
+        $scope.isAdditionalVirtualProductVisible = isAdditionalVirtualProductVisible;
+        // default value for additional bussiness days for installation
+        $scope.additionalInstallationDays = 5;
+        $scope.selectedPackageTypeId = 1;
+        $scope.getTemplateDescription = getTemplateDescription;
+        $scope.tinymceOptions = utilsService.getTynimceOptions();
+        $scope.uploadParams = {};
+
+        function initializeCreatePackages() {
+            const params = {getArray: true};
+            httpCall('countries/api/getAllCountries', getCountries, params);
+            httpCall('packages/api/getTemplatePackages', getTemplatePackages);
+            getPackageTypes();
+        }
+
+        function getTemplateDescription() {
+            const selectedTemplate = searchTemplateSelected() || {};
+            return selectedTemplate.templateDescription || '';
+        }
+
+        function getTemplatePackages(response) {
+            $scope.templates = response.data;
+        }
+
+        function getPackageTypes(){
+            const params = {
+                idPackage: $scope.packageSelected ? $scope.packageSelected.id : 0
+            };
+            httpCall('packages/api/getPackageTypes', setPackageTypes, params);
+        }
+
+        function setPackageTypes(response){
+            if(response.data && response.data.packageTypes){
+                $scope.packageTypes = response.data.packageTypes;
+            }
+        }
+
+        function httpCall(httpUrl, successCallback, params) {
+            const urlParams = params ? $.param(params) : {};
+            $http({
+                method: 'POST',
+                url: httpUrl,
+                data: urlParams
+            }).then(successCallback, utilsService.onHttpError);
+        }
+
+        function areTemplateAndCountrySelected() {
+            return typeof $scope.selectedCountryId !== 'undefined' && $scope.selectedCountryId !== 0 &&
+                typeof $scope.idSelectedPackageTemplate !== 'undefined' && $scope.idSelectedPackageTemplate;
+        }
+
+        function getCountryTranslationKey() {
+            return $scope.countrySelected === '' ? 'SELECT_COUNTRY' : 'SELECTED_COUNTRY';
+        }
+
+        function getProductsForPackages(response) {
+            $scope.productsByCategories = typeof response.data !== 'undefined' ? response.data : [];
+            getProductAndPackageCategories();
+            setHeights();
+        }
+
+        function getCountries(response) {
+            if (response.data) {
+                $scope.countries = response.data;
+            }
+        }
+
+        function onDragStartFromProducts(event, ui, product) {
+            $('#products-list-' + product.category).css({
+                overflow: 'visible'
+            });
+            $('.real-product-' + product.category).addClass('allowed-drop-zone');
+
+            droppedRealPackage = product;
+            realProductKeyReturned = '';
+            virtualProductKeyReturned = '';
+            elementDragged = 'product';
+        }
+
+        function onDragStartFromPackage(event, ui, virtualProductKey, realProductKey, category) {
+            $('#packages-list-' + category).css({
+                overflow: 'visible'
+            });
+
+            virtualProductKeyReturned = virtualProductKey;
+            realProductKeyReturned = realProductKey;
+            elementDragged = 'package';
+        }
+
+        function onDragStop(event, ui, product) {
+            $('.package-list-' + product.category).css({
+                'overflow-y': 'scroll'
+            });
+            $('.real-product-' + product.category).removeClass('allowed-drop-zone');
+
+            $scope.productUnit[product.idProduct] = $scope.productUnit[product.idProduct] || 1;
+        }
+
+        function productDropped(event, ui, placeToDrop, productKey, productCategory) {
+            const packageProduct = $scope.packagesByCategories[productCategory];
+
+            if (placeToDrop === 'package') {
+                if (elementDragged !== placeToDrop && packageProduct[productKey]) {
+                    if (!packageProduct[productKey].real) {
+                        packageProduct[productKey].real = [];
+                    }
+
+                    const productExists = packageProduct[productKey].real.some(product => {
+                        return product.idProduct === droppedRealPackage.idProduct;
+                    });
+                    if(!productExists){
+                        packageProduct[productKey].real.push(droppedRealPackage);
+                    }
+
+                }
+            } else if (placeToDrop === 'product') {
+                if (elementDragged !== placeToDrop) {
+                    if ((virtualProductKeyReturned in packageProduct) &&
+                        packageProduct[virtualProductKeyReturned].hasOwnProperty('real')) {
+
+                        delete packageProduct[virtualProductKeyReturned].real;
+                    } else if (packageProduct[realProductKeyReturned] &&
+                        packageProduct[realProductKeyReturned].hasOwnProperty('real')) {
+
+                        delete packageProduct[realProductKeyReturned].real;
+                    }
+                }
+            }
+
+            $(ui.helper).css({
+                position: 'relative',
+                left: 0,
+                top: 0
+            });
+            elementDragged = '';
+        }
+
+        function getProductAndPackageCategories() {
+            if ($scope.productsByCategories) {
+                Object.keys($scope.productsByCategories).forEach((category, productKey) => {
+                    virtualCategoryNonExisting[category] = $scope.packagesByCategories.hasOwnProperty(category);
+                    categories.push(category);
+                    if ($scope.productsByCategories[category][productKey]) {
+                        hasMultipleProducts[category] = $scope.productsByCategories[category][productKey].hasMultiple;
+                    }
+                });
+            }
+        }
+
+        function isCategoryInTemplate(category) {
+            return virtualCategoryNonExisting[category];
+        }
+
+        function setHeights() {
+            $timeout(function () {
+                categories.forEach(category => {
+                    const packagesHeight = $('#packages-list-' + category).height() + 3;
+
+                    $('#products-list-' + category).css({
+                        height: packagesHeight,
+                        'overflow-y': 'overlay'
+                    });
+
+                    $('#pack-' + category + '-from-template-container').css({
+                        height: packagesHeight
+                    });
+                });
+            }, 10);
+        }
+
+        function isAdditionalVirtualProductVisible(category) {
+            return hasMultipleProducts && hasMultipleProducts[category] ? parseInt(hasMultipleProducts[category]) : 0;
+        }
+
+        function updateProducts() {
+            const idCountry = $scope.selectedCountryId;
+            const params = {
+                idCountry
+            };
+            const countryInfoSelected = $scope.countries.find(countryInfo => {
+                return countryInfo.id === idCountry;
+            });
+
+            $scope.countrySelected = countryInfoSelected.name;
+            $scope.translationData = {
+                country: $scope.countrySelected
+            };
+            $scope.isString = false;
+            let productsPerType;
+            for (productsPerType in $scope.packagesByCategories) {
+                $scope.packagesByCategories[productsPerType].forEach(packageDetails => {
+                    if (packageDetails.hasOwnProperty('real')) {
+                        delete packageDetails.real;
+                    }
+                });
+            }
+            utilsService.executeRegisteredFunction('saveCoverImage', $scope.uploadParams);
+
+            httpCall('packages/api/getProductsByCategory', getProductsForPackages, params);
+        }
+
+        function updateVirtualProducts(afterCreate = false) {
+            let virtualProducts = [];
+            let productsByCategory;
+
+            if (areTemplateAndCountrySelected()) {
+                $.extend(virtualProducts, searchTemplateSelected().products);
+                updateProducts();
+
+                for (productsByCategory in virtualProducts) {
+                    virtualProducts[productsByCategory].forEach(virtualProduct => {
+                        $scope.productUnit[virtualProduct.idProduct] = parseInt(virtualProduct.quantity);
+                        if (afterCreate) {
+                            delete virtualProduct.real;
+                        }
+                    });
+                }
+                $scope.packagesByCategories = virtualProducts;
+                setHeights();
+            }
+
+            $scope.uploadParams = {
+                shouldShowBox: false,
+                idCountry: $scope.selectedCountryId || 0,
+                idPackage: $scope.idSelectedPackageTemplate || 0
+            };
+        }
+
+        function createPackageFromTemplate() {
+            const productsList = [];
+            let packageHasRealProducts = true;
+            let productsPerType;
+            for (productsPerType in $scope.packagesByCategories) {
+                if (!$scope.packagesByCategories[productsPerType].every(checkIfPackageHasRealProducts)) {
+                    packageHasRealProducts = false;
+                }
+            }
+
+            if (packageHasRealProducts) {
+                let productsPerType;
+                for (productsPerType in $scope.packagesByCategories) {
+                    $scope.packagesByCategories[productsPerType].forEach(product => {
+                        product.real.forEach(realProduct => {
+                            realProduct.productUnit = $scope.productUnit[product.idProduct] ? $scope.productUnit[product.idProduct] : 1;
+                            productsList.push(realProduct);
+                        });
+                    });
+                }
+
+                if (productsList) {
+                    const packageInfo = {
+                        packageName: $scope.packageName || '',
+                        packageReference: $scope.packageReference || '',
+                        packageDescription: $scope.packageDescription || '',
+                        additionalInstallationDays: $scope.additionalInstallationDays || 0,
+                        idCountry: $scope.selectedCountryId,
+                        idPackageType: $scope.selectedPackageTypeId ? $scope.selectedPackageTypeId : 0,
+                        idTemplate: $scope.idSelectedPackageTemplate
+                    };
+
+                    const params = {
+                        packageData: JSON.stringify(productsList),
+                        packageInfo: JSON.stringify(packageInfo),
+                        shouldShowBox: false
+                    };
+
+                    httpCall('packages/api/createPackagesData', displayMessageConfirmation, params);
+                } else {
+                    utilsService.displayMessage('error', $translate.instant('packages.forms.messages.NO_PRODUCTS'));
+                }
+            } else {
+                utilsService.displayMessage('error', $translate.instant('packages.forms.messages.NO_REAL_PRODUCTS'));
+            }
+
+            function checkIfPackageHasRealProducts(product) {
+                return product.hasOwnProperty('real');
+            }
+        }
+
+        function displayMessageConfirmation(response) {
+            if (response.data.messageData) {
+                const translationDataMessages = {
+                    country: $scope.countrySelected,
+                    packageName: $scope.packageName,
+                    packageReference: $scope.packageReference,
+                    productsNumber: response.data.productsNumber,
+                    field: response.data.messageData.field || ''
+                };
+                response.data.messageData.forEach(messageObj => {
+                    if (messageObj.code === 'success') {
+                        $scope.packageName = '';
+                        $scope.packageReference = '';
+                        $scope.packageDescription = '';
+                        updateVirtualProducts(true);
+                    } else {
+                        translationDataMessages.field = messageObj.field || '';
+                        translationDataMessages.limit = messageObj.limit || '';
+                    }
+
+                    if (messageObj.message === 'PACKAGE_NAME_EXISTS') {
+                        $('#package-name').focus();
+                    }
+
+                    const message = $translate.instant('packages.forms.messages.' + messageObj.message, translationDataMessages);
+                    utilsService.displayMessage(messageObj.code, message);
+                });
+            } else {
+                const errorMessage = $translate.instant('packages.forms.messages.SERVER_ERROR');
+                utilsService.displayMessage('error', errorMessage);
+            }
+        }
+
+        function searchTemplateSelected() {
+            return $scope.templates.find(info => {
+                return info.idTemplate === $scope.idSelectedPackageTemplate;
+            });
+        }
+    }
+})();

api-wiaas/client/js/components/packages/create-packages-template.directive.js

@@ -0,0 +1,9 @@
+global.dashModule
+    .directive('createPackagesTemplate', createPackagesTemplateDirective);
+
+function createPackagesTemplateDirective() {
+    return {
+        restrict: 'E',
+        templateUrl: 'packages/html/createTemplatePackagesTemplate'
+    };
+}

api-wiaas/client/js/components/packages/create-packages.directive.js

@@ -0,0 +1,60 @@
+global.dashModule
+    .directive('createPackages', createPackagesDirective)
+    .controller('createPackagesCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', 'packagesUtilsService', createPackagesCtrl]);
+
+function createPackagesDirective() {
+    return {
+        restrict: 'E',
+        templateUrl: 'packages/html/createPackagesTemplate'
+    };
+}
+
+function createPackagesCtrl($scope, $http, $, $translate, utilsService, packagesUtilsService) {
+    $scope.initializeCreatePackages = initializeCreatePackages;
+    $scope.isCountrySelected = isCountrySelected;
+    $scope.getCountryTranslationKey = getCountryTranslationKey;
+    $scope.setCountrySelectedName = setCountrySelectedName;
+
+    function initializeCreatePackages() {
+        const params = {getArray: true};
+        httpCall('countries/api/getAllCountries', getCountries, params);
+    }
+
+    function httpCall(httpUrl, successCallback, params) {
+        const urlParams = params ? $.param(params) : {};
+        $http({
+            method: 'POST',
+            url: httpUrl,
+            data: urlParams
+        }).then(successCallback, utilsService.onHttpError);
+    }
+
+    function isCountrySelected() {
+        return typeof $scope.selectedCountryId !== 'undefined' && $scope.selectedCountryId !== 0;
+    }
+
+    function getCountries(response) {
+        $scope.countries = response.data;
+    }
+
+    function getCountryTranslationKey() {
+        const countrySelected = packagesUtilsService.getCountryAndPackageSelected().countrySelected || {};
+        const countryName = countrySelected.name || '';
+        $scope.translationData = {
+            country: countryName
+        };
+        return !countryName ? 'SELECT_COUNTRY' : 'SELECTED_COUNTRY';
+    }
+
+    function setCountrySelectedName() {
+        packagesUtilsService.setCountryAndPackageSelected(searchPackageNameSelected(), $scope.selectedCountryId);
+    }
+
+    function searchPackageNameSelected() {
+        const countrySelected = $scope.countries.find(info => {
+            return info.id === $scope.selectedCountryId;
+        });
+
+        return countrySelected ? countrySelected.name : '';
+    }
+}

api-wiaas/client/js/components/packages/display-cdn-images.directive.js

@@ -0,0 +1,74 @@
+(function() {
+    global.dashModule.directive('displayCdnImages', displayCdnImagesDirective);
+
+    function displayCdnImagesDirective() {
+        return {
+            restrict: 'E',
+            scope: {
+                imageParams: '@'
+            },
+            controller: displayCdnImagesCtrl,
+            templateUrl: 'packages/html/displayCdnImagesTemplate'
+        };
+    }
+
+    function displayCdnImagesCtrl($scope, $, $http, $translate, utilsService) {
+        $scope.getImagesFromCdn = getImagesFromCdn;
+        $scope.images = [];
+
+        utilsService.registerFunction('getImagesFromCdn', getImagesFromCdn);
+        utilsService.registerFunction('saveCoverImage', saveCoverImage);
+
+        function getImagesFromCdn() {
+            $scope.imageParams = typeof $scope.imageParams === 'string' && JSON.parse($scope.imageParams);
+            const params = $.param({
+                idCountry: $scope.imageParams.idCountry || 0,
+                idPackage: $scope.imageParams.idPackage || 0
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/getImagesFromCdn',
+                data: params
+            }).then(setImagesPerCountry, utilsService.onHttpError);
+        }
+
+        function setImagesPerCountry(response) {
+            if(response.data) {
+                $scope.images = response.data.resources || [];
+
+                const coverPhoto = $scope.images.find(imageDetails => {
+                    return imageDetails.useAsMarketPicture === true;
+                });
+
+                $scope.profilePicture = coverPhoto || [];
+            }
+        }
+
+        function saveCoverImage(imageParams) {
+            const coverPhotoDetails = $scope.images.find(imageDetails => {
+                return imageDetails.secure_url === $scope.profilePicture.secure_url;
+            });
+
+            const params = $.param({
+                idPackage: imageParams.idPackage || 0,
+                publicId: coverPhotoDetails && coverPhotoDetails.public_id ? coverPhotoDetails.public_id : null
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/saveCoverPhotoForPackage',
+                data: params
+            }).then(displayUpdateMessage, utilsService.onHttpError);
+        }
+
+        function displayUpdateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('packages.forms.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/packages/edit-package-templates.directive.js

@@ -0,0 +1,37 @@
+(function () {
+    global.dashModule
+        .directive('editPackageTemplates', editPackageTemplatesDirective)
+        .controller('editPackageTemplatesCtrl', ['$scope', 'utilsService', 'packagesUtilsService', editPackageTemplatesCtrl]);
+
+    function editPackageTemplatesDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'packages/html/editPackageTemplatesHtml'
+        };
+    }
+
+    function editPackageTemplatesCtrl($scope, utilsService, packagesUtilsService) {
+        $scope.isPackageSelected = isPackageSelected;
+        $scope.showSelectPackages = getPackageTemplates;
+        $scope.packageList = [];
+        $scope.checkQuantityAmount = utilsService.verifyAmountAdded;
+        $scope.setPackageTemplateSelected = setPackageTemplateSelected;
+
+        function getPackageTemplates() {
+            utilsService.registerFunction('setPackagesTemplates', setPackagesTemplates);
+            packagesUtilsService.getPackageTemplates().then(setPackagesTemplates, global.onHttpError);
+        }
+
+        function isPackageSelected() {
+            return typeof $scope.packageSelected !== 'undefined' && $scope.packageSelected;
+        }
+
+        function setPackagesTemplates(response) {
+            $scope.packageList = response.data || [];
+        }
+
+        function setPackageTemplateSelected() {
+            packagesUtilsService.setPackageTemplateSelected($scope.packageSelected);
+        }
+    }
+})();

api-wiaas/client/js/components/packages/edit-packages.directive.js

@@ -0,0 +1,97 @@
+(function () {
+    global.dashModule
+        .directive('editPackages', editPackagesDirective)
+        .controller('editPackagesCtrl', ['$scope', '$http', '$', '$translate', '$timeout', 'utilsService', 'packagesUtilsService', editPackagesCtrl]);
+
+    function editPackagesDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'packages/html/editPackagesTemplate'
+        };
+    }
+
+    function editPackagesCtrl($scope, $http, $, $translate, $timeout, utilsService, packagesUtilsService) {
+        $scope.getCountries = getCountries;
+        $scope.isCountrySelected = isCountrySelected;
+        $scope.isPackageSelected = isPackageSelected;
+        $scope.showSelectPackages = getPackages;
+        $scope.packageList = [];
+        $scope.productUnit = [];
+        $scope.getEditPackagesTitle = getEditPackagesTitle;
+        $scope.checkQuantityAmount = utilsService.verifyAmountAdded;
+        $scope.setCountryAndPackageSelected = setCountryAndPackageSelected;
+
+        function getCountries() {
+            const params = $.param({
+                getArray: true
+            });
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'countries/api/getAllCountries'
+            }).then(setCountries, utilsService.onHttpError);
+        }
+
+        function setCountries(response) {
+            $scope.countries = response.data;
+        }
+
+        function isCountrySelected(selectedCountryId) {
+            return typeof selectedCountryId !== 'undefined' && selectedCountryId !== 0;
+        }
+
+        function isPackageSelected() {
+            return typeof $scope.packageSelected !== 'undefined' && $scope.packageSelected;
+        }
+
+        function getPackages() {
+            utilsService.registerFunction('setPackages', setPackages);
+            packagesUtilsService.getPackagesPerCountry($scope.selectedCountryId).then(setPackages, global.onHttpError);
+        }
+
+        function setPackages(response) {
+            $scope.packageList = [];
+
+            if (response.data) {
+                $timeout(() => {
+                    $scope.packageList = response.data && response.data.data ? response.data.data : response.data;
+                }, 0);
+            }
+        }
+
+        function getEditPackagesTitle() {
+            const translationData = {
+                packageName: $scope.packageSelected ? $scope.packageSelected.name : '',
+                packageReference: $scope.packageSelected ? $scope.packageSelected.reference : '',
+                country: $scope.selectedCountryId && $scope.countries ? searchCountryNameSelected() : ''
+            };
+
+            const editPackageTitle = getEditPackageTitle();
+            const packageName = $scope.packageSelected ? $scope.packageSelected.name : '';
+            const translatedMessage = editPackageTitle ? $translate.instant('packages.forms.' + editPackageTitle, translationData) : $scope.packageName;
+
+            return packageName ? packageName + translatedMessage : translatedMessage;
+        }
+
+        function getEditPackageTitle() {
+            if (typeof $scope.countrySelected === 'undefined' && typeof $scope.packageSelected === 'undefined') {
+                return 'SELECT_COUNTRY_PACKAGE';
+            }
+            return 'SELECTED_COUNTRY';
+        }
+
+        function setCountryAndPackageSelected() {
+            if($scope.packageSelected && $scope.selectedCountryId){
+                packagesUtilsService.setCountryAndPackageSelected(searchCountryNameSelected(), $scope.selectedCountryId, $scope.packageSelected);
+            }
+        }
+
+        function searchCountryNameSelected() {
+            const selectedCountry = $scope.countries.find(countryInfo => {
+                return countryInfo.id === $scope.selectedCountryId;
+            });
+
+            return selectedCountry ? selectedCountry.name : '';
+        }
+    }
+})();

api-wiaas/client/js/components/packages/my-packages-details.directive.js

@@ -0,0 +1,90 @@
+(function () {
+    global.dashModule
+        .controller('myPackagesDetailsCtrl', ['$scope', '$sce', '$translate', myPackagesDetailsCtrl])
+        .directive('myPackagesDetails', [myPackagesDetails]);
+
+    function myPackagesDetails() {
+        return {
+            restrict: 'E',
+            templateUrl: 'packages/html/myPackagesDetails'
+        };
+    }
+
+    function myPackagesDetailsCtrl($scope, $sce, $translate) {
+        $scope.isVisibleToCustomer = isVisibleToCustomer;
+        $scope.sumPrices = sumPrices;
+        $scope.renderHtml = renderHtml;
+        $scope.hasExtraPackages = hasExtraPackages;
+        $scope.areAllPayTypesAvailable = areAllPayTypesAvailable;
+        $scope.showHideInfoBox = showHideInfoBox;
+        $scope.getAlertClass = getAlertClass;
+        $scope.getAlertText = getAlertText;
+        $scope.getAlertIcon = getAlertIcon;
+        $scope.getProductsArray = getProductsArray;
+        $scope.productsArray = [];
+
+        function getAlertClass(option) {
+            return !option.isAvailable ? 'alert-danger' : 'alert-warning';
+        }
+
+        function getAlertText(option) {
+            return !option.isAvailable ? $translate.instant('packages.messages.NOT_ALL_PAY_AVAILABLE') : $translate.instant('packages.messages.NOT_SET_PAYMENT');
+        }
+
+        function getAlertIcon(option) {
+            return !option.isAvailable ? 'glyphicon-ban-circle' : 'glyphicon-warning-sign';
+        }
+
+        function renderHtml(htmlCode) {
+            return $sce.trustAsHtml(htmlCode);
+        }
+
+        function areAllPayTypesAvailable(packagePrices, optionPackage) {
+            optionPackage.isAvailable = true;
+            optionPackage.isSetByMe = true;
+            packagePrices.forEach((value, key) => {
+                optionPackage.isAvailable = optionPackage.isAvailable &&
+                    typeof optionPackage.prices[key] !== 'undefined' &&
+                    value.idPaymentType === optionPackage.prices[key];
+
+                optionPackage.isSetByMe = optionPackage.isSetByMe &&
+                    typeof optionPackage.commercialLeadPrices[key] !== 'undefined' &&
+                    value.idPaymentType === optionPackage.commercialLeadPrices[key];
+            });
+            return packagePrices.length === optionPackage.prices.length && optionPackage.isAvailable && optionPackage.isSetByMe;
+        }
+
+        function showHideInfoBox(optionPackage) {
+            optionPackage.isInfoBoxVisible = !optionPackage.isInfoBoxVisible;
+        }
+
+        function hasExtraPackages(packageObject) {
+            return packageObject.packageType === 'standard';
+        }
+
+        function isVisibleToCustomer(visibleToCustomer) {
+            const visibleClasses = {
+                0: 'glyphicon-eye-close',
+                1: 'glyphicon-eye-open',
+                2: 'no-icon'
+            };
+
+            return visibleClasses[visibleToCustomer];
+        }
+
+        function sumPrices(values) {
+            let total = 0;
+            values.forEach((val) => {
+                total += parseFloat(val);
+            });
+
+            return total;
+        }
+
+        function getProductsArray(packageInfo) {
+            if('products' in packageInfo && packageInfo.products) {
+                $scope.productsArray = packageInfo.products.split(',');
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/packages/package-options.directive.js

@@ -0,0 +1,273 @@
+(function () {
+    global.dashModule
+        .directive('packageOptions', packageOptionsDirective)
+        .controller('packageOptionsCtrl', ['$scope', '$', '$http', '$translate', 'utilsService', packageOptionsCtrl]);
+
+    function packageOptionsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'packages/html/packageOptionsTemplate'
+        };
+    }
+
+    function packageOptionsCtrl($scope, $, $http, $translate, utilsService) {
+        let groupCounter = 0;
+        $scope.getOptionsAndPackages = getOptionsAndPackages;
+        $scope.selectPackage = selectPackage;
+        $scope.getPackageClass = getPackageClass;
+        $scope.isDefault = isDefault;
+        $scope.addGroup = addGroup;
+        $scope.removeGroup = removeGroup;
+        $scope.packageDragStart = packageDragStart;
+        $scope.packageDragStop = packageDragStop;
+        $scope.packageOptionAdded = packageOptionAdded;
+        $scope.packageOptionRemoved = packageOptionRemoved;
+        $scope.setDefaultOption = setDefaultOption;
+        $scope.updatePackageOptions = updatePackageOptions;
+        $scope.packageAdditionalAdded = packageAdditionalAdded;
+        $scope.packageAdditionalRemoved = packageAdditionalRemoved;
+        $scope.getPackageWarningClass = getPackageWarningClass;
+        $scope.options = [];
+        $scope.standardPackages = [];
+        $scope.selectedPackage = {};
+
+        function getOptionsAndPackages() {
+            $http({
+                method: 'POST',
+                url: 'packages/api/getOptionsAndPackages'
+            }).then(setDocumentsAndPackages, utilsService.onHttpError);
+        }
+
+        function setDocumentsAndPackages(response) {
+            if (response.data && response.data.option && response.data.standard && response.data.additional) {
+                const selectedKey = Object.keys(response.data.standard)[0];
+                $scope.options = response.data.options;
+                $scope.selectedPackage = response.data.standard[selectedKey] || {};
+                $scope.standardPackages = response.data.standard;
+                $scope.options = response.data.option;
+                $scope.additionalPackages = response.data.additional;
+                if(selectedKey){
+                    chekPricesForSelectedPackage();
+                }
+
+                $scope.options.forEach(hideOptionPackages);
+                $scope.additionalPackages.forEach(hideOptionPackages);
+            } else {
+                $scope.options = [];
+                $scope.standardPackages = [];
+                $scope.additionalPackages = [];
+            }
+        }
+
+        function chekPricesForSelectedPackage(){
+            $scope.selectedPackage.groups.forEach((group) => {
+                group.options.forEach((option) => {
+                    option.hasAllPrices = $scope.selectedPackage.prices.length === option.prices.length &&
+                        $scope.selectedPackage.prices.every((value, i) => value === option.prices[i]);
+                });
+            });
+            $scope.selectedPackage.additionalPackages.forEach((additionalPackage) => {
+                additionalPackage.hasAllPrices = $scope.selectedPackage.prices.length === additionalPackage.prices.length &&
+                    $scope.selectedPackage.prices.every((value, i) => value === additionalPackage.prices[i]);
+            });
+        }
+
+        function hideOptionPackages(currentPackage) {
+            const ID_OPTION_TYPE = 2;
+            const ID_ADDITIONAL_TYPE = 3;
+            let iscurrentPackageInArray = false;
+
+            if (currentPackage.countryCode !== $scope.selectedPackage.countryCode) {
+                currentPackage.isAvailable = false;
+
+                return;
+            }
+
+            currentPackage.hasAllPrices = $scope.selectedPackage.prices.length === currentPackage.prices.length &&
+                $scope.selectedPackage.prices.every((value, i) => value === currentPackage.prices[i]);
+
+            if ($scope.selectedPackage.groups && parseInt(currentPackage.idPackageType) === ID_OPTION_TYPE) {
+                $scope.selectedPackage.groups.forEach((group) => {
+                    iscurrentPackageInArray = iscurrentPackageInArray || findOptionPackage(group, currentPackage);
+                });
+            }
+            if ($scope.selectedPackage.additionalPackages && parseInt(currentPackage.idPackageType) === ID_ADDITIONAL_TYPE) {
+                iscurrentPackageInArray = $scope.selectedPackage.additionalPackages.find((additional) => {
+                    return additional.idPackage === currentPackage.idPackage;
+                });
+            }
+
+            currentPackage.isAvailable = !iscurrentPackageInArray;
+        }
+
+        function findOptionPackage(group, currentPackage) {
+            return group.options.find((option) => {
+                return option.idPackage === currentPackage.idPackage;
+            });
+        }
+
+        function selectPackage(selected) {
+            $scope.selectedPackage = selected;
+            chekPricesForSelectedPackage();
+            $scope.options.forEach(hideOptionPackages);
+            $scope.additionalPackages.forEach(hideOptionPackages);
+        }
+
+        function getPackageClass(curent) {
+            return curent === $scope.selectedPackage ? 'selected-package' : '';
+        }
+
+        function isDefault(option) {
+            return parseInt(option.isDefault) === 1;
+        }
+
+        function generateGroup() {
+            groupCounter++;
+
+            return {
+                groupName: '',
+                idGroup: 'new-' + groupCounter,
+                isNewGroup: 1,
+                options: []
+            };
+        }
+
+        function addGroup() {
+            $scope.selectedPackage.groups.push(generateGroup());
+        }
+
+        function removeGroup(index) {
+            $scope.selectedPackage.groups.splice(index, 1);
+            $scope.options.forEach(hideOptionPackages);
+        }
+
+        function packageDragStart(event, ui, selector) {
+            $('#' + selector).css({
+                overflow: 'visible',
+            });
+            $('.' + $(ui.helper).attr('drop-to')).css({
+                background: 'rgba(92, 184, 92, 0.3)'
+            });
+        }
+
+        function packageDragStop(event, ui, selector) {
+            $('#' + selector).css({
+                'overflow': 'auto'
+            });
+            $('.' + $(ui.helper).attr('drop-to')).css({
+                background: 'none'
+            });
+        }
+
+        function packageOptionRemoved(event, ui, dropContainer) {
+            const dropToSelector = $(ui.helper).attr('drop-to');
+            const idPackage = $(ui.helper).attr('id-option-package');
+            const idGroup = $(ui.helper).attr('id-group');
+
+            if (dropContainer !== dropToSelector) {
+                return;
+            }
+
+            const group = $scope.selectedPackage.groups.find((group) => {
+                return group.idGroup === idGroup;
+            });
+            const dragedPackageIndex = group.options.findIndex((pkg) => {
+                return pkg.idPackage === idPackage;
+            });
+            const wasDefault = parseInt(group.options[dragedPackageIndex].isDefault) === 1;
+
+            group.options.splice(dragedPackageIndex, 1);
+
+            if (wasDefault && group.options.length) {
+                setDefaultOption(group, group.options[0]);
+            }
+            $scope.options.forEach(hideOptionPackages);
+        }
+
+        function packageOptionAdded(event, ui, dropContainer, group) {
+            const dropToSelector = $(ui.helper).attr('drop-to');
+            const idPackage = $(ui.helper).attr('id-option-package');
+
+            if (dropContainer !== dropToSelector) {
+                return;
+            }
+
+            const dragedPackage = $scope.options.find((pkg) => {
+                return pkg.idPackage === idPackage;
+            });
+            dragedPackage.isDefault = group.options.length ? 0 : 1;
+
+            group.options.push(dragedPackage);
+            $scope.options.forEach(hideOptionPackages);
+        }
+
+        function packageAdditionalRemoved(event, ui, dropContainer) {
+            const dropToSelector = $(ui.helper).attr('drop-to');
+            const idPackage = $(ui.helper).attr('id-additional-package');
+            const additionalList = $scope.selectedPackage.additionalPackages;
+
+            if (dropContainer !== dropToSelector) {
+                return;
+            }
+            const dragedPackageIndex = additionalList.findIndex((pkg) => {
+                return pkg.idPackage === idPackage;
+            });
+
+            additionalList.splice(dragedPackageIndex, 1);
+            $scope.additionalPackages.forEach(hideOptionPackages);
+        }
+
+        function packageAdditionalAdded(event, ui, dropContainer) {
+            const dropToSelector = $(ui.helper).attr('drop-to');
+            const idPackage = $(ui.helper).attr('id-additional-package');
+
+            if (dropContainer !== dropToSelector) {
+                return;
+            }
+
+            const dragedPackage = $scope.additionalPackages.find((pkg) => {
+                return pkg.idPackage === idPackage;
+            });
+
+            $scope.selectedPackage.additionalPackages.push(dragedPackage);
+            $scope.additionalPackages.forEach(hideOptionPackages);
+        }
+
+        function setDefaultOption(group, option) {
+            group.options.forEach((opt) => {
+                opt.isDefault = 0;
+            });
+
+            option.isDefault = 1;
+        }
+
+        function updatePackageOptions() {
+            const params = $.param({
+                idPackage: $scope.selectedPackage.idPackage,
+                groups: JSON.stringify($scope.selectedPackage.groups),
+                additionalPackages: JSON.stringify($scope.selectedPackage.additionalPackages)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/updatePackageOptions',
+                data: params
+            }).then(updateMessage, utilsService.onHttpError);
+        }
+
+        function updateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? messageObj.key : '';
+                    let translatedMessage = $translate.instant('packages.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+
+        function getPackageWarningClass(arePricesAvailable) {
+            return arePricesAvailable ? '' : 'alert-warning';
+        }
+    }
+})();

api-wiaas/client/js/components/packages/packages-details.directive.js

@@ -0,0 +1,43 @@
+(function () {
+    global.dashModule
+        .controller('packagesDetailsCtrl', ['$scope', '$sce', packagesDetailsCtrl])
+        .directive('packagesDetails', [packagesDetailsDirective]);
+
+    function packagesDetailsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'packages/html/packagesDetailsTemplate'
+        };
+    }
+
+    function packagesDetailsCtrl($scope, $sce) {
+        $scope.renderHtml = renderHtml;
+        $scope.hasExtraPackages = hasExtraPackages;
+        $scope.areAllPayTypesAvailable = areAllPayTypesAvailable;
+        $scope.showHideInfoBox = showHideInfoBox;
+        $scope.getProductsArray = getProductsArray;
+        $scope.productsArray = [];
+
+        function renderHtml(htmlCode) {
+            return $sce.trustAsHtml(htmlCode);
+        }
+
+        function hasExtraPackages(packageObject) {
+            return packageObject.packageType === 'standard';
+        }
+
+        function areAllPayTypesAvailable(packagePrices, optionPrices){
+            return packagePrices.length === optionPrices.length && packagePrices.every((v,i)=> v.idPaymentType === optionPrices[i]);
+        }
+
+        function showHideInfoBox(optionPackage) {
+            optionPackage.isInfoBoxVisible = !optionPackage.isInfoBoxVisible;
+        }
+
+        function getProductsArray(packageInfo) {
+            if('products' in packageInfo && packageInfo.products) {
+                $scope.productsArray = packageInfo.products.split(',');
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/packages/packages-utils.service.js

@@ -0,0 +1,75 @@
+(function () {
+    global.dashModule
+        .service('packagesUtilsService', ['$http', '$', '$translate', 'utilsService', packagesUtilsService]);
+
+    function packagesUtilsService($http, $, $translate, utilsService) {
+        let data = {};
+        let packageTemplate = {};
+
+        return {
+            getTitle,
+            getProductCategories,
+            setCountryAndPackageSelected,
+            getCountryAndPackageSelected,
+            setPackageTemplateSelected,
+            getPackageTemplateSelected,
+            getPackagesPerCountry,
+            getPackageTemplates
+        };
+
+        function getTitle(category, type, isTemplate) {
+            const additionalTranslateName = isTemplate ? 'TEMPLATE_' : '';
+            return type === 'products' ?
+                $translate.instant('packages.headers.' + additionalTranslateName + category.toUpperCase() + '_PRODUCTS_BOX') :
+                $translate.instant('packages.headers.' + additionalTranslateName + category.toUpperCase() + '_PACKAGES_BOX');
+        }
+
+        function getProductCategories() {
+            return $http({
+                method: 'GET',
+                url: 'packages/api/getProductCategories'
+            });
+        }
+
+        function setCountryAndPackageSelected(countryName, idCountry, packageSelected = {}) {
+            data = {
+                countrySelected: {
+                    id: idCountry,
+                    name: countryName
+                },
+                packageSelected
+            };
+            utilsService.executeRegisteredFunction('getProductsByCategories', data);
+        }
+
+        function getCountryAndPackageSelected() {
+            return data;
+        }
+
+        function getPackagesPerCountry(idCountry) {
+            return $http({
+                method: 'POST',
+                url: 'packages/api/getPackages',
+                data: $.param({
+                    idCountry
+                })
+            });
+        }
+
+        function setPackageTemplateSelected(packageSelected) {
+            packageTemplate = packageSelected;
+            utilsService.executeRegisteredFunction('getVirtualProductsByCategories', packageTemplate);
+        }
+
+        function getPackageTemplateSelected() {
+            return packageTemplate;
+        }
+
+        function getPackageTemplates() {
+            return $http({
+                method: 'POST',
+                url: 'packages/api/getTemplatePackagesForEdit'
+            });
+        }
+    }
+})();

api-wiaas/client/js/components/packages/packages.directive.js

@@ -0,0 +1,267 @@
+(function () {
+    global.dashModule
+        .controller('packagesController', ['$scope', '$http', '$', '$translate', '$rootScope', '$compile', 'dataTableHelper', 'utilsService', packagesController])
+        .directive('packages', [packagesDirective]);
+
+    function packagesDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'packages/html/PackagesTemplate'
+        };
+    }
+
+    function packagesController($scope, $http, $, $translate, $rootScope, $compile, dataTableHelper, utilsService) {
+        const translationPath = 'packages.tables.headers.';
+        let userType = 'none';
+        $scope.subModule = global.getParameterByName('subModule') || 'packages';
+        $scope.setSubModule = setSubModule;
+        $scope.isSubmoduleVisible = isSubmoduleVisible;
+        $scope.getPackages = getPackages;
+        $scope.getMyPackages = getMyPackages;
+        addUrlListener();
+
+        function addUrlListener() {
+            window.addEventListener('popstate', function (e) {
+                $scope.$evalAsync($scope => {
+                    $scope.subModule = e.state ? e.state.subModule : 'packages';
+                });
+            }, false);
+        }
+
+        function setSubModule($event) {
+            $scope.subModule = $event.currentTarget.attributes.subModule.value;
+            history.pushState({
+                subModule: $scope.subModule
+            }, null, '?subModule=' + $scope.subModule);
+        }
+
+        function isSubmoduleVisible(subModule) {
+            return subModule === $scope.subModule;
+        }
+
+        function getPackages() {
+            $http({
+                method: 'POST',
+                url: 'packages/api/getPackagesHeaders'
+            }).then(showPackages, utilsService.onHttpError);
+        }
+
+        function showPackages(response) {
+            if (typeof response.data.headers !== 'undefined') {
+                userType = response.data.userType || 'none';
+                const params = {
+                    selector: '#packages-tabel',
+                    url: 'packages/api/getPackages',
+                    hasDetails: true,
+                    extraTableOptions: {
+                        responsive: false,
+                        order: [
+                            [1, 'asc']
+                        ]
+                    }
+                };
+                dataTableHelper.generateColumns(response.data.headers, translationPath, dataTableHelper.showTable, params, formatPackagesColumn)
+                    .then((table) => {
+                        addDetailsEvent(table, params.selector, 'packages-details');
+                    });
+            }
+        }
+
+        function getMyPackages() {
+            $http({
+                method: 'POST',
+                url: 'packages/api/getMyPackagesHeaders'
+            }).then(showMyPackages, utilsService.onHttpError);
+        }
+
+        function showMyPackages(response) {
+            if (typeof response.data.headers !== 'undefined') {
+                userType = response.data.userType || 'none';
+                const params = {
+                    selector: '#my-packages-tabel',
+                    url: 'packages/api/getMyPackages',
+                    hasDetails: true,
+                    extraTableOptions: {
+                        responsive: false,
+                        order: [
+                            [1, 'asc']
+                        ]
+                    }
+                };
+                dataTableHelper.generateColumns(response.data.headers, translationPath, dataTableHelper.showTable, params, formatPackagesColumn)
+                    .then((table) => {
+                        addDetailsEvent(table, params.selector, 'my-packages-details');
+                    });
+            }
+        }
+
+        function addDetailsEvent(table, containerSelector, directiveName) {
+            $(containerSelector + ' tbody').off('click', 'td.info-control');
+            $(containerSelector + ' tbody').on('click', 'td.info-control', function () {
+                var tr = $(this).closest('tr');
+                var row = table.row(tr);
+
+                if (row.child.isShown()) {
+                    row.child.hide();
+                    tr.removeClass('shown');
+                } else {
+                    const ctrl = directiveName === 'packages-details' ? 'packagesDetailsCtrl' : 'myPackagesDetailsCtrl';
+                    const directiveHtml = '<'+directiveName+' ng-controller="'+ctrl+'"></'+directiveName+'>';
+                    const scope = $rootScope.$new();
+                    scope.data = row.data();
+                    const layerSelector = 'details-layer-' + scope.data.id;
+                    row.child('<div id="' + layerSelector + '"></div>').show();
+
+                    const comp = $compile($(directiveHtml))(scope);
+                    $('#' + layerSelector).append(comp);
+                    tr.addClass('shown');
+                }
+            });
+        }
+
+        function formatPackagesColumn(value, translations) {
+            const columnObj = {
+                data: value,
+                title: translations[translationPath + value]
+            };
+            const renders = getPackageRenders(value);
+
+            columnObj.visible = isColumnVisible(value);
+
+            if (typeof renders[value] !== 'undefined') {
+                columnObj.render = renders[value];
+            }
+
+            return columnObj;
+        }
+
+        function isColumnVisible(value) {
+            const notVisibleFields = [
+                'prices',
+                'status',
+                'idCountry',
+                'countryCode',
+                'additionalInstallationDays',
+                'idPackageType',
+                'description',
+                'extraPackages',
+                'products',
+                'documents'
+            ];
+
+            return notVisibleFields.indexOf(value) === -1;
+        }
+
+        function getPackageRenders() {
+            return {
+                products: packagesReplaceCommaRenderer,
+                processes: showProcesses,
+                name: packagesNameRenderer,
+                isPriceSet: packagesIsPriceSetRenderer,
+                hasDocuments: packagesHasDocumentsRenderer
+            };
+
+            function packagesHasDocumentsRenderer(data, type, row) {
+                let html = '';
+                row.documents.forEach((documentObj) => {
+                    html += '<div class="package-documents">';
+                    html += '<a href="utils/api/downloadFile?idDocument='+documentObj.idDocument+'&fileName='+documentObj.documentName+'.' +documentObj.extension+'">';
+                    html += documentObj.documentName + '.' + documentObj.extension;
+                    html += '</a>';
+                    html += '</div>';
+                });
+
+                return html;
+            }
+
+            function packagesReplaceCommaRenderer(data) {
+                return data.replace(/,/g, '<br/>');
+            }
+
+            function showProcesses(data){
+                let html = '';
+
+                if(data.length > 0){
+                    html += '<details>';
+                    html += '<summary>'+$translate.instant('packages.tables.extra.SEE_PROCESS')+'</summary>';
+                    data.forEach((process) => {
+                        html += '<p>' + process.processName + '</p>';
+                    });
+                    html += '</details>';
+                }else{
+                    html = '-';
+                }
+
+                return html;
+            }
+
+            function packagesNameRenderer(data, type, row) {
+                if (userType === 'commercial_lead' && $scope.subModule === 'myPackages') {
+                    const sellMessage = row.status === 'available' ? $translate.instant('packages.tables.extra.EDIT') : $translate.instant('packages.tables.extra.NOT_AVAILABLE');
+                    let newData = '<a id="edit-price-' + row.id + '" href="packages?subModule=selectPackage&idPackage=' + row.id + '">';
+                    newData += row.status === 'available' ?
+                        data + ' (' + sellMessage + ')' :
+                        data + ' (<div class="unavailable-products"><span class="glyphicon glyphicon-warning-sign"></span>' + sellMessage + '</div>)';
+                    newData += '</a>';
+
+                    return newData;
+                }
+
+                return data;
+            }
+
+            function packagesIsPriceSetRenderer(data, type, row) {
+                let priceText = '';
+
+                if (userType === 'broker') {
+                    if (row.status === 'not-available') {
+                        priceText = '<a id="set-price-' + row.id + '" href="packages?subModule=editPackages&idCountry=' + row.idCountry + '&idPackage=' + row.id + '">';
+                        priceText += '<div class="unavailable-products">';
+                        priceText += '<span class="glyphicon glyphicon-ban-circle"></span> ';
+                        priceText += $translate.instant('packages.tables.extra.PRODUCTS_NOT_AVAILABLE');
+                        priceText += '</div>';
+                        priceText += '</a>';
+                    } else if (row.processes.length === 0) {
+                        priceText += '<div class="set-price-text">';
+                        priceText += '<span class="glyphicon glyphicon-info"></span>';
+                        priceText += $translate.instant('packages.tables.extra.NO_PROCESS_SET');
+                        priceText += '</div>';
+                    } else {
+                        if (data === '0') {
+                            priceText = '<div class="set-price-text">';
+                            priceText += ' <span class="glyphicon glyphicon-euro"></span><span class="glyphicon glyphicon-remove small-price-icon"></span> ';
+                            priceText += $translate.instant('packages.tables.extra.SET_PRICE');
+                            priceText += '</div>';
+                        } else {
+                            priceText = '<div class="edit-price-text">';
+                            priceText += '<span class="glyphicon glyphicon-euro"></span><span class="glyphicon glyphicon-ok small-price-icon"></span> ';
+                            priceText += $translate.instant('packages.tables.extra.EDIT_PRICE');
+                            if (row.status === 'high-cost') {
+                                priceText += '<div class="margin-exceded">';
+                                priceText += '<span class="glyphicon glyphicon-warning-sign"></span> ';
+                                priceText += $translate.instant('packages.tables.extra.MARGIN_EXCEDED');
+                                priceText += '</div>';
+                            }
+                            priceText += '</div>';
+                        }
+
+                        priceText = '<a id="set-price-' + row.id + '" href="packages?subModule=setPackagePrice&idPackage=' + row.id + '">' + priceText + '</a>';
+                    }
+
+                    return priceText;
+                }
+
+                if (userType === 'commercial_lead') {
+                    priceText = '<div class="set-price-text">';
+                    priceText += ' <span class="glyphicon glyphicon-euro"></span><span class="glyphicon glyphicon-ok small-price-icon"></span> ';
+                    priceText += $translate.instant('packages.tables.extra.SELL_THIS');
+                    priceText += '</div>';
+                    return '<a id="sell-this-' + row.id + '" href="packages?subModule=selectPackage&idPackage=' + row.id + '">' + priceText + '</a>';
+                }
+
+                return data;
+            }
+        }
+
+    }
+})();

api-wiaas/client/js/components/packages/products-by-categories-drag-drop.directive.js

@@ -0,0 +1,336 @@
+(function() {
+    global.dashModule.directive('productsByCategoriesDragDrop', productsByCategoriesDragDropDirective);
+
+    function productsByCategoriesDragDropDirective() {
+        return {
+            restrict: 'EA',
+            scope: {
+                actionType: '@'
+            },
+            controller: productsByCategoriesDragDropCtrl,
+            templateUrl: 'packages/html/productsByCategoriesDragDropTemplate'
+        };
+    }
+
+    function productsByCategoriesDragDropCtrl($scope, $, $http, $translate, utilsService, packagesUtilsService) {
+        const categories = [];
+        let elementDragged;
+        let droppedInPackage = [];
+        let droppedInProducts = [];
+        $scope.packagesByCategories = {};
+        $scope.productUnit = {};
+        $scope.productInfo = {};
+        $scope.showQuantityField = showQuantityField;
+        $scope.checkQuantityAmount = utilsService.verifyAmountAdded;
+
+        $scope.getTitle = packagesUtilsService.getTitle;
+        $scope.getProductsByCategories = getProductsByCategories;
+        $scope.productDropped = productDropped;
+        $scope.onDragStartFromProducts = onDragStartFromProducts;
+        $scope.onDragStartFromPackage = onDragStartFromPackage;
+        $scope.onDragStop = onDragStop;
+
+        $scope.getButtonTitle = getButtonTitle;
+        $scope.updatePackage = updatePackage;
+        $scope.resetProducts = resetProducts;
+        $scope.isResetBtnVisible = isResetBtnVisible;
+        $scope.isAvailableClass = isAvailableClass;
+        $scope.countrySelected = {};
+        $scope.packageSelected = {};
+        $scope.selectedPackageTypeId = 1;
+        $scope.packageTypes = [];
+
+        // default value for additional bussiness days for installation
+        $scope.additionalInstallationDays = 5;
+        $scope.packageHasInstallation = {
+            create: true,
+            edit: true
+        };
+        $scope.tinymceOptions = utilsService.getTynimceOptions();
+        $scope.uploadParams = {};
+        $scope.imageParams = {};
+
+        initProductsPerCountry();
+
+        function initProductsPerCountry() {
+            utilsService.registerFunction('getProductsByCategories', getProductsByCategories);
+            utilsService.registerFunction('getPackageTypes', getPackageTypes);
+            getPackageTypes(packagesUtilsService.getCountryAndPackageSelected());
+            getProductsByCategories(packagesUtilsService.getCountryAndPackageSelected());
+        }
+
+        function httpCall(httpUrl, successCallback, params) {
+            const urlParams = params
+                ? $.param(params)
+                : {};
+            $http({method: 'POST', url: httpUrl, data: urlParams}).then(successCallback, utilsService.onHttpError);
+        }
+
+        function getButtonTitle() {
+            return $translate.instant('packages.forms.buttons.' + $scope.actionType.toUpperCase() + '_PACKAGE');
+        }
+
+        function showQuantityField(category) {
+            return category !== 'installation';
+        }
+
+        function isResetBtnVisible() {
+            return $scope.actionType === 'edit';
+        }
+
+        function getPackageTypes() {
+            const params = {
+                idPackage: $scope.packageSelected
+                    ? $scope.packageSelected.id
+                    : 0
+            };
+            httpCall('packages/api/getPackageTypes', setPackageTypes, params);
+        }
+
+        function setPackageTypes(response) {
+            if (response.data && response.data.packageTypes) {
+                $scope.packageTypes = response.data.packageTypes;
+            }
+        }
+
+        function getProductsByCategories(data = {}) {
+            if (Object.keys(data).length > 0) {
+                $scope.countrySelected = data.countrySelected || {};
+                $scope.packageSelected = data.packageSelected || {};
+                $scope.selectedPackageTypeId = data.packageSelected && data.packageSelected.idPackageType || null;
+            }
+            $scope.translationData = {
+                country: $scope.countrySelected.name || ''
+            };
+            $scope.isString = false;
+
+            const params = {
+                idCountry: $scope.countrySelected.id || 0,
+                idPackage: $scope.packageSelected
+                    ? $scope.packageSelected.id
+                    : 0
+            };
+            $scope.uploadParams = params;
+            $scope.imageParams = params;
+            if($scope.actionType === 'create') {
+                $scope.uploadParams.shouldShowBox = false;
+            }
+            httpCall('packages/api/getProductsByCategory', setProductsByCategories, params);
+        }
+
+        function setProductsByCategories(response) {
+            $scope.productsByCategories = typeof response.data !== 'undefined'
+                ? response.data
+                : [];
+
+            Object.keys($scope.productsByCategories).forEach(category => {
+                categories.push(category);
+                $scope.packagesByCategories[category] = [];
+            });
+
+            if ($scope.packageSelected && $scope.packageSelected.id) {
+                const params = {
+                    idCountry: $scope.selectedCountryId,
+                    idPackage: $scope.packageSelected.id
+                };
+                httpCall('packages/api/getProductsInPackage', showProductsForPackages, params);
+            }
+        }
+
+        function showProductsForPackages(response) {
+            if (response.data.messageData) {
+                const message = $translate.instant('packages.forms.messages.' + response.data.messageData.message);
+                utilsService.displayMessage(response.data.messageData.code, message);
+            } else {
+                setProductsFromPackage(response.data);
+            }
+        }
+
+        function setProductsFromPackage(packageProductsData) {
+            $scope.packageName = $scope.packageSelected.name || '';
+            $scope.packageReference = $scope.packageSelected.reference || '';
+            $scope.packageDescription = $scope.packageSelected.description || '';
+            $scope.additionalInstallationDays = parseInt($scope.packageSelected.additionalInstallationDays) || 0;
+            $scope.packagesByCategories = packageProductsData;
+            Object.keys($scope.packagesByCategories).forEach(category => {
+                $scope.packagesByCategories[category].forEach(packageProduct => {
+                    $scope.productUnit[packageProduct.idProduct] = parseInt(packageProduct.quantity);
+                });
+            });
+            if ($scope.actionType === 'edit') {
+                $scope.packageHasInstallation.edit = 'installation' in $scope.packagesByCategories && $scope.packagesByCategories.installation.length > 0
+                    ? true
+                    : false;
+            }
+        }
+
+        function onDragStartFromProducts(event, ui, product, productKey) {
+            $('#package-products-list-' + product.category).css({overflow: 'visible'});
+            $('.' + product.category + '-in-package').addClass('allowed-drop-zone');
+
+            droppedInPackage = {
+                key: productKey,
+                value: product
+            };
+            droppedInProducts = {};
+            elementDragged = 'product';
+        }
+
+        function onDragStartFromPackage(event, ui, product, productKey) {
+            $('#packages-list-' + product.category).css({overflow: 'visible'});
+
+            droppedInProducts = {
+                key: productKey,
+                value: product
+            };
+            droppedInPackage = {};
+            elementDragged = 'package';
+        }
+
+        function onDragStop(event, ui, product) {
+            $('.package-list-' + product.category).css({'overflow': 'auto'});
+            $('.' + product.category + '-in-package').removeClass('allowed-drop-zone');
+
+            $scope.productUnit[product.idProduct] = $scope.productUnit[product.idProduct] || 1;
+        }
+
+        function productDropped(event, ui, placeToDrop, productCategory) {
+            if (elementDragged !== placeToDrop) {
+                if (!$scope.packagesByCategories[productCategory]) {
+                    $scope.packagesByCategories[productCategory] = [];
+                }
+                if (placeToDrop === 'package') {
+                    const productExists = $scope.packagesByCategories[productCategory].some(product => {
+                        return product.idProduct === droppedInPackage.value.idProduct;
+                    });
+                    if (productExists) {
+                        $scope.productUnit[droppedInPackage.value.idProduct]++;
+                    } else {
+                        $scope.packagesByCategories[productCategory].push(droppedInPackage.value);
+                    }
+                } else if (placeToDrop === 'product') {
+                    $scope.productUnit[droppedInProducts.value.idProduct] = 1;
+                    $scope.packagesByCategories[productCategory].splice(droppedInProducts.key, 1);
+                }
+
+                $scope.packageHasInstallation.edit = $scope.actionType === 'edit' && $scope.packagesByCategories.installation && $scope.packagesByCategories.installation.length > 0
+                    ? true
+                    : false;
+            }
+
+            $(ui.helper).css({position: 'relative', left: 0, top: 0});
+            elementDragged = '';
+        }
+
+        function updatePackage() {
+            const productsInPackageList = [];
+            let productsPerType;
+
+            for (productsPerType in $scope.packagesByCategories) {
+                $scope.packagesByCategories[productsPerType].forEach(product => {
+                    product.productUnit = $scope.productUnit[product.idProduct] || 1;
+                    productsInPackageList.push(product);
+                });
+            }
+
+            const packageInfo = {
+                packageName: $scope.packageName || '',
+                packageReference: $scope.packageReference || '',
+                packageDescription: $scope.packageDescription || '',
+                additionalInstallationDays: $scope.additionalInstallationDays || 0,
+                idCountry: $scope.countrySelected.id || 0,
+                idPackage: $scope.packageSelected && $scope.packageSelected.id
+                    ? $scope.packageSelected.id
+                    : 0,
+                idPackageType: $scope.selectedPackageTypeId
+                    ? $scope.selectedPackageTypeId
+                    : 0,
+                isForEdit: $scope.actionType === 'create'
+                    ? false
+                    : true
+            };
+
+            const params = {
+                packageData: JSON.stringify(productsInPackageList),
+                packageInfo: JSON.stringify(packageInfo)
+            };
+
+            utilsService.executeRegisteredFunction('saveCoverImage', $scope.imageParams);
+
+            if ($scope.actionType === 'create') {
+                httpCall('packages/api/createPackagesData', showConfirmationMessage, params);
+            } else if ($scope.actionType === 'edit') {
+                httpCall('packages/api/updateInformationDataInPackage', showConfirmationMessage, params);
+            }
+        }
+
+        function showConfirmationMessage(response) {
+            if (response.data && typeof response.data.messageData !== 'undefined') {
+                const translationDataMessages = {
+                    country: $scope.countrySelected.name || '',
+                    packageName: $scope.packageName,
+                    packageReference: $scope.packageReference,
+                    productsNumber: response.data.productsNumber || 0
+                };
+
+                if (response.data.messageData.message === 'PACKAGE_NAME_EXISTS') {
+                    $('#packageName').focus();
+                }
+
+                response.data.messageData.forEach(messageObj => {
+                    translationDataMessages.field = messageObj.field || '';
+                    const message = $translate.instant('packages.forms.messages.' + messageObj.message, translationDataMessages);
+                    utilsService.displayMessage(messageObj.code, message);
+
+                    if (messageObj.code === 'success') {
+                        if ($scope.actionType === 'create') {
+                            $scope.packageName = '';
+                            $scope.packageReference = '';
+                            $scope.packageDescription = '';
+                            Object.keys($scope.productUnit).map(idProduct => {
+                                $scope.productUnit[idProduct] = 1;
+                            });
+                            getProductsByCategories();
+                        } else if ($scope.actionType === 'edit') {
+                            $scope.packageUpdated = response.data.packageUpdated;
+                            packagesUtilsService.getPackagesPerCountry($scope.countrySelected.id).then(setPackageAfterEdit, global.onHttpError);
+                        }
+                    } else {
+                        if (response.data.messageData.type && response.data.messageData.limit) {
+                            translationDataMessages.type = response.data.messageData.type;
+                            translationDataMessages.limit = response.data.messageData.limit;
+                        }
+                    }
+                });
+            } else {
+                const errorMessage = $translate.instant('packages.forms.messages.SERVER_ERROR');
+                utilsService.displayMessage('error', errorMessage);
+            }
+        }
+
+        function setPackageAfterEdit(response) {
+            if (response.data) {
+                utilsService.executeRegisteredFunction('setPackages', response.data);
+                $scope.packageSelected = {
+                    id: $scope.packageUpdated.idPackage,
+                    name: $scope.packageUpdated.packageName,
+                    reference: $scope.packageUpdated.packageReference,
+                    description: $scope.packageUpdated.packageDescription
+                };
+                packagesUtilsService.setCountryAndPackageSelected($scope.countrySelected.name, $scope.countrySelected.id, $scope.packageSelected);
+            }
+        }
+
+        function resetProducts() {
+            getProductsByCategories();
+            const message = $translate.instant('packages.forms.messages.RESET_PACKAGE');
+            utilsService.displayMessage('success', message);
+        }
+
+        function isAvailableClass(isAvailable) {
+            return typeof isAvailable !== 'undefined' && parseInt(isAvailable) === 0
+                ? 'not-available-prdocut'
+                : '';
+        }
+    }
+})();

api-wiaas/client/js/components/packages/products-template-by-categories-drag-drop.directive.js

@@ -0,0 +1,269 @@
+(function () {
+    global.dashModule
+        .directive('productsTemplateByCategoriesDragDrop', productsTemplateByCategoriesDragDropDirective);
+
+    function productsTemplateByCategoriesDragDropDirective() {
+        return {
+            restrict: 'EA',
+            scope: {
+                actionType: '@'
+            },
+            controller: productsTemplateByCategoriesDragDropCtrl,
+            templateUrl: 'packages/html/productsTemplateByCategoriesDragDropTemplate'
+        };
+    }
+
+    function productsTemplateByCategoriesDragDropCtrl($scope, $, $http, $translate, utilsService, packagesUtilsService) {
+        const categories = [];
+        let elementDragged;
+        let droppedInPackage = [];
+        let droppedInProducts = [];
+        let addingNewVirtualProduct;
+        $scope.packagesByCategories = {};
+        $scope.productUnit = {};
+        $scope.productInfo = {};
+        $scope.isProductSelected = isProductSelected;
+        $scope.showQuantityField = showQuantityField;
+        $scope.checkQuantityAmount = utilsService.verifyAmountAdded;
+
+        $scope.getTitle = packagesUtilsService.getTitle;
+        $scope.getVirtualProductsByCategories = getVirtualProductsByCategories;
+        $scope.productDropped = productDropped;
+        $scope.onDragStartFromProducts = onDragStartFromProducts;
+        $scope.onDragStartFromPackage = onDragStartFromPackage;
+        $scope.onDragStop = onDragStop;
+
+        $scope.getButtonTitle = getButtonTitle;
+        $scope.updatePackage = updatePackage;
+        $scope.resetProducts = resetProducts;
+        $scope.isResetBtnVisible = isResetBtnVisible;
+        $scope.isAddVirtualProductsFormVisible = isAddVirtualProductsFormVisible;
+        $scope.enableAddNewVirtualProducts = enableAddNewVirtualProducts;
+        $scope.countrySelected = {};
+        $scope.packageSelected = {};
+
+        initProducts();
+
+        function initProducts() {
+            utilsService.registerFunction('getVirtualProductsByCategories', getVirtualProductsByCategories);
+            getVirtualProductsByCategories(packagesUtilsService.getPackageTemplateSelected());
+        }
+
+        function httpCall(httpUrl, successCallback, params) {
+            const urlParams = params ? $.param(params) : {};
+            $http({
+                method: 'POST',
+                url: httpUrl,
+                data: urlParams
+            }).then(successCallback, utilsService.onHttpError);
+        }
+
+        function getButtonTitle() {
+            return $translate.instant('packages.buttons.' + $scope.actionType.toUpperCase() + '_TEMPLATE_PACKAGES');
+        }
+
+        function isProductSelected() {
+            return !$.isEmptyObject($scope.productInfo);
+        }
+
+        function showQuantityField(category) {
+            return category !== 'installation';
+        }
+
+        function isResetBtnVisible() {
+            return $scope.actionType === 'edit';
+        }
+
+        function isAddVirtualProductsFormVisible() {
+            return addingNewVirtualProduct;
+        }
+
+        function enableAddNewVirtualProducts() {
+            addingNewVirtualProduct = !addingNewVirtualProduct;
+        }
+
+        function getVirtualProductsByCategories(packageTemplateSelected = {}) {
+            if ($scope.actionType === 'create') {
+                $scope.packageSelected = {};
+            } else {
+                if (packageTemplateSelected && Object.keys(packageTemplateSelected).length > 0) {
+                    $scope.packageSelected = packageTemplateSelected || {};
+                }
+            }
+
+            httpCall('packages/api/getVirtualProductsByCategories', setProductsByCategories);
+        }
+
+        function setProductsByCategories(response) {
+            $scope.productsByCategories = typeof response.data !== 'undefined' ? response.data : [];
+
+            Object.keys($scope.productsByCategories).forEach(category => {
+                categories.push(category);
+                $scope.packagesByCategories[category] = [];
+            });
+
+            if ($scope.packageSelected && $scope.packageSelected.id) {
+                $scope.packageName = $scope.packageSelected.name || '';
+                $scope.packageDescription = $scope.packageSelected.description || '';
+                $scope.packageSelected.products.forEach(productInfo => {
+                    $scope.packagesByCategories[productInfo.category].push(productInfo);
+                    $scope.productUnit[productInfo.idProduct] = parseInt(productInfo.productUnit);
+                });
+            }
+        }
+
+        function onDragStartFromProducts(event, ui, product, productKey) {
+            $('#' + $scope.actionType + '-package-template-products-list-' + product.category).css({
+                overflow: 'visible'
+            });
+            $('.' + product.category + '-in-package').addClass('allowed-drop-zone');
+
+            droppedInPackage = {
+                key: productKey,
+                value: product
+            };
+            droppedInProducts = {};
+            elementDragged = 'product';
+        }
+
+        function onDragStartFromPackage(event, ui, product, productKey) {
+            $('#' + $scope.actionType + '-packages-template-list-' + product.category).css({
+                overflow: 'visible'
+            });
+
+            droppedInProducts = {
+                key: productKey,
+                value: product
+            };
+            droppedInPackage = {};
+            elementDragged = 'package';
+        }
+
+        function onDragStop(event, ui, product) {
+            $('.package-list-' + product.category).css({
+                'overflow': 'auto'
+            });
+            $('.' + product.category + '-in-package').removeClass('allowed-drop-zone');
+
+            $scope.productUnit[product.idProduct] = $scope.productUnit[product.idProduct] || 1;
+        }
+
+        function productDropped(event, ui, placeToDrop, productCategory) {
+            if (elementDragged !== placeToDrop) {
+                if (!$scope.packagesByCategories[productCategory]) {
+                    $scope.packagesByCategories[productCategory] = [];
+                }
+                if (placeToDrop === 'package') {
+                    const productExists = $scope.packagesByCategories[productCategory].some(product => {
+                        return product.idProduct === droppedInPackage.value.idProduct;
+                    });
+                    if(productExists) {
+                        $scope.productUnit[droppedInPackage.value.idProduct]++;
+                    } else {
+                        $scope.packagesByCategories[productCategory].push(droppedInPackage.value);
+                    }
+                } else if (placeToDrop === 'product') {
+                    $scope.packagesByCategories[productCategory].splice(droppedInProducts.key, 1);
+                }
+            }
+
+            $(ui.helper).css({
+                position: 'relative',
+                left: 0,
+                top: 0
+            });
+            elementDragged = '';
+        }
+
+        function updatePackage() {
+            const productsInPackageList = [];
+            let productsPerType;
+
+            for (productsPerType in $scope.packagesByCategories) {
+                $scope.packagesByCategories[productsPerType].forEach(product => {
+                    product.productUnit = $scope.productUnit[product.idProduct] || 1;
+                    productsInPackageList.push(product);
+                });
+            }
+
+            const packageInfo = {
+                packageName: $scope.packageName || '',
+                packageDescription: $scope.packageDescription || '',
+                idPackage: $scope.packageSelected && $scope.packageSelected.id ? $scope.packageSelected.id : 0,
+                isForEdit: $scope.actionType === 'create' ? false : true
+            };
+
+            const params = {
+                products: JSON.stringify(productsInPackageList),
+                packageInfo: JSON.stringify(packageInfo)
+            };
+
+            if ($scope.actionType === 'create') {
+                httpCall('packages/api/createTemplatePackagesData', showConfirmationMessage, params);
+            } else if ($scope.actionType === 'edit') {
+                httpCall('packages/api/updateInformationDataInPackageTemplate', showConfirmationMessage, params);
+            }
+        }
+
+        function showConfirmationMessage(response) {
+            if (response.data && typeof response.data.messageData !== 'undefined') {
+                const translationDataMessages = {
+                    country: $scope.countrySelected.name || '',
+                    packageName: $scope.packageName,
+                    packageReference: $scope.packageReference,
+                    productsNumber: response.data.productsNumber || 0
+                };
+
+                if (response.data.messageData.message === 'PACKAGE_NAME_EXISTS') {
+                    $('#packageName').focus();
+                }
+
+                response.data.messageData.forEach(messageObj => {
+                    translationDataMessages.field = messageObj.field || '';
+                    const message = $translate.instant('packages.forms.messages.' + messageObj.message, translationDataMessages);
+                    utilsService.displayMessage(messageObj.code, message);
+
+                    if (messageObj.code === 'success') {
+                        if ($scope.actionType === 'create') {
+                            $scope.packageName = '';
+                            $scope.packageReference = '';
+                            $scope.packageDescription = '';
+                            Object.keys($scope.productUnit).map(idProduct => {
+                                $scope.productUnit[idProduct] = 1;
+                            });
+                            getVirtualProductsByCategories();
+                        } else if ($scope.actionType === 'edit') {
+                            $scope.packageUpdated = response.data.packageUpdated;
+                            packagesUtilsService.getPackageTemplates().then(setPackageAfterEdit, global.onHttpError);
+                        }
+                    } else {
+                        if (response.data.messageData.type && response.data.messageData.limit) {
+                            translationDataMessages.type = response.data.messageData.type;
+                            translationDataMessages.limit = response.data.messageData.limit;
+                        }
+                    }
+                });
+            } else {
+                const errorMessage = $translate.instant('packages.forms.messages.SERVER_ERROR');
+                utilsService.displayMessage('error', errorMessage);
+            }
+        }
+
+        function setPackageAfterEdit(response) {
+            if (response.data) {
+                utilsService.executeRegisteredFunction('setPackagesTemplates', response);
+                $scope.packageSelected = {
+                    id: $scope.packageUpdated.idPackage,
+                    packageName: $scope.packageUpdated.packageName,
+                    packageDescription: $scope.packageUpdated.packageDescription
+                };
+            }
+        }
+
+        function resetProducts() {
+            getVirtualProductsByCategories();
+            const message = $translate.instant('packages.forms.messages.RESET_PACKAGE');
+            utilsService.displayMessage('success', message);
+        }
+    }
+})();

api-wiaas/client/js/components/packages/select-package.directive.js

@@ -0,0 +1,373 @@
+(function () {
+    global.dashModule
+        .controller('selectPackageCtrl', ['$scope', '$http', '$', '$translate', '$sce', 'utilsService', selectPackageCtrl])
+        .directive('selectPackage', [selectPackageDirective]);
+
+    function selectPackageDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'packages/html/selectPackage'
+        };
+    }
+
+    function selectPackageCtrl($scope, $http, $, $translate, $sce, utilsService) {
+        $scope.startSelectPackageModule = startSelectPackageModule;
+        $scope.selectCustomer = selectCustomer;
+        $scope.goToNextStep = goToNextStep;
+        $scope.isStepVisible = isStepVisible;
+        $scope.isVisibleToCustomer = isVisibleToCustomer;
+        $scope.setVisible = setVisible;
+        $scope.hasPrevStep = hasPrevStep;
+        $scope.priceSum = priceSum;
+        $scope.isSameCompany = isSameCompany;
+        $scope.actionButton = 'NEXT';
+        $scope.prevButton = '';
+        $scope.customers = [];
+        $scope.packageInfo = {};
+        $scope.packageProducts = [];
+        $scope.selectedCustomers = [];
+        $scope.invoiceProcesses = [];
+        $scope.priceList = {};
+        $scope.title = {};
+        $scope.showTitle = showTitle;
+        $scope.hideTitle = hideTitle;
+        $scope.getCustomerPrices = getCustomerPrices;
+        $scope.data = {};
+        $scope.showHideRemoveDialog = showHideRemoveDialog;
+        $scope.idCustomer = 0;
+        $scope.isRemoveDialogVisible = false;
+        $scope.removeCustomerSpecificCommissions = removeCustomerSpecificCommissions;
+        $scope.renderHtml = renderHtml;
+        $scope.selectionSteps = {
+            'set-default-prices': {
+                current: 'set-default-prices',
+                next: 'select-commissions',
+                prev: '',
+                isActionPromise: true,
+                beforeAction: setDefaultPrices,
+                action: getCustomers
+            },
+            'select-commissions': {
+                current: 'select-commissions',
+                next: '',
+                prev: 'set-default-prices',
+                isActionPromise: false,
+                beforeAction: () => {
+                    return true;
+                },
+                action: saveMyPackage
+            },
+        };
+        $scope.step = $scope.selectionSteps['set-default-prices'];
+
+        function startSelectPackageModule() {
+            getPackageInfo();
+            getBrokerPriceList();
+        }
+
+        function showTitle(idPayType) {
+            $scope.title[idPayType] = true;
+        }
+
+        function hideTitle(idPayType) {
+            $scope.title[idPayType] = false;
+        }
+
+        function isSameCompany(customer) {
+            return parseInt(customer.isSameCompanyAsCl) === 1;
+        }
+
+        function isStepVisible(step) {
+            return step === $scope.step.current;
+        }
+
+        function isVisibleToCustomer(customerPayType) {
+            return customerPayType && customerPayType.visibleToCustomer ? 'glyphicon-eye-open' : 'glyphicon-eye-close';
+        }
+
+        function setVisible(customerPayType) {
+            customerPayType.visibleToCustomer = !customerPayType.visibleToCustomer;
+        }
+
+        function getPackageInfo() {
+            const params = $.param({
+                idPackage: global.getParameterByName('idPackage') || 0
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/getPackageInfo',
+                data: params
+            }).then(showPackageInfo, utilsService.onHttpError);
+        }
+
+        function showPackageInfo(response) {
+            if (response.data.info && response.data.products) {
+                $scope.packageInfo = response.data.info[0];
+                $scope.packageProducts = response.data.products;
+            }
+        }
+
+        function getCustomers() {
+            const params = $.param({
+                idPackage: global.getParameterByName('idPackage') || 0
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/getComercialLeadCustomers',
+                data: params
+            }).then(showCustomers, utilsService.onHttpError);
+        }
+
+        function showCustomers(response) {
+            if (response.data.length > 0) {
+                $scope.selectedCustomers = [];
+                $scope.customers = response.data;
+                response.data.forEach((customer, key) => {
+                    if (customer.selectedCustomer !== '0') {
+                        selectCustomer(key);
+                    }
+                });
+            }
+        }
+
+        function setDefaultPrices() {
+            const defaultPrices = [];
+            // 0 is for the default prices. Any other int value is the id of the customer
+            $scope.priceList[0].forEach(priceObj => {
+                defaultPrices.push({
+                    idPayType: priceObj.idPayType,
+                    defaultExtra: priceObj.defaultExtra,
+                    defaultRecurent: priceObj.defaultRecurent,
+                    defaultServicesRecurent: priceObj.defaultServicesRecurent,
+                    visibleToCustomer: priceObj.visibleToCustomer
+                });
+            });
+
+            const params = $.param({
+                idPackage: global.getParameterByName('idPackage') || 0,
+                defaultPrices: JSON.stringify(defaultPrices)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/updateDefaultPrices',
+                data: params
+            }).then(showUpdateDefaultMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateDefaultMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('packages.tables.headers.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('packages.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+
+                    if (messageObj.code === 'success' || messageObj.code === 'warning') {
+                        goToNextStep('next', true);
+                    }
+                });
+            }
+        }
+
+        function getComission(customerPrice, defaultValue, isSameCompanyAsCl) {
+            const defaultPrice = parseInt(isSameCompanyAsCl) === 1 ? 0 : defaultValue;
+
+            return parseFloat(customerPrice) || defaultPrice;
+        }
+
+        function getBrokerPriceList(idCustomer = 0) {
+            const params = $.param({
+                idPackage: global.getParameterByName('idPackage') || 0,
+                idCustomer
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/getBrokerPriceList',
+                data: params
+            }).then(setPriceList, utilsService.onHttpError);
+        }
+
+        function setPriceList(response) {
+            if (typeof response.data.brokerPrices !== 'undefined' && typeof response.data.commercialLeadPrices !== 'undefined') {
+                const brokerPrices = response.data.brokerPrices;
+                const commercialLeadPrices = response.data.commercialLeadPrices;
+                // if 0, the prices are the ones default
+                const idCustomer = response.data.idCustomer;
+
+                brokerPrices[idCustomer].forEach((value) => {
+                    value.minimalFixedPrice = parseFloat(value.minimalFixedPrice).toFixed(2);
+                    value.minimalRecurentPrice = parseFloat(value.minimalRecurentPrice);
+                    value.minimalServicesPrice = parseFloat(value.minimalServicesPrice);
+                    value.defaultExtra = parseFloat(value.defaultExtra);
+                    value.defaultRecurent = parseFloat(value.defaultRecurent);
+                    value.defaultServicesRecurent = parseFloat(value.defaultServicesRecurent);
+                    value.visibleToCustomer = (commercialLeadPrices[0] && commercialLeadPrices[0][value.idPayType]) ?
+                        parseInt(commercialLeadPrices[0][value.idPayType].visibleToCustomer) :
+                        1;
+                    $scope.selectedCustomers.forEach(customer => {
+                        const clPriceValues = (commercialLeadPrices[customer.id] && commercialLeadPrices[customer.id][value.idPayType]) ? commercialLeadPrices[customer.id][value.idPayType] : {};
+                        const fixedCommission = getComission(clPriceValues.fixedExtra, value.defaultExtra, customer.isSameCompanyAsCl);
+                        const recurentCommission = getComission(clPriceValues.recurentExtra, value.defaultRecurent, customer.isSameCompanyAsCl);
+                        const recurentServicesCommission = getComission(clPriceValues.servicesExtra, value.defaultServicesRecurent, customer.isSameCompanyAsCl);
+                        customer.prices = customer.prices || {};
+                        customer.prices[value.idPayType] = {
+                            visibleToCustomer: parseInt(clPriceValues.visibleToCustomer) || 0,
+                            fixedCommission: fixedCommission,
+                            recurentCommission: recurentCommission,
+                            recurentServicesCommission: recurentServicesCommission,
+                            packagePayPeriod: clPriceValues.packagePayPeriod || value.packagePayPeriod
+                        };
+                    });
+                });
+                $scope.priceList[idCustomer] = brokerPrices[idCustomer];
+            }
+
+        }
+
+        function selectCustomer(customerKey) {
+            const customerObject = $scope.customers[customerKey];
+            const indexOfCustomer = $scope.selectedCustomers.indexOf(customerObject);
+
+            if (indexOfCustomer >= 0) {
+                $scope.selectedCustomers.splice(indexOfCustomer, 1);
+            } else {
+                $scope.selectedCustomers.push(customerObject);
+                $scope.customers.splice(customerKey, 1);
+                getBrokerPriceList(customerObject.id);
+            }
+        }
+
+        function hasPrevStep() {
+            return $scope.prevButton !== '';
+        }
+
+        function showWarning() {
+            const translatedMessage = $translate.instant('packages.messages.SELECT_CUSTOMERS');
+            utilsService.displayMessage('error', translatedMessage);
+        }
+
+        function goToNextStep(action, promiseFinished) {
+            if ($scope.step.isActionPromise && !promiseFinished) {
+                $scope.step.beforeAction();
+            } else {
+                const beforeACtionSuccesfull = promiseFinished || $scope.step.beforeAction();
+
+                if (action === 'next') {
+                    beforeACtionSuccesfull ? $scope.step.action() : showWarning();
+                }
+
+                if ($scope.step[action] !== '' && (beforeACtionSuccesfull || action === 'prev')) {
+                    const newClassForActive = action === 'next' ? 'done-step' : 'inactive-step';
+                    const removeClassForNew = action === 'next' ? 'inactive-step' : 'done-step';
+                    $('.' + $scope.step.current).removeClass('active-step');
+                    $('.' + $scope.step.current).addClass(newClassForActive);
+                    $('.' + $scope.step[action]).removeClass(removeClassForNew);
+                    $('.' + $scope.step[action]).addClass('active-step');
+                    $scope.step = $scope.selectionSteps[$scope.step[action]];
+
+                    $scope.actionButton = (action === 'next' && $scope.step.next === '') ? 'SAVE' : 'NEXT';
+                    $scope.prevButton = (action === 'prev' && $scope.step.prev === '') ? '' : 'PREV';
+                }
+            }
+        }
+
+        function saveMyPackage() {
+            const params = $.param({
+                idPackage: global.getParameterByName('idPackage') || 0,
+                selectedCustomers: JSON.stringify($scope.selectedCustomers)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/updateMyPackage',
+                data: params
+            }).then(showUpdateMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('packages.tables.headers.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('packages.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+
+        function isNumber(value) {
+            const reg = new RegExp('^([0-9]*\.[0-9]+|[0-9]+)$');
+
+            return reg.test(value);
+        }
+
+        function priceSum(values) {
+            let total = 0;
+            let isValid = true;
+            values.forEach((val) => {
+                if (!isNumber(val)) {
+                    isValid = false;
+                }
+                total += parseFloat(val);
+            });
+
+            return isValid ? total.toFixed(2) : 'invalid number';
+        }
+
+        function showHideRemoveDialog(idCustomer) {
+            if (idCustomer) {
+                $scope.idCustomer = idCustomer;
+                $scope.customerToRemove = $scope.selectedCustomers.find(custObject => {
+                    return custObject.id === idCustomer;
+                });
+            }
+            $scope.$evalAsync(() => {
+                $scope.isRemoveDialogVisible = !$scope.isRemoveDialogVisible;
+            });
+        }
+
+        function getCustomerPrices(selectedCustomerKey) {
+            if (selectedCustomerKey) {
+                const idCustomer = $scope.customers[selectedCustomerKey].id;
+                getBrokerPriceList(idCustomer);
+
+                $scope.selectedCustomers.unshift($scope.customers[selectedCustomerKey]);
+                $scope.customers.splice(selectedCustomerKey, 1);
+            }
+        }
+
+        function removeCustomerSpecificCommissions() {
+            if ($scope.idCustomer) {
+                const removeCustObj = $scope.selectedCustomers.find(filterCustomerToRemove);
+                const removeCustKey = $scope.selectedCustomers.findIndex(filterCustomerToRemove);
+
+                $scope.selectedCustomers.splice(removeCustKey, 1);
+                $scope.customers.push(removeCustObj);
+
+                $scope.customers.sort((customerObject1, customerObject2) => {
+                    var x = customerObject1.customer.toLowerCase();
+                    var y = customerObject2.customer.toLowerCase();
+                    if (x < y) {
+                        return -1;
+                    }
+                    if (x > y) {
+                        return 1;
+                    }
+                    return 0;
+                });
+            }
+        }
+
+        function filterCustomerToRemove(custObject) {
+            return custObject.id === $scope.idCustomer;
+        }
+
+        function renderHtml(htmlCode) {
+            return $sce.trustAsHtml(htmlCode);
+        }
+    }
+})();

api-wiaas/client/js/components/packages/set-package-price.directive.js

@@ -0,0 +1,242 @@
+(function () {
+    global.dashModule
+        .controller('setPackagePriceCtrl', ['$scope', '$http', '$', '$translate', '$sce', 'finanncingService', 'utilsService', setPackagePriceCtrl])
+        .directive('setPackagePrice', [setPackagePrice]);
+
+    function setPackagePrice() {
+        return {
+            restrict: 'E',
+            templateUrl: 'packages/html/setPackagePrice'
+        };
+    }
+
+    function setPackagePriceCtrl($scope, $http, $, $translate, $sce, finanncingService, utilsService) {
+        $scope.startSetPackagesPrices = startSetPackagesPrices;
+        $scope.updateCommission = updateCommission;
+        $scope.updateBrokerPricesAndCommission = updateBrokerPricesAndCommission;
+        $scope.calculateTotalPrice = calculateTotalPrice;
+        $scope.isPriceRecurring = isPriceRecurring;
+        $scope.boundMessage = boundMessage;
+        $scope.addPayType = addPayType;
+        $scope.selectPayTypes = selectPayTypes;
+        $scope.removePayType = removePayType;
+        $scope.maxMarginExceded = maxMarginExceded;
+        $scope.renderHtml = renderHtml;
+        $scope.payTypesVisible = false;
+        $scope.interestRate = 0;
+        $scope.prices = [];
+        $scope.selectedPrices = [];
+        $scope.productsPrices = [];
+        $scope.commissionSplit = {};
+        $scope.packageProducts = [];
+        $scope.calculateFinancing = finanncingService.calculateFinancing;
+        $scope.setRecurrentPrice = setRecurrentPrice;
+        $scope.calculateTotalCost = calculateTotalCost;
+
+        function startSetPackagesPrices() {
+            getPackageInfo();
+            getPriceTypes();
+        }
+
+        function getPackageInfo() {
+            const params = $.param({
+                idPackage: global.getParameterByName('idPackage') || 0
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/getPackageInfo',
+                data: params
+            }).then(showPackageInfo, utilsService.onHttpError);
+        }
+
+        function showPackageInfo(response) {
+            if (response.data.info && response.data.products) {
+                $scope.packageInfo = response.data.info[0];
+                $scope.packageProducts = response.data.products;
+            }
+        }
+
+        function renderHtml(htmlCode) {
+            return $sce.trustAsHtml(htmlCode);
+        }
+
+        function getPriceTypes() {
+            const params = $.param({
+                idPackage: global.getParameterByName('idPackage') || 0
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/getPriceTypes',
+                data: params
+            }).then(showPriceTypes, utilsService.onHttpError);
+        }
+
+        function showPriceTypes(response) {
+            if (typeof response.data.priceTypes !== 'undefined' && typeof response.data.productsPrices !== 'undefined') {
+                const prodPrices = response.data.productsPrices;
+                const commissionSplit = response.data.commissionSplit ? response.data.commissionSplit : null;
+                $scope.totalPrices = {};
+                $scope.totalPrice = 0;
+
+                $.each(prodPrices, (key, price) => {
+                    if(key === 'service') {
+                        if(!(key in $scope.totalPrices)) {
+                            $scope.totalPrices[key] = {};
+                        }
+                        $scope.totalPrices[key]['recurringPrice'] = price.recurringPrice;
+                        $scope.totalPrices[key]['fixedPrice'] = price.fixedPrice;
+                    } else {
+                        $scope.totalPrices[key] = price.totalUnitCost;
+                        $scope.totalPrice += price.totalUnitCost;
+                    }
+                });
+
+                $scope.productsPrices = prodPrices;
+                $scope.selectedPrices = [];
+
+                response.data.priceTypes.forEach(price => {
+                    price.minimalFixedPrice = price.minimalFixedPrice ? parseFloat(price.minimalFixedPrice) : 0;
+                    price.principalAmount = price.principalAmount ? parseFloat(price.principalAmount) : 0;
+                    price.minimalServicesPrice = price.minimalServicesPrice ? parseFloat(price.minimalServicesPrice) : 0;
+
+                    price.packagePayPeriod > 0 ? setRecurrentPrice(response.data.interestRate / 100, price) : price.minimalRecurentPrice = 0;
+
+                    if (price.minimalFixedPrice || price.minimalRecurentPrice || price.minimalServicesPrice) {
+                        price.isChecked = true;
+                        $scope.selectedPrices.push(price);
+                    } else {
+                        price.isChecked = false;
+                    }
+                });
+
+                $scope.prices = response.data.priceTypes;
+                $scope.payTypesVisible = $scope.selectedPrices.length === 0;
+
+                $scope.commissionSplit.broker = commissionSplit ? parseFloat(commissionSplit.broker) : 50;
+                $scope.commissionSplit.commercialLead = commissionSplit ? parseFloat(commissionSplit.commercialLead) : 50;
+                $scope.commissionSplit.payMargin = commissionSplit ? parseFloat(commissionSplit.payMargin) : 0;
+
+                $scope.interestRate = response.data.interestRate;
+            }
+        }
+
+        function updateCommission(userType) {
+            if (userType === 'broker') {
+                $scope.commissionSplit.commercialLead = 100 - $scope.commissionSplit.broker;
+            } else {
+                $scope.commissionSplit.broker = 100 - $scope.commissionSplit.commercialLead;
+            }
+        }
+
+        function updateBrokerPricesAndCommission() {
+            const params = $.param({
+                idPackage: global.getParameterByName('idPackage') || 0,
+                prices: JSON.stringify($scope.selectedPrices),
+                commissionSplit: JSON.stringify($scope.commissionSplit)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'packages/api/updateBrokerPricesAndCommission',
+                data: params
+            }).then(showUpdateMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('packages.tables.headers.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('packages.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if (messageObj.code === 'success') {
+                        getPriceTypes();
+                    }
+                });
+            }
+        }
+
+        function calculateTotalPrice(unitCost, payPeriod, isPriceRecurring, quantity = 1) {
+            const totalCost = isPriceRecurring === '1' ? unitCost * payPeriod * quantity : unitCost * quantity;
+
+            return totalCost.toFixed(2);
+        }
+
+        function isPriceRecurring(recurring) {
+            return parseInt(recurring) === 1;
+        }
+
+        function boundMessage(packagePayPeriod, periodUnit, type) {
+            return (type === 'servicesContractPeriod' && parseInt(packagePayPeriod) === 0) ?
+                'Unbound' :
+                packagePayPeriod + ' ' + periodUnit;
+        }
+
+        function addPayType() {
+            $scope.payTypesVisible = true;
+        }
+
+        function selectPayTypes() {
+            $scope.prices.forEach((price) => {
+                const indexOfElement = $scope.selectedPrices.indexOf(price);
+                if (price.isChecked && indexOfElement === -1) {
+                    $scope.selectedPrices.push(price);
+                }
+
+                if (!price.isChecked && indexOfElement !== -1) {
+                    $scope.selectedPrices.splice(indexOfElement, 1);
+                }
+            });
+            $scope.selectedPrices.sort((a, b) => {
+                return a.idPayType > b.idPayType;
+            });
+
+            if ($scope.selectedPrices.length === 0) {
+                const translatedMessage = $translate.instant('packages.messages.NO_PRICE_TYPE_SELECTED');
+                utilsService.displayMessage('warning', translatedMessage);
+            } else {
+                $scope.payTypesVisible = false;
+            }
+
+        }
+
+        function removePayType(key) {
+            $scope.selectedPrices[key].isChecked = false;
+            $scope.selectedPrices.splice(key, 1);
+            $scope.payTypesVisible = $scope.selectedPrices.length === 0;
+        }
+
+        function maxMarginExceded(margin, totalCost) {
+            return margin !== 0 && totalCost > margin;
+        }
+
+
+        function setRecurrentPrice(interestRate, price){
+            price.minimalRecurentPrice = parseFloat(finanncingService.calculateFinancing(interestRate, price.packagePayPeriod, price.principalAmount));
+        }
+
+        function calculateTotalCost(totalPrices, type) {
+            if(totalPrices) {
+                let totalPrice = 0;
+                if(type === 'fixed') {
+                    if(totalPrices.product) {
+                        totalPrice += totalPrices.product || 0;
+                    }
+                    if(totalPrices.installation) {
+                        totalPrice += totalPrices.installation || 0;
+                    }
+                    if(totalPrices.service) {
+                        totalPrice += totalPrices.service.fixedPrice || 0;
+                    }
+                    return totalPrice;
+                }
+
+                return totalPrices && totalPrices.service ? totalPrices.service.recurringPrice : 0;
+            }
+
+            return 0;
+        }
+    }
+})();

api-wiaas/client/js/components/packages/upload-image-cdn.directive.js

@@ -0,0 +1,64 @@
+(function() {
+    global.dashModule.directive('uploadImageCdn', uploadImageCdnDirective);
+
+    function uploadImageCdnDirective() {
+        return {
+            restrict: 'EA',
+            scope: {
+                uploadParams: '@'
+            },
+            controller: uploadImageCdnCtrl,
+            templateUrl: 'packages/html/uploadImageCdnTemplate'
+        };
+    }
+
+    function uploadImageCdnCtrl($scope, $, $http, $translate, utilsService, Upload) {
+        $scope.uploadImage = uploadImage;
+        $scope.options = {};
+        $scope.parseUploadParams = parseUploadParams;
+
+
+        function parseUploadParams() {
+            $scope.uploadParams = JSON.parse($scope.uploadParams);
+            $scope.showUseProfilePictureBox = 'shouldShowBox' in $scope.uploadParams ? $scope.uploadParams.shouldShowBox : true;
+        }
+
+        function uploadImage(file) {
+            if(typeof $scope.uploadParams === 'string') {
+                $scope.uploadParams = JSON.parse($scope.uploadParams);
+            }
+            $scope.options.idPackage = $scope.uploadParams.idPackage || 0;
+            $scope.options.folder = $scope.uploadParams.idCountry || 0;
+
+            Upload.upload({
+                url: 'packages/api/uploadNewImage',
+                method: 'POST',
+                file,
+                data: {
+                    options: $scope.options
+                }
+            }).then(getUploadedImageUrl, utilsService.onHttpError);
+        }
+
+        function getUploadedImageUrl(response) {
+            if (typeof response.data.imageUrl !== 'undefined') {
+                $scope.imageUrl = response.data.imageUrl;
+            }
+            displayUpdateMessage(response);
+        }
+
+        function displayUpdateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('packages.forms.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+
+                    if(messageObj.code === 'success') {
+                        $scope.options = {};
+                        utilsService.executeRegisteredFunction('getImagesFromCdn');
+                    }
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/processes/copy-processes.directive.js

@@ -0,0 +1,60 @@
+(function () {
+    global.dashModule
+        .directive('copyProcesses', copyProcessesDirective)
+        .controller('copyProcessesCtrl', ['$scope', '$http', '$', '$timeout', '$translate', 'utilsService', copyProcessesCtrl]);
+
+    function copyProcessesDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'processes/html/copyProcessesTemplate'
+        };
+    }
+
+    function copyProcessesCtrl($scope, $http, $, $timeout, $translate, utilsService) {
+        $scope.initPeocessCopy = initPeocessCopy;
+        $scope.getSteps = getSteps;
+        $scope.resetProcessSelection = resetProcessSelection;
+
+        function initPeocessCopy(){
+            getProcessNames();
+        }
+
+        function getProcessNames() {
+            $http({
+                url: 'processes/api/getProcessNames'
+            }).then(setProcessNames, utilsService.onHttpError);
+        }
+
+        function setProcessNames(response) {
+            $scope.processes = response.data || [];
+        }
+
+        function getSteps() {
+            $scope.processSteps = [];
+            const processSelected = $scope.processes.find(processData => {
+                return processData.id === $scope.idSelectedProccess.id;
+            });
+            $scope.processName = processSelected.name;
+            $scope.selectedCountry = processSelected.idCountry;
+            $http({
+                method: 'POST',
+                data: $.param({
+                    idProcess: $scope.idSelectedProccess.id
+                }),
+                url: 'processes/api/getStepsForProcessSelected'
+            }).then(setSteps, utilsService.onHttpError);
+        }
+
+        function setSteps(response) {
+            if (response.data) {
+                $scope.availableSteps = response.data.steps || {};
+                $scope.processSteps = response.data.processSteps|| [];
+            }
+        }
+
+        function resetProcessSelection() {
+            $scope.idSelectedProccess = null;
+            $scope.processSteps = [];
+        }
+    }
+})();

api-wiaas/client/js/components/processes/create-process-steps.directive.js

@@ -0,0 +1,306 @@
+(function () {
+    global.dashModule
+        .directive('createProcessSteps', createProcessStepsDirective)
+        .controller('createProcessStepsCtrl', ['$scope', '$http', '$', '$timeout', '$translate', 'utilsService', createProcessStepsCtrl]);
+
+    function createProcessStepsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'processes/html/createProcessTemplate'
+        };
+    }
+
+    function createProcessStepsCtrl($scope, $http, $, $timeout, $translate, utilsService) {
+        let idStepAdded;
+        let isStepVisible = true;
+        const messageTranslatePath = 'processes.messages.';
+        $scope.packages = {};
+        $scope.initProcessCreation = initProcessCreation;
+        $scope.addProcessStep = addProcessStep;
+        $scope.addProcess = addProcess;
+        $scope.processListsTitle = getProcessTitleTranslation;
+        $scope.shouldShowIcon = shouldShowIcon;
+        $scope.isProcessFormValid = isProcessFormValid;
+        $scope.getStepsForProcess = getStepsForProcess;
+        $scope.getStepPadding = getStepPadding;
+        $scope.getStepNumber = getStepNumber;
+        $scope.selectedProcesses = [];
+        $scope.isStepVisibleToCustomer = isStepVisibleToCustomer;
+        $scope.setVisible = setVisible;
+        $scope.isVisibleToCustomer = isVisibleToCustomer;
+        $scope.processSteps = [];
+        $scope.getExtraActionDescription = getExtraActionDescription;
+        $scope.countries = [];
+        $scope.selectedCountry = null;
+        $scope.tinymceOptions = utilsService.getTynimceOptions();
+
+        function createOptions(stepPlace) {
+            var options = {
+                placeholder: 'create-processes-products-display',
+                connectWith: '.processes-list',
+                start: function () {
+                    if (stepPlace === 'available') {
+                        $('#create-processes-step-dragndrop-process').addClass('allowed-drop-zone');
+                    }
+                },
+                stop: function () {
+                    if (stepPlace === 'available') {
+                        $('#create-processes-step-dragndrop-process').removeClass('allowed-drop-zone');
+                    }
+                }
+            };
+            return options;
+        }
+
+        $scope.sortableOptionsList = {
+            available: createOptions('available'),
+            process: createOptions('process')
+        };
+
+        function initProcessCreation(processSteps, onProcessCreated) {
+            $scope.processSteps = processSteps || [];
+            $scope.onProcessCreated = onProcessCreated;
+            getCountries();
+            displayProcessSteps(getStepsForProcess);
+        }
+
+        function getCountries() {
+            const params = $.param({
+                getArray: true
+            });
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'countries/api/getAllCountries'
+            }).then(setCountries, utilsService.onHttpError);
+        }
+
+        function setCountries(response) {
+            if (response.data) {
+                $scope.countries = response.data;
+            }
+        }
+
+        function displayProcessSteps(successCallback) {
+            $http({
+                method: 'GET',
+                url: 'processes/api/getProcessSteps'
+            }).then(successCallback, utilsService.onHttpError);
+        }
+
+        function getStepsForProcess(response) {
+            if (!angular.equals(response.data, {})) {
+                $scope.availableSteps = response.data.steps;
+                if($scope.processSteps){
+                    $scope.availableSteps = $scope.availableSteps.filter((availableStep) => {
+                        return !$scope.processSteps.find((selectedStep) => {
+                            return selectedStep.id === availableStep.id;
+                        });
+                    });
+                }
+                getUserTypes();
+                getExtraActionsAvailable();
+            }
+        }
+
+        function addProcessStep() {
+            const params = $.param({
+                shortDesc: $scope.processStepShortDesc,
+                fullDesc: $scope.processStepFullDesc,
+                idUserType: $scope.selectedUserTypeId,
+                isStepVisible: isStepVisible ? 1 : 0,
+                extraActionCode: $scope.selectedExtraAction || ''
+            });
+
+            $http({
+                method: 'POST',
+                url: 'processes/api/addProcessStep',
+                data: params
+            }).then(addProcessStepConfirmation, utilsService.onHttpError);
+        }
+
+        function addProcessStepConfirmation(response) {
+            if (response.data.messageData) {
+                const translationData = {
+                    stepName: $scope.processStepShortDesc
+                };
+
+                response.data.messageData.forEach(messageInfo => {
+                    if (messageInfo.code === 'success') {
+                        idStepAdded = response.data.idInserted;
+                        $scope.$parent.processStepShortDesc = '';
+                        $scope.$parent.processStepFullDesc = '';
+                        isStepVisible = true;
+                        displayProcessSteps(updateProcessSteps);
+                    } else {
+                        if (messageInfo.type && messageInfo.limit) {
+                            translationData.type = messageInfo.type;
+                            translationData.limit = messageInfo.limit;
+                        }
+                    }
+                    const message = $translate.instant(messageTranslatePath + messageInfo.message, translationData);
+                    utilsService.displayMessage(messageInfo.code, message);
+                });
+            } else {
+                throwServerError();
+            }
+        }
+
+        function updateProcessSteps(response) {
+            if (response.data.steps.length) {
+                const newStepAdded = response.data.steps.find(findAddedProcessStep);
+                $scope.availableSteps.push(newStepAdded);
+                $scope.availableSteps.sort(compareStepNames);
+            }
+        }
+
+        function findAddedProcessStep(stepData) {
+            return parseInt(stepData.id) === idStepAdded;
+        }
+
+        function addProcess() {
+            if ($scope.processName && $scope.processSteps.length > 0) {
+                const params = $.param({
+                    data: JSON.stringify($scope.processSteps),
+                    processName: $scope.processName,
+                    idCountry: $scope.selectedCountry
+                });
+
+                $http({
+                    method: 'POST',
+                    url: 'processes/api/addProcess',
+                    data: params
+                }).then(processConfirmationMessage, utilsService.onHttpError);
+            } else {
+                utilsService.displayMessage('error', $translate.instant(messageTranslatePath + 'PROCESS_DATA_MISSING'));
+            }
+        }
+
+        function processConfirmationMessage(response) {
+            if (response.data.messageData) {
+                const translationData = {
+                    processName: $scope.processName
+                };
+                response.data.messageData.forEach(messageInfo => {
+                    if (messageInfo.code === 'success') {
+                        $scope.processName = '';
+                        $scope.availableSteps = $scope.availableSteps.concat($scope.processSteps);
+                        $scope.availableSteps.sort(compareStepNames);
+                        $scope.processSteps = [];
+
+                        if($scope.onProcessCreated){
+                            $scope.onProcessCreated();
+                        }
+                    } else {
+                        $('#create-processes-process-name').focus();
+                        if (messageInfo.type && messageInfo.limit) {
+                            translationData.type = messageInfo.type;
+                            translationData.limit = messageInfo.limit;
+                        }
+                    }
+                    const message = $translate.instant(messageTranslatePath + messageInfo.message, translationData);
+                    utilsService.displayMessage(messageInfo.code, message);
+                });
+            } else {
+                throwServerError();
+            }
+        }
+
+        function shouldShowIcon(name) {
+            return name === 'steps';
+        }
+
+        function getProcessTitleTranslation(name) {
+            return 'processes.labels.' + name.toUpperCase();
+        }
+
+        function getUserTypes() {
+            $http({
+                method: 'GET',
+                url: 'processes/api/getUserTypes',
+            }).then(setUserTypes, utilsService.onHttpError);
+        }
+
+        function setUserTypes(response) {
+            if (response.data.length) {
+                response.data.forEach(userType => {
+                    userType.type = userType.type.charAt(0).toUpperCase() + userType.type.slice(1);
+                    userType.type = userType.type.replace('_', ' ');
+                });
+                $scope.userTypes = response.data;
+            }
+        }
+
+        function getExtraActionsAvailable() {
+            $http({
+                method: 'POST',
+                url: 'processes/api/getExtraActionsAvailable',
+            }).then(setExtraActionsAvailable, utilsService.onHttpError);
+        }
+
+        function setExtraActionsAvailable(response) {
+            if (response.data.length) {
+                response.data.forEach(extraAction => {
+                    extraAction.name = extraAction.actionCode.charAt(0).toUpperCase() + extraAction.actionCode.slice(1);
+                    extraAction.name = extraAction.name.replace('-', ' ');
+                });
+                $scope.extraActions = response.data;
+            }
+        }
+
+        function isProcessFormValid() {
+            return $scope.processName && $scope.processSteps.length > 0;
+        }
+
+        function getStepPadding(position) {
+            return (position + 1) * 2;
+        }
+
+        function getStepNumber(position) {
+            $scope.processSteps[position].stepNumber = position + 1;
+            return position + 1;
+        }
+
+        function throwServerError() {
+            const errorMessage = $translate.instant('processes.messages.SERVER_ERROR');
+            utilsService.displayMessage('error', errorMessage);
+        }
+
+        function isStepVisibleToCustomer() {
+            return isStepVisible ? 'glyphicon-eye-open' : 'glyphicon-eye-close';
+        }
+
+        function setVisible() {
+            isStepVisible = !isStepVisible;
+        }
+
+        function isVisibleToCustomer(stepVisibleInfo) {
+            return stepVisibleInfo === '1' ? 'glyphicon-eye-open' : 'glyphicon-eye-close';
+        }
+
+        function getExtraActionDescription() {
+            const selectedActionObj = $scope.extraActions.filter((action) => {
+                return action.idActionCode === $scope.selectedExtraAction;
+            });
+
+            if (selectedActionObj.length) {
+                const translatedName = selectedActionObj[0].actionCode.replace('-', '_');
+                return $translate.instant('processes.messages.' + translatedName);
+            }
+
+            return '';
+        }
+
+        function compareStepNames(stepA, stepB) {
+            if (stepA.shortDesc < stepB.shortDesc) {
+                return -1;
+            }
+
+            if (stepA.shortDesc > stepB.shortDesc) {
+                return 1;
+            }
+
+            return 0;
+        }
+    }
+})();

api-wiaas/client/js/components/processes/edit-processes.directive.js

@@ -0,0 +1,246 @@
+(function () {
+    global.dashModule
+        .directive('editProcesses', editProcessesDirective)
+        .controller('editProcessesCtrl', ['$scope', '$http', '$', '$timeout', '$translate', 'utilsService', editProcessesCtrl]);
+
+    function editProcessesDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'processes/html/editProcessesTemplate'
+        };
+    }
+
+    function editProcessesCtrl($scope, $http, $, $timeout, $translate, utilsService) {
+        let processStepsHeight;
+        let availableStepDragged = {};
+        let processStepDragged = {};
+        $scope.initPRocessEdit = initPRocessEdit;
+        $scope.getSteps = getSteps;
+        $scope.isProcessSelected = isProcessSelected;
+        $scope.getStepPadding = getStepPadding;
+        $scope.startDragFromAvailableSteps = startDragFromAvailableSteps;
+        $scope.endDragFromAvailableSteps = endDragFromAvailableSteps;
+        $scope.availableStepDropped = availableStepDropped;
+        $scope.startDragFromProcessSteps = startDragFromProcessSteps;
+        $scope.endDragFromProcessSteps = endDragFromProcessSteps;
+        $scope.processStepDropped = processStepDropped;
+        $scope.editProcess = editProcess;
+        $scope.setProcessAfterEdit = setProcessAfterEdit;
+        $scope.resetProducts = resetProducts;
+        $scope.isVisibleToCustomer = isVisibleToCustomer;
+
+        function isVisibleToCustomer(stepVisibleInfo) {
+            return stepVisibleInfo === '1' ? 'glyphicon-eye-open' : 'glyphicon-eye-close';
+        }
+
+        function initPRocessEdit(){
+            getProcessNames();
+            getCountries();
+        }
+
+        function getProcessNames(isAfterEdit = false) {
+            $http({
+                methos: 'POST',
+                url: 'processes/api/getProcessNames'
+            }).then((response) => {setProcessNames(response, isAfterEdit);}, utilsService.onHttpError);
+        }
+
+        function setProcessNames(response, isAfterEdit) {
+            $scope.processes = response.data ? response.data : [];
+            if(isAfterEdit){
+                setProcessAfterEdit();
+            }
+        }
+
+        function getCountries() {
+            const params = $.param({
+                getArray: true
+            });
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'countries/api/getAllCountries'
+            }).then(setCountries, utilsService.onHttpError);
+        }
+
+        function setCountries(response){
+            if(response.data){
+                $scope.countries = response.data;
+            }
+        }
+
+        function getSteps() {
+            const processSelected = $scope.processes.find(processData => {
+                return processData.id === $scope.idSelectedProccess.id;
+            });
+            $scope.processName = processSelected.name;
+            $scope.selectedCountry = processSelected.idCountry;
+            $http({
+                method: 'POST',
+                data: $.param({
+                    idProcess: $scope.idSelectedProccess.id
+                }),
+                url: 'processes/api/getStepsForProcessSelected'
+            }).then(setSteps, utilsService.onHttpError);
+        }
+
+        function setSteps(response) {
+            if (response.data) {
+                $scope.availableSteps = response.data.steps ? response.data.steps : {};
+                $scope.processSteps = response.data.processSteps ? response.data.processSteps : [];
+            }
+
+            processStepsHeight = $('#process-steps-list').height();
+            $('.available-steps-list').css({
+                height: processStepsHeight
+            });
+        }
+
+        function isProcessSelected() {
+            return $scope.idSelectedProccess && $scope.idSelectedProccess.id ? $scope.idSelectedProccess.id : $scope.idSelectedProccess;
+        }
+
+        function getStepPadding(position) {
+            return (position + 1) * 2;
+        }
+
+        function startDragFromAvailableSteps(event, ui, idStepDragged) {
+            $('#available-steps-list').css({
+                height: '400px',
+                overflow: 'visible'
+            });
+
+            $('#process-steps-list').addClass('allowed-drop-zone');
+            availableStepDragged = {
+                idStep: idStepDragged,
+                shortDesc: $scope.availableSteps[idStepDragged].shortDesc,
+                isVisibleForCustomer: $scope.availableSteps[idStepDragged].isVisibleForCustomer
+            };
+        }
+
+        function endDragFromAvailableSteps() {
+            $('#available-steps-list').css({
+                height: processStepsHeight,
+                'overflow-y': 'scroll'
+            });
+
+            $('#process-steps-list').removeClass('allowed-drop-zone');
+        }
+
+        function availableStepDropped(event, ui) {
+            let isStepMoved = false;
+            if (Object.keys(availableStepDragged).length === 0) {
+                processStepDragged = JSON.parse($(ui.helper).attr('step-info'));
+                if (typeof processStepDragged === 'object') {
+                    isStepMoved = $scope.processSteps.some(processStep => {
+                        return processStep.idStep === processStepDragged.idStep;
+                    });
+                }
+            }
+
+            if (!isStepMoved) {
+                $scope.processSteps.push(availableStepDragged);
+                delete $scope.availableSteps[availableStepDragged.idStep];
+                availableStepDragged = {};
+            }
+
+            $(ui.helper).css({
+                position: 'relative',
+                left: 0,
+                top: 0
+            });
+        }
+
+        function startDragFromProcessSteps(event, ui) {
+            $('#process-steps-list').css({
+                height: '400px',
+                overflow: 'visible'
+            });
+
+            $('#available-steps-list').addClass('allowed-drop-zone');
+            $('#process-steps-list').addClass('allowed-drop-zone');
+            processStepDragged = JSON.parse($(ui.helper).attr('step-info'));
+        }
+
+        function endDragFromProcessSteps() {
+            processStepsHeight = $('#process-steps-list').height();
+            $('#process-steps-list').css({
+                height: processStepsHeight,
+                'overflow-y': 'scroll'
+            });
+
+            $('#available-steps-list').removeClass('allowed-drop-zone');
+            $('#process-steps-list').removeClass('allowed-drop-zone');
+            $timeout(function () {
+                $('.rearrange-steps').sortable('refreshPositions');
+            });
+        }
+
+        function processStepDropped(event, ui) {
+            if (typeof processStepDragged.idStep !== 'undefined') {
+                $scope.availableSteps[processStepDragged.idStep] = processStepDragged;
+                $scope.processSteps = $scope.processSteps.filter(removeDroppedStep);
+            }
+
+            processStepDragged = {};
+
+            $(ui.helper).css({
+                position: 'relative',
+                left: 0,
+                top: 0
+            });
+        }
+
+        function removeDroppedStep(processStep) {
+            return processStep.idStep !== processStepDragged.idStep;
+        }
+
+        function editProcess() {
+            if ($scope.processSteps.length !== 0) {
+                $http({
+                    method: 'POST',
+                    url: 'processes/api/editProcess',
+                    data: $.param({
+                        idProcess: $scope.idSelectedProccess.id,
+                        data: {
+                            processName: $scope.processName,
+                            idCountry: $scope.selectedCountry,
+                            processSteps: $scope.processSteps
+                        }
+                    })
+                }).then(displayEditMessage, utilsService.onHttpError);
+            } else {
+                const message = $translate.instant('processes.messages.NO_STEPS');
+                utilsService.displayMessage('error', message);
+            }
+        }
+
+        function displayEditMessage(response) {
+            if (response.data.hasOwnProperty('messageData') && response.data.messageData.length > 0) {
+                response.data.messageData.forEach(messageData => {
+                    const message = $translate.instant('processes.messages.' + messageData.message);
+                    utilsService.displayMessage(messageData.code, message);
+
+                    if (messageData.code === 'success') {
+                        getProcessNames(true);
+                    }
+                });
+            }
+        }
+
+        function setProcessAfterEdit(idProcessUpdated = 0) {
+            if (idProcessUpdated) {
+                $scope.idSelectedProccess = {
+                    id: idProcessUpdated
+                };
+                getSteps();
+            }
+        }
+
+        function resetProducts() {
+            getSteps();
+            const message = $translate.instant('processes.messages.RESET_PROCESS');
+            utilsService.displayMessage('success', message);
+        }
+    }
+})();

api-wiaas/client/js/components/processes/link-process.directive.js

@@ -0,0 +1,185 @@
+(function () {
+    global.dashModule
+        .directive('linkProcess', linkProcessDirective)
+        .controller('linkProcessCtrl', ['$scope', '$http', '$', '$timeout', '$translate', 'utilsService', linkProcessCtrl]);
+
+    function linkProcessDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'processes/html/linkProcessTemplate'
+        };
+    }
+
+    function linkProcessCtrl($scope, $http, $, $timeout, $translate, utilsService) {
+        $scope.packages = {};
+        $scope.getPackages = getPackages;
+        $scope.isPackageSelected = isPackageSelected;
+        $scope.getCountries = getCountries;
+        $scope.isCountrySelected = isCountrySelected;
+        $scope.getProcesses = getProcesses;
+        $scope.processDragStart = processDragStart;
+        $scope.processDragStop = processDragStop;
+        $scope.prcessDrop = prcessDrop;
+        $scope.linkProcesses = linkProcesses;
+        $scope.isNewStepFormVisible = isNewStepFormVisible;
+        $scope.enableAddNewProcess = enableAddNewProcess;
+        $scope.showProcessInfo = showProcessInfo;
+        $scope.isVisibleToCustomer = isVisibleToCustomer;
+        $scope.addingNewStep = false;
+        $scope.processes = [];
+        $scope.selectedProcesses = [];
+        $scope.selectedSteps = {
+            steps: [],
+            processName: ''
+        };
+
+        function isVisibleToCustomer(stepVisibleInfo) {
+            return stepVisibleInfo === '1' ? 'glyphicon-eye-open' : 'glyphicon-eye-close';
+        }
+
+        function processDragStart(event, ui) {
+            const containerSelector = $(ui.helper).hasClass('available-process') ? '#available-processes' : '#selected-processes';
+            const dropSelector = containerSelector === '#selected-processes' ? '#available-processes' : '#selected-processes';
+            $(containerSelector).css({
+                height: 'auto',
+                overflow: 'visible',
+            });
+
+            $(dropSelector).css({
+                border: '2px dashed #000',
+                background: 'rgba(223, 240, 216, 0.5)'
+            });
+        }
+
+        function processDragStop(event, ui) {
+            const containerSelector = $(ui.helper).hasClass('available-process') ? '#available-processes' : '#selected-processes';
+            const dropSelector = containerSelector === '#selected-processes' ? '#available-processes' : '#selected-processes';
+            $(containerSelector).css({
+                height: '360px',
+                'overflow-y': 'scroll',
+                'overflow-x': 'hidden',
+            });
+
+            $(dropSelector).css({
+                border: '2px solid #000',
+                background: 'none'
+            });
+        }
+
+        function prcessDrop(event, ui) {
+            const processKey = $(ui.helper).attr('process-key');
+            if ($(ui.helper).hasClass('available-process')) {
+                $scope.selectedProcesses.push($scope.processes[processKey]);
+                $scope.processes.splice(processKey, 1);
+                $scope.selectedProcesses.sort(utilsService.sortByAttributeName('processName'));
+            } else {
+                $scope.processes.push($scope.selectedProcesses[processKey]);
+                $scope.selectedProcesses.splice(processKey, 1);
+                $scope.processes.sort(utilsService.sortByAttributeName('processName'));
+            }
+        }
+
+        function linkProcesses() {
+            const params = $.param({
+                idPackage: $scope.selectedPackageId,
+                selectedProcesses: JSON.stringify($scope.selectedProcesses)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'processes/api/linkProcessesToPackage',
+                data: params
+            }).then(showUpdateMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    let translatedMessage = $translate.instant('processes.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+
+        function getPackages() {
+            const params = $.param({
+                idCountry: $scope.selectedCountryId
+            });
+            $http({
+                method: 'POST',
+                url: 'processes/api/getPackagesAndProcesses',
+                data: params
+            }).then(setPackages, utilsService.onHttpError);
+        }
+
+        function getProcesses() {
+            if ($scope.selectedPackageId) {
+                const params = $.param({
+                    idPackage: $scope.selectedPackageId
+                });
+                $http({
+                    method: 'POST',
+                    url: 'processes/api/getProcesses',
+                    data: params
+                }).then(setProcesses, utilsService.onHttpError);
+            }
+        }
+
+        function setProcesses(response) {
+            if (typeof response.data.processes !== 'undefined' && typeof response.data.steps !== 'undefined') {
+                $scope.steps = response.data.steps;
+                $scope.selectedProcesses = [];
+                $scope.processes = [];
+                response.data.processes.forEach(process => {
+                    if (process.isSelected === '1') {
+                        $scope.selectedProcesses.push(process);
+                    } else {
+                        $scope.processes.push(process);
+                    }
+                });
+            }
+        }
+
+        function setPackages(response) {
+            if (response.data.length) {
+                $scope.packages = {};
+                response.data.forEach(packageItem => {
+                    $scope.packages[packageItem.idPackage] = packageItem.packageName;
+                });
+            }
+        }
+
+        function isPackageSelected() {
+            return typeof $scope.selectedPackageId !== 'undefined' && $scope.selectedPackageId !== null;
+        }
+
+        function getCountries() {
+            $http({
+                method: 'GET',
+                url: 'countries/api/getAllCountries'
+            }).then(setCountries, utilsService.onHttpError);
+        }
+
+        function setCountries(response) {
+            $scope.countries = response.data;
+        }
+
+        function isCountrySelected() {
+            return typeof $scope.selectedCountryId !== 'undefined' && $scope.selectedCountryId !== 0;
+        }
+
+        function isNewStepFormVisible() {
+            return $scope.addingNewStep;
+        }
+
+        function enableAddNewProcess() {
+            $scope.addingNewStep = !$scope.addingNewStep;
+        }
+
+        function showProcessInfo(process) {
+            $('#info-placeholder').hide();
+            $scope.selectedSteps.processName = process.processName;
+            $scope.selectedSteps.steps = $scope.steps[process.idProcess];
+        }
+    }
+})();

api-wiaas/client/js/components/processes/processes.directive.js

@@ -0,0 +1,38 @@
+(function () {
+    global.dashModule
+        .controller('processesController', ['$scope', processesController])
+        .directive('processes', [processesDirective]);
+
+    function processesDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'processes/html/processesTemplate'
+        };
+    }
+
+    function processesController($scope) {
+        $scope.subModule = global.getParameterByName('subModule') || 'viewPackageProcesses';
+        $scope.setSubModule = setSubModule;
+        $scope.isSubmoduleVisible = isSubmoduleVisible;
+        addUrlListener();
+
+        function addUrlListener() {
+            window.addEventListener('popstate', function (e) {
+                $scope.$evalAsync($scope => {
+                    $scope.subModule = e.state ? e.state.subModule : 'viewPackageProcesses';
+                });
+            }, false);
+        }
+
+        function setSubModule($event) {
+            $scope.subModule = $event.currentTarget.attributes.subModule.value;
+            history.pushState({
+                subModule: $scope.subModule
+            }, null, '?subModule=' + $scope.subModule);
+        }
+
+        function isSubmoduleVisible(subModule) {
+            return subModule === $scope.subModule;
+        }
+    }
+})();

api-wiaas/client/js/components/processes/processes.less

@@ -0,0 +1,219 @@
+@eye-open-color: #2184be;
+@eye-close-color: #C11B17;
+@layer-background: rgba(255, 255, 255, 0.7);
+
+.module-layer {
+    position: relative;
+    margin-top: 1%;
+    background: @layer-background;
+    margin-bottom: 3%;
+    padding-bottom: 2%;
+}
+
+#create-process-steps {
+    width: 100%;
+    padding: 1%;
+    margin-bottom: 2%;
+
+    .create-process-title {
+        margin-bottom: 1%;
+        font-weight: bold;
+        font-size: 120%;
+        text-align: center;
+    }
+
+    .processes-list {
+        background: #FFF;
+        height: 360px;
+        min-height: 360px;
+        overflow-y: scroll;
+        border: 1px solid #000;
+        border-radius: 5px;
+    }
+
+    .glyphicon-eye-open {
+        color: @eye-open-color;
+        font-size: 120%;
+    }
+
+    .glyphicon-eye-close {
+        color: @eye-close-color;
+        font-size: 120%;
+    }
+
+    .step-extra-action-radios {
+        display: inline-block;
+    }
+
+    .draggable-icon-steps {
+        color: #3c763d;
+        top: 50%;
+        font-size: 200%;
+        text-align: center;
+        position: absolute;
+    }
+
+    .create-process-name-input, .create-process-country-select{
+        height: 3rem;
+    }
+
+    .add-process-steps {
+        display: inline-block;
+        margin-top: 1%;
+        border-top: 2px solid #3bb9ff;
+        border-bottom: 2px solid #3bb9ff;
+        padding: 2%;
+        background: rgba(59, 185, 255, 0.1);
+
+        .create-processes-description {
+            display: inline-block;
+            margin-top: 2%;
+            width: 98%;
+
+            .package-label {
+                width: 30%;
+            }
+
+            .create-package-description-text {
+                width: 70%;
+            }
+        }
+    }
+}
+
+#edit-process-button {
+    margin: 2%;
+}
+
+#edit-processes-container {
+    margin-left: 1%;
+}
+
+#edit-process-and-steps-container {
+    height: 400px;
+    margin-bottom: 2%;
+    overflow: hidden;
+    position: relative;
+
+    .draggable-icon {
+        color: #3c763d;
+        left: 28.5%;
+        top: 50%;
+        font-size: 200%;
+        text-align: center;
+        position: absolute;
+    }
+}
+
+#edit-processes {
+    .module-layer;
+
+    .glyphicon-eye-open {
+        color: @eye-open-color;
+    }
+
+    .glyphicon-eye-close {
+        color: @eye-close-color;
+    }
+
+    .edit-processes-lists {
+        display: inline-block;
+        width: 95%;
+        border: 1px solid #000;
+        border-radius: 5px;
+        height: 400px;
+        overflow-y: scroll;
+        padding: 0;
+    }
+}
+
+#link-process-steps {
+    .module-layer;
+
+    .glyphicon-eye-open {
+        color: @eye-open-color;
+    }
+
+    .glyphicon-eye-close {
+        color: @eye-close-color;
+    }
+
+    .processes-list {
+        background: #FFF;
+        height: 360px;
+        min-height: 360px;
+        overflow-y: scroll;
+        border: 1px solid #000;
+        border-radius: 5px;
+    }
+
+    .process-selection-layer {
+        display: inline-block;
+        position: relative;
+        width: 100%;
+        height: 360px;
+        overflow: hidden;
+    }
+
+    .headers-col {
+        margin-top: 1%;
+        margin-bottom: 1%;
+        vertical-align: top;
+        text-align: center;
+    }
+
+    .process-draggable {
+        padding: 7px 5px;
+        cursor: pointer;
+        border: 1px solid #ddd;
+        font-weight: bold;
+        padding-left: 2%;
+    }
+
+    .process-draggable:hover {
+        background: rgba(223, 240, 216, 0.5);
+    }
+
+    .info-placeholder {
+        color: rgba(124, 128, 130, 0.7);
+        padding: 5%;
+    }
+
+    .info-step {
+        border: 1px solid #ddd;
+    }
+
+    .step-position {
+        display: inline-block;
+        width: 10%;
+        font-weight: bold;
+        vertical-align: middle;
+        background: rgba(59, 185, 255, 0.5);
+        border-right: 2px solid rgb(59, 185, 255);
+        padding: 5px 0 5px 5px;
+    }
+
+    .step-description {
+        display: inline-block;
+        width: 85%;
+        padding: 5px 3px;
+    }
+
+    .link-processes-button {
+        margin-top: 1%;
+        margin-bottom: 3%;
+    }
+
+    .draggable-icon {
+        color: #3c763d;
+        left: 31%;
+        top: 50%;
+        font-size: 200%;
+        text-align: center;
+        position: absolute;
+    }
+
+    .add-new-process{
+        margin: 1% 0;
+    }
+}

api-wiaas/client/js/components/processes/view-package-processes.directive.js

@@ -0,0 +1,76 @@
+(function () {
+    global.dashModule
+        .directive('viewPackageProcesses', viewPackageProcessesDirective)
+        .controller('viewPackageProcessesController', ['$scope', '$http', '$translate', '$', 'utilsService', viewPackageProcessesCtrl]);
+
+    function viewPackageProcessesDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'processes/html/viewPackageProcessesTemplate'
+        };
+    }
+
+    function viewPackageProcessesCtrl($scope, $http, $translate, $, utilsService) {
+        $scope.getAvailableProcesses = getAvailableProcesses;
+        $scope.listAvailableProcesses = listAvailableProcesses;
+        $scope.searchProcess = searchProcess;
+        $scope.isVisibleForCustomer = isVisibleForCustomer;
+        $scope.countries = [];
+
+        function getAvailableProcesses() {
+            $http({
+                method: 'GET',
+                url: 'processes/api/getProcessInfo'
+            }).then(setProcessData, utilsService.onHttpError);
+        }
+
+        function setProcessData(response) {
+            $scope.countries = response.data;
+        }
+
+        function isVisibleForCustomer(visibleForCustomer){
+            return visibleForCustomer === '1' ? 'glyphicon-eye-open' : 'glyphicon-eye-close';
+        }
+
+        function listAvailableProcesses() {
+            $scope.searchProcessValue = '';
+            getAvailableProcesses();
+            utilsService.displayMessage('success', $translate.instant('processes.messages.LIST_ALL_PROCESSES'));
+        }
+
+        function searchProcess() {
+            const params = $.param({
+                name: $scope.searchProcessValue
+            });
+
+            $http({
+                method: 'POST',
+                url: 'processes/api/searchProcess',
+                data: params
+            }).then(getSearchedProcess, utilsService.onHttpError);
+        }
+
+        function getSearchedProcess(response) {
+            if (response.data.messageData) {
+                let translationDataMessages = '';
+                if (response.data.messageData.status === 'success') {
+                    let processesFound = 0;
+                    $.each(response.data.data, (key, country) => {
+                        processesFound += Object.keys(country.processes).length;
+                    });
+                    translationDataMessages = {
+                        processesFound
+                    };
+                    $scope.countries = response.data.data;
+                } else {
+                    $scope.countries = [];
+                }
+
+                const message = $translate.instant('processes.messages.' + response.data.messageData.message, translationDataMessages);
+                utilsService.displayMessage(response.data.messageData.status, message);
+            } else {
+                utilsService.displayMessage('error', $translate.instant('processes.messages.SERVER_ERROR'));
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/profile-settings/change-password.directive.js

@@ -0,0 +1,51 @@
+(function () {
+    global.dashModule
+        .directive('changePassword', changePasswordDirective)
+        .controller('changePasswordCtrl', ['$scope', '$', '$http', '$translate', 'utilsService', changePasswordCtrl]);
+
+    function changePasswordDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'profileSettings/html/ChangePasswordTemplate'
+        };
+    }
+
+    function changePasswordCtrl($scope, $, $http, $translate, utilsService) {
+        $scope.changePassword = changePassword;
+        $scope.showHideDialog = showHideDialog;
+        $scope.isDialogVisible = false;
+
+        function changePassword() {
+            const params = $.param({
+                passwords: JSON.stringify($scope.data)
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'utils/api/changePassword'
+            }).then(showConfirmationMessage, utilsService.onHttpError);
+        }
+
+        function showConfirmationMessage(response) {
+            if(response.data && response.data.messages) {
+                response.data.messages.forEach(messageData => {
+                    const message = $translate.instant('profile.forms.messages.' + messageData.message);
+                    utilsService.displayMessage(messageData.code, message);
+
+                    if(messageData.code === 'success') {
+                        $scope.data = {};
+                    }
+                });
+            }
+        }
+
+        function showHideDialog() {
+            if($scope.data && Object.keys($scope.data).length === 3) {
+                $scope.$evalAsync(() => {
+                    $scope.isDialogVisible = !$scope.isDialogVisible;
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/profile-settings/edit-profile.directive.js

@@ -0,0 +1,80 @@
+(function () {
+    global.dashModule
+        .directive('editProfile', editProfileDirective)
+        .controller('editProfileCtrl', ['$scope', '$', '$http', '$translate', 'utilsService', editProfileCtrl]);
+
+    function editProfileDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'profileSettings/html/EditProfileTemplate'
+        };
+    }
+
+    function editProfileCtrl($scope, $, $http, $translate, utilsService) {
+        $scope.saveProfile = saveProfile;
+        $scope.getProfile = getProfile;
+        $scope.saveCompany = saveCompany;
+        $scope.isCompanyAdmin = isCompanyAdmin;
+        $scope.idUser = global.getParameterByName('idUser') || 0;
+
+        function isCompanyAdmin(){
+            return $scope.data && (parseInt($scope.data.isCompanyAdmin) === 1 || $scope.data.userType === 'broker');
+        }
+
+        function getProfile(){
+            const params = $.param({
+                idUser: $scope.idUser
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'v2/profileSettings/api/getProfileInfo'
+            }).then(setProfile, utilsService.onHttpError);
+        }
+
+        function setProfile(response){
+            if (response.data) {
+                $scope.data = response.data;
+            }
+        }
+
+        function saveProfile() {
+            const params = $.param({
+                idUser: $scope.idUser,
+                profile: JSON.stringify($scope.data)
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'v2/profileSettings/api/saveProfileInfo'
+            }).then(showConfirmationMessage, utilsService.onHttpError);
+        }
+
+        function saveCompany() {
+            const params = $.param({
+                companyInfo: JSON.stringify({
+                    idCompany: $scope.data.idCompany,
+                    companyName: $scope.data.companyName,
+                    vatCode: $scope.data.vatCode
+                })
+            });
+
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'v2/profileSettings/api/saveCompanyInfo'
+            }).then(showConfirmationMessage, utilsService.onHttpError);
+        }
+
+        function showConfirmationMessage(response) {
+            if(response.data && response.data.messages) {
+                response.data.messages.forEach(messageData => {
+                    const message = $translate.instant('profile.forms.messages.' + messageData.message);
+                    utilsService.displayMessage(messageData.code, message);
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/profile-settings/profile-settings.directive.js

@@ -0,0 +1,38 @@
+(function () {
+    global.dashModule
+        .directive('profileSettings', profileSettingsDirective)
+        .controller('profileSettingsCtrl', ['$scope', profileSettingsCtrl]);
+
+    function profileSettingsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'profileSettings/html/ProfileSettingsTemplate'
+        };
+    }
+
+    function profileSettingsCtrl($scope) {
+        $scope.isSubmoduleVisible = isSubmoduleVisible;
+        $scope.setSubModule = setSubModule;
+        $scope.subModule = global.getParameterByName('subModule') || 'editProfile';
+        addUrlListener();
+
+        function addUrlListener() {
+            window.addEventListener('popstate', function (e) {
+                $scope.$evalAsync($scope => {
+                    $scope.subModule = e.state ? e.state.subModule : 'editProfile';
+                });
+            }, false);
+        }
+
+        function setSubModule($event) {
+            $scope.subModule = $event.currentTarget.attributes.subModule.value;
+            history.pushState({
+                subModule: $scope.subModule
+            }, null, '?subModule=' + $scope.subModule);
+        }
+
+        function isSubmoduleVisible(subModule) {
+            return subModule === $scope.subModule;
+        }
+    }
+})();

api-wiaas/client/js/components/profile-settings/profile-settings.less

@@ -0,0 +1,26 @@
+@layer-background: rgba(255, 255, 255, 0.7);
+
+.module-layer {
+    position: relative;
+    margin-top: 1%;
+    background: @layer-background;
+    margin-bottom: 3%;
+    padding-bottom: 2%;
+}
+
+#change-password-container {
+    .module-layer;
+
+    .change-passwd-list {
+        display: inline-block;
+        padding: 2%;
+    }
+
+    .passwords-container {
+        padding-bottom: 1%;
+    }
+}
+
+#change-profile-container {
+    .module-layer;
+}

api-wiaas/client/js/components/shop/cart-review.directive.js

@@ -0,0 +1,21 @@
+(function () {
+    global.dashModule
+        .directive('cartReview', ['$', '$translate', 'shopCartService', cartReviewDirective]);
+
+    function cartReviewDirective($, $translate, shopCartService) {
+        return {
+            restrict: 'A',
+            templateUrl: 'shop/html/cartReview',
+            scope: {
+                countryNames: '<',
+                cartPackages: '<',
+                delivery: '<',
+                billing: '<',
+                details: '<'
+            },
+            link: function (scope) {
+                scope.sumPrice = shopCartService.sumPrice;
+            }
+        };
+    }
+})();

api-wiaas/client/js/components/shop/shop-cart.directive.js

@@ -0,0 +1,488 @@
+(function () {
+    global.dashModule
+        .controller('shopCartCtrl', ['$scope', '$http', '$', '$translate', 'Upload', 'utilsService', 'shopCartService', shopCartCtrl])
+        .directive('shopCart', [shopCartDirective]);
+
+    function shopCartDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'shop/html/shopCartTemplate'
+        };
+    }
+
+    function shopCartCtrl($scope, $http, $, $translate, Upload, utilsService, shopCartService) {
+        let addressType = '';
+        const countryNames = {};
+        $scope.DOCUMENT_TYPES = {
+            'TEMPLATE_QUESTINNAIRE': 1,
+            'QUESTIONNAIRE': 2,
+            'TEMPLATE_AGREEMENT': 6,
+            'AGREEMENT': 7
+        };
+        $scope.startOrderDetails = startOrderDetails;
+        $scope.cartPackages = [];
+        $scope.countries = [];
+        $scope.details = {};
+        $scope.delivery = {};
+        $scope.billing = {};
+        $scope.countryNames = {};
+        $scope.updateQuantity = updateQuantity;
+        $scope.removeFromCart = removeFromCart;
+        $scope.actionButton = 'NEXT';
+        $scope.prevButton = '';
+        $scope.isStepVisible = isStepVisible;
+        $scope.hasPrevStep = hasPrevStep;
+        $scope.goToNextStep = goToNextStep;
+        $scope.showHideDialog = showHideDialog;
+        $scope.isDialogVisible = false;
+        $scope.placeOrder = placeOrder;
+        $scope.changeCountryName = changeCountryName;
+        $scope.isCartEmpty = isCartEmpty;
+        $scope.sumPrice = shopCartService.sumPrice;
+        $scope.isAvailable = isAvailable;
+        $scope.getAvailabilityMessage = getAvailabilityMessage;
+        $scope.termsAndConditionCheckbox = false;
+        $scope.setTermsCheckboxValue = setTermsCheckboxValue;
+        $scope.getAlertClass = getAlertClass;
+        $scope.isActionBtnDisabled = isActionBtnDisabled;
+        $scope.deliveryEqualsBilling = {
+            checked: false
+        };
+        $scope.setBillingSameAsDeliveryAddress = setBillingSameAsDeliveryAddress;
+        $scope.getOptionAvailabilityClass = getOptionAvailabilityClass;
+        $scope.documents = {};
+        $scope.selectionSteps = {
+            'show-order-items': {
+                current: 'show-order-items',
+                next: 'upload-customer-questionaire',
+                prev: '',
+                isActionPromise: false,
+                beforeAction: isCartValid,
+                action: getInfo
+            },
+            'upload-customer-questionaire': {
+                current: 'upload-customer-questionaire',
+                next: 'upload-agreement',
+                prev: 'show-order-items',
+                isActionPromise: false,
+                beforeAction: isQuestionaireUploaded,
+                action: () => {
+                    return true;
+                }
+            },
+            'upload-agreement': {
+                current: 'upload-agreement',
+                next: 'show-customer-details',
+                prev: 'upload-customer-questionaire',
+                isActionPromise: false,
+                beforeAction: isAgreementUploaded,
+                action: () => {
+                    return true;
+                }
+            },
+            'show-customer-details': {
+                current: 'show-customer-details',
+                next: 'show-customer-billing',
+                prev: 'upload-agreement',
+                isActionPromise: false,
+                beforeAction: () => {
+                    return true;
+                },
+                action: () => {
+                    return true;
+                }
+            },
+            'show-customer-billing': {
+                current: 'show-customer-billing',
+                next: '',
+                prev: 'show-customer-details',
+                isActionPromise: false,
+                beforeAction: () => {
+                    return true;
+                },
+                action: showHideDialog
+            },
+        };
+        $scope.step = $scope.selectionSteps['show-order-items'];
+        $scope.uploadFile = uploadFile;
+        $scope.isOrderPlaced = false;
+
+        function startOrderDetails() {
+            getShopCart();
+            isActionBtnDisabled();
+            utilsService.registerFunction('isActionBtnDisabled', isActionBtnDisabled);
+        }
+
+        function getOptionAvailabilityClass(isAvailable) {
+            return isAvailable ? '' : 'not-available';
+        }
+
+        function isStepVisible(step) {
+            return step === $scope.step.current;
+        }
+
+        function getShopCart() {
+            $http({
+                method: 'POST',
+                url: 'shop/api/getShopCart'
+            }).then(setShopCartPackages, utilsService.onHttpError);
+        }
+
+        function setShopCartPackages(response) {
+            if (typeof response.data !== 'undefined') {
+                $scope.cartPackages = response.data;
+                $.each($scope.cartPackages, function (key, packageObject) {
+                    $scope.commercialLead = packageObject.commercialLead;
+                    packageObject.quantity = parseInt(packageObject.quantity);
+                    packageObject.extraFixedPrice = calculateTotalPrice(packageObject, 'fixedPrice');
+                    packageObject.extraRecurrentPrice = calculateTotalPrice(packageObject, 'recurrentPrice') + calculateTotalPrice(packageObject, 'servicesPrice');
+                });
+            }
+        }
+
+        function calculateTotalPrice(packageObject, priceKey) {
+            let prices = packageObject.options.map((option) => {
+                return option[priceKey];
+            });
+            prices = prices.concat(packageObject.additionalPackages.map((additionalPackage) => {
+                return additionalPackage[priceKey];
+            }));
+
+            return shopCartService.sumPrice(prices, 1);
+        }
+
+        function updateQuantity(packageObject) {
+            const params = $.param({
+                idPackage: packageObject.idPackage,
+                idCustomerInstance: packageObject.idCustomerInstance,
+                idPrice: packageObject.idPrice,
+                quantity: packageObject.quantity
+            });
+
+            $http({
+                method: 'POST',
+                url: 'shop/api/updateQuantity',
+                data: params
+            }).then(updateMessage, utilsService.onHttpError);
+        }
+
+        function removeFromCart(packageObject) {
+            const params = $.param({
+                idCart: packageObject.idCart
+            });
+
+            $http({
+                method: 'POST',
+                url: 'shop/api/removeFromCart',
+                data: params
+            }).then(updateMessage, utilsService.onHttpError);
+        }
+
+        function updateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('shop.messages.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('shop.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+
+                    if (messageObj.message !== 'NO_CHANGE') {
+                        utilsService.displayMessage(messageObj.code, translatedMessage);
+                    }
+
+                    if (messageObj.message === 'PACKAGE_REMOVED_FROM_CART') {
+                        getShopCart();
+                        shopCartService.updateShopCartCount();
+                    }
+
+                    if (messageObj.message === 'ORDER_PLACED') {
+                        getShopCart();
+                        shopCartService.updateShopCartCount();
+                        $scope.isOrderPlaced = true;
+                    }
+
+                    if (messageObj.message === 'FILE_UPLOADED') {
+                        getCartDocuments();
+                    }
+                });
+            }
+        }
+
+        function hasPrevStep() {
+            return $scope.prevButton !== '';
+        }
+
+        function showWarning(translateKey) {
+            const translatedMessage = $translate.instant('shop.messages.' + translateKey);
+            utilsService.displayMessage('warning', translatedMessage);
+        }
+
+        function goToNextStep(action, promiseFinished) {
+            if ($scope.step.isActionPromise && !promiseFinished) {
+                $scope.step.beforeAction();
+            } else {
+                const beforeActionSuccesfull = promiseFinished || $scope.step.beforeAction();
+
+                if (!$scope.isBtnDisabled && action === 'next' && beforeActionSuccesfull) {
+                    $scope.step.action();
+                }
+
+                if ($scope.step[action] !== '' && (beforeActionSuccesfull || action === 'prev')) {
+                    const newClassForActive = action === 'next' ? 'done-step' : 'inactive-step';
+                    const removeClassForNew = action === 'next' ? 'inactive-step' : 'done-step';
+                    $('.' + $scope.step.current).removeClass('active-step');
+                    $('.' + $scope.step.current).addClass(newClassForActive);
+                    $('.' + $scope.step[action]).removeClass(removeClassForNew);
+                    $('.' + $scope.step[action]).addClass('active-step');
+                    $scope.step = $scope.selectionSteps[$scope.step[action]];
+                    if (action === 'next' && $scope.step.next === '') {
+                        $scope.actionButton = 'SAVE';
+                        isActionBtnDisabled();
+                    } else {
+                        isActionBtnDisabled(false);
+                        $scope.actionButton = 'NEXT';
+                    }
+                    $scope.prevButton = (action === 'prev' && $scope.step.prev === '') ? '' : 'PREV';
+                }
+            }
+
+        }
+
+        function isCartValid() {
+            let isCartValid = {
+                qunatity: true,
+                available: true
+            };
+            $scope.cartPackages.forEach((cartPackage) => {
+                if (!cartPackage.quantity || cartPackage.quantity <= 0 || cartPackage.quantity > 100) {
+                    isCartValid.qunatity = false;
+                }
+
+                if (!isAvailable(cartPackage)) {
+                    isCartValid.available = false;
+                }
+            });
+
+            if (!isCartValid.qunatity) {
+                showWarning('INVALID_QUANTITY');
+            }
+
+            if (!isCartValid.available) {
+                showWarning('PRODUCT_NOT_AVAILABLE');
+            }
+
+            return isCartValid.qunatity && isCartValid.available;
+        }
+
+        function getInfo() {
+            if (isCartValid) {
+                Promise.all([getCustomerDetails(), getCountries(), getCartDocuments()]).then(values => {
+                    $scope.$evalAsync(() => {
+                        setCustomerDetails(values[0]);
+                        setCountries(values[1]);
+                    });
+                });
+            }
+        }
+
+        function getCustomerDetails() {
+            return $http({
+                method: 'POST',
+                url: 'shop/api/getCustomerDetails'
+            });
+        }
+
+        function setCustomerDetails(response) {
+            if (response.data) {
+                $scope.delivery = response.data.delivery ? response.data.delivery : $scope.delivery;
+                $scope.billing = response.data.billing ? response.data.billing : $scope.billing;
+                $scope.vatCode = response.data.vat ? response.data.vat : '';
+                $scope.countryNames = response.data.countryNames ? response.data.countryNames : $scope.countryNames;
+            }
+        }
+
+        function getCountries() {
+            return $http({
+                method: 'POST',
+                url: 'shop/api/getCountries'
+            });
+        }
+
+        function setCountries(response) {
+            $scope.countries = response.data || [];
+        }
+
+        function setBillingSameAsDeliveryAddress() {
+            if (Object.keys($scope.delivery).length) {
+                if ($scope.deliveryEqualsBilling.checked) {
+                    $scope.billing.detailedAddress = $scope.delivery.detailedAddress;
+                    $scope.billing.idCountrySelected = $scope.delivery.idCountrySelected;
+                    changeCountryName('billing', $scope.billing.idCountrySelected);
+                    $scope.billing.city = $scope.delivery.city;
+                    $scope.billing.zipCode = $scope.delivery.zipCode;
+                } else {
+                    $scope.billing.detailedAddress = '';
+                    $scope.billing.idCountrySelected = 0;
+                    $scope.billing.city = '';
+                    $scope.billing.zipCode = '';
+                }
+            }
+        }
+
+        function showHideDialog() {
+            $scope.$evalAsync(() => {
+                $scope.isDialogVisible = !$scope.isDialogVisible;
+            });
+        }
+
+        function placeOrder() {
+            $scope.isTermsChecked = shopCartService.getTermsCheckboxValue();
+            if ($scope.isTermsChecked) {
+                const params = $.param({
+                    cartPackages: JSON.stringify($scope.cartPackages),
+                    deliveryInfo: JSON.stringify($scope.delivery),
+                    billingInfo: JSON.stringify($scope.billing),
+                    details: JSON.stringify($scope.details)
+                });
+
+                $http({
+                    method: 'POST',
+                    url: 'shop/api/placeOrder',
+                    data: params
+                }).then(updateMessage, utilsService.onHttpError);
+            } else {
+                const errorMessage = $translate.instant('shop.messages.NOT_ACCEPTED_TERMS');
+                utilsService.displayMessage('error', errorMessage);
+            }
+        }
+
+        function changeCountryName(addrType, idCountry) {
+            addressType = addrType;
+            $http({
+                method: 'POST',
+                url: 'shop/api/getCountryDetailsById',
+                data: $.param({
+                    idCountry
+                })
+            }).then(setCountryName, utilsService.onHttpError);
+        }
+
+        function setCountryName(response) {
+            if (response && response.data.length > 0) {
+                countryNames[addressType] = response.data[0]['countryName'];
+            }
+            if ($scope.countryNames) {
+                $scope.countryNames[addressType] = countryNames[addressType];
+            } else {
+                $scope.countryNames = countryNames;
+            }
+        }
+
+        function isCartEmpty() {
+            return $scope.cartPackages.length === 0;
+        }
+
+        function getCartDocuments() {
+            let packagesIds = [];
+            $scope.cartPackages.forEach((pkg) => {
+                packagesIds.push(pkg.idPackage);
+            });
+            $http({
+                method: 'POST',
+                url: 'shop/api/getCartDocuments',
+                data: $.param({
+                    packages: JSON.stringify(packagesIds)
+                })
+            }).then(setDocuments, utilsService.onHttpError);
+        }
+
+        function setDocuments(response) {
+            if (response.data) {
+                $scope.documents[$scope.DOCUMENT_TYPES['TEMPLATE_QUESTINNAIRE']] = response.data[$scope.DOCUMENT_TYPES['TEMPLATE_QUESTINNAIRE']] ?
+                    response.data[$scope.DOCUMENT_TYPES['TEMPLATE_QUESTINNAIRE']] : [];
+
+                $scope.documents[$scope.DOCUMENT_TYPES['TEMPLATE_AGREEMENT']] = response.data[$scope.DOCUMENT_TYPES['TEMPLATE_AGREEMENT']] ?
+                    response.data[$scope.DOCUMENT_TYPES['TEMPLATE_AGREEMENT']] : [];
+            }
+        }
+
+        function isOrderDocumentUploaded(documentType) {
+            let areAllDocumentsUploaded = true;
+            $scope.documents[documentType].forEach((document) => {
+                if (!document.isUploaded) {
+                    areAllDocumentsUploaded = false;
+                }
+            });
+
+            if (!areAllDocumentsUploaded) {
+                showWarning('NOT_UPLOADED');
+            }
+
+            return areAllDocumentsUploaded;
+        }
+
+        function isQuestionaireUploaded() {
+            return isOrderDocumentUploaded(1);
+        }
+
+        function isAgreementUploaded() {
+            return isOrderDocumentUploaded(6);
+        }
+
+        function uploadFile(file, idPackage, documentType) {
+            const idDocumentType = documentType === 'questionnaire' ? $scope.DOCUMENT_TYPES['QUESTIONNAIRE'] : $scope.DOCUMENT_TYPES['AGREEMENT'];
+            if (file) {
+                Upload.upload({
+                    url: 'shop/api/uploadOrderDocument',
+                    method: 'POST',
+                    file: file,
+                    data: {
+                        idDocumentType,
+                        idPackage
+                    }
+                }).then(updateMessage, utilsService.onHttpError);
+            } else {
+                let translatedMessage = $translate.instant('shop.messages.NO_FILE');
+                utilsService.displayMessage('error', translatedMessage);
+            }
+        }
+
+        function isAvailable(packageObj) {
+            return packageObj.status === 'available' &&
+                parseInt(packageObj.isLinkEnabled) === 1 &&
+                packageObj.areOptionsAvailable &&
+                packageObj.areAdditionalAvailable;
+        }
+
+        function getAvailabilityMessage(packageObj) {
+            if (packageObj.status !== 'available') {
+                return 'PACKAGE_UNAVIALABLE';
+            }
+
+            if (parseInt(packageObj.isLinkEnabled) !== 1) {
+                return 'CL_UNAVIALABLE';
+            }
+
+            if (!packageObj.areOptionsAvailable) {
+                return 'OPTIONS_UNAVAILABLE';
+            }
+
+            if (!packageObj.areAdditionalAvailable) {
+                return 'ADDITIONAL_PACKAGES_UNAVAILABLE';
+            }
+
+            return '';
+        }
+
+        function setTermsCheckboxValue(termsAndConditionCheckbox) {
+            shopCartService.setTermsCheckboxValues(termsAndConditionCheckbox);
+        }
+
+        function getAlertClass(termsAndConditionCheckbox) {
+            return termsAndConditionCheckbox ? 'alert-success' : 'alert-warning';
+        }
+
+        function isActionBtnDisabled(isDisabled = true) {
+            $scope.isBtnDisabled = $scope.actionButton === 'SAVE' ? isDisabled : false;
+        }
+    }
+})();

api-wiaas/client/js/components/shop/shop-cart.service.js

@@ -0,0 +1,74 @@
+(function () {
+    global.dashModule
+        .service('shopCartService', ['$http', 'utilsService', shopCartService])
+        .controller('shopCartIconCtrl', ['$scope', 'shopCartService', shopCartIconCtrl]);
+
+    function shopCartService($http, utilsService) {
+        let shopCartItems = 0;
+        let isTermsAndConditionsChecked = false;
+        const calbackFunctions = [];
+
+        return {
+            updateShopCartCount,
+            registerCallbackFunction,
+            setTermsCheckboxValues,
+            getTermsCheckboxValue,
+            sumPrice
+        };
+
+        function updateShopCartCount() {
+
+            $http({
+                method: 'POST',
+                url: 'shop/api/getShopCartCount'
+            }).then((response) => {
+                if (response.data && response.data.newShopCartItemsCount) {
+                    shopCartItems = response.data.newShopCartItemsCount;
+                } else {
+                    shopCartItems = 0;
+                }
+
+                calbackFunctions.forEach((calbackFunction) => {
+                    calbackFunction(shopCartItems);
+                });
+            });
+        }
+
+        function registerCallbackFunction(newFunction) {
+            calbackFunctions.push(newFunction);
+        }
+
+        function setTermsCheckboxValues(isTermsChecked) {
+            isTermsAndConditionsChecked = isTermsChecked;
+            utilsService.executeRegisteredFunction('isActionBtnDisabled', !isTermsChecked);
+        }
+
+        function getTermsCheckboxValue() {
+            return isTermsAndConditionsChecked;
+        }
+
+        function sumPrice(values, quantity) {
+            let total = 0;
+            values.forEach((val) => {
+                total += parseFloat(val);
+            });
+
+            return quantity ? total * quantity : 0;
+        }
+    }
+
+    function shopCartIconCtrl($scope, shopCartService) {
+        $scope.shopCartItemsCount = shopCartService.shopCartItems;
+        $scope.hasPackagesInCart = hasPackagesInCart;
+        shopCartService.registerCallbackFunction(updateCartValue);
+        shopCartService.updateShopCartCount();
+
+        function updateCartValue(newCartValue) {
+            $scope.shopCartItemsCount = newCartValue;
+        }
+
+        function hasPackagesInCart() {
+            return $scope.shopCartItemsCount > 0;
+        }
+    }
+})();

api-wiaas/client/js/components/shop/shop-package-details.directive.js

@@ -0,0 +1,305 @@
+(function () {
+    global.dashModule
+        .controller('shopPackageDetailsCtrl', ['$scope', '$http', '$', '$translate', '$sce', 'utilsService', 'shopCartService', shopPackageDetailsController])
+        .directive('shopPackageDetails', [shopPackageDetailsDirective]);
+
+    function shopPackageDetailsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'shop/html/shopPackageDetailsTemplate'
+        };
+    }
+
+    function shopPackageDetailsController($scope, $http, $, $translate, $sce, utilsService, shopCartService) {
+        $scope.onPriceSelect = onPriceSelect;
+        $scope.getShopPackageDetails = getShopPackageDetails;
+        $scope.addToCart = addToCart;
+        $scope.sumPrices = sumPrices;
+        $scope.showInfo = showInfo;
+        $scope.getPriceClass = getPriceClass;
+        $scope.getOptionClass = getOptionClass;
+        $scope.getAdditionalClass = getAdditionalClass;
+        $scope.selectOption = selectOption;
+        $scope.getOptionPriceText = getOptionPriceText;
+        $scope.getFixedPrice = getFixedPrice;
+        $scope.getRecurrentPrice = getRecurrentPrice;
+        $scope.selectAdditional = selectAdditional;
+        $scope.hasOptions = hasOptions;
+        $scope.renderHtml = renderHtml;
+        $scope.showOptionInfo = showOptionInfo;
+        $scope.selectedPackage = {};
+        $scope.selectedOptions = {
+            other: {}
+        };
+        $scope.idCommercialLead = 0;
+
+        function renderHtml(htmlCode) {
+            return $sce.trustAsHtml(htmlCode);
+        }
+
+        function getShopPackageDetails() {
+            const idPackage = global.getParameterByName('idPackage') || 0;
+            const idCommercialLead = global.getParameterByName('idCommercialLead') || 0;
+            const params = $.param({
+                idCommercialLead,
+                idPackage
+            });
+
+            $http({
+                method: 'POST',
+                url: 'shop/api/getShopPackageDetails',
+                data: params
+            }).then(setShopPackageDetails, utilsService.onHttpError);
+        }
+
+        function setShopPackageDetails(response) {
+            if (response.data && response.data.prices && response.data.packageInfo && response.data.commercialLead) {
+                $scope.country = response.data.country;
+                $scope.selectedPackage = response.data.packageInfo;
+                $scope.selectedPackage.documents = response.data.documents;
+                $scope.selectedPackage.prices = response.data.prices || [];
+                $scope.selectedPackage.commercialLead = response.data.commercialLead || [];
+                $scope.selectedPackage.groups = response.data.groups || [];
+                $scope.selectedPackage.additionalPackages = response.data.additionalPackages || [];
+                if ($scope.selectedPackage.prices[0]) {
+                    $scope.selectedOptions.idPaymentType = $scope.selectedPackage.prices[0].idPaymentType;
+                    $scope.selectedOptions.price = $scope.selectedPackage.prices[0];
+                }
+                $.each($scope.selectedPackage.groups, (key, group) => {
+                    const defaultValue = group.options.find((value) => {
+                        return parseInt(value.isDefault) === 1;
+                    });
+                    $scope.selectedOptions.other[group.idGroup] = defaultValue ? defaultValue.idOptionPackage : group.options[0].idOptionPackage;
+                });
+
+                $scope.selectedOptions.additionalPackages = {};
+                updateAvailability();
+            }
+        }
+
+        function hasOptions() {
+            return Object.keys($scope.selectedPackage.groups).length > 0;
+        }
+
+        function getPriceClass(price) {
+            return price === $scope.selectedOptions.price ? 'selected-price' : '';
+        }
+
+        function getOptionClass(key, value) {
+            return value === $scope.selectedOptions.other[key] ? 'selected-option' : '';
+        }
+
+        function getAdditionalClass(key) {
+            return $scope.selectedOptions.additionalPackages[key] ? 'selected-option' : '';
+        }
+
+        function updateAvailability() {
+            $.each($scope.selectedPackage.groups, (key, group) => {
+                group.options.forEach((value) => {
+                    value.isAvailable = getSelectedPriceForOption(value) ? true : false;
+                    value.isInfoBoxVisible = false;
+                });
+            });
+            $scope.selectedPackage.additionalPackages.forEach((value) => {
+                value.isAvailable = getSelectedPriceForOption(value) ? true : false;
+                value.isInfoBoxVisible = false;
+            });
+        }
+
+        function onPriceSelect(idPaymentType) {
+            $scope.selectedOptions.idPaymentType = idPaymentType;
+            $scope.selectedOptions.price = $scope.selectedPackage.prices.filter(value => {
+                return value.idPaymentType === idPaymentType;
+            })[0];
+            updateAvailability();
+        }
+
+        function showUnavailableMessage(unavailablePackages) {
+            let translatedMessage = $translate.instant('shop.messages.UNAVAILABLE_PACKAGES');
+            unavailablePackages.forEach((unavailablePacakgeName) => {
+                translatedMessage += ' ' + unavailablePacakgeName + ',';
+            });
+            translatedMessage = translatedMessage.slice(0, -1);
+            utilsService.displayMessage('warning', translatedMessage);
+        }
+
+        function addToCart() {
+            const unavailablePackages = [];
+            const extraPackages = [];
+            Object.keys($scope.selectedOptions.additionalPackages).forEach((idAdditionalPackage) => {
+                if ($scope.selectedOptions.additionalPackages[idAdditionalPackage] === true) {
+                    const extraPackage = $scope.selectedPackage.additionalPackages.find((additionalPackage) => {
+                        return additionalPackage.idAdditionalPackage === idAdditionalPackage;
+                    });
+
+                    if (!extraPackage.isAvailable) {
+                        unavailablePackages.push(extraPackage.packageName);
+                    }
+                    extraPackages.push(idAdditionalPackage);
+                }
+            });
+
+            $.each($scope.selectedOptions.other, (key, idOptionValue) => {
+                let extraPackage;
+                $.each($scope.selectedPackage.groups, (key, group) => {
+                    if(extraPackage){
+                        return;
+                    }
+                    extraPackage = group.options.find((optionPackage) => {
+                        return optionPackage.idOptionPackage === idOptionValue;
+                    });
+
+                });
+                if (!extraPackage.isAvailable) {
+                    unavailablePackages.push(extraPackage.optionName);
+                }
+                extraPackages.push(idOptionValue);
+            });
+
+            if (unavailablePackages.length) {
+                showUnavailableMessage(unavailablePackages);
+            } else {
+                const params = $.param({
+                    idPackage: $scope.selectedPackage.idPackage,
+                    idPrice: $scope.selectedOptions.price.idPrice,
+                    options: JSON.stringify(extraPackages)
+                });
+
+                $http({
+                    method: 'POST',
+                    url: 'shop/api/addToCart',
+                    data: params
+                }).then(updateMessage, utilsService.onHttpError);
+            }
+        }
+
+        function updateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('shop.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if (messageObj.message === 'PACKAGE_ADDED') {
+                        shopCartService.updateShopCartCount();
+                    }
+                });
+            }
+        }
+
+        function sumPrices(values) {
+            let total = 0;
+            values.forEach((val) => {
+                total += parseFloat(val);
+            });
+
+            return total;
+        }
+
+        function showInfo(price) {
+            price.isInfoVisible = !price.isInfoVisible;
+        }
+
+        function selectOption(key, value) {
+            $scope.selectedOptions.other[key] = value;
+        }
+
+        function selectAdditional(key) {
+            $scope.selectedOptions.additionalPackages[key] = !$scope.selectedOptions.additionalPackages[key];
+        }
+
+        function getSelectedPriceForOption(optionPackage) {
+            return optionPackage.prices.find((price) => {
+                return price.idPaymentType === $scope.selectedOptions.idPaymentType;
+            });
+        }
+
+        function getOptionPriceText(name, optionPackage) {
+            let optionPriceText = name + ' ';
+            const selectedPrice = getSelectedPriceForOption(optionPackage);
+
+            if (!selectedPrice) {
+                optionPriceText += '<span class="not-available">(' + $translate.instant('shop.extra.NOT_AVAILABLE') + ')</span>';
+
+                return $sce.trustAsHtml(optionPriceText);
+            }
+
+            const fixedPrice = selectedPrice.fixedExtra + ' ' + $scope.country.currency;
+            const recurentPrice = sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]) + ' ' + $scope.country.currency;
+
+            if (parseFloat(fixedPrice) === 0 && parseFloat(recurentPrice) === 0) {
+                optionPriceText += '(' + $translate.instant('shop.extra.NO_COST') + ')';
+
+                return $sce.trustAsHtml(optionPriceText);
+            }
+
+            optionPriceText += parseFloat(recurentPrice) === 0 ? fixedPrice : fixedPrice + ' + (' + recurentPrice + ' / ' + selectedPrice.periodUnit + ' )';
+
+            return $sce.trustAsHtml(optionPriceText);
+        }
+
+        function getFixedPrice() {
+            let totalPrice = $scope.selectedOptions.price.fixedExtra;
+            $.each($scope.selectedOptions.other, (idGroup, idOptionPackage) => {
+                const selectedOption = $scope.selectedPackage.groups[idGroup].options.find((option) => {
+                    return option.idOptionPackage === idOptionPackage;
+                });
+                const selectedPrice = selectedOption.prices.find((price) => {
+                    return price.idPaymentType === $scope.selectedOptions.idPaymentType;
+                });
+                if (selectedPrice && selectedPrice.fixedExtra) {
+                    totalPrice = sumPrices([totalPrice, selectedPrice.fixedExtra]);
+                }
+            });
+
+            $.each($scope.selectedOptions.additionalPackages, (idAdditionalPackage, value) => {
+                if (value === true) {
+                    const selectedAdditional = $scope.selectedPackage.additionalPackages.find((option) => {
+                        return option.idAdditionalPackage === idAdditionalPackage;
+                    });
+                    const selectedPrice = selectedAdditional.prices.find((price) => {
+                        return price.idPaymentType === $scope.selectedOptions.idPaymentType;
+                    });
+                    if (selectedPrice && selectedPrice.fixedExtra) {
+                        totalPrice = sumPrices([totalPrice, selectedPrice.fixedExtra]);
+                    }
+                }
+            });
+
+            return totalPrice;
+        }
+
+        function getRecurrentPrice() {
+            let totalPrice = sumPrices([$scope.selectedOptions.price.recurentExtra, $scope.selectedOptions.price.servicesExtra]);
+            $.each($scope.selectedOptions.other, (idGroup, idOptionPackage) => {
+                const selectedOption = $scope.selectedPackage.groups[idGroup].options.find((option) => {
+                    return option.idOptionPackage === idOptionPackage;
+                });
+                const selectedPrice = selectedOption.prices.find((price) => {
+                    return price.idPaymentType === $scope.selectedOptions.idPaymentType;
+                });
+                if (selectedPrice && selectedPrice.recurentExtra && selectedPrice.servicesExtra) {
+                    totalPrice = sumPrices([totalPrice, selectedPrice.recurentExtra, selectedPrice.servicesExtra]);
+                }
+            });
+
+            $.each($scope.selectedOptions.additionalPackages, (idAdditionalPackage, value) => {
+                if (value === true) {
+                    const selectedAdditional = $scope.selectedPackage.additionalPackages.find((option) => {
+                        return option.idAdditionalPackage === idAdditionalPackage;
+                    });
+                    const selectedPrice = selectedAdditional.prices.find((price) => {
+                        return price.idPaymentType === $scope.selectedOptions.idPaymentType;
+                    });
+                    if (selectedPrice && selectedPrice.recurentExtra && selectedPrice.servicesExtra) {
+                        totalPrice = sumPrices([totalPrice, selectedPrice.recurentExtra, selectedPrice.servicesExtra]);
+                    }
+                }
+            });
+
+            return totalPrice;
+        }
+
+        function showOptionInfo(optionPacakge) {
+            optionPacakge.isInfoBoxVisible = !optionPacakge.isInfoBoxVisible;
+        }
+    }
+})();

api-wiaas/client/js/components/shop/shop-package-search.directive.js

@@ -0,0 +1,38 @@
+(function () {
+    global.dashModule
+        .controller('shopPackageSearchCtrl', ['$scope', shopPackageSearchCtrl])
+        .directive('shopPackageSearch', [shopPackageSearchDirective]);
+
+    function shopPackageSearchDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'shop/html/shopPackageSearchTemplate'
+        };
+    }
+
+    function shopPackageSearchCtrl($scope) {
+        $scope.searchString = global.getParameterByName('search') || '';
+        $scope.searchInPage = searchInPage;
+        $scope.clearSearch = clearSearch;
+        $scope.updateUrl = updateUrl;
+
+        function updateUrl(){
+            const url = $scope.searchString ? '?search=' + $scope.searchString : '?';
+            history.pushState({
+                search: $scope.searchString
+            }, null, url);
+        }
+
+        function searchInPage(event){
+
+            if((event.type && event.type === 'click') || (event.which && event.which === 13)){
+                window.location = 'shop?search=' + $scope.searchString;
+            }
+        }
+
+        function clearSearch(){
+            $scope.searchInPage = '';
+            window.location = 'shop';
+        }
+    }
+})();

api-wiaas/client/js/components/shop/shop-packages.directive.js

@@ -0,0 +1,63 @@
+(function () {
+    global.dashModule
+        .controller('shopPackagesCtrl', ['$scope', '$http', '$', 'utilsService', shopPackagesController])
+        .directive('shopPackages', [shopPackagesDirective]);
+
+    function shopPackagesDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'shop/html/shopPackagesTemplate'
+        };
+    }
+
+    function shopPackagesController($scope, $http, $, utilsService) {
+        $scope.getShopPackages = getShopPackages;
+        $scope.getComemrcialLeads = getComemrcialLeads;
+        $scope.selectCommercialLead = selectCommercialLead;
+        $scope.isComemrcialLeadSelected = isComemrcialLeadSelected;
+        $scope.commercialLeads = [];
+        $scope.shopPackages = [];
+        $scope.idCommercialLead = 0;
+        $scope.commercialLeadName = '';
+
+        function getComemrcialLeads(){
+            $http({
+                method: 'POST',
+                url: 'shop/api/getAllCommercialLeads'
+            }).then(setCommercialLeads, utilsService.onHttpError);
+        }
+
+        function setCommercialLeads(response){
+            if (response.data.length > 0) {
+                $scope.commercialLeads = response.data;
+                selectCommercialLead($scope.commercialLeads[0]);
+            }
+        }
+
+        function selectCommercialLead(comemrcialLead){
+            $scope.idCommercialLead = comemrcialLead.idCommercialLead;
+            $scope.commercialLeadName = comemrcialLead.commercialLeadName;
+            getShopPackages();
+        }
+
+        function isComemrcialLeadSelected(idCommercialLead){
+            return $scope.idCommercialLead === idCommercialLead ? 'selected-cl' : '';
+        }
+
+        function getShopPackages() {
+            const params = $.param({
+                idCommercialLead: $scope.idCommercialLead,
+                search: global.getParameterByName('search') || ''
+            });
+            $http({
+                method: 'POST',
+                url: 'shop/api/getShopPackages',
+                data: params
+            }).then(setShopPackages, utilsService.onHttpError);
+        }
+
+        function setShopPackages(response) {
+            $scope.shopPackages = response.data.length > 0 ? response.data : [];
+        }
+    }
+})();

api-wiaas/client/js/components/shop/shop.directive.js

@@ -0,0 +1,38 @@
+(function () {
+    global.dashModule
+        .controller('shopCtrl', ['$scope', shopController])
+        .directive('shop', [shopDirective]);
+
+    function shopDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'shop/html/shopTemplate'
+        };
+    }
+
+    function shopController($scope) {
+        $scope.isSubmoduleVisible = isSubmoduleVisible;
+        $scope.setSubModule = setSubModule;
+        $scope.subModule = global.getParameterByName('subModule') || 'shop';
+        addUrlListener();
+
+        function addUrlListener() {
+            window.addEventListener('popstate', function (e) {
+                $scope.$evalAsync($scope => {
+                    $scope.subModule = e.state ? e.state.subModule : 'shop';
+                });
+            }, false);
+        }
+
+        function setSubModule($event) {
+            $scope.subModule = $event.currentTarget.attributes.subModule.value;
+            history.pushState({
+                subModule: $scope.subModule
+            }, null, '?subModule=' + $scope.subModule);
+        }
+
+        function isSubmoduleVisible(subModule) {
+            return subModule === $scope.subModule;
+        }
+    }
+})();

api-wiaas/client/js/components/shop/shop.less

@@ -0,0 +1,402 @@
+@background-layer: rgba(255, 255, 255, 0.8);
+
+.ui-dialog-titlebar-close{
+    display: none;
+}
+
+#web-shop-layer {
+    padding-bottom: 2%;
+
+    .shop-packages-found {
+        font-size: 70%;
+    }
+
+    .shop-package-layer {
+        position: relative;
+        margin-top: 2%;
+        background: @background-layer;
+        padding: 3%;
+        height: 200px;
+    }
+
+    .shop-package-title {
+        font-size: 120%;
+        text-align: center;
+        font-weight: bold;
+    }
+
+    .shop-package-reference {
+        margin-bottom: 5%;
+        text-align: center;
+        font-weight: bold;
+    }
+
+    .shop-package-details-btn {
+        position: absolute;
+        bottom: 5%;
+        right: 5%;
+    }
+
+    .shop-package-extra {
+        position: absolute;
+        bottom: 5%;
+        left: 5%;
+    }
+
+    .shop-package-label {
+        display: inline-block;
+        font-weight: bold;
+    }
+
+    .shop-package-text {
+        display: inline-block;
+    }
+
+    .commercial-leads-layer {
+        margin: 1% 0;
+    }
+
+    .comemrcial-lead {
+        margin-right: 1%;
+    }
+
+    .selected-cl {
+        color: #FFFF00;
+    }
+}
+
+#shop-package-details-layer {
+    .shop-package-details-layer {
+        position: relative;
+        background: @background-layer;
+        padding: 1% 3%;
+        margin-top: 1%;
+    }
+
+    .shop-package-title {
+        font-size: 160%;
+        text-align: center;
+        font-weight: bold;
+    }
+
+    .shop-package-reference {
+        margin-bottom: 5%;
+        text-align: center;
+        font-weight: bold;
+    }
+
+    .shop-package-label {
+        display: inline-block;
+        font-weight: bold;
+    }
+
+    .shop-package-text {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .shop-package-full-description {
+        margin-top: 3%;
+    }
+
+    .shop-package-details-country {
+        margin-top: 3%;
+    }
+
+    .selection-price {
+        font-size: 160%;
+        color: #E42217;
+    }
+
+    .shop-package-prices, .shop-package-options {
+        margin-top: 3%;
+        padding: 1%;
+        border-bottom: 2px solid #000;
+    }
+
+    .package-option {
+        margin-top: 2%;
+    }
+
+    .package-option-input, .price-type-option{
+        cursor: pointer;
+    }
+
+    .package-option-checkbox{
+        cursor: pointer;
+        font-size: 120%;
+    }
+
+    .option-value {
+        padding: 3px;
+        margin-right: 3%;
+    }
+    .option-value-text, .shop-package-pay-type{
+        cursor: pointer;
+    }
+
+    .option-value:hover, .shop-package-pay-type:hover {
+        background: rgba(59, 185, 255, 0.5);
+        border-radius: 5px;
+    }
+
+    .add-to-cart-btn {
+        margin-top: 5%;
+    }
+
+    .shop-pacakge-option-agreement {
+        width: 20%;
+    }
+
+    .shop-pacakge-option-price {
+        margin-left: 5%;
+    }
+
+    .shop-packages-details-cl {
+        border-top: 2px solid #000;
+        margin-top: 2%;
+        padding-top: 2%;
+    }
+
+    .back-btn-layer {
+        margin-top: 2%;
+    }
+
+    .price-info-btn {
+        color: #337ab7;
+        cursor: pointer;
+        margin-left: 5px;
+    }
+
+    .price-info-title {
+        font-weight: bold;
+    }
+
+    .selected-price {
+        font-weight: bold;
+    }
+
+    .selected-option{
+        font-weight: bold;
+    }
+
+    .shop-package-details-documents{
+        margin-top: 3%;
+    }
+
+    .options-header {
+        margin-top: 2%;
+    }
+
+    .not-available{
+        font-weight: bold;
+        color: #FFA62F;
+    }
+}
+
+#shop-package-search-btn {
+    cursor: pointer;
+}
+
+#shop-package-serach-input {
+    background: @background-layer;
+    border-radius: 5px;
+    margin: 0;
+    padding: 0 5px;
+    border: 1px solid #2e6da4;
+}
+
+#shop-package-clear-btn {
+    color: #E42217;
+    cursor: pointer;
+}
+
+#shop-cart-container {
+    background: @background-layer;
+    padding-left: 2%;
+
+    .address-type {
+        font-size: 150%;
+        margin-bottom: 1%;
+    }
+}
+
+#shop-cart {
+    .not-available {
+        display: inline-block;
+        color: #FFA62F;
+    }
+
+    .shop-cart-item {
+        padding: 1% 0;
+        border-bottom: 2px solid #337ab7;
+    }
+
+    .shop-item-name {
+        font-weight: bold;
+    }
+
+    .shop-item-option {
+        font-weight: normal;
+        font-size: 90%;
+    }
+
+    .shop-item-remove {
+        font-size: 150%;
+        cursor: pointer;
+        color: #E42217;
+    }
+
+    .show-customer-addresses {
+        .label-value-pair {
+            margin-bottom: 1%;
+        }
+
+        .address-area {
+            height: 80px;
+        }
+    }
+
+    .drop-box {
+        color: #337ab7;
+        border: 5px dashed #337ab7;
+        border-radius: 10px;
+        text-align: center;
+        vertical-align: middle;
+        font-size: 200%;
+        padding: 10% 0;
+        margin-top: 2%;
+    }
+
+    .dragover {
+        border: 5px dashed #4CC417;
+    }
+
+    .document-layer {
+        padding: 1% 0;
+        border-bottom: 2px solid #337ab7;
+    }
+
+    .upload-status {
+        font-size: 200%;
+        padding: 10% 0;
+        margin-top: 2%;
+    }
+
+    .file-uploaded {
+        color: #4CC417;
+    }
+
+    .no-file-uploaded {
+        color: #800080;
+    }
+
+    .shop-terms-conditions {
+        padding-left: 2%;
+        font-size: 135%;
+        font-weight: bold;
+        width: 98%;
+    }
+
+    .shop-item-options, .shop-item-additional-packages {
+        margin-top: 1%;
+        margin-left: 4%;
+        font-size: 90%;
+    }
+}
+
+#show-order-info-headers {
+    padding-top: 1%;
+    padding-bottom: 2%;
+
+    .step {
+        display: inline-block;
+        padding: 1%;
+        border-radius: 5px;
+        cursor: default;
+    }
+
+    .active-step {
+        background: #2184be;
+        color: #FFF;
+    }
+
+    .inactive-step {
+        background: #eee;
+        color: #aaa;
+    }
+
+    .done-step {
+        background: #9dc8e2;
+        color: #FFF;
+    }
+
+    .step-link {
+        display: inline-block;
+        background: #2184be;
+        width: 30px;
+        height: 2px;
+    }
+}
+
+#order-action-buttons {
+    padding-top: 2%;
+    padding-bottom: 3%;
+
+    .prev-btn {
+        float: right;
+        margin-right: 3%;
+    }
+
+    .next-btn {
+        float: right;
+        margin-right: 5%;
+    }
+
+    .save-btn {
+        float: right;
+        margin-right: 5%;
+    }
+}
+
+#cart-informations-review {
+    .package-details {
+        margin-top: 1%;
+    }
+
+    .package-details-list {
+        margin-left: 10%;
+        margin-top: 1%;
+    }
+
+    .label-value-pair {
+        display: block;
+    }
+
+    .value-pair {
+        display: inline;
+        margin-left: 3%;
+    }
+
+    .cart-review-title {
+        color: #045FB4;
+    }
+
+    .package-name-review {
+        font-weight: bold;
+    }
+}
+
+.shop-message{
+    padding-left: 2%;
+    font-size: 130%;
+}
+
+#shop-cart-empty-container {
+    background: @background-layer;
+}
+
+.mail-order-package-detail {
+    padding-left: 35px;
+    display: block;
+}

api-wiaas/client/js/components/sortable/sortable.directive.js

@@ -0,0 +1,41 @@
+(function () {
+    global.dashModule
+        .directive('sortableSteps', ['$timeout', '$', sortableDirective]);
+
+    function sortableDirective($timeout, $) {
+        return {
+            restrict: 'A',
+            scope: {
+                processSteps: '=',
+                startDragProcess: '=',
+                endDragProcess: '='
+            },
+            link: function ($scope, $element) {
+                $timeout(function () {
+                    $('.rearrange-steps').sortable({
+                        connectWith: 'ul',
+                        start: function (event, ui) {
+                            var startPos = ui.item.index();
+                            ui.item.data('start_pos', startPos);
+                            $scope.startDragProcess(event, ui);
+                        },
+                        update: function (event, ui) {
+                            var startPosition = ui.item.data('start_pos');
+                            var endPosition = ui.item.index();
+                            const movedStep = $scope.processSteps[startPosition];
+                            $scope.processSteps.splice(startPosition, 1);
+                            $scope.processSteps.splice(endPosition, 0, movedStep);
+                            $scope.endDragProcess();
+                        },
+                        stop: function() {
+                            $scope.endDragProcess();
+                        }
+                    });
+                    $('.rearrange-steps').sortable('refreshPositions');
+                    $($element).disableSelection();
+                });
+
+            }
+        };
+    }
+})();

api-wiaas/client/js/components/suppliers/show-product-documents.directive.js

@@ -0,0 +1,42 @@
+(function () {
+    global.dashModule
+        .controller('showProductDocumentsCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', showProductDocumentsCtrl])
+        .directive('showProductDocuments', [showProductDocumentsDirective]);
+
+    function showProductDocumentsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'suppliers/html/showProductDocumentsTemplate'
+        };
+    }
+
+    function showProductDocumentsCtrl($scope, $http, $, $translate, utilsService) {
+        $scope.data = $scope.data || {};
+        $scope.removeProductDocument = removeProductDocument;
+
+        function removeProductDocument(idDocument){
+            const params = $.param({
+                idDocument
+            });
+            const url = 'suppliers/api/removeProductDocument';
+
+            $http({
+                method: 'POST',
+                url: url,
+                data: params
+            }).then(showUpdateMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    let translatedMessage = $translate.instant('suppliers.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if (typeof $scope.onUpdated !== 'undefined' && messageObj.code === 'success') {
+                        $scope.onUpdated();
+                    }
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/suppliers/suppliers-add-edit.directive.js

@@ -0,0 +1,52 @@
+(function () {
+    global.dashModule
+        .controller('suppliersAddEditCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', suppliersAddEditCtrl])
+        .directive('suppliersAddEdit', [suppliersAddEditDirective]);
+
+    function suppliersAddEditDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'suppliers/html/suppliersAddEditFormTemplate'
+        };
+    }
+
+    function suppliersAddEditCtrl($scope, $http, $, $translate, utilsService) {
+        $scope.suppliersFormInit = suppliersFormInit;
+        $scope.addEditSupplier = addEditSupplier;
+        $scope.data = $scope.data || {};
+
+        function suppliersFormInit(action) {
+            $scope.formAction = action;
+        }
+
+        function addEditSupplier() {
+            const params = $.param({
+                idSupplier: $scope.data.id || 0,
+                name: $scope.data.name || '',
+                phone: $scope.data.phone || '',
+                mail: $scope.data.mail || ''
+            });
+            const url = 'suppliers/api/' + $scope.formAction.toLowerCase() + 'Supplier';
+
+            $http({
+                method: 'POST',
+                url: url,
+                data: params
+            }).then(showUpdateMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('suppliers.tables.headers.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('suppliers.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if (typeof $scope.onUpdated !== 'undefined' && messageObj.code === 'success') {
+                        $scope.onUpdated();
+                    }
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/suppliers/suppliers-products-add-edit.directive.js

@@ -0,0 +1,123 @@
+(function () {
+    global.dashModule
+        .controller('suppliersProductsAddEditCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', suppliersProductsAddEditCtrl])
+        .directive('suppliersProductsAddEdit', [suppliersProductsAddEditDirective]);
+
+    function suppliersProductsAddEditDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'suppliers/html/suppliersProductsAddEditFormTemplate'
+        };
+    }
+
+    function suppliersProductsAddEditCtrl($scope, $http, $, $translate, utilsService) {
+        $scope.productsFormInit = productsFormInit;
+        $scope.addEditSupplierProducts = addEditSupplierProducts;
+        $scope.isAddAction = isAddAction;
+        $scope.getProductCategories = getProductCategories;
+        $scope.isPriceRecurring = isPriceRecurring;
+        $scope.data = $scope.data || {};
+        $scope.virtual = $scope.virtual || {};
+        $scope.countries = [];
+        $scope.suppliers = [];
+        $scope.productCategories = [];
+        $scope.selectedCategory = '';
+
+        function productsFormInit(action) {
+            getCountries();
+            getSuppliers();
+            getProductCategories();
+            $scope.formAction = action;
+        }
+
+        function isAddAction() {
+            return $scope.formAction === 'ADD';
+        }
+
+        function isPriceRecurring() {
+            return $scope.data.isPriceRecurring === '1';
+        }
+
+        function getCountries() {
+            const params = $.param({getArray : true});
+            $http({
+                method: 'POST',
+                data: params,
+                url: 'countries/api/getAllCountries'
+
+            }).then(showCountries, utilsService.onHttpError);
+        }
+
+        function showCountries(response) {
+            $scope.countries = response.data;
+        }
+
+        function getSuppliers() {
+            $http({
+                method: 'GET',
+                url: 'suppliers/api/getSuppliers'
+
+            }).then(showSuppliers, utilsService.onHttpError);
+        }
+
+        function showSuppliers(response) {
+            $scope.suppliers = response.data.data;
+        }
+
+        function getProductCategories(selectedCategory = '') {
+            $scope.selectedCategory = selectedCategory;
+            $http({
+                method: 'GET',
+                url: 'suppliers/api/getProductCategories'
+            }).then(showProductCategories, utilsService.onHttpError);
+        }
+
+        function showProductCategories(response) {
+            $scope.productCategories = response.data;
+
+            if ($scope.selectedCategory) {
+                const categorySelected = $scope.productCategories.find(productTypes => {
+                    return productTypes.category === $scope.selectedCategory;
+                });
+
+                $scope.data.productCategory = {
+                    id: categorySelected.id
+                };
+            }
+        }
+
+        function addEditSupplierProducts() {
+            const params = $.param($scope.data);
+            const url = 'suppliers/api/' + $scope.formAction.toLowerCase() + 'SupplierProduct';
+
+            $http({
+                method: 'POST',
+                url: url,
+                data: params
+            }).then(showUpdateMessage, utilsService.onHttpError);
+        }
+
+        function showUpdateMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('suppliers.tables.headers.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('suppliers.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if (messageObj.code === 'success') {
+                        if (typeof $scope.onUpdated !== 'undefined') {
+                            $scope.onUpdated();
+                        } else {
+                            Object.keys($scope.data).forEach(productData => {
+                                if (productData !== 'idCountry' && productData !== 'idSupplier') {
+                                    $scope.data[productData] = '';
+                                }
+                            });
+                        }
+                    }
+
+                });
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/suppliers/suppliers.directive.js

@@ -0,0 +1,225 @@
+(function () {
+    global.dashModule
+        .controller('suppliersController', ['$scope', '$rootScope', '$compile', '$http', '$', 'dataTableHelper', 'utilsService', suppliersController])
+        .directive('suppliers', [suppliersDirective]);
+
+    function suppliersDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'suppliers/html/suppliersTemplate'
+        };
+    }
+
+    function suppliersController($scope, $rootScope, $compile, $http, $, dataTableHelper, utilsService) {
+        const translationPath = 'suppliers.tables.headers.';
+        $scope.subModule = 'suppliers';
+        $scope.setSubModule = setSubModule;
+        $scope.isSubmoduleVisible = isSubmoduleVisible;
+        $scope.getSuppliers = getSuppliers;
+        $scope.getSuppliersProducts = getSuppliersProducts;
+
+        function setSubModule($event) {
+            $scope.subModule = $event.currentTarget.attributes.subModule.value;
+        }
+
+        function isSubmoduleVisible(subModule) {
+            return subModule === $scope.subModule;
+        }
+
+        function getSuppliersProducts() {
+            $http({
+                method: 'GET',
+                url: 'suppliers/api/getSuppliersProductsHeaders'
+            }).then(showSuppliersProducts, utilsService.onHttpError);
+        }
+
+        function showSuppliersProducts(response) {
+            if (response.data.length > 0) {
+                const params = {
+                    selector: '#suppliers-products',
+                    url: 'suppliers/api/getSuppliersProducts',
+                    hasEdit: true,
+                    extraTableOptions: {
+                        responsive: false,
+                        order: [
+                            [1, 'asc']
+                        ]
+                    }
+                };
+                dataTableHelper.generateColumns(response.data, translationPath, dataTableHelper.showTable, params, formatSuppliersProductsColumn)
+                    .then((table) => {
+                        addEditEvent(table, params.selector, 'suppliers-products-add-edit', 'suppliersProductsAddEditCtrl', getSuppliersProducts);
+                        addShowDocumentsEvent(table, params.selector, getSuppliersProducts);
+                    });
+            }
+        }
+
+        function getSuppliers() {
+            $http({
+                method: 'GET',
+                url: 'suppliers/api/getSuppliersHeaders',
+            }).then(showSuppliers, utilsService.onHttpError);
+        }
+
+        function showSuppliers(response) {
+            if (response.data.length > 0) {
+                const params = {
+                    selector: '#suppliers',
+                    url: 'suppliers/api/getSuppliers',
+                    hasEdit: true,
+                    extraTableOptions: {
+                        responsive: false,
+                        order: [
+                            [1, 'asc']
+                        ]
+                    }
+                };
+                dataTableHelper.generateColumns(response.data, translationPath, dataTableHelper.showTable, params, formatSuppliersColumn)
+                    .then((table) => {
+                        addEditEvent(table, params.selector, 'suppliers-add-edit', 'suppliersAddEditCtrl', getSuppliers);
+                    });
+            }
+        }
+
+        function addShowDocumentsEvent(table, containerSelector, callback) {
+            $(containerSelector + ' tbody').off('click', 'td.show-documents');
+            $(containerSelector + ' tbody').on('click', 'td.show-documents', function () {
+                var tr = $(this).closest('tr');
+                var row = table.row(tr);
+
+                if (row.child.isShown()) {
+                    row.child.hide();
+                    tr.removeClass('shown');
+                } else {
+                    const newScope = $rootScope.$new();
+                    newScope.data = $.extend(true, {}, row.data());
+                    const directiveHtml = '<show-product-documents class="product-documents" ng-controller="showProductDocumentsCtrl" ></show-product-documents>';
+                    const layerId = newScope.data.idProduct + '-' + newScope.data.idSupplier + '-' + newScope.data.idCountry;
+                    newScope.formAction = 'EDIT';
+                    newScope.onUpdated = callback;
+                    const layerSelector = 'edit-layer-' + layerId;
+                    row.child('<div class="edit-tr" id="' + layerSelector + '"></div>').show();
+
+                    const comp = $compile($(directiveHtml))(newScope);
+                    newScope.$apply();
+
+                    $('#' + layerSelector).append(comp);
+                    tr.addClass('shown');
+                }
+            });
+        }
+
+        function addEditEvent(table, containerSelector, directive, controller, callback) {
+            $(containerSelector + ' tbody').off('click', 'td.info-edit');
+            $(containerSelector + ' tbody').on('click', 'td.info-edit', function () {
+                var tr = $(this).closest('tr');
+                var row = table.row(tr);
+
+                if (row.child.isShown()) {
+                    row.child.hide();
+                    tr.removeClass('shown');
+                } else {
+                    const newScope = $rootScope.$new();
+                    newScope.data = $.extend(true, {}, row.data());
+                    const directiveHtml = '<' + directive + ' class="' + directive + '" ng-controller="' + controller + '" ng-init="getProductCategories(\'' + newScope.data.category + '\')"></' + directive + '>';
+                    const layerId = directive === 'suppliers-add-edit' ? newScope.data.id : newScope.data.idProduct + '-' + newScope.data.idSupplier + '-' + newScope.data.idCountry;
+                    newScope.formAction = 'EDIT';
+                    newScope.onUpdated = callback;
+                    const layerSelector = 'edit-layer-' + layerId;
+                    row.child('<div class="edit-tr" id="' + layerSelector + '"></div>').show();
+
+                    const comp = $compile($(directiveHtml))(newScope);
+                    newScope.$apply();
+
+                    $('#' + layerSelector).append(comp);
+                    tr.addClass('shown');
+                }
+            });
+        }
+
+        function formatSuppliersProductsColumn(value, translations) {
+            const columnObj = {
+                data: value,
+                title: translations[translationPath + value]
+            };
+            const renders = getSupplierProductsRenders();
+
+            columnObj.visible = isColumnVisible(value);
+
+            if (typeof renders[value] !== 'undefined') {
+                columnObj.render = renders[value];
+            }
+
+            if(value === 'documents'){
+                columnObj.className = 'show-documents';
+            }
+
+            return columnObj;
+        }
+
+        function isColumnVisible(value) {
+            const notVisibleFields = [
+                'idCountry',
+                'idSupplier',
+                'isPriceRecurring',
+                'idProductType'
+            ];
+
+            return notVisibleFields.indexOf(value) === -1;
+        }
+
+        function getSupplierProductsRenders() {
+            return {
+                payPeriod: payPeriodRender,
+                unitCostPrice: priceRender,
+                unitVatCost: priceRender,
+                isAvailable: isAvailableRender,
+                documents: documentsRender
+            };
+
+            function payPeriodRender(data) {
+                return data !== '0' ? data : null;
+            }
+
+            function priceRender(data, type, row) {
+                return parseInt(row.isPriceRecurring) === 1 ? data + ' / month' : data;
+            }
+
+            function isAvailableRender(data){
+                return parseInt(data) === 1 ? 'yes' : 'no';
+            }
+
+            function documentsRender(data){
+                let html = data.length > 0 ? '<div class="show-documents-icon"><span class="glyphicon glyphicon-plus"></span> Show</div>' : '-';
+
+                return html;
+            }
+        }
+
+        function formatSuppliersColumn(value, translations) {
+            const columnObj = {
+                data: value,
+                title: translations[translationPath + value]
+            };
+            const renders = getSuppliersRenders();
+
+            columnObj.visible = isColumnVisible(value);
+
+            if (typeof renders[value] !== 'undefined') {
+                columnObj.render = renders[value];
+            }
+
+            return columnObj;
+        }
+
+        function getSuppliersRenders() {
+            return {
+                sellsIn: suppliersSellsInRender
+            };
+
+            function suppliersSellsInRender(data) {
+                return data ? data.replace(/,/g, '<br/>') : '-';
+            }
+        }
+    }
+})();

api-wiaas/client/js/components/suppliers/suppliers.less

@@ -0,0 +1,139 @@
+.module-layer{
+    position : relative;
+    margin-top: 1%;
+    background: rgba(255, 255, 255, 0.8);
+    margin-bottom: 3%;
+}
+
+.suppliers-info{
+    display: inline-block;
+    width:10%;
+}
+
+#suppliers-layer{
+    .module-layer;
+
+    .edit-tr{
+        display: block;
+        width:100%;
+    }
+
+    .suppliers-add-edit{
+        width: 100%;
+        display: block;
+    }
+
+    .supplier-input{
+        display: block;
+        width: 100%;
+    }
+
+    .supplier-group{
+        display: block;
+        width:100%;
+        margin-bottom: 1%;
+    }
+}
+
+#suppliers-products-layer{
+    .module-layer;
+
+    .edit-tr{
+        display: block;
+        width:100%;
+    }
+
+    .product-input{
+        display: block;
+        width: 100%;
+    }
+
+    .product-group{
+        display: inline-block;
+        width:48%;
+        margin-bottom: 1%;
+    }
+
+    .drop-box {
+        cursor: pointer;
+        color: #337ab7;
+        border: 5px dashed #337ab7;
+        border-radius: 10px;
+        text-align: center;
+        vertical-align: middle;
+        font-size: 150%;
+        padding: 10% 0;
+        margin-top: 2%;
+    }
+
+    .dragover {
+        border: 5px dashed #4CC417;
+    }
+
+    .show-documents-icon{
+        cursor: pointer;
+    }
+
+    .remove-document-icon{
+        cursor: pointer;
+        color: red;
+        margin-left: 5px;
+    }
+}
+
+#suppliers-products-add-layer{
+    .module-layer;
+    padding-bottom: 2%;
+
+    .form-notice{
+        display: inline-block;
+    }
+
+    .notice-icon{
+        color: #337ab7;
+    }
+
+    .product-radio-layer{
+        display: inline-block;
+        margin-left: 1%;
+    }
+}
+
+#suppliers-add-layer{
+    .module-layer;
+    padding-bottom: 2%;
+
+    #suppliers-add-steps-layer{
+        display: inline-block;
+        width:100%;
+        text-align: center;
+    }
+
+    .suppliers-add-step{
+        display: inline-block;
+        padding: 1%;
+        border-radius: 5px;
+    }
+    .step-ongoing{
+        background: #2184be;
+        color: #FFF;
+    }
+
+    .step-done{
+        background: #9dc8e2;
+        color: #FFF;
+    }
+
+    .step-inactive{
+        background: #eee;
+        color: #aaa;
+    }
+
+    .step-link{
+        display: inline-block;
+        height: 2px;
+        width: 5%;
+        background: #2184be;
+        vertical-align: middle;
+    }
+}

api-wiaas/client/js/components/suppliers/upload-product-document.directive.js

@@ -0,0 +1,72 @@
+(function () {
+    global.dashModule
+        .controller('uploadProductDocumentCtrl', ['$scope', '$', '$http', '$translate', 'utilsService', 'Upload', uploadProductDocumentCtrl])
+        .directive('uploadProductDocument', [uploadProductDocumentDirective]);
+
+    function uploadProductDocumentDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'suppliers/html/uploadProductDocumentTempalte'
+        };
+    }
+
+    function uploadProductDocumentCtrl($scope, $, $http, $translate, utilsService, Upload) {
+        $scope.uploadFile = uploadFile;
+        $scope.getDocumentTypes = getDocumentTypes;
+        $scope.selectFileType = selectFileType;
+        $scope.visibleToCustomer = '1';
+        $scope.selectedFileType = {};
+        const idSupplierProduct = $scope.$parent.data.idProduct;
+
+        function getDocumentTypes() {
+            $http({
+                url: 'documents/api/getDocumentTypes',
+                method: 'POST',
+                data: $.param({
+                    withoutTemplates: true
+                })
+            }).then(setDocumentTypes, utilsService.onHttpError);
+        }
+
+        function setDocumentTypes(response){
+            if(response.data && response.data.length){
+                $scope.documentTypes = response.data.filter((documentType) => {
+                    return documentType.isSpecialType !== 1;
+                });
+            }
+        }
+
+        function selectFileType(docType){
+            $scope.selectedFileType = docType;
+        }
+
+        function uploadFile(file) {
+            Upload.upload({
+                url: 'suppliers/api/uploadProductDocument',
+                method: 'POST',
+                file: file,
+                data: {
+                    idSupplierProduct,
+                    idDocumentType: $scope.selectedFileType.idDocumentType || 0,
+                    visibleToCustomer: $scope.visibleToCustomer,
+                    documentName: $scope.documentName
+                }
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const translatedMessage = $translate.instant('suppliers.messages.' + messageObj.message);
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                    if(messageObj.code === 'success'){
+                        $scope.fileName = '';
+                        if (typeof $scope.$parent.onUpdated !== 'undefined') {
+                            $scope.$parent.onUpdated();
+                        }
+                    }
+                });
+            }
+        }
+    }
+})();