Make InStockProduct toast closable

Author: pylipp

front/src/hooks/hooks.ts

@@ -10,7 +10,7 @@ import { selectedBaseIdAtom } from "stores/globalPreferenceStore";
 
 export interface INotificationProps extends UseToastOptions {
   title?: string;
-  message?: string;
+  message?: string | Element;
   type?: "info" | "warning" | "success" | "error" | undefined;
   position?: ToastPosition;
 }

front/src/views/Products/ProductsView.tsx

@@ -3,11 +3,6 @@ import { useNavigate } from "react-router-dom";
 import { useMutation, useQuery } from "@apollo/client";
 import { CellProps, Column } from "react-table";
 import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Box,
   Button,
   Heading,
   Skeleton,
@@ -97,37 +92,6 @@ export const DISABLE_STANDARD_PRODUCT_MUTATION = graphql(
   [PRODUCT_BASIC_FIELDS_FRAGMENT],
 );
 
-function InStockProductAlert({
-  instockItemsCount,
-  productName,
-}: {
-  instockItemsCount?: number;
-  productName?: string;
-  // locations?: string, // TODO: should be derived from product locations somehow
-}) {
-  return (
-    <Alert status="error" data-testid="ErrorAlertProduct">
-      <>
-        <AlertIcon />
-        <Box display="flex" flexDirection="column">
-          <AlertTitle>Disabling Product with Active Stock</AlertTitle>
-          <AlertDescription>
-            You are attempting to disable the product {productName} with {instockItemsCount}{" "}
-            <Text fontWeight="600" color="#659A7E" display="inline">
-              InStock, MarkedForShipment, InTransit, or Receiving
-            </Text>{" "}
-            items in one or more locations. To continue, you must first reclassify all{" "}
-            <Text fontWeight="600" color="#659A7E" display="inline">
-              InStock
-            </Text>{" "}
-            boxes as a different product, or complete your shipments.
-          </AlertDescription>
-        </Box>
-      </>
-    </Alert>
-  );
-}
-
 function Products() {
   const { isLoading: isGlobalStateLoading } = useLoadAndSetGlobalPreferences();
   const baseId = useAtomValue(selectedBaseIdAtom);
@@ -163,10 +127,22 @@ function Products() {
     (instantiationId?: string, instockItemsCount?: number, productName?: string) => {
       if (instockItemsCount !== undefined && instockItemsCount > 0) {
         createToast({
-          duration: 6000,
-          render: () => (
-            <InStockProductAlert instockItemsCount={instockItemsCount} productName={productName} />
+          title: "Disabling Product with Active Stock",
+          message: (
+            <>
+              You are attempting to disable the product {productName} with {instockItemsCount}{" "}
+              <Text fontWeight="600" color="#659A7E" display="inline">
+                InStock, MarkedForShipment, InTransit, or Receiving
+              </Text>{" "}
+              items in one or more locations. To continue, you must first reclassify all{" "}
+              <Text fontWeight="600" color="#659A7E" display="inline">
+                InStock
+              </Text>{" "}
+              boxes as a different product, or complete your shipments.
+            </>
           ),
+          type: "error",
+          duration: 10000
         });
       } else if (instantiationId) {
         disableStandardProductMutation({