@akinon/projectzero 2.0.152-rc.3 → 2.0.152

package/app-template/src/hooks/use-fav-button.tsx

@@ -8,11 +8,9 @@ import {
   useGetFavoritesQuery,
   useRemoveFavoriteMutation
 } from '@akinon/next/data/client/wishlist';
-import { Product } from '@akinon/next/types';
 import { Icon } from '@theme/components';
 import { pushAddToWishlist } from '@theme/utils/gtm';
 import { useToast, useLocalization } from '@akinon/next/hooks';
-import { useFavouriteProductIds } from './favourite-product-ids-context';
 
 interface FavButtonProps {
   label?: string;
@@ -23,25 +21,16 @@ interface FavButtonProps {
 
 const FAV_TOAST_OPTIONS = { position: 'bottom-right' as const }
 
-const useFavButton = (
-  productPk: number,
-  product?: Pick<Product, 'base_code' | 'name' | 'price' | 'currency_type'>
-) => {
+const useFavButton = (productPk: number) => {
   const { status } = useSession();
   const { t } = useLocalization();
   const { success, error: showError } = useToast();
 
-  // Inside a FavouriteProductIdsProvider (PLP) the favourite state comes from
-  // the batched favourite-product-ids request, so the full favourites list is
-  // only fetched when that flow is unavailable (no provider, or 404 fallback).
-  const favouriteProductIds = useFavouriteProductIds();
-  const useBatchFlow = Boolean(favouriteProductIds?.isActive);
-
   const { data: favorites } = useGetFavoritesQuery(
     {
       limit: 1000
     },
-    { skip: status !== 'authenticated' || useBatchFlow }
+    { skip: status !== 'authenticated' }
   );
 
   const favoriteItem = useMemo(
@@ -52,11 +41,7 @@ const useFavButton = (
     [favorites, productPk]
   );
 
-  const favouriteId = useBatchFlow
-    ? favouriteProductIds.getFavouriteId(productPk)
-    : favoriteItem?.pk;
-
-  const isActive = favouriteId !== undefined;
+  const isActive = Boolean(favoriteItem);
   const [isPushed, setIsPushed] = useState<boolean>(false);
 
   const [addFavorite] = useAddFavoriteMutation();
@@ -64,8 +49,8 @@ const useFavButton = (
 
   const handleClick = useCallback(async () => {
     try {
-      if (favouriteId !== undefined) {
-        await removeFavorite(favouriteId).unwrap();
+      if (favoriteItem) {
+        await removeFavorite(favoriteItem.pk).unwrap();
         success(t('product.removed_from_favorites'), FAV_TOAST_OPTIONS);
       } else {
         await addFavorite(productPk).unwrap();
@@ -75,26 +60,19 @@ const useFavButton = (
     } catch (err) {
       showError(t('product.favorites_error'), FAV_TOAST_OPTIONS);
     }
-  }, [favouriteId, productPk, addFavorite, removeFavorite, success, showError, t]);
+  }, [favoriteItem, productPk, addFavorite, removeFavorite, success, showError, t]);
 
   useEffect(() => {
-    if (!isActive || !isPushed) return;
-
-    // The batched flow returns ids only, so the analytics payload falls back
-    // to the product the card already renders.
-    const gtmProduct = favoriteItem?.product ?? product;
-
-    if (gtmProduct) {
+    if (favoriteItem && isPushed) {
       pushAddToWishlist({
-        base_code: gtmProduct.base_code,
-        name: gtmProduct.name,
-        price: gtmProduct.price,
-        currency_type: gtmProduct.currency_type
+        base_code: favoriteItem?.product?.base_code,
+        name: favoriteItem?.product?.name,
+        price: favoriteItem?.product?.price,
+        currency_type: favoriteItem?.product?.currency_type
       });
+      setIsPushed(false);
     }
-
-    setIsPushed(false);
-  }, [isActive, favoriteItem, product, isPushed]);
+  }, [favoriteItem, isPushed]);
 
   const FavButton = useMemo(() => {
     const View = (props: FavButtonProps) => (

package/app-template/src/plugins.js

@@ -19,7 +19,6 @@ module.exports = [
   'pz-hepsipay',
   'pz-flow-payment',
   'pz-virtual-try-on',
-  'pz-similar-products',
   'pz-cybersource-uc',
   'pz-hepsipay',
   'pz-masterpass-rest',

package/app-template/src/proxy.ts

@@ -15,8 +15,7 @@ export const config = {
     '/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
     '/(.*sitemap\\.xml)',
     '/(.+\\.)(html|htm|aspx|asp|php)',
-    '/(.*orders\\/checkout-with-token.*)',
-    '/(.*orders\\/post-checkout.*)'
+    '/(.*orders\\/checkout-with-token.*)'
   ]
 };
 

package/app-template/src/types/widgets.ts

@@ -113,61 +113,3 @@ export type AccountFaqItem = {
     }
   ];
 };
-
-export type DataSourceProductRecommendation = {
-  title?: {
-    value: string;
-  };
-};
-
-export type DataSourcePageStory = {
-  value?: {
-    title?: string;
-    link?: string;
-  };
-  kwargs?: {
-    value?: {
-      image?: ImageType;
-    };
-  };
-};
-
-export type DataSourcePageData = {
-  header?: {
-    value?: {
-      logo_link?: string;
-      menu_1_title?: string;
-      menu_1_link?: string;
-      menu_2_title?: string;
-      menu_2_link?: string;
-      search_placeholder?: string;
-      follow_button_title?: string;
-      follow_button_title_color?: string;
-      follow_button_background?: string;
-    };
-    kwargs?: {
-      value?: {
-        logo?: ImageType;
-      };
-    };
-  };
-  banner?: {
-    value?: {
-      title?: string;
-      subtitle?: string;
-    };
-    kwargs?: {
-      value?: {
-        image?: ImageType;
-        mobile_image?: ImageType;
-      };
-    };
-  };
-  stories?: DataSourcePageStory[];
-  footer?: {
-    value?: {
-      title?: string;
-      description?: string;
-    };
-  };
-};

package/app-template/src/views/category/category-info.tsx

@@ -7,12 +7,10 @@ import { CategoryHeader } from './category-header';
 import { Filters } from './filters';
 import { Pagination } from '@theme/components';
 import { ProductItem } from '@theme/views/product-item';
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { GetCategoryResponse } from '@akinon/next/types';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { setFacets, setMenuOpen } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
-import { FavouriteProductIdsProvider } from '@theme/hooks/favourite-product-ids-context';
 import { useLocalization } from '@akinon/next/hooks';
 import { Link, LoaderSpinner } from '@akinon/next/components';
 import { ROUTES } from '@theme/routes';
@@ -64,11 +62,6 @@ export default function ListPage(props: ListPageProps) {
 
   const { t } = useLocalization();
 
-  const productPks = useMemo(
-    () => data?.products?.map((product) => product.pk) ?? [],
-    [data?.products]
-  );
-
   useEffect(() => {
     dispatch(setFacets(data.facets));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -112,30 +105,23 @@ export default function ListPage(props: ListPageProps) {
 
             {data.products?.length === 0 && page > 1 && <LoaderSpinner />}
 
-            <FavouriteProductIdsProvider productIds={productPks}>
-              <div
-                className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
-                  'md:grid-cols-3': layoutSize === 3,
-                  'lg:grid-cols-2': layoutSize === 2,
-                  'lg:grid-cols-3': layoutSize === 3
-                })}
-              >
-                <PluginModule
-                  component={Component.RateReviewPlpProvider}
-                  props={{ products: data?.products ?? [] }}
-                >
-                  {data?.products?.map((product, index) => (
-                    <ProductItem
-                      key={product.pk}
-                      product={product}
-                      width={itemDimensions.width}
-                      height={itemDimensions.height}
-                      index={index}
-                    />
-                  ))}
-                </PluginModule>
-              </div>
-            </FavouriteProductIdsProvider>
+            <div
+              className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
+                'md:grid-cols-3': layoutSize === 3,
+                'lg:grid-cols-2': layoutSize === 2,
+                'lg:grid-cols-3': layoutSize === 3
+              })}
+            >
+              {data?.products?.map((product, index) => (
+                <ProductItem
+                  key={product.pk}
+                  product={product}
+                  width={itemDimensions.width}
+                  height={itemDimensions.height}
+                  index={index}
+                />
+              ))}
+            </div>
             {data?.products?.length > 0 && (
               <Pagination
                 total={data.pagination.total_count}

package/app-template/src/views/header/search/index.tsx

@@ -4,7 +4,8 @@ import { useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { closeSearch } from '@akinon/next/redux/reducers/header';
 import clsx from 'clsx';
-import { Icon, Input } from '@theme/components';
+
+import { Icon } from '@theme/components';
 import Results from './results';
 import { ROUTES } from '@theme/routes';
 import { useLocalization, useRouter } from '@akinon/next/hooks';
@@ -41,14 +42,6 @@ export default function Search() {
     };
   }, [isSearchOpen, dispatch]);
 
-  const handleSearchTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchText(e.target.value);
-  };
-
-  const handleCloseSearch = () => {
-    dispatch(closeSearch());
-  };
-
   return (
     <>
       <div
@@ -74,9 +67,9 @@ export default function Search() {
               {t('common.search.results_for')}
             </span>
             <div className="flex items-center">
-              <Input
+              <input
                 value={searchText}
-                onChange={handleSearchTextChange}
+                onChange={(e) => setSearchText(e.target.value)}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && searchText.trim() !== '') {
                     router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
@@ -98,12 +91,11 @@ export default function Search() {
               <Icon
                 name="close"
                 size={14}
-                onClick={handleCloseSearch}
+                onClick={() => dispatch(closeSearch())}
                 className="cursor-pointer"
               />
             </div>
           </div>
-
           <Results searchText={searchText} />
         </div>
       </div>

package/app-template/src/views/product/index.ts

@@ -6,5 +6,4 @@ export { default as ProductGroupInfo } from './product-group-info';
 export { default as MiscButtons } from './misc-buttons';
 export { default as ProductInfoSlider } from './slider';
 export { default as AccordionWrapper } from './accordion-wrapper';
-export { default as ProductRateReview } from './rate-review';
 export { default as CombineProductCard } from './combine-product-card';

package/app-template/src/views/product/product-info.tsx

@@ -13,7 +13,6 @@ import { useStockAlert } from '../../hooks/use-stock-alert';
 import { ProductVariants } from './product-variants';
 import { ProductActions } from './product-actions';
 import { ProductShare } from './product-share';
-import { ProductOffers } from './product-offers';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
 export default function ProductInfo({ data }: ProductPageProps) {
@@ -74,17 +73,6 @@ export default function ProductInfo({ data }: ProductPageProps) {
 
   return (
     <>
-      <PluginModule
-        component={Component.RateReviewBadge}
-        props={{
-          product: {
-            sku: data.product.sku,
-            base_code: data.product.base_code
-          },
-          classNames: { root: 'mt-2' }
-        }}
-      />
-
       <div
         className={clsx(
           'fixed bottom-0 left-0 w-1/2 h-14 z-[20] bg-white mt-0 border-t border-gray-500 items-center justify-center',
@@ -133,8 +121,6 @@ export default function ProductInfo({ data }: ProductPageProps) {
       />
 
       <ProductShare productName={data.product.name} className="my-2 sm:mb-4" />
-
-      <ProductOffers offers={data.offers} productPk={data.product.pk} />
     </>
   );
 }

package/app-template/src/views/product/slider.tsx

@@ -36,100 +36,53 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
     carouselRef.current?.next();
   };
 
-  const handleThumbnailClick = (index: number) => {
+  const handleThumbnailClick = (index) => {
     setActiveIndex(index);
     carouselRef.current?.goToSlide(index);
   };
 
   return (
-    <>
-      <div className="lg:grid lg:grid-cols-6">
-        <div className="lg:col-span-1">
-          <div className="flex flex-col items-center justify-center md:mr-[6px]">
-            <button
-              onClick={goToPrev}
-              className={twMerge(
-                'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
-                [activeIndex === 0 && 'cursor-not-allowed opacity-45']
-              )}
-              disabled={activeIndex === 0}
-            >
-              <Icon name="chevron-up" size={15} className="fill-[#000000]" />
-            </button>
-            <div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
-              {product?.productimage_set?.map((item, index) => (
-                <Image
-                  key={index}
-                  src={item.image}
-                  alt={`Thumbnail ${index}`}
-                  width={80}
-                  height={128}
-                  aspectRatio={80 / 128}
-                  className={twMerge('cursor-pointer', [
-                    activeIndex === index && 'border-2 border-primary'
-                  ])}
-                  onClick={() => handleThumbnailClick(index)}
-                />
-              ))}
-            </div>
-            <button
-              onClick={goToNext}
-              className={twMerge(
-                'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
-                [
-                  activeIndex === product.productimage_set.length - 1 &&
-                    'cursor-not-allowed opacity-45'
-                ]
-              )}
-              disabled={activeIndex === product.productimage_set.length - 1}
-            >
-              <Icon name="chevron-down" size={15} className="fill-[#000000]" />
-            </button>
-          </div>
-        </div>
-
-        <div className="relative lg:col-span-5">
-          <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
-
-          <PluginModule
-            component={Component.ProductImageSearchFeature}
-            props={{
-              product,
-              activeIndex,
-              showResetButton: true
-            }}
-          />
-
-          <CarouselCore
-            responsive={{
-              all: {
-                breakpoint: { max: 5000, min: 0 },
-                items: 1
-              }
-            }}
-            arrows={false}
-            swipeable={true}
-            ref={carouselRef}
-            afterChange={(previousSlide, { currentSlide }) => {
-              setActiveIndex(currentSlide);
-            }}
-            containerAspectRatio={{ mobile: 520 / 798, desktop: 484 / 726 }}
+    <div className="lg:grid lg:grid-cols-6">
+      <div className="lg:col-span-1">
+        <div className="flex flex-col items-center justify-center md:mr-[6px]">
+          <button
+            onClick={goToPrev}
+            className={twMerge(
+              'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
+              [activeIndex === 0 && 'cursor-not-allowed opacity-45']
+            )}
+            disabled={activeIndex === 0}
           >
-            {product?.productimage_set?.map((item, i) => (
+            <Icon name="chevron-up" size={15} className="fill-[#000000]" />
+          </button>
+          <div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
+            {product?.productimage_set?.map((item, index) => (
               <Image
-                key={i}
+                key={index}
                 src={item.image}
-                alt={product?.name || 'Product image'}
-                draggable={false}
-                aspectRatio={484 / 726}
-                sizes="(min-width: 425px) 512px,
-              (min-width: 601px) 576px,
-              (min-width: 768px) 336px,
-              (min-width: 1024px) 484px, 368px"
-                fill
+                alt={`Thumbnail ${index}`}
+                width={80}
+                height={128}
+                className={twMerge('cursor-pointer', [
+                  activeIndex === index && 'border-2 border-primary'
+                ])}
+                onClick={() => handleThumbnailClick(index)}
               />
             ))}
-          </CarouselCore>
+          </div>
+          <button
+            onClick={goToNext}
+            className={twMerge(
+              'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
+              [
+                activeIndex === product.productimage_set.length - 1 &&
+                  'cursor-not-allowed opacity-45'
+              ]
+            )}
+            disabled={activeIndex === product.productimage_set.length - 1}
+          >
+            <Icon name="chevron-down" size={15} className="fill-[#000000]" />
+          </button>
         </div>
       </div>
 
@@ -187,6 +140,6 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
           ))}
         </CarouselCore>
       </div>
-    </>
+    </div>
   );
 }

package/app-template/src/views/product-item/index.tsx

@@ -10,7 +10,6 @@ import useFavButton from '../../hooks/use-fav-button';
 import { Product } from '@akinon/next/types';
 import { Image } from '@akinon/next/components/image';
 import { Price, Link } from '@theme/components';
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
 interface Props {
   product: Product;
@@ -23,7 +22,7 @@ export const ProductItem = (props: Props) => {
   // TODO: Static image will change (TR)
   const { product, width, height, index } = props;
   const [viewed, setViewed] = useState(false);
-  const { FavButton } = useFavButton(product.pk, product);
+  const { FavButton } = useFavButton(product.pk);
   const { ref, inView } = useInView();
 
   const image_url = product.productimage_set[0]?.image;
@@ -82,10 +81,6 @@ export const ProductItem = (props: Props) => {
         >
           {product_name}
         </Link>
-        <PluginModule
-          component={Component.RateReviewPlpBadge}
-          props={{ product }}
-        />
         <div className="font-semibold">
           {parseFloat(retail_price) > parseFloat(price) && (
             <Price

package/app-template/tsconfig.json

@@ -24,9 +24,6 @@
       ],
       "@flat-page/*": [
         "./app/[pz]/flat-page/*"
-      ],
-      "@data-source-landing-page/*": [
-        "./app/[pz]/data-source-landing-page/*"
       ]
     },
     "allowSyntheticDefaultImports": true,

package/commands/plugins.ts

@@ -164,10 +164,6 @@ export default async () => {
       name: 'Tamara Payment Extension',
       value: 'pz-tamara-extension'
     },
-    {
-      name: 'Similar Products',
-      value: 'pz-similar-products'
-    },
     {
       name: 'Hepsipay',
       value: 'pz-hepsipay'
@@ -180,10 +176,6 @@ export default async () => {
       name: 'Virtual Try-On',
       value: 'pz-virtual-try-on'
     },
-    {
-      name: 'Rate & Review',
-      value: 'pz-rate-review'
-    },
     {
       name: 'Masterpass Rest',
       value: 'pz-masterpass-rest'

package/dist/commands/plugins.js

@@ -183,10 +183,6 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
             name: 'Tamara Payment Extension',
             value: 'pz-tamara-extension'
         },
-        {
-            name: 'Similar Products',
-            value: 'pz-similar-products'
-        },
         {
             name: 'Hepsipay',
             value: 'pz-hepsipay'
@@ -199,10 +195,6 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
             name: 'Virtual Try-On',
             value: 'pz-virtual-try-on'
         },
-        {
-            name: 'Rate & Review',
-            value: 'pz-rate-review'
-        },
         {
             name: 'Masterpass Rest',
             value: 'pz-masterpass-rest'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.152-rc.3",
+  "version": "2.0.152",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {