@akinon/projectzero 1.32.0-rc.2 → 1.32.0

package/app-template/src/app/[commerce]/[locale]/[currency]/account/my-quotations/page.tsx

@@ -1,7 +0,0 @@
-'use client';
-
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-
-export default function MyQuotationsPage() {
-  return <PluginModule component={Component.MyQuotationsB2B} />;
-}

package/app-template/src/app/[commerce]/[locale]/[currency]/account/orders/[id]/cancellation/page.tsx

@@ -1,255 +0,0 @@
-'use client';
-
-import { useForm, SubmitHandler, Controller } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
-import {
-  useCancelOrderMutation,
-  useGetOrderQuery,
-  useGetCancellationReasonsQuery
-} from '@akinon/next/data/client/account';
-import { AccountOrderCancellation } from '@akinon/next/types';
-import {
-  Button,
-  Checkbox,
-  Select,
-  Modal,
-  LoaderSpinner,
-  Link
-} from '@theme/components';
-import { useState } from 'react';
-import { OrderDetailHeader } from '@theme/views/account/orders/order-detail-header';
-import { OrderCancellationItem } from '@theme/views/account/orders/order-cancellation-item';
-import { useLocalization } from '@akinon/next/hooks';
-
-const accountOrderCancellationSchema = yup.object().shape({
-  return_policy: yup.boolean().oneOf([true], 'This field is required.')
-});
-
-const AccountOrderCancellation = ({ params }) => {
-  const { t } = useLocalization();
-  const {
-    register,
-    handleSubmit,
-    control,
-    watch,
-    getValues,
-    setValue,
-    formState: { errors }
-  } = useForm<AccountOrderCancellation>({
-    resolver: yupResolver(accountOrderCancellationSchema)
-  });
-  const { data: cancellationReasons, isSuccess: cancellationReasonsSuccess } =
-    useGetCancellationReasonsQuery();
-
-  const {
-    data: order,
-    isLoading,
-    isSuccess: orderSuccess
-  } = useGetOrderQuery(params.id);
-
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [responseMessage, setResponseMessage] = useState({
-    title: '',
-    content: ''
-  });
-  const watchAllFields = watch();
-  const cancelItemsLength = watchAllFields?.cancel_order_items?.length;
-  const [cancelOrder] = useCancelOrderMutation();
-
-  const modalHandleClick = () => {
-    setIsModalOpen(false);
-    location.reload();
-  };
-
-  const selectCondition = (item, isActive, cancellationType) => {
-    const cancelReasons = cancellationReasons.results
-      .filter((item) => item.cancellation_type === cancellationType)
-      .map((item) => {
-        return { label: item.subject, value: String(item.id) };
-      });
-
-    if (item.active_cancellation_request?.easy_return?.code) {
-      return (
-        <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>
-      );
-    } else if (item.is_cancelled) {
-      return <div>{t('account.my_orders.return.cancelled')}</div>;
-    } else if (
-      !item.is_cancelled &&
-      item.active_cancellation_request?.cancellation_type?.value == 'cancel'
-    ) {
-      return (
-        <div>{t('account.my_orders.return.cancellation_request_recieved')}</div>
-      );
-    } else if (item.is_cancellable || item.is_refundable) {
-      return (
-        <Select
-          className="w-full md:w-64"
-          options={cancelReasons}
-          disabled={isActive}
-          data-testid="account-orders-return-select"
-          onChange={(e) => handleChange(e, item)}
-        ></Select>
-      );
-    }
-  };
-
-  const handleChange = (e, item) => {
-    setValue('cancel_order_items', [
-      ...getValues('cancel_order_items').map((val) => {
-        if (val.order_item === item.id) {
-          val.reason = e.target.value;
-        }
-
-        return val;
-      })
-    ]);
-  };
-
-  const onSubmit: SubmitHandler<AccountOrderCancellation> = (orderItems) => {
-    cancelOrder({ id: order.number, ...orderItems })
-      .unwrap()
-      .then(() => {
-        setResponseMessage({
-          title: t('account.my_orders.return.success.title').toString(),
-          content: t('account.my_orders.return.success.description').toString()
-        });
-        setIsModalOpen(true);
-      })
-      .catch(() => {
-        setResponseMessage({
-          title: t('account.my_orders.return.error.title').toString(),
-          content: t('account.my_orders.return.error.description').toString()
-        });
-        setIsModalOpen(true);
-      });
-  };
-
-  if (isLoading) {
-    return <LoaderSpinner />;
-  }
-
-  if (orderSuccess && cancellationReasonsSuccess) {
-    return (
-      <>
-        <div className="flex-1">
-          <OrderDetailHeader
-            title={t('account.my_orders.return.title')}
-            order={order}
-          />
-
-          <div>
-            <div className="pb-2 mb-3 text-lg border-gray border-b">
-              <span data-testid="account-orders-return-order-count">
-                {order.orderitem_set.length}
-              </span>{' '}
-              <span>{t('account.my_orders.detail.products')}</span>
-            </div>
-
-            <form onSubmit={handleSubmit(onSubmit)}>
-              {order.orderitem_set.map((item, index: number) => (
-                <Controller
-                  defaultValue={[]}
-                  control={control}
-                  name="cancel_order_items"
-                  key={index}
-                  render={({ field: { onChange, value } }) => {
-                    const isActive = value.some((cancelItem) => {
-                      return cancelItem.order_item === item.id;
-                    });
-
-                    const cancellationType = item.is_refundable
-                      ? 'refund'
-                      : 'cancel';
-
-                    const selectOption = selectCondition(
-                      item,
-                      !isActive,
-                      cancellationType
-                    );
-
-                    return (
-                      <OrderCancellationItem
-                        item={item}
-                        onChange={onChange}
-                        value={value}
-                        selectOption={selectOption}
-                      />
-                    );
-                  }}
-                />
-              ))}
-              <div className="flex flex-wrap items-center justify-center mt-6 md:flex-nowrap md:justify-start">
-                <Link
-                  href={`/users/orders/${order.id}`}
-                  className="text-sm text-black-700 underline mt-5 order-2 md:order-none md:mt-0"
-                >
-                  {t('account.my_orders.return.contract_process_cancel')}
-                </Link>
-
-                <div className="flex flex-wrap items-center ml-auto md:flex-nowrap">
-                  <div>
-                    <label className="flex text-xs mb-3 md:mr-6 md:mb-0">
-                      <Checkbox
-                        {...register('return_policy')}
-                        data-testid="account-orders-return-agreement"
-                      />{' '}
-                      <span className="ml-2">
-                        {t('account.my_orders.return.agreement_label')}
-                      </span>
-                    </label>
-                    {errors.return_policy && (
-                      <div className="text-sm text-error">
-                        {errors.return_policy.message}
-                      </div>
-                    )}
-                  </div>
-
-                  <Button
-                    type="submit"
-                    className="w-full md:w-48 font-medium"
-                    data-testid="account-orders-return-submit"
-                    disabled={cancelItemsLength > 0 ? false : true}
-                  >
-                    {t('account.my_orders.return.return_selected_items')}
-                  </Button>
-                </div>
-              </div>
-            </form>
-          </div>
-        </div>
-        <Modal
-          portalId="cancellation-order-modal"
-          open={isModalOpen}
-          setOpen={setIsModalOpen}
-        >
-          <div className="flex flex-col items-center justify-center gap-12 p-6">
-            <h3
-              className="text-2xl font-bold"
-              data-testid="account-orders-return-response"
-            >
-              {responseMessage.title}
-            </h3>
-            <p className="text-center">{responseMessage.content}</p>
-            <Button
-              onClick={modalHandleClick}
-              appearance="outlined"
-              className="font-medium px-10 py-2"
-              data-testid="account-orders-return-response-button"
-            >
-              {t('account.my_orders.return.close_button')}
-            </Button>
-          </div>
-        </Modal>
-      </>
-    );
-  }
-};
-
-export default AccountOrderCancellation;

package/app-template/src/app/[commerce]/[locale]/[currency]/account/orders/[id]/layout.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return <div>{children}</div>;
-}

package/app-template/src/app/[commerce]/[locale]/[currency]/account/orders/[id]/page.tsx

@@ -1,309 +0,0 @@
-'use client';
-
-import { Price, Button, LoaderSpinner, Link } from '@theme/components';
-import { Image } from '@akinon/next/components/image';
-import clsx from 'clsx';
-import { SalesContractModal } from '@theme/views/sales-contract-modal';
-import { useGetOrderQuery } from '@akinon/next/data/client/account';
-import { useEffect, useState } from 'react';
-
-import { OrderDetailHeader } from '@theme/views/account/orders/order-detail-header';
-import { ROUTES } from '@theme/routes';
-import { useLocalization } from '@akinon/next/hooks';
-import settings from 'settings';
-import { getOrderStatus } from 'utils';
-
-const AccountOrderDetail = ({ params: { id } }) => {
-  const { locale, t } = useLocalization();
-
-  const localeValue = settings.localization.locales.find(
-    (locale_) => locale_.value === locale
-  ).apiValue;
-
-  const {
-    data: order,
-    isLoading,
-    isSuccess,
-    isFetching
-  } = useGetOrderQuery(id);
-  const [orderDate, setOrderDate] = useState('');
-
-  const groupedOrder = [];
-
-  if (order) {
-    const groupedData = order.orderitem_set.reduce((groups, item) => {
-      const { tracking_number } = item;
-      if (!groups[tracking_number]) {
-        groups[tracking_number] = [];
-      }
-      groups[tracking_number].push(item);
-      return groups;
-    }, {});
-
-    const result = Object.values(groupedData);
-
-    groupedOrder.push(...result);
-  }
-
-  useEffect(() => {
-    if (isSuccess) {
-      const shortDate = new Date(order.created_date).toLocaleDateString(
-        localeValue,
-        {
-          day: 'numeric',
-          month: 'long',
-          year: 'numeric'
-        }
-      );
-      setOrderDate(shortDate);
-    }
-  }, [order, isSuccess, localeValue]);
-
-  if (isLoading && isFetching) {
-    return <LoaderSpinner />;
-  }
-
-  return (
-    <div className="flex-1">
-      <OrderDetailHeader
-        title={t('account.my_orders.detail.title')}
-        order={order}
-      >
-        <div data-testid="account-orders-detail-date">
-          <span>{t('account.my_orders.detail.order_date')}</span>: {orderDate}
-        </div>
-
-        <div>
-          <span className="text-base font-bold">
-            {order?.orderitem_set.length}{' '}
-            {t('account.my_orders.detail.products')} {groupedOrder.length}{' '}
-            {t('account.my_orders.detail.packages')}
-          </span>
-        </div>
-
-        <div
-          data-testid="account-orders-detail-address"
-          className="break-words"
-        >
-          <span>{t('account.my_orders.detail.delivery_address')}</span>:{' '}
-          {order.shipping_address.line} {order.shipping_address.district.name}{' '}
-          {order.shipping_address.township.name}{' '}
-          {order.shipping_address.city.name}
-        </div>
-      </OrderDetailHeader>
-
-      <div>
-        {groupedOrder.map((group, i) => {
-          const orderStatus = getOrderStatus(
-            group[0].status.value.toString(),
-            t
-          );
-
-          return (
-            <div className="border border-gray" key={i}>
-              <div className="border-b border-gray py-6 px-4 flex flex-col justify-between lg:items-center lg:flex-row">
-                <div className="flex items-center justify-start gap-x-3">
-                  <span className="text-base font-semibold">
-                    {t('account.my_orders.detail.package_no')}: {i + 1}
-                  </span>
-
-                  <span
-                    className="text-xs"
-                    data-testid="account-orders-detail-count"
-                  >
-                    ({group.length}{' '}
-                    <span>{t('account.my_orders.detail.items')}</span>)
-                  </span>
-                </div>
-
-                <div className="flex justify-between items-center lg:gap-x-12">
-                  <div className="text-base">{orderStatus.label}</div>
-
-                  {group[0].tracking_number && group[0].tracking_url && (
-                    <Link href={group[0].tracking_url}>
-                      <Button className="px-7" appearance="filled">
-                        {t('account.my_orders.detail.track_shipment')}
-                      </Button>
-                    </Link>
-                  )}
-                </div>
-              </div>
-
-              <div className="px-4 lg:px-7">
-                {group.map((item, index) => {
-                  const itemStatus = getOrderStatus(
-                    item.status.value.toString(),
-                    t
-                  );
-
-                  return (
-                    <div
-                      className="flex flex-wrap justify-between py-6 border-b border-gray last:border-none"
-                      key={index}
-                    >
-                      <div className="flex gap-3 mb-5 lg:mb-0">
-                        <div className="flex-shrink-0">
-                          <Link
-                            className="block"
-                            href={item.product.absolute_url}
-                          >
-                            <Image
-                              src={
-                                item.product.image
-                                  ? item.product.image
-                                  : '/noimage.jpg'
-                              }
-                              alt={item.product.name}
-                              width={112}
-                              height={150}
-                            />
-                          </Link>
-                        </div>
-
-                        <div className="flex flex-col justify-between lg:max-w-48">
-                          <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.filterable_color && (
-                              <div>
-                                <span>
-                                  {t('account.my_orders.detail.color')}
-                                </span>
-                                : {item.product.attributes.filterable_color}
-                              </div>
-                            )}
-
-                            {item.product.attributes.size && (
-                              <div>
-                                <span>
-                                  {t('account.my_orders.detail.size')}
-                                </span>
-                                :{item.product.attributes.size}
-                              </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="flex flex-col lg:items-center lg:flex-row">
-                          <div
-                            className={clsx(
-                              'mb-4 lg:mb-0 font-medium',
-                              itemStatus.className
-                            )}
-                          >
-                            {itemStatus.label}
-                          </div>
-
-                          {(item.is_cancellable || item.is_refundable) &&
-                            order.is_cancellable &&
-                            item.status.value == '400' && (
-                              <div className="lg:ml-24">
-                                <Link
-                                  href={`${ROUTES.ACCOUNT_ORDERS}/${order.id}/cancellation`}
-                                >
-                                  <Button
-                                    className="px-4 uppercase font-bold h-7"
-                                    appearance="outlined"
-                                    data-testid="account-orders-return-items"
-                                  >
-                                    {t(
-                                      'account.my_orders.detail.return_this_item'
-                                    )}
-                                  </Button>
-                                </Link>
-                              </div>
-                            )}
-                        </div>
-
-                        <div className="flex flex-col justify-center items-end lg:ml-6 lg:min-w-[7rem]">
-                          {parseFloat(item.retail_price) >
-                            parseFloat(item.price) && (
-                            <Price
-                              className="font-normal line-through"
-                              value={item.retail_price}
-                            />
-                          )}
-
-                          <Price
-                            className={clsx('font-normal', {
-                              'text-secondary-600':
-                                parseFloat(item.retail_price) >
-                                parseFloat(item.price)
-                            })}
-                            value={item.price}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="flex flex-wrap items-center mt-6 lg:flex-nowrap justify-end">
-        <SalesContractModal data={order} />
-
-        <div className="w-full lg:w-72 lg:ms-auto">
-          <div className="flex justify-between text-sm text-black-700 mb-2">
-            <p>
-              <span>{t('account.my_orders.detail.subtotal')}</span> (
-              {order.orderitem_set.length}{' '}
-              <span>{t('account.my_orders.detail.items')}</span>)
-            </p>
-
-            <Price
-              className="font-normal min-w-max"
-              value={
-                parseFloat(order.amount_without_discount) -
-                parseFloat(order.shipping_amount)
-              }
-            />
-          </div>
-
-          {order.discountitem_set &&
-            order.discountitem_set.map((item, index) => (
-              <div
-                className="flex justify-between text-sm text-black-700 mb-2"
-                key={index}
-              >
-                <p>{item.name}</p>
-                <Price
-                  className="font-normal min-w-max"
-                  value={item.amount}
-                  useNegative
-                />
-              </div>
-            ))}
-
-          <div className="flex justify-between text-sm text-black-700 uppercase mt-6 pt-2 border-gray border-t">
-            <p>{t('account.my_orders.detail.total')}</p>
-
-            <Price
-              className="font-normal min-w-max"
-              data-testid="account-orders-detail-total"
-              value={
-                parseFloat(order.amount) - parseFloat(order.shipping_amount)
-              }
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AccountOrderDetail;