Add all favorites to Cart Button

src/components/common/cart/AddAllToCart.tsx

@@ -0,0 +1,86 @@
+import { onMount } from "solid-js";
+import type { Component } from "solid-js";
+import type { Post } from "@lib/types";
+import { getLangFromUrl, useTranslations } from "@i18n/utils";
+import cart from "@assets/shopping-cart.svg";
+import { items, setItems } from "@components/common/cart/AddToCartButton";
+
+const lang = getLangFromUrl(new URL(window.location.href));
+const t = useTranslations(lang);
+
+interface Props {
+    favorites: Post[];
+}
+
+export const AddAllToCart: Component<Props> = (props: Props) => {
+    const storedItems = localStorage.getItem("cartItems");
+
+    props.favorites.map((fav) => {
+        fav.quantity = 1;
+    });
+
+    onMount(() => {
+        if (storedItems) {
+            setItems(JSON.parse(storedItems));
+        }
+    });
+
+    function clickHandler(e: Event) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const elem = document.getElementById("addAllToCart");
+        elem?.classList.add("animate-click");
+
+        let itemInCart = false;
+
+        const updatedItems = items.map((item: Post) => {
+            const favoriteMatch = props.favorites.find(
+                (favoritePost) => favoritePost.product_id === item.product_id
+            );
+            if (favoriteMatch) {
+                itemInCart = true;
+                console.log(item.quantity, favoriteMatch.quantity);
+                return {
+                    ...item,
+                    quantity: item.quantity + favoriteMatch.quantity,
+                };
+            }
+            console.log(item);
+            return item;
+        });
+
+        const newItems = props.favorites.filter(
+            (fav) => !items.some((item) => item.product_id === fav.product_id)
+        );
+        if (newItems.length > 0) {
+            const newCartItems = [...updatedItems, ...newItems];
+            setItems(newCartItems);
+            console.log(newCartItems);
+            elem!.innerText = t("buttons.addedToCart");
+        } else {
+            // update the store quantity
+            setItems(updatedItems);
+            console.log(updatedItems);
+            elem!.innerText = t("buttons.addedToCart");
+        }
+
+        localStorage.setItem("cartItems", JSON.stringify(updatedItems));
+    }
+
+    return (
+        <div class="relative z-10 w-full">
+            <button
+                onclick={(e) => clickHandler(e)}
+                class="btn-cart"
+                aria-label={t("buttons.addAllToCart")}
+                id={"addAllToCart"}
+                onAnimationEnd={(elem) => {
+                    elem.target.classList.remove("animate-click");
+                }}
+            >
+                {t("buttons.addAllToCart")}
+            </button>
+        </div>
+    );
+};

src/components/posts/ViewUserFavorites.tsx

@@ -13,6 +13,7 @@ import { MobileViewCard } from "@components/services/MobileViewCard.tsx";
 import { useStore } from "@nanostores/solid";
 import { windowSize } from "@components/common/WindowSizeStore";
 import { downloadPostImage, downloadUserImage } from "@lib/imageHelper.tsx";
+import { AddAllToCart } from "@components/common/cart/AddAllToCart.tsx";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
@@ -105,6 +106,7 @@ export const ViewUserFavorites: Component = () => {
                         }
                     >
                         <ViewCard posts={favoritedItems()} />
+                        <AddAllToCart favorites={favoritedItems()} />
                     </Show>
 
                     <Show
@@ -113,6 +115,7 @@ export const ViewUserFavorites: Component = () => {
                         }
                     >
                         <MobileViewCard lang={lang} posts={favoritedItems()} />
+                        <AddAllToCart favorites={favoritedItems()} />
                     </Show>
                     <Show when={favoritedItems().length === 0}>
                         <p class="mb-6 italic">

src/i18n/UI/English.ts

@@ -111,6 +111,7 @@ export const English = {
     filters: "Filters",
     faq: "Help Center",
     addToCart: "Add to Cart",
+    addAllToCart: "Add All to Cart",
     stripeSetup: "Stripe Setup",
     stripeLogin: "Stripe Login",
     proceedToCheckout: "Proceed to Checkout",

src/i18n/UI/French.ts

@@ -108,6 +108,7 @@ export const French = {
     filters: "Filtres",
     faq: "Centre d'Aide",
     addToCart: "Ajouter au panier",
+    addAllToCart: "Ajouter tout panier",
     stripeSetup: "Configuration de Stripe",
     stripeLogin: "Connexion à Stripe",
     proceedToCheckout: "Passer à la caisse",

src/i18n/UI/Spanish.ts

@@ -111,7 +111,8 @@ export const Spanish = {
     saveProfile: "Guardar Perfil",
     filters: "Filtros",
     faq: "Centro de Ayuda",
-    addToCart: "añadir a la cesta",
+    addToCart: "Añadir a la cesta",
+    addAllToCart: "Añadir todo a la cesta",
     stripeSetup: "Configuración de Stripe",
     stripeLogin: "Iniciar sesión Stripe",
     proceedToCheckout: "Pasar por la caja",

src/i18n/uiType.ts

@@ -116,6 +116,7 @@ export interface uiObject {
         filters: string;
         faq: string;
         addToCart: string;
+        addAllToCart: string;
         stripeSetup: string;
         stripeLogin: string;
         proceedToCheckout: string;
@@ -145,6 +146,7 @@ export interface uiObject {
     };
 
 
+
     messages: {
         noAccount: string;
         emailValid: string;