Fix alert issue in order creation (#5136)

* fix alert type issue * improve alert text * changesets
saleor · Sep 4, 2024 · 331af39 · 331af39
1 parent 330012e
commit 331af39
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/.changeset/gold-spies-hug.md 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
@@ -27,15 +27,19 @@ 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>
     );
   }
 
   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
@@ -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
@@ -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}