From cf20a952e76ed7c36daa65f47d12494130133ac0 Mon Sep 17 00:00:00 2001 From: Ilya Tsarenko Date: Wed, 21 Oct 2020 20:41:50 +0200 Subject: [PATCH 01/24] VP-5445: Font size fix on Home page --- assets/scss/_custom.scss | 146 ++++++++++++++++++--------------------- 1 file changed, 68 insertions(+), 78 deletions(-) diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index 1bd7dba6..14ca6ddd 100644 --- a/assets/scss/_custom.scss +++ b/assets/scss/_custom.scss @@ -3,7 +3,6 @@ @import "mixins/custom/_buttons.scss"; @import "mixins/custom/_button-groups.scss"; @import "mixins/custom/_navbar.scss"; - @import "custom/_grid.scss"; @import "custom/_type.scss"; @import "custom/_scaffolding.scss"; @@ -26,133 +25,126 @@ @import "custom/_icon.scss"; @import "custom/_category-page.scss"; @import "custom/_product-card.scss"; - html { - height: 100%; + height: 100%; } body { - display: flex; - flex-direction: column; - height: 100%; + display: flex; + flex-direction: column; + height: 100%; } header { - .navbar-default { - border-color: $brand-primary; - border-width: 4px 0 0 0; - position: relative; - z-index: 9999; - } + .navbar-default { + border-color: $brand-primary; + border-width: 4px 0 0 0; + position: relative; + z-index: 9999; + } } footer { - flex: 0 0 auto; + flex: 0 0 auto; } -#all-products-popover + .popover { - width: 480px; +#all-products-popover+.popover { + width: 480px; } -#bulk-order-popover + .popover { - width: 305px; +#bulk-order-popover+.popover { + width: 305px; } main { - padding-top: $navbar-margin-bottom; - position: relative; - flex: 1 0 auto; - - @media (max-width: $screen-sm-max) { - .navbar-fixed-top + .navbar-fixed-top + & { - margin-top: ($navbar-height + 1px) * 2 + $navbar-margin-bottom; // 1px border - } - - .navbar-fixed-top + .navbar-fixed-top + .navbar-fixed-top:not(.ng-hide) + & { - margin-top: ($navbar-height + 1px) * 3 + $navbar-margin-bottom; // 1px border + padding-top: $navbar-margin-bottom; + position: relative; + flex: 1 0 auto; + @media (max-width: $screen-sm-max) { + .navbar-fixed-top + .navbar-fixed-top + & { + margin-top: ($navbar-height + 1px) * 2 + $navbar-margin-bottom; // 1px border + } + .navbar-fixed-top+.navbar-fixed-top+.navbar-fixed-top:not(.ng-hide)+& { + margin-top: ($navbar-height + 1px) * 3 + $navbar-margin-bottom; // 1px border + } } - } - - padding-bottom: $navbar-margin-top; + padding-bottom: $navbar-margin-top; } .mobile-app { - width: 120px; + width: 120px; } .btn-youtube { - @include btn-social(#e52d27); + @include btn-social(#e52d27); } .ng-submitted input.ng-invalid.ng-invalid-required, .ng-submitted input.ng-invalid.ng-invalid-email, -.ng-submitted input.ng-invalid.ng-invalid-pattern { - border-color: #883333; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +.ng-submitted input.ng-invalid.ng-invalid-pattern { + border-color: #883333; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-marging-right { - margin-right: 13px; + margin-right: 13px; } - //Dashboard - .arrow-padding-left { - padding-left: 10px; + padding-left: 10px; } .spend-report-body { - display: flex; - justify-content: space-around; - align-items: center; + display: flex; + justify-content: space-around; + align-items: center; } .spend-report-card { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .user-roles-card { - display: flex; - align-items: flex-start; - margin-bottom: 10px; + display: flex; + align-items: flex-start; + margin-bottom: 10px; } .user-roles-card-body { - display: flex; - flex-direction: column; - margin-left: 10px; - font-family: $font-family-sans-serif; - .title { - line-height: $line-height-base; - } - .description { - color: $gray-roles-description; - font-size: $font-size-small; - } + display: flex; + flex-direction: column; + margin-left: 10px; + font-family: $font-family-sans-serif; + .title { + line-height: $line-height-base; + } + .description { + color: $gray-roles-description; + font-size: $font-size-small; + } } .no-permission { - background: url('../../images/dashboard-placeholder-bg.png') right no-repeat; - padding: 60px; - display: flex; - align-items: center; + background: url('../../images/dashboard-placeholder-bg.png') right no-repeat; + padding: 60px; + display: flex; + align-items: center; .message { - width: 179px; - margin-left: 35px; - font-family: $font-family-sans-serif; - color: $gray-no-permission; - font-weight: bold; + width: 179px; + margin-left: 35px; + font-family: $font-family-sans-serif; + color: $gray-no-permission; + font-weight: bold; } } .user-inactive { - color: $gray-user-inactive; + color: $gray-user-inactive; } - .modal-flex-footer { display: flex; padding: 15px; @@ -172,26 +164,24 @@ main { justify-content: space-between; padding-top: 10px; padding-bottom: 10px; - button.close { font-size: 35px; } - - &:before, &:after { + &:before, + &:after { display: none; } } // Index page - .credentials-block { display: flex; justify-content: space-around; align-items: center; font-family: $font-family-sans-serif; .credentials-block-text { - font-size: $font-size-small; - margin-left: 14px; + font-size: $font-size-base; + margin-left: 14px; } .credentials-block-link { font-weight: bold; @@ -202,4 +192,4 @@ main { // For grid raw stripped view. Ex. on the 'select payment method' dialog .raw-striped:nth-of-type(odd) { background-color: $gray-striped-table; -} +} \ No newline at end of file From 84537723d2c4e5db1a7d2068d8f1d82ef0fc77d9 Mon Sep 17 00:00:00 2001 From: Ilya Date: Thu, 22 Oct 2020 11:17:05 +0200 Subject: [PATCH 02/24] VP-5056: Display dialog when inventory for product is limited --- assets/js/product.js | 116 ++++++++++++++---- assets/scss/_custom.scss | 11 ++ assets/scss/_helpers.scss | 4 + assets/scss/custom/_forms.scss | 16 ++- assets/scss/custom/_modals.scss | 6 + assets/scss/custom/_tables.scss | 19 +-- assets/scss/custom/_type.scss | 2 + locales/en.default.json | 6 +- .../dialogs/recently-added-cart-item.liquid | 115 +++++++++-------- 9 files changed, 206 insertions(+), 89 deletions(-) diff --git a/assets/js/product.js b/assets/js/product.js index ce55c2db..a7303259 100644 --- a/assets/js/product.js +++ b/assets/js/product.js @@ -22,31 +22,40 @@ storefrontApp.controller('productController', ['$rootScope', '$scope', '$window' } var configuredProductId = $window.product.id; - - var items = $scope.productParts.map(function(value){ - return { id: value.selectedItemId, quantity: $scope.configurationQty, configuredProductId: configuredProductId }; + var products = $scope.productParts.map(function(part) { + return part.items.find(function(item) { + return item.id === part.selectedItemId; + }); }); - cartService.addLineItems(items).then(function (response) { - var result = response.data; - if(result.isSuccess) { - $rootScope.$broadcast('cartItemsChanged'); - var products = $scope.productParts.map(function(part){ - return part.items.find(function(item){ - return item.id === part.selectedItemId; - }); - }); - - var dialogData = toDialogDataModel(products, $scope.configurationQty); - dialogService.showDialog(dialogData, 'recentlyAddedCartItemDialogController', 'storefront.recently-added-cart-item-dialog.tpl', 'lg'); - } + var inventoryError = products.some(product => { + return product.availableQuantity < $scope.configurationQty; }); + var dialogData = toDialogDataModel(products, $scope.configurationQty, inventoryError, configuredProductId); + dialogService.showDialog(dialogData, 'recentlyAddedCartItemDialogController', 'storefront.recently-added-cart-item-dialog.tpl', 'lg'); + + if (!inventoryError) { + var items = $scope.productParts.map(function(value) { + return { id: value.selectedItemId, quantity: $scope.configurationQty, configuredProductId: configuredProductId }; + }); + + cartService.addLineItems(items).then(function (response) { + var result = response.data; + if (result.isSuccess) { + $rootScope.$broadcast('cartItemsChanged'); + } + }); + } } + $scope.addProductToCart = function (product, quantity) { - var dialogData = toDialogDataModel([product], quantity); + var inventoryError = product.availableQuantity < quantity; + var dialogData = toDialogDataModel([product], quantity, inventoryError, null); dialogService.showDialog(dialogData, 'recentlyAddedCartItemDialogController', 'storefront.recently-added-cart-item-dialog.tpl', 'lg'); - cartService.addLineItem(product.id, quantity).then(function (response) { - $rootScope.$broadcast('cartItemsChanged'); - }); + if (!inventoryError) { + cartService.addLineItem(product.id, quantity).then(() => { + $rootScope.$broadcast('cartItemsChanged'); + }); + } } $scope.addProductToCartById = function (productId, quantity, event) { @@ -111,14 +120,14 @@ storefrontApp.controller('productController', ['$rootScope', '$scope', '$window' } } - function toDialogDataModel(products, quantity) { + function toDialogDataModel(products, quantity, inventoryError, configuredProductId) { let productIds = products.map(function(product) { return product.id; - }); + }) let items = products.map(function(product) { - return angular.extend({ }, product, { quantity: quantity }) + return angular.extend({ }, product, { quantity: +quantity, inventoryError: product.availableQuantity < quantity, configuredProductId: configuredProductId }) }); - return { productIds: productIds, items: items }; + return { productIds, items, inventoryError, configuredProductId, configurationQty: quantity }; } function initialize(filters) { @@ -224,7 +233,7 @@ storefrontApp.controller('productController', ['$rootScope', '$scope', '$window' $scope.$watch('filters', initialize); }]); -storefrontApp.controller('recentlyAddedCartItemDialogController', ['$scope', '$window', '$uibModalInstance', 'mailingService', 'dialogData', 'baseUrl', function ($scope, $window, $uibModalInstance, mailingService, dialogData, baseUrl) { +storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', '$scope', '$window', '$uibModalInstance', 'mailingService', 'dialogData', 'baseUrl', 'cartService', 'roundHelper', '$filter', function ($rootScope, $scope, $window, $uibModalInstance, mailingService, dialogData, baseUrl, cartService, roundHelper, $filter) { $scope.dialogData = dialogData; $scope.baseUrl = baseUrl; $scope.regex = new RegExp(/^\/+/); @@ -233,13 +242,70 @@ storefrontApp.controller('recentlyAddedCartItemDialogController', ['$scope', '$w $uibModalInstance.dismiss('cancel'); } + $scope.addToCart = function() { + $scope.dialogData.inventoryError = false; + console.log($scope.dialogData); + if ($scope.dialogData.items.length === 1) { + cartService.addLineItem($scope.dialogData.items[0].id, $scope.dialogData.items[0].quantity).then(() => { + $rootScope.$broadcast('cartItemsChanged'); + }); + } else if ($scope.dialogData.configuredProductId) { + var items = $scope.dialogData.items.map(function(item) { + return { id: item.id, quantity: $scope.configurationQty, configuredProductId: item.configuredProductId }; + }); + cartService.addLineItems(items).then(function (response) { + var result = response.data; + if (result.isSuccess) { + $rootScope.$broadcast('cartItemsChanged'); + } + }); + } + } + + $scope.calculateTotal = function(itemPrice, itemQuantity) { + var total = roundHelper.bankersRound(itemPrice * itemQuantity); + return $filter('currency')(total ,'$'); + } + + $scope.setInitQuantity = function(item) { + if (item.inventoryError) { + return item.availableQuantity; + } else { + return item.quantity; + } + } + + $scope.quantityChanged = function(qty) { + $scope.configurationQty = qty; + } + $scope.redirect = function (url) { $window.location.href = url; } + $scope.send = function(email) { mailingService.sendProduct(dialogData.productId, { email: email, storeId: dialogData.storeId, productUrl: dialogData.productUrl, language: dialogData.language }); $uibModalInstance.close(); } + + function getMaxInventory() { + var inventoryArray = $scope.dialogData.items.map(function (item) { + return item.availableQuantity; + }); + $scope.maxConfigurationQty = Math.min(...inventoryArray); + $scope.configurationQty = $scope.maxConfigurationQty; + } + + function initialize() { + if ($scope.dialogData.inventoryError && $scope.dialogData.configuredProductId) { + getMaxInventory(); + } else if (!$scope.dialogData.inventoryError && $scope.dialogData.configuredProductId) { + $scope.configurationQty = $scope.dialogData.configurationQty; + } + } + + initialize(); + }]); storefrontApp.controller('changeConfigurationGroupItemDialogController', ['$scope', '$window', '$uibModalInstance', 'dialogData', function ($scope, $window, $uibModalInstance, dialogData) { diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index c8aeb552..bae5512e 100644 --- a/assets/scss/_custom.scss +++ b/assets/scss/_custom.scss @@ -26,6 +26,7 @@ @import "custom/_icon.scss"; @import "custom/_category-page.scss"; @import "custom/_product-card.scss"; +@import "custom/_modals.scss"; html { height: 100%; @@ -204,6 +205,16 @@ main { background-color: $gray-striped-table; } +// Add to cart modal + +.add-cart-item-total { + height: 40px; +} + +.dialog-data-item:not(:last-child) { + border-bottom: 1px solid $gray-lighter; +} + // Totals block .fee-margin-bottom { diff --git a/assets/scss/_helpers.scss b/assets/scss/_helpers.scss index 180d827c..21db4437 100644 --- a/assets/scss/_helpers.scss +++ b/assets/scss/_helpers.scss @@ -17,3 +17,7 @@ vertical-align: middle; float: none; } + +.opacity-100 { + opacity: 1; +} diff --git a/assets/scss/custom/_forms.scss b/assets/scss/custom/_forms.scss index 8bebb816..ba0a0542 100644 --- a/assets/scss/custom/_forms.scss +++ b/assets/scss/custom/_forms.scss @@ -1,4 +1,18 @@ -.form-inline { +// Remove arrows/spinners from input with type="number" + +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type='number'] { + -moz-appearance: textfield; +} + +.form-inline { .form-group + .form-group { margin-left: $form-group-margin-left; } diff --git a/assets/scss/custom/_modals.scss b/assets/scss/custom/_modals.scss index e69de29b..b4be5594 100644 --- a/assets/scss/custom/_modals.scss +++ b/assets/scss/custom/_modals.scss @@ -0,0 +1,6 @@ +// Prevent pseudo-elements from impacting the flex calculation + +.modal-footer:after, +.modal-footer:before { + display: none; +} diff --git a/assets/scss/custom/_tables.scss b/assets/scss/custom/_tables.scss index 0c453501..51083350 100644 --- a/assets/scss/custom/_tables.scss +++ b/assets/scss/custom/_tables.scss @@ -50,6 +50,9 @@ .table > tbody > tr > td { border-right: 1px solid $gray-lighter; border-top: 0; + font-family: $font-family-sans-serif; + font-size: 14px; + padding: 8px 8px 8px 12px; } .table > tbody > tr > td.no-border { @@ -65,6 +68,7 @@ font-weight: bold; font-size: 14px; line-height: 20px; + padding: 14px 8px 14px 10px; } .table.no-vertical-borders { @@ -79,19 +83,10 @@ cursor: pointer; } -.table > tbody > tr > td > .ng-binding { - font-family: $font-family-sans-serif; - font-size: 14px; -} - .orders-list-table tr td { width: 16.6%; } -.table > thead > tr > th { - padding: 14px 8px 14px 10px; -} - .table.small-table-head { > thead > tr > th { padding-top: 7px; @@ -110,10 +105,6 @@ } } -.table > tbody > tr > td { - padding: 8px 8px 8px 12px; -} - .table > tbody > tr:last-child { border-bottom: 0; } @@ -160,7 +151,7 @@ th { background-color: $body-bg; } -.template-product .table > tbody > tr { +.template-product .table-striped > tbody > tr:nth-of-type(even) { background-color: $gray-striped-table; } diff --git a/assets/scss/custom/_type.scss b/assets/scss/custom/_type.scss index e8627d19..6af3c58c 100644 --- a/assets/scss/custom/_type.scss +++ b/assets/scss/custom/_type.scss @@ -66,6 +66,8 @@ p.product-count { @include text-emphasis-variant('.text-contrast', $text-contrast); +@include text-emphasis-variant('.text-muted-contrast', $text-muted-contrast); + .text-serif { font-family: $font-family-serif !important; } diff --git a/locales/en.default.json b/locales/en.default.json index 3aae9f5a..38c6631e 100644 --- a/locales/en.default.json +++ b/locales/en.default.json @@ -253,7 +253,11 @@ "product_search_empty": "No products found", "product_search_progress": "Searching...", "categories": "Categories", - "products": "Products" + "products": "Products", + "limited_qty": "Limited product quantity", + "in_stock": "in stock", + "cancel": "Cancel", + "confirm": "Confirm" }, "send_to_email": { "title": "Select persons to send the email", diff --git a/snippets/dialogs/recently-added-cart-item.liquid b/snippets/dialogs/recently-added-cart-item.liquid index d7c3a094..b74d6083 100644 --- a/snippets/dialogs/recently-added-cart-item.liquid +++ b/snippets/dialogs/recently-added-cart-item.liquid @@ -1,57 +1,76 @@ From 3201af937eac635755c9286ef1172b884cc5368e Mon Sep 17 00:00:00 2001 From: Ilya Date: Thu, 22 Oct 2020 11:29:10 +0200 Subject: [PATCH 03/24] Remove console.log --- assets/js/product.js | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/js/product.js b/assets/js/product.js index a7303259..5c182ffa 100644 --- a/assets/js/product.js +++ b/assets/js/product.js @@ -244,7 +244,6 @@ storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', $scope.addToCart = function() { $scope.dialogData.inventoryError = false; - console.log($scope.dialogData); if ($scope.dialogData.items.length === 1) { cartService.addLineItem($scope.dialogData.items[0].id, $scope.dialogData.items[0].quantity).then(() => { $rootScope.$broadcast('cartItemsChanged'); From cdf26ce60f626b6c138299c2a9f201928d5b3e42 Mon Sep 17 00:00:00 2001 From: Ilya Date: Thu, 22 Oct 2020 13:06:28 +0200 Subject: [PATCH 04/24] Fix related products block inside dialog --- snippets/dialogs/recently-added-cart-item.liquid | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/snippets/dialogs/recently-added-cart-item.liquid b/snippets/dialogs/recently-added-cart-item.liquid index b74d6083..99a392b9 100644 --- a/snippets/dialogs/recently-added-cart-item.liquid +++ b/snippets/dialogs/recently-added-cart-item.liquid @@ -5,7 +5,7 @@
-
+
@@ -57,8 +57,8 @@
-
-

{{ 'products.general.related_products' | t }}

+
+

{{ 'products.general.related_products' | t }}

From d581c3089917fa83ebe7ba24bdeeaf1034e8ad72 Mon Sep 17 00:00:00 2001 From: Ilya Date: Thu, 22 Oct 2020 14:02:11 +0200 Subject: [PATCH 05/24] Use store currency for price formatting --- assets/js/app/consts.js.liquid | 1 + assets/js/product.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/assets/js/app/consts.js.liquid b/assets/js/app/consts.js.liquid index a0dc21e5..61391bdf 100644 --- a/assets/js/app/consts.js.liquid +++ b/assets/js/app/consts.js.liquid @@ -10,6 +10,7 @@ angular.module('storefrontApp.consts', []) .constant('sortAscending', 'asc') .constant('sortDescending', 'desc') .constant('orderStatuses', ['Unpaid','Paid','Completed']) +.constant('storeCurrency', {{ current_currency | json }}) .constant('itemResponseGroup', { None: 0, ItemInfo: 1, diff --git a/assets/js/product.js b/assets/js/product.js index 5c182ffa..19e87cd6 100644 --- a/assets/js/product.js +++ b/assets/js/product.js @@ -1,7 +1,7 @@ var storefrontApp = angular.module('storefrontApp'); -storefrontApp.controller('productController', ['$rootScope', '$scope', '$window', '$timeout', 'dialogService', 'catalogService', 'cartService', 'quoteRequestService', 'availabilityService', '$filter', 'roundHelper', 'validationHelper', - function ($rootScope, $scope, $window, $timeout, dialogService, catalogService, cartService, quoteRequestService, availabilityService, $filter, roundHelper, validationHelper) { +storefrontApp.controller('productController', ['$rootScope', '$scope', '$window', '$timeout', 'dialogService', 'catalogService', 'cartService', 'quoteRequestService', 'availabilityService', '$filter', 'roundHelper', 'validationHelper', 'storeCurrency', + function ($rootScope, $scope, $window, $timeout, dialogService, catalogService, cartService, quoteRequestService, availabilityService, $filter, roundHelper, validationHelper, storeCurrency) { //TODO: prevent add to cart not selected variation // display validator please select property // display price range @@ -99,15 +99,15 @@ storefrontApp.controller('productController', ['$rootScope', '$scope', '$window' total = roundHelper.bankersRound($scope.defaultPrice * $scope.configurationQty); } - return $filter('currency')(total ,'$'); + return $filter('currency')(total, storeCurrency.symbol); } $scope.getDefaultPrice = function() { - return $filter('currency')($scope.defaultPrice, '$'); + return $filter('currency')($scope.defaultPrice, storeCurrency.symbol); } $scope.getCustomChangesTotal = function() { - return $scope.differenceSign + $filter('currency')($scope.totalDifference, '$') || $filter('currency')(0, '$'); + return $scope.differenceSign + $filter('currency')($scope.totalDifference, storeCurrency.symbol) || $filter('currency')(0, storeCurrency.symbol); } $scope.quantityChanged = function(qty) { @@ -123,7 +123,7 @@ storefrontApp.controller('productController', ['$rootScope', '$scope', '$window' function toDialogDataModel(products, quantity, inventoryError, configuredProductId) { let productIds = products.map(function(product) { return product.id; - }) + }); let items = products.map(function(product) { return angular.extend({ }, product, { quantity: +quantity, inventoryError: product.availableQuantity < quantity, configuredProductId: configuredProductId }) }); @@ -233,7 +233,7 @@ storefrontApp.controller('productController', ['$rootScope', '$scope', '$window' $scope.$watch('filters', initialize); }]); -storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', '$scope', '$window', '$uibModalInstance', 'mailingService', 'dialogData', 'baseUrl', 'cartService', 'roundHelper', '$filter', function ($rootScope, $scope, $window, $uibModalInstance, mailingService, dialogData, baseUrl, cartService, roundHelper, $filter) { +storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', '$scope', '$window', '$uibModalInstance', 'mailingService', 'dialogData', 'baseUrl', 'cartService', 'roundHelper', '$filter', 'storeCurrency', function ($rootScope, $scope, $window, $uibModalInstance, mailingService, dialogData, baseUrl, cartService, roundHelper, $filter, storeCurrency) { $scope.dialogData = dialogData; $scope.baseUrl = baseUrl; $scope.regex = new RegExp(/^\/+/); @@ -263,7 +263,7 @@ storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', $scope.calculateTotal = function(itemPrice, itemQuantity) { var total = roundHelper.bankersRound(itemPrice * itemQuantity); - return $filter('currency')(total ,'$'); + return $filter('currency')(total, storeCurrency.symbol); } $scope.setInitQuantity = function(item) { From e472a9221d8af6cc8b58de8b0d1fe007d1f28672 Mon Sep 17 00:00:00 2001 From: Ilya Date: Thu, 22 Oct 2020 14:06:03 +0200 Subject: [PATCH 06/24] Use arrow functions --- assets/js/product.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/product.js b/assets/js/product.js index 19e87cd6..cbb65601 100644 --- a/assets/js/product.js +++ b/assets/js/product.js @@ -249,10 +249,10 @@ storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', $rootScope.$broadcast('cartItemsChanged'); }); } else if ($scope.dialogData.configuredProductId) { - var items = $scope.dialogData.items.map(function(item) { + var items = $scope.dialogData.items.map(item => { return { id: item.id, quantity: $scope.configurationQty, configuredProductId: item.configuredProductId }; }); - cartService.addLineItems(items).then(function (response) { + cartService.addLineItems(items).then(response => { var result = response.data; if (result.isSuccess) { $rootScope.$broadcast('cartItemsChanged'); @@ -288,7 +288,7 @@ storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', } function getMaxInventory() { - var inventoryArray = $scope.dialogData.items.map(function (item) { + var inventoryArray = $scope.dialogData.items.map(item => { return item.availableQuantity; }); $scope.maxConfigurationQty = Math.min(...inventoryArray); From ac0f580b5ec45db46dd24032e3b03a232f9dc790 Mon Sep 17 00:00:00 2001 From: Maksim Kopnov Date: Fri, 23 Oct 2020 11:59:19 +0700 Subject: [PATCH 07/24] VP-5059: Fix version suffix --- .github/workflows/release-alpha.yaml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/release-alpha.yaml b/.github/workflows/release-alpha.yaml index a3b4abfe..be58598d 100644 --- a/.github/workflows/release-alpha.yaml +++ b/.github/workflows/release-alpha.yaml @@ -33,6 +33,8 @@ jobs: - name: Build uses: VirtoCommerce/vc-github-actions/build-theme@VP-5059 + with: + versionSuffix: ${{ steps.image.outputs.fullSuffix }} - name: Publish id: publish From 8a571eb85db06e396a270d41a50249d268461a52 Mon Sep 17 00:00:00 2001 From: Ilya Tsarenko Date: Fri, 23 Oct 2020 10:25:25 +0200 Subject: [PATCH 08/24] VP-5445: Home page font fix Last line was added --- assets/scss/_custom.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index 14ca6ddd..9deebc92 100644 --- a/assets/scss/_custom.scss +++ b/assets/scss/_custom.scss @@ -192,4 +192,4 @@ main { // For grid raw stripped view. Ex. on the 'select payment method' dialog .raw-striped:nth-of-type(odd) { background-color: $gray-striped-table; -} \ No newline at end of file +} From 0b8a3680612f3a3c799c28ed6ea1ea1a502a92ec Mon Sep 17 00:00:00 2001 From: Ilya Date: Sat, 24 Oct 2020 17:44:37 +0200 Subject: [PATCH 09/24] Fix loader positioning --- assets/scss/modules/_loader.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scss/modules/_loader.scss b/assets/scss/modules/_loader.scss index 3b2a4794..12ab3b0e 100644 --- a/assets/scss/modules/_loader.scss +++ b/assets/scss/modules/_loader.scss @@ -2,7 +2,7 @@ background: rgba(0,0,0,.5); bottom: 0; left: 0; - position: absolute; + position: fixed; right: 0; top: 0; z-index: 5000; From b01cd9e403f8beb8f47e5aab7c199c0452dfa60f Mon Sep 17 00:00:00 2001 From: Ilya Date: Mon, 26 Oct 2020 10:55:23 +0200 Subject: [PATCH 10/24] VP-5568: Show dialog when product's inventory is limited after reorder --- assets/js/account/account-orders.js | 57 ++++++++++++++++--- assets/js/account/account-orders.tpl.liquid | 2 +- .../js/common-components/lineItems.tpl.liquid | 2 +- assets/js/product.js | 10 ++++ 4 files changed, 61 insertions(+), 10 deletions(-) diff --git a/assets/js/account/account-orders.js b/assets/js/account/account-orders.js index 10da1a19..3da8517b 100644 --- a/assets/js/account/account-orders.js +++ b/assets/js/account/account-orders.js @@ -125,6 +125,36 @@ angular.module('storefront.account') $window.open(url, '_blank'); } + $ctrl.reorder = function() { + var productIdsQuery = $ctrl.order.items.map(item => { + return 'productIds=' + item.productId; + }).join("&"); + + catalogService.getProducts(productIdsQuery).then(response => { + if (response.data && response.data.length) { + var orderProducts = response.data.map(item => { + return angular.extend(item, { quantity: _.findWhere($ctrl.order.items, {productId: item.id}).quantity }); + }); + var inventoryError = orderProducts.some(product => { + return product.availableQuantity < product.quantity; + }); + var dialogData = toDialogDataModel(orderProducts, null, inventoryError, null); + dialogService.showDialog(dialogData, 'recentlyAddedCartItemDialogController', 'storefront.recently-added-cart-item-dialog.tpl', 'lg'); + if (!inventoryError) { + var items = orderProducts.map(product => { + return { id: product.id, quantity: product.quantity }; + }); + cartService.addLineItems(items).then(response => { + var result = response.data; + if (result.isSuccess) { + $rootScope.$broadcast('cartItemsChanged'); + } + }); + } + } + }); + } + $ctrl.paymentMethodChanged = function () { loader.wrapLoading(function() { $ctrl.selectedPaymentMethod = _.find($ctrl.paymentMethods, function (pm) { return pm.code == $ctrl.selectedPaymentMethodCode; }); @@ -188,7 +218,7 @@ angular.module('storefront.account') }; function addProductToCartById(productId, quantity) { - catalogService.getProduct([productId]).then(function (response) { + catalogService.getProduct([productId]).then(response => { if (response.data && response.data.length) { var product = response.data[0]; addProductToCart(product, quantity); @@ -197,16 +227,27 @@ angular.module('storefront.account') } function addProductToCart(product, quantity) { - var dialogData = toDialogDataModel(product, quantity); - dialogService.showDialog(dialogData, 'recentlyAddedCartItemDialogController', 'storefront.recently-added-cart-item-dialog.tpl'); - cartService.addLineItem(product.id, quantity).then(function (response) { - $rootScope.$broadcast('cartItemsChanged'); - }); + var inventoryError = product.availableQuantity < quantity; + angular.extend(product, { quantity }); + var dialogData = toDialogDataModel([product], null, inventoryError, null); + dialogService.showDialog(dialogData, 'recentlyAddedCartItemDialogController', 'storefront.recently-added-cart-item-dialog.tpl', 'lg'); + if (!inventoryError) { + cartService.addLineItem(product.id, quantity).then(() => { + $rootScope.$broadcast('cartItemsChanged'); + }); + } } - function toDialogDataModel(product, quantity) { - return { items: [angular.extend({ }, product, { quantity: quantity })] }; + function toDialogDataModel(products, configurationQty, inventoryError, configuredProductId) { + let productIds = products.map(product => { + return product.productId; + }); + let items = products.map(product => { + return angular.extend({ }, product, { inventoryError: product.availableQuantity < product.quantity, configuredProductId: configuredProductId }) + }); + return { productIds, items, inventoryError, configuredProductId, configurationQty }; } + }] }) .filter('orderToSummarizedStatusLabel', [function () { diff --git a/assets/js/account/account-orders.tpl.liquid b/assets/js/account/account-orders.tpl.liquid index 711e957c..806ce686 100644 --- a/assets/js/account/account-orders.tpl.liquid +++ b/assets/js/account/account-orders.tpl.liquid @@ -118,7 +118,7 @@ {{ 'customer.order.get_invoice' | t }} - diff --git a/assets/js/common-components/lineItems.tpl.liquid b/assets/js/common-components/lineItems.tpl.liquid index 3d74f766..85c4b2b9 100644 --- a/assets/js/common-components/lineItems.tpl.liquid +++ b/assets/js/common-components/lineItems.tpl.liquid @@ -35,7 +35,7 @@
- +
diff --git a/assets/js/product.js b/assets/js/product.js index cbb65601..b1e9c2d4 100644 --- a/assets/js/product.js +++ b/assets/js/product.js @@ -258,6 +258,16 @@ storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', $rootScope.$broadcast('cartItemsChanged'); } }); + } else { + var items = $scope.dialogData.items.map(item => { + return { id: item.id, quantity: item.quantity }; + }); + cartService.addLineItems(items).then(response => { + var result = response.data; + if (result.isSuccess) { + $rootScope.$broadcast('cartItemsChanged'); + } + }); } } From 995e4738cbc240ca8a5577c072f3092f8aaa8991 Mon Sep 17 00:00:00 2001 From: Ilya Date: Mon, 26 Oct 2020 11:12:57 +0200 Subject: [PATCH 11/24] Fix PR comments --- assets/js/product.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/product.js b/assets/js/product.js index cbb65601..e6bc559b 100644 --- a/assets/js/product.js +++ b/assets/js/product.js @@ -244,7 +244,7 @@ storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', $scope.addToCart = function() { $scope.dialogData.inventoryError = false; - if ($scope.dialogData.items.length === 1) { + if ($scope.dialogData && $scope.dialogData.items && $scope.dialogData.items.length === 1) { cartService.addLineItem($scope.dialogData.items[0].id, $scope.dialogData.items[0].quantity).then(() => { $rootScope.$broadcast('cartItemsChanged'); }); @@ -308,7 +308,7 @@ storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', }]); storefrontApp.controller('changeConfigurationGroupItemDialogController', ['$scope', '$window', '$uibModalInstance', 'dialogData', function ($scope, $window, $uibModalInstance, dialogData) { - $scope.dialogData = dialogData; + $scope.dialogData = dialogData || {}; $scope.selectedId = dialogData.selectedItemId; $scope.close = function() { From 8536d50c9274ef3deae10920efe1251ebb5b283c Mon Sep 17 00:00:00 2001 From: Ilya Date: Mon, 26 Oct 2020 11:16:58 +0200 Subject: [PATCH 12/24] Fix code smells --- assets/js/account/account-orders.js | 4 ++-- assets/js/product.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/assets/js/account/account-orders.js b/assets/js/account/account-orders.js index 3da8517b..d6a063fd 100644 --- a/assets/js/account/account-orders.js +++ b/assets/js/account/account-orders.js @@ -144,8 +144,8 @@ angular.module('storefront.account') var items = orderProducts.map(product => { return { id: product.id, quantity: product.quantity }; }); - cartService.addLineItems(items).then(response => { - var result = response.data; + cartService.addLineItems(items).then(res => { + var result = res.data; if (result.isSuccess) { $rootScope.$broadcast('cartItemsChanged'); } diff --git a/assets/js/product.js b/assets/js/product.js index b1e9c2d4..ccd89f41 100644 --- a/assets/js/product.js +++ b/assets/js/product.js @@ -249,21 +249,21 @@ storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', $rootScope.$broadcast('cartItemsChanged'); }); } else if ($scope.dialogData.configuredProductId) { - var items = $scope.dialogData.items.map(item => { + let items = $scope.dialogData.items.map(item => { return { id: item.id, quantity: $scope.configurationQty, configuredProductId: item.configuredProductId }; }); cartService.addLineItems(items).then(response => { - var result = response.data; + let result = response.data; if (result.isSuccess) { $rootScope.$broadcast('cartItemsChanged'); } }); } else { - var items = $scope.dialogData.items.map(item => { + let items = $scope.dialogData.items.map(item => { return { id: item.id, quantity: item.quantity }; }); cartService.addLineItems(items).then(response => { - var result = response.data; + let result = response.data; if (result.isSuccess) { $rootScope.$broadcast('cartItemsChanged'); } From 5244a5fe937296c3e66d5bad2ec915d76c5bb7e3 Mon Sep 17 00:00:00 2001 From: Ilya Date: Mon, 26 Oct 2020 12:50:39 +0200 Subject: [PATCH 13/24] Add default value to dialogData --- assets/js/product.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/product.js b/assets/js/product.js index e6bc559b..3c368fd0 100644 --- a/assets/js/product.js +++ b/assets/js/product.js @@ -234,7 +234,7 @@ storefrontApp.controller('productController', ['$rootScope', '$scope', '$window' }]); storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', '$scope', '$window', '$uibModalInstance', 'mailingService', 'dialogData', 'baseUrl', 'cartService', 'roundHelper', '$filter', 'storeCurrency', function ($rootScope, $scope, $window, $uibModalInstance, mailingService, dialogData, baseUrl, cartService, roundHelper, $filter, storeCurrency) { - $scope.dialogData = dialogData; + $scope.dialogData = dialogData || {}; $scope.baseUrl = baseUrl; $scope.regex = new RegExp(/^\/+/); From 449dbc128584e07c184140ba635ef8273eb92023 Mon Sep 17 00:00:00 2001 From: Ilya Date: Tue, 27 Oct 2020 10:08:00 +0200 Subject: [PATCH 14/24] VP-5696: Update cart template for storefront changes --- .../checkout-configurable-line-item.js | 9 +++--- ...out-configurable-line-item.tpl.html.liquid | 28 +++++++++---------- assets/js/checkout/checkout.js | 17 +---------- templates/cart.liquid | 13 +++++---- 4 files changed, 26 insertions(+), 41 deletions(-) diff --git a/assets/js/checkout/checkout-configurable-line-item.js b/assets/js/checkout/checkout-configurable-line-item.js index 73b5c870..c7057351 100644 --- a/assets/js/checkout/checkout-configurable-line-item.js +++ b/assets/js/checkout/checkout-configurable-line-item.js @@ -8,8 +8,7 @@ storefrontApp.component('vcCheckoutConfigurableLineItem', { bindings: { item: '=', onChangeQty: '&', - onRemove: '&', - cartItems: '<' + onRemove: '&' }, controller: ['$scope', 'availablePaymentPlans', 'baseUrl', function ($scope, availablePaymentPlans, baseUrl) { var ctrl = this; @@ -28,12 +27,12 @@ storefrontApp.component('vcCheckoutConfigurableLineItem', { this.changeQty = function () { if (ctrl.onChangeQty) { - ctrl.onChangeQty({ item: ctrl.item.configuredLineItem }); + ctrl.onChangeQty({ item: ctrl.item }); } }; this.remove = function () { - ctrl.onRemove({ item: ctrl.item.configuredLineItem }); + ctrl.onRemove({ item: ctrl.item }); } this.validate = function () { @@ -53,7 +52,7 @@ storefrontApp.component('vcCheckoutConfigurableLineItem', { function getConfiguredLineItems(item) { _.each(item.parts, function (part) { - part.items = [ctrl.cartItems.find(x => x.id === part.selectedItemId)]; + part.items = [item.items.find(x => x.id === part.selectedItemId)]; }); } diff --git a/assets/js/checkout/checkout-configurable-line-item.tpl.html.liquid b/assets/js/checkout/checkout-configurable-line-item.tpl.html.liquid index c5483db4..03292c72 100644 --- a/assets/js/checkout/checkout-configurable-line-item.tpl.html.liquid +++ b/assets/js/checkout/checkout-configurable-line-item.tpl.html.liquid @@ -1,33 +1,33 @@
- {% raw %}{{ $ctrl.item.configuredLineItem.name }}{% endraw %} + {% raw %}{{ $ctrl.item.product.name }}{% endraw %}
-

-

Item

+

+

Item

Price {% if settings.show_prices_with_taxes %} - + {% else %} - + {% endif %} / each

- +

- -
- +
+
-
+
@@ -287,10 +287,10 @@ -
- +
+
-
+
@@ -374,6 +374,7 @@
+
From e42a02f468e907cd17fb84dafee00eb3a0729130 Mon Sep 17 00:00:00 2001 From: trueboroda Date: Tue, 27 Oct 2020 16:37:25 +0300 Subject: [PATCH 15/24] VP-5696: Fix configured group's image url --- .../js/checkout/checkout-configurable-line-item.tpl.html.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/checkout/checkout-configurable-line-item.tpl.html.liquid b/assets/js/checkout/checkout-configurable-line-item.tpl.html.liquid index 03292c72..e110892e 100644 --- a/assets/js/checkout/checkout-configurable-line-item.tpl.html.liquid +++ b/assets/js/checkout/checkout-configurable-line-item.tpl.html.liquid @@ -1,7 +1,7 @@
- {% raw %}{{ $ctrl.item.product.name }}{% endraw %} + {% raw %}{{ $ctrl.item.product.name }}{% endraw %}

From 022f1c403ba73b39c4a4627ace9d9359aac6c26b Mon Sep 17 00:00:00 2001 From: Ilya Date: Tue, 27 Oct 2020 17:48:48 +0200 Subject: [PATCH 16/24] VP-5696: Show configurable products in order details template --- assets/js/account/account-orders.tpl.liquid | 10 +-- assets/js/common-components/lineItems.js | 24 ++++- .../js/common-components/lineItems.tpl.liquid | 90 +++++++++++++++++-- assets/scss/_custom.scss | 2 +- assets/scss/custom/_tables.scss | 4 + 5 files changed, 112 insertions(+), 18 deletions(-) diff --git a/assets/js/account/account-orders.tpl.liquid b/assets/js/account/account-orders.tpl.liquid index 711e957c..d4ca3a61 100644 --- a/assets/js/account/account-orders.tpl.liquid +++ b/assets/js/account/account-orders.tpl.liquid @@ -75,7 +75,7 @@
{% capture order_number %}{% raw %}{{$ctrl.orderNumber}}{% endraw %}{% endcapture %} -

{{ 'customer.order.title' | t: order_number }}

+

{{ 'customer.order.title' | t: order_number }}

{{ 'customer.orders.status' | t }}:

@@ -98,11 +98,9 @@
-
-
-
- -
+
+
+
diff --git a/assets/js/common-components/lineItems.js b/assets/js/common-components/lineItems.js index 0b678c61..7e7d1b0d 100644 --- a/assets/js/common-components/lineItems.js +++ b/assets/js/common-components/lineItems.js @@ -3,13 +3,33 @@ storefrontApp.component('vcLineItems', { templateUrl: "themes/assets/js/common-components/lineItems.tpl.liquid", bindings: { - items: '=' + order: '=' }, controller: ['$scope', function ($scope) { + var $ctrl = this; - $scope.addProductToCart = function (productId, quantity) { + $ctrl.addProductToCart = function (productId, quantity) { $scope.$emit('lineItemAdded', {productId, quantity}); } + $ctrl.getToggleTitle = function (group) { + return group.showConfiguration === false ? 'Show configuration' : 'Hide configuration'; + }; + + $ctrl.toggleConfiguration = function(group) { + group.showConfiguration = !group.showConfiguration; + }; + + function getConfiguredLineItems(groups) { + _.each(groups, group => { + angular.extend(group, { showConfiguration: false }); + _.each(group.parts, part => { + part.items = [group.items.find(x => x.id === part.selectedItemId)]; + }); + }); + } + + getConfiguredLineItems($ctrl.order.configuredGroups); + }] }); diff --git a/assets/js/common-components/lineItems.tpl.liquid b/assets/js/common-components/lineItems.tpl.liquid index 3d74f766..2e4a059e 100644 --- a/assets/js/common-components/lineItems.tpl.liquid +++ b/assets/js/common-components/lineItems.tpl.liquid @@ -1,17 +1,89 @@ - +
- - + + - - + + + + + + + + + + + + + + + + - - diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index cf3e7ce9..69f693a3 100644 --- a/assets/scss/_custom.scss +++ b/assets/scss/_custom.scss @@ -202,7 +202,7 @@ main { height: 40px; } -.dialog-data-item:not(:last-child) { +.dialog-data-item:not(:last-child), .order-line-item:not(:last-child) { border-bottom: 1px solid $gray-lighter; } diff --git a/assets/scss/custom/_tables.scss b/assets/scss/custom/_tables.scss index 51083350..c878c67f 100644 --- a/assets/scss/custom/_tables.scss +++ b/assets/scss/custom/_tables.scss @@ -71,6 +71,10 @@ padding: 14px 8px 14px 10px; } +.table > tbody + tbody { + border-top: 1px solid $gray-lighter; +} + .table.no-vertical-borders { > thead > tr > th, > tbody > tr > td { From 668a390a1b7c7765f125016feed1705aebd24aa7 Mon Sep 17 00:00:00 2001 From: Ilya Date: Wed, 28 Oct 2020 09:52:03 +0200 Subject: [PATCH 17/24] Fix popup title and message for add-to-cart dialog --- assets/js/product.js | 8 ++++++++ snippets/dialogs/recently-added-cart-item.liquid | 4 ++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/assets/js/product.js b/assets/js/product.js index 3c368fd0..9c547aa0 100644 --- a/assets/js/product.js +++ b/assets/js/product.js @@ -274,6 +274,14 @@ storefrontApp.controller('recentlyAddedCartItemDialogController', ['$rootScope', } } + $scope.getConfirmationTitle = function() { + if ($scope.dialogData && $scope.dialogData.items && $scope.dialogData.items.length === 1) { + return '1 item was added to cart'; + } else { + return `${$scope.dialogData.items.length} items were added to cart`; + } + } + $scope.quantityChanged = function(qty) { $scope.configurationQty = qty; } diff --git a/snippets/dialogs/recently-added-cart-item.liquid b/snippets/dialogs/recently-added-cart-item.liquid index 99a392b9..fb5003e4 100644 --- a/snippets/dialogs/recently-added-cart-item.liquid +++ b/snippets/dialogs/recently-added-cart-item.liquid @@ -1,6 +1,6 @@
{{ 'customer.order.product' | t }} {{ 'customer.order.quantity' | t }}{{ 'customer.order.total' | t }}{{ 'customer.order.quantity' | t }}{{ 'customer.order.total' | t }}
- {% raw %}{{ lineItem.name }}{% endraw %} + {% raw %}{{ group.product.name }}{% endraw %} + + +

+ + +

+ 		+ + + {% if settings.show_prices_with_taxes %} +

+ + {% else %} + + + {% endif %} + 		+
+ +
+
+
+
+
+
+ Configuration parts +
+
+
+ + + + + + + + + + + + + + + {% if settings.show_prices_with_taxes %} + + {% else %} + + {% endif %} + + +
ProductQuantityTotal
+ {% raw %}{{ part.items[0].name }}{% endraw %} + + +
+
+
+ {% raw %}{{ lineItem.name }}{% endraw %} @@ -21,10 +93,10 @@

{% endif %} 		+ + {% if settings.show_prices_with_taxes %}

@@ -35,7 +107,7 @@
- +