@akinon/projectzero 1.32.0 → 1.33.0

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

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

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

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

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

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

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

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

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

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