Skip to content

Commit d82757a

Browse files
sf-deepali-bharmalsf-deepali-bharmal
authored
@W-20931847 - OMS multiple shipment support with pickups (#3613)
* OMS multiple shipment support with pickups nit Empty commit to trigger CI Empty commit to trigger CI * rename variable rename variable
1 parent 5c30741 commit d82757a

File tree

3 files changed

+137
-107
lines changed

3 files changed

+137
-107
lines changed

‎packages/template-retail-react-app/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
- Integrate Order Details page to display orders data from OMS [#3573](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3573)
66
- Integrate Order History page to display data from OMS [#3581](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3581)
77
- Add shipping display support for OMS [#3588](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3588)
8+
- BOPIS multishipment with OMS [#3613] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3613)
89
- [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)
910
- Update "Continue Securely" button text to "Continue" for passwordless login [#3556](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3556)
1011

‎packages/template-retail-react-app/app/pages/account/order-detail.jsx‎

Lines changed: 110 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,15 @@ const AccountOrderDetail = () => {
134134
)
135135
const isLoading = isOrderLoading || !order
136136

137+
// Check if order has OMS data
138+
const isOmsOrder = useMemo(() => !!order?.omsData, [order?.omsData])
139+
140+
// Check if order is multi-shipment order
141+
const isMultiShipmentOrder = useMemo(
142+
() => (order?.omsData?.shipments?.length ?? 0) > 1 || (order?.shipments?.length ?? 0) > 1,
143+
[isOmsOrder, order?.omsData?.shipments?.length, order?.shipments?.length]
144+
)
145+
137146
const {pickupShipments, deliveryShipments} = useMemo(() => {
138147
return storeLocatorEnabled
139148
? groupShipmentsByDeliveryOption(order)
@@ -164,6 +173,67 @@ const AccountOrderDetail = () => {
164173
[storeData?.data]
165174
)
166175

176+
const renderShippingMethod = (
177+
shippingMethodName,
178+
shippingStatus,
179+
trackingNumber,
180+
trackingUrl,
181+
shipmentsLength,
182+
index
183+
) => (
184+
<Stack spacing={1}>
185+
<Heading as="h2" fontSize="sm" pt={1}>
186+
{shipmentsLength > 1 ? (
187+
<FormattedMessage
188+
defaultMessage="Shipping Method {number}"
189+
id="account_order_detail.heading.shipping_method_number"
190+
values={{number: index + 1}}
191+
/>
192+
) : (
193+
<FormattedMessage
194+
defaultMessage="Shipping Method"
195+
id="account_order_detail.heading.shipping_method"
196+
/>
197+
)}
198+
</Heading>
199+
<Box>
200+
<Text fontSize="sm" textTransform="titlecase">
201+
{{
202+
not_shipped: formatMessage({
203+
defaultMessage: 'Not shipped',
204+
id: 'account_order_detail.shipping_status.not_shipped'
205+
}),
206+
part_shipped: formatMessage({
207+
defaultMessage: 'Partially shipped',
208+
id: 'account_order_detail.shipping_status.part_shipped'
209+
}),
210+
shipped: formatMessage({
211+
defaultMessage: 'Shipped',
212+
id: 'account_order_detail.shipping_status.shipped'
213+
})
214+
}[shippingStatus] || shippingStatus}
215+
</Text>
216+
<Text fontSize="sm">{shippingMethodName}</Text>
217+
{trackingNumber && (
218+
<Text fontSize="sm">
219+
<FormattedMessage
220+
defaultMessage="Tracking Number"
221+
id="account_order_detail.label.tracking_number"
222+
/>
223+
:{' '}
224+
{trackingUrl ? (
225+
<ChakraLink href={trackingUrl} isExternal color="blue.600">
226+
{trackingNumber}
227+
</ChakraLink>
228+
) : (
229+
trackingNumber
230+
)}
231+
</Text>
232+
)}
233+
</Box>
234+
</Stack>
235+
)
236+
167237
const paymentCard = order?.paymentInstruments?.[0]?.paymentCard
168238
const CardIcon = getCreditCardIcon(paymentCard?.cardType)
169239
const itemCount = order?.productItems?.reduce((count, item) => item.quantity + count, 0) || 0
@@ -325,86 +395,31 @@ const AccountOrderDetail = () => {
325395
</Stack>
326396
)
327397
})}
398+
{/* Any type of Non-OMS or any type of single shipment order: show DeliveryMethods and Shipments info*/}
399+
{(!isOmsOrder || !isMultiShipmentOrder) &&
400+
deliveryShipments.map((shipment, index) => {
401+
const omsShipment = isOmsOrder
402+
? order.omsData.shipments?.[index]
403+
: null
328404

329-
{/* Delivery Shipments */}
330-
{deliveryShipments.map((shipment, index) => {
331-
// Hide shipping address for OMS multi-shipment orders
332-
// Can't reliably correlate OMS shipments to ECOM addresses by index
333-
const isOmsOrder = !!order?.omsData
334-
const omsShipment = isOmsOrder
335-
? order.omsData.shipments?.[index]
336-
: null
337-
const isOmsMultiShipment =
338-
isOmsOrder &&
339-
(order.omsData.shipments?.length > 1 ||
340-
order.shipments?.length > 1)
341-
342-
const shippingMethodName =
343-
omsShipment?.provider || shipment.shippingMethod.name
344-
const shippingStatus =
345-
omsShipment?.status || shipment.shippingStatus
346-
const trackingNumber =
347-
omsShipment?.trackingNumber || shipment.trackingNumber
348-
const trackingUrl = omsShipment?.trackingUrl
405+
const shippingMethodName =
406+
omsShipment?.provider || shipment.shippingMethod.name
407+
const shippingStatus =
408+
omsShipment?.status || shipment.shippingStatus
409+
const trackingNumber =
410+
omsShipment?.trackingNumber || shipment.trackingNumber
411+
const trackingUrl = omsShipment?.trackingUrl
349412

350-
return (
351-
<React.Fragment key={`delivery-${index}`}>
352-
<Stack spacing={1}>
353-
<Heading as="h2" fontSize="sm" pt={1}>
354-
{deliveryShipments.length > 1 ? (
355-
<FormattedMessage
356-
defaultMessage="Shipping Method {number}"
357-
id="account_order_detail.heading.shipping_method_number"
358-
values={{number: index + 1}}
359-
/>
360-
) : (
361-
<FormattedMessage
362-
defaultMessage="Shipping Method"
363-
id="account_order_detail.heading.shipping_method"
364-
/>
365-
)}
366-
</Heading>
367-
<Box>
368-
<Text fontSize="sm" textTransform="titlecase">
369-
{{
370-
not_shipped: formatMessage({
371-
defaultMessage: 'Not shipped',
372-
id: 'account_order_detail.shipping_status.not_shipped'
373-
}),
374-
part_shipped: formatMessage({
375-
defaultMessage: 'Partially shipped',
376-
id: 'account_order_detail.shipping_status.part_shipped'
377-
}),
378-
shipped: formatMessage({
379-
defaultMessage: 'Shipped',
380-
id: 'account_order_detail.shipping_status.shipped'
381-
})
382-
}[shippingStatus] || shippingStatus}
383-
</Text>
384-
<Text fontSize="sm">{shippingMethodName}</Text>
385-
{trackingNumber && (
386-
<Text fontSize="sm">
387-
<FormattedMessage
388-
defaultMessage="Tracking Number"
389-
id="account_order_detail.label.tracking_number"
390-
/>
391-
:{' '}
392-
{trackingUrl ? (
393-
<ChakraLink
394-
href={trackingUrl}
395-
isExternal
396-
color="blue.600"
397-
>
398-
{trackingNumber}
399-
</ChakraLink>
400-
) : (
401-
trackingNumber
402-
)}
403-
</Text>
404-
)}
405-
</Box>
406-
</Stack>
407-
{!isOmsMultiShipment && (
413+
return (
414+
<React.Fragment key={`delivery-${index}`}>
415+
{renderShippingMethod(
416+
shippingMethodName,
417+
shippingStatus,
418+
trackingNumber,
419+
trackingUrl,
420+
deliveryShipments.length,
421+
index
422+
)}
408423
<Stack spacing={1}>
409424
<Heading as="h2" fontSize="sm" pt={1}>
410425
{deliveryShipments.length > 1 ? (
@@ -437,10 +452,25 @@ const AccountOrderDetail = () => {
437452
</Text>
438453
</Box>
439454
</Stack>
455+
</React.Fragment>
456+
)
457+
})}
458+
459+
{/* Any OMS multi-shipment: Only show OMS Shipments info;*/}
460+
{isOmsOrder &&
461+
isMultiShipmentOrder &&
462+
order?.omsData?.shipments?.map((shipment, index) => (
463+
<React.Fragment key={`oms-shipment-${index}`}>
464+
{renderShippingMethod(
465+
shipment.provider,
466+
shipment.status,
467+
shipment.trackingNumber,
468+
shipment.trackingUrl,
469+
order?.omsData?.shipments?.length ?? 0,
470+
index
440471
)}
441472
</React.Fragment>
442-
)
443-
})}
473+
))}
444474

445475
{/* Payment Method */}
446476
{paymentCard && (

0 commit comments

Comments
 (0)