@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/views/checkout/steps/shipping/shipping-options.tsx

@@ -0,0 +1,72 @@
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
+import { RootState } from '@theme/redux/store';
+import { useSetShippingOptionMutation } from '@akinon/next/data/client/checkout';
+import { Price, Button, Radio } from '@theme/components';
+import { CheckoutStep } from '@akinon/next/types';
+import { useLocalization } from '@akinon/next/hooks';
+
+const ShippingOptions = () => {
+  const { t } = useLocalization();
+  const { steps, shippingOptions, preOrder, addressList } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+  const { shipping_option, shipping_address } = preOrder ?? {};
+  const [setShippingOption] = useSetShippingOptionMutation();
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="w-full lg:w-2/5">
+      <div className="border-b border-gray-400 px-8 py-4">
+        <h2 className="text-2xl">{t('checkout.address.shipping.title')}</h2>
+      </div>
+      {addressList.length < 1 ? (
+        <div className="py-4 px-8">
+          <p className="text-xs">
+            {t('checkout.address.shipping.select_address_to_continue')}
+          </p>
+        </div>
+      ) : (
+        <div className="py-4 px-6">
+          <p className="text-xs border-gray-400 pb-4">
+            {t('checkout.address.shipping.chosen_address')}:{' '}
+            {shipping_address?.city.name}
+          </p>
+          {shippingOptions.map((option) => (
+            <div
+              key={option.pk}
+              className="py-4 border-t border-gray-400 flex justify-between"
+            >
+              <Radio
+                name="shipping"
+                checked={option.pk === shipping_option?.pk}
+                onChange={() => {
+                  setShippingOption(option.pk);
+                }}
+                onClick={() => {
+                  setShippingOption(option?.pk);
+                }}
+                data-testid={`checkout-shipping-option-${option.pk}`}
+              >
+                {option.name}
+              </Radio>
+              <span className="text-xs">
+                <Price value={option.shipping_amount} />
+              </span>
+            </div>
+          ))}
+          <Button
+            className="mt-2 w-full"
+            disabled={!steps.shipping.completed}
+            onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
+            data-testid="checkout-shipping-save"
+          >
+            {t('checkout.address.shipping.button')}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ShippingOptions;

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

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

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

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

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

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