@akinon/projectzero 1.99.0 → 1.100.0-rc.71

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Variant } from '@theme/views/product';
+import { VariantType } from '@akinon/next/types';
+
+interface ProductVariantsProps {
+  variants: VariantType[];
+  onVariantChange: () => void;
+}
+
+export const ProductVariants: React.FC<ProductVariantsProps> = ({
+  variants,
+  onVariantChange
+}) => {
+  return (
+    <div className="flex flex-col">
+      {variants.map((variant) => (
+        <Variant
+          key={variant.attribute_key}
+          {...variant}
+          className="items-center mt-8"
+          onChange={onVariantChange}
+        />
+      ))}
+    </div>
+  );
+};

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

@@ -7,6 +7,7 @@ import { Product } from '@akinon/next/types';
 import { Image } from '@akinon/next/components/image';
 import useFavButton from '../../hooks/use-fav-button';
 import { twMerge } from 'tailwind-merge';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
 type ProductSliderItem = {
   product: Product;
@@ -35,90 +36,102 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
     carouselRef.current?.next();
   };
 
-  const handleThumbnailClick = (index) => {
+  const handleThumbnailClick = (index: number) => {
     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}
+    <>
+      <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 }}
           >
-            <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) => (
+            {product?.productimage_set?.map((item, i) => (
               <Image
-                key={index}
+                key={i}
                 src={item.image}
-                alt={`Thumbnail ${index}`}
-                width={80}
-                height={128}
-                className={twMerge('cursor-pointer', [
-                  activeIndex === index && 'border-2 border-primary'
-                ])}
-                onClick={() => handleThumbnailClick(index)}
+                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
               />
             ))}
-          </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>
+          </CarouselCore>
         </div>
       </div>
-
-      <div className="relative lg:col-span-5">
-        <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
-
-        <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 }}
-        >
-          {product?.productimage_set?.map((item, i) => (
-            <Image
-              key={i}
-              src={item.image}
-              alt={product.name}
-              draggable={false}
-              aspectRatio={484 / 726}
-              sizes="(min-width: 425px) 512px,
-            (min-width: 601px) 576px,
-            (min-width: 768px) 336px,
-            (min-width: 1024px) 484px, 368px"
-              fill
-            />
-          ))}
-        </CarouselCore>
-      </div>
-    </div>
+    </>
   );
 }

package/app-template/src/views/register/index.tsx

@@ -2,11 +2,11 @@
 
 import { yupResolver } from '@hookform/resolvers/yup';
 import clsx from 'clsx';
-import { signIn, SignInOptions } from 'next-auth/react';
+import { signIn } from 'next-auth/react';
 import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { RegisterFormType } from '@theme/types';
+import { RegisterFormType, FormType, PzSignInOptions } from '@theme/types';
 import { Button, Checkbox, Icon, Input, Modal } from '@theme/components';
 import * as yup from 'yup';
 import { useCaptcha, useLocalization, useRouter } from '@akinon/next/hooks';
