@akinon/projectzero 1.105.0 → 1.106.0-rc.85

package/app-template/src/components/types/index.ts

@@ -29,7 +29,13 @@ export interface PaginationProps {
   isLoading?: boolean;
 }
 
-export type FileInputProps = React.HTMLProps<HTMLInputElement>;
+export interface FileInputProps extends React.HTMLProps<HTMLInputElement> {
+  fileClassName?: string;
+  fileNameWrapperClassName?: string;
+  fileInputClassName?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  buttonClassName?: string;
+}
 
 export type RadioProps = React.HTMLProps<HTMLInputElement>;
 
@@ -92,3 +98,20 @@ export interface BadgeProps {
   children: ReactNode;
   className?: string;
 }
+
+export type AccordionProps = {
+  isCollapse?: boolean;
+  collapseClassName?: string;
+  title?: string;
+  subTitle?: string;
+  icons?: string[];
+  iconSize?: number;
+  iconColor?: string;
+  children?: ReactNode;
+  headerClassName?: string;
+  className?: string;
+  titleClassName?: string;
+  subTitleClassName?: string;
+  dataTestId?: string;
+  contentClassName?: string;
+};

package/app-template/src/hooks/index.ts

@@ -1 +1,3 @@
+export * from './use-contract';
+export * from './use-fav-button';
 export * from './use-add-product-to-basket';

package/app-template/src/hooks/use-product-cart.ts

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { useAddProductToBasket } from './index';
+import { pushAddToCart } from '@theme/utils/gtm';
+import { validateVariantSelection } from '../utils/variant-validation';
+import { VariantType } from '@akinon/next/types';
+
+interface Product {
+  pk: number;
+  [key: string]: any;
+}
+
+interface UseProductCartProps {
+  product: Product;
+  variants: VariantType[];
+}
+
+interface AddToCartError {
+  data?: {
+    non_field_errors?: string[];
+    [key: string]: string[];
+  };
+}
+
+export const useProductCart = ({ product, variants }: UseProductCartProps) => {
+  const [productError, setProductError] = useState<React.ReactNode | null>(null);
+  const [addProduct, { isLoading: isAddToCartLoading }] = useAddProductToBasket();
+
+  const formatError = (error: AddToCartError) => {
+    if (error?.data?.non_field_errors) {
+      return error.data.non_field_errors;
+    }
+    
+    if (error?.data) {
+      return Object.keys(error.data).map(
+        (key) => `${key}: ${error.data[key].join(', ')}`
+      );
+    }
+    
+    return 'An error occurred';
+  };
+
+  const addProductToCart = async () => {
+    const validation = validateVariantSelection(variants);
+    
+    if (!validation.isValid) {
+      setProductError(validation.errorMessage);
+      return false;
+    }
+
+    try {
+      await addProduct({
+        product: product.pk,
+        quantity: 1,
+        attributes: {}
+      });
+
+      pushAddToCart(product);
+      setProductError(null);
+      return true;
+    } catch (error) {
+      const formattedError = formatError(error as AddToCartError);
+      setProductError(formattedError);
+      return false;
+    }
+  };
+
+  const clearProductError = () => {
+    setProductError(null);
+  };
+
+  return {
+    addProductToCart,
+    productError,
+    clearProductError,
+    isAddToCartLoading
+  };
+};

