From 01e5f0ef80b7d549b264614a703b11431c8fc12d Mon Sep 17 00:00:00 2001 From: Tarun Date: Fri, 21 Apr 2023 12:12:34 +0530 Subject: [PATCH 1/4] PWA-3107::There's no message to inform the user the page refreshed its content by clicking/pressing either one of the 2 buttons. --- .../venia-ui/lib/components/MiniCart/ProductList/item.js | 8 ++++++-- .../lib/components/MiniCart/ProductList/item.module.css | 6 ++++++ .../lib/components/MiniCart/ProductList/productList.js | 4 +++- packages/venia-ui/lib/components/MiniCart/miniCart.js | 2 ++ 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/item.js b/packages/venia-ui/lib/components/MiniCart/ProductList/item.js index 0314c51266..1a3fe73898 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/item.js +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/item.js @@ -27,7 +27,8 @@ const Item = props => { prices, closeMiniCart, configurableThumbnailSource, - storeUrlSuffix + storeUrlSuffix, + totalQuantity } = props; const { formatMessage } = useIntl(); @@ -61,6 +62,8 @@ const Item = props => { defaultMessage: 'Delete' }); const buttonStatus = isDeleting ? minicartButtonDeleted : miniCartButton; + + const announceCartCount = totalQuantity > 1 ? 'There are '+totalQuantity+' items in your cart' : 'There is only one item in your cart'; return (
@@ -124,7 +127,7 @@ const Item = props => { disabled={isDeleting} data-cy="MiniCart-Item-deleteButton" aria-label={buttonStatus} - > + > { }} /> + {announceCartCount}
); }; diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css b/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css index 347913ea79..1730dd1eec 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css @@ -64,3 +64,9 @@ grid-column: 3 / span 1; grid-row: 1 / span 1; } + +.hide { + visibility: hidden; + max-width: 1px; + max-height: 1px; +} \ No newline at end of file diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js b/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js index 869afecdd7..ed76c4c732 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js @@ -13,7 +13,8 @@ const ProductList = props => { classes: propClasses, closeMiniCart, configurableThumbnailSource, - storeUrlSuffix + storeUrlSuffix, + totalQuantity } = props; const classes = useStyle(defaultClasses, propClasses); @@ -27,6 +28,7 @@ const ProductList = props => { handleRemoveItem={handleRemoveItem} configurableThumbnailSource={configurableThumbnailSource} storeUrlSuffix={storeUrlSuffix} + totalQuantity={totalQuantity} /> )); } diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.js b/packages/venia-ui/lib/components/MiniCart/miniCart.js index b7a82ea632..6e8a7d7d1e 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.js +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.js @@ -116,6 +116,7 @@ const MiniCart = React.forwardRef((props, ref) => { id={'miniCart.emptyMessage'} defaultMessage={'There are no items in your cart.'} /> + ) : ( @@ -129,6 +130,7 @@ const MiniCart = React.forwardRef((props, ref) => { closeMiniCart={closeMiniCart} configurableThumbnailSource={configurableThumbnailSource} storeUrlSuffix={storeUrlSuffix} + totalQuantity={totalQuantity} />
From 8fb0ecdb51a8374008a7dfad8a2df76c0433b387 Mon Sep 17 00:00:00 2001 From: Tarun Date: Fri, 21 Apr 2023 13:08:03 +0530 Subject: [PATCH 2/4] PWA-3107::updated snapshots --- .../__tests__/__snapshots__/item.spec.js.snap | 32 +++++++++++++++++++ .../components/MiniCart/ProductList/item.js | 18 ++++++++--- .../MiniCart/ProductList/item.module.css | 2 +- .../lib/components/MiniCart/miniCart.js | 9 +++++- 4 files changed, 55 insertions(+), 6 deletions(-) diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap b/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap index 0940c87e58..f526dea146 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap @@ -156,6 +156,14 @@ exports[`Should disable delete icon while loading 1`] = ` + + There is only one item left in your cart +
`; @@ -315,6 +323,14 @@ exports[`Should render correctly 1`] = ` + + There is only one item left in your cart + `; @@ -474,6 +490,14 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] = + + There is only one item left in your cart + `; @@ -633,5 +657,13 @@ exports[`Should render correctly with out of stock product 1`] = ` + + There is only one item left in your cart + `; diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/item.js b/packages/venia-ui/lib/components/MiniCart/ProductList/item.js index 1a3fe73898..8dc201f572 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/item.js +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/item.js @@ -62,8 +62,11 @@ const Item = props => { defaultMessage: 'Delete' }); const buttonStatus = isDeleting ? minicartButtonDeleted : miniCartButton; - - const announceCartCount = totalQuantity > 1 ? 'There are '+totalQuantity+' items in your cart' : 'There is only one item in your cart'; + + const announceCartCount = + totalQuantity > 1 + ? 'There are ' + totalQuantity + ' items left in your cart' + : 'There is only one item left in your cart'; return (
@@ -127,7 +130,7 @@ const Item = props => { disabled={isDeleting} data-cy="MiniCart-Item-deleteButton" aria-label={buttonStatus} - > + > { }} /> - {announceCartCount} + + {announceCartCount} +
); }; diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css b/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css index 1730dd1eec..05bd2244e6 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css @@ -69,4 +69,4 @@ visibility: hidden; max-width: 1px; max-height: 1px; -} \ No newline at end of file +} diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.js b/packages/venia-ui/lib/components/MiniCart/miniCart.js index 6e8a7d7d1e..b73a2544ed 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.js +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.js @@ -116,7 +116,14 @@ const MiniCart = React.forwardRef((props, ref) => { id={'miniCart.emptyMessage'} defaultMessage={'There are no items in your cart.'} /> - + ) : ( From 32ca42b92d6470e1c48645cef7005b0acd0ab724 Mon Sep 17 00:00:00 2001 From: Tarun Date: Mon, 24 Apr 2023 12:09:11 +0530 Subject: [PATCH 3/4] PWA-3107::Fixed lint issues --- .../lib/components/MiniCart/ProductList/productList.js | 3 ++- packages/venia-ui/lib/components/MiniCart/miniCart.js | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js b/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js index ed76c4c732..54d5b8a5c8 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js @@ -37,7 +37,8 @@ const ProductList = props => { handleRemoveItem, closeMiniCart, configurableThumbnailSource, - storeUrlSuffix + storeUrlSuffix, + totalQuantity ]); return ( diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.js b/packages/venia-ui/lib/components/MiniCart/miniCart.js index b73a2544ed..f7b652df15 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.js +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.js @@ -64,6 +64,8 @@ const MiniCart = React.forwardRef((props, ref) => { const [, { addToast }] = useToasts(); + const announceMiniCartCount = "There are no items in your cart."; + useEffect(() => { if (errorMessage) { addToast({ @@ -122,7 +124,7 @@ const MiniCart = React.forwardRef((props, ref) => { aria-hidden="false" aria-live="polite" > - There are no items in your cart. + {announceMiniCartCount} From 659bf2b1bbc06e19cb10ded044d896d65c292869 Mon Sep 17 00:00:00 2001 From: Tarun Date: Mon, 24 Apr 2023 13:26:20 +0530 Subject: [PATCH 4/4] PWA-3107:: test case and lint updates --- packages/venia-ui/lib/components/MiniCart/miniCart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.js b/packages/venia-ui/lib/components/MiniCart/miniCart.js index f7b652df15..8470cdc699 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.js +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.js @@ -64,7 +64,7 @@ const MiniCart = React.forwardRef((props, ref) => { const [, { addToast }] = useToasts(); - const announceMiniCartCount = "There are no items in your cart."; + const announceMiniCartCount = 'There are no items in your cart.'; useEffect(() => { if (errorMessage) {