@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/views/account/favourite-products/favourite-products-list.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { useGetFavoritesQuery } from '@akinon/next/data/client/wishlist';
+
+import { FavoriteItem } from '@theme/views/account';
+import { LoaderSpinner, Pagination } from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
+import { useRouter } from '@akinon/next/hooks';
+
+const FavoriteProductsList = () => {
+  const { t } = useLocalization();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const {
+    data: favorites,
+    isLoading,
+    isFetching,
+    isError
+  } = useGetFavoritesQuery({
+    page: Number(searchParams.get('page')),
+    limit: Number(searchParams.get('limit'))
+  });
+
+  if (isError) {
+    const newUrl = new URL(window.location.href);
+
+    newUrl.searchParams.delete('page');
+    router.push(newUrl.pathname + newUrl.search, undefined);
+  }
+
+  if (isLoading || isFetching) {
+    return <LoaderSpinner />; // TODO: Fix loader spinner position
+  }
+
+  return (
+    <>
+      {favorites?.count > 0 ? (
+        <>
+          <div className="flex flex-wrap mt-6 sm:-mx-3">
+            {favorites.results.map((item, index) => (
+              <FavoriteItem key={item.pk} item={item} index={index} />
+            ))}
+          </div>
+
+          <Pagination
+            numberOfPages={Math.ceil(favorites.count / 12)}
+            total={favorites.count}
+            containerClassName="justify-end"
+            currentPage={Number(searchParams.get('page')) || 1}
+          />
+        </>
+      ) : (
+        <p
+          className="text-center w-full mt-4"
+          data-testid="favorites-list-empty"
+        >
+          {t('account.my_wishlist.empty')}
+        </p>
+      )}
+    </>
+  );
+};
+
+export default FavoriteProductsList;

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

@@ -0,0 +1,4 @@
+export * from './account-menu';
+export * from './address-card';
+export * from './address-form';
+export * from './favorite-item';

package/app-template/src/views/account/order.tsx

@@ -0,0 +1,89 @@
+import { useLocalization } from '@akinon/next/hooks';
+import React from 'react';
+import { Price, Link } from '@theme/components';
+import { Image } from '@akinon/next/components/image';
+import { getOrderStatus } from 'utils';
+
+export const Order = (props) => {
+  const { t } = useLocalization();
+  const date = new Date(props.created_date)
+    .toJSON()
+    .slice(0, 10)
+    .split('-')
+    .reverse()
+    .join(' ');
+
+  const orderStatus = getOrderStatus(props.status.value.toString(), t);
+
+  return (
+    <div className="border border-gray px-5 py-4 text-sm mb-4 last:mb-0">
+      <div className="flex flex-wrap">
+        <div className="flex items-center flex-1 order-1 md:order-none">
+          <div className="flex flex-col">
+            <div className="font-semibold uppercase">
+              {t('account.my_orders.order.order_placed')}
+            </div>
+            <div>{date}</div>
+          </div>
+
+          <div className="flex flex-col ml-10 md:ml-14">
+            <div className="font-semibold uppercase">
+              {t('account.my_orders.order.total')}
+            </div>
+            <div>
+              <Price
+                className="font-normal min-w-max"
+                value={props.amount}
+                data-testid="account-orders-amount"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-1 flex-col md:items-end order-4 md:order-none">
+          <div className="font-semibold uppercase">
+            <span>{t('account.my_orders.order.order')}</span> #
+            <span data-testid="account-orders-id">{props.number}</span>
+          </div>
+
+          <div
+            className="text-secondary underline"
+            data-testid={`account-orders-detail-${props.number}`}
+          >
+            <Link href={`/account/orders/${props.id}`}>
+              {t('account.my_orders.order.order_detail')}
+            </Link>
+          </div>
+        </div>
+
+        <div className="w-full flex flex-col justify-between mt-6 mb-2 order-3 md:items-center md:flex-row md:order-none md:gap-20 lg:gap-40">
+          <ul className="flex flex-wrap gap-3.5 mb-6 items-center md:mb-0">
+            {props.orderitem_set.slice(0, 3).map((item, index) => (
+              // TODO: Static image will change (TR)
+              <li className="flex-shrink-0" key={index}>
+                <Image
+                  src={item.product.image ? item.product.image : '/noimage.jpg'}
+                  alt={item.product.name}
+                  width={64}
+                  height={96}
+                />
+              </li>
+            ))}
+            {props.orderitem_set.length > 3 && (
+              <div>+ {props.orderitem_set.length - 3}</div>
+            )}
+          </ul>
+
+          <span className={orderStatus.className}>{orderStatus.label}</span>
+        </div>
+
+        <div
+          className="order-2 flex items-end md:order-none"
+          data-testid="account-orders-count"
+        >
+          {props.orderitem_set.length} {t('account.my_orders.order.items')}
+        </div>
+      </div>
+    </div>
+  );
+};

