@akinon/projectzero 1.106.0-rc.85 → 1.106.0

package/app-template/src/app/[commerce]/[locale]/[currency]/product/[pk]/loading.tsx

@@ -1,67 +0,0 @@
-import { Skeleton, SkeletonWrapper } from 'components';
-
-export default function Loading() {
-  return (
-    <div className="container mx-auto">
-      <div className="max-w-5xl mx-auto my-5 px-7">
-        <SkeletonWrapper className="md:mb-7">
-          <Skeleton className="w-[17.25rem] h-4 lg:w-64" />
-        </SkeletonWrapper>
-      </div>
-      <div className="grid max-w-5xl grid-cols-2 lg:gap-8 mx-auto px-7">
-        <div className="col-span-2 mb-7 md:mb-0 lg:col-span-1">
-          <div className="flex gap-1">
-            <SkeletonWrapper className="hidden md:block md:mb-7">
-              {Array(5)
-                .fill(null)
-                .map((_, index) => (
-                  <Skeleton key={index} className="w-20	h-24 mb-2" />
-                ))}
-            </SkeletonWrapper>
-
-            <div className="flex-1">
-              <SkeletonWrapper className="md:mb-7">
-                <Skeleton className="w-full h-[30.375rem] md:h-[36.375rem]" />
-              </SkeletonWrapper>
-            </div>
-          </div>
-        </div>
-        <div className="flex flex-col items-center col-span-2 lg:col-span-1">
-          <div className="w-full">
-            <SkeletonWrapper className="w-full md:mb-7 flex justify-center items-center">
-              <Skeleton className="w-96 h-16 mb-9" />
-              <Skeleton className="hidden w-36	h-14 mb-9 md:block" />
-
-              <div className="flex flex-col justify-center items-center mb-9">
-                <Skeleton className="w-36 h-4 mb-2" />
-                <div className="flex items-center gap-2">
-                  {Array(3)
-                    .fill(null)
-                    .map((_, index) => (
-                      <Skeleton key={index} className="w-24	h-10" />
-                    ))}
-                </div>
-              </div>
-
-              <div className="flex flex-col justify-center items-center mb-4">
-                <Skeleton className="w-36 h-4 mb-2" />
-                <div className="flex items-center gap-2">
-                  {Array(5)
-                    .fill(null)
-                    .map((_, index) => (
-                      <Skeleton key={index} className="w-11 h-11" />
-                    ))}
-                </div>
-              </div>
-
-              <Skeleton className="hidden w-full h-14 mb-6 md:block" />
-              <Skeleton className="w-40 h-10 mb-9 md:w-72" />
-              <Skeleton className="w-24 h-10 mb-7" />
-              <Skeleton className="w-full h-36" />
-            </SkeletonWrapper>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/app-template/src/app/api/image-proxy/route.ts

@@ -1 +0,0 @@
-export * from '@akinon/next/api/image-proxy';

package/app-template/src/app/api/similar-product-list/route.ts

@@ -1 +0,0 @@
-export * from '@akinon/next/api/similar-product-list';

package/app-template/src/app/api/similar-products/route.ts

@@ -1 +0,0 @@
-export * from '@akinon/next/api/similar-products';

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

@@ -1,77 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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/utils/variant-validation.ts

@@ -1,41 +0,0 @@
-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

@@ -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>
-  );
-}

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