@@ -125,8 +125,9 @@ export const Register = () => {
       redirect: false,
       callbackUrl: '/',
       captchaValidated,
-      ...data
-    } as SignInOptions);
+      ...data,
+      formType: FormType.register
+    } as PzSignInOptions);
   };
 
   const onSubmit: SubmitHandler<RegisterFormType> = async (data) => {
@@ -143,7 +144,6 @@ export const Register = () => {
     if (registerResponse.error) {
       const errors: AuthError[] = JSON.parse(registerResponse.error);
 
-
       if (errors.find((error) => error.type === 'captcha')) {
         if (await validateCaptcha()) {
           onSubmit(data);
@@ -171,25 +171,25 @@ export const Register = () => {
           try {
             parsedValue = JSON.parse(item.value);
           } catch {
-            parsedValue = [item.value]; 
+            parsedValue = [item.value];
           }
         } else {
-          parsedValue = item.value; 
+          parsedValue = item.value;
         }
 
         if (Array.isArray(parsedValue)) {
           setError(item.name as keyof RegisterFormType, {
             type: 'custom',
-            message: parsedValue.join(', '),
+            message: parsedValue.join(', ')
           });
         } else {
           Object.keys(parsedValue).forEach((key) => {
             const fieldName = key as keyof RegisterFormType;
             const errorMessages = parsedValue[key] as string[];
-    
+
             setError(fieldName, {
               type: 'custom',
-              message: errorMessages.join(', '),
+              message: errorMessages.join(', ')
             });
           });
         }
@@ -247,7 +247,11 @@ export const Register = () => {
       </p>
 
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
-        <input type="hidden" value="register" {...register('formType')} />
+        <input
+          type="hidden"
+          value={FormType.register}
+          {...register('formType')}
+        />
         <input type="hidden" value={locale} {...register('locale')} />
 
         <div className={clsx({ 'mb-4': errors.email })}>

package/app-template/src/widgets/footer-menu.tsx

@@ -2,6 +2,7 @@ import 'server-only';
 
 import { Link, Accordion } from '@theme/components';
 import { getWidgetData } from '@akinon/next/data/server';
+import { ServerVariables } from '@akinon/next/utils/server-variables';
 
 type SideItem = {
   value: string;
@@ -47,6 +48,7 @@ type FooterMenuType = {
 
 export default async function FooterMenu() {
   const data = await getWidgetData<FooterMenuType>({ slug: 'footer-menu' });
+  const { locale } = ServerVariables;
 
   return (
     <div className="flex-1">
@@ -72,7 +74,7 @@ export default async function FooterMenu() {
                           : '_self'
                       }
                       data-testid={`footer-categories-${item?.value?.name
-                        ?.toLocaleLowerCase()
+                        ?.toLocaleLowerCase(locale)
                         .split(' ')
                         .join('')}`}
                     >
@@ -96,7 +98,9 @@ export default async function FooterMenu() {
                           ? '_blank'
                           : '_self'
                       }
-                      data-testid={`footer-categories-${item?.value?.name?.toLocaleLowerCase()}`}
+                      data-testid={`footer-categories-${item?.value?.name?.toLocaleLowerCase(
+                        locale
+                      )}`}
                     >
                       {item?.value?.name}
                     </Link>

package/commands/plugins.ts

@@ -29,7 +29,14 @@ async function checkVersion(pkg: PackageJson) {
 
     if (!semver.satisfies(pkg.dependencies['@akinon/next'], latestVersion)) {
       console.warn(
-        `\x1b[43mWarning: The "${packageName}" package is currently at version ${pkg.dependencies['@akinon/next']}. Please upgrade it to the latest version (${latestVersion}) to ensure plugin compatibility.`,
+        `\x1b[43m Warning: The "${packageName}" package is currently at`,
+        `\x1b[41m version ${pkg.dependencies['@akinon/next']}`,
+        `\x1b[43m Please upgrade it to the latest version (${latestVersion}) to ensure plugin compatibility.`,
+        '\x1b[0m\n'
+      );
+    } else {
+      console.log(
+        `\x1b[42m Info: The package "${packageName}" is currently in the current version (${latestVersion}).`,
         '\x1b[0m\n'
       );
     }
@@ -54,7 +61,27 @@ export default async () => {
     }
   }
 
-  const pkg: PackageJson = require(path.resolve(rootDir, './package.json'));
+  function findPackageJson(): PackageJson {
+    const packageJsonPaths = [
+      path.resolve(rootDir, './package.json'),
+      path.resolve(rootDir, './apps/projectzeronext/package.json')
+    ];
+
+    for (const packageJsonPath of packageJsonPaths) {
+      try {
+        const pkg = require(packageJsonPath);
+        if (pkg.dependencies['@akinon/next']) {
+          return pkg;
+        }
+      } catch (error) {
+        continue;
+      }
+    }
+
+    throw new Error('Could not find package.json with @akinon/next dependency');
+  }
+
+  const pkg = findPackageJson();
   await checkVersion(pkg);
 
   const pluginsFilePath = findPluginsFilePath();
@@ -69,45 +96,65 @@ export default async () => {
   }
 
   const definedPlugins = [
+    {
+      name: 'Akifast',
+      value: 'pz-akifast'
+    },
+    {
+      name: 'Apple Pay',
+      value: 'pz-apple-pay'
+    },
+    {
+      name: 'B2B',
+      value: 'pz-b2b'
+    },
     {
       name: 'Basket Gift Pack',
       value: 'pz-basket-gift-pack'
     },
     {
-      name: 'Click & Collect',
-      value: 'pz-click-collect'
+      name: 'BKM Express',
+      value: 'pz-bkm'
     },
     {
       name: 'Checkout Gift Pack',
       value: 'pz-checkout-gift-pack'
     },
     {
-      name: 'One Click Checkout',
-      value: 'pz-one-click-checkout'
+      name: 'Click & Collect',
+      value: 'pz-click-collect'
+    },
+    {
+      name: 'Credit Payment',
+      value: 'pz-credit-payment'
     },
     {
       name: 'Garanti Pay',
       value: 'pz-gpay'
     },
     {
-      name: 'Pay On Delivery',
-      value: 'pz-pay-on-delivery'
+      name: 'Masterpass',
+      value: 'pz-masterpass'
     },
     {
-      name: 'Otp',
-      value: 'pz-otp'
+      name: 'Multi Basket',
+      value: 'pz-multi-basket'
     },
     {
-      name: 'BKM Express',
-      value: 'pz-bkm'
+      name: 'One Click Checkout',
+      value: 'pz-one-click-checkout'
     },
     {
-      name: 'Credit Payment',
-      value: 'pz-credit-payment'
+      name: 'Otp',
+      value: 'pz-otp'
     },
     {
-      name: 'Multi Basket',
-      value: 'pz-multi-basket'
+      name: 'Pay On Delivery',
+      value: 'pz-pay-on-delivery'
+    },
+    {
+      name: 'Saved Card',
+      value: 'pz-saved-card'
     },
     {
       name: 'Tabby Payment Extension',

package/dist/commands/plugins.js

@@ -50,7 +50,10 @@ function checkVersion(pkg) {
             const pkgInfo = (yield response.json());
             const latestVersion = pkgInfo['dist-tags'].latest;
             if (!semver_1.default.satisfies(pkg.dependencies['@akinon/next'], latestVersion)) {
-                console.warn(`\x1b[43mWarning: The "${packageName}" package is currently at version ${pkg.dependencies['@akinon/next']}. Please upgrade it to the latest version (${latestVersion}) to ensure plugin compatibility.`, '\x1b[0m\n');
+                console.warn(`\x1b[43m Warning: The "${packageName}" package is currently at`, `\x1b[41m version ${pkg.dependencies['@akinon/next']}`, `\x1b[43m Please upgrade it to the latest version (${latestVersion}) to ensure plugin compatibility.`, '\x1b[0m\n');
+            }
+            else {
+                console.log(`\x1b[42m Info: The package "${packageName}" is currently in the current version (${latestVersion}).`, '\x1b[0m\n');
             }
         }
         catch (error) {
@@ -72,7 +75,25 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
             throw new Error('plugins.js was not found in either of the expected locations.');
         }
     }
-    const pkg = require(path_1.default.resolve(rootDir, './package.json'));
+    function findPackageJson() {
+        const packageJsonPaths = [
+            path_1.default.resolve(rootDir, './package.json'),
+            path_1.default.resolve(rootDir, './apps/projectzeronext/package.json')
+        ];
+        for (const packageJsonPath of packageJsonPaths) {
+            try {
+                const pkg = require(packageJsonPath);
+                if (pkg.dependencies['@akinon/next']) {
+                    return pkg;
+                }
+            }
+            catch (error) {
+                continue;
+            }
+        }
+        throw new Error('Could not find package.json with @akinon/next dependency');
+    }
+    const pkg = findPackageJson();
     yield checkVersion(pkg);
     const pluginsFilePath = findPluginsFilePath();
     let installedPlugins = [];
@@ -84,45 +105,65 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
         process.exit(1);
     }
     const definedPlugins = [
+        {
+            name: 'Akifast',
+            value: 'pz-akifast'
+        },
+        {
+            name: 'Apple Pay',
+            value: 'pz-apple-pay'
+        },
+        {
+            name: 'B2B',
+            value: 'pz-b2b'
+        },
         {
             name: 'Basket Gift Pack',
             value: 'pz-basket-gift-pack'
         },
         {
-            name: 'Click & Collect',
-            value: 'pz-click-collect'
+            name: 'BKM Express',
+            value: 'pz-bkm'
         },
         {
             name: 'Checkout Gift Pack',
             value: 'pz-checkout-gift-pack'
         },
         {
-            name: 'One Click Checkout',
-            value: 'pz-one-click-checkout'
+            name: 'Click & Collect',
+            value: 'pz-click-collect'
+        },
+        {
+            name: 'Credit Payment',
+            value: 'pz-credit-payment'
         },
         {
             name: 'Garanti Pay',
             value: 'pz-gpay'
         },
         {
-            name: 'Pay On Delivery',
-            value: 'pz-pay-on-delivery'
+            name: 'Masterpass',
+            value: 'pz-masterpass'
         },
         {
-            name: 'Otp',
-            value: 'pz-otp'
+            name: 'Multi Basket',
+            value: 'pz-multi-basket'
         },
         {
-            name: 'BKM Express',
-            value: 'pz-bkm'
+            name: 'One Click Checkout',
+            value: 'pz-one-click-checkout'
         },
         {
-            name: 'Credit Payment',
-            value: 'pz-credit-payment'
+            name: 'Otp',
+            value: 'pz-otp'
         },
         {
-            name: 'Multi Basket',
-            value: 'pz-multi-basket'
+            name: 'Pay On Delivery',
+            value: 'pz-pay-on-delivery'
+        },
+        {
+            name: 'Saved Card',
+            value: 'pz-saved-card'
         },
         {
             name: 'Tabby Payment Extension',

package/package.json

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