package/app-template/src/views/account/orders/order-cancellation-item.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { Checkbox, Link } from '@theme/components';
+import { Image } from '@akinon/next/components/image';
+
+export const OrderCancellationItem = ({
+  item,
+  value,
+  onChange,
+  selectOption
+}) => {
+  const { t } = useLocalization();
+  const checkboxStatus =
+    (item.is_cancellable || item.is_refundable) &&
+    !item.active_cancellation_request;
+
+  const handleClick = () => {
+    const checkItem = (element) => element.order_item === item.id;
+    const hasCancelItem = value.some(checkItem);
+
+    if (hasCancelItem) {
+      return onChange(value.filter((order) => order.order_item !== item.id));
+    } else {
+      onChange([
+        ...value,
+        {
+          cancellation_type: item.is_refundable ? 'refund' : 'cancel',
+          order_item: item.id,
+          reason: '1',
+          description: ''
+        }
+      ]);
+    }
+  };
+
+  return (
+    <div className="flex flex-wrap justify-between border-gray border-b mb-4 pb-3">
+      <div className="flex gap-3 mb-5 lg:mb-0">
+        {checkboxStatus && (
+          // TODO: Static image will change (TR)
+          <Checkbox
+            className="m-auto"
+            data-testid="account-orders-return-checkbox"
+            onClick={handleClick}
+          />
+        )}
+        <div className="flex-shrink-0">
+          <Link href={item.product.absolute_url}>
+            <Image
+              src={item.product.image ? item.product.image : '/noimage.jpg'}
+              alt={item.product.name}
+              width={112}
+              height={160}
+            />
+          </Link>
+        </div>
+        <div className="flex flex-col justify-between">
+          <div className="text-sm">
+            <Link href={item.product.absolute_url}>{item.product.name}</Link>
+          </div>
+          <div className="text-gray-900 text-xs">
+            {item.product.attributes.renk && (
+              <div>
+                <span>{t('account.my_orders.detail.color')}</span>:{' '}
+                {item.product.attributes.renk}
+              </div>
+            )}
+
+            {item.product.attributes.beden && (
+              <div>
+                <span>{t('account.my_orders.detail.size')}</span>:
+                {item.product.attributes.beden}
+              </div>
+            )}
+            <div>
+              <span>{t('account.my_orders.detail.code')}</span>:{' '}
+              {item.product.base_code}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-wrap justify-between w-full items-start lg:items-center lg:w-auto">
+        <div className="w-full flex flex-col lg:items-center lg:flex-row">
+          {item.active_cancellation_request?.easy_return?.code && (
+            <div className="flex items-center">
+              <div>
+                <span>{t('account.my_orders.return.return_code')}</span>:{' '}
+              </div>
+              <div>{item.active_cancellation_request.easy_return.code}</div>
+            </div>
+          )}
+
+          {selectOption}
+        </div>
+      </div>
+    </div>
+  );
+};

