Account's wishlist: integrate hooks

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

@@ -5,6 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import {Query} from '@tanstack/react-query'
+import {ShopperCustomersTypes} from 'commerce-sdk-isomorphic'
 import {getCustomerProductListItem, QueryKeys} from './queryKeyHelpers'
 import {ApiClients, CacheUpdate, CacheUpdateMatrix, Tail} from '../types'
 import {
@@ -134,9 +135,32 @@ export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
     },
     updateCustomerPassword: noop,
     updateCustomerProductList: TODO('updateCustomerProductList'),
-    updateCustomerProductListItem(customerId, {parameters}) {
+    updateCustomerProductListItem(customerId, {parameters}, response) {
+        const {itemId, listId} = parameters
         return {
-            update: [{queryKey: getCustomerProductListItem.queryKey(parameters)}],
+            update: [
+                {queryKey: getCustomerProductListItem.queryKey(parameters)},
+                {
+                    // Also selectively update the lists
+                    queryKey: getCustomerProductLists.queryKey(parameters),
+                    updater: (oldData: ShopperCustomersTypes.CustomerProductListResult) => {
+                        return {
+                            ...oldData,
+                            data: oldData.data.map((list) =>
+                                list.id !== listId
+                                    ? list
+                                    : {
+                                          ...list,
+                                          customerProductListItems:
+                                              list.customerProductListItems?.map((item) =>
+                                                  item.id !== itemId ? item : response
+                                              )
+                                      }
+                            )
+                        }
+                    }
+                }
+            ],
             // TODO: Rather than invalidate, can we selectively update?
             invalidate: [
                 {queryKey: getCustomerProductList.queryKey(parameters)},

packages/template-retail-react-app/app/components/item-variant/item-price.jsx

@@ -78,7 +78,7 @@ const ItemPrice = ({currency, align = 'right', baseDirection = 'column', ...prop
 
                 <FormattedNumber
                     style="currency"
-                    currency={currency || basket.currency || activeCurrency}
+                    currency={currency || basket?.currency || activeCurrency}
                     value={displayPrice}
                 />
                 {hasDiscount && (

packages/template-retail-react-app/app/pages/account/wishlist/index.jsx

@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-import React, {useEffect, useState} from 'react'
+import React, {useState} from 'react'
 import {Stack, Heading} from '@chakra-ui/layout'
 import {FormattedMessage, useIntl} from 'react-intl'
 import {Box, Flex, Skeleton} from '@chakra-ui/react'
+import {useProducts, useShopperCustomersMutation} from 'commerce-sdk-react-preview'
 
-import useCustomer from '../../../commerce-api/hooks/useCustomer'
 import useNavigation from '../../../hooks/use-navigation'
-import useWishlist from '../../../hooks/use-wishlist'
 import {useToast} from '../../../hooks/use-toast'
+import {useWishList} from '../../../hooks/use-wish-list'
 
 import PageActionPlaceHolder from '../../../components/page-action-placeholder'
 import {HeartIcon} from '../../../components/icons'
@@ -21,69 +21,88 @@ import WishlistPrimaryAction from './partials/wishlist-primary-action'
 import WishlistSecondaryButtonGroup from './partials/wishlist-secondary-button-group'
 
 import {API_ERROR_MESSAGE} from '../../../constants'
+import {useCurrentCustomer} from '../../../hooks/use-current-customer'
 
 const numberOfSkeletonItems = 3
 
 const AccountWishlist = () => {
-    const customer = useCustomer()
     const navigate = useNavigation()
     const {formatMessage} = useIntl()
     const toast = useToast()
+
     const [selectedItem, setSelectedItem] = useState(undefined)
-    const [localQuantity, setLocalQuantity] = useState({})
     const [isWishlistItemLoading, setWishlistItemLoading] = useState(false)
-    const wishlist = useWishlist()
+
+    const {data: wishListData, isLoading: isWishListLoading} = useWishList()
+    const productIds = wishListData?.customerProductListItems?.map((item) => item.productId)
+
+    const {data: productsData, isLoading: isProductsLoading} = useProducts(
+        {parameters: {ids: productIds?.join(','), allImages: true}},
+        {enabled: Boolean(productIds)}
+    )
+
+    const wishListItems = wishListData?.customerProductListItems?.map((item, i) => {
+        return {
+            ...item,
+            product: productsData?.data?.[i]
+        }
+    })
+
+    const updateCustomerProductListItem = useShopperCustomersMutation(
+        'updateCustomerProductListItem'
+    )
+    const {data: customer} = useCurrentCustomer()
 
     const handleActionClicked = (itemId) => {
         setWishlistItemLoading(!!itemId)
         setSelectedItem(itemId)
     }
 
     const handleItemQuantityChanged = async (quantity, item) => {
-        // This local state allows the dropdown to show the desired quantity
-        // while the API call to update it is happening.
-        setLocalQuantity({...localQuantity, [item.productId]: quantity})
         setWishlistItemLoading(true)
         setSelectedItem(item.productId)
-        try {
-            await wishlist.updateListItem({
-                ...item,
-                quantity: parseInt(quantity)
-            })
-        } catch {
-            toast({
-                title: formatMessage(API_ERROR_MESSAGE),
-                status: 'error'
-            })
+
+        const body = {
+            ...item,
+            quantity: parseInt(quantity)
         }
-        setWishlistItemLoading(false)
-        setSelectedItem(undefined)
-        setLocalQuantity({...localQuantity, [item.productId]: undefined})
-    }
+        // To meet expected schema, remove the custom `product` we added
+        // TODO: better way?
+        delete body.product
 
-    useEffect(() => {
-        if (customer.isRegistered) {
-            // We want to reset the wishlist here
-            // because it is possible that a user
-            // adds an item to the wishlist on another page
-            // and the wishlist page may not have enough
-            // data to render the page.
-            // Reset the wishlist will make sure the
-            // initialization state is correct.
-            if (wishlist.isInitialized) {
-                wishlist.reset()
+        updateCustomerProductListItem.mutate(
+            {
+                body,
+                parameters: {
+                    customerId: customer.customerId,
+                    itemId: item.id,
+                    listId: wishListData.id
+                }
+            },
+            {
+                onError: () => {
+                    toast({
+                        title: formatMessage(API_ERROR_MESSAGE),
+                        status: 'error'
+                    })
+                },
+                onSuccess: () => {
+                    setWishlistItemLoading(false)
+                    setSelectedItem(undefined)
+                }
             }
+        )
+    }
 
-            wishlist.init({detail: true})
-        }
-    }, [customer.isRegistered])
+    const isPageLoading = wishListItems ? isProductsLoading : isWishListLoading
 
     return (
         <Stack spacing={4} data-testid="account-wishlist-page">
             <Heading as="h1" fontSize="2xl">
                 <FormattedMessage defaultMessage="Wishlist" id="account_wishlist.title.wishlist" />
             </Heading>
-            {!wishlist.hasDetail && (
+
+            {isPageLoading && (
                 <Box data-testid="sf-wishlist-skeleton">
                     {new Array(numberOfSkeletonItems).fill(0).map((i, idx) => (
                         <Box
@@ -108,7 +127,7 @@ const AccountWishlist = () => {
                 </Box>
             )}
 
-            {wishlist.hasDetail && wishlist.isEmpty && (
+            {!isPageLoading && !wishListItems && (
                 <PageActionPlaceHolder
                     data-testid="empty-wishlist"
                     icon={<HeartIcon boxSize={8} />}
@@ -129,16 +148,14 @@ const AccountWishlist = () => {
                 />
             )}
 
-            {wishlist.hasDetail &&
-                !wishlist.isEmpty &&
-                wishlist.items.map((item) => (
+            {!isPageLoading &&
+                wishListItems &&
+                wishListItems.map((item) => (
                     <ProductItem
                         key={item.id}
                         product={{
                             ...item.product,
-                            quantity: localQuantity[item.productId]
-                                ? localQuantity[item.productId]
-                                : item.quantity
+                            quantity: item.quantity
                         }}
                         showLoading={isWishlistItemLoading && selectedItem === item.productId}
                         primaryAction={<WishlistPrimaryAction />}