sme-pos-package 1.0.14 → 1.0.15

package/src/components/order-management/order-detail/information.tsx

@@ -1,96 +0,0 @@
-import StarIcon from "@assets/icons/star-icon";
-import useGetPointReward from "@hooks/order/use-get-point-reward";
-import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
-import { CartItemType } from "@store/states/cart.state";
-import { formatCurrency } from "@utils/functions";
-import { useMemo } from "react";
-import { OrderLineItem } from "./order-line";
-
-type TProps = {
-  orderDetailData: any;
-  cartItemsArr: CartItemType[];
-};
-
-const OrderDetailInformation = ({ orderDetailData, cartItemsArr }: TProps) => {
-  const orderState = useMemo(() => {
-    return orderDetailData?.state;
-  }, [orderDetailData]);
-
-  const amountTotal = useMemo(() => {
-    return orderDetailData?.amount_total;
-  }, [orderDetailData]);
-
-  const { pointReward } = useGetPointReward({
-    totalAmountWithoutTax: amountTotal,
-  });
-  const { taxAmount, totalAmount } = useOrderDetail();
-
-  return (
-    <div className="border-r border-stroke-disabled flex h-full flex-col overflow-auto w-full">
-      <div className="flex flex-col gap-4 flex-1 p-6 overflow-auto">
-        {cartItemsArr.length > 0 ? (
-          cartItemsArr?.map((item: CartItemType) => {
-            return <OrderLineItem item={item} key={item.lineId?.toString()} />;
-          })
-        ) : (
-          <div className="size-full flex items-center justify-center flex-col gap-3">
-            <img
-              src="/assets/images/empty-cart.svg"
-              alt=""
-              className="w-[280px] h-[168px] object-cover"
-            />
-
-            <p className="text-sm font-medium leading-5 tracking-[-0.12px] text-text-primary">
-              Đơn hàng không có sản phẩm nào
-            </p>
-          </div>
-        )}
-      </div>
-
-      <div className="border-t border-stroke-soft-200 relative">
-        {(orderState === "paid" || orderState === "invoiced") && (
-          <img
-            src="/assets/images/payment-success-label.png"
-            alt=""
-            draggable="false"
-            className="w-[157px] h-[134px] object-contain absolute bottom-[10px] left-[110px]"
-          />
-        )}
-
-        <div className="flex flex-col w-full">
-          <div className="flex w-full border-b h-[52px]">
-            <div className="border-r flex-[0.7] flex items-center justify-end">
-              <p className="text-sm font-medium leading-[18px] text-secondary tracking-[-0.3px] px-[10px]">
-                Điểm
-              </p>
-            </div>
-
-            <div className="flex-[0.3] flex items-center justify-end">
-              <div className="flex items-center gap-1 px-[10px]">
-                <StarIcon />
-                <p className="font-semibold leading-5 text-text-primary tracking-[-0.26px]">
-                  {pointReward}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex w-full border-b h-[52px]">
-            <div className="border-r flex-[0.7] flex items-center justify-end">
-              <p className="text-sm font-medium leading-[18px] text-secondary tracking-[-0.3px] px-[10px]">
-                Thành tiền (đã bao gồm VAT)
-              </p>
-            </div>
-            <div className="flex-[0.3] flex items-center justify-end">
-              <p className="font-semibold leading-5 text-primary px-[10px]">
-                {formatCurrency(taxAmount + totalAmount) || 0}đ
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default OrderDetailInformation;

package/src/components/order-management/order-detail/order-detail.tsx

@@ -1,84 +0,0 @@
-import { QUERY_KEYS } from "@constants/query.constant";
-import { useQueryParams } from "@hooks/common/use-query-params";
-import { useKitchen } from "@provider/pos-provider/kitchen-provider";
-import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
-import { useOrder } from "@provider/pos-provider/order-provider";
-import { CartItemType, useCartStore } from "@store/states/cart.state";
-import { arraysEqual } from "@utils/functions";
-import { useMemo } from "react";
-import { OrderDetailInformation, OrderDetailSummary } from ".";
-import Header from "./header";
-
-const OrderDetail = () => {
-  const { displayDataQueryResult } = useKitchen();
-
-  const { items, customer } = useOrderDetail();
-  const customerName = customer?.name;
-  const { orderDetailById, onGetCurrentUser } = useOrder();
-  const { cartItems } = useCartStore();
-  const { getQuery, removeParam, updateMultipleQuery } = useQueryParams();
-
-  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
-
-  const orderedLine = useMemo(() => {
-    const orders = displayDataQueryResult?.data?.orders
-      ?.filter((item: any) => item?.pos_order_id === Number(orderId))
-      ?.map((item: any) => item.orderlines)
-      ?.flat()
-      ?.reduce((acc: any, item: any) => {
-        if (!acc[item.product_id]) {
-          acc[item.product_id] = { ...item };
-        } else {
-          acc[item.product_id].product_quantity += item.product_quantity;
-          acc[item.product_id].product_cancelled += item.product_cancelled;
-        }
-        return acc;
-      }, {});
-    return orders;
-  }, [displayDataQueryResult, orderId]);
-  const cartItemsArr = useMemo(() => {
-    const items = Object.values(cartItems);
-    return items?.map((item: CartItemType) => {
-      const orderLine = orderedLine?.[item.product.id];
-      return {
-        ...item,
-        ordered:
-          orderLine?.product_id == item.product.id &&
-          orderLine.product_quantity - orderLine.product_cancelled ==
-            item.qty &&
-          arraysEqual(
-            orderLine?.attribute_ids ?? [],
-            item?.product?.attributeValueIds ?? []
-          ),
-        orderedNumber:
-          (orderLine?.product_quantity ?? 0) -
-          (orderLine?.product_cancelled ?? 0),
-      };
-    });
-  }, [cartItems, orderedLine]);
-  return (
-    orderDetailById && (
-      <div className="bg-white size-full flex flex-col h-screen">
-        <div className="w-full border-b border-stroke-disabled">
-          <Header orderDetailData={orderDetailById} />
-        </div>
-
-        <div className="flex items-start justify-center flex-1 overflow-y-auto w-full">
-          <OrderDetailInformation
-            cartItemsArr={cartItemsArr}
-            orderDetailData={orderDetailById}
-          />
-
-          <OrderDetailSummary
-            orderDetailData={orderDetailById}
-            customerName={customerName}
-            orderLinesData={items}
-            onGetCurrentUser={onGetCurrentUser}
-          />
-        </div>
-      </div>
-    )
-  );
-};
-
-export default OrderDetail;

package/src/components/order-management/order-detail/order-line.tsx

@@ -1,56 +0,0 @@
-import { CartItemType } from "@store/states/cart.state";
-import { formatCurrency } from "@utils/functions";
-import { useMemo } from "react";
-
-export const OrderLineItem = ({ item }: { item: CartItemType }) => {
-  const attributeValue = useMemo(() => {
-    const pickAttributeValue = item?.product?.pickAttributeValue;
-    return pickAttributeValue?.filter((item) => item.value_string?.length > 0);
-  }, [item?.product?.pickAttributeValue]);
-
-  return (
-    <div
-      key={item.lineId?.toString()}
-      className="flex items-start justify-between gap-2"
-    >
-      <div className="flex items-start gap-4">
-        <img
-          src={item.product.image_128}
-          alt="product image"
-          className="w-20 h-20 object-cover rounded-lg border-[0.5px] border-stroke-disabled"
-        />
-
-        <div className="flex flex-col gap-[10px] justify-start">
-          <p className="font-medium leading-6 text-text-primary tracking-[-0.24px]">
-            {item.product.name}
-          </p>
-
-          {attributeValue &&
-            attributeValue?.length > 0 &&
-            attributeValue.map((item: any) => (
-              <p className="text-xs pt-2 flex gap-1 items-center">
-                <span className="text-tertiary font-semibold">
-                  {item?.name}:{" "}
-                </span>
-                <span className="font-medium">
-                  {item?.value_string
-                    ?.map((item: any) => item?.name)
-                    .join(", ")}
-                </span>
-              </p>
-            ))}
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-[10px]">
-        <p className="text-lg font-semibold leading-[26px] text-primary">
-          {formatCurrency(item.product.lst_price)}đ
-        </p>
-
-        <p className="text-sm text-end font-medium leading-[18px] text-text-primary">
-          x{item.qty}
-        </p>
-      </div>
-    </div>
-  );
-};

package/src/components/order-management/order-detail/summary.tsx

@@ -1,221 +0,0 @@
-import ButtonAction from "@components/common/button-action";
-import { ORDER_STATE } from "@constants/order-state";
-import { QUERY_KEYS } from "@constants/query.constant";
-import POSPath from "@constants/routes.constants";
-import useGetBillInformation from "@hooks/bill/use-get-bill-information";
-import { useQueryParams } from "@hooks/common/use-query-params";
-import { usePosAppProvider } from "@provider/app-provider";
-import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
-import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
-import { usePaymentStore } from "@store/states/payment.state";
-import { OrderDetailItemType } from "@type/index";
-import { add7Hours, onFindTable } from "@utils/functions";
-import moment from "moment";
-import { useEffect, useMemo, useState } from "react";
-import { createSearchParams, useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
-
-type TProps = {
-  orderDetailData: any;
-  customerName: string;
-  orderLinesData: OrderDetailItemType[];
-  onGetCurrentUser: ({ userId }: { userId: number }) => Promise<any>;
-};
-
-const commonKeys = [
-  QUERY_KEYS.POS_ID,
-  QUERY_KEYS.SESSION_ID,
-  QUERY_KEYS.ORDER_ID,
-  QUERY_KEYS.TABLE_ID,
-  QUERY_KEYS.FLOOR,
-];
-
-const OrderDetailSummary = ({
-  orderDetailData,
-  customerName,
-  orderLinesData,
-  onGetCurrentUser,
-}: TProps) => {
-  const [cashierName, setCashierName] = useState<string>("");
-
-  const navigate = useNavigate();
-  const { formatQuery } = useQueryParams();
-  const { company, userProfile } = usePosAppProvider();
-  const { onCreateEInvoice, isEInvoiceCreating } = useOrderDetail();
-  const { setShowPayment } = usePaymentStore();
-  const { getData, isModePosRestaurant } = useSale();
-
-  const { brandLogo, addressFormat, paymentMethod, amountTotalWithoutTax } =
-    useGetBillInformation();
-
-  const isOrderCanPrint = useMemo(() => {
-    return ![ORDER_STATE.NEW].includes(orderDetailData?.state);
-  }, [orderDetailData]);
-
-  const isInPaidOrder = useMemo(() => {
-    return orderDetailData?.state === ORDER_STATE.IN_PAID;
-  }, [orderDetailData]);
-
-  const isOrderCanExportEInvoice = useMemo(() => {
-    return orderDetailData?.state === ORDER_STATE.PAID;
-  }, [orderDetailData]);
-
-  const floors = getData(LoadDataModel.RESTAURANT_FLOOR);
-  const tables = getData(LoadDataModel.RESTAURANT_TABLE);
-
-  const onAddDish = () => {
-    navigate({
-      pathname: POSPath.MENUS,
-      search: formatQuery(commonKeys).toString(),
-    });
-  };
-
-  const handlePrintBillByText = async () => {
-    return toast.info("Tính năng không hỗ trợ trên website");
-  };
-
-  const onPayment = () => {
-    const tableMatched = tables?.find(
-      (table: any) => table.id === orderDetailData?.table_id
-    );
-    const floorMatched = floors?.find(
-      (floor: any) => floor.id === tableMatched?.floor_id
-    );
-    setShowPayment(true);
-    navigate({
-      pathname: POSPath.MENUS,
-      search: `${formatQuery([
-        QUERY_KEYS.POS_ID,
-        QUERY_KEYS.SESSION_ID,
-      ])}&${createSearchParams({
-        [QUERY_KEYS.ORDER_ID]: orderDetailData?.id.toString(),
-        [QUERY_KEYS.TABLE_ID]: tableMatched.id.toString(),
-        [QUERY_KEYS.FLOOR]: floorMatched.id.toString(),
-      })}`,
-    });
-  };
-
-  useEffect(() => {
-    if (!orderDetailData) return;
-
-    const onFindCustomer = async () => {
-      const cashierName = await onGetCurrentUser({
-        userId: orderDetailData?.user_id,
-      });
-
-      setCashierName(cashierName);
-    };
-
-    onFindCustomer();
-  }, [orderDetailData?.user_id]);
-
-  return (
-    <div className="min-w-[35%] w-[35%] p-6 flex flex-col gap-4 size-full">
-      <p className="font-semibold leading-6 text-text-primary tracking-[-0.24px]">
-        Chi tiết đơn hàng
-      </p>
-
-      <div className="flex flex-col gap-1 flex-1">
-        {[
-          {
-            label: "Mã đơn hàng",
-            value: orderDetailData?.pos_reference,
-          },
-          {
-            label: "Số đơn hàng",
-            value: orderDetailData?.id,
-          },
-          {
-            label: "Mã tra cứu HĐĐT",
-            value: orderDetailData?.e_invoice_search_code,
-          },
-          {
-            label: "Bàn",
-            value: isModePosRestaurant
-              ? onFindTable({
-                  order: orderDetailData,
-                  tables,
-                  floors,
-                })
-              : undefined,
-          },
-          {
-            label: "Thời gian tạo",
-            value: moment(add7Hours(orderDetailData?.date_order)).format(
-              "DD/MM/YYYY HH:mm:ss"
-            ),
-          },
-          {
-            label: "Khách hàng",
-            value: customerName,
-          },
-          {
-            label: "Phương thức thanh toán",
-            value: paymentMethod || "Chưa xác định",
-          },
-          {
-            label: "Nhân viên",
-            value: cashierName,
-          },
-        ]
-          .filter((item) => item.value)
-          .map((item, index) => (
-            <div
-              key={index}
-              className={`flex items-center justify-between rounded-lg px-2 py-[10px] ${
-                index % 2 !== 0 ? "bg-neutral-100-96" : "bg-white"
-              }`}
-            >
-              <p className="text-sm flex-1 font-medium leading-5 tracking-[-0.12px]">
-                {item.label}
-              </p>
-
-              <p className="text-sm flex-1 text-end font-semibold text-text-primary leading-5 tracking-[-0.12px]">
-                {item.value}
-              </p>
-            </div>
-          ))}
-      </div>
-
-      <div className="flex flex-col gap-2">
-        {orderDetailData?.state === ORDER_STATE.NEW && (
-          <ButtonAction onClick={onAddDish} className="button-primary">
-            Thêm món
-          </ButtonAction>
-        )}
-
-        {isOrderCanPrint && (
-          <button
-            style={{
-              boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
-            }}
-            onClick={handlePrintBillByText}
-            className="rounded-lg border border-stroke-disabled bg-white px-3 py-[6px] h-12"
-          >
-            <span className="text-sm font-semibold leading-5 tracking-[-0.12px] text-text-primary">
-              {isInPaidOrder ? "In phiếu tạm tính" : "In đơn hàng"}
-            </span>
-          </button>
-        )}
-
-        {isOrderCanExportEInvoice && (
-          <ButtonAction
-            onClick={onCreateEInvoice}
-            disabled={isEInvoiceCreating}
-            className="button-primary"
-          >
-            Xuất hoá đơn
-          </ButtonAction>
-        )}
-
-        {orderDetailData?.state === ORDER_STATE.IN_PAID && (
-          <ButtonAction onClick={onPayment} className="button-primary">
-            Thanh toán
-          </ButtonAction>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default OrderDetailSummary;

package/src/components/order-management/order-header.tsx

@@ -1,113 +0,0 @@
-import { IcSearch } from "@assets/icons/breadcrumbs-icon";
-import { IcCheckFill } from "@assets/icons/common";
-import { ButtonIcon } from "@components/common/button-icon";
-import DropdownSelector from "@components/common/dropdown";
-import RefreshButton from "@components/common/refresh-button";
-import { TabsLayout } from "@components/common/tabs-layout";
-import Search from "@components/pos-management/search";
-import { ORDER_STATE } from "@constants/order-state";
-import { useState } from "react";
-import { OrderTab } from ".";
-
-type TProps = {
-  onRefreshOrder: () => void;
-  searchValue: string;
-  setSearchValue: (value: string) => void;
-  onStatusChange: (value: ORDER_STATE) => void;
-  selectedStatus: string;
-  activeTab: string;
-  onActiveTabChange: (tab: string) => void;
-};
-
-const statusOptions: { key: ORDER_STATE; label: string }[] = [
-  { key: ORDER_STATE.ALL, label: "Tất cả" },
-  { key: ORDER_STATE.NEW, label: "Mới" },
-  { key: ORDER_STATE.CANCEL, label: "Đã huỷ" },
-  { key: ORDER_STATE.PAID, label: "Đã thanh toán" },
-  { key: ORDER_STATE.IN_PAID, label: "Đang thanh toán" },
-  { key: ORDER_STATE.INVOICED, label: "Đã xuất hóa đơn" },
-];
-const OrderHeader = ({
-  onRefreshOrder,
-  searchValue,
-  setSearchValue,
-  onStatusChange,
-  activeTab,
-  onActiveTabChange,
-  selectedStatus,
-}: TProps) => {
-  const currentStatus = statusOptions.find((s) => s.key === selectedStatus)!;
-  const [isSearchMode, setIsSearchMode] = useState(false);
-
-  return (
-    <div className="sticky top-0 z-[9999] items-center flex justify-between gap-3">
-      {isSearchMode ? (
-        <Search
-          placeholder="Tìm kiếm đơn hàng"
-          searchValue={searchValue}
-          onSearchChange={setSearchValue}
-          onClose={() => setIsSearchMode(false)}
-          isNumericMode={false}
-        />
-      ) : (
-        <div className="flex-1">
-          <TabsLayout
-            tabs={[
-              { id: OrderTab.ALL, name: "Tất cả" },
-              { id: OrderTab.AT_TABLE, name: "Tại bàn" },
-              { id: OrderTab.TAKE_AWAY, name: "Mang đi" },
-            ]}
-            queryKey="orderType"
-            activeValue={activeTab}
-            onClick={(tab: any) => onActiveTabChange(tab.id)}
-            rightButton={
-              <div className="flex items-center gap-4">
-                <ButtonIcon
-                  iconSrc={<IcSearch />}
-                  onClick={() => setIsSearchMode(true)}
-                />
-                <DropdownSelector
-                  options={statusOptions}
-                  selectedValue={{
-                    label: currentStatus?.label,
-                  }}
-                  onSelect={(opt) => {
-                    onStatusChange(opt.key);
-                  }}
-                  renderItem={(opt) => (
-                    <>
-                      <div className="flex justify-between" key={opt.key}>
-                        <button
-                          onClick={() => {
-                            onStatusChange(opt.key);
-                          }}
-                          className={`w-full gap-2 px-2 py-[6px] flex items-center justify-between text-sm rounded-md ${
-                            selectedStatus === opt.key
-                              ? "bg-gray-100 text-primary font-medium"
-                              : "hover:bg-gray-50 text-text-primary"
-                          }`}
-                        >
-                          <span className="font-normal">{opt.label}</span>
-                          {selectedStatus === opt.key && <IcCheckFill />}
-                        </button>
-                      </div>
-                      {opt.key === "all" && (
-                        <div className="border-t border-gray-200 mt-2" />
-                      )}
-                    </>
-                  )}
-                  buttonClassName="flex items-center justify-between gap-2 px-3 py-2 bg-white border border-gray-300 rounded-lg text-sm text-text-primary hover:bg-gray-50 focus:outline-none focus:ring-2 h-11 w-[170px]"
-                  dropdownClassName="w-[170px] top-[calc(100%_+_4px)] p-2 flex flex-col gap-1"
-                />
-                <RefreshButton onRefresh={onRefreshOrder} />
-              </div>
-            }
-            className="h-[56px]"
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default OrderHeader;

package/src/components/order-management/order-pagination.tsx

@@ -1,49 +0,0 @@
-import DropdownSelector from "@components/common/dropdown";
-import { Pagination } from "@components/common/pagination";
-
-type TProps = {
-  page: number;
-  setPage: (page: number) => void;
-  pageSize: number;
-  setPageSize: (pageSize: number) => void;
-  totalPages: number;
-};
-
-const OrderPagination = ({
-  page,
-  setPage,
-  pageSize,
-  setPageSize,
-  totalPages,
-}: TProps) => {
-  const options = [10, 20, 50, 100];
-  return (
-    <div className="flex justify-between items-center py-2">
-      <div />
-      <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />
-      <div className="flex items-center text-sm text-gray-600 mr-4 gap-3">
-        <span>Số dòng</span>
-        <DropdownSelector<number>
-          options={options}
-          selectedValue={{
-            label: pageSize.toString(),
-          }}
-          onSelect={(value) => setPageSize(value)}
-          renderItem={(item) => (
-            <div
-              className={`px-3 py-2 text-sm hover:bg-gray-50 ${
-                pageSize === item ? "bg-gray-100 text-primary font-medium" : ""
-              }`}
-            >
-              {item}
-            </div>
-          )}
-          buttonClassName="px-2 py-1 border border-gray-300 rounded-md text-gray-700 bg-white w-[60px] flex justify-between items-center"
-          dropdownClassName="w-[60px] bottom-10"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default OrderPagination;

package/src/components/order-management/order-status.tsx

@@ -1,58 +0,0 @@
-import { ORDER_STATE } from "@constants/order-state";
-import { useTranslation } from "react-i18next";
-
-const STATUS = [
-  {
-    id: 1,
-    value: ORDER_STATE.NEW,
-    color: "#F6B51E",
-    background: "#FFFAEB",
-  },
-  {
-    id: 2,
-    value: ORDER_STATE.PAID,
-    color: "#1FC163",
-    background: "#E0FAEB",
-  },
-  {
-    id: 3,
-    value: ORDER_STATE.INVOICED,
-    color: "#35ADE9",
-    background: "#EBF1FF",
-  },
-  {
-    id: 4,
-    value: ORDER_STATE.CANCEL,
-    color: "#FB2B3D",
-    background: "#FFEBEC",
-  },
-  {
-    id: 5,
-    value: ORDER_STATE.IN_PAID,
-    color: "#1FC163",
-    background: "#E0FAEB",
-  },
-];
-
-const OrderStatus = ({ status }: { status: string }) => {
-  const { t } = useTranslation();
-  const currentStatus = STATUS.find((item) => {
-    return item.value === status;
-  });
-  return (
-    <div
-      style={{
-        borderColor: currentStatus?.color,
-        backgroundColor: currentStatus?.background,
-        color: currentStatus?.color,
-      }}
-      className="px-2 py-1 rounded border w-fit"
-    >
-      <p className="text-xs font-medium leading-4">
-        {t(currentStatus?.value || "")}
-      </p>
-    </div>
-  );
-};
-
-export default OrderStatus;