feat: Update toast design (#8018)

**What**
- Updates the Toast component and `toast` util to match the latest design. 
- Updates every usage of `toast` as `dismissableLabel` is no longer a valid prop, as we now render a X mark instead of a text button.

packages/admin-next/dashboard/src/i18n/translations/en.json

@@ -456,6 +456,14 @@
     "products": {
       "list": {
         "noRecordsMessage": "There are no products in the collection."
+      },
+      "add": {
+        "successToast_one": "Product was successfully added to the collection.",
+        "successToast_other": "Products were successfully added to the collection."
+      },
+      "remove": {
+        "successToast_one": "Product was successfully removed from the collection.",
+        "successToast_other": "Products were successfully removed from the collection."
       }
     }
   },
@@ -471,6 +479,11 @@
       },
       "successToast": "Category {{name}} was successfully created."
     },
+    "edit": {
+      "header": "Edit Category",
+      "description": "Edit the category to update its details.",
+      "successToast": "Category was successfully updated."
+    },
     "delete": {
       "confirmation": "You are about to delete the category {{name}}. This action cannot be undone.",
       "successToast": "Category {{name}} was successfully deleted."
@@ -556,7 +569,9 @@
       "deleteSuccessToast": "Reservation was successfully deleted."
     },
     "toast": {
-      "updateLocations": "Locations updated successfully."
+      "updateLocations": "Locations updated successfully.",
+      "updateLevel": "Inventory level updated successfully.",
+      "updateItem": "Inventory item updated successfully."
     }
   },
   "giftCards": {

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/api-key-create-form/api-key-create-form.tsx

@@ -59,10 +59,7 @@ export const ApiKeyCreateForm = ({ keyType }: ApiKeyCreateFormProps) => {
       { title: values.title, type: keyType },
       {
         onSuccess: ({ api_key }) => {
-          toast.success(t("general.success"), {
+          toast.success(t("apiKeyManagement.create.successToast"))
-            description: t("apiKeyManagement.create.successToast"),
-            dismissLabel: t("general.close"),
-          })
 
           switch (keyType) {
             case ApiKeyType.PUBLISHABLE:
@@ -74,10 +71,7 @@ export const ApiKeyCreateForm = ({ keyType }: ApiKeyCreateFormProps) => {
           }
         },
         onError: (err) => {
-          toast.error(t("general.error"), {
+          toast.error(err.message)
-            description: err.message,
-            dismissLabel: t("general.close"),
-          })
         },
       }
     )
@@ -85,17 +79,11 @@ export const ApiKeyCreateForm = ({ keyType }: ApiKeyCreateFormProps) => {
 
   const handleCopyToken = () => {
     if (!createdKey) {
-      toast.error(t("general.error"), {
+      toast.error(t("apiKeyManagement.create.copySecretTokenFailure"))
-        dismissLabel: t("general.close"),
-        description: t("apiKeyManagement.create.copySecretTokenFailure"),
-      })
     }
 
     navigator.clipboard.writeText(createdKey?.token ?? "")
-    toast.success(t("general.success"), {
+    toast.success(t("apiKeyManagement.create.copySecretTokenSuccess"))
-      description: t("apiKeyManagement.create.copySecretTokenSuccess"),
-      dismissLabel: t("general.close"),
-    })
   }
 
   const handleGoToSecretKey = () => {

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-general-section/api-key-general-section.tsx

@@ -56,19 +56,15 @@ export const ApiKeyGeneralSection = ({ apiKey }: ApiKeyGeneralSectionProps) => {
 
     await deleteAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("apiKeyManagement.delete.successToast", {
+          t("apiKeyManagement.delete.successToast", {
             title: apiKey.title,
-          }),
-          dismissLabel: t("general.close"),
           })
+        )
         navigate("..", { replace: true })
       },
       onError: (err) => {
-        toast.error(t("general.error"), {
+        toast.error(err.message)
-          description: err.message,
-          dismissLabel: t("general.close"),
-        })
       },
     })
   }
@@ -89,18 +85,14 @@ export const ApiKeyGeneralSection = ({ apiKey }: ApiKeyGeneralSectionProps) => {
 
     await revokeAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("apiKeyManagement.revoke.successToast", {
+          t("apiKeyManagement.revoke.successToast", {
             title: apiKey.title,
-          }),
-          dismissLabel: t("general.close"),
           })
+        )
       },
       onError: (err) => {
-        toast.error(t("general.error"), {
+        toast.error(err.message)
-          description: err.message,
-          dismissLabel: t("general.close"),
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-sales-channel-section/api-key-sales-channel-section.tsx

@@ -82,22 +82,15 @@ export const ApiKeySalesChannelSection = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t(
+            t("apiKeyManagement.removeSalesChannel.successToastBatch", {
-              "apiKeyManagement.removeSalesChannel.successToastBatch",
-              {
               count: keys.length,
-              }
-            ),
-            dismissLabel: t("general.close"),
             })
+          )
           setRowSelection({})
         },
         onError: (err) => {
-          toast.error(t("general.error"), {
+          toast.error(err.message)
-            description: err.message,
-            dismissLabel: t("general.close"),
-          })
         },
       }
     )
@@ -180,18 +173,14 @@ const SalesChannelActions = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("apiKeyManagement.removeSalesChannel.successToast", {
+            t("apiKeyManagement.removeSalesChannel.successToast", {
               count: 1,
-            }),
-            dismissLabel: t("general.close"),
             })
+          )
         },
         onError: (err) => {
-          toast.error(t("general.error"), {
+          toast.error(err.message)
-            description: err.message,
-            dismissLabel: t("general.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/components/edit-api-key-form/edit-api-key-form.tsx

@@ -6,10 +6,7 @@ import * as zod from "zod"
 
 import { ApiKeyDTO } from "@medusajs/types"
 import { Form } from "../../../../../components/common/form"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useUpdateApiKey } from "../../../../../hooks/api/api-keys"
 
 type EditApiKeyFormProps = {
@@ -36,19 +33,15 @@ export const EditApiKeyForm = ({ apiKey }: EditApiKeyFormProps) => {
   const handleSubmit = form.handleSubmit(async (data) => {
     await mutateAsync(data, {
       onSuccess: ({ api_key }) => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("apiKeyManagement.edit.successToast", {
+          t("apiKeyManagement.edit.successToast", {
             title: api_key.title,
-          }),
-          dismissLabel: t("general.close"),
           })
+        )
         handleSuccess()
       },
       onError: (err) => {
-        toast.error(t("general.error"), {
+        toast.error(err.message)
-          description: err.message,
-          dismissLabel: t("general.close"),
-        })
       },
     })
   })

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-row-actions.tsx

@@ -35,18 +35,14 @@ export const ApiKeyRowActions = ({
 
     await deleteAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("apiKeyManagement.delete.successToast", {
+          t("apiKeyManagement.delete.successToast", {
             title: apiKey.title,
-          }),
-          dismissLabel: t("general.close"),
           })
+        )
       },
       onError: (err) => {
-        toast.error(t("general.error"), {
+        toast.error(err.message)
-          description: err.message,
-          dismissLabel: t("general.close"),
-        })
       },
     })
   }
@@ -67,28 +63,21 @@ export const ApiKeyRowActions = ({
 
     await revokeAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("apiKeyManagement.revoke.successToast", {
+          t("apiKeyManagement.revoke.successToast", {
             title: apiKey.title,
-          }),
-          dismissLabel: t("general.close"),
           })
+        )
       },
       onError: (err) => {
-        toast.error(t("general.error"), {
+        toast.error(err.message)
-          description: err.message,
-          dismissLabel: t("general.close"),
-        })
       },
     })
   }
 
   const handleCopyToken = () => {
     navigator.clipboard.writeText(apiKey.token)
-    toast.success(t("general.success"), {
+    toast.success(t("apiKeyManagement.actions.copySuccessToast"))
-      description: t("apiKeyManagement.actions.copySuccessToast"),
-      dismissLabel: t("general.close"),
-    })
   }
 
   return (

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-sales-channels/components/api-key-sales-channels-form/api-key-sales-channels-form.tsx

@@ -102,20 +102,16 @@ export const ApiKeySalesChannelsForm = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("apiKeyManagement.salesChannels.successToast", {
+            t("apiKeyManagement.salesChannels.successToast", {
               count: values.sales_channel_ids.length,
-            }),
-            dismissLabel: t("general.close"),
             })
+          )
 
           handleSuccess()
         },
         onError: (err) => {
-          toast.error(t("general.error"), {
+          toast.error(err.message)
-            description: err.message,
-            dismissLabel: t("general.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/campaigns/add-campaign-promotions/components/add-campaign-promotions-form.tsx

@@ -95,19 +95,14 @@ export const AddCampaignPromotionsForm = ({
       { add: values.promotion_ids },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("campaigns.promotions.toast.success", {
+            t("campaigns.promotions.toast.success", {
               count: values.promotion_ids.length,
-            }),
-            dismissLabel: t("actions.close"),
             })
+          )
           handleSuccess()
         },
-        onError: (error) =>
+        onError: (error) => toast.error(error.message),
-          toast.error(t("general.error"), {
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          }),
       }
     )
   })

packages/admin-next/dashboard/src/routes/campaigns/campaign-budget-edit/components/edit-campaign-budget-form/edit-campaign-budget-form.tsx

