@akinon/projectzero 1.104.0-rc.83 → 1.104.0

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

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