diff --git a/packages/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.component.tsx b/packages/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.component.tsx index b34302aef53f..ec24d17a2e51 100644 --- a/packages/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.component.tsx +++ b/packages/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.component.tsx @@ -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) => { @@ -112,15 +115,6 @@ export default function HubOrderTracking() { }); }; - if (error) - return ( - - ); - return ( (isLoading || !isFreshCustomer) && ( ) : ( <> - - ( - - - + + ( + - {t('hub_order_tracking_order_id', { - orderId: orderDataResponse.orderId, - })} - - - - )} - /> - -
- - {format(new Date(currentStatus.date))} -  {t(`order_tracking_history_${currentStatus.label}`)} - - - - -
- - ( - + + {t('hub_order_tracking_order_id', { + orderId: orderDataResponse.orderId, + })} + + + + )} + /> + +
+ - {t('hub_order_tracking_see_all')} - - - - - )} + {format(new Date(currentStatus.date))} +  {t(`order_tracking_history_${currentStatus.label}`)} + + + + +
+ + ( + + {t('hub_order_tracking_see_all')} + + + + + )} + /> + + + )} + {(error || + !orderDataResponse?.date || + !orderDataResponse?.status) && ( + - + )} )} diff --git a/packages/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.spec.tsx b/packages/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.spec.tsx index dd06e5fe2401..4d7ed4acfa43 100644 --- a/packages/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.spec.tsx +++ b/packages/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.spec.tsx @@ -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, @@ -105,6 +105,7 @@ describe('HubOrderTracking Component', async () => { }); it('displays TileError when there is an error', async () => { + useLastOrderTrackingMockValue.isLoading = false; useLastOrderTrackingMockValue.error = true; renderComponent(); diff --git a/packages/manager/apps/hub-react/src/data/hooks/lastOrderTracking/useLastOrderTracking.tsx b/packages/manager/apps/hub-react/src/data/hooks/lastOrderTracking/useLastOrderTracking.tsx index 6a42ca088250..e194e257eded 100644 --- a/packages/manager/apps/hub-react/src/data/hooks/lastOrderTracking/useLastOrderTracking.tsx +++ b/packages/manager/apps/hub-react/src/data/hooks/lastOrderTracking/useLastOrderTracking.tsx @@ -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 {