without context inmplementation

bigcommerce · Oct 22, 2024 · 096ceea · 096ceea
1 parent 5af90b7
commit 096ceea
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 116 deletions.
diff --git a/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-button.tsx b/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-button.tsx
diff --git a/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-context.tsx b/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-context.tsx
diff --git a/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-wrapper.tsx b/core/app/[locale]/(default)/(faceted)/_components/wishlist-sheet-wrapper.tsx
diff --git 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}
               />
             ))}
           </div>
 
-          <WishlistSheetWrapper wishlistsData={wishlists} />
-
           <Pagination
             endCursor={endCursor ?? undefined}
             hasNextPage={hasNextPage}

diff --git a/...lt)/account/(tabs)/wishlists/_components/create-wishlist-form/_actions/create-wishlist.ts b/...lt)/account/(tabs)/wishlists/_components/create-wishlist-form/_actions/create-wishlist.ts
@@ -22,7 +22,7 @@ export const createWishlist = async (formData: FormData) => {
   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
@@ -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<ExistingResultType<typeof addWishlistItems>['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' ? (
           <Button type="button" variant="secondary">
             <Heart
               aria-hidden="true"
@@ -76,6 +70,16 @@ export const WishlistSheet = ({
             />
             <span>{t(saved ? 'saved' : 'saveToWishlist')}</span>
           </Button>
+        ) : (
+          <Button
+            aria-label={t('open')}
+            className="p-3 text-black hover:bg-transparent hover:text-black"
+            title={t('open')}
+            type="button"
+            variant="subtle"
+          >
+            <Heart fill="currentColor" />
+          </Button>
         )
       }
     >

diff --git 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 (
-    <WishlistSheetProvider>
-      <AccountStatusProvider>
-        <CompareDrawerProvider>{children}</CompareDrawerProvider>
-      </AccountStatusProvider>
-    </WishlistSheetProvider>
+    <AccountStatusProvider>
+      <CompareDrawerProvider>{children}</CompareDrawerProvider>
+    </AccountStatusProvider>
   );
 }
diff --git 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 && <WishlistSheetButton productId={entityId} />}
+      openWishlistSheet={
+        showWishlistSheet &&
+        wishlists && (
+          <WishlistSheet productId={product.entityId} trigger="icon" wishlistsData={wishlists} />
+        )
+      }
       price={price}
       showCompare={showCompare}
       subtitle={brand?.name}

diff --git 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. <undoButton>Undo</undoButton> ",
         "delete": "Delete",
         "deleteAriaLabel": "Delete from wishlist"
-      },
-      "OpenWishlistSheet": {
-        "open": "Open wishlist sheet"
       }
     },
     "FormFields": {