@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,233 +0,0 @@
-'use client';
-
-import { signIn, SignInOptions } from 'next-auth/react';
-import { useSearchParams } from 'next/navigation';
-import { useState } from 'react';
-import { ROUTES } from '@theme/routes';
-import { LoginFormType } from '@theme/types';
-import { Button, Input, Link } from '@theme/components';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import * as yup from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
-import clsx from 'clsx';
-import { useGetBasketQuery } from '@akinon/next/data/client/basket';
-import { useCaptcha } from '@akinon/next/hooks';
-import { AuthError } from '@akinon/next/types';
-import { useLocalization } from '@akinon/next/hooks';
-import { Image } from '@akinon/next/components/image';
-
-const oauthProviders = [
-  {
-    key: 'google',
-    label: 'Google',
-    image: '/google.svg'
-  },
-  {
-    key: 'facebook',
-    label: 'Facebook',
-    image: '/facebook.svg'
-  },
-  {
-    key: 'apple',
-    label: 'Apple',
-    image: '/apple.svg'
-  },
-  {
-    key: 'akifast',
-    localeKey: 'auth.login.form.quick_login'
-  }
-];
-
-const loginFormSchema = (t) =>
-  yup.object().shape({
-    email: yup
-      .string()
-      .email(t('auth.login.form.error.email_valid'))
-      .required(t('auth.login.form.error.required')),
-    password: yup.string().required(t('auth.login.form.error.required'))
-  });
-
-export const Login = () => {
-  const { t, locale } = useLocalization();
-
-  const { refetch: refetchBasketData } = useGetBasketQuery();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setError
-  } = useForm<LoginFormType>({
-    resolver: yupResolver(loginFormSchema(t))
-  });
-
-  const searchParams = useSearchParams();
-  const [formError, setFormError] = useState(null);
-
-  const {
-    CaptchaView,
-    validated: captchaValidated,
-    isVisible: isCaptchaVisible,
-    validate: validateCaptcha
-  } = useCaptcha();
-
-  const onSubmit: SubmitHandler<LoginFormType> = async (data) => {
-    setFormError(null);
-
-    const loginResponse = await signIn('default', {
-      redirect: false,
-      callbackUrl: searchParams.get('callbackUrl') ?? '/',
-      captchaValidated,
-      ...data
-    } as SignInOptions);
-
-    if (loginResponse.error) {
-      const errors: AuthError[] = JSON.parse(loginResponse.error);
-
-      if (errors.find((error) => error.type === 'captcha')) {
-        if (await validateCaptcha()) {
-          onSubmit(data);
-        }
-
-        return;
-      }
-
-      const fieldErrors = errors.find((error) => error.type === 'field_errors')
-        ?.data as { name: string; value: string[] }[];
-      const nonFieldErrors = errors.find(
-        (error) => error.type === 'non_field_errors'
-      )?.data as string[];
-
-      fieldErrors?.forEach((item) => {
-        setError(item.name as keyof LoginFormType, {
-          type: 'custom',
-          message: item.value.join(', ')
-        });
-      });
-
-      if (nonFieldErrors?.length) {
-        setFormError(nonFieldErrors.join(', '));
-      }
-
-      return;
-    }
-
-    if (loginResponse.url) {
-      window.location.href = loginResponse.url;
-      refetchBasketData();
-    }
-  };
-
-  return (
-    <section
-      className={clsx([
-        'w-full py-10 px-5 md:py-0 md:px-8 md:mx-auto lg:px-16'
-      ])}
-    >
-      <h2 className="mb-3 text-lg text-start text-black-800 font-light md:mb-9 md:text-2xl">
-        {t('auth.login.title')}
-      </h2>
-
-      <form
-        action="/api/auth/signin/credentials"
-        method="post"
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <input type="hidden" value="login" {...register('formType')} />
-        <input type="hidden" value={locale} {...register('locale')} />
-
-        <div className={clsx(errors.email ? 'mb-8' : 'mb-4')}>
-          <Input
-            labelStyle="floating"
-            label={t('auth.login.form.email.placeholder')}
-            className="h-14"
-            {...register('email')}
-            error={errors.email}
-            data-testid="login-email"
-            required
-          />
-        </div>
-
-        <div className={clsx(errors.password ? 'mb-8' : 'mb-4')}>
-          <Input
-            labelStyle="floating"
-            label={t('auth.login.form.password.placeholder')}
-            className="h-14"
-            type="password"
-            {...register('password')}
-            error={errors.password}
-            data-testid="login-password"
-            required
-          />
-        </div>
-
-        <Link
-          href={ROUTES.FORGOT_PASSWORD}
-          className="block text-sm underline mb-8"
-          data-testid="login-forgot-password"
-        >
-          {t('auth.login.form.forgot_password')}
-        </Link>
-
-        {formError && (
-          <p
-            className="text-error text-xs my-5"
-            data-testid="login-error-field"
-          >
-            {formError}
-          </p>
-        )}
-
-        <div className="flex justify-center">
-          <CaptchaView className="mb-5" data-testid="login-captcha" />
-        </div>
-
-        <Button
-          className="w-full h-12 uppercase text-xs font-semibold"
-          type="submit"
-          disabled={isCaptchaVisible && !captchaValidated}
-          data-testid="login-submit"
-        >
-          {t('auth.login.form.submit')}
-        </Button>
-
-        <p className="relative text-gray-600 text-center my-4 before:absolute before:h-[1px] before:w-5/12 before:bg-gray-600 before:bg-opacity-25 before:top-1/2 before:left-0 after:absolute after:h-[1px] after:w-5/12 after:bg-gray-600 after:bg-opacity-25 after:top-1/2 after:right-0">
-          {t('auth.login.form.or')}
-        </p>
-
-        <div className="social-login">
-          <p className="mb-3 text-lg text-start font-light md:mb-9 md:text-2xl">
-            {t('auth.login.form.sign_in_with')}
-          </p>
-        </div>
-      </form>
-
-      <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
-        {oauthProviders.map((provider) => (
-          <Button
-            key={provider.key}
-            className="w-full h-14 uppercase text-xs font-semibold flex items-center justify-center gap-2 hover:bg-transparent hover:border hover:border-primary-800 hover:text-primary"
-            type="submit"
-            appearance="outlined"
-            disabled={isCaptchaVisible && !captchaValidated}
-            onClick={() => {
-              location.href = `/${provider.key}/login/`;
-            }}
-          >
-            {provider.image && (
-              <Image
-                src={provider.image}
-                alt={provider.label}
-                width={provider.label === 'Facebook' ? 10 : 18}
-                height={18}
-                className="flex-shrink-0"
-              />
-            )}
-
-            {provider.localeKey ? t(provider.localeKey) : provider.label}
-          </Button>
-        ))}
-      </div>
-    </section>
-  );
-};

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