package/app-template/src/hooks/use-stock-alert.ts

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { useAddStockAlertMutation } from '@akinon/next/data/client/wishlist';
+import { Trans } from '@akinon/next/components/trans';
+import { useLocalization } from '@akinon/next/hooks';
+
+interface UseStockAlertProps {
+  productPk: number;
+  userEmail?: string;
+}
+
+export const useStockAlert = ({ productPk, userEmail }: UseStockAlertProps) => {
+  const { t } = useLocalization();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [stockAlertResponseMessage, setStockAlertResponseMessage] = useState<React.ReactNode | null>(null);
+  const [productError, setProductError] = useState<React.ReactNode | null>(null);
+  
+  const [addStockAlert, { isLoading: isAddToStockAlertLoading }] = useAddStockAlertMutation();
+
+  const handleSuccess = () => {
+    setStockAlertResponseMessage(React.createElement(
+      Trans,
+      {
+        i18nKey: "product.stock_alert.success_description",
+        components: {
+          Email: React.createElement('span', {}, userEmail)
+        }
+      }
+    ));
+    setIsModalOpen(true);
+    setProductError(null);
+  };
+
+  const handleError = (err: any) => {
+    if (err.status !== 401) {
+      setStockAlertResponseMessage(
+        t('product.stock_alert.error_description').toString()
+      );
+      setIsModalOpen(true);
+    }
+  };
+
+  const addProductToStockAlertList = async () => {
+    try {
+      await addStockAlert({
+        productPk,
+        email: userEmail
+      })
+        .unwrap()
+        .then(handleSuccess)
+        .catch(handleError);
+    } catch (error: any) {
+      setProductError(error?.data?.non_field_errors || null);
+    }
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const clearError = () => {
+    setProductError(null);
+  };
+
+  return {
+    addProductToStockAlertList,
+    isModalOpen,
+    setIsModalOpen,
+    stockAlertResponseMessage,
+    productError,
+    isAddToStockAlertLoading,
+    closeModal,
+    clearError
+  };
+};

package/app-template/src/plugins.js

@@ -15,5 +15,6 @@ module.exports = [
   'pz-saved-card',
   'pz-tabby-extension',
   'pz-tamara-extension',
-  'pz-hepsipay'
+  'pz-hepsipay',
+  'pz-similar-products'
 ];

package/app-template/src/settings.js

@@ -1,6 +1,10 @@
 const { LocaleUrlStrategy } = require('@akinon/next/localization');
 const { ROUTES } = require('@theme/routes');
 
+/* IMPORTANT *
+ * In order to use one locale in the locales array and hide the default locale in the URL, you need to set the localeUrlStrategy to LocaleUrlStrategy.ShowAllLocales.
+ */
+
 const commerceUrl = encodeURI(process.env.SERVICE_BACKEND_URL ?? 'default');
 
 /** @type {import('@akinon/next/types').Settings} */
@@ -14,6 +18,7 @@ module.exports = {
     { translationKey: 'size', key: 'size' }
   ],
   localization: {
+    // If there is one locale in the locales array, the default locale will be hidden in the URL.
     locales: [
       {
         label: 'EN',
@@ -41,7 +46,7 @@ module.exports = {
       }
     ],
     defaultLocaleValue: 'en',
-    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale,
+    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale, // If there is one locale in the locales array, the default locale will be hidden in the URL and localeUrlStrategy should be set to LocaleUrlStrategy.ShowAllLocales.
     redirectToDefaultLocale: true,
     defaultCurrencyCode: 'usd'
   },

package/app-template/src/utils/variant-validation.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Trans } from '@akinon/next/components/trans';
+import { VariantType } from '@akinon/next/types';
+
+export const isVariantSelectionComplete = (variants: VariantType[]): boolean => {
+  return variants?.every((variant) =>
+    variant?.options.some((opt) => opt.is_selected)
+  );
+};
+
+export const getUnselectedVariant = (variants: VariantType[]): VariantType | undefined => {
+  return variants.find((variant) =>
+    variant.options.every((opt) => !opt.is_selected)
+  );
+};
+
+export const createVariantErrorMessage = (unselectedVariant: VariantType) => {
+  const TransComponent = Trans as any;
+  return React.createElement(
+    TransComponent,
+    {
+      i18nKey: "product.please_select_variant",
+      components: {
+        VariantName: React.createElement('span', {}, unselectedVariant.attribute_name)
+      }
+    }
+  );
+};
+
+export const validateVariantSelection = (variants: VariantType[]) => {
+  const unselectedVariant = getUnselectedVariant(variants);
+  
+  if (unselectedVariant) {
+    return {
+      isValid: false,
+      errorMessage: createVariantErrorMessage(unselectedVariant)
+    };
+  }
+
+  return { isValid: true, errorMessage: null };
+};

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

@@ -0,0 +1,106 @@
+'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>
+  );
+}

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

@@ -3,7 +3,7 @@ import {
   useUpdateQuantityMutation
 } from '@akinon/next/data/client/basket';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
-import { BasketItem as BasketItemType } from '@akinon/next/types';
+import { Basket, BasketItem as BasketItemType } from '@akinon/next/types';
 import { Price, Button, Icon, Modal, Select, Link } from '@theme/components';
 import { useState } from 'react';
 import { useAddFavoriteMutation } from '@akinon/next/data/client/wishlist';
