@akinon/projectzero 1.99.0-rc.69 → 1.99.0-snapshot-ZERO-3640-20250919140314

package/app-template/.github/instructions/edge-cases.instructions.md

@@ -1,73 +0,0 @@
----
-applyTo: '**'
----
-
-# Edge Cases & Troubleshooting Instructions
-
-## Overview
-
-This document contains common edge cases, bugs, and troubleshooting steps encountered in Project Zero Next.js development. These are real-world issues that have caused development delays and should be checked first when similar problems occur.
-
-## Checkout Flow Edge Cases
-
-### 1. Order Selection Page Request Timing
-
-**Problem:** `orderselectionpage` request should NOT be called after `walletselectionpage` or `walletpaymentpage` requests.
-
-This causes checkout flow to break after wallet payment steps, order selection shows incorrect state, and payment flow gets reset unexpectedly. After `walletselectionpage` or `walletpaymentpage` requests are made, `orderselectionpage` request should not be called. Always check the sequence of checkout API calls.
-
-### 2. Guest Login with URL Parameters
-
-**Problem:** Adding `?page=IndexPage` to checkout URLs breaks guest login functionality.
-
-Guest login fails on checkout URLs with `?page=IndexPage` but works fine without the parameter. This parameter interferes with authentication middleware routing. Avoid adding unnecessary URL parameters to checkout flows.
-
-### 3. Agreement Error After 3D Payment Redirect
-
-**Problem:** "You must accept agreement to continue" error appears after 3D payment or redirections, but the issue is NOT related to agreements.
-
-Agreement error occurs after successful 3D payment and checkout flow breaks after external redirections. The error message is misleading - actually `preOrder` data gets reset/lost during payment redirections. Don't assume agreement errors are actually about agreements.
-
-### 4. Address Visibility with fetchCheckout
-
-**Problem:** When `fetchCheckout` request includes `page=IndexPage` parameter, addresses don't show in checkout and the entire flow breaks.
-
-Addresses are missing from checkout page, shipping options don't load, and checkout flow is completely broken. Avoid adding unnecessary parameters to core checkout requests and validate that all checkout data loads properly.
-
-## Plugin & Configuration Edge Cases
-
-### 5. Attribute-Based Shipping Options Typo
-
-**Problem:** `attribute_based_shipping_options` was incorrectly entered as `atribute_based` (missing 't') in brand configurations.
-
-Shipping options don't work for specific brands and debugging is difficult because the setting exists but is misspelled. This can cause days of debugging. Always double-check configuration property names.
-
-### 6. Apple Pay Plugin Configuration
-
-**Problem:** Apple Pay can work as both `confirmation` and `wallet` payment types, but for the plugin to work properly, it should NOT be configured as `confirmation` type.
-
-Apple Pay flow breaks in certain scenarios, payment confirmation issues occur, and plugin conflicts with checkout flow. Always configure Apple Pay as wallet type.
-
-## Build & Development Edge Cases
-
-### 7. Build Failures Due to yarn.lock Corruption
-
-**Problem:** Build fails with apparent TypeScript errors in `@akinon/next` components, but the real issue is a corrupted `yarn.lock` file.
-
-Build fails with nonsensical type errors, components from `@akinon/next` are flagged with errors, and multiple versions of the same package exist in lock file.
-
-```bash
-# Check for duplicate packages in yarn.lock
-yarn list --pattern "@akinon/next" --depth=0
-
-# If multiple versions exist, clean up
-rm yarn.lock
-rm -rf node_modules
-yarn install
-```
-
-Regularly check `yarn.lock` for duplicate dependencies and use `yarn dedupe` after adding new packages.
-
----
-
-**Remember:** Edge cases often have misleading error messages. Always investigate the root cause rather than fixing symptoms. The most time-consuming bugs are usually simple configuration or timing issues.

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