@@ -1,152 +0,0 @@
-'use client';
-
-import { signIn, SignInOptions } from 'next-auth/react';
-import { useState } from 'react';
-import { OtpLoginFormType } from '@theme/types';
-import { Button, Input } from '@theme/components';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import * as yup from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
-import clsx from 'clsx';
-import { useLocalization } from '@akinon/next/hooks';
-import { useOtpLoginMutation } from '@akinon/next/data/client/user';
-import { useAppSelector } from '@akinon/next/redux/hooks';
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-import { AuthError } from '@akinon/next/types';
-
-const loginFormSchema = (t) =>
-  yup.object().shape({
-    phone: yup
-      .string()
-      .transform((value: string) => value?.replace(/_/g, '').replace(/ /g, ''))
-      .length(11, t('account.my_profile.form.phone.error.not_valid'))
-      .required(t('auth.login.form.error.required')),
-    code: yup.string()
-  });
-
-export const OtpLogin = () => {
-  const { user_phone_format } = useAppSelector((state) => state.config);
-  const { t, locale } = useLocalization();
-  const [showOtpModal, setShowOtpModal] = useState(false);
-  const [otpLoginMutation] = useOtpLoginMutation();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    getValues,
-    control
-  } = useForm<OtpLoginFormType>({
-    resolver: yupResolver(loginFormSchema(t))
-  });
-
-  const [formError, setFormError] = useState(null);
-
-  const loginHandler: SubmitHandler<OtpLoginFormType> = async (data) => {
-    const loginResponse = await signIn('default', {
-      redirect: false,
-      callbackUrl: '/',
-      ...data
-    } as SignInOptions);
-
-    if (loginResponse.error) {
-      const errors: AuthError[] = JSON.parse(loginResponse.error);
-
-      const fieldErrors = errors.find((error) => error.type === 'field_errors')
-        ?.data as { name: string; value: string[] }[];
-
-      const nonFieldErrors = errors.find(
-        (error) => error.type === 'non_field_errors'
-      )?.data as string[];
-
-      fieldErrors?.forEach((item) => {
-        if (item.name === 'error_code') {
-          setFormError(t('auth.otp_login.form.error_code'));
-        }
-      });
-
-      if (nonFieldErrors?.length) {
-        setFormError(nonFieldErrors.join(', '));
-      }
-
-      return;
-    }
-  };
-
-  const onSubmit = async (data: OtpLoginFormType) => {
-    await otpLoginMutation({
-      phone: data.phone
-    })
-      .unwrap()
-      .then(() => {
-        setShowOtpModal(true);
-      })
-      .catch((error) => {
-        if (error.status === 429) {
-          setFormError(t('auth.login.form.error.too_many_requests'));
-          return;
-        }
-
-        for (const key in error.data) {
-          setFormError(error.data[key]);
-        }
-      });
-  };
-
-  return (
-    <section className={clsx(['w-full py-10 md:py-0 md:mx-auto'])}>
-      <h2 className="mb-3 text-lg text-start text-black-800 font-light md:mb-9 md:text-2xl">
-        {t('auth.login.title_gsm')}
-      </h2>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <input type="hidden" value="otpLogin" {...register('formType')} />
-        <input type="hidden" value={locale} {...register('locale')} />
-
-        <div className="mb-4">
-          <Input
-            labelStyle="floating"
-            className="h-14"
-            label={t('auth.login.form.phone.placeholder')}
-            type="tel"
-            format={user_phone_format.replace(/\9/g, '#')}
-            mask="_"
-            allowEmptyFormatting={true}
-            control={control}
-            {...register('phone')}
-            error={errors.phone}
-            required
-          />
-        </div>
-
-        {formError && (
-          <p
-            className="text-error text-xs mb-4"
-            data-testid="login-error-field"
-          >
-            {formError}
-          </p>
-        )}
-
-        <Button
-          className="w-full h-12 uppercase text-xs font-semibold"
-          type="submit"
-          data-testid="otp-login-submit"
-        >
-          {t('auth.login.form.submit')}
-        </Button>
-      </form>
-
-      {showOtpModal && (
-        <PluginModule
-          component={Component.Otp}
-          props={{
-            setShowPopup: setShowOtpModal,
-            data: getValues(),
-            submitAction: loginHandler,
-            error: formError
-          }}
-        />
-      )}
-    </section>
-  );
-};

package/app-template/src/views/page-loader-spinner/index.tsx

@@ -1,9 +0,0 @@
-import { LoaderSpinner } from '@theme/components';
-
-export const PageLoaderSpinner = () => {
-  return (
-    <div className="w-full min-h-[300px] flex justify-center items-center">
-      <LoaderSpinner />
-    </div>
-  );
-};

package/app-template/src/views/product/accordion-wrapper.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { useLocalization } from '@akinon/next/hooks';
-import React from 'react';
-import { Accordion } from '@theme/components';
-import InstallmentOptions from '@theme/views/installment-options';
-
-export default function AccordionWrapper({ data, deliveryReturn }) {
-  const { t } = useLocalization();
-
-  const generateHtml = (data: string) => {
-    return { __html: data };
-  };
-
-  return (
-    <div className="w-full">
-      <Accordion
-        title={t('product.details_care')}
-        icons={['minus', 'plus']}
-        iconSize={15}
-      >
-        {t('product.product_code')}: {data.product.sku} -{' '}
-        {data.product.base_code}
-        {data.product.attributes.integration_ProductAtt03Desc &&
-          data.product.attributes.integration_ProductAtt03Desc}
-        {data.product.attributes.integration_kumas_icerik &&
-          data.product.attributes.integration_kumas_icerik}
-        {data.product.attributes.model_olculeri &&
-          data.product.attributes.model_olculeri}
-        {data.product.attributes.aciklama && (
-          <div
-            dangerouslySetInnerHTML={generateHtml(
-              data.product.attributes.aciklama
-            )}
-          />
-        )}
-      </Accordion>
-      <Accordion
-        title={t('product.delivery_collections')}
-        icons={['minus', 'plus']}
-        iconSize={15}
-      >
-        <div
-          dangerouslySetInnerHTML={generateHtml(
-            deliveryReturn?.product_delivery_returns?.value
-          )}
-        />
-      </Accordion>
-
-      <Accordion
-        title={t('product.installment_options')}
-        icons={['minus', 'plus']}
-        iconSize={15}
-      >
-        <InstallmentOptions productPk={data.product.pk} />
-      </Accordion>
-    </div>
-  );
-}

