@akinon/projectzero 1.32.0-rc.2 → 1.32.0

package/app-template/src/views/checkout/summary.tsx

@@ -1,181 +0,0 @@
-import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
-import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { RootState } from '@theme/redux/store';
-import { Price, Link } from '@theme/components';
-import { CheckoutStep } from '@akinon/next/types';
-import { useLocalization } from '@akinon/next/hooks';
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-import { twMerge } from 'tailwind-merge';
-import { Image } from '@akinon/next/components/image';
-import { Trans } from '@akinon/next/components/trans';
-
-export const Summary = () => {
-  const { t } = useLocalization();
-
-  const currentStep = useAppSelector(
-    (state: RootState) => state.checkout.steps.current
-  );
-  const preOrder = useAppSelector(
-    (state: RootState) => state.checkout.preOrder
-  );
-  const { isMobileApp } = useAppSelector((state: RootState) => state.root);
-  const dispatch = useAppDispatch();
-
-  if (!preOrder) {
-    return null;
-  }
-
-  const Text = (props) => {
-    return props.title;
-  };
-
-  return (
-    <div className="flex flex-col items-center justify-center">
-      <PluginModule
-        component={Component.CheckoutGiftPack}
-        props={{
-          className:
-            'flex flex-col w-full mb-4 border border-solid border-gray-400'
-        }}
-      />
-      <div className="flex flex-col w-full border border-solid border-gray-400">
-        <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
-          <span className="text-black-800 text-xl font-light sm:text-2xl">
-            {t('checkout.summary.title')}
-          </span>
-          <span className="text-gray-950 text-xs">
-            {preOrder.basket.basketitem_set.length}{' '}
-            {t('checkout.summary.items').toUpperCase()}
-          </span>
-        </div>
-        <div className="border-b border-solid border-gray-400 max-h-64 overflow-y-auto">
-          {preOrder.basket.basketitem_set.map((item, index) => (
-            <div
-              key={`summary-basketitem-${index}`}
-              className="flex flex-row border-b border-solid border-gray-400 py-3 px-4 last:border-b-0 sm:px-5"
-            >
-              <Link
-                href={'#'}
-                className={twMerge(
-                  'min-w-max flex items-center justify-center',
-                  isMobileApp && 'pointer-events-none'
-                )}
-                passHref
-              >
-                <Image
-                  src={item.product.productimage_set[0]?.image}
-                  alt="Checkout Summary Image"
-                  width={64}
-                  height={96}
-                />
-              </Link>
-              <div className="w-full flex flex-wrap justify-between pl-4">
-                <div className="flex justify-center flex-col w-1/2">
-                  <Link
-                    href={item.product.absolute_url}
-                    className={twMerge(
-                      'text-xs text-black-800 transition-all mb-1 hover:text-secondary',
-                      isMobileApp && 'pointer-events-none'
-                    )}
-                  >
-                    {item.product.name}
-                  </Link>
-                  <div className="flex flex-col">
-                    <div className="flex text-xs text-black-800">
-                      <span>{t('checkout.summary.quantity')}:</span>
-                      <span className="ml-1 min-w-max">{item.quantity}</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex items-end justify-center flex-col w-1/2">
-                  {item.product.retail_price !== item.product.price && (
-                    <div className="text-xs text-black-800 line-through min-w-max sm:text-sm">
-                      <Price value={item.product.retail_price} />
-                    </div>
-                  )}
-                  <div className="text-xs text-secondary min-w-max sm:text-sm">
-                    <Price value={item.product.price} />
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-        <div className="pt-3">
-          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-            <span>
-              {t('checkout.summary.subtotal')} (
-              {preOrder.basket.basketitem_set.length}{' '}
-              {t('checkout.summary.items')})
-            </span>
-            <span>
-              <Price value={preOrder?.basket?.total_amount} />
-            </span>
-          </div>
-          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-            <span>{t('checkout.summary.shipping')}</span>
-            <span>
-              <Price value={preOrder?.shipping_amount} />
-            </span>
-          </div>
-          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-            <span>{t('checkout.summary.discounts_total')}</span>
-            <span>
-              <Price
-                value={preOrder?.basket?.total_discount_amount}
-                useNegative
-              />
-            </span>
-          </div>
-          <div className="flex items-center justify-between w-full text-black-800 px-4 sm:px-5 text-lg border-t border-solid border-gray-400 py-2 mt-3 sm:text-xl sm:py-3">
-            <span className="font-light">{t('checkout.summary.total')}</span>
-            <span className="min-w-max pl-4">
-              <Price value={preOrder?.unpaid_amount} />
-            </span>
-          </div>
-        </div>
-      </div>
-      {currentStep === CheckoutStep.Payment && (
-        <div className="flex flex-col w-full border border-solid border-gray-400 mt-4">
-          <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-3 sm:min-h-15">
-            <div className="text-black-800 text-xl font-light sm:text-2xl">
-              {t('checkout.summary.delivery_info')}
-            </div>
-            <div
-              className="text-xs text-black-800 italic cursor-pointer underline transition-all hover:text-secondary"
-              onClick={() => dispatch(setCurrentStep(CheckoutStep.Shipping))}
-            >
-              {t('checkout.summary.change')}
-            </div>
-          </div>
-          <div className="flex flex-col py-4 px-4 text-black-800 text-xs sm:px-5">
-            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
-              <Trans
-                i18nKey="checkout.summary.info"
-                components={{
-                  ShippingAddress: (
-                    <Text title={preOrder.shipping_address?.title} />
-                  ),
-                  ShippingOption: (
-                    <Text title={preOrder.shipping_option?.name} />
-                  )
-                }}
-              />
-            </div>
-            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
-              {preOrder.shipping_address?.line}{' '}
-              {preOrder.shipping_address?.postcode}{' '}
-              {preOrder.shipping_address?.district && (
-                <>{preOrder.shipping_address?.district.name} / </>
-              )}
-              {preOrder.shipping_address?.township && (
-                <>{preOrder.shipping_address?.township.name} / </>
-              )}
-              {preOrder.shipping_address?.city?.name}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

package/app-template/src/views/coupon-item/index.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-export interface CouponItem {
-  mainTitle: string;
-  subTitles: Array<string>;
-  data?: Array<string | number | object>;
-  values: Array<string>;
-  emptyText: string;
-  offerType: string;
-}
-
-export const CouponItem = ({
-  mainTitle,
-  subTitles,
-  data,
-  offerType,
-  values,
-  emptyText
-}: CouponItem) => {
-  const filteredData = data?.filter(
-    (coupon) => coupon['offer_type'].value === offerType
-  );
-  const dateText = 'date';
-
-  return (
-    <div className="mb-6">
-      <h2 className="text-xl mb-5">{mainTitle}</h2>
-      <div>
-        <table className="text-xs w-full">
-          <thead className="bg-gray-200">
-            <tr className="hidden w-full text-left lg:table-row">
-              {subTitles.map((subTitle, index) => (
-                <th key={index} className="p-3 font-medium">
-                  {subTitle}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {filteredData?.length > 0 ? (
-              filteredData.map((coupon, i) => (
-                <tr
-                  key={i}
-                  className="flex flex-col lg:table-row odd:bg-gray-50 even:bg-gray-25"
-                >
-                  {subTitles.map((subTitle, index) => (
-                    <td
-                      key={index}
-                      className="p-3 table-row before:w-1/2 before:content-[attr(data-label)] before:float-left lg:before:content-[''] lg:table-cell"
-                      data-label={subTitle}
-                    >
-                      <span>
-                        {values[index] == 'amount'
-                          ? coupon[values[index]] +
-                            ' ' +
-                            coupon['currency'].label
-                          : values[index].includes(dateText)
-                          ? coupon[values[index]].slice(0, 10)
-                          : coupon[values[index]]}
-                      </span>
-                    </td>
-                  ))}
-                </tr>
-              ))
-            ) : (
-              <tr className="flex flex-col bg-gray-50 lg:table-row">
-                <td
-                  colSpan={4}
-                  className="px-2 py-3 text-center text-secondary"
-                >
-                  {emptyText}
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};

package/app-template/src/views/find-in-store/index.tsx

@@ -1,183 +0,0 @@
-'use client';
-
-import React, { useMemo } from 'react';
-import {
-  Accordion,
-  Button,
-  LoaderSpinner,
-  Select,
-  Link
-} from '@theme/components';
-import { useForm, SubmitHandler } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
-import { useGetRetailStoreQuery } from '@akinon/next/data/client/address';
-import { useGetRetailStoreStockMutation } from '@akinon/next/data/client/product';
-import { FindInStoreFormType } from '@akinon/next/types';
-import { useLocalization } from '@akinon/next/hooks';
-import { commonProductAttributes } from '@theme/settings';
-
-const findInStoreFormSchema = (t) =>
-  yup.object().shape({
-    city_id: yup.string().required(t('product.find_in_store.required')),
-    size: yup
-      .string()
-      .nullable()
-      .notRequired()
-      .when({
-        is: (value) => value === '',
-        then: yup.string().required(t('product.find_in_store.required'))
-      })
-  });
-
-export const FindInStore = ({ productPk, productName, variants }) => {
-  const { t } = useLocalization();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors }
-  } = useForm({
-    resolver: yupResolver(findInStoreFormSchema(t))
-  });
-  const sizeKey = commonProductAttributes.find(
-    (item) => item.translationKey === 'size'
-  ).key;
-
-  const { data: retailStore } = useGetRetailStoreQuery();
-  const [
-    getRetailStock,
-    { data: response, isLoading: stockLoading, isSuccess: stockSuccess }
-  ] = useGetRetailStoreStockMutation();
-
-  const retailStoreOptions = useMemo(() => {
-    if (retailStore) {
-      const options = [
-        { label: t('product.find_in_store.select_an_option'), value: '' }
-      ];
-      options.push(
-        ...retailStore.results.map((item) => ({
-          label: item.name,
-          value: item.pk
-        }))
-      );
-      return options;
-    }
-    return [];
-  }, [retailStore]);
-
-  const sizeOptions = useMemo(() => {
-    if (variants) {
-      const options = [
-        { label: t('product.find_in_store.select_an_option'), value: '' }
-      ];
-      variants
-        .filter((item) => item.attribute_name.toLowerCase() === sizeKey)
-        .map((item) => {
-          item.options.map((item) => {
-            return options.push({ label: item.label, value: item.value });
-          });
-        });
-      return options;
-    }
-    return [];
-  }, [variants]);
-
-  const createStockStatus = (stock) => {
-    const status = {
-      label: t('product.find_in_store.available')
-    };
-
-    if (stock == 0) {
-      status.label = t('product.find_in_store.out_of_stock');
-    } else if (stock < 5) {
-      status.label = t('product.find_in_store.limited_stock');
-    }
-
-    return status.label;
-  };
-
-  const createStoreHours = (hours) => {
-    const start = hours[0].slice(0, 5);
-    const end = hours[1].slice(0, 5);
-
-    if (hours) {
-      return `${start} - ${end}`;
-    }
-
-    return t('product.find_in_store.unknown');
-  };
-
-  const onSubmit: SubmitHandler<FindInStoreFormType> = async (data) => {
-    const queryString = new URLSearchParams(data).toString();
-
-    getRetailStock({ productPk, queryString });
-  };
-
-  return (
-    <div className="">
-      <div className="my-4">{productName}</div>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="flex gap-4 flex-col border-b border-gray-150 lg:pb-7 lg:flex-row">
-          <div className="flex flex-col lg:flex-row gap-4">
-            <Select
-              className="w-full"
-              options={retailStoreOptions}
-              {...register('city_id')}
-              error={errors.city_id}
-            />
-            {sizeOptions.length > 1 && (
-              <Select
-                className="w-full"
-                options={sizeOptions}
-                {...register('size')}
-                error={errors.size}
-              />
-            )}
-          </div>
-          <Button className="w-full lg:w-4/10" type="submit">
-            {t('product.find_in_store.submit')}
-          </Button>
-        </div>
-      </form>
-      <div className="text-sm text-gray-850 text-start mt-4">
-        {t('product.find_in_store.description')}
-      </div>
-      <div className="mt-4">
-        {stockLoading && <LoaderSpinner />}
-
-        {stockSuccess &&
-          response.length > 0 &&
-          response.map((store, index) => {
-            return (
-              <Accordion
-                title={store.name}
-                subTitle={createStockStatus(store.stock)}
-                key={index}
-              >
-                <div className="flex flex-col items-center lg:flex-1">
-                  <div className="mb-2">{store.address}</div>
-                  <div>{t('product.find_in_store.working_hours')}:</div>
-                  <div className="mb-3">
-                    {createStoreHours(store.store_hours[0])}
-                  </div>
-                  <Link
-                    href={`https://maps.google.com/?q=${store.latitude},${store.longitude}`}
-                  >
-                    <a target="_blank">
-                      <Button>{t('product.find_in_store.directions')}</Button>
-                    </a>
-                  </Link>
-                </div>
-              </Accordion>
-            );
-          })}
-
-        {stockSuccess && response.length < 1 && (
-          <div className="text-center my-4">
-            {t('product.find_in_store.store_not_found')}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/app-template/src/views/footer.tsx

@@ -1,21 +0,0 @@
-import 'server-only';
-
-import FooterCopyright from '@theme/widgets/footer-copyright';
-import FooterInfo from '@theme/widgets/footer-info';
-import FooterMenu from '@theme/widgets/footer-menu';
-import FooterSocial from '@theme/widgets/footer-social';
-import FooterSubscription from '@theme/widgets/footer-subscription';
-
-export default function Footer() {
-  return (
-    <div className="lg:pt-16 lg:border-t lg:border-gray">
-      <div className="container px-4 pb-0 mx-auto md:flex md:flex-wrap lg:pb-16 lg:px-0">
-        <FooterInfo />
-        <FooterMenu />
-        <FooterSubscription />
-      </div>
-      <FooterSocial />
-      <FooterCopyright />
-    </div>
-  );
-}

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

@@ -1,130 +0,0 @@
-'use client';
-
-import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { checkoutApi } from '@akinon/next/data/client/checkout';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
-import { GuestLoginFormParams } from '@akinon/next/types';
-import clsx from 'clsx';
-
-import { Button, Checkbox, Input } from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
-
-const GuestloginFormSchema = (t) =>
-  yup.object().shape({
-    user_email: yup
-      .string()
-      .email(t('checkout.auth.form.login.error.email_control'))
-      .required(t('checkout.auth.form.login.error.required')),
-    phone_number: yup
-      .string()
-      .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
-      .length(11, t('checkout.auth.form.login.error.phone_control'))
-      .required(t('checkout.auth.form.login.error.required')),
-    sms_allowed: yup
-      .boolean()
-      .oneOf([true], t('checkout.auth.form.login.error.required')),
-    kvkk_confirm: yup
-      .boolean()
-      .oneOf([true], t('checkout.auth.form.login.error.required'))
-  });
-
-const GuestLogin = () => {
-  const { t } = useLocalization();
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors },
-    setError
-  } = useForm<GuestLoginFormParams>({
-    resolver: yupResolver(GuestloginFormSchema(t))
-  });
-  const { user_phone_format } = useAppSelector((state) => state.config);
-  const dispatch = useAppDispatch();
-
-  const onSubmit: SubmitHandler<GuestLoginFormParams> = async (data) => {
-    try {
-      const response = await dispatch(
-        checkoutApi.endpoints.guestLogin.initiate(data)
-      ).unwrap();
-
-      Object.keys(response?.errors || {}).forEach((key) => {
-        setError(key as keyof GuestLoginFormParams, {
-          type: 'custom',
-          message: response?.errors[key]?.join(', ')
-        });
-      });
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div className={clsx(errors.user_email ? 'mb-8' : 'mb-4')}>
-        <Input
-          labelStyle="floating"
-          label={t('checkout.auth.form.login.email.placeholder')}
-          name="email"
-          className="h-14"
-          {...register('user_email')}
-          error={errors.user_email}
-          data-testid="guest-email"
-          required
-        />
-      </div>
-
-      <div className={clsx(errors.phone_number ? 'mb-8' : 'mb-4')}>
-        <Input
-          labelStyle="floating"
-          label={t('checkout.auth.form.login.phone.placeholder')}
-          className="h-14"
-          name="phone_number"
-          type="tel"
-          format={user_phone_format.replace(/\9/g, '#')}
-          mask="_"
-          control={control}
-          {...register('phone_number')}
-          error={errors.phone_number}
-          data-testid="guest-phone"
-          required
-        />
-      </div>
-
-      <Button
-        type="submit"
-        className="w-full h-12 uppercase text-xs font-semibold mb-4"
-        data-testid="guest-submit"
-      >
-        {t('checkout.auth.form.login.button')}
-      </Button>
-
-      <div className="text-sm text-black-400 md:text-xs">
-        <p className="mb-4">{t('checkout.auth.form.login.agreement.label')}</p>
-        <Checkbox
-          name="sms_allowed"
-          className={clsx('underline', errors.sms_allowed ? 'mb-8' : 'mb-4')}
-          {...register('sms_allowed')}
-          error={errors.sms_allowed}
-          data-testid="guest-sms"
-        >
-          {t('checkout.auth.form.login.agreement.terms_conditions')}
-        </Checkbox>
-
-        <Checkbox
-          name="confirm"
-          className={clsx('underline', errors.kvkk_confirm ? 'mb-8' : 'mb-4')}
-          {...register('kvkk_confirm')}
-          error={errors.kvkk_confirm}
-          data-testid="guest-kvkk"
-        >
-          {t('checkout.auth.form.login.agreement.privacy_policy')}
-        </Checkbox>
-      </div>
-    </form>
-  );
-};
-
-export default GuestLogin;