@akinon/projectzero 2.0.153-rc.4 → 2.0.153

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.153-rc.4",
+  "version": "2.0.153",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {

package/app-template/src/__tests__/data-source-landing-page.test.tsx

@@ -1,132 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { getDataSourcePageData, getWidgetData } from '@akinon/next/data/server';
-import Page, {
-  generateMetadata
-} from '../app/[pz]/data-source-landing-page/[pk]/page';
-
-jest.mock('@akinon/next/data/server', () => ({
-  getDataSourcePageData: jest.fn(),
-  getWidgetData: jest.fn()
-}));
-
-jest.mock('@akinon/next/hocs/server', () => ({
-  withSegmentDefaults: (component) => component
-}));
-
-jest.mock('@akinon/next/utils/pz-segments', () => ({
-  parsePzParams: () => ({ locale: 'tr' })
-}));
-
-jest.mock('next/navigation', () => ({
-  notFound: jest.fn(() => {
-    throw new Error('NEXT_NOT_FOUND');
-  })
-}));
-
-// `@theme/*` modules resolve to these paths; jest keys mocks by resolved path.
-jest.mock('../settings', () => ({ __esModule: true, default: {} }));
-jest.mock('../views/data-source-page/layout', () => ({
-  __esModule: true,
-  default: ({ data }) => <div data-testid="store-page">{data.pk}</div>
-}));
-
-const mockGetDataSourcePageData = getDataSourcePageData as jest.Mock;
-const mockGetWidgetData = getWidgetData as jest.Mock;
-
-const page = {
-  pk: 3,
-  data_source: {
-    pk: 17,
-    name: 'ayse-ticaret',
-    slug: 'ayse-ticaret',
-    title: 'Ayşe Ticaret'
-  },
-  widget: 'ayse-ticaret-0',
-  product_collection_widget: 'ayse-ticaret-collection',
-  is_active: true
-};
-
-const renderPage = async (pk: string) =>
-  render(await Page({ params: { pk }, searchParams: {} }));
-
-// Route params arrive as strings even though the page types them as numbers.
-const metadataFor = (pk: string) =>
-  generateMetadata({
-    params: Promise.resolve({ pk })
-  } as unknown as Parameters<typeof generateMetadata>[0]);
-
-describe('data source landing page route', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders the store page for an active landing page', async () => {
-    mockGetDataSourcePageData.mockResolvedValue(page);
-
-    await renderPage('3');
-
-    expect(mockGetDataSourcePageData).toHaveBeenCalledWith({ pk: 3 });
-    expect(screen.getByTestId('store-page')).toHaveTextContent('3');
-  });
-
-  it.each([
-    ['a missing page', null],
-    ['a failed request', undefined],
-    ['an inactive page', { ...page, is_active: false }]
-  ])('responds with not found for %s', async (_, data) => {
-    mockGetDataSourcePageData.mockResolvedValue(data);
-
-    await expect(renderPage('3')).rejects.toThrow('NEXT_NOT_FOUND');
-  });
-
-  it('responds with not found for an invalid pk without fetching', async () => {
-    await expect(renderPage('03')).rejects.toThrow('NEXT_NOT_FOUND');
-    await expect(renderPage('abc')).rejects.toThrow('NEXT_NOT_FOUND');
-    expect(mockGetDataSourcePageData).not.toHaveBeenCalled();
-  });
-
-  it('builds the metadata from the store and its page widget', async () => {
-    mockGetDataSourcePageData.mockResolvedValue(page);
-    mockGetWidgetData.mockResolvedValue({
-      attributes: {
-        footer: {
-          value: { description: '<p>Kargo &amp; İade</p><p>Hızlı teslimat</p>' }
-        }
-      }
-    });
-
-    await expect(metadataFor('3')).resolves.toEqual({
-      title: 'Ayşe Ticaret',
-      description: 'Kargo & İade Hızlı teslimat'
-    });
-    expect(mockGetDataSourcePageData).toHaveBeenCalledWith({
-      pk: 3,
-      locale: 'tr'
-    });
-    expect(mockGetWidgetData).toHaveBeenCalledWith({
-      slug: 'ayse-ticaret-0',
-      locale: 'tr'
-    });
-
-    mockGetWidgetData.mockResolvedValue({
-      attributes: { banner: { value: { subtitle: 'Yeni sezon' } } }
-    });
-    mockGetDataSourcePageData.mockResolvedValue({
-      ...page,
-      data_source: { ...page.data_source, title: '' }
-    });
-
-    await expect(metadataFor('3')).resolves.toEqual({
-      title: 'ayse-ticaret',
-      description: 'Yeni sezon'
-    });
-  });
-
-  it('returns empty metadata when there is no page', async () => {
-    mockGetDataSourcePageData.mockResolvedValue(null);
-
-    await expect(metadataFor('3')).resolves.toEqual({});
-    await expect(metadataFor('x')).resolves.toEqual({});
-    expect(mockGetWidgetData).not.toHaveBeenCalled();
-  });
-});

