sme-pos-package 1.0.7 → 1.0.9

package/src/components/pos-management/cart-content/cart-items.tsx

@@ -0,0 +1,130 @@
+import Image from "@components/common/image";
+import { CartItemType } from "@store/states/cart.state";
+import { useState } from "react";
+import CancelOrderLineConfirm from "./cancel-order-line-modal";
+import { CartItem } from "./cart-item";
+import { EmptyState } from "@components/common/empty-state";
+import { VNCurrency } from "@components/common/header";
+import { useOrder } from "@provider/pos-provider";
+
+export const CartItems = ({
+  cartItemsArr,
+  showPayment,
+}: {
+  cartItemsArr: CartItemType[];
+  showPayment?: boolean;
+}) => {
+  const [showModal, setShowModal] = useState(false);
+  const [cancelOrder, setCancelOrder] = useState<CartItemType | undefined>(
+    undefined
+  );
+  const { onCallDish, onRemoveProduct } = useOrder();
+
+  const onCancelOrderLine = () => {
+    if (!cancelOrder) return;
+    onRemoveProduct(cancelOrder.product);
+    onCallDish();
+  };
+
+  return (
+    <div className="bg-white h-fit rounded-lg border border-stroke-default flex flex-col justify-between flex-1 overflow-hidden">
+      {cartItemsArr.length > 0 ? (
+        showPayment ? (
+          <CartTable cartItemsArr={cartItemsArr} />
+        ) : (
+          <div className="flex flex-col">
+            {cartItemsArr.map((item) => (
+              <CartItem
+                key={item.lineId?.toString()}
+                item={item}
+                setCancelOrder={setCancelOrder}
+              />
+            ))}
+            {showModal && (
+              <CancelOrderLineConfirm
+                onClose={() => setShowModal(false)}
+                onCancelOrderLine={onCancelOrderLine}
+              />
+            )}
+          </div>
+        )
+      ) : (
+        <div className="flex flex-col gap-3 justify-center items-center h-full">
+          <Image
+            imageUrl="/assets/images/empty-cart.png"
+            className="w-[164px] aspect-square"
+          />
+          <p className="text-sm font-medium text-text-primary">
+            Vui lòng thêm món để tiếp tục
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const CartTable = ({ cartItemsArr }: { cartItemsArr: CartItemType[] }) => {
+  const tableHeader = ["Sản phẩm", "SL", "Đơn giá", "Thành tiền"];
+  const isLoading = false;
+  return (
+    <table className="min-w-full divide-y divide-stroke-disabled table-fixed">
+      <thead className=" sticky top-0 z-10 border-b border-stroke-disabled">
+        <tr>
+          {tableHeader.map((header, idx) => (
+            <th
+              key={idx}
+              className="px-3 py-3 text-left text-sm font-semibold text-text-disable"
+            >
+              <div>{header}</div>
+            </th>
+          ))}
+        </tr>
+      </thead>
+
+      {/* Body */}
+      <tbody className="bg-white divide-y divide-stroke-disabled [&>tr]:h-11">
+        {cartItemsArr?.length ? (
+          cartItemsArr.map((orderLine) => {
+            return (
+              <tr
+                key={orderLine.lineId?.toString()}
+                className="text-sm text-text-primary font-semibold leading-5 tracking-[-0.12px] border-b border-stroke-disabled"
+              >
+                <td className="p-3">{orderLine.product.name}</td>
+                <td className="p-3">{orderLine.qty}</td>
+                <td className="p-3">
+                  {orderLine.product.lst_price.toLocaleString()}
+                  {VNCurrency}
+                </td>
+                <td className="p-3">
+                  {(
+                    orderLine.product.lst_price * orderLine.qty
+                  ).toLocaleString()}{" "}
+                  {VNCurrency}
+                </td>
+              </tr>
+            );
+          })
+        ) : (
+          <tr>
+            <td
+              colSpan={tableHeader.length}
+              className="text-center text-sm text-gray-500 py-6"
+            >
+              {isLoading ? (
+                "Đang tải đơn hàng..."
+              ) : (
+                <EmptyState
+                  image="/assets/images/order-empty-state.png"
+                  imageAlt="empty-order"
+                  description="Chưa có đơn"
+                  imageClassName="size-[200px]"
+                />
+              )}
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  );
+};

package/src/components/pos-management/cart-content/draft-orders/draft-order-line.tsx

@@ -0,0 +1,67 @@
+import { IcDot } from "@assets/icons/common";
+import { IcOrderList } from "@assets/icons/pos-icon";
+import { VNCurrency } from "@components/common/header";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useFloor } from "@provider/pos-provider/floor-provider";
+import { TBasicOrder } from "@type/order";
+
+export const DraftOrderLine = ({
+  order,
+  onBack,
+  onAppendDisplayedOrders,
+}: {
+  order: TBasicOrder;
+  onBack: () => void;
+  onAppendDisplayedOrders?: (orderId: string) => void;
+}) => {
+  const { updateMultipleQuery } = useQueryParams();
+  const { tableOfOrder } = useFloor();
+  const { floorId, tableId, fullName } = tableOfOrder(order.table_id, order.id);
+
+  const onSelectOrder = () => {
+    updateMultipleQuery([
+      {
+        key: QUERY_KEYS.ORDER_ID,
+        value: order.id.toString(),
+      },
+      {
+        key: QUERY_KEYS.TABLE_ID,
+        value: tableId?.toString(),
+      },
+      {
+        key: QUERY_KEYS.FLOOR,
+        value: floorId?.toString(),
+      },
+    ]);
+    onBack();
+  };
+
+  return (
+    <div
+      className="px-2 rounded-lg bg-white flex gap-3 items-center min-h-[60px] cursor-pointer"
+      onClick={() => onSelectOrder()}
+    >
+      <div className="flex items-center justify-center bg-bg-disabled h-12 size-11 rounded-lg text-primary">
+        <IcOrderList />
+      </div>
+      <div className="flex flex-col flex-1">
+        <p className="flex gap-[6px] items-center text-sm font-medium text-text-secondary">
+          <span className="text-text-primary">{fullName}</span>
+          <span>#{order.id}</span>
+        </p>
+        <p className="flex gap-[6px] items-center text-sm">
+          <span>
+            {order.create_date.getHours()}:{order.create_date.getMinutes()}
+          </span>
+          <IcDot />
+          <span>{order.create_date.toLocaleDateString()}</span>
+        </p>
+      </div>
+      <p>
+        {order.create_date.toLocaleString()}
+        {VNCurrency}
+      </p>
+    </div>
+  );
+};

package/src/components/pos-management/cart-content/draft-orders/index.tsx

@@ -0,0 +1,40 @@
+import { IcClose } from "@assets/icons/common";
+import { ButtonIcon } from "@components/common/button-icon";
+import { TBasicOrder } from "@type/order";
+import { DraftOrderLine } from "./draft-order-line";
+
+export const DraftOrders = ({
+  onBack,
+  orders,
+  onAppendDisplayedOrders,
+}: {
+  onBack: () => void;
+  orders: TBasicOrder[];
+  onAppendDisplayedOrders?: (orderId: string) => void;
+}) => {
+  return (
+    <div className="flex-1 flex flex-col overflow-y-auto h-full">
+      <div className="p-[6px] flex justify-between items-center bg-white h-15">
+        <ButtonIcon
+          iconSrc={<IcClose />}
+          onClick={() => onBack()}
+          className="bg-neutral-disabled"
+        />
+        <p className="text-lg font-semibold text-text-primary">
+          Đơn chưa thanh toán
+        </p>
+        <div className="size-12" />
+      </div>
+      <div className="flex flex-col gap-2 p-2 flex-1 overflow-y-auto">
+        {orders.map((order) => (
+          <DraftOrderLine
+            key={order.id}
+            order={order}
+            onBack={onBack}
+            onAppendDisplayedOrders={onAppendDisplayedOrders}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/pos-management/cart-content/edit-cart-modal.tsx

@@ -0,0 +1,11 @@
+import { CartItemType } from "@store/states/cart.state"
+
+export const EditCartModal = ({
+    cartItem
+}:{
+    cartItem?: CartItemType
+}) => {
+  return (
+    <div>EditCartModal</div>
+  )
+}

package/src/components/pos-management/cart-content/index.tsx

@@ -0,0 +1,260 @@
+import ProductDetailModal from "@components/pos-management/menu-content/product-detail/modal";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import useGetPointReward from "@hooks/order/use-get-point-reward";
+import { useFloor } from "@provider/pos-provider/floor-provider";
+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 { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import { CartItemType, useCartStore } from "@store/states/cart.state";
+import { usePaymentStore } from "@store/states/payment.state";
+import { arraysEqual } from "@utils/functions";
+import { useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { ActionLine } from "./action-line";
+import { CartItems } from "./cart-items";
+import { DraftOrders } from "./draft-orders";
+import { NoSelectOrder } from "./no-select-order";
+import { OrderInfo } from "./order-info";
+import { OrderTotal } from "./order-total";
+import { OrdersLine } from "./orders-line";
+import POSPath from "@constants/routes.constants";
+
+export const CartContent = () => {
+  const { showPayment, setShowPayment } = usePaymentStore();
+  const [displayedOrders, setDisplayedOrders] = useState<string[]>([]);
+  const [showDraftOrders, setShowDraftOrders] = useState(false);
+  const { getQuery, updateMultipleQuery } = useQueryParams();
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+  const tableId = getQuery(QUERY_KEYS.TABLE_ID);
+  const pathName = useLocation().pathname;
+
+  const {
+    orders,
+    draftOrders,
+    orderDetailById,
+    partnerIdQueryResult,
+    handleCreateOrder,
+  } = useOrder();
+
+  const { displayDataQueryResult } = useKitchen();
+  const { taxAmount, totalAmount, totalQty } = useOrderDetail();
+  const { pointReward } = useGetPointReward({
+    totalAmountWithoutTax: totalAmount - taxAmount,
+  });
+  const partnerId = useMemo(() => {
+    return orderDetailById?.partner_id;
+  }, [orderDetailById]);
+
+  const isGuest = useMemo(() => {
+    return Number(partnerId) === (partnerIdQueryResult?.data || 7);
+  }, [partnerId]);
+
+  const { cartItems } = useCartStore();
+  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]);
+
+  const onFindDisplayedOrders = () => {
+    const takeAwayOrders = draftOrders.filter((order) => !order.table_id);
+    if (tableId) return tableId;
+    if (draftOrders.length == 0 || takeAwayOrders.length > 0) return "";
+    return draftOrders[0].table_id ? draftOrders[0].table_id : "";
+  };
+
+  useEffect(() => {
+    const tempTableId = onFindDisplayedOrders();
+    const orders = draftOrders.filter((order) => {
+      return tempTableId
+        ? order.table_id?.toString() === tempTableId?.toString()
+        : !order.table_id;
+    });
+    setDisplayedOrders(orders.slice(0, 3).map((order) => order.id.toString()));
+  }, [draftOrders, tableId]);
+
+  const onAppendDisplayedOrders = (orderId: string) => {
+    setDisplayedOrders((prev) => [orderId, ...prev]);
+  };
+  const {
+    queryResult: { data: posSession },
+    isModePosRestaurant,
+  } = useSale();
+  const categoriesData = posSession?.[LoadDataModel.POS_CATEGORY]?.data;
+  const floorId = getQuery(QUERY_KEYS.FLOOR);
+  const categoryId = getQuery(QUERY_KEYS.CATEGORY_ID);
+  const { pathname } = useLocation();
+  const { floors: floorData } = useFloor();
+
+  useEffect(() => {
+    const tableIdFirstOrder =
+      draftOrders?.find((order) => order.id.toString() === displayedOrders[0])
+        ?.table_id ?? "";
+
+    if (pathname === POSPath.TABLES && (!floorId || !tableId || !orderId)) {
+      updateMultipleQuery([
+        {
+          key: QUERY_KEYS.FLOOR,
+          value: floorId ?? String(floorData?.[0]?.id),
+        },
+        {
+          key: QUERY_KEYS.ORDER_ID,
+          value: orderId ?? String(displayedOrders[0]),
+        },
+        {
+          key: QUERY_KEYS.TABLE_ID,
+          value:
+            tableId ??
+            (tableIdFirstOrder == false ? "" : String(tableIdFirstOrder ?? "")),
+        },
+      ]);
+    } else if (
+      pathname === POSPath.MENUS &&
+      (!categoryId || !tableId || !orderId)
+    ) {
+      updateMultipleQuery([
+        {
+          key: QUERY_KEYS.CATEGORY_ID,
+          value: categoryId ?? String(categoriesData?.[0]?.id ?? ""),
+        },
+        {
+          key: QUERY_KEYS.ORDER_ID,
+          value: orderId ?? String(displayedOrders[0] ?? ""),
+        },
+        {
+          key: QUERY_KEYS.TABLE_ID,
+          value:
+            tableId ??
+            (tableIdFirstOrder == false ? "" : String(tableIdFirstOrder) ?? ""),
+        },
+      ]);
+    }
+  }, [
+    displayedOrders,
+    categoriesData,
+    floorData,
+    floorId,
+    categoryId,
+    pathname,
+  ]);
+
+  useEffect(() => {
+    updateMultipleQuery([
+      {
+        key: QUERY_KEYS.CATEGORY_ID,
+        value: categoryId ?? String(categoriesData?.[0]?.id ?? ""),
+      },
+      {
+        key: QUERY_KEYS.ORDER_ID,
+        value: String(displayedOrders[0] ?? ""),
+      },
+    ]);
+  }, [displayedOrders]);
+
+  // useEffect(() => {
+  //   const currentOrder = orders?.find(
+  //     (order) => order.id.toString() === orderId
+  //   );
+  //   if (
+  //     currentOrder &&
+  //     (currentOrder.state === ORDER_STATE.INVOICED ||
+  //       currentOrder.state === ORDER_STATE.PAID)
+  //   ) {
+  //     navigate({
+  //       pathname: POSPath.SUCCESS,
+  //       search: `?${formatQuery([
+  //         QUERY_KEYS.POS_ID,
+  //         QUERY_KEYS.SESSION_ID,
+  //         QUERY_KEYS.ORDER_ID,
+  //       ])}`,
+  //     });
+  //   }
+  // }, [orderId]);
+
+  return (
+    <div className="w-[35%] border-r border-stroke-disabled bg-neutral-100-96">
+      {orders && draftOrders.length == 0 ? (
+        isModePosRestaurant ? (
+          <NoSelectOrder text="Vui lòng chọn bàn để tạo đơn" />
+        ) : (
+          <NoSelectOrder handleCreateOrder={handleCreateOrder} />
+        )
+      ) : showDraftOrders ? (
+        <DraftOrders
+          onBack={() => setShowDraftOrders(false)}
+          orders={draftOrders}
+          onAppendDisplayedOrders={onAppendDisplayedOrders}
+        />
+      ) : (
+        <div className="flex flex-col justify-between flex-1 h-full overflow-y-auto">
+          <div className="flex-1 flex flex-col overflow-y-auto">
+            <OrdersLine
+              draftOrders={draftOrders}
+              onShowDraftOrders={() => setShowDraftOrders(true)}
+              displayedOrders={displayedOrders}
+              setDisplayedOrders={setDisplayedOrders}
+            />
+            <div className="px-2 py-[6px] flex flex-1 flex-col gap-2 overflow-y-auto">
+              {orderDetailById && (
+                <>
+                  <OrderInfo
+                    orderDetail={orderDetailById}
+                    showPayment={showPayment}
+                  />
+                  <CartItems
+                    cartItemsArr={cartItemsArr}
+                    showPayment={showPayment}
+                  />
+                </>
+              )}
+            </div>
+          </div>
+
+          <div className="min-h-fit">
+            <OrderTotal />
+            <ActionLine
+              cartItemsArr={cartItemsArr}
+              showPayment={showPayment}
+              setShowPayment={setShowPayment}
+            />
+          </div>
+        </div>
+      )}
+      <ProductDetailModal />
+    </div>
+  );
+};

package/src/components/pos-management/cart-content/no-select-order.tsx

@@ -0,0 +1,26 @@
+import { IcPlus } from "@assets/icons/common";
+import ButtonAction from "@components/common/button-action";
+
+type Props = {
+  text?: string;
+  handleCreateOrder?: () => void;
+};
+
+export const NoSelectOrder = ({ text, handleCreateOrder }: Props) => {
+  return (
+    <div className="size-full flex flex-col gap-3 justify-center items-center bg-white">
+      <img src="/assets/images/empty-cart.svg" />
+      <p className="text-sm font-medium text-text-primary">
+        {text ?? "Vui lòng tạo đơn để tiếp tục bán"}
+      </p>
+      {handleCreateOrder && (
+        <ButtonAction
+          onClick={() => handleCreateOrder()}
+          iconSrc={<IcPlus />}
+          text="Tạo đơn"
+          className="button-primary h-12 min-w-fit px-3"
+        />
+      )}
+    </div>
+  );
+};

package/src/components/pos-management/cart-content/order-info/customer-info.tsx

@@ -0,0 +1,53 @@
+import { IcCloseCircleFill } from "@assets/icons/common";
+import { IcUserAddFill } from "@assets/icons/user-add-line-icon";
+import ButtonAction from "@components/common/button-action";
+import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { TCustomer } from "@type/customer";
+
+type TProps = {
+  onOpenChooseCustomerModal: () => void;
+  onEditCustomer: ({ customer }: { customer: TCustomer }) => void;
+};
+
+const CustomerInfo = ({
+  onOpenChooseCustomerModal,
+  onEditCustomer,
+}: TProps) => {
+  const { customer } = useOrderDetail();
+  const { orderDetailById, partnerIdQueryResult, onRemoveCustomer } =
+    useOrder();
+
+  const partnerId = orderDetailById?.partner_id;
+  const isGuest = Number(partnerId) === (partnerIdQueryResult?.data || 7);
+  const customerName = customer?.name;
+  const showAddCustomerIcon = isGuest || !customerName;
+
+  return (
+    <div className="relative">
+      <ButtonAction
+        onClick={
+          !showAddCustomerIcon
+            ? () => onEditCustomer({ customer })
+            : onOpenChooseCustomerModal
+        }
+        iconSrc={showAddCustomerIcon ? <IcUserAddFill /> : undefined}
+        text={showAddCustomerIcon ? "" : customerName}
+        className={`h-11 min-h-11 ${
+          showAddCustomerIcon
+            ? "w-11 min-w-11 text-text-active"
+            : "w-full text-primary"
+        } rounded-lg border-[0.5px] border-stroke-disabled bg-white min-w-fit`}
+        textClassName="text-sm"
+      />
+
+      {!showAddCustomerIcon && (
+        <button onClick={onRemoveCustomer} className="absolute -right-1 -top-1">
+          <IcCloseCircleFill />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default CustomerInfo;