@@ -19,11 +19,12 @@ import { pushRemoveFromCart } from '@theme/utils/gtm';
 interface Props {
   basketItem?: BasketItemType;
   namespace?: string;
+  onBasketUpdate?: (basket: Basket) => void;
 }
 
 export const BasketItem = (props: Props) => {
   const { t } = useLocalization();
-  const { basketItem, namespace } = props;
+  const { basketItem, namespace, onBasketUpdate } = props;
   const [updateQuantityMutation] = useUpdateQuantityMutation();
   const dispatch = useAppDispatch();
   const [isRemoveBasketModalOpen, setRemoveBasketModalOpen] = useState(false);
@@ -54,19 +55,21 @@ export const BasketItem = (props: Props) => {
       requestParams.namespace = namespace;
     }
 
-    await updateQuantityMutation(requestParams)
-      .unwrap()
-      .then((data) =>
-        dispatch(
-          basketApi.util.updateQueryData(
-            'getBasket',
-            undefined,
-            (draftBasket) => {
-              Object.assign(draftBasket, data.basket);
-            }
-          )
+    try {
+      const response = await updateQuantityMutation(requestParams).unwrap();
+      dispatch(
+        basketApi.util.updateQueryData(
+          'getBasket',
+          undefined,
+          (draftBasket) => {
+            Object.assign(draftBasket, response.basket);
+          }
         )
       );
+      onBasketUpdate?.(response.basket);
+    } catch (error) {
+      console.error('Error updating quantity:', error);
+    }
   };
 
   const deleteProduct = async (productPk?: number) => {

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

@@ -18,6 +18,7 @@ import clsx from 'clsx';
 
 interface Props {
   basket: Basket;
+  onBasketUpdate?: (basket: Basket) => void;
 }
 
 const voucherCodeFormSchema = (t) =>
@@ -27,7 +28,7 @@ const voucherCodeFormSchema = (t) =>
 
 export const Summary = (props: Props) => {
   const { t } = useLocalization();
-  const { basket } = props;
+  const { basket, onBasketUpdate } = props;
   const router = useRouter();
   const {
     register,
@@ -53,7 +54,7 @@ export const Summary = (props: Props) => {
   const removeVoucherCode = () => {
     removeVoucherCodeMutation()
       .unwrap()
-      .then((basket) =>
+      .then((basket) => {
         dispatch(
           basketApi.util.updateQueryData(
             'getBasket',
@@ -62,8 +63,9 @@ export const Summary = (props: Props) => {
               Object.assign(draftBasket, basket);
             }
           )
-        )
-      )
+        );
+        onBasketUpdate?.(basket);
+      })
       .catch((error: Error) => {
         setError('voucherCode', { message: error.data.non_field_errors });
       });
@@ -74,7 +76,7 @@ export const Summary = (props: Props) => {
       voucher_code: data.voucherCode
     })
       .unwrap()
-      .then((basket) =>
+      .then((basket) => {
         dispatch(
           basketApi.util.updateQueryData(
             'getBasket',
@@ -83,8 +85,9 @@ export const Summary = (props: Props) => {
               Object.assign(draftBasket, basket);
             }
           )
-        )
-      )
+        );
+        onBasketUpdate?.(basket);
+      })
       .catch((error: Error) => {
         setError('voucherCode', { message: error.data.non_field_errors });
       });

package/app-template/src/views/checkout/steps/payment/options/store-credit.tsx

@@ -0,0 +1,121 @@
+import clsx from 'clsx';
+import {
+  useGetCheckoutLoyaltyBalanceQuery,
+  usePayWithLoyaltyBalanceMutation
+} from '@akinon/next/data/client/checkout';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useMemo, useState } from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+import { twMerge } from 'tailwind-merge';
+import { Icon, Price } from '@theme/components';
+import { Trans } from '@akinon/next/components';
+import { LoaderSpinner } from '@theme/components';
+
+export const StoreCredits = () => {
+  const { t } = useLocalization();
+
+  const [payWithLoyaltyBalance, { isLoading: isPayWithLoyaltyBalanceLoading }] =
+    usePayWithLoyaltyBalanceMutation();
+
+  const { loyaltyBalance, preOrder } = useAppSelector(
+    (state) => state.checkout
+  );
+
+  const { isLoading: isLoyaltyBalanceLoading } =
+    useGetCheckoutLoyaltyBalanceQuery(undefined, {
+      refetchOnMountOrArgChange: true,
+      skip: !preOrder?.payment_option
+    });
+
+  const isLoyaltyBalanceUsed = useMemo(() => {
+    return parseFloat(preOrder?.loyalty_money ?? '0') > 0;
+  }, [preOrder?.loyalty_money]);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
+
+    try {
+      await payWithLoyaltyBalance(isLoyaltyBalanceUsed ? '0' : loyaltyBalance);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (preOrder?.is_guest) {
+    return null;
+  }
+
+  if (isLoyaltyBalanceLoading) {
+    return (
+      <div className="mb-3 px-4 py-3 xs:px-0">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (parseFloat(loyaltyBalance) <= 0) {
+    return null;
+  }
+  return (
+    <div
+      className={twMerge(
+        'hidden  flex-col w-full mb-4 border border-solid border-gray-400 px-0 md:p-4',
+        isPayWithLoyaltyBalanceLoading && 'pointer-events-none opacity-30',
+        parseFloat(loyaltyBalance) > 0 && 'block'
+      )}
+    >
+      <div className="flex w-full items-center">
+        <button onClick={handleClick}>
+          <span
+            className={clsx(
+              'flex h-5 w-5 items-center justify-center rounded border border-solid border-primary',
+              isLoyaltyBalanceUsed ? 'bg-primary' : 'bg-white'
+            )}
+          >
+            <Icon
+              name={isLoyaltyBalanceUsed ? 'check' : ''}
+              size={10}
+              className={clsx({ 'text-white': isLoyaltyBalanceUsed })}
+            />
+          </span>
+        </button>
+
+        <div className="w-full pl-4">
+          <p className="cursor-pointer text-sm" onClick={handleClick}>
+            {t('checkout.payment.store_credit.use_my_store_credits')}
+          </p>
+          <p className="flex text-sm text-[#606060]">
+            {t('checkout.payment.store_credit.available_balance')}:
+            <Price
+              value={loyaltyBalance}
+              currencyCode={preOrder?.currency_type_label}
+              className="pe-1 font-bold"
+            />
+          </p>
+        </div>
+      </div>
+
+      {isLoyaltyBalanceUsed && parseFloat(preOrder?.unpaid_amount) > 0 && (
+        <p className="my-4 text-[15px] font-light italic text-[#707070] max-xs:text-xs">
+          <Trans
+            i18nKey="checkout.payment.store_credit.insufficient_balance"
+            components={{
+              Amount: (
+                <div className="inline-flex">
+                  <Price
+                    value={preOrder?.unpaid_amount}
+                    currencyCode={preOrder?.currency_type_label}
+                    className="text-primary"
+                  />
+                </div>
+              )
+            }}
+          />
+        </p>
+      )}
+    </div>
+  );
+};

package/app-template/src/views/checkout/summary.tsx

@@ -8,6 +8,7 @@ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { twMerge } from 'tailwind-merge';
 import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
+import { StoreCredits } from './steps/payment/options/store-credit';
 
 export const Summary = () => {
   const { t } = useLocalization();
@@ -38,6 +39,7 @@ export const Summary = () => {
             'flex flex-col w-full mb-4 border border-solid border-gray-400'
         }}
       />
+      <StoreCredits />
       <div className="flex flex-col w-full border border-solid border-gray-400">
         <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
           <span className="text-black-800 text-xl font-light sm:text-2xl">
@@ -118,6 +120,14 @@ export const Summary = () => {
               <Price value={preOrder?.shipping_amount} />
             </span>
           </div>
+          {parseFloat(preOrder?.loyalty_money) > 0 && (
+            <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+              <span>{t('checkout.summary.loyalty_money_total')}</span>
+              <span>
+                <Price value={preOrder?.loyalty_money} />
+              </span>
+            </div>
+          )}
           <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
             <span>{t('checkout.summary.discounts_total')}</span>
             <span>

package/app-template/src/views/guest-login/index.tsx

@@ -51,9 +51,14 @@ const GuestLogin = () => {
       ).unwrap();
 
       Object.keys(response?.errors || {}).forEach((key) => {
+        const errorValue = response?.errors[key];
+        const message = Array.isArray(errorValue)
+          ? errorValue.join(', ')
+          : errorValue || '';
+
         setError(key as keyof GuestLoginFormParams, {
           type: 'custom',
-          message: response?.errors[key]?.join(', ')
+          message
         });
       });
     } catch (error) {