diff --git a/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-button.tsx b/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-button.tsx
deleted file mode 100644
index edd89e106..000000000
--- a/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-button.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client';
-
-import { Heart } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-
-import { Button } from '~/components/ui/button';
-
-import { useWishlistSheetContext } from './wishlist-sheet-context';
-
-interface WishlistSheetButtonProps {
- productId: number;
-}
-
-export const WishlistSheetButton = ({ productId }: WishlistSheetButtonProps) => {
- const t = useTranslations('Components.ProductCard.OpenWishlistSheet');
-
- const { setProductId } = useWishlistSheetContext();
-
- return (
-
- );
-};
diff --git a/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-context.tsx b/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-context.tsx
deleted file mode 100644
index e9d4af5e3..000000000
--- a/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-context.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client';
-
-import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useState } from 'react';
-
-export const WishlistSheetContext = createContext<{
- productId: number | null;
- setProductId: Dispatch>;
-} | null>(null);
-
-export const WishlistSheetProvider = ({ children }: { children: ReactNode }) => {
- const [productId, setProductId] = useState(null);
-
- return (
-
- {children}
-
- );
-};
-
-export function useWishlistSheetContext() {
- const context = useContext(WishlistSheetContext);
-
- if (!context) {
- throw new Error('useWishlistSheetContext must be used within a WishlistSheetProvider');
- }
-
- return context;
-}
diff --git a/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-wrapper.tsx b/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-wrapper.tsx
deleted file mode 100644
index 140b990b0..000000000
--- a/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-wrapper.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-
-import { Wishlist, WishlistSheet } from '../../account/(tabs)/wishlists/_components/wishlist-sheet';
-
-import { useWishlistSheetContext } from './wishlist-sheet-context';
-
-interface WishlistSheetWrapperProps {
- wishlistsData: Wishlist[];
-}
-
-export const WishlistSheetWrapper = ({ wishlistsData }: WishlistSheetWrapperProps) => {
- const { productId } = useWishlistSheetContext();
-
- if (!productId) return null;
-
- return (
-
- );
-};
diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx b/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx
index 213e751c6..bee13c3ee 100644
--- a/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx
+++ b/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx
@@ -10,7 +10,6 @@ import { LocaleType } from '~/i18n/routing';
import { FacetedSearch } from '../../_components/faceted-search';
import { MobileSideNav } from '../../_components/mobile-side-nav';
import { SortBy } from '../../_components/sort-by';
-import { WishlistSheetWrapper } from '../../_components/wishlist-sheet-wrapper';
import { fetchFacetedSearch } from '../../fetch-faceted-search';
import { CategoryViewed } from './_components/category-viewed';
@@ -124,12 +123,11 @@ export default async function Category({ params: { locale, slug }, searchParams
key={product.entityId}
product={product}
showWishlistSheet
+ wishlists={wishlists}
/>
))}
-
-
{
try {
const newWishlist = await createWishlistMutation({ input });
- revalidatePath('/account/wishlists', 'page');
+ revalidatePath('/', 'page');
if (newWishlist) {
return {
diff --git a/core/app/[locale]/(default)/account/(tabs)/wishlists/_components/wishlist-sheet/index.tsx b/core/app/[locale]/(default)/account/(tabs)/wishlists/_components/wishlist-sheet/index.tsx
index 97307758e..b91c622cb 100644
--- a/core/app/[locale]/(default)/account/(tabs)/wishlists/_components/wishlist-sheet/index.tsx
+++ b/core/app/[locale]/(default)/account/(tabs)/wishlists/_components/wishlist-sheet/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import { Heart } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { PropsWithChildren, useEffect, useState } from 'react';
@@ -14,33 +16,25 @@ import { WishlistSheetContent } from './wishlist-sheet-content';
export type Wishlist = NonNullable['data']>;
interface WishlistSheetProps extends PropsWithChildren {
- defaultOpen?: boolean;
productId: number;
+ trigger?: 'button' | 'icon';
wishlistsData: Wishlist[];
- withTrigger?: boolean;
}
export const WishlistSheet = ({
- defaultOpen = false,
- withTrigger = true,
productId,
+ trigger = 'button',
wishlistsData,
}: WishlistSheetProps) => {
const t = useTranslations('Account.Wishlist.Sheet');
- const [open, setOpen] = useState(defaultOpen);
-
- useEffect(() => {
- setOpen(true);
- }, [productId]);
+ const [open, setOpen] = useState(false);
- const [wishlists, setWishlists] = useState(() => {
- if (wishlistsData.length === 0) {
- return [{ items: [], entityId: 0, name: t('favorites') }];
- }
+ const [wishlists, setWishlists] = useState(wishlistsData);
- return wishlistsData;
- });
+ useEffect(() => {
+ setWishlists(wishlistsData);
+ }, [wishlistsData]);
const [saved, setSaved] = useState(() => {
if (wishlistsData.length === 0) {
@@ -67,7 +61,7 @@ export const WishlistSheet = ({
side="right"
title={t('title')}
trigger={
- withTrigger && (
+ trigger === 'button' ? (
+ ) : (
+
)
}
>
diff --git a/core/app/providers.tsx b/core/app/providers.tsx
index fe855abc3..94e21c959 100644
--- a/core/app/providers.tsx
+++ b/core/app/providers.tsx
@@ -4,15 +4,12 @@ import { PropsWithChildren } from 'react';
import { CompareDrawerProvider } from '~/components/ui/compare-drawer';
-import { WishlistSheetProvider } from './[locale]/(default)/(faceted)/_components/wishlist-sheet-context';
import { AccountStatusProvider } from './[locale]/(default)/account/(tabs)/_components/account-status-provider';
export function Providers({ children }: PropsWithChildren) {
return (
-
-
- {children}
-
-
+
+ {children}
+
);
}
diff --git a/core/components/product-card/index.tsx b/core/components/product-card/index.tsx
index a41976005..398108067 100644
--- a/core/components/product-card/index.tsx
+++ b/core/components/product-card/index.tsx
@@ -1,11 +1,13 @@
import { useFormatter } from 'next-intl';
+import {
+ Wishlist,
+ WishlistSheet,
+} from '~/app/[locale]/(default)/account/(tabs)/wishlists/_components/wishlist-sheet';
import { ResultOf } from '~/client/graphql';
import { ProductCard as ComponentProductCard } from '~/components/ui/product-card';
import { pricesTransformer } from '~/data-transformers/prices-transformer';
-import { WishlistSheetButton } from '../../app/[locale]/(default)/(faceted)/_components/wishlist-sheet-button';
-
import { AddToCart } from './add-to-cart';
import { DeleteWishlistItemForm, DeleteWishlistItemFormProps } from './delete-wishlist-item-form';
import { ProductCardFragment } from './fragment';
@@ -19,6 +21,7 @@ interface Props {
showWishlist?: boolean;
showWishlistSheet?: boolean;
wishlistData?: DeleteWishlistItemFormProps;
+ wishlists?: Wishlist[];
}
export const ProductCard = ({
@@ -30,6 +33,7 @@ export const ProductCard = ({
showWishlist = false,
showWishlistSheet = false,
wishlistData,
+ wishlists,
}: Props) => {
const format = useFormatter();
@@ -49,7 +53,12 @@ export const ProductCard = ({
imagePriority={imagePriority}
imageSize={imageSize}
name={name}
- openWishlistSheet={showWishlistSheet && }
+ openWishlistSheet={
+ showWishlistSheet &&
+ wishlists && (
+
+ )
+ }
price={price}
showCompare={showCompare}
subtitle={brand?.name}
diff --git a/core/messages/en.json b/core/messages/en.json
index 7d53c85b5..35b194310 100644
--- a/core/messages/en.json
+++ b/core/messages/en.json
@@ -227,7 +227,8 @@
"saved": "Saved",
"createTitle": "New wishlist",
"selectCta": "Select from available lists:",
- "favorites": "Favorites"
+ "favorites": "Favorites",
+ "open": "Open wishlist sheet"
},
"Errors": {
"error": "Something went wrong. Please try again later."
@@ -506,9 +507,6 @@
"success": "Item removed from wishlist. Undo ",
"delete": "Delete",
"deleteAriaLabel": "Delete from wishlist"
- },
- "OpenWishlistSheet": {
- "open": "Open wishlist sheet"
}
},
"FormFields": {