diff --git a/src/components/common/cart/AddAllToCart.tsx b/src/components/common/cart/AddAllToCart.tsx new file mode 100644 index 00000000..b23b5c3c --- /dev/null +++ b/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) => { + 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 ( +
+ +
+ ); +}; diff --git a/src/components/posts/ViewUserFavorites.tsx b/src/components/posts/ViewUserFavorites.tsx index 6929c63c..7ed37d16 100644 --- a/src/components/posts/ViewUserFavorites.tsx +++ b/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 = () => { } > + { } > +

diff --git a/src/i18n/UI/English.ts b/src/i18n/UI/English.ts index e6a02acd..fa6cd070 100644 --- a/src/i18n/UI/English.ts +++ b/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", diff --git a/src/i18n/UI/French.ts b/src/i18n/UI/French.ts index 444ad234..bcbaff67 100644 --- a/src/i18n/UI/French.ts +++ b/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", diff --git a/src/i18n/UI/Spanish.ts b/src/i18n/UI/Spanish.ts index 767526e2..e869ed36 100644 --- a/src/i18n/UI/Spanish.ts +++ b/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", diff --git a/src/i18n/uiType.ts b/src/i18n/uiType.ts index b643dde9..91dddfac 100644 --- a/src/i18n/uiType.ts +++ b/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;