@akinon/projectzero 2.0.0-beta.20 → 2.0.0-beta.21

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

@@ -1,77 +1,18 @@
 'use client';
 
 import { useMemo } from 'react';
-import {
-  useAutocompleteQuery,
-  AutocompleteResponse
-} from '@akinon/next/data/client/misc';
+import { useAutocompleteQuery } from '@akinon/next/data/client/misc';
 import { ROUTES } from '@theme/routes';
 
-import { LoaderSpinner, Price, Link, Button } from '@theme/components';
+import { LoaderSpinner, Price, Link } from '@theme/components';
 import { useDebounce, useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
-import { SaleTag } from '@theme/views/product/sale-tag';
-
 interface ResultsProps {
   searchText: string;
 }
 
 const MINIMUM_SEARCH_LENGTH = 3;
 
-type AutocompleteProduct = AutocompleteResponse['groups'][0]['entries'][0];
-
-function ProductCard({ product }: { product: AutocompleteProduct }) {
-  const productPk = (product?.extra as unknown as { pk?: number })?.pk || 0;
-
-  const isOnSale =
-    product?.extra?.retail_price &&
-    product?.extra?.price &&
-    parseFloat(String(product.extra.retail_price)) >
-      parseFloat(String(product.extra.price));
-  return (
-    <div className="flex flex-col group w-full">
-      <div className="relative aspect-square mb-2">
-        <Link href={product?.url || '#'} className="block w-full h-full">
-          <Image
-            src={product?.extra?.image || '/noimage.jpg'}
-            alt={product?.label || 'Product'}
-            fill
-            aspectRatio={200 / 250}
-            sizes="(max-width: 768px) 170px, 260px"
-            imageClassName="object-cover transition-transform duration-300"
-          />
-        </Link>
-
-        {isOnSale && (
-          <div className="absolute bottom-4 left-2 z-10">
-            <SaleTag />
-          </div>
-        )}
-      </div>
-
-      <Link
-        href={product?.url || '#'}
-        className="text-sm text-black-750 tracking-[0.28px] leading-[21px] hover:underline"
-      >
-        {product?.label}
-      </Link>
-
-      <div className="flex items-center gap-2">
-        {isOnSale && (
-          <Price
-            value={product?.extra?.retail_price}
-            className="text-sm text-black-750 tracking-[0.28px] leading-[21px] line-through"
-          />
-        )}
-        <Price
-          value={product?.extra?.price}
-          className="text-base text-black-750 tracking-[0.64px] leading-[27.52px]"
-        />
-      </div>
-    </div>
-  );
-}
-
 export default function Results(props: ResultsProps) {
   const { searchText } = props;
   const { t } = useLocalization();
@@ -106,80 +47,77 @@ export default function Results(props: ResultsProps) {
   }
 
   if (isLoading || isFetching) {
-    return (
-      <div className="flex justify-center py-12">
-        <LoaderSpinner />
-      </div>
-    );
+    return <LoaderSpinner />;
   }
 
   if (categories.length === 0 && products.length === 0) {
-    return (
-      <p className="text-center text-black-750 py-12">
-        {t('common.search.not_found')}
-      </p>
-    );
+    return <p className="text-center">{t('common.search.not_found')}</p>;
   }
 
   return (
-    <div className="w-full md:px-16 pb-12">
-      <p className="text-center text-base text-black-750 tracking-[0.64px] leading-[15px]">
-        {products.length}{' '}
-        {t('common.search.results_found') || 'results found for'} &ldquo;
-        {debouncedSearchText}&rdquo;
-      </p>
-
-      <div className="mt-10 md:mt-16 flex justify-center">
-        <div className="flex flex-col lg:flex-row gap-8 max-w-[1300px]">
-          {categories.length > 0 && (
-            <div className="lg:w-44 shrink-0">
-              <h6 className="mb-4 text-lg font-normal text-black-750">
-                {t('common.search.categories')}
-              </h6>
-              <ul className="flex flex-col gap-3">
-                {categories.map((category, index) => (
-                  <li key={index} className="text-sm text-black-750/75">
-                    <Link
-                      href={category.url}
-                      className="hover:text-black-750 hover:underline"
-                    >
-                      {category.label}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          <div className="flex-1">
-            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-[10px]">
-              {products.slice(0, 8).map((product, index) => (
-                <ProductCard
-                  key={
-                    (product?.extra as unknown as { pk?: number })?.pk || index
-                  }
-                  product={product as unknown as AutocompleteProduct}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {products.length > 0 && (
-        <div className="flex justify-center mt-8">
-          <Button
-            appearance="outlined"
-            href={`${ROUTES.LIST}/?search_text=${encodeURIComponent(
-              debouncedSearchText
-            )}`}
-            data-testid="search-view-all"
-            className="px-10 py-3 border-black text-black hover:bg-black hover:text-white"
-          >
-            {t('common.search.view_all')} {debouncedSearchText.toUpperCase()}
-          </Button>
+    <div className="w-full flex flex-wrap gap-4 md:gap-0">
+      {categories.length > 0 && (
+        <div className="flex flex-col w-44">
+          <h6 className="mb-6 font-semibold">
+            {t('common.search.categories')}
+          </h6>
+          <ul className="flex flex-col gap-3">
+            {categories.map((category, index) => (
+              <li key={index} className="text-sm">
+                <Link href={category.url}>{category.label}</Link>
+              </li>
+            ))}
+          </ul>
         </div>
       )}
+      <div className="flex-1 flex flex-col gap-6">
+        <h6 className="font-semibold">
+          {t('common.search.products_for')}{' '}
+          <span className="text-secondary uppercase">
+            {debouncedSearchText}
+          </span>
+        </h6>
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-8">
+          {products.map((product, index) => (
+            <Link href={product?.url} key={index} className="flex flex-col">
+              <div className="relative aspect-[315/448]">
+                {product.extra.image ? (
+                  <Image
+                    src={product.extra.image}
+                    alt={product?.label}
+                    aspectRatio={274.5 / 390.39}
+                    fill
+                    sizes="(min-width: 320px) 164px,
+                     (min-width: 640px) 50vw,
+                     (min-width: 1160px) 315px"
+                  />
+                ) : (
+                  <Image
+                    className="h-full object-cover"
+                    src="/noimage.jpg"
+                    alt={product?.label}
+                    aspectRatio={274.5 / 390.39}
+                    fill
+                    sizes="100vw"
+                  />
+                )}
+              </div>
+              <span className="text-sm mt-2">{product?.label}</span>
+              <Price
+                value={product?.extra?.price}
+                className="font-semibold text-sm"
+              />
+            </Link>
+          ))}
+        </div>
+        <Link
+          href={`${ROUTES.LIST}/?search_text=${debouncedSearchText}`}
+          data-testid="search-view-all"
+          className="w-80 py-3 px-10 border border-primary text-center text-xs font-semibold hover:bg-primary hover:text-white transition-all"
+        >
+          {t('common.search.view_all')} {debouncedSearchText.toUpperCase()}
+        </Link>
+      </div>
     </div>
   );
 }

package/app-template/src/views/product/accordion-wrapper.tsx

@@ -1,151 +1,59 @@
 'use client';
 
 import { useLocalization } from '@akinon/next/hooks';
-import React, { useMemo, CSSProperties } from 'react';
+import React from 'react';
 import { Accordion } from '@theme/components';
 import InstallmentOptions from '@theme/views/installment-options';
-import AccordionSection from './accordion-section';
-import { useProductDetail } from '@theme/views/product-detail';
 
 export default function AccordionWrapper({ data, deliveryReturn }) {
   const { t } = useLocalization();
-  const { accordionStyles } = useProductDetail();
-
-  const iconSize = useMemo(() => {
-    const size = accordionStyles['icon-size'];
-    const parsed = parseInt(size);
-    return !isNaN(parsed) ? parsed : 15;
-  }, [accordionStyles]);
-
-  const iconColor = useMemo(
-    () => accordionStyles['icon-color'] || '#6b7280',
-    [accordionStyles]
-  );
-
-  const containerStyle = useMemo(
-    (): CSSProperties => ({
-      width: '100%',
-      marginTop: accordionStyles['container-spacing'] || '1rem',
-      borderColor: accordionStyles['container-border-color'] || 'transparent',
-      borderWidth: accordionStyles['container-border-width'] || '0',
-      borderRadius: accordionStyles['container-border-radius'] || '0',
-      borderStyle: 'solid'
-    }),
-    [accordionStyles]
-  );
-
-  const headerStyle = useMemo(
-    (): CSSProperties => ({
-      fontSize: accordionStyles['title-font-size'] || '1rem',
-      fontWeight: accordionStyles['title-font-weight'] || '600',
-      color: accordionStyles['title-color'] || '#111827',
-      backgroundColor:
-        accordionStyles['title-background-color'] || 'transparent',
-      paddingLeft: accordionStyles['title-padding-x'] || '1rem',
-      paddingRight: accordionStyles['title-padding-x'] || '1rem',
-      paddingTop: accordionStyles['title-padding-y'] || '0.75rem',
-      paddingBottom: accordionStyles['title-padding-y'] || '0.75rem',
-      borderBottom: `1px solid ${
-        accordionStyles['container-border-color'] || '#e5e7eb'
-      }`
-    }),
-    [accordionStyles]
-  );
-
-  const contentStyle = useMemo(
-    (): CSSProperties => ({
-      fontSize: accordionStyles['content-font-size'] || '0.875rem',
-      fontWeight: accordionStyles['content-font-weight'] || '400',
-      color: accordionStyles['content-color'] || '#6b7280',
-      backgroundColor:
-        accordionStyles['content-background-color'] || 'transparent',
-      paddingLeft: accordionStyles['content-padding-x'] || '1rem',
-      paddingRight: accordionStyles['content-padding-x'] || '1rem',
-      paddingTop: accordionStyles['content-padding-y'] || '0.75rem',
-      paddingBottom: accordionStyles['content-padding-y'] || '0.75rem'
-    }),
-    [accordionStyles]
-  );
 
   const generateHtml = (data: string) => {
     return { __html: data };
   };
 
   return (
-    <AccordionSection>
-      <div style={containerStyle}>
-        <div style={headerStyle} className="accordion-header">
-          <Accordion
-            title={t('product.details_care')}
-            icons={['minus', 'plus']}
-            iconSize={iconSize}
-            iconColor={iconColor}
-            isCollapse={false}
-            className="border-none"
-          >
-            <div style={contentStyle}>
-              {t('product.product_code')}: {data.product.sku} -{' '}
-              {data.product.base_code}
-              {data.product.attributes.integration_ProductAtt03Desc &&
-                data.product.attributes.integration_ProductAtt03Desc}
-              {data.product.attributes.integration_kumas_icerik &&
-                data.product.attributes.integration_kumas_icerik}
-              {data.product.attributes.model_olculeri &&
-                data.product.attributes.model_olculeri}
-              {data.product.attributes.aciklama && (
-                <div
-                  dangerouslySetInnerHTML={generateHtml(
-                    data.product.attributes.aciklama
-                  )}
-                />
-              )}
-            </div>
-          </Accordion>
-        </div>
-
-        <div style={headerStyle} className="accordion-header">
-          <Accordion
-            title={t('product.delivery_collections')}
-            icons={['minus', 'plus']}
-            iconSize={iconSize}
-            iconColor={iconColor}
-            isCollapse={false}
-            className="border-none"
-          >
-            <div style={contentStyle}>
-              <div
-                dangerouslySetInnerHTML={generateHtml(
-                  deliveryReturn?.product_delivery_returns?.value
-                )}
-              />
-            </div>
-          </Accordion>
-        </div>
-
-        <div style={headerStyle} className="accordion-header">
-          <Accordion
-            title={t('product.installment_options')}
-            icons={['minus', 'plus']}
-            iconSize={iconSize}
-            iconColor={iconColor}
-            isCollapse={false}
-            className="border-none"
-          >
-            <div style={contentStyle}>
-              <InstallmentOptions productPk={data.product.pk} />
-            </div>
-          </Accordion>
-        </div>
-      </div>
-      <style jsx global>{`
-        .accordion-header:hover {
-          background-color: ${accordionStyles['hover-background-color'] ||
-          '#f9fafb'};
-          color: ${accordionStyles['hover-title-color'] ||
-          accordionStyles['title-color'] ||
-          '#111827'};
-        }
-      `}</style>
-    </AccordionSection>
+    <div className="w-full">
+      <Accordion
+        title={t('product.details_care')}
+        icons={['minus', 'plus']}
+        iconSize={15}
+      >
+        {t('product.product_code')}: {data.product.sku} -{' '}
+        {data.product.base_code}
+        {data.product.attributes.integration_ProductAtt03Desc &&
+          data.product.attributes.integration_ProductAtt03Desc}
+        {data.product.attributes.integration_kumas_icerik &&
+          data.product.attributes.integration_kumas_icerik}
+        {data.product.attributes.model_olculeri &&
+          data.product.attributes.model_olculeri}
+        {data.product.attributes.aciklama && (
+          <div
+            dangerouslySetInnerHTML={generateHtml(
+              data.product.attributes.aciklama
+            )}
+          />
+        )}
+      </Accordion>
+      <Accordion
+        title={t('product.delivery_collections')}
+        icons={['minus', 'plus']}
+        iconSize={15}
+      >
+        <div
+          dangerouslySetInnerHTML={generateHtml(
+            deliveryReturn?.product_delivery_returns?.value
+          )}
+        />
+      </Accordion>
+
+      <Accordion
+        title={t('product.installment_options')}
+        icons={['minus', 'plus']}
+        iconSize={15}
+      >
+        <InstallmentOptions productPk={data.product.pk} />
+      </Accordion>
+    </div>
   );
 }

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

@@ -1,7 +1,7 @@
 export { default as PriceWrapper } from './price-wrapper';
 export { default as Variant } from './variant';
 export { default as ProductInfo } from './product-info';
-export { default as ProductShare } from './product-share';
+export { ProductShare } from './product-share';
 export { default as ProductGroupInfo } from './product-group-info';
 export { default as MiscButtons } from './misc-buttons';
 export { default as ProductInfoSlider } from './slider';

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

@@ -1,7 +1,8 @@
 import Breadcrumb from '@theme/views/breadcrumb';
 import { ProductInfoSlider } from '@theme/views/product';
-import ThemePlaceholder from '@akinon/next/components/theme-editor/theme-placeholder';
+import ThemePlaceholder from '@akinon/pz-theme/src/theme-placeholder';
 import { BreadcrumbResultType, ProductResult } from '@akinon/next/types';
+import { buildProductPageContext } from '@theme/utils/theme-page-context';
 
 interface DeliveryReturnItem {
   product_delivery_returns?: {
@@ -22,6 +23,7 @@ export default async function ProductLayout({
   breadcrumbData,
   children
 }: ProductPageProps) {
+  const productPageContext = buildProductPageContext(data);
   const categoryIds = breadcrumbData
     ?.map((item) => item.extra_context?.attributes?.category_id)
     .filter(Boolean)
@@ -49,7 +51,10 @@ export default async function ProductLayout({
           <div className="w-full">{children}</div>
         </div>
       </div>
-      <ThemePlaceholder slug="product-page-new" />
+      <ThemePlaceholder
+        slug="product-page-new"
+        pageContext={productPageContext}
+      />
     </div>
   );
 }