chore: refactor cart-related features to honor architecture and building blocks taxonomy

Author: bartstc

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

@@ -21,7 +21,7 @@ export const useAddToCart = () => {
   } = useAddToCartNotifications();
   const onOpen = useProductAddedDialogStore((store) => store.onOpen);
 
-  const execute = async (productId: number) => {
+  const addToCart = async (productId: number) => {
     if (!isAuthenticated) {
       notifyNotAuthenticated();
       return;
@@ -46,5 +46,5 @@ export const useAddToCart = () => {
     }
   };
 
-  return { execute, isPending };
+  return { addToCart, isPending };
 };

…rtButton/use-clear-cart-notifications.ts …lication/use-clear-cart-notifications.tssrc/features/carts/components/ClearCartButton/use-clear-cart-notifications.ts renamed to src/features/carts/application/use-clear-cart-notifications.ts src/features/carts/components/ClearCartButton/use-clear-cart-notifications.ts renamed to src/features/carts/application/use-clear-cart-notifications.ts

@@ -5,19 +5,19 @@ export const useClearCartNotifications = () => {
   const t = useTranslations("features.carts.clear-cart.notifications");
   const toast = useToast();
 
-  const success = () =>
+  const notifySuccess = () =>
     toast({
       status: "success",
       title: t("title"),
       description: t("success"),
     });
 
-  const failure = () =>
+  const notifyFailure = () =>
     toast({
       status: "error",
       title: t("title"),
       description: t("error"),
     });
 
-  return [success, failure] as const;
+  return { notifySuccess, notifyFailure };
 };

src/features/carts/application/use-clear-cart.ts

@@ -0,0 +1,25 @@
+import { useAuthStore } from "@/features/auth/application/auth-store";
+import { useClearCartMutation } from "@/features/carts/providers/use-clear-cart-mutation";
+
+import { useClearCartNotifications } from "./use-clear-cart-notifications";
+
+export const useClearCart = () => {
+  const cartId = useAuthStore((store) => store.user?.cartId);
+  const [mutateAsync, isPending] = useClearCartMutation();
+  const { notifySuccess, notifyFailure } = useClearCartNotifications();
+
+  const clearCart = async (): Promise<boolean> => {
+    if (!cartId) return false;
+
+    try {
+      await mutateAsync({ cartId });
+      notifySuccess();
+      return true;
+    } catch {
+      notifyFailure();
+      return false;
+    }
+  };
+
+  return { clearCart, isPending };
+};

…components/use-checkout-notifications.ts …pplication/use-purchase-notifications.tssrc/features/carts/components/use-checkout-notifications.ts renamed to src/features/carts/application/use-purchase-notifications.ts src/features/carts/components/use-checkout-notifications.ts renamed to src/features/carts/application/use-purchase-notifications.ts

@@ -5,19 +5,19 @@ export const usePurchaseNotifications = () => {
   const t = useTranslations("features.carts.checkout.notifications");
   const toast = useToast();
 
-  const success = () =>
+  const notifySuccess = () =>
     toast({
       status: "success",
       title: t("title"),
       description: t("success"),
     });
 
-  const failure = () =>
+  const notifyFailure = () =>
     toast({
       status: "error",
       title: t("title"),
       description: t("error"),
     });
 
-  return [success, failure] as const;
+  return { notifySuccess, notifyFailure };
 };

src/features/carts/application/use-purchase.ts

@@ -0,0 +1,21 @@
+import { usePurchaseMutation } from "@/features/carts/providers/use-purchase-mutation";
+
+import { usePurchaseNotifications } from "./use-purchase-notifications";
+
+export const usePurchase = () => {
+  const [mutateAsync, isPending] = usePurchaseMutation();
+  const { notifySuccess, notifyFailure } = usePurchaseNotifications();
+
+  const purchase = async (): Promise<boolean> => {
+    try {
+      await mutateAsync();
+      notifySuccess();
+      return true;
+    } catch {
+      notifyFailure();
+      return false;
+    }
+  };
+
+  return { purchase, isPending };
+};

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

@@ -10,14 +10,14 @@ interface IProps {
 
 const AddToCartButton = ({ productId, colorPalette = "gray" }: IProps) => {
   const t = useTranslations("features.carts.add-to-cart");
-  const { execute, isPending } = useAddToCart();
+  const { addToCart, isPending } = useAddToCart();
 
   return (
     <Button
       w="100%"
       colorPalette={colorPalette}
       loading={isPending}
-      onClick={() => execute(productId)}
+      onClick={() => addToCart(productId)}
     >
       {t("button")}
     </Button>

src/features/carts/components/CheckoutForm.tsx

@@ -1,14 +1,12 @@
 import { Button, VStack } from "@chakra-ui/react";
 import { useState } from "react";
 
+import { usePurchase } from "@/features/carts/application/use-purchase";
 import type { PaymentMethod } from "@/features/carts/models/payment-method";
-import { usePurchase } from "@/features/carts/providers/use-purchase";
 import { Select } from "@/lib/components/Form/Select";
 import { TextInput } from "@/lib/components/Form/TextInput";
 import { useTranslations } from "@/lib/i18n/use-transations";
 
-import { usePurchaseNotifications } from "./use-checkout-notifications";
-
 interface IProps {
   onSuccess?: () => void;
 }
@@ -19,8 +17,7 @@ const CheckoutForm = ({ onSuccess }: IProps) => {
   const [address, setAddress] = useState<string>();
   const [method, setMethod] = useState<PaymentMethod>("blik");
 
-  const [purchase, isLoading] = usePurchase();
-  const [notifySuccess, notifyFailure] = usePurchaseNotifications();
+  const { purchase, isPending } = usePurchase();
 
   return (
     <VStack
@@ -29,13 +26,8 @@ const CheckoutForm = ({ onSuccess }: IProps) => {
       onSubmit={async (e) => {
         e.preventDefault();
 
-        try {
-          await purchase();
-          notifySuccess();
-          onSuccess?.();
-        } catch {
-          notifyFailure();
-        }
+        const success = await purchase();
+        if (success) onSuccess?.();
       }}
     >
       <TextInput
@@ -64,7 +56,7 @@ const CheckoutForm = ({ onSuccess }: IProps) => {
       >
         {t("payment-method")}
       </Select>
-      <Button type="submit" colorPalette="blue" w="100%" loading={isLoading}>
+      <Button type="submit" colorPalette="blue" w="100%" loading={isPending}>
         {t("submit")}
       </Button>
     </VStack>

src/features/carts/components/ClearCartButton/ConfirmClearCartDialog.tsx

@@ -7,23 +7,19 @@ import {
   Text,
 } from "@chakra-ui/react";
 
+import { useClearCart } from "@/features/carts/application/use-clear-cart";
 import { useConfirmClearCartDialogStore } from "@/features/carts/components/ClearCartButton/use-confirm-clear-cart-dialog-store";
-import { useClearCart } from "@/features/carts/providers/use-clear-cart";
 import { useTranslations } from "@/lib/i18n/use-transations";
 
-import { useClearCartNotifications } from "./use-clear-cart-notifications";
-
 const ConfirmClearCartDialog = () => {
-  const [clear, isLoading] = useClearCart();
+  const { clearCart, isPending } = useClearCart();
   const t = useTranslations("features.carts.clear-cart.dialog");
 
   const { isOpen, onClose } = useConfirmClearCartDialogStore((state) => ({
     isOpen: state.isOpen,
     onClose: state.onClose,
   }));
 
-  const [notifySuccess, notifyFailure] = useClearCartNotifications();
-
   return (
     <Dialog.Root
       role="alertdialog"
@@ -52,15 +48,12 @@ const ConfirmClearCartDialog = () => {
               <Button
                 colorPalette="red"
                 onClick={() => {
-                  clear()
-                    .then(() => {
-                      notifySuccess();
-                      onClose();
-                    })
-                    .catch(() => notifyFailure());
+                  void clearCart().then((success) => {
+                    if (success) onClose();
+                  });
                 }}
                 ml={3}
-                loading={isLoading}
+                loading={isPending}
               >
                 {t("confirm")}
               </Button>

src/features/carts/providers/use-clear-cart-mutation.ts

@@ -0,0 +1 @@
+export { useClearCartMutation } from "@/lib/api/carts/{cart-id}/clear-cart-mutation";