Skip to content

@W-18902385 - [BOPIS][Bug] Fix prefilling shipping address bug #2673

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
yunakim714 merged 4 commits into from
Jun 27, 2025
Merged

@W-18902385 - [BOPIS][Bug] Fix prefilling shipping address bug #2673

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a83bbe0
fix prefilling shipping address bug
yunakim714 Jun 27, 2025
a2bca5c
check for address1 and city
yunakim714 Jun 27, 2025
9393c55
Merge branch 'feature/shop-in-store' into W-18902385-bug-prefill-address
yunakim714 Jun 27, 2025
65a0449
refactor
yunakim714 Jun 27, 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
3 changes: 2 additions & 1 deletion packages/template-retail-react-app/app/pages/checkout/partials/pickup-address.jsx
View file
Open in desktop
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 && selectedShippingAddress?.city
Copy link
Contributor

@patricksullivansf patricksullivansf Jun 27, 2025

Choose a reason for hiding this comment

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

is this i18n safe to assume addresses have a street and city?


// 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
3 changes: 2 additions & 1 deletion packages/template-retail-react-app/app/pages/checkout/partials/shipping-address.jsx
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/template-retail-react-app/app/pages/checkout/util/checkout-context.js
View file
Open in desktop
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
View file
Open in desktop
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

@yunakim714 yunakim714 Jun 27, 2025

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

@patricksullivansf patricksullivansf Jun 27, 2025

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

@yunakim714 yunakim714 Jun 27, 2025

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

@yunakim714 yunakim714 Jun 27, 2025

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 •
edited
Loading

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

@yunakim714 yunakim714 Jun 27, 2025

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