@akinon/projectzero 1.32.0 → 1.33.0

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

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

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

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

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