@@ -41,20 +41,16 @@ export const EditCampaignBudgetForm = ({
       },
       {
         onSuccess: ({ campaign }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("campaigns.edit.successToast", {
+            t("campaigns.edit.successToast", {
               name: campaign.name,
-            }),
-            dismissLabel: t("actions.close"),
             })
+          )
 
           handleSuccess()
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/campaigns/campaign-create/components/create-campaign-form/create-campaign-form.tsx

@@ -62,19 +62,15 @@ export const CreateCampaignForm = () => {
       },
       {
         onSuccess: ({ campaign }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("campaigns.create.successToast", {
+            t("campaigns.create.successToast", {
               name: campaign.name,
-            }),
-            dismissLabel: t("actions.close"),
             })
+          )
           handleSuccess(`/campaigns/${campaign.id}`)
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/campaigns/campaign-detail/components/campaign-general-section/campaign-general-section.tsx

@@ -48,20 +48,16 @@ export const CampaignGeneralSection = ({
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("campaigns.delete.successToast", {
+          t("campaigns.delete.successToast", {
             name: campaign.name,
-          }),
-          dismissLabel: t("actions.close"),
           })
+        )
 
         navigate("/campaigns", { replace: true })
       },
       onError: (error) => {
-        toast.error(t("general.error"), {
+        toast.error(error.message)
-          description: error.message,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/campaigns/campaign-edit/components/edit-campaign-form/edit-campaign-form.tsx

@@ -48,20 +48,16 @@ export const EditCampaignForm = ({ campaign }: EditCampaignFormProps) => {
       },
       {
         onSuccess: ({ campaign }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("campaigns.edit.successToast", {
+            t("campaigns.edit.successToast", {
               name: campaign.name,
-            }),
-            dismissLabel: t("actions.close"),
             })
+          )
 
           handleSuccess()
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/campaigns/campaign-list/components/campaign-list-table.tsx

@@ -95,18 +95,14 @@ const CampaignActions = ({ campaign }: { campaign: CampaignResponse }) => {
       return
     }
 
-    try {
+    await mutateAsync(undefined, {
-      await mutateAsync()
+      onSuccess: () => {
-      toast.success(t("general.success"), {
+        toast.success(t("campaigns.toast.delete"))
-        description: t("campaigns.toast.delete"),
+      },
-        dismissLabel: t("actions.close"),
+      onError: (e) => {
+        toast.error(e.message)
+      },
     })
-    } catch (e) {
-      toast.error(t("general.error"), {
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
-    }
   }
 
   return (

packages/admin-next/dashboard/src/routes/categories/category-create/components/create-category-form/create-category-form.tsx

@@ -92,23 +92,16 @@ export const CreateCategoryForm = ({
       },
       {
         onSuccess: ({ product_category }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("categories.create.successToast", {
+            t("categories.create.successToast", {
               name: product_category.name,
-            }),
-            dismissable: true,
-            dismissLabel: t("actions.close"),
             })
+          )
 
           handleSuccess(`/categories/${product_category.id}`)
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
-
           setShouldFreeze(false)
         },
       }

packages/admin-next/dashboard/src/routes/categories/category-detail/components/category-product-section/category-product-section.tsx

@@ -88,22 +88,16 @@ export const CategoryProductSection = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("categories.products.remove.successToast", {
+            t("categories.products.remove.successToast", {
               count: selected.length,
-            }),
-            dismissable: true,
-            dismissLabel: t("actions.close"),
             })
+          )
 
           setSelection({})
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/categories/category-edit/category-edit.tsx

@@ -1,5 +1,6 @@
 import { Heading } from "@medusajs/ui"
 
+import { useTranslation } from "react-i18next"
 import { useParams } from "react-router-dom"
 import { RouteDrawer } from "../../../components/modals"
 import { useProductCategory } from "../../../hooks/api/categories"
@@ -7,6 +8,7 @@ import { EditCategoryForm } from "./components/edit-category-form"
 
 export const CategoryEdit = () => {
   const { id } = useParams()
+  const { t } = useTranslation()
 
   const { product_category, isPending, isError, error } = useProductCategory(
     id!
@@ -21,7 +23,12 @@ export const CategoryEdit = () => {
   return (
     <RouteDrawer>
       <RouteDrawer.Header>
-        <Heading>Edit</Heading>
+        <RouteDrawer.Title asChild>
+          <Heading>{t("categories.edit.header")}</Heading>
+        </RouteDrawer.Title>
+        <RouteDrawer.Description className="sr-only">
+          {t("categories.edit.description")}
+        </RouteDrawer.Description>
       </RouteDrawer.Header>
       {ready && <EditCategoryForm category={product_category} />}
     </RouteDrawer>

packages/admin-next/dashboard/src/routes/categories/category-edit/components/edit-category-form/edit-category-form.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Button, Input, Select, Textarea } from "@medusajs/ui"
+import { Button, Input, Select, Textarea, toast } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
@@ -7,7 +7,8 @@ import { z } from "zod"
 import { HttpTypes } from "@medusajs/types"
 import { Form } from "../../../../../components/common/form"
 import { HandleInput } from "../../../../../components/inputs/handle-input"
-import { RouteDrawer } from "../../../../../components/modals"
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
+import { useUpdateProductCategory } from "../../../../../hooks/api/categories"
 
 const EditCategorySchema = z.object({
   name: z.string().min(1),
@@ -23,6 +24,7 @@ type EditCategoryFormProps = {
 
 export const EditCategoryForm = ({ category }: EditCategoryFormProps) => {
   const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
 
   const form = useForm<z.infer<typeof EditCategorySchema>>({
     defaultValues: {
@@ -35,9 +37,27 @@ export const EditCategoryForm = ({ category }: EditCategoryFormProps) => {
     resolver: zodResolver(EditCategorySchema),
   })
 
-  const isPending = false
+  const { mutateAsync, isPending } = useUpdateProductCategory(category.id)
-
+  const handleSubmit = form.handleSubmit(async (data) => {
-  const handleSubmit = form.handleSubmit(async (data) => console.log(data))
+    await mutateAsync(
+      {
+        name: data.name,
+        description: data.description,
+        handle: data.handle,
+        is_active: data.status === "active",
+        is_internal: data.visibility === "internal",
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("categories.edit.successToast"))
+          handleSuccess()
+        },
+        onError: (error) => {
+          toast.error(error.message)
+        },
+      }
+    )
+  })
 
   return (
     <RouteDrawer.Form form={form}>

packages/admin-next/dashboard/src/routes/categories/category-organize/components/organize-category-form/organize-category-form.tsx

@@ -4,7 +4,6 @@ import { Spinner } from "@medusajs/icons"
 import { FetchError } from "@medusajs/js-sdk"
 import { HttpTypes } from "@medusajs/types"
 import { toast } from "@medusajs/ui"
-import { t } from "i18next"
 import { RouteFocusModal } from "../../../../../components/modals"
 import {
   categoriesQueryKeys,
@@ -71,11 +70,7 @@ export const OrganizeCategoryForm = () => {
         context?.previousValue
       )
 
-      toast.error(t("general.error"), {
+      toast.error(error.message)
-        description: error.message,
-        dismissLabel: t("general.close"),
-        dismissable: true,
-      })
     },
     onSettled: async (_data, _error, variables) => {
       await queryClient.invalidateQueries({

packages/admin-next/dashboard/src/routes/categories/category-products/components/edit-category-products-form/edit-category-products-form.tsx

@@ -116,22 +116,16 @@ export const EditCategoryProductsForm = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("categories.products.add.disabledTooltip", {
+            t("categories.products.add.disabledTooltip", {
               count: data.product_ids.length,
-            }),
-            dismissable: true,
-            dismissLabel: t("actions.close"),
             })
+          )
 
           handleSuccess()
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/categories/common/hooks/use-delete-product-category-action.tsx

@@ -29,20 +29,18 @@ export const useDeleteProductCategoryAction = (
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("categories.delete.successToast", {
+          t("categories.delete.successToast", {
             name: category.name,
-          }),
           })
+        )
 
         navigate("/categories", {
           replace: true,
         })
       },
       onError: (e) => {
-        toast.error(t("general.error"), {
+        toast.error(e.message)
-          description: e.message,
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx

@@ -103,7 +103,7 @@ export const AddProductsToCollectionForm = ({
   const filters = useProductTableFilters(["collections"])
 
   const { table } = useDataTable({
-    data: (products ?? []) as ExtendedProductDTO[],
+    data: products ?? [],
     columns,
     count,
     pageSize: PAGE_SIZE,
@@ -127,13 +127,15 @@ export const AddProductsToCollectionForm = ({
       },
       {
         onSuccess: () => {
+          toast.success(
+            t("collections.products.add.successToast", {
+              count: values.add.length,
+            })
+          )
           handleSuccess()
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/collections/collection-detail/components/collection-product-section/collection-product-section.tsx

@@ -30,7 +30,7 @@ export const CollectionProductSection = ({
     {
       limit: PAGE_SIZE,
       ...searchParams,
-      collection_id: [collection.id],
+      collection_id: [collection.id!],
     },
     {
       placeholderData: keepPreviousData,
@@ -78,11 +78,15 @@ export const CollectionProductSection = ({
         remove: ids,
       },
       {
-        onError: (e) => {
+        onSuccess: () => {
-          toast.error(t("general.error"), {
+          toast.success(
-            description: e.message,
+            t("collections.products.remove.successToast", {
-            dismissLabel: t("actions.close"),
+              count: ids.length,
             })
+          )
+        },
+        onError: (e) => {
+          toast.error(e.message)
         },
       }
     )
@@ -167,11 +171,15 @@ const ProductActions = ({
         remove: [product.id],
       },
       {
-        onError: (e) => {
+        onSuccess: () => {
-          toast.error(t("general.error"), {
+          toast.success(
-            description: e.message,
+            t("collections.products.remove.successToast", {
-            dismissLabel: t("actions.close"),
+              count: 1,
             })
+          )
+        },
+        onError: (e) => {
+          toast.error(e.message)
         },
       }
     )

packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx

@@ -109,15 +109,17 @@ export const AddCustomersForm = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("customerGroups.customers.add.successToast", {
+            t("customerGroups.customers.add.successToast", {
               count: data.customer_ids.length,
-            }),
-            dismissLabel: t("actions.close"),
             })
+          )
 
           handleSuccess(`/customer-groups/${customerGroupId}`)
         },
+        onError: (error) => {
+          toast.error(error.message)
+        },
       }
     )
   })

packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/components/create-customer-group-form/create-customer-group-form.tsx

@@ -35,20 +35,16 @@ export const CreateCustomerGroupForm = () => {
       },
       {
         onSuccess: ({ customer_group }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("customerGroups.create.successToast", {
+            t("customerGroups.create.successToast", {
               name: customer_group.name,
-            }),
-            dismissLabel: t("actions.close"),
             })
+          )
 
           handleSuccess(`/customer-groups/${customer_group.id}`)
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-general-section/customer-group-general-section.tsx

@@ -1,10 +1,11 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
 import { Container, Heading, Text, toast, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
+
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteCustomerGroup } from "../../../../../hooks/api/customer-groups"
-import { HttpTypes } from "@medusajs/types"
 
 type CustomerGroupGeneralSectionProps = {
   group: HttpTypes.AdminCustomerGroup
@@ -35,20 +36,16 @@ export const CustomerGroupGeneralSection = ({
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("customerGroups.delete.successToast", {
+          t("customerGroups.delete.successToast", {
             name: group.name,
-          }),
-          dismissLabel: t("actions.close"),
           })
+        )
 
         navigate("/customer-groups", { replace: true })
       },
       onError: (error) => {
-        toast.error(t("general.error"), {
+        toast.error(error.message)
-          description: error.message,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/components/edit-customer-group-form/edit-customer-group-form.tsx

@@ -5,10 +5,7 @@ import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as z from "zod"
 import { Form } from "../../../../../components/common/form"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useUpdateCustomerGroup } from "../../../../../hooks/api/customer-groups"
 
 type EditCustomerGroupFormProps = {
@@ -37,15 +34,17 @@ export const EditCustomerGroupForm = ({
   const handleSubmit = form.handleSubmit(async (data) => {
     await mutateAsync(data, {
       onSuccess: ({ customer_group }) => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("customerGroups.edit.successToast", {
+          t("customerGroups.edit.successToast", {
             name: customer_group.name,
-          }),
-          dismissLabel: t("actions.close"),
           })
+        )
 
         handleSuccess()
       },
+      onError: (error) => {
+        toast.error(error.message)
+      },
     })
   })
 

packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/components/customer-group-list-table/customer-group-list-table.tsx

@@ -3,15 +3,16 @@ import {
   Button,
   Container,
   Heading,
+  Text,
   toast,
   usePrompt,
-  Text,
 } from "@medusajs/ui"
 import { createColumnHelper } from "@tanstack/react-table"
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 
+import { HttpTypes } from "@medusajs/types"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { DataTable } from "../../../../../components/table/data-table"
 import {
@@ -22,7 +23,6 @@ import { useCustomerGroupTableColumns } from "../../../../../hooks/table/columns
 import { useCustomerGroupTableFilters } from "../../../../../hooks/table/filters/use-customer-group-table-filters"
 import { useCustomerGroupTableQuery } from "../../../../../hooks/table/query/use-customer-group-table-query"
 import { useDataTable } from "../../../../../hooks/use-data-table"
-import { HttpTypes } from "@medusajs/types"
 
 const PAGE_SIZE = 20
 
@@ -112,18 +112,14 @@ const CustomerGroupRowActions = ({
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("customerGroups.delete.successToast", {
+          t("customerGroups.delete.successToast", {
             name: group.name,
-          }),
-          dismissLabel: t("actions.close"),
           })
+        )
       },
       onError: (error) => {
-        toast.error(t("general.error"), {
+        toast.error(error.message)
-          description: error.message,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/customers/customer-create/components/create-customer-form/create-customer-form.tsx

@@ -39,7 +39,7 @@ export const CreateCustomerForm = () => {
   const handleSubmit = form.handleSubmit(async (data) => {
     await mutateAsync(
       {
-        email: data.email || undefined,
+        email: data.email,
         first_name: data.first_name || undefined,
         last_name: data.last_name || undefined,
         company_name: data.company_name || undefined,
@@ -47,19 +47,15 @@ export const CreateCustomerForm = () => {
       },
       {
         onSuccess: ({ customer }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("customers.create.successToast", {
+            t("customers.create.successToast", {
               email: customer.email,
-            }),
-            dismissLabel: t("actions.close"),
             })
+          )
           handleSuccess(`/customers/${customer.id}`)
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-general-section/customer-general-section.tsx

@@ -1,4 +1,5 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
 import {
   Container,
   Heading,
@@ -9,9 +10,9 @@ import {
 } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
+
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteCustomer } from "../../../../../hooks/api/customers"
-import { HttpTypes } from "@medusajs/types"
 
 type CustomerGeneralSectionProps = {
   customer: HttpTypes.AdminCustomer
@@ -53,20 +54,16 @@ export const CustomerGeneralSection = ({
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("customers.delete.successToast", {
+          t("customers.delete.successToast", {
             email: customer.email,
-          }),
-          dismissLabel: t("actions.close"),
           })
+        )
 
         navigate("/customers", { replace: true })
       },
       onError: (error) => {
-        toast.error(t("general.error"), {
+        toast.error(error.message)
-          description: error.message,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-group-section/customer-group-section.tsx

@@ -81,7 +81,7 @@ export const CustomerGroupSection = ({
       title: t("general.areYouSure"),
       description: t("customers.groups.removeMany", {
         groups: customer_groups
-          .filter((g) => customerGroupIds.includes(g.id))
+          ?.filter((g) => customerGroupIds.includes(g.id))
           .map((g) => g.name)
           .join(","),
       }),
@@ -109,10 +109,7 @@ export const CustomerGroupSection = ({
         queryKey: customerGroupsQueryKeys.lists(),
       })
     } catch (e) {
-      toast.error(t("general.error"), {
+      toast.error(e.message)
-        description: e.message,
-        dismissLabel: t("general.close"),
-      })
     }
   }
 
@@ -150,7 +147,7 @@ export const CustomerGroupSection = ({
         ]}
         queryObject={raw}
         noRecords={{
-          message: t("customers.groups.list.noRecordsMessage")
+          message: t("customers.groups.list.noRecordsMessage"),
         }}
       />
     </Container>
@@ -183,14 +180,14 @@ const CustomerGroupRowActions = ({
       return
     }
 
-    try {
+    await mutateAsync(
-      await mutateAsync({ customer_ids: [customerId] })
+      { customer_ids: [customerId] },
-    } catch (e) {
+      {
-      toast.error(t("general.error"), {
+        onError: (error) => {
-        description: e.message,
+          toast.error(error.message)
-        dismissLabel: t("general.close"),
+        },
-      })
       }
+    )
   }
 
   return (

packages/admin-next/dashboard/src/routes/customers/customer-edit/components/edit-customer-form/edit-customer-form.tsx

@@ -61,20 +61,16 @@ export const EditCustomerForm = ({ customer }: EditCustomerFormProps) => {
       },
       {
         onSuccess: ({ customer }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("customers.edit.successToast", {
+            t("customers.edit.successToast", {
               email: customer.email,
-            }),
-            dismissLabel: t("actions.close"),
             })
+          )
 
           handleSuccess()
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/customers/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx

@@ -130,10 +130,7 @@ export const AddCustomerGroupsForm = ({
 
       handleSuccess(`/customers/${customerId}`)
     } catch (e) {
-      toast.error(t("general.error"), {
+      toast.error(e.message)
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
     } finally {
       setIsPending(false)
     }

packages/admin-next/dashboard/src/routes/inventory/inventory-create/components/create-inventory-item-form/create-inventory-item-form.tsx

@@ -89,7 +89,7 @@ export function CreateInventoryItemForm({}: CreateInventoryItemFormProps) {
     useCreateInventoryItem()
 
   const handleSubmit = form.handleSubmit(async (data) => {
-    let { locations, ...payload } = data
+    const { locations, ...payload } = data
 
     for (const k in payload) {
       if (payload[k] === "") {
@@ -119,18 +119,12 @@ export function CreateInventoryItemForm({}: CreateInventoryItemFormProps) {
           queryKey: inventoryItemsQueryKeys.lists(),
         })
       } catch (e) {
-        toast.error(t("general.error"), {
+        toast.error(e.message)
-          description: e.message,
-          dismissLabel: t("actions.close"),
-        })
       }
 
       handleSuccess()
     } catch (e) {
-      toast.error(t("general.error"), {
+      toast.error(e.message)
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
     }
   })
 

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/adjust-inventory/components/adjust-inventory-form.tsx

@@ -3,10 +3,7 @@ import * as zod from "zod"
 
 import { HttpTypes, InventoryLevelDTO, StockLocationDTO } from "@medusajs/types"
 import { Button, Input, Text, toast } from "@medusajs/ui"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../../components/modals"
 
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
@@ -69,23 +66,20 @@ export const AdjustInventoryForm = ({
       return handleSuccess()
     }
 
-    try {
+    await mutateAsync(
-      await mutateAsync({
+      {
         stocked_quantity: value.stocked_quantity,
-      })
+      },
-
+      {
-      toast.success(t("general.success"), {
+        onSuccess: () => {
-        description: t("inventory.toast.updateLevel"),
+          toast.success(t("inventory.toast.updateLevel"))
-        dismissLabel: t("actions.close"),
+          handleSuccess()
-      })
+        },
-    } catch (e) {
+        onError: (e) => {
-      toast.error(t("general.error"), {
+          toast.error(e.message)
-        description: e.message,
+        },
-        dismissLabel: t("actions.close"),
-      })
       }
-
+    )
-    return handleSuccess()
   })
 
   return (

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/edit-inventory-item-attributes/components/edit-item-attributes-form.tsx

@@ -1,16 +1,14 @@
 import * as zod from "zod"
 
 import { Button, Input, toast } from "@medusajs/ui"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../../components/modals"
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { InventoryTypes } from "@medusajs/types"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
+
 import { Form } from "../../../../../../components/common/form"
 import { CountrySelect } from "../../../../../../components/inputs/country-select"
 import { useUpdateInventoryItem } from "../../../../../../hooks/api/inventory"
@@ -57,17 +55,10 @@ export const EditInventoryItemAttributesForm = ({
   const handleSubmit = form.handleSubmit(async (values) => {
     await mutateAsync(values, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(t("inventory.toast.updateItem"))
-          description: t("inventory.toast.update"),
-          dismissLabel: t("actions.close"),
-        })
         handleSuccess()
       },
-      onError: (error) =>
+      onError: (error) => toast.error(error.message),
-        toast.error(t("general.error"), {
-          description: error.message,
-          dismissLabel: t("actions.close"),
-        }),
     })
   })
 

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/edit-inventory-item/components/edit-item-form.tsx

@@ -1,10 +1,7 @@
 import * as zod from "zod"
 
 import { Button, Input, toast } from "@medusajs/ui"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../../components/modals"
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { InventoryTypes } from "@medusajs/types"
@@ -44,17 +41,10 @@ export const EditInventoryItemForm = ({ item }: EditInventoryItemFormProps) => {
   const handleSubmit = form.handleSubmit(async (values) => {
     mutateAsync(values as any, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(t("inventory.toast.updateItem"))
-          description: t("inventory.toast.update"),
-          dismissLabel: t("actions.close"),
-        })
         handleSuccess()
       },
-      onError: (e) =>
+      onError: (e) => toast.error(e.message),
-        toast.error(t("general.error"), {
-          description: e.message,
-          dismissLabel: t("actions.close"),
-        }),
     })
   })
 

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/manage-locations/components/manage-locations-form.tsx

@@ -6,14 +6,11 @@ import { Button, Text, toast } from "@medusajs/ui"
 import { useFieldArray, useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../../components/modals"
 import { useBatchUpdateInventoryLevels } from "../../../../../../hooks/api/inventory"
 
-import { LocationItem } from "./location-item"
 import { useEffect, useMemo } from "react"
+import { LocationItem } from "./location-item"
 
 type EditInventoryItemAttributeFormProps = {
   item: AdminInventoryItem
@@ -102,26 +99,23 @@ export const ManageLocationsForm = ({
       return handleSuccess()
     }
 
-    try {
+    await mutateAsync(
-      await mutateAsync({
+      {
         create: selectedLocations.map((location_id) => ({
           location_id,
         })),
         delete: unselectedLocations,
-      })
+      },
-
+      {
+        onSuccess: () => {
+          toast.success(t("inventory.toast.updateLocations"))
           handleSuccess()
-
+        },
-      toast.success(t("general.success"), {
+        onError: (e) => {
-        description: t("inventory.toast.updateLocations"),
+          toast.error(e.message)
-        dismissLabel: t("actions.close"),
+        },
-      })
-    } catch (e) {
-      toast.error(t("general.error"), {
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
       }
+    )
   })
 
   return (

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/reservations-table/reservation-actions.tsx

@@ -1,10 +1,10 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
 import { toast, usePrompt } from "@medusajs/ui"
 
-import { ActionMenu } from "../../../../../components/common/action-menu"
 import { InventoryTypes } from "@medusajs/types"
-import { useDeleteReservationItem } from "../../../../../hooks/api/reservations"
 import { useTranslation } from "react-i18next"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { useDeleteReservationItem } from "../../../../../hooks/api/reservations"
 
 export const ReservationActions = ({
   reservation,
@@ -29,10 +29,10 @@ export const ReservationActions = ({
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(t("inventory.reservation.deleteSuccessToast"))
-          dismissLabel: t("actions.close"),
+      },
-          description: t("inventory.reservation.deleteSuccessToast"),
+      onError: (e) => {
-        })
+        toast.error(e.message)
       },
     })
   }

packages/admin-next/dashboard/src/routes/invite/invite.tsx

@@ -1,19 +1,18 @@
 import { zodResolver } from "@hookform/resolvers/zod"
-import { UserRoles } from "@medusajs/medusa"
 import { Alert, Button, Heading, Input, Text, toast } from "@medusajs/ui"
 import { AnimatePresence, motion } from "framer-motion"
-import { Trans, useTranslation } from "react-i18next"
-import { Link, useSearchParams } from "react-router-dom"
-import * as z from "zod"
 import i18n from "i18next"
 import { useState } from "react"
 import { useForm } from "react-hook-form"
+import { Trans, useTranslation } from "react-i18next"
 import { decodeToken } from "react-jwt"
+import { Link, useSearchParams } from "react-router-dom"
+import * as z from "zod"
 import { Form } from "../../components/common/form"
 import { LogoBox } from "../../components/common/logo-box"
-import { isAxiosError } from "../../lib/is-axios-error"
-import { useAcceptInvite } from "../../hooks/api/invites"
 import { useCreateAuthUser } from "../../hooks/api/auth"
+import { useAcceptInvite } from "../../hooks/api/invites"
+import { isFetchError } from "../../lib/is-fetch-error"
 
 const CreateAccountSchema = z
   .object({
@@ -33,9 +32,10 @@ const CreateAccountSchema = z
     }
   })
 
+// TODO: Update to V2 format
 type DecodedInvite = {
   id: string
-  jti: UserRoles
+  jti: any
   exp: string
   iat: number
 }
@@ -227,13 +227,12 @@ const CreateView = ({
         ...invitePayload,
         auth_token: authToken,
       })
+
+      toast.success(t("invite.toast.accepted"))
+
       onSuccess()
-      toast.success(t("general.success"), {
-        description: t("invite.toast.accepted"),
-        dismissLabel: t("actions.close"),
-      })
     } catch (error) {
-      if (isAxiosError(error) && error.response?.status === 400) {
+      if (isFetchError(error) && error.status === 400) {
         form.setError("root", {
           type: "manual",
           message: t("invite.invalidInvite"),

packages/admin-next/dashboard/src/routes/locations/location-create/components/create-location-form/create-location-form.tsx

@@ -56,20 +56,12 @@ export const CreateLocationForm = () => {
       },
       {
         onSuccess: ({ stock_location }) => {
-          toast.success(t("general.success"), {
+          toast.success(t("locations.toast.create"))
-            description: t("locations.toast.create"),
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
 
           handleSuccess(`/settings/locations/${stock_location.id}`)
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx

@@ -127,20 +127,14 @@ function ShippingOption({
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("stockLocations.shippingOptions.delete.successToast", {
+          t("stockLocations.shippingOptions.delete.successToast", {
             name: option.name,
-          }),
-          dismissable: true,
-          dismissLabel: t("actions.close"),
           })
+        )
       },
       onError: (e) => {
-        toast.error(t("general.error"), {
+        toast.error(e.message)
-          description: e.message,
-          dismissable: true,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }
@@ -303,18 +297,14 @@ function ServiceZone({ zone, locationId, fulfillmentSetId }: ServiceZoneProps) {
 
     await deleteZone(undefined, {
       onError: (e) => {
-        toast.error(t("general.error"), {
+        toast.error(e.message)
-          description: e.message,
-          dismissLabel: t("actions.close"),
-        })
       },
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("stockLocations.serviceZones.delete.successToast", {
+          t("stockLocations.serviceZones.delete.successToast", {
             name: zone.name,
-          }),
-          dismissLabel: t("actions.close"),
           })
+        )
       },
     })
   }
@@ -473,18 +463,10 @@ function FulfillmentSet(props: FulfillmentSetProps) {
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(t(`stockLocations.fulfillmentSets.enable.${type}`))
-            description: t(`stockLocations.fulfillmentSets.enable.${type}`),
-            dismissLabel: t("actions.close"),
-            dismissable: true,
-          })
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissLabel: t("actions.close"),
-            dismissable: true,
-          })
         },
       }
     )
@@ -506,18 +488,10 @@ function FulfillmentSet(props: FulfillmentSetProps) {
 
     await deleteFulfillmentSet(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(t(`stockLocations.fulfillmentSets.disable.${type}`))
-          description: t(`stockLocations.fulfillmentSets.disable.${type}`),
-          dismissable: true,
-          dismissLabel: t("actions.close"),
-        })
       },
       onError: (e) => {
-        toast.error(t("general.error"), {
+        toast.error(e.message)
-          description: e.message,
-          dismissable: true,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }
@@ -627,21 +601,15 @@ const Actions = ({ location }: { location: HttpTypes.AdminStockLocation }) => {
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("stockLocations.create.successToast", {
+          t("stockLocations.create.successToast", {
             name: location.name,
-          }),
-          dismissable: true,
-          dismissLabel: t("actions.close"),
           })
+        )
         navigate("/settings/locations", { replace: true })
       },
       onError: (e) => {
-        toast.error(t("general.error"), {
+        toast.error(e.message)
-          description: e.message,
-          dismissable: true,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/locations/location-edit/components/edit-location-form/edit-location-form.tsx

@@ -7,10 +7,7 @@ import * as zod from "zod"
 
 import { Form } from "../../../../../components/common/form"
 import { CountrySelect } from "../../../../../components/inputs/country-select"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useUpdateStockLocation } from "../../../../../hooks/api/stock-locations"
 
 type EditLocationFormProps = {
@@ -64,18 +61,11 @@ export const EditLocationForm = ({ location }: EditLocationFormProps) => {
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(t("stockLocations.edit.successToast"))
-            description: t("stockLocations.edit.successToast"),
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
           handleSuccess()
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/locations/location-list/components/location-list-item/location-list-item.tsx

@@ -105,18 +105,14 @@ function LocationListItem(props: LocationProps) {
 
     await deleteLocation(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("shippingProfile.delete.successToast", {
+          t("shippingProfile.delete.successToast", {
             name: location.name,
-          }),
-          dismissLabel: t("general.close"),
           })
+        )
       },
       onError: (e) => {
-        toast.error(t("general.error"), {
+        toast.error(e.message)
-          description: e.message,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/locations/location-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx

@@ -107,19 +107,11 @@ export const LocationEditSalesChannelsForm = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(t("stockLocations.salesChannels.successToast"))
-            description: t("stockLocations.salesChannels.successToast"),
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
           handleSuccess(`/settings/locations/${location.id}`)
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/locations/location-service-zone-create/components/create-service-zone-form/create-service-zone-form.tsx

@@ -63,24 +63,16 @@ export function CreateServiceZoneForm({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("stockLocations.serviceZones.create.successToast", {
+            t("stockLocations.serviceZones.create.successToast", {
               name: data.name,
-            }),
-            dismissable: true,
-            dismissLabel: t("general.close"),
             })
+          )
 
           handleSuccess(`/settings/locations/${location.id}`)
         },
         onError: (e) => {
-          console.error(e)
+          toast.error(e.message)
-
-          toast.error(t("general.error"), {
-            description: e.message,
-            dismissable: true,
-            dismissLabel: t("general.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/locations/location-service-zone-edit/components/edit-region-form/edit-service-zone-form.tsx

@@ -6,10 +6,7 @@ import * as zod from "zod"
 
 import { Form } from "../../../../../components/common/form"
 import { InlineTip } from "../../../../../components/common/inline-tip"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useUpdateFulfillmentSetServiceZone } from "../../../../../hooks/api/fulfillment-sets"
 
 type EditServiceZoneFormProps = {
@@ -46,19 +43,15 @@ export const EditServiceZoneForm = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("stockLocations.serviceZones.edit.successToast", {
+            t("stockLocations.serviceZones.edit.successToast", {
               name: values.name,
-            }),
-            dismissLabel: t("actions.close"),
             })
+          )
           handleSuccess(`/settings/locations/${locationId}`)
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/locations/location-service-zone-manage-areas/components/edit-region-areas-form/edit-service-zone-areas-form.tsx

@@ -63,25 +63,16 @@ export function EditServiceZoneAreasForm({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t(
+            t("stockLocations.serviceZones.manageAreas.successToast", {
-              "stockLocations.serviceZones.manageAreas.successToast",
-              {
               name: zone.name,
-              }
-            ),
-            dismissable: true,
-            dismissLabel: t("general.close"),
             })
+          )
 
           handleSuccess(`/settings/locations/${locationId}`)
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissable: true,
-            dismissLabel: t("general.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-form.tsx

@@ -113,27 +113,21 @@ export function CreateShippingOptionsForm({
       },
       {
         onSuccess: ({ shipping_option }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t(
+            t(
               `stockLocations.shippingOptions.create.${
                 isReturn ? "returns" : "shipping"
               }.successToast`,
               {
                 name: shipping_option.name,
               }
-            ),
+            )
-            dismissable: true,
+          )
-            dismissLabel: t("general.close"),
-          })
 
           handleSuccess(`/settings/locations/${locationId}`)
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx

@@ -8,10 +8,7 @@ import { Divider } from "../../../../../components/common/divider"
 import { Form } from "../../../../../components/common/form"
 import { SwitchBox } from "../../../../../components/common/switch-box"
 import { Combobox } from "../../../../../components/inputs/combobox"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useUpdateShippingOptions } from "../../../../../hooks/api/shipping-options"
 import { useComboboxData } from "../../../../../hooks/use-combobox-data"
 import { sdk } from "../../../../../lib/client"
@@ -104,21 +101,15 @@ export const EditShippingOptionForm = ({
       },
       {
         onSuccess: ({ shipping_option }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("stockLocations.shippingOptions.edit.successToast", {
+            t("stockLocations.shippingOptions.edit.successToast", {
               name: shipping_option.name,
-            }),
-            dismissable: true,
-            dismissLabel: t("actions.close"),
             })
+          )
           handleSuccess(`/settings/locations/${locationId}`)
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-pricing/components/create-shipping-options-form/edit-shipping-options-pricing-form.tsx

@@ -186,16 +186,11 @@ export function EditShippingOptionsPricingForm({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(t("general.success"))
-            dismissLabel: t("general.close"),
-          })
           handleSuccess()
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissLabel: t("general.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/orders/order-create-fulfillment/components/order-create-fulfillment-form/order-create-fulfillment-form.tsx

@@ -66,17 +66,10 @@ export function OrderCreateFulfillmentForm({
           })),
       })
 
+      toast.success(t("orders.fulfillment.toast.created"))
       handleSuccess(`/orders/${order.id}`)
-
-      toast.success(t("general.success"), {
-        description: t("orders.fulfillment.toast.created"),
-        dismissLabel: t("actions.close"),
-      })
     } catch (e) {
-      toast.error(t("general.error"), {
+      toast.error(e.message)
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
     }
   })
 

packages/admin-next/dashboard/src/routes/orders/order-create-shipment/components/order-create-shipment-form/order-create-shipment-form.tsx

@@ -11,9 +11,8 @@ import {
   RouteFocusModal,
   useRouteModal,
 } from "../../../../../components/modals"
-import { useCreateOrderShipment } from "../../../../../hooks/api/orders"
-import { CreateShipmentSchema } from "./constants"
 import { useCreateShipment } from "../../../../../hooks/api/fulfillment.tsx"
+import { CreateShipmentSchema } from "./constants"
 
 type OrderCreateFulfillmentFormProps = {
   order: AdminOrder
@@ -44,8 +43,8 @@ export function OrderCreateShipmentForm({
   })
 
   const handleSubmit = form.handleSubmit(async (data) => {
-    try {
+    await createShipment(
-      await createShipment({
+      {
         labels: data.labels
           .filter((l) => !!l.tracking_number)
           .map((l) => ({
@@ -54,20 +53,17 @@ export function OrderCreateShipmentForm({
             label_url: "#",
           })),
         // no_notification: !data.send_notification,
-      })
+      },
-
+      {
+        onSuccess: () => {
+          toast.success(t("orders.shipment.toastCreated"))
           handleSuccess(`/orders/${order.id}`)
-
+        },
-      toast.success(t("general.success"), {
+        onError: (e) => {
-        description: t("orders.shipment.toastCreated"),
+          toast.error(e.message)
-        dismissLabel: t("actions.close"),
+        },
-      })
-    } catch (e) {
-      toast.error(t("general.error"), {
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
       }
+    )
   })
 
   return (
@@ -99,6 +95,7 @@ export function OrderCreateShipmentForm({
 
                   {labels.map((label, index) => (
                     <Form.Field
+                      key={label.id}
                       control={form.control}
                       name={`labels.${index}.tracking_number`}
                       render={({ field }) => {

packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-fulfillment-section/order-fulfillment-section.tsx

@@ -1,6 +1,7 @@
 import { Buildings, XCircle } from "@medusajs/icons"
 import { AdminOrder, FulfillmentDTO, OrderLineItemDTO } from "@medusajs/types"
 import {
+  Button,
   Container,
   Copy,
   Heading,
@@ -9,7 +10,6 @@ import {
   Tooltip,
   toast,
   usePrompt,
-  Button,
 } from "@medusajs/ui"
 import { format } from "date-fns"
 import { useTranslation } from "react-i18next"
@@ -17,10 +17,10 @@ import { Link, useNavigate } from "react-router-dom"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { Skeleton } from "../../../../../components/common/skeleton"
 import { Thumbnail } from "../../../../../components/common/thumbnail"
+import { useCancelOrderFulfillment } from "../../../../../hooks/api/orders"
 import { useStockLocation } from "../../../../../hooks/api/stock-locations"
 import { formatProvider } from "../../../../../lib/format-provider"
 import { getLocaleAmount } from "../../../../../lib/money-amount-helpers"
-import { useCancelOrderFulfillment } from "../../../../../hooks/api/orders"
 
 type OrderFulfillmentSectionProps = {
   order: AdminOrder
@@ -190,10 +190,7 @@ const Fulfillment = ({
 
   const handleCancel = async () => {
     if (fulfillment.shipped_at) {
-      toast.warning(t("general.warning"), {
+      toast.warning(t("orders.fulfillment.toast.fulfillmentShipped"))
-        description: t("orders.fulfillment.toast.fulfillmentShipped"),
-        dismissLabel: t("actions.close"),
-      })
       return
     }
 
@@ -205,19 +202,14 @@ const Fulfillment = ({
     })
 
     if (res) {
-      try {
+      await mutateAsync(undefined, {
-        await mutateAsync()
+        onSuccess: () => {
-
+          toast.success(t("orders.fulfillment.toast.canceled"))
-        toast.success(t("general.success"), {
+        },
-          description: t("orders.fulfillment.toast.canceled"),
+        onError: (e) => {
-          dismissLabel: t("actions.close"),
+          toast.error(e.message)
+        },
       })
-      } catch (e) {
-        toast.error(t("general.error"), {
-          description: e.message,
-          dismissLabel: t("actions.close"),
-        })
-      }
     }
   }
 

packages/admin-next/dashboard/src/routes/price-lists/common/hooks/use-delete-price-list-action.tsx

@@ -32,22 +32,16 @@ export const useDeletePriceListAction = ({
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("priceLists.delete.successToast", {
+          t("priceLists.delete.successToast", {
             name: priceList.title,
-          }),
-          dismissable: true,
-          dismissLabel: t("actions.close"),
           })
+        )
 
         navigate("/price-lists")
       },
       onError: (e) => {
-        toast.error(t("general.error"), {
+        toast.error(e.message)
-          description: e.message,
-          dismissable: true,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/product-types/common/hooks/use-delete-product-type-action.tsx

@@ -22,18 +22,10 @@ export const useDeleteProductTypeAction = (id: string) => {
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(t("productTypes.delete.successToast"))
-          description: t("productTypes.delete.successToast"),
-          dismissLabel: t("actions.close"),
-          dismissable: true,
-        })
       },
       onError: (e) => {
-        toast.error(t("general.error"), {
+        toast.error(e.message)
-          description: e.message,
-          dismissLabel: t("actions.close"),
-          dismissable: true,
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/product-types/product-type-create/components/create-product-type-form/create-product-type-form.tsx

@@ -31,22 +31,16 @@ export const CreateProductTypeForm = () => {
     async (values: z.infer<typeof CreateProductTypeSchema>) => {
       await mutateAsync(values, {
         onSuccess: ({ product_type }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("productTypes.create.successToast", {
+            t("productTypes.create.successToast", {
               value: product_type.value,
-            }),
-            dismissLabel: t("actions.close"),
-            dismissable: true,
             })
+          )
 
           handleSuccess(`/settings/product-types/${product_type.id}`)
         },
         onError: (e) => {
-          toast.error(t("general.error"), {
+          toast.error(e.message)
-            description: e.message,
-            dismissLabel: t("actions.close"),
-            dismissable: true,
-          })
         },
       })
     }

packages/admin-next/dashboard/src/routes/product-types/product-type-edit/components/edit-product-type-form/edit-product-type-form.tsx

@@ -5,10 +5,7 @@ import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
 import { Form } from "../../../../../components/common/form"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useUpdateProductType } from "../../../../../hooks/api/product-types"
 
 const EditProductTypeSchema = z.object({
@@ -41,21 +38,15 @@ export const EditProductTypeForm = ({
       },
       {
         onSuccess: ({ product_type }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("productTypes.edit.successToast", {
+            t("productTypes.edit.successToast", {
               value: product_type.value,
-            }),
-            dismissable: true,
-            dismissLabel: t("general.close"),
             })
+          )
           handleSuccess()
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissable: true,
-            dismissLabel: t("general.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/product-variants/product-variant-manage-inventory-items/components/manage-variant-inventory-items-form/manage-variant-inventory-items-form.tsx

@@ -16,7 +16,6 @@ import {
 import { useProductVariantsInventoryItemsBatch } from "../../../../../hooks/api/products"
 import { useComboboxData } from "../../../../../hooks/use-combobox-data"
 import { sdk } from "../../../../../lib/client"
-import { useEffect } from "react"
 
 type ManageVariantInventoryItemsFormProps = {
   variant: AdminProductVariant & {
@@ -141,17 +140,11 @@ export function ManageVariantInventoryItemsForm({
 
     await mutateAsync(payload, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(t("products.variant.inventory.toast.itemsManageSuccess"))
-          description: t("products.variant.inventory.toast.itemsManageSuccess"),
-          dismissLabel: t("general.close"),
-        })
         handleSuccess()
       },
       onError: (err) => {
-        toast.error(t("general.error"), {
+        toast.error(err.message)
-          description: err.message,
-          dismissLabel: t("general.close"),
-        })
       },
     })
   })

packages/admin-next/dashboard/src/routes/products/product-create-option/components/create-product-option-form/create-product-option-form.tsx

@@ -7,10 +7,7 @@ import { z } from "zod"
 import { HttpTypes } from "@medusajs/types"
 import { Form } from "../../../../../components/common/form"
 import { ChipInput } from "../../../../../components/inputs/chip-input"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useCreateProductOption } from "../../../../../hooks/api/products"
 
 type EditProductOptionsFormProps = {
@@ -41,19 +38,15 @@ export const CreateProductOptionForm = ({
   const handleSubmit = form.handleSubmit(async (values) => {
     mutateAsync(values, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("products.options.create.successToast", {
+          t("products.options.create.successToast", {
             title: values.title,
-          }),
-          dismissLabel: t("general.close"),
           })
+        )
         handleSuccess()
       },
       onError: async (err) => {
-        toast.error(t("general.error"), {
+        toast.error(err.message)
-          description: err.message,
-          dismissLabel: t("general.close"),
-        })
       },
     })
   })

packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx

@@ -91,8 +91,7 @@ export const ProductCreateForm = ({
     [watchedVariants]
   )
 
-  const handleSubmit = form.handleSubmit(
+  const handleSubmit = form.handleSubmit(async (values, e) => {
-    async (values, e) => {
     let isDraftSubmission = false
     if (e?.nativeEvent instanceof SubmitEvent) {
       const submitter = e?.nativeEvent?.submitter as HTMLButtonElement
@@ -138,32 +137,23 @@ export const ProductCreateForm = ({
         })
       )
 
-        toast.success(t("general.success"), {
+      toast.success(
-          dismissLabel: t("actions.close"),
+        t("products.create.successToast", {
-          description: t("products.create.successToast", {
           title: product.title,
-          }),
         })
+      )
 
       handleSuccess(`../${product.id}`)
     } catch (error) {
       if (isFetchError(error) && error.status === 400) {
-          toast.error(t("general.error"), {
+        toast.error(error.message)
-            description: error.message,
-            dismissLabel: t("general.close"),
-          })
       } else {
         toast.error(t("general.error"), {
           description: error.message,
-            dismissLabel: t("general.close"),
         })
       }
     }
-    },
+  })
-    (err) => {
-      console.log(err)
-    }
-  )
 
   const onNext = async (currentTab: Tab) => {
     const valid = await form.trigger()

packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx

@@ -109,13 +109,11 @@ const ProductActions = ({ product }: { product: HttpTypes.AdminProduct }) => {
           description: t("products.toasts.delete.success.description", {
             title: product.title,
           }),
-          dismissLabel: t("actions.close"),
         })
       },
       onError: (e) => {
         toast.error(t("products.toasts.delete.error.header"), {
           description: e.message,
-          dismissLabel: t("actions.close"),
         })
       },
     })

packages/admin-next/dashboard/src/routes/products/product-organization/components/product-organization-form/product-organization-form.tsx

@@ -6,10 +6,7 @@ import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 import { Form } from "../../../../../components/common/form"
 import { Combobox } from "../../../../../components/inputs/combobox"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useUpdateProduct } from "../../../../../hooks/api/products"
 import { useComboboxData } from "../../../../../hooks/use-combobox-data"
 import { client, sdk } from "../../../../../lib/client"
@@ -87,19 +84,15 @@ export const ProductOrganizationForm = ({
       },
       {
         onSuccess: ({ product }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("products.organization.edit.toasts.success", {
+            t("products.organization.edit.toasts.success", {
               title: product.title,
-            }),
             })
+          )
           handleSuccess()
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissable: true,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/profile/profile-edit/components/edit-profile-form/edit-profile-form.tsx

@@ -6,10 +6,7 @@ import * as zod from "zod"
 
 import { UserDTO } from "@medusajs/types"
 import { Form } from "../../../../../components/common/form"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useUpdateUser } from "../../../../../hooks/api/users"
 import { languages } from "../../../../../i18n/languages"
 
@@ -58,17 +55,10 @@ export const EditProfileForm = ({ user, usageInsights }: EditProfileProps) => {
 
       await changeLanguage(values.language)
 
+      toast.success(t("profile.toast.edit"))
       handleSuccess()
-
-      toast.success(t("general.success"), {
-        description: t("profile.toast.edit"),
-        dismissLabel: t("actions.close"),
-      })
     } catch (e) {
-      toast.error(t("general.error"), {
+      toast.error(e.message)
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
     }
   })
 

packages/admin-next/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx

@@ -136,20 +136,16 @@ export const CreatePromotionForm = () => {
         },
         {
           onSuccess: ({ promotion }) => {
-            toast.success(t("general.success"), {
+            toast.success(
-              description: t("promotions.toasts.promotionCreateSuccess", {
+              t("promotions.toasts.promotionCreateSuccess", {
                 code: promotion.code,
-              }),
-              dismissLabel: t("actions.close"),
               })
+            )
 
             handleSuccess()
           },
           onError: (e) => {
-            toast.error(t("general.error"), {
+            toast.error(e.message)
-              description: e.message,
-              dismissLabel: t("actions.close"),
-            })
           },
         }
       )
@@ -159,10 +155,7 @@ export const CreatePromotionForm = () => {
       const errorInPromotionTab = !!Object.keys(rest || {}).length
 
       if (errorInPromotionTab) {
-        toast.error(t("general.error"), {
+        toast.error(t("promotions.errors.promotionTabError"))
-          description: t("promotions.errors.promotionTabError"),
-          dismissLabel: t("general.close"),
-        })
       }
     }
   )

packages/admin-next/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx

@@ -102,27 +102,24 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => {
 
   const handleSubmit = form.handleSubmit(async (values) => {
     const payload = [
-      ...(region.countries?.map((c) => c.iso_2) ?? []),
+      ...(region.countries?.map((c) => c.iso_2!) ?? []),
       ...values.countries,
     ]
 
-    try {
+    await mutateAsync(
-      await mutateAsync({
+      {
         countries: payload,
-      })
+      },
-
+      {
+        onSuccess: () => {
+          toast.success(t("regions.toast.countries"))
           handleSuccess()
-
+        },
-      toast.success(t("general.success"), {
+        onError: (error) => {
-        description: t("regions.toast.countries"),
+          toast.error(error.message)
-        dismissLabel: t("actions.close"),
+        },
-      })
-    } catch (e) {
-      toast.error(t("general.error"), {
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
       }
+    )
   })
 
   return (

packages/admin-next/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx

@@ -102,13 +102,12 @@ export const CreateRegionForm = ({
           })
         },
         onSuccess: ({ region }) => {
-          toast.success(t("general.success"), {
+          toast.success(t("regions.toast.create"))
-            description: t("regions.toast.create"),
-            dismissLabel: t("actions.close"),
-          })
-
           handleSuccess(`../${region.id}`)
         },
+        onError: (e) => {
+          toast.error(e.message)
+        },
       }
     )
   })

packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-country-section/region-country-section.tsx

@@ -1,4 +1,5 @@
 import { PlusMini, Trash } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
 import { Checkbox, Container, Heading, toast, usePrompt } from "@medusajs/ui"
 import {
   ColumnDef,
@@ -9,12 +10,11 @@ import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { DataTable } from "../../../../../components/table/data-table"
+import { useUpdateRegion } from "../../../../../hooks/api/regions"
 import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useCountries } from "../../../common/hooks/use-countries"
 import { useCountryTableColumns } from "../../../common/hooks/use-country-table-columns"
 import { useCountryTableQuery } from "../../../common/hooks/use-country-table-query"
-import { useUpdateRegion } from "../../../../../hooks/api/regions"
-import { HttpTypes } from "@medusajs/types"
 
 type RegionCountrySectionProps = {
   region: HttpTypes.AdminRegion
@@ -79,24 +79,22 @@ export const RegionCountrySection = ({ region }: RegionCountrySectionProps) => {
     }
 
     const payload = region.countries
-      .filter((c) => !ids.includes(c.iso_2))
+      ?.filter((c) => !ids.includes(c.iso_2!))
-      .map((c) => c.iso_2)
+      .map((c) => c.iso_2!)
 
-    try {
+    await mutateAsync(
-      await mutateAsync({
+      {
         countries: payload,
-      })
+      },
-
+      {
-      toast.success(t("general.success"), {
+        onSuccess: () => {
-        description: t("regions.toast.countries"),
+          toast.success(t("regions.toast.countries"))
-        dismissLabel: t("actions.close"),
+        },
-      })
+        onError: (e) => {
-    } catch (e) {
+          toast.error(e.message)
-      toast.error(t("general.error"), {
+        },
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
       }
+    )
   }
 
   return (
@@ -170,21 +168,19 @@ const CountryActions = ({
       return
     }
 
-    try {
+    await mutateAsync(
-      await mutateAsync({
+      {
         countries: payload,
-      })
+      },
-
+      {
-      toast.success(t("general.success"), {
+        onSuccess: () => {
-        description: t("regions.toast.countries"),
+          toast.success(t("regions.toast.countries"))
-        dismissLabel: t("actions.close"),
+        },
-      })
+        onError: (e) => {
-    } catch (e) {
+          toast.error(e.message)
-      toast.error(t("general.error"), {
+        },
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
       }
+    )
   }
 
   return (

packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-general-section/region-general-section.tsx

@@ -100,19 +100,15 @@ const RegionActions = ({ region }: { region: HttpTypes.AdminRegion }) => {
       return
     }
 
-    try {
+    await mutateAsync(undefined, {
-      await mutateAsync(undefined)
+      onSuccess: () => {
-      toast.success(t("general.success"), {
+        toast.success(t("regions.toast.delete"))
-        description: t("regions.toast.delete"),
-        dismissLabel: t("actions.close"),
-      })
-    } catch (e) {
-      toast.error(t("general.error"), {
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
-    }
         navigate("/settings/regions", { replace: true })
+      },
+      onError: (e) => {
+        toast.error(e.message)
+      },
+    })
   }
 
   return (

packages/admin-next/dashboard/src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx

@@ -71,12 +71,12 @@ export const EditRegionForm = ({
           })
         },
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(t("regions.toast.edit"))
-            description: t("regions.toast.edit"),
-            dismissLabel: t("actions.close"),
-          })
           handleSuccess()
         },
+        onError: (e) => {
+          toast.error(e.message)
+        },
       }
     )
   })

packages/admin-next/dashboard/src/routes/reservations/reservation-detail/components/edit-reservation/components/edit-reservation-form.tsx

@@ -69,11 +69,11 @@ export const EditReservationForm = ({
   const handleSubmit = form.handleSubmit(async (values) => {
     mutateAsync(values as any, {
       onSuccess: () => {
+        toast.success(t("inventory.reservation.updateSuccessToast"))
         handleSuccess()
-        toast.success(t("general.success"), {
+      },
-          dismissLabel: t("actions.close"),
+      onError: (e) => {
-          description: t("inventory.reservation.updateSuccessToast"),
+        toast.error(e.message)
-        })
       },
     })
   })

packages/admin-next/dashboard/src/routes/reservations/reservation-list/create-reservation/components/create-reservation-form/create-reservation-form.tsx

@@ -94,16 +94,16 @@ export const CreateReservationForm = (props: { inventoryItemId?: string }) => {
   const handleSubmit = form.handleSubmit(async (data) => {
     await mutateAsync(data, {
       onSuccess: ({ reservation }) => {
-        toast.success(t("general.success"), {
+        toast.success(t("inventory.reservation.successToast"))
-          dismissLabel: t("actions.close"),
-          description: t("inventory.reservation.successToast"),
-        })
         handleSuccess(
           props.inventoryItemId
             ? `/inventory/${props.inventoryItemId}`
             : `/reservations/${reservation.id}`
         )
       },
+      onError: (e) => {
+        toast.error(e.message)
+      },
     })
   })
 

packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx

@@ -1,11 +1,11 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { HttpTypes, SalesChannelDTO } from "@medusajs/types"
-import { Button, Checkbox, Hint, toast, Tooltip } from "@medusajs/ui"
+import { Button, Checkbox, Hint, Tooltip, toast } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import {
-  createColumnHelper,
   OnChangeFn,
   RowSelectionState,
+  createColumnHelper,
 } from "@tanstack/react-table"
 import { useMemo, useState } from "react"
 import { useForm } from "react-hook-form"
@@ -110,17 +110,10 @@ export const AddProductsToSalesChannelForm = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(t("salesChannels.toast.update"))
-            description: t("salesChannels.toast.update"),
-            dismissLabel: t("actions.close"),
-          })
           handleSuccess()
         },
-        onError: (error) =>
+        onError: (error) => toast.error(error.message),
-          toast.error(t("general.error"), {
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          }),
       }
     )
   })

packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/create-sales-channel-form.tsx

@@ -48,17 +48,10 @@ export const CreateSalesChannelForm = () => {
       },
       {
         onSuccess: ({ sales_channel }) => {
-          toast.success(t("general.success"), {
+          toast.success(t("salesChannels.toast.create"))
-            description: t("salesChannels.toast.create"),
-            dismissLabel: t("actions.close"),
-          })
           handleSuccess(`../${sales_channel.id}`)
         },
-        onError: (error) =>
+        onError: (error) => toast.success(error.message),
-          toast.success(t("general.success"), {
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          }),
       }
     )
   })

packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-general-section/sales-channel-general-section.tsx

@@ -43,21 +43,15 @@ export const SalesChannelGeneralSection = ({
       return
     }
 
-    try {
+    await mutateAsync(undefined, {
-      await mutateAsync()
+      onSuccess: () => {
-
+        toast.success(t("salesChannels.toast.delete"))
         navigate("/settings/sales-channels", { replace: true })
-
+      },
-      toast.success(t("general.success"), {
+      onError: (e) => {
-        description: t("salesChannels.toast.delete"),
+        toast.error(e.message)
-        dismissLabel: t("actions.close"),
+      },
     })
-    } catch (e) {
-      toast.error(t("general.error"), {
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
-    }
   }
 
   return (

packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-product-section/sales-channel-product-section.tsx

@@ -12,7 +12,7 @@ import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 
-import { SalesChannelDTO } from "@medusajs/types"
+import { HttpTypes, SalesChannelDTO } from "@medusajs/types"
 import { keepPreviousData } from "@tanstack/react-query"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { DataTable } from "../../../../../components/table/data-table"
@@ -22,7 +22,6 @@ import { useProductTableColumns } from "../../../../../hooks/table/columns/use-p
 import { useProductTableFilters } from "../../../../../hooks/table/filters/use-product-table-filters"
 import { useProductTableQuery } from "../../../../../hooks/table/query/use-product-table-query"
 import { useDataTable } from "../../../../../hooks/use-data-table"
-import { HttpTypes } from "@medusajs/types"
 
 const PAGE_SIZE = 10
 
@@ -100,17 +99,11 @@ export const SalesChannelProductSection = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(t("salesChannels.toast.update"))
-            description: t("salesChannels.toast.update"),
-            dismissLabel: t("actions.close"),
-          })
           setRowSelection({})
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )
@@ -225,20 +218,19 @@ const ProductListCellActions = ({
   const { mutateAsync } = useSalesChannelRemoveProducts(salesChannelId)
 
   const onRemove = async () => {
-    try {
+    await mutateAsync(
-      await mutateAsync({
+      {
         product_ids: [productId],
-      })
+      },
-      toast.success(t("general.success"), {
+      {
-        description: t("salesChannels.toast.update"),
+        onSuccess: () => {
-        dismissLabel: t("actions.close"),
+          toast.success(t("salesChannels.toast.update"))
-      })
+        },
-    } catch (e) {
+        onError: (e) => {
-      toast.error(t("general.error"), {
+          toast.error(e.message)
-        description: e.message,
+        },
-        dismissLabel: t("actions.close"),
-      })
       }
+    )
   }
 
   return (

packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/components/edit-sales-channel-form/edit-sales-channel-form.tsx

@@ -6,10 +6,7 @@ import * as zod from "zod"
 
 import { SalesChannelDTO } from "@medusajs/types"
 import { Form } from "../../../../../components/common/form"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useUpdateSalesChannel } from "../../../../../hooks/api/sales-channels"
 
 type EditSalesChannelFormProps = {
@@ -48,17 +45,11 @@ export const EditSalesChannelForm = ({
       },
       {
         onSuccess: () => {
-          toast.success(t("general.success"), {
+          toast.success(t("salesChannels.toast.update"))
-            description: t("salesChannels.toast.update"),
-            dismissLabel: t("actions.close"),
-          })
           handleSuccess()
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/components/sales-channel-list-table.tsx

@@ -4,9 +4,9 @@ import {
   Button,
   Container,
   Heading,
+  Text,
   toast,
   usePrompt,
-  Text,
 } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { createColumnHelper } from "@tanstack/react-table"
@@ -112,18 +112,14 @@ const SalesChannelActions = ({
       return
     }
 
-    try {
+    await mutateAsync(undefined, {
-      await mutateAsync()
+      onSuccess: () => {
-      toast.success(t("general.success"), {
+        toast.success(t("salesChannels.toast.delete"))
-        description: t("salesChannels.toast.delete"),
+      },
-        dismissLabel: t("actions.close"),
+      onError: (e) => {
+        toast.error(e.message)
+      },
     })
-    } catch (e) {
-      toast.error(t("general.error"), {
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
-    }
   }
 
   return (

packages/admin-next/dashboard/src/routes/shipping-profiles/shipping-profile-create/components/create-shipping-profile-form/create-shipping-profile-form.tsx

@@ -38,22 +38,18 @@ export function CreateShippingProfileForm() {
       },
       {
         onSuccess: ({ shipping_profile }) => {
-          toast.success(t("general.success"), {
+          toast.success(
-            description: t("shippingProfile.create.successToast", {
+            t("shippingProfile.create.successToast", {
               name: shipping_profile.name,
-            }),
-            dismissLabel: t("actions.close"),
             })
+          )
 
           handleSuccess(
             `/settings/locations/shipping-profiles/${shipping_profile.id}`
           )
         },
         onError: (error) => {
-          toast.error(t("general.error"), {
+          toast.error(error.message)
-            description: error.message,
-            dismissLabel: t("actions.close"),
-          })
         },
       }
     )

packages/admin-next/dashboard/src/routes/shipping-profiles/shipping-profile-detail/components/shipping-profile-general-section/shipping-profile-general-section.tsx

@@ -38,20 +38,16 @@ export const ShippingProfileGeneralSection = ({
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("shippingProfile.delete.successToast", {
+          t("shippingProfile.delete.successToast", {
             name: profile.name,
-          }),
-          dismissLabel: t("actions.close"),
           })
+        )
 
         navigate("/settings/locations/shipping-profiles", { replace: true })
       },
       onError: (error) => {
-        toast.error(t("general.error"), {
+        toast.error(error.message)
-          description: error.message,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/shipping-profiles/shipping-profiles-list/components/shipping-profile-list-table/shipping-options-row-actions.tsx

@@ -34,18 +34,14 @@ export const ShippingOptionsRowActions = ({
 
     await mutateAsync(undefined, {
       onSuccess: () => {
-        toast.success(t("general.success"), {
+        toast.success(
-          description: t("shippingProfile.delete.successToast", {
+          t("shippingProfile.delete.successToast", {
             name: profile.name,
-          }),
-          dismissLabel: t("actions.close"),
           })
+        )
       },
       onError: (error) => {
-        toast.error(t("general.error"), {
+        toast.error(error.message)
-          description: error.message,
-          dismissLabel: t("actions.close"),
-        })
       },
     })
   }

packages/admin-next/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx

@@ -113,26 +113,25 @@ export const AddCurrenciesForm = ({ store }: AddCurrenciesFormProps) => {
       defaultCurrency = currencies?.[0]
     }
 
-    try {
+    await mutateAsync(
-      await mutateAsync({
+      {
         supported_currencies: currencies.map((c) => ({
           currency_code: c,
           is_default: c === defaultCurrency,
           // TODO: Add UI to manage this
           is_tax_inclsuive: false,
         })),
-      })
+      },
-      toast.success(t("general.success"), {
+      {
-        description: t("store.toast.currenciesUpdated"),
+        onSuccess: () => {
-        dismissLabel: t("actions.close"),
+          toast.success(t("store.toast.currenciesUpdated"))
-      })
           handleSuccess()
-    } catch (e) {
+        },
-      toast.error(t("general.error"), {
+        onError: (error) => {
-        description: e.message,
+          toast.error(error.message)
-        dismissLabel: t("actions.close"),
+        },
-      })
       }
+    )
   })
 
   if (isError) {

packages/admin-next/dashboard/src/routes/store/store-detail/components/store-currency-section/store-currencies-section.tsx/store-currency-section.tsx

@@ -85,25 +85,23 @@ export const StoreCurrencySection = ({ store }: StoreCurrencySectionProps) => {
       return
     }
 
-    try {
+    await mutateAsync(
-      await mutateAsync({
+      {
         supported_currencies:
           store.supported_currencies?.filter(
             (c) => !ids.includes(c.currency_code)
           ) ?? [],
-      })
+      },
+      {
+        onSuccess: () => {
           setRowSelection({})
-
+          toast.success(t("store.toast.currenciesRemoved"))
-      toast.success(t("general.success"), {
+        },
-        description: t("store.toast.currenciesRemoved"),
+        onError: (e) => {
-        dismissLabel: t("actions.close"),
+          toast.error(e.message)
-      })
+        },
-    } catch (e) {
-      toast.error(t("general.error"), {
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
       }
+    )
   }
 
   if (isError) {
@@ -190,23 +188,21 @@ const CurrencyActions = ({
       return
     }
 
-    try {
+    await mutateAsync(
-      await mutateAsync({
+      {
         supported_currencies: supportedCurrencies.filter(
           (c) => c.currency_code !== currency.code
         ),
-      })
+      },
-
+      {
-      toast.success(t("general.success"), {
+        onSuccess: () => {
-        description: t("store.toast.currenciesRemoved"),
+          toast.success(t("store.toast.currenciesRemoved"))
-        dismissLabel: t("actions.close"),
+        },
-      })
+        onError: (e) => {
-    } catch (e) {
+          toast.error(e.message)
-      toast.error(t("general.error"), {
+        },
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
       }
+    )
   }
 
   return (

packages/admin-next/dashboard/src/routes/store/store-edit/components/edit-store-form/edit-store-form.tsx

@@ -5,10 +5,7 @@ import { useTranslation } from "react-i18next"
 import { z } from "zod"
 
 import { Form } from "../../../../../components/common/form"
-import {
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-  RouteDrawer,
-  useRouteModal,
-} from "../../../../../components/modals"
 import { useRegions } from "../../../../../hooks/api/regions"
 import { useUpdateStore } from "../../../../../hooks/api/store"
 import { ExtendedStoreDTO } from "../../../../../types/api-responses"
@@ -44,7 +41,6 @@ export const EditStoreForm = ({ store }: EditStoreFormProps) => {
   const { regions, isPending: isRegionsLoading } = useRegions({ limit: 999 })
 
   const handleSubmit = form.handleSubmit(async (values) => {
-    try {
     const normalizedMutation = {
       ...values,
       default_currency_code: undefined,
@@ -53,20 +49,15 @@ export const EditStoreForm = ({ store }: EditStoreFormProps) => {
         is_default: c.currency_code === values.default_currency_code,
       })),
     }
-      await mutateAsync(normalizedMutation)
+    await mutateAsync(normalizedMutation, {
-
+      onSuccess: () => {
+        toast.success(t("store.toast.update"))
         handleSuccess()
-
+      },
-      toast.success(t("general.success"), {
+      onError: (error) => {
-        description: t("store.toast.update"),
+        toast.error(error.message)
-        dismissLabel: t("actions.close"),
+      },
     })
-    } catch (e) {
-      toast.error(t("general.error"), {
-        description: e.message,
-        dismissLabel: t("actions.close"),
-      })
-    }
   })
 
   return (

packages/design-system/ui/package.json

@@ -105,7 +105,7 @@
     "react-aria": "^3.33.1",
     "react-currency-input-field": "^3.6.11",
     "react-stately": "^3.31.1",
-    "sonner": "^1.4.41",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^2.2.1",
     "upgrade": "^1.1.0",
     "yarn": "^1.22.22"

packages/design-system/ui/src/components/toast/toast.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import * as React from "react"
 
+import { Keyboard } from "@medusajs/icons"
+import { Kbd } from "../kbd"
 import { Toast } from "./toast"
 
 const meta: Meta<typeof Toast> = {
@@ -58,6 +60,13 @@ export const Loading: Story = {
   },
 }
 
+export const Message: Story = {
+  args: {
+    title: <span>Next time hit <Kbd>G</Kbd> then <Kbd>O</Kbd> to go to orders.</span>,
+    icon: <Keyboard className="text-ui-fg-subtle" />,
+  }
+}
+
 export const WithAction: Story = {
   args: {
     title: "Scheduled meeting",
@@ -70,3 +79,10 @@ export const WithAction: Story = {
     },
   },
 }
+
+export const NoDescription: Story = {
+  args: {
+    title: "Label",
+    variant: "info",
+  },
+}

packages/design-system/ui/src/components/toast/toast.tsx

@@ -1,17 +1,26 @@
-import { CheckCircleSolid, ExclamationCircleSolid, InformationCircleSolid, Spinner, XCircleSolid } from "@medusajs/icons"
+import {
+  CheckCircleSolid,
+  ExclamationCircleSolid,
+  InformationCircleSolid,
+  Spinner,
+  XCircleSolid,
+  XMark,
+} from "@medusajs/icons"
 import * as React from "react"
 
 import type { ToastAction, ToastVariant } from "@/types"
 import { clx } from "@/utils/clx"
+import { toast } from "sonner"
+import { IconButton } from "../icon-button"
 
 interface ToastComponentProps {
   id: string | number
   variant?: ToastVariant
-  title: string
+  title: React.ReactNode
-  description?: string
+  description?: React.ReactNode
   action?: ToastAction
-  onDismiss?: (id?: string | number) => void
+  icon?: React.ReactNode
-  dismissLabel?: string
+  dismissable?: boolean
 }
 
 /**
@@ -38,6 +47,13 @@ export const Toast = ({
    * The `toast` utility functions accept this as a parameter.
    */
   title,
+  /**
+   * @ignore
+   *
+   * @privateRemarks
+   * The `toast` utility functions accept this as a parameter.
+   */
+  icon: _icon,
   /**
    * The toast's text.
    */
@@ -50,18 +66,13 @@ export const Toast = ({
    * @ignore
    *
    * @privateRemarks
-   * The `toast` utility functions don't allow
+   * The `toast` utility functions accept this as a parameter.
-   * passing this prop.
    */
-  onDismiss,
+  dismissable = true,
-  /**
-   * The label of the dismiss button, if available.
-   */
-  dismissLabel = "Close",
 }: ToastComponentProps) => {
-  const hasActionables = !!action || onDismiss
+  let icon = _icon
-  let icon = undefined
 
+  if (!_icon) {
     switch (variant) {
       case "success":
         icon = <CheckCircleSolid className="text-ui-tag-green-icon" />
@@ -81,15 +92,15 @@ export const Toast = ({
       default:
         break
     }
+  }
 
   return (
-    <div className="shadow-elevation-flyout bg-ui-bg-base flex w-fit min-w-[360px] max-w-[440px] overflow-hidden rounded-lg">
+    <div className="shadow-elevation-flyout bg-ui-bg-component flex w-fit min-w-[360px] max-w-[440px] gap-x-3 overflow-hidden rounded-lg p-3">
       <div
-        className={clx("grid flex-1 items-start gap-3 py-3 pl-3", {
+        className={clx("grid flex-1 items-center gap-x-2", {
-          "border-r pr-3": hasActionables,
-          "pr-6": !hasActionables,
           "grid-cols-[20px_1fr]": !!icon,
           "grid-cols-1": !icon,
+          "items-start": !!description,
         })}
       >
         {!!icon && (
@@ -97,29 +108,26 @@ export const Toast = ({
             {icon}
           </span>
         )}
+        <div className="flex flex-col gap-y-3">
           <div className="flex flex-col">
             <span className="txt-compact-small-plus text-ui-fg-base">
               {title}
             </span>
+            {description && (
               <span className="txt-small text-ui-fg-subtle text-pretty">
                 {description}
               </span>
+            )}
           </div>
-      </div>
-      {hasActionables && (
-        <div
-          className={clx("grid grid-cols-1", {
-            "grid-rows-2": !!action && onDismiss,
-            "grid-rows-1": !action || !onDismiss,
-          })}
-        >
           {!!action && (
             <button
               type="button"
               className={clx(
-                "txt-compact-small-plus text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex items-center justify-center px-4 transition-colors",
+                "txt-compact-small-plus text-ui-fg-base bg-ui-bg-base flex w-fit items-center rounded-[4px] transition-colors",
+                "focus-visible:shadow-borders-focus",
+                "hover:text-ui-fg-subtle",
+                "disabled:text-ui-fg-disabled",
                 {
-                  "border-ui-border-base border-b": onDismiss,
                   "text-ui-fg-error": action.variant === "destructive",
                 }
               )}
@@ -128,18 +136,17 @@ export const Toast = ({
               {action.label}
             </button>
           )}
-          {onDismiss && (
-            <button
-              type="button"
-              onClick={() => onDismiss(id)}
-              className={clx(
-                "txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex items-center justify-center px-4 transition-colors"
-              )}
-            >
-              {dismissLabel}
-            </button>
-          )}
         </div>
+      </div>
+      {!!dismissable && (
+        <IconButton
+          size="2xsmall"
+          variant="transparent"
+          type="button"
+          onClick={() => toast.dismiss(id)}
+        >
+          <XMark />
+        </IconButton>
       )}
     </div>
   )

packages/design-system/ui/src/utils/toast.tsx

@@ -1,44 +1,45 @@
 import { Toast } from "@/components/toast"
 import { ToastAction, ToastVariant, ToasterPosition } from "@/types"
 import * as React from "react"
-import { toast as toastFn } from "sonner"
+import { ExternalToast, toast as toastFn } from "sonner"
 
 interface BaseToastProps {
   id?: string | number
   position?: ToasterPosition
-  dismissable?: boolean
-  dismissLabel?: string
   duration?: number
+  dismissable?: boolean
+  icon?: React.ReactNode
 }
 
 interface ToastProps extends BaseToastProps {
-  description?: string
+  description?: React.ReactNode
   action?: ToastAction
 }
 
-function create(variant: ToastVariant, title: string, props: ToastProps = {}) {
+function create(variant: ToastVariant, title: React.ReactNode, props: ToastProps = {}) {
-  return toastFn.custom(
+  const external: ExternalToast = {
-    (t) => {
-      return (
-        <Toast
-          id={props.id || t}
-          title={title}
-          description={props.description}
-          onDismiss={
-            props.dismissable ? () => toastFn.dismiss(props.id || t) : undefined
-          }
-          dismissLabel={props.dismissLabel}
-          variant={variant}
-          action={props.action}
-        />
-      )
-    },
-    {
-      id: props.id,
     position: props.position,
+    duration: props.duration,
     dismissible: props.dismissable,
   }
+
+  if (props.id) {
+    external.id = props.id
+  }
+
+  return toastFn.custom((t) => {
+    return (
+      <Toast
+        id={t}
+        title={title}
+        description={props.description}
+        dismissable={props.dismissable}
+        variant={variant}
+        action={props.action}
+        icon={props.icon}
+      />
     )
+  }, external)
 }
 
 function message(
@@ -54,6 +55,12 @@ function message(
   return create("message", title, props)
 }
 
+function custom() {
+  return create("message", "Custom",)
+}
+
+interface VariantToastProps extends Omit<ToastProps, "icon"> {}
+
 function info(
   /**
    * The title of the toast.
@@ -61,7 +68,7 @@ function info(
   /**
    * The props of the toast.
    */
-  props: ToastProps = {}
+  props: VariantToastProps = {}
 ) {
   return create("info", title, props)
 }
@@ -73,7 +80,7 @@ function error(
   /**
    * The props of the toast.
    */
-  props: ToastProps = {}
+  props: VariantToastProps = {}
 ) {
   return create("error", title, props)
 }
@@ -85,7 +92,7 @@ function success(
   /**
    * The props of the toast.
    */
-  props: ToastProps = {}
+  props: VariantToastProps = { }
 ) {
   return create("success", title, props)
 }
@@ -97,22 +104,19 @@ function warning(
   /**
    * The props of the toast.
    */
-  props: ToastProps = {}
+  props: VariantToastProps = {}
 ) {
   return create("warning", title, props)
 }
 
-type LoadingToastProps = Omit<ToastProps, "dismissable" | "dismissLabel">
+function loading(
-
-function loading
   /**
    * The title of the toast.
- */(
+   */ title: string,
-  title: string,
   /**
    * The props of the toast.
    */
-  props: ToastProps = {}
+  props: VariantToastProps = {}
 ) {
   return create("loading", title, { ...props, dismissable: false })
 }
@@ -124,7 +128,7 @@ type PromiseStateProps =
       description?: string
     }
 
-interface PromiseToastProps extends BaseToastProps {
+interface PromiseToastProps extends Omit<BaseToastProps, "icon"> {
   loading: PromiseStateProps
   success: PromiseStateProps
   error: PromiseStateProps
@@ -158,6 +162,7 @@ async function promise<TData>(
           ? undefined
           : props.loading.description,
       duration: Infinity,
+      dismissable: false,
     }
   )
 

yarn.lock

@@ -5272,7 +5272,7 @@ __metadata:
     react-stately: ^3.31.1
     resize-observer-polyfill: ^1.5.1
     rimraf: ^5.0.1
-    sonner: ^1.4.41
+    sonner: ^1.5.0
     storybook: ^7.0.23
     tailwind-merge: ^2.2.1
     tailwindcss: ^3.4.3
@@ -27976,13 +27976,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sonner@npm:^1.4.41":
+"sonner@npm:^1.5.0":
-  version: 1.4.41
+  version: 1.5.0
-  resolution: "sonner@npm:1.4.41"
+  resolution: "sonner@npm:1.5.0"
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 31467ecab0fcbd5161fb76d158c698841b524686f7f598eecbc2a58d76bc496b5d5242df4350e274575aa3df59428d3aacd534415c968b19fc309c192c443330
+  checksum: 9561b5861bede7f874cc442e447a68c8bfa6e4eadad603bc04e38db35a8b8108741f595a12c9856742062bae230ffedf73122015940491f482c5aa9e68ee85e0
   languageName: node
   linkType: hard