sme-pos-package 1.0.14 → 1.0.15

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

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

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

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

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

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

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

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