Skip to content
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

fix(hub-react): properly handle case where last order is not defined #15860

Open
wants to merge 2 commits into
base: feat/optimize-hub-order-hooks
Choose a base branch
from
Open

fix(hub-react): properly handle case where last order is not defined #15860

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
4439b94
fix(hub-react): properly handle case where last order is not defined
Mar 7, 2025
b83acf1
fix(hub-react): hide billing summary for new customers
Mar 7, 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
179 changes: 93 additions & 86 deletions ...s/manager/apps/hub-react/src/components/hub-order-tracking/HubOrderTracking.component.tsx
View file
Open in desktop
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;
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
if (!orderData?.date || !orderData?.status) return undefined;
if (!orderData?.date || !orderData?.status) return;

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>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
></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
Open in desktop
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
Open in desktop
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
Loading
Loading