From 331af3943757b27cf74e6638e0ec96c357f99756 Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@hotmail.com>
Date: Thu, 29 Aug 2024 12:31:59 +0200
Subject: [PATCH] Fix alert issue in order creation (#5136)

* fix alert type issue

* improve alert text

* changesets
---
 .changeset/gold-spies-hug.md                             | 5 +++++
 src/orders/components/OrderAlerts/OrderAlerts.tsx        | 8 ++++++--
 src/orders/components/OrderDraftPage/OrderDraftAlert.tsx | 5 ++---
 src/orders/components/OrderDraftPage/OrderDraftPage.tsx  | 5 +----
 4 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/gold-spies-hug.md

diff --git a/.changeset/gold-spies-hug.md b/.changeset/gold-spies-hug.md
new file mode 100644
index 00000000000..28680549bc5
--- /dev/null
+++ b/.changeset/gold-spies-hug.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now see draft order alert messages when channel is inactive or has no products
diff --git a/src/orders/components/OrderAlerts/OrderAlerts.tsx b/src/orders/components/OrderAlerts/OrderAlerts.tsx
index aaa66c74f64..e1ec146b0f0 100644
--- a/src/orders/components/OrderAlerts/OrderAlerts.tsx
+++ b/src/orders/components/OrderAlerts/OrderAlerts.tsx
@@ -27,7 +27,7 @@ export const OrderAlerts: React.FC<OrderAlertsProps> = ({ alertsHeader, alerts,
 
   if (formattedAlerts.length === 1) {
     return (
-      <Text size={2} fontWeight="bold">
+      <Text size={3} fontWeight="bold">
         {formattedAlerts[0].text}
       </Text>
     );
@@ -35,7 +35,11 @@ export const OrderAlerts: React.FC<OrderAlertsProps> = ({ alertsHeader, alerts,
 
   return (
     <>
-      {!!alertsHeader && alertsHeader}
+      {!!alertsHeader && (
+        <Text size={4} fontWeight="bold">
+          {alertsHeader}
+        </Text>
+      )}
       <ul>
         {formattedAlerts.map(alert => (
           <li key={alert.id}>{alert.text}</li>
diff --git a/src/orders/components/OrderDraftPage/OrderDraftAlert.tsx b/src/orders/components/OrderDraftPage/OrderDraftAlert.tsx
index 949f6208540..55009ae68ba 100644
--- a/src/orders/components/OrderDraftPage/OrderDraftAlert.tsx
+++ b/src/orders/components/OrderDraftPage/OrderDraftAlert.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { ChannelUsabilityDataQuery, OrderDetailsFragment } from "@dashboard/graphql";
 import { Alert, AlertProps } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui-next";
@@ -17,7 +16,7 @@ const getAlerts = (
   const canDetermineShippingMethods =
     order?.shippingAddress?.country.code && !!order?.lines?.length;
   const isChannelInactive = order && !order.channel.isActive;
-  const noProductsInChannel = channelUsabilityData?.products.totalCount === 0;
+  const noProductsInChannel = channelUsabilityData?.products?.totalCount === 0;
   const noShippingMethodsInChannel =
     canDetermineShippingMethods && order?.shippingMethods.length === 0;
 
@@ -64,7 +63,7 @@ const OrderDraftAlert: React.FC<OrderDraftAlertProps> = props => {
         alerts={alerts}
         alertsHeader={intl.formatMessage(alertMessages.manyAlerts)}
         values={{
-          country: order.shippingAddress.country.country,
+          country: order?.shippingAddress?.country.country,
           configLink: (
             <Box as="a" textDecoration="underline" href="/shipping" color="accent1" target="_blank">
               <FormattedMessage
diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
index 7784da20c6f..af7d436f5bd 100644
--- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
+++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
@@ -112,10 +112,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
         />
       </TopNav>
       <DetailPageLayout.Content>
-        <OrderDraftAlert
-          order={order as OrderDetailsFragment}
-          channelUsabilityData={channelUsabilityData}
-        />
+        <OrderDraftAlert order={order} channelUsabilityData={channelUsabilityData} />
         <OrderDraftDetails
           order={order as OrderDetailsFragment}
           channelUsabilityData={channelUsabilityData}