chore: refactor add to cart feature

Author: bartstc

public/locales/en-GB/translation.json

@@ -99,6 +99,8 @@
           "title": "New product",
           "success": "A product has been successfully added to your cart.",
           "error": "Something went wrong with adding a product to a cart. Pleas try again or contact us.",
+          "unknown-product-error": "Product doesn't exist. It may be unavailable or removed from the store.",
+          "product-not-available-error": "Product is not available. It may be out of stock or removed from the store.",
           "not-authenticated": "Please log in in order to add products."
         },
         "dialog": {

src/features/carts/components/AddToCartButton/AddToCartButton.tsx

@@ -2,7 +2,11 @@ import { Button, type ButtonProps } from "@chakra-ui/react";
 
 import { useAuthStore } from "@/features/auth/application/auth-store";
 import { useProductAddedDialogStore } from "@/features/carts/components/AddToCartButton/use-product-added-dialog-store";
-import { useAddToCart } from "@/features/carts/providers/use-add-to-cart";
+import {
+  useAddToCart,
+  UnknownProductError,
+  ProductNotAvailableError,
+} from "@/features/carts/providers/use-add-to-cart";
 import { useTranslations } from "@/lib/i18n/use-transations";
 
 import { useAddToCartNotifications } from "./use-add-to-cart-notifications";
@@ -18,28 +22,45 @@ const AddToCartButton = ({ productId, colorPalette = "gray" }: IProps) => {
   const t = useTranslations("features.carts.add-to-cart");
 
   const [add, isLoading] = useAddToCart();
-  const { notifyFailure, notifySuccess, notifyNotAuthenticated } =
-    useAddToCartNotifications();
+  const {
+    notifyFailure,
+    notifySuccess,
+    notifyNotAuthenticated,
+    notifyUnknownProduct,
+    notifyProductNotAvailable,
+  } = useAddToCartNotifications();
   const onOpen = useProductAddedDialogStore((store) => store.onOpen);
 
+  const onAdd = async () => {
+    if (!isAuthenticated) {
+      return notifyNotAuthenticated();
+    }
+
+    try {
+      await add({ productId, quantity: 1 });
+      notifySuccess();
+      onOpen(cartId);
+    } catch (e) {
+      if (e instanceof UnknownProductError) {
+        notifyUnknownProduct();
+        return;
+      }
+
+      if (e instanceof ProductNotAvailableError) {
+        notifyProductNotAvailable();
+        return;
+      }
+
+      notifyFailure();
+    }
+  };
+
   return (
     <Button
       w="100%"
       colorPalette={colorPalette}
       loading={isLoading}
-      onClick={async () => {
-        if (!isAuthenticated) {
-          return notifyNotAuthenticated();
-        }
-
-        try {
-          await add({ productId });
-          notifySuccess();
-          onOpen(cartId);
-        } catch {
-          notifyFailure();
-        }
-      }}
+      onClick={onAdd}
     >
       {t("button")}
     </Button>

src/features/carts/components/AddToCartButton/use-add-to-cart-notifications.ts

@@ -26,5 +26,25 @@ export const useAddToCartNotifications = () => {
       description: t("not-authenticated"),
     });
 
-  return { notifySuccess, notifyFailure, notifyNotAuthenticated } as const;
+  const notifyUnknownProduct = () =>
+    toast({
+      status: "error",
+      title: t("title"),
+      description: t("unknown-product-error"),
+    });
+
+  const notifyProductNotAvailable = () =>
+    toast({
+      status: "error",
+      title: t("title"),
+      description: t("product-not-available-error"),
+    });
+
+  return {
+    notifySuccess,
+    notifyFailure,
+    notifyNotAuthenticated,
+    notifyUnknownProduct,
+    notifyProductNotAvailable,
+  } as const;
 };

src/features/carts/providers/use-add-to-cart.ts

@@ -1,7 +1,12 @@
 import { useAuthStore } from "@/features/auth/application/auth-store";
-import { useAddToCartMutation } from "@/lib/api/carts/{cart-id}/add-to-cart-command";
+import {
+  useAddToCartMutation,
+  UnknownProductError,
+  ProductNotAvailableError,
+} from "@/lib/api/carts/{cart-id}/add-to-cart-command";
+import { UnauthorizedError } from "@/lib/types/unauthorized-error";
 
-interface IAddToCartValues {
+interface AddToCartPayload {
   productId: number;
   quantity?: number;
 }
@@ -11,12 +16,14 @@ export const useAddToCart = () => {
   const userId = useAuthStore((store) => store.user?.id);
   const [mutateAsync, isLoading] = useAddToCartMutation();
 
-  const handler = (body: IAddToCartValues) => {
+  const handler = (body: AddToCartPayload) => {
     if (!cartId || !userId) {
-      throw new Error("User not authenticated");
+      throw new UnauthorizedError();
     }
     return mutateAsync({ ...body, cartId, userId });
   };
 
   return [handler, isLoading] as const;
 };
+
+export { UnknownProductError, ProductNotAvailableError };

src/lib/api/carts/{cart-id}/add-to-cart-command.ts

@@ -3,15 +3,16 @@ import { useMutation } from "@tanstack/react-query";
 import { DateVO } from "@/lib/date/date";
 import { httpService } from "@/lib/http";
 import { Logger } from "@/lib/logger";
+import { UnknownError } from "@/lib/types/unknown-error";
 
-interface IAddToCartValues {
+interface AddToCartPayload {
   productId: number;
   quantity?: number;
   cartId: number;
   userId: number;
 }
 
-interface IAddToCartDto {
+interface AddToCartDto {
   userId: number;
   date: string;
   products: { productId: number; quantity: number }[];
@@ -21,33 +22,50 @@ export const useAddToCartMutation = () => {
   const { mutateAsync, isPending } = useMutation<
     void,
     unknown,
-    IAddToCartValues
+    AddToCartPayload
   >({
     mutationFn: (body) =>
-      httpService.put<void, IAddToCartDto>(`carts/${body.cartId}`, {
+      httpService.put<void, AddToCartDto>(`carts/${body.cartId}`, {
         userId: body.userId,
         date: DateVO.now(),
         products: [{ productId: body.productId, quantity: body.quantity ?? 1 }],
       }),
   });
 
-  const handler = (body: IAddToCartValues) => {
-    return mutateAsync(body)
-      .then(async () => {
-        // optionally mutate related data
-      })
-      .catch((e) => {
-        // listen for a specific error and act respectively (e.g. throwing a specific error and catch it later)
-
-        // notify backend about the error if needed
-        Logger.error(
-          "An error occurred during adding an item to the cart",
-          e as Error
-        );
-
-        throw e;
-      });
+  const handler = async (body: AddToCartPayload) => {
+    try {
+      return await mutateAsync(body);
+    } catch (e) {
+      Logger.error(
+        "An error occurred during adding an item to the cart",
+        e as Error
+      );
+
+      if (httpService.isError(e) && e.message === "Unknown product") {
+        throw new UnknownProductError();
+      }
+
+      if (httpService.isError(e) && e.message === "Product not available") {
+        throw new ProductNotAvailableError();
+      }
+
+      throw new UnknownError();
+    }
   };
 
   return [handler, isPending] as const;
 };
+
+export class UnknownProductError extends Error {
+  constructor() {
+    super("Unknown product");
+    this.name = "UnknownProductError";
+  }
+}
+
+export class ProductNotAvailableError extends Error {
+  constructor() {
+    super("Product not available");
+    this.name = "ProductNotAvailableError";
+  }
+}

src/lib/http/http-service.ts

@@ -73,4 +73,8 @@ export class HttpService<
   private configure(customOptions?: Options): Options {
     return Object.assign(this.client.options, customOptions);
   }
+
+  public isError(error: unknown): error is Error {
+    return error instanceof Error;
+  }
 }

src/lib/types/unauthorized-error.ts

@@ -0,0 +1,6 @@
+export class UnauthorizedError extends Error {
+  constructor() {
+    super("User not authenticated");
+    this.name = "UnauthorizedError";
+  }
+}

src/lib/types/unknown-error.ts

@@ -0,0 +1,6 @@
+export class UnknownError extends Error {
+  constructor() {
+    super("An unknown error occurred");
+    this.name = "UnknownError";
+  }
+}