Skip to content

@W-20931847 - OMS multiple shipment support with pickups #3613

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
sf-deepali-bharmal merged 2 commits into from
Jan 29, 2026
Merged

@W-20931847 - OMS multiple shipment support with pickups #3613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8dc7628
OMS multiple shipment support with pickups
sf-deepali-bharmal Jan 27, 2026
04aa883
rename variable
sf-deepali-bharmal Jan 29, 2026
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/template-retail-react-app/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
- Integrate Order Details page to display orders data from OMS [#3573](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3573)
- Integrate Order History page to display data from OMS [#3581](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3581)
- Add shipping display support for OMS [#3588](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3588)
- BOPIS multishipment with OMS [#3613] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3613)
- [Feature] Update passwordless login and password reset to use email mode by default. The mode can now be configured across the login page, auth modal, and checkout page [#3525](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3525)
- Update "Continue Securely" button text to "Continue" for passwordless login [#3556](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3556)

Expand Down
190 changes: 110 additions & 80 deletions packages/template-retail-react-app/app/pages/account/order-detail.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,15 @@ const AccountOrderDetail = () => {
)
const isLoading = isOrderLoading || !order

// Check if order has OMS data
const isOmsOrder = useMemo(() => !!order?.omsData, [order?.omsData])

// Check if order is multi-shipment order
const isMultiShipmentOrder = useMemo(
() => (order?.omsData?.shipments?.length ?? 0) > 1 || (order?.shipments?.length ?? 0) > 1,
[isOmsOrder, order?.omsData?.shipments?.length, order?.shipments?.length]
)

const {pickupShipments, deliveryShipments} = useMemo(() => {
return storeLocatorEnabled
? groupShipmentsByDeliveryOption(order)
Expand Down Expand Up @@ -164,6 +173,67 @@ const AccountOrderDetail = () => {
[storeData?.data]
)

const renderShippingMethod = (
shippingMethodName,
shippingStatus,
trackingNumber,
trackingUrl,
shipmentsLength,
index
) => (
<Stack spacing={1}>
<Heading as="h2" fontSize="sm" pt={1}>
{shipmentsLength > 1 ? (
<FormattedMessage
defaultMessage="Shipping Method {number}"
id="account_order_detail.heading.shipping_method_number"
values={{number: index + 1}}
/>
) : (
<FormattedMessage
defaultMessage="Shipping Method"
id="account_order_detail.heading.shipping_method"
/>
)}
</Heading>
<Box>
<Text fontSize="sm" textTransform="titlecase">
{{
not_shipped: formatMessage({
defaultMessage: 'Not shipped',
id: 'account_order_detail.shipping_status.not_shipped'
}),
part_shipped: formatMessage({
defaultMessage: 'Partially shipped',
id: 'account_order_detail.shipping_status.part_shipped'
}),
shipped: formatMessage({
defaultMessage: 'Shipped',
id: 'account_order_detail.shipping_status.shipped'
})
}[shippingStatus] || shippingStatus}
</Text>
<Text fontSize="sm">{shippingMethodName}</Text>
{trackingNumber && (
<Text fontSize="sm">
<FormattedMessage
defaultMessage="Tracking Number"
id="account_order_detail.label.tracking_number"
/>
:{' '}
{trackingUrl ? (
<ChakraLink href={trackingUrl} isExternal color="blue.600">
{trackingNumber}
</ChakraLink>
) : (
trackingNumber
)}
</Text>
)}
</Box>
</Stack>
)

Copy link
Contributor Author

@sf-deepali-bharmal sf-deepali-bharmal Jan 27, 2026

Choose a reason for hiding this comment

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

Implementation is same as before, just extracted into a function.

const paymentCard = order?.paymentInstruments?.[0]?.paymentCard
const CardIcon = getCreditCardIcon(paymentCard?.cardType)
const itemCount = order?.productItems?.reduce((count, item) => item.quantity + count, 0) || 0
Expand Down Expand Up @@ -325,86 +395,31 @@ const AccountOrderDetail = () => {
</Stack>
)
})}
{/* Any type of Non-OMS or any type of single shipment order: show DeliveryMethods and Shipments info*/}
{(!isOmsOrder || !isMultiShipmentOrder) &&
deliveryShipments.map((shipment, index) => {
const omsShipment = isOmsOrder
? order.omsData.shipments?.[index]
: null

{/* Delivery Shipments */}
{deliveryShipments.map((shipment, index) => {
// Hide shipping address for OMS multi-shipment orders
// Can't reliably correlate OMS shipments to ECOM addresses by index
const isOmsOrder = !!order?.omsData
const omsShipment = isOmsOrder
? order.omsData.shipments?.[index]
: null
const isOmsMultiShipment =
isOmsOrder &&
(order.omsData.shipments?.length > 1 ||
order.shipments?.length > 1)

const shippingMethodName =
omsShipment?.provider || shipment.shippingMethod.name
const shippingStatus =
omsShipment?.status || shipment.shippingStatus
const trackingNumber =
omsShipment?.trackingNumber || shipment.trackingNumber
const trackingUrl = omsShipment?.trackingUrl
const shippingMethodName =
omsShipment?.provider || shipment.shippingMethod.name
const shippingStatus =
omsShipment?.status || shipment.shippingStatus
const trackingNumber =
omsShipment?.trackingNumber || shipment.trackingNumber
const trackingUrl = omsShipment?.trackingUrl

return (
<React.Fragment key={`delivery-${index}`}>
<Stack spacing={1}>
<Heading as="h2" fontSize="sm" pt={1}>
{deliveryShipments.length > 1 ? (
<FormattedMessage
defaultMessage="Shipping Method {number}"
id="account_order_detail.heading.shipping_method_number"
values={{number: index + 1}}
/>
) : (
<FormattedMessage
defaultMessage="Shipping Method"
id="account_order_detail.heading.shipping_method"
/>
)}
</Heading>
<Box>
<Text fontSize="sm" textTransform="titlecase">
{{
not_shipped: formatMessage({
defaultMessage: 'Not shipped',
id: 'account_order_detail.shipping_status.not_shipped'
}),
part_shipped: formatMessage({
defaultMessage: 'Partially shipped',
id: 'account_order_detail.shipping_status.part_shipped'
}),
shipped: formatMessage({
defaultMessage: 'Shipped',
id: 'account_order_detail.shipping_status.shipped'
})
}[shippingStatus] || shippingStatus}
</Text>
<Text fontSize="sm">{shippingMethodName}</Text>
{trackingNumber && (
<Text fontSize="sm">
<FormattedMessage
defaultMessage="Tracking Number"
id="account_order_detail.label.tracking_number"
/>
:{' '}
{trackingUrl ? (
<ChakraLink
href={trackingUrl}
isExternal
color="blue.600"
>
{trackingNumber}
</ChakraLink>
) : (
trackingNumber
)}
</Text>
)}
</Box>
</Stack>
{!isOmsMultiShipment && (
return (
<React.Fragment key={`delivery-${index}`}>
{renderShippingMethod(
shippingMethodName,
shippingStatus,
trackingNumber,
trackingUrl,
deliveryShipments.length,
index
)}
<Stack spacing={1}>
<Heading as="h2" fontSize="sm" pt={1}>
{deliveryShipments.length > 1 ? (
Expand Down Expand Up @@ -437,10 +452,25 @@ const AccountOrderDetail = () => {
</Text>
</Box>
</Stack>
</React.Fragment>
)
})}

{/* Any OMS multi-shipment: Only show OMS Shipments info;*/}
{isOmsOrder &&
isMultiShipmentOrder &&
order?.omsData?.shipments?.map((shipment, index) => (
<React.Fragment key={`oms-shipment-${index}`}>
{renderShippingMethod(
shipment.provider,
shipment.status,
shipment.trackingNumber,
shipment.trackingUrl,
order?.omsData?.shipments?.length ?? 0,
index
)}
</React.Fragment>
)
})}
))}

{/* Payment Method */}
{paymentCard && (
Expand Down
Loading
Loading