package/app-template/src/views/account/orders/order-detail-header.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useLocalization } from '@akinon/next/hooks';
+
+export interface Props {
+  title: string;
+  order: {
+    number: string;
+    created_date: string;
+  };
+  children?: React.ReactNode;
+}
+
+export const OrderDetailHeader = ({ title, order, children }: Props) => {
+  const { t } = useLocalization();
+
+  const orderDate = new Date(order.created_date)
+    .toJSON()
+    .slice(0, 10)
+    .split('-')
+    .reverse()
+    .join(' ');
+
+  return (
+    <div className="bg-gray-150 flex flex-col items-center justify-center p-6 w-full mb-8 md:flex-row">
+      <div className="flex flex-col items-center text-center gap-2">
+        <div className="text-3xl mb-2">{title}</div>
+        <div>
+          <span>{t('account.my_orders.detail.order_number')}</span>:{' '}
+          <span data-testid="account-orders-return-order-id">
+            {order.number}
+          </span>
+        </div>
+
+        {children}
+      </div>
+    </div>
+  );
+};

package/app-template/src/views/anonymous-tracking/index.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { Button, Input, LoaderSpinner } from '@theme/components';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
+import { useGetAnonymousTrackingMutation } from '@akinon/next/data/client/user';
+import { usePathname } from 'next/navigation';
+import clsx from 'clsx';
+
+type AnonymousTrackingFormType = {
+  email: string;
+  number: string;
+};
+
+export const AnonymousTracking = ({ setOrder }) => {
+  const { t } = useLocalization();
+  const pathname = usePathname();
+  const router = useRouter();
+  const [getAnonymousTrackingData, { isLoading }] =
+    useGetAnonymousTrackingMutation();
+
+  const loginFormSchema = (t) =>
+    yup.object().shape({
+      email: yup
+        .string()
+        .email(t('account.anonymous_order.error.email_valid'))
+        .required(t('account.anonymous_order.error.required')),
+      number: yup
+        .number()
+        .transform((value) => (isNaN(value) ? undefined : value))
+        .required(t('account.anonymous_order.error.required'))
+    });
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<AnonymousTrackingFormType>({
+    resolver: yupResolver(loginFormSchema(t))
+  });
+
+  const onSubmit: SubmitHandler<AnonymousTrackingFormType> = (data) => {
+    getAnonymousTrackingData(data)
+      .unwrap()
+      .then((response) => {
+        if (response) {
+          setOrder(response?.[0]);
+        }
+      })
+      .catch(() => {
+        setOrder(null);
+      })
+      .finally(() => {
+        router.push(pathname + '?formSuccess=true');
+      });
+  };
+
+  return (
+    <section className="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('account.anonymous_order.form.title')}
+      </h2>
+      <form method="POST" onSubmit={handleSubmit(onSubmit)}>
+        <div className="mb-4">
+          <Input
+            labelStyle="floating"
+            label={t('account.anonymous_order.form.order_id')}
+            name="number"
+            className="h-14"
+            data-testid="order-id"
+            required
+            {...register('number')}
+            error={errors.number}
+          />
+        </div>
+
+        <div className="mb-4">
+          <Input
+            labelStyle="floating"
+            label={t('account.anonymous_order.form.email')}
+            name="email"
+            className="h-14"
+            data-testid="anonymous-tracking-email"
+            required
+            {...register('email')}
+            error={errors.email}
+          />
+        </div>
+
+        <Button
+          className={clsx(
+            'w-full h-12 uppercase text-xs font-semibold',
+            isLoading && 'bg-white pointer-events-none'
+          )}
+          type="submit"
+          data-testid="anonymous-tracking-submit"
+        >
+          {isLoading ? (
+            <LoaderSpinner className="w-6 h-6" />
+          ) : (
+            t('account.anonymous_order.form.submit_button')
+          )}
+        </Button>
+      </form>
+    </section>
+  );
+};