@akinon/projectzero 1.73.0-rc.9 → 1.73.0

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { VariantOption, VariantType } from '@akinon/next/types';
 import { usePathname, useSearchParams } from 'next/navigation';
 import clsx from 'clsx';
@@ -12,20 +12,23 @@ type VariantProps = {
   preventDefaultClick?: boolean;
 } & VariantType;
 
-export const Variant = (props: VariantProps) => {
+export const Variant = ({
+  attribute_key,
+  attribute_name,
+  options,
+  preventDefaultClick,
+  onChange,
+  className
+}: VariantProps) => {
   const { t } = useLocalization();
-  const {
-    attribute_key,
-    attribute_name,
-    options,
-    preventDefaultClick,
-    onChange
-  } = props;
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   // This is a workaround for the fact that we can't use the useSearchParams set method because of this is not implemented in next.js yet. So we have to use the URLSearchParams's set method.
-  const params = new URLSearchParams(searchParams.toString());
+  const params = useMemo(
+    () => new URLSearchParams(searchParams.toString()),
+    [searchParams]
+  );
 
   const hasSelected = useMemo(
     () => options.some((option) => option.is_selected),
@@ -37,22 +40,23 @@ export const Variant = (props: VariantProps) => {
     [options]
   );
 
-  const handleClick = (option: VariantOption) => {
-    if (onChange) {
-      onChange(option);
-    }
+  const handleClick = useCallback(
+    (option: VariantOption) => {
+      if (onChange) {
+        onChange(option);
+      }
 
-    if (preventDefaultClick) {
-      return;
-    }
+      if (preventDefaultClick) return;
 
-    params.set(attribute_key, option.value);
-    router.push(`${pathname}?${params.toString()}`);
-  };
+      params.set(attribute_key, option.value);
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [onChange, preventDefaultClick, params, attribute_key, pathname, router]
+  );
 
   return (
     <div
-      className={clsx('flex flex-col gap-2', props.className)}
+      className={clsx('flex flex-col gap-2', className)}
       data-testid={`product-variant-${attribute_name}`}
     >
       <p className="flex gap-2 text-xs leading-4">
@@ -66,30 +70,27 @@ export const Variant = (props: VariantProps) => {
             className="font-bold"
             data-testid={`product-variant-${attribute_name}-value`}
           >
-            {selectedVariant.value}
+            {selectedVariant?.value}
           </span>
         )}
       </p>
       <div className="flex gap-3 flex-wrap justify-center">
         {options.map((option, i) => (
           <button
-            key={i}
+            key={`${i}-${option.value}`}
             className={clsx(
               'h-10 px-4 transition-colors duration-200 text-xs',
-              option.is_selected &&
-                'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground pointer-events-none',
-              option.is_selectable &&
-                !option.is_selected &&
-                'bg-gray-200 hover:bg-gray-400',
-              !option.is_selectable &&
-                !option.is_selected &&
-                'border border-gray-300 text-gray-600',
-              !option.is_selectable &&
-                !option.is_selectable_without_stock &&
-                'border border-gray-300 text-gray-600 cursor-not-allowed',
-              !option.is_selectable &&
-                option.is_selected &&
-                'border border-dashed border-black bg-white text-gray-600 overflow-hidden relative'
+              {
+                'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground pointer-events-none':
+                  option.is_selected,
+                'bg-gray-200 hover:bg-gray-400':
+                  option.is_selectable && !option.is_selected,
+                'border border-gray-300 text-gray-600': !option.is_selectable,
+                'cursor-not-allowed':
+                  !option.is_selectable && !option.is_selectable_without_stock,
+                'border border-dashed border-black bg-white text-gray-600 overflow-hidden relative':
+                  !option.is_selectable && option.is_selected
+              }
             )}
             onClick={() => handleClick(option)}
           >

package/package.json

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

package/app-template/src/views/basket/basket-content.tsx

@@ -1,106 +0,0 @@
-'use client';
-
-import { useLocalization } from '@akinon/next/hooks';
-import { Basket } from '@akinon/next/types';
-import { Button, LoaderSpinner, Link } from '@theme/components';
-import { BasketItem, Summary } from '@theme/views/basket';
-import { ROUTES } from '@theme/routes';
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-import { useEffect, useState } from 'react';
-import { pushCartView } from '@theme/utils/gtm';
-
-interface BasketContentProps {
-  initialBasket: Basket;
-  multiBasket: boolean;
-}
-
-export function BasketContent({
-  initialBasket,
-  multiBasket
-}: BasketContentProps) {
-  const { t } = useLocalization();
-  const [basket, setBasket] = useState<Basket>(initialBasket);
-
-  useEffect(() => {
-    if (basket) {
-      const products = basket.basketitem_set.map((basketItem) => ({
-        ...basketItem.product
-      }));
-      pushCartView(products);
-    }
-  }, [basket]);
-
-  const handleBasketUpdate = (updatedBasket: Basket) => {
-    setBasket(updatedBasket);
-  };
-
-  if (!basket) {
-    return (
-      <div className="flex justify-center w-full">
-        <LoaderSpinner />
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-screen-xl p-4 flex flex-col text-primary-800 lg:p-8 xl:flex-row xl:mx-auto">
-      {basket.basketitem_set && basket.basketitem_set.length > 0 ? (
-        <>
-          <div className="flex-1 xl:mr-16">
-            <div className="flex items-center justify-between py-2 border-b border-gray-200 lg:py-3">
-              <h2 className="text-xl lg:text-2xl font-light">
-                {t('basket.my_cart')}
-              </h2>
-              <Link
-                href={ROUTES.HOME}
-                className="text-xs hover:text-secondary-500"
-              >
-                {t('basket.back_to_shopping')}
-              </Link>
-            </div>
-            <ul>
-              {multiBasket ? (
-                <PluginModule
-                  component={Component.MultiBasket}
-                  props={{
-                    BasketItem,
-                    onBasketUpdate: handleBasketUpdate
-                  }}
-                />
-              ) : (
-                basket.basketitem_set.map((basketItem, index) => (
-                  <BasketItem
-                    key={index}
-                    basketItem={basketItem}
-                    onBasketUpdate={handleBasketUpdate}
-                  />
-                ))
-              )}
-            </ul>
-          </div>
-          <Summary basket={basket} onBasketUpdate={handleBasketUpdate} />
-        </>
-      ) : (
-        <div className="flex flex-col items-center container max-w-screen-sm py-4 px-4 xs:py-6 xs:px-6 sm:py-8 sm:px-8 lg:max-w-screen-xl">
-          <h1
-            className="w-full text-xl font-light text-secondary text-center sm:text-2xl"
-            data-testid="basket-empty"
-          >
-            {t('basket.empty.title')}
-          </h1>
-
-          <div className="w-full text-sm text-black-800 text-center my-4 mb-2 sm:text-base">
-            <p>{t('basket.empty.content_first')}</p>
-            <p>{t('basket.empty.content_second')}.</p>
-          </div>
-
-          <Link href={ROUTES.HOME} passHref>
-            <Button className="px-10 mt-2" appearance="filled">
-              {t('basket.empty.button')}
-            </Button>
-          </Link>
-        </div>
-      )}
-    </div>
-  );
-}