package/app-template/src/app/[pz]/data-source-landing-page/[pk]/loading.tsx

@@ -1,5 +0,0 @@
-import { PageLoaderSpinner } from '@theme/views/page-loader-spinner';
-
-export default function Loading() {
-  return <PageLoaderSpinner />;
-}

package/app-template/src/app/[pz]/data-source-landing-page/[pk]/page.tsx

@@ -1,62 +0,0 @@
-import { getDataSourcePageData, getWidgetData } from '@akinon/next/data/server';
-import { withSegmentDefaults } from '@akinon/next/hocs/server';
-import {
-  AsyncPageProps,
-  Metadata,
-  ResolvedPageProps
-} from '@akinon/next/types';
-import { parsePzParams } from '@akinon/next/utils/pz-segments';
-import settings from '@theme/settings';
-import { DataSourcePageData } from '@theme/types';
-import { toPlainText } from '@theme/utils/sanitize';
-import DataSourcePageLayout from '@theme/views/data-source-page/layout';
-import { notFound } from 'next/navigation';
-
-const isValidPk = (pk: unknown) => /^[1-9]\d*$/.test(String(pk));
-
-export async function generateMetadata(
-  props: AsyncPageProps<{ pk: number }>
-): Promise<Metadata> {
-  const params = await props.params;
-
-  if (!isValidPk(params.pk)) {
-    return {};
-  }
-
-  const { locale } = parsePzParams(params, settings);
-  const data = await getDataSourcePageData({ pk: Number(params.pk), locale });
-  const title = data?.data_source?.title || data?.data_source?.name;
-
-  if (!title) {
-    return {};
-  }
-
-  const pageData = await getWidgetData<DataSourcePageData>({
-    slug: data.widget,
-    locale
-  });
-  const description = (
-    pageData?.attributes?.banner?.value?.subtitle ||
-    toPlainText(pageData?.attributes?.footer?.value?.description)
-  ).slice(0, 160);
-
-  return description ? { title, description } : { title };
-}
-
-async function Page({ params }: ResolvedPageProps<{ pk: number }>) {
-  if (!isValidPk(params.pk)) {
-    notFound();
-  }
-
-  const data = await getDataSourcePageData({ pk: Number(params.pk) });
-
-  if (!data?.pk || data.is_active === false) {
-    notFound();
-  }
-
-  return <DataSourcePageLayout data={data} />;
-}
-
-export default withSegmentDefaults(Page, {
-  segmentType: 'page'
-});

package/app-template/src/app/api/client-env/route.ts

@@ -1,5 +0,0 @@
-export { GET } from '@akinon/next/api/client-env';
-
-// NEXT_PUBLIC_* values are read from the server runtime, not the build. Force
-// dynamic so Next never statically caches an (empty) build-time response.
-export const dynamic = 'force-dynamic';