package/app-template/src/views/product/combine-product-card.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import { useAddProductToBasket } from '../../hooks';
-import useFavButton from '../../hooks/use-fav-button';
-import { Button } from '@theme/components';
-import { useEffect, useState } from 'react';
-import { useGetProductByPkQuery } from '@akinon/next/data/client/product';
-import { ProductResult } from '@akinon/next/types';
-import PriceWrapper from './price-wrapper';
-import Variant from './variant';
-import { useLocalization } from '@akinon/next/hooks';
-import { Image } from '@akinon/next/components/image';
-
-export default function CombineProductCard(
-  props: ProductResult & { index: number }
-) {
-  const { t } = useLocalization();
-  const { index, product, in_stock } = props;
-  const [productPk, setProductPk] = useState(product.pk);
-  const [productVariants, setProductVariants] = useState([]);
-  const [addProduct, { isLoading }] = useAddProductToBasket();
-  const { data } = useGetProductByPkQuery(productPk);
-  const { FavButton } = useFavButton(productPk);
-
-  const addProductToCart = () => {
-    addProduct({ product: productPk, quantity: 1, attributes: {} });
-  };
-
-  useEffect(() => {
-    if (data) {
-      setProductVariants(data.variants ?? []);
-    }
-  }, [data]);
-
-  return (
-    <div className="flex flex-col items-center">
-      <div className="flex items-start w-full">
-        <div className="mr-4 shrink-0">
-          <Image
-            src={product.productimage_set[0]?.image}
-            alt={props.product.name}
-            width={144}
-            height={224}
-          />
-        </div>
-        <div className="flex flex-col items-start w-full relative">
-          <FavButton className="absolute top-0 right-0" />
-          <h2 className="text-base text-center" data-testid="product-name">
-            {index + 1}. {product.name}
-          </h2>
-          <div className="">
-            <PriceWrapper
-              price={product.price}
-              retailPrice={product.retail_price}
-            />
-          </div>
-          <div className="flex flex-col">
-            {productVariants.map((variant) => (
-              <Variant
-                key={variant.attribute_key}
-                {...variant}
-                preventDefaultClick={true}
-                onChange={(option) => {
-                  setProductPk(option.product.pk);
-                }}
-                className="items-start mt-4"
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-      <Button
-        disabled={!in_stock || isLoading}
-        className="w-full h-12 mt-3 font-semibold"
-        onClick={addProductToCart}
-        data-testid="product-add-to-cart"
-      >
-        {t('product.add_to_cart')}
-      </Button>
-    </div>
-  );
-}

package/app-template/src/views/product/index.ts

@@ -1,8 +0,0 @@
-export { default as PriceWrapper } from './price-wrapper';
-export { default as Variant } from './variant';
-export { default as ProductInfo } from './product-info';
-export { default as ProductGroupInfo } from './product-group-info';
-export { default as MiscButtons } from './misc-buttons';
-export { default as ProductInfoSlider } from './slider';
-export { default as AccordionWrapper } from './accordion-wrapper';
-export { default as CombineProductCard } from './combine-product-card';

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

@@ -1,40 +0,0 @@
-import Breadcrumb from '@theme/views/breadcrumb';
-import { ProductInfoSlider } from '@theme/views/product';
-
-import { BreadcrumbResultType, ProductResult } from '@akinon/next/types';
-
-interface DeliveryReturnItem {
-  product_delivery_returns?: {
-    value: string;
-    kwargs: object;
-  };
-}
-
-export interface ProductPageProps {
-  children?: React.ReactNode;
-  data: ProductResult;
-  breadcrumbData?: BreadcrumbResultType[];
-  deliveryReturn?: DeliveryReturnItem | null;
-}
-
-export default async function ProductLayout({
-  data,
-  breadcrumbData,
-  children
-}: ProductPageProps) {
-  return (
-    <div className="container mx-auto">
-      <div className="max-w-5xl mx-auto my-5 px-7">
-        <Breadcrumb breadcrumbList={breadcrumbData} />
-      </div>
-      <div className="grid max-w-5xl grid-cols-5 lg:gap-8 mx-auto px-7">
-        <div className="col-span-5 lg:col-span-3">
-          <ProductInfoSlider product={data.product} />
-        </div>
-        <div className="flex flex-col items-center col-span-5 lg:col-span-2">
-          <div className="w-full">{children}</div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/app-template/src/views/product/misc-buttons.tsx

@@ -1,65 +0,0 @@
-'use client';
-
-import { FindInStore } from '@theme/views/find-in-store';
-import useFavButton from '../../hooks/use-fav-button';
-import React, { useState } from 'react';
-import { Button, Icon, Modal } from '@theme/components';
-import { VariantType } from '@akinon/next/types';
-import clsx from 'clsx';
-import { useLocalization } from '@akinon/next/hooks';
-
-interface MiscButtonsProps {
-  productPk: number;
-  productName: string;
-  variants: Array<VariantType>;
-}
-
-export default function MiscButtons({
-  variants,
-  productPk,
-  productName
-}: MiscButtonsProps) {
-  const { t } = useLocalization();
-  const { FavButton } = useFavButton(productPk);
-  const [isFindinStoreModalOpen, setIsFindinStoreModalOpen] = useState(false);
-
-  return (
-    <div className="grid grid-cols-1 gap-4 place-items-center mb-2 mt-4 sm:grid-cols-[1fr_auto_1fr] sm:my-4 xl:gap-6">
-      <FavButton
-        label={t('product.add_to_favorites')}
-        className="px-1 py-2 text-base hidden sm:flex"
-      />
-      <div className="h-5 border border-black hidden sm:block" />
-      <Button
-        appearance="outlined"
-        className="group px-12 py-2 text-xs place-self-start hover:bg-transparent hover:text-secondary-hover sm:text-base sm:border-none sm:px-4"
-        data-testid="product-find-in-store"
-        onClick={() => setIsFindinStoreModalOpen(true)}
-      >
-        <div className="flex items-center gap-2">
-          <span>{t('product.find_in_store.title')}</span>
-          <Icon
-            name="store-pin"
-            size={20}
-            className={clsx('hidden sm:block group-hover:fill-[white]')}
-          />
-        </div>
-      </Button>
-      <Modal
-        portalId="find-in-store-modal"
-        title={t('product.find_in_store.title')}
-        open={isFindinStoreModalOpen}
-        setOpen={setIsFindinStoreModalOpen}
-        className="w-[22rem] sm:w-[36rem] max-h-[90vh] overflow-y-auto"
-      >
-        <div className="px-6">
-          <FindInStore
-            productName={productName}
-            productPk={productPk}
-            variants={variants}
-          />
-        </div>
-      </Modal>
-    </div>
-  );
-}

package/app-template/src/views/product/price-wrapper.tsx

@@ -1,41 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Price } from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
-import { Product } from '@akinon/next/types';
-
-export interface PriceProps {
-  price: Product['price'];
-  retailPrice: Product['retail_price'];
-}
-
-export default function PriceWrapper(props: PriceProps) {
-  const { t } = useLocalization();
-  const { price, retailPrice } = props;
-  const hasRetailPrice = parseFloat(retailPrice) > parseFloat(price);
-
-  return (
-    <div className="flex items-center gap-3 justify-center h-full">
-      <div className="flex flex-col items-end">
-        {hasRetailPrice && (
-          <div>
-            <Price value={retailPrice} className="text-xs line-through" />
-          </div>
-        )}
-        <div className="-mt-2">
-          <Price value={price} className="text-2xl" data-testid="price" />
-        </div>
-      </div>
-
-      {hasRetailPrice && (
-        <div className="flex flex-col items-center w-9 py-0.5 text-xs text-white bg-secondary">
-          <span className="font-bold">
-            {Math.round(100 - (parseInt(price) / parseInt(retailPrice)) * 100)}%
-          </span>
-          <span>{t('product.off')}</span>
-        </div>
-      )}
-    </div>
-  );
-}