Skip to content

@W-18910688 - refactored error utils #2781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kzheng-sfdc merged 3 commits into from
Jul 10, 2025
Merged

@W-18910688 - refactored error utils #2781

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e10ee7b
@W-18910688 refactored cart-utils to error-utils and consolidate usage
kzheng-sfdc Jul 10, 2025
b811c2c
moved to hooks
kzheng-sfdc Jul 10, 2025
70699b3
fixed linter
kzheng-sfdc Jul 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/extension-chakra-storefront/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ module.exports = {
'<rootDir>/src/pages/checkout/partials/contact-info.test.js',
'<rootDir>/src/pages/checkout/partials/login-state.test.js',
'<rootDir>/src/utils/responsive-image.test.js',
'<rootDir>/src/utils/error-utils.test.js',
'<rootDir>/src/hooks/use-toast.test.js',
'<rootDir>/src/pages/product-detail/metadata.test.js',
'<rootDir>/src/pages/product-list/metadata.test.js',
Expand Down
18 changes: 5 additions & 13 deletions packages/extension-chakra-storefront/src/components/product-view/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ import withRegistration from '../../components/with-registration'
import {Skeleton as ImageGallerySkeleton} from '../../components/image-gallery'
import {HideOnDesktop, HideOnMobile} from '../../components/responsive'
import QuantityPicker from '../../components/quantity-picker'
import useToast from '../../hooks/use-toast'
import {API_ERROR_MESSAGE} from '../../constants'
import {useErrorHandler} from '../../utils/error-utils'
import DisplayPrice from '../../components/display-price'
import Swatch from '../../components/swatch-group/swatch'
import SwatchGroup from '../../components/swatch-group'
Expand Down Expand Up @@ -114,7 +113,7 @@ const ProductView = forwardRef(
ref
) => {
const {currency: activeCurrency} = useCurrency()
const toast = useToast()
const showError = useErrorHandler()
const intl = useIntl()
const location = useLocation()
const {
Expand Down Expand Up @@ -194,10 +193,10 @@ const ProductView = forwardRef(
const {scrollErrorIntoView = true} = opts
// Validate that all attributes are selected before proceeding.
const hasValidSelection = validateOrderability(variant, quantity, stockLevel)
const showError = !isProductASet && !isProductABundle && !hasValidSelection
const scrollToError = showError && scrollErrorIntoView
const hasError = !isProductASet && !isProductABundle && !hasValidSelection
const scrollToError = hasError && scrollErrorIntoView
Copy link
Contributor Author

@kzheng-sfdc kzheng-sfdc Jul 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rename the local scoped "showError" to "hasError" to avoid confusion.


toggleShowOptionsMessage(showError)
toggleShowOptionsMessage(hasError)

if (scrollToError) {
errorContainerRef.current.scrollIntoView({
Expand Down Expand Up @@ -242,13 +241,6 @@ const ProductView = forwardRef(
})
}

const showError = () => {
toast({
title: intl.formatMessage(API_ERROR_MESSAGE),
type: 'error'
})
}

const handleCartItem = async () => {
const hasValidSelection = validateAndShowError()

Expand Down
9 changes: 2 additions & 7 deletions packages/extension-chakra-storefront/src/pages/account/addresses.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import PageActionPlaceHolder from '../../components/page-action-placeholder'
import {useCurrentCustomer} from '../../hooks/use-current-customer'
import {useShopperCustomersMutation} from '@salesforce/commerce-sdk-react'
import {nanoid} from 'nanoid'
import {API_ERROR_MESSAGE} from '../../constants'
import {useErrorHandler} from '../../utils/error-utils'

const DEFAULT_SKELETON_COUNT = 3

Expand Down Expand Up @@ -147,6 +147,7 @@ const AccountAddresses = () => {
const [selectedAddressId, setSelectedAddressId] = useState(false)
const toast = useToast()
const form = useForm()
const showError = useErrorHandler()

const headingRef = useRef()
useEffect(() => {
Expand All @@ -165,12 +166,6 @@ const AccountAddresses = () => {
}, [addresses])

const hasAddresses = addresses?.length > 0
const showError = () => {
toast({
title: formatMessage(API_ERROR_MESSAGE),
type: 'error'
})
}
const submitForm = async (address) => {
try {
let data
Expand Down
4 changes: 2 additions & 2 deletions packages/extension-chakra-storefront/src/pages/cart/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {useCartOperations} from '../../hooks/cart/use-cart-operations'
import {useCartWishlist} from '../../hooks/cart/use-cart-wishlist'
import {useCartGiftItems} from '../../hooks/cart/use-cart-gift-items'
import {useCartDefaultShipping} from '../../hooks/cart/use-cart-default-shipping'
import {useCartErrorHandler} from './utils/cart-utils'
import {useErrorHandler} from '../../utils/error-utils'

// Cart Components
import CartTitle from './partials/cart-title'
Expand All @@ -31,7 +31,7 @@ const Cart = () => {
const {isRegistered} = customer || {}

// Error handling
const showError = useCartErrorHandler()
const showError = useErrorHandler()

// Product data and processing
const {isProductsPending, productsByItemId} = useCartProducts(basket)
Expand Down
11 changes: 2 additions & 9 deletions packages/extension-chakra-storefront/src/pages/checkout/partials/payment.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import PropTypes from 'prop-types'
import {defineMessage, FormattedMessage, useIntl} from 'react-intl'
import {Box, Button, Checkbox, Container, Heading, Stack, Text, Separator} from '@chakra-ui/react'
import {useForm} from 'react-hook-form'
import useToast from '../../../hooks/use-toast'
import {useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
import {useCurrentBasket} from '../../../hooks/use-current-basket'
import {useCheckout} from '../../../pages/checkout/util/checkout-context'
Expand All @@ -23,7 +22,7 @@ import PaymentForm from '../../../pages/checkout/partials/payment-form'
import ShippingAddressSelection from '../../../pages/checkout/partials/shipping-address-selection'
import AddressDisplay from '../../../components/address-display'
import {PromoCode, usePromoCode} from '../../../components/promo-code'
import {API_ERROR_MESSAGE} from '../../../constants'
import {useErrorHandler} from '../../../utils/error-utils'

const Payment = () => {
const {formatMessage} = useIntl()
Expand All @@ -42,13 +41,7 @@ const Payment = () => {
const {mutateAsync: removePaymentInstrumentFromBasket} = useShopperBasketsMutation(
'removePaymentInstrumentFromBasket'
)
const toast = useToast()
const showError = () => {
toast({
title: formatMessage(API_ERROR_MESSAGE),
type: 'error'
})
}
const showError = useErrorHandler()

const {step, STEPS, goToStep, goToNextStep} = useCheckout()

Expand Down
13 changes: 2 additions & 11 deletions packages/extension-chakra-storefront/src/pages/product-detail/use-product-detail-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
*/

import React, {useCallback, useEffect, useState} from 'react'
import {useIntl} from 'react-intl'
import {keepPreviousData} from '@tanstack/react-query'
import {HTTPNotFound, HTTPError} from '@salesforce/pwa-kit-react-sdk/ssr/universal/errors'

Expand All @@ -21,20 +20,18 @@ import {useHistory, useLocation, useParams} from 'react-router-dom'

import {useCurrentBasket, useVariant} from '../../hooks'
import useEinstein from '../../hooks/use-einstein'
import useToast from '../../hooks/use-toast'
import {useProductDetailWishlist} from './use-product-detail-wishlist'

import {normalizeSetBundleProduct, getUpdateBundleChildArray} from '../../utils/product-utils'
import {useErrorHandler} from '../../utils/error-utils'

import {API_ERROR_MESSAGE} from '../../constants'
import {rebuildPathWithParams} from '../../utils/url'

export const useProductDetailData = () => {
const {formatMessage} = useIntl()
const history = useHistory()
const location = useLocation()
const einstein = useEinstein()
const toast = useToast()
const showError = useErrorHandler()
const {handleAddToWishlist, isWishlistLoading} = useProductDetailWishlist()

/****************************** Basket *********************************/
Expand Down Expand Up @@ -183,12 +180,6 @@ export const useProductDetailData = () => {
}, [variant])

/**************** Add To Cart ****************/
const showError = () => {
toast({
title: formatMessage(API_ERROR_MESSAGE),
type: 'error'
})
}

const handleAddToCart = async (productSelectionValues) => {
try {
Expand Down
10 changes: 2 additions & 8 deletions packages/extension-chakra-storefront/src/pages/product-detail/use-product-detail-wishlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import {useShopperCustomersMutation, useCustomerId} from '@salesforce/commerce-s
import useNavigation from '../../hooks/use-navigation'
import useToast from '../../hooks/use-toast'
import {useWishList} from '../../hooks/use-wish-list'
import {useErrorHandler} from '../../utils/error-utils'
import {
API_ERROR_MESSAGE,
TOAST_ACTION_VIEW_WISHLIST,
TOAST_MESSAGE_ADDED_TO_WISHLIST,
TOAST_MESSAGE_ALREADY_IN_WISHLIST
Expand All @@ -28,19 +28,13 @@ export const useProductDetailWishlist = () => {
const navigate = useNavigation()
const customerId = useCustomerId()
const toast = useToast()
const showError = useErrorHandler()

const {data: wishlist, isLoading: isWishlistLoading} = useWishList()
const createCustomerProductListItem = useShopperCustomersMutation(
'createCustomerProductListItem'
)

const showError = () => {
toast({
title: formatMessage(API_ERROR_MESSAGE),
type: 'error'
})
}

const handleAddToWishlist = (product, variant, quantity) => {
const isItemInWishlist = wishlist?.customerProductListItems?.find(
(i) => i.productId === variant?.productId || i.productId === product?.id
Expand Down
8 changes: 4 additions & 4 deletions ...efront/src/pages/cart/utils/cart-utils.js → ...hakra-storefront/src/utils/error-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
*/
import {useIntl} from 'react-intl'
import useToast from '../../../hooks/use-toast'
import {API_ERROR_MESSAGE} from '../../../constants'
import useToast from '../hooks/use-toast'
import {API_ERROR_MESSAGE} from '../constants'

/**
* Custom hook for cart error handling
* Custom hook for error handling
* @returns {Function} showError function
*/
export const useCartErrorHandler = () => {
export const useErrorHandler = () => {
Copy link
Contributor

@alexvuong alexvuong Jul 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be in hooks folder. Utils is for generic function that is not React related.

Copy link
Contributor Author

@kzheng-sfdc kzheng-sfdc Jul 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

const {formatMessage} = useIntl()
const toast = useToast()

Expand Down
12 changes: 6 additions & 6 deletions ...t/src/pages/cart/utils/cart-utils.test.js → ...-storefront/src/utils/error-utils.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@
import React from 'react'
import {renderHook} from '@testing-library/react'
import {IntlProvider} from 'react-intl'
import {useCartErrorHandler} from './cart-utils'
import {useErrorHandler} from './error-utils'
import PropTypes from 'prop-types'

// Mock the toast hook
const mockToast = jest.fn()
jest.mock('../../../hooks/use-toast', () => ({
jest.mock('../hooks/use-toast', () => ({
__esModule: true,
default: () => mockToast
}))

// Mock the constants
jest.mock('../../../constants', () => ({
jest.mock('../constants', () => ({
API_ERROR_MESSAGE: {
id: 'api.error.message',
defaultMessage: 'Something went wrong. Please try again.'
Expand All @@ -37,21 +37,21 @@ const TestWrapper = ({children}) => {
)
}

describe('useCartErrorHandler', () => {
describe('useErrorHandler', () => {
beforeEach(() => {
mockToast.mockClear()
})

it('returns a showError function', () => {
const {result} = renderHook(() => useCartErrorHandler(), {
const {result} = renderHook(() => useErrorHandler(), {
wrapper: TestWrapper
})

expect(typeof result.current).toBe('function')
})

it('calls toast with correct parameters when showError is invoked', () => {
const {result} = renderHook(() => useCartErrorHandler(), {
const {result} = renderHook(() => useErrorHandler(), {
wrapper: TestWrapper
})

Expand Down
Loading