Skip to content

Commit

Permalink
fix(hub-react): properly handle case where last order is not defined
Browse files Browse the repository at this point in the history 
ref: #INC0116662

Signed-off-by: Jacques Larique <[email protected]>
  • Loading branch information
Jacques Larique committed Mar 7, 2025
1 parent 576983c commit 827756d
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 89 deletions.
179 changes: 93 additions & 86 deletions ...s/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,16 @@ export default function HubOrderTracking() {
[],
);

const getInitialStatus = (orderData: LastOrderTrackingResponse) => ({
date: orderData.date,
label:
orderData.status === 'delivered'
? 'INVOICE_IN_PROGRESS'
: 'custom_creation',
});
const getInitialStatus = (orderData: LastOrderTrackingResponse) => {
if (!orderData?.date || !orderData?.status) return undefined;
return {
date: orderData.date,
label:
orderData.status === 'delivered'
? 'INVOICE_IN_PROGRESS'
: 'custom_creation',
};
};

const getLatestStatus = (history: OrderHistory[]) => {
return history.reduce((latest, item) => {
Expand Down Expand Up @@ -112,15 +115,6 @@ export default function HubOrderTracking() {
});
};

if (error)
return (
<TileError
message={t('hub_order_tracking_error')}
className={`block p-1`}
refetch={refetch}
/>
);

return (
(isLoading || !isFreshCustomer) && (
<OsdsTile
Expand Down Expand Up @@ -161,80 +155,93 @@ export default function HubOrderTracking() {
</>
) : (
<>
<Suspense>
<Await
resolve={orderTrackingLinkAsync}
children={(orderTrackingLink: string) => (
<OsdsLink
href={orderTrackingLink}
target={OdsHTMLAnchorElementTarget._blank}
rel={OdsHTMLAnchorElementRel.noreferrer}
color={ODS_THEME_COLOR_INTENT.primary}
className="font-bold flex flex-col items-center justify-center mb-6 h-[40px]"
>
<span
slot="start"
className="flex flex-col items-center justify-center"
>
<OsdsChip
size={ODS_CHIP_SIZE.sm}
color={ODS_THEME_COLOR_INTENT.info}
{!error && orderDataResponse?.date && orderDataResponse?.status && (
<>
<Suspense>
<Await
resolve={orderTrackingLinkAsync}
children={(orderTrackingLink: string) => (
<OsdsLink
href={orderTrackingLink}
target={OdsHTMLAnchorElementTarget._blank}
rel={OdsHTMLAnchorElementRel.noreferrer}
color={ODS_THEME_COLOR_INTENT.primary}
className="font-bold flex flex-col items-center justify-center mb-6 h-[40px]"
>
{t('hub_order_tracking_order_id', {
orderId: orderDataResponse.orderId,
})}
</OsdsChip>
</span>
</OsdsLink>
)}
/>
</Suspense>
<div className="mb-6 flex justify-center gap-3 items-center flex-wrap">
<OsdsText
level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
hue={ODS_TEXT_COLOR_HUE._800}
color={ODS_THEME_COLOR_INTENT.primary}
className="inline-block mr-1"
>
<strong>{format(new Date(currentStatus.date))}</strong>
&nbsp;{t(`order_tracking_history_${currentStatus.label}`)}
</OsdsText>
<span className="inline-block size-[16px]">
<OsdsIcon
size={ODS_ICON_SIZE.xxs}
color={ODS_THEME_COLOR_INTENT.text}
name={
!ERROR_STATUS.includes(currentStatus.label) &&
!isWaitingPayment
? ODS_ICON_NAME.OK
: ODS_ICON_NAME.CLOSE
}
></OsdsIcon>
</span>
</div>
<Suspense>
<Await
resolve={ordersTrackingLinkAsync}
children={(ordersTrackingLink: string) => (
<OsdsLink
href={ordersTrackingLink}
target={OdsHTMLAnchorElementTarget._top}
<span
slot="start"
className="flex flex-col items-center justify-center"
>
<OsdsChip
size={ODS_CHIP_SIZE.sm}
color={ODS_THEME_COLOR_INTENT.info}
>
{t('hub_order_tracking_order_id', {
orderId: orderDataResponse.orderId,
})}
</OsdsChip>
</span>
</OsdsLink>
)}
/>
</Suspense>
<div className="mb-6 flex justify-center gap-3 items-center flex-wrap">
<OsdsText
level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
hue={ODS_TEXT_COLOR_HUE._800}
color={ODS_THEME_COLOR_INTENT.primary}
onClick={handleSeeAll}
className="font-bold mb-1 flex flex-col items-center justify-center"
className="inline-block mr-1"
>
{t('hub_order_tracking_see_all')}
<span slot="end">
<OsdsIcon
size={ODS_ICON_SIZE.xs}
name={ODS_ICON_NAME.ARROW_RIGHT}
color={ODS_THEME_COLOR_INTENT.info}
/>
</span>
</OsdsLink>
)}
<strong>{format(new Date(currentStatus.date))}</strong>
&nbsp;{t(`order_tracking_history_${currentStatus.label}`)}
</OsdsText>
<span className="inline-block size-[16px]">
<OsdsIcon
size={ODS_ICON_SIZE.xxs}
color={ODS_THEME_COLOR_INTENT.text}
name={
!ERROR_STATUS.includes(currentStatus.label) &&
!isWaitingPayment
? ODS_ICON_NAME.OK
: ODS_ICON_NAME.CLOSE
}
></OsdsIcon>
</span>
</div>
<Suspense>
<Await
resolve={ordersTrackingLinkAsync}
children={(ordersTrackingLink: string) => (
<OsdsLink
href={ordersTrackingLink}
target={OdsHTMLAnchorElementTarget._top}
color={ODS_THEME_COLOR_INTENT.primary}
onClick={handleSeeAll}
className="font-bold mb-1 flex flex-col items-center justify-center"
>
{t('hub_order_tracking_see_all')}
<span slot="end">
<OsdsIcon
size={ODS_ICON_SIZE.xs}
name={ODS_ICON_NAME.ARROW_RIGHT}
color={ODS_THEME_COLOR_INTENT.info}
/>
</span>
</OsdsLink>
)}
/>
</Suspense>
</>
)}
{(error ||
!orderDataResponse?.date ||
!orderDataResponse?.status) && (
<TileError
message={t('hub_order_tracking_error')}
className={`!p-1`}
refetch={refetch}
/>
</Suspense>
)}
</>
)}
</div>
Expand Down
3 changes: 2 additions & 1 deletion packages/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ vi.mock('@/components/tile-error/TileError.component', () => ({
}));

const useLastOrderTrackingMockValue: any = {
data: { orderId: 12345, history: [], date: new Date() },
data: { orderId: 12345, history: [], date: new Date(), status: 'delivered' },
isFetched: true,
isLoading: false,
refetch,
Expand Down Expand Up @@ -105,6 +105,7 @@ describe('HubOrderTracking Component', async () => {
});

it('displays TileError when there is an error', async () => {
useLastOrderTrackingMockValue.isLoading = false;
useLastOrderTrackingMockValue.error = true;

renderComponent(<HubOrderTracking />);
Expand Down
4 changes: 2 additions & 2 deletions packages/manager/apps/hub-react/src/data/hooks/lastOrderTracking/useLastOrderTracking.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export const useLastOrderTracking = () => {
error: lastOrderError,
refetch: refetchLastOrder,
} = useLastOrder();
const orderId = lastOrder?.data.orderId;
const orderDate = lastOrder?.data.date;
const orderId = lastOrder?.data?.orderId;
const orderDate = lastOrder?.data?.date;

// Use dependent queries to wait for the lastOrder to load
const {
Expand Down

0 comments on commit 827756d

Please sign in to comment.