Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export default function PickupAddress() {
const {data: basket} = useCurrentBasket()

const selectedShippingAddress = basket?.shipments && basket?.shipments[0]?.shippingAddress
const isAddressFilled = selectedShippingAddress?.address1

// Check if basket is a pickup order
const isPickupOrder = basket?.shipments?.[0]?.shippingMethod?.c_storePickupEnabled === true
Expand Down Expand Up @@ -113,7 +114,7 @@ export default function PickupAddress() {
</Box>
</>
)}
{selectedShippingAddress && (
{isAddressFilled && (
<ToggleCardSummary>
<Text fontWeight="bold" fontSize="md" mb={2}>
<FormattedMessage
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export default function ShippingAddress() {
const {data: customer} = useCurrentCustomer()
const {data: basket} = useCurrentBasket()
const selectedShippingAddress = basket?.shipments && basket?.shipments[0]?.shippingAddress
const isAddressFilled = selectedShippingAddress?.address1 && selectedShippingAddress?.city
const {step, STEPS, goToStep, goToNextStep} = useCheckout()
const createCustomerAddress = useShopperCustomersMutation('createCustomerAddress')
const updateCustomerAddress = useShopperCustomersMutation('updateCustomerAddress')
Expand Down Expand Up @@ -131,7 +132,7 @@ export default function ShippingAddress() {
formTitleAriaLabel={shippingAddressAriaLabel}
/>
</ToggleCardEdit>
{selectedShippingAddress && (
{isAddressFilled && (
<ToggleCardSummary>
<AddressDisplay address={selectedShippingAddress} />
</ToggleCardSummary>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const CheckoutProvider = ({children}) => {

if (customer.isGuest && !basket.customerInfo?.email) {
step = STEPS.CONTACT_INFO
} else if (!basket.shipments[0]?.shippingAddress) {
} else if (!basket.shipments[0]?.shippingAddress?.address1) {
// Check if it's a pickup order
const isPickupOrder =
basket?.shipments[0]?.shippingMethod?.c_storePickupEnabled === true
Expand Down
118 changes: 67 additions & 51 deletions packages/template-retail-react-app/app/pages/product-detail/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const ProductDetail = () => {
const {data: basket, isLoading: isBasketLoading} = useCurrentBasket()
const {addItemToNewOrExistingBasket} = useShopperBasketsMutationHelper()
const updateItemsInBasketMutation = useShopperBasketsMutation('updateItemsInBasket')
const updateShipmentForBasketMutation = useShopperBasketsMutation('updateShipmentForBasket')
const {res} = useServerContext()
if (res) {
res.set(
Expand Down Expand Up @@ -344,6 +345,66 @@ const ProductDetail = () => {

const addToCartModal = useAddToCartModalContext()

/**
* Helper function to configure shipping method based on pickup selection
* @param {Object} basketResponse - The basket response from adding items
* @param {Array} productItems - Array of product items that were added
* @param {boolean} hasAnyPickupSelected - Whether any items have pickup selected
* @returns {Promise<void>}
*/
const configureShippingMethodIfNeeded = async (
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Created a helper function to DRY code

Copy link
Contributor

Choose a reason for hiding this comment

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

love it. is it possible to move this to use-pickup-shipment?

basketResponse,
productItems,
hasAnyPickupSelected
) => {
if (!basketResponse?.basketId || !basketResponse.shipments.length) {
return
}

const currentShippingMethod = basketResponse.shipments[0].shippingMethod
const isCurrentlyPickup = isCurrentShippingMethodPickup(currentShippingMethod)

// Only configure if there's a mismatch between pickup selection and current method
if (
(hasAnyPickupSelected && !isCurrentlyPickup) ||
(!hasAnyPickupSelected && isCurrentlyPickup)
) {
// Clear shipping address when there's a mismatch by updating shipment without shippingAddress
await updateShipmentForBasketMutation.mutateAsync({
parameters: {
basketId: basketResponse.basketId,
shipmentId: 'me'
},
body: {
shippingAddress: {}
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This doesn't fully clear shippingAddress from the basket shipment. The basket response still contains shippingAddress: { id: 'some-id' }. Does anyone know of any way to fully clear this using the API?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Workaround was to add the isAddressFilled boolean check to both <ShippingAddress> and <PickupAddress> components

Copy link
Contributor

@yhsieh1 yhsieh1 Jun 27, 2025

Choose a reason for hiding this comment

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

@yunakim714 I think you can try
/** * Removes a specified shipment and all associated product, gift certificate, shipping, and price adjustment line items from a basket. It is not allowed to remove the default shipment. */ RemoveShipmentFromBasket: 'removeShipmentFromBasket',

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@yhsieh1 I saw this API, but unfortunately we are modifying the shipping address of the default shipment, and thus we cannot delete that shipment.

})

// Fetch shipping methods to get available options
const {data: fetchedShippingMethods} = await refetchShippingMethods()

if (hasAnyPickupSelected && !isCurrentlyPickup) {
// Configure pickup shipment if pickup is selected but current method is not pickup
const pickupShippingMethodId = getPickupShippingMethodId(fetchedShippingMethods)
await configurePickupShipment(
basketResponse.basketId,
productItems,
selectedStore,
{
pickupShippingMethodId
}
)
} else if (!hasAnyPickupSelected && isCurrentlyPickup) {
// Configure regular shipping if pickup is not selected but current method is pickup
const defaultShippingMethodId = getDefaultShippingMethodId(fetchedShippingMethods)
await configureRegularShippingMethod(
basketResponse.basketId,
defaultShippingMethodId
)
}
}
}

const handleAddToCart = async (productSelectionValues = []) => {
try {
let productItems = productSelectionValues.map((item) => {
Expand Down Expand Up @@ -415,37 +476,11 @@ const ProductDetail = () => {
const basketResponse = await addItemToNewOrExistingBasket(productItems)

// Configure shipping method based on pickup selection
if (basketResponse?.basketId && basketResponse.shipments.length > 0) {
const currentShippingMethod = basketResponse.shipments[0].shippingMethod
const isCurrentlyPickup = isCurrentShippingMethodPickup(currentShippingMethod)

if (hasAnyPickupSelected && !isCurrentlyPickup) {
// Fetch shipping methods to get available options
const {data: fetchedShippingMethods} = await refetchShippingMethods()

// Configure pickup shipment if pickup is selected but current method is not pickup
const pickupShippingMethodId = getPickupShippingMethodId(fetchedShippingMethods)
await configurePickupShipment(
basketResponse.basketId,
productItems,
selectedStore,
{
pickupShippingMethodId
}
)
} else if (!hasAnyPickupSelected && isCurrentlyPickup) {
// Fetch shipping methods to get available options
const {data: fetchedShippingMethods} = await refetchShippingMethods()

// Configure regular shipping if pickup is not selected but current method is pickup
const defaultShippingMethodId =
getDefaultShippingMethodId(fetchedShippingMethods)
await configureRegularShippingMethod(
basketResponse.basketId,
defaultShippingMethodId
)
}
}
await configureShippingMethodIfNeeded(
basketResponse,
productItems,
hasAnyPickupSelected
)

const productItemsForEinstein = productSelectionValues.map(
({product, variant, quantity}) => ({
Expand Down Expand Up @@ -626,26 +661,7 @@ const ProductDetail = () => {
}

// Configure shipping method based on pickup selection
if (res.basketId && res.shipments.length > 0) {
const currentShippingMethod = res.shipments[0].shippingMethod
const isCurrentlyPickup = isCurrentShippingMethodPickup(currentShippingMethod)

// Fetch shipping methods to get available options
const {data: fetchedShippingMethods} = await refetchShippingMethods()

if (hasAnyPickupSelected && !isCurrentlyPickup) {
// Configure pickup shipment if pickup is selected but current method is not pickup
const pickupShippingMethodId = getPickupShippingMethodId(fetchedShippingMethods)
await configurePickupShipment(res.basketId, productItems, selectedStore, {
pickupShippingMethodId
})
} else if (!hasAnyPickupSelected && isCurrentlyPickup) {
// Configure regular shipping if pickup is not selected but current method is pickup
const defaultShippingMethodId =
getDefaultShippingMethodId(fetchedShippingMethods)
await configureRegularShippingMethod(res.basketId, defaultShippingMethodId)
}
}
await configureShippingMethodIfNeeded(res, productItems, hasAnyPickupSelected)

einstein.sendAddToCart(productItems)
// Open modal with itemsAdded and selectedQuantity for bundles
Expand Down
Loading