@@ -1,165 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { Button, Icon, Modal } from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-import { validateVariantSelection } from '../../utils/variant-validation';
-import { VariantType } from '@akinon/next/types';
-
-interface Product {
-  pk: number;
-  name: string;
-  [key: string]: any;
-}
-
-interface ProductActionsProps {
-  product: Product;
-  variants: VariantType[];
-  inStock: boolean;
-  isVariantLoading: boolean;
-  onAddToCart: () => void;
-  onAddToStockAlert: () => void;
-  onClearError: () => void;
-  isAddToCartLoading: boolean;
-  isAddToStockAlertLoading: boolean;
-  productError: React.ReactNode | null;
-  isModalOpen: boolean;
-  stockAlertResponseMessage: React.ReactNode | null;
-  onCloseModal: () => void;
-}
-
-export const ProductActions: React.FC<ProductActionsProps> = ({
-  product,
-  variants,
-  inStock,
-  isVariantLoading,
-  onAddToCart,
-  onAddToStockAlert,
-  onClearError,
-  isAddToCartLoading,
-  isAddToStockAlertLoading,
-  productError,
-  isModalOpen,
-  stockAlertResponseMessage,
-  onCloseModal
-}) => {
-  const { t } = useLocalization();
-
-  const checkoutProviderProps = {
-    product,
-    clearBasket: true,
-    addBeforeClick: () => validateVariantSelection(variants).isValid,
-    openMiniBasket: false,
-    className: clsx([
-      'py-2.5',
-      'bg-black',
-      'relative',
-      'hover:bg-black',
-      'before:content-[""]',
-      'before:w-6',
-      'before:h-6',
-      'before:bg-white',
-      'before:absolute',
-      'before:rounded-r-[18px]',
-      'before:left-0',
-      'after:content-[""]',
-      'after:absolute',
-      'after:w-3',
-      'after:h-3',
-      'after:bg-[#d02c2f]',
-      'after:rounded-xl',
-      'after:left-1'
-    ]),
-    onError: (error: any) => {
-      const formattedError = error?.data?.non_field_errors ||
-        Object.keys(error?.data || {}).map(
-          (key) => `${key}: ${error?.data[key].join(', ')}`
-        );
-      // This would need to be handled by parent component
-      console.error('Checkout error:', formattedError);
-    }
-  };
-
-  const handleMainActionClick = () => {
-    onClearError();
-    
-    if (inStock) {
-      onAddToCart();
-    } else {
-      onAddToStockAlert();
-    }
-  };
-
-  return (
-    <>
-      {productError && (
-        <div className="mt-4 text-xs text-center text-error">
-          {productError}
-        </div>
-      )}
-
-      <Button
-        disabled={isAddToCartLoading || isAddToStockAlertLoading || isVariantLoading}
-        className={clsx(
-          'fixed bottom-0 right-0 w-1/2 h-14 z-[20] flex items-center justify-center fill-primary-foreground',
-          'hover:fill-primary sm:relative sm:w-full sm:mt-3 sm:font-semibold sm:h-12'
-        )}
-        onClick={handleMainActionClick}
-        data-testid="product-add-to-cart"
-      >
-        {isVariantLoading ? (
-          <Icon
-            name="spinner"
-            size={20}
-            className="animate-spin mr-4 fill-primary"
-          />
-        ) : inStock ? (
-          <span>{t('product.add_to_cart')}</span>
-        ) : (
-          <>
-            <Icon name="bell" size={20} className="mr-4" />
-            <span>{t('product.add_stock_alert')}</span>
-          </>
-        )}
-      </Button>
-
-      <PluginModule
-        component={Component.AkifastCheckoutButton}
-        props={{
-          ...checkoutProviderProps,
-          isPdp: true
-        }}
-      />
-
-      <PluginModule
-        component={Component.OneClickCheckoutButtons}
-        props={checkoutProviderProps}
-      />
-
-      <Modal
-        portalId="stock-alert-modal"
-        open={isModalOpen}
-        setOpen={onCloseModal}
-        showCloseButton={false}
-        className="w-5/6 md:max-w-md"
-      >
-        <div className="flex flex-col items-center justify-center gap-4 px-6 py-9">
-          <Icon name="bell" size={48} />
-          <h2 className="text-xl font-semibold">
-            {t('product.stock_alert.title')}
-          </h2>
-          <div className="max-w-40 text-xs text-center leading-4">
-            <p>{stockAlertResponseMessage}</p>
-          </div>
-          <Button
-            onClick={onCloseModal}
-            appearance="outlined"
-            className="font-semibold px-10 h-12"
-          >
-            {t('product.stock_alert.close_button')}
-          </Button>
-        </div>
-      </Modal>
-    </>
-  );
-};

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

@@ -1,56 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Share from '@theme/views/share';
-import { useLocalization } from '@akinon/next/hooks';
-
-interface ProductShareProps {
-  productName: string;
-  className?: string;
-}
-
-export const ProductShare: React.FC<ProductShareProps> = ({
-  productName,
-  className
-}) => {
-  const { t } = useLocalization();
-  const [currentUrl, setCurrentUrl] = useState<string | null>(null);
-
-  useEffect(() => {
-    setCurrentUrl(window.location.href);
-  }, []);
-
-  if (!currentUrl) {
-    return null;
-  }
-
-  const shareItems = [
-    {
-      href: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-        currentUrl
-      )}`,
-      iconName: 'facebook' as const,
-      iconSize: 22
-    },
-    {
-      href: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
-        currentUrl
-      )}`,
-      iconName: 'twitter' as const,
-      iconSize: 22
-    },
-    {
-      href: `https://api.whatsapp.com/send?text=${productName}%20${encodeURIComponent(
-        currentUrl
-      )}`,
-      iconName: 'whatsapp' as const,
-      iconSize: 22
-    }
-  ];
-
-  return (
-    <Share
-      className={className}
-      buttonText={t('product.share')}
-      items={shareItems}
-    />
-  );
-};

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

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