sme-pos-package 1.0.7 → 1.0.9

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

@@ -0,0 +1,109 @@
+import { IcThreeDots } from "@assets/icons/common";
+import { ButtonIcon } from "@components/common/button-icon";
+import { AddCustomerDrawer } from "@components/customer-management/add-customer/add-customer-drawer";
+import { ChooseCustomerDrawer } from "@components/customer-management/choose-customer-drawer";
+import CustomerInfo from "@components/pos-management/cart-content/order-info/customer-info";
+import { OrderHelperModal } from "@components/pos-management/order-helper/order-helper-modal";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useFloor } from "@provider/pos-provider/floor-provider";
+import { useSale } from "@provider/pos-provider/sale-provider";
+import { useCustomerStore } from "@store/states/customer.state";
+import { TCustomer } from "@type/customer";
+import { TFloor } from "@type/floor/floor";
+import { TBasicOrder } from "@type/order";
+import { useMemo, useState } from "react";
+
+export const OrderInfo = ({
+  orderDetail,
+  showPayment,
+}: {
+  orderDetail: TBasicOrder;
+  showPayment: boolean;
+}) => {
+  const { getQuery } = useQueryParams();
+  const { setCustomer, setIsEditMode } = useCustomerStore();
+
+  const [openOrderHelperModal, setOpenOrderHelperModal] = useState(false);
+  const [openChooseCustomerModal, setOpenChooseCustomerModal] = useState(false);
+  const [openAddCustomerModal, setOpenAddCustomerModal] = useState(false);
+
+  const onOpenChooseCustomerModal = () => setOpenChooseCustomerModal(true);
+
+  const onOpenAddCustomerModal = () => {
+    setOpenChooseCustomerModal(false);
+    setOpenAddCustomerModal(true);
+  };
+
+  const onEditCustomer = ({ customer }: { customer: TCustomer }) => {
+    setOpenChooseCustomerModal(false);
+    setOpenAddCustomerModal(true);
+    setIsEditMode(true);
+    setCustomer(customer);
+  };
+
+  const orderIdActive = getQuery(QUERY_KEYS.ORDER_ID);
+  const { floors: floorData } = useFloor();
+  const tableName = useMemo(() => {
+    const tableNumber = floorData
+      ?.find((item: TFloor) =>
+        item.table_ids?.find((item) => item.id == orderDetail.table_id)
+      )
+      ?.table_ids?.find(
+        (item) => item.id == orderDetail.table_id
+      )?.table_number;
+
+    return tableNumber;
+  }, [orderDetail, orderIdActive]);
+
+  const { getData, isModePosRestaurant } = useSale();
+
+  return (
+    <div className="flex justify-between items-center">
+      <div className="flex gap-2 items-center">
+        <div className="flex flex-col ">
+          {
+            <p className="font-bold text-text-primary">
+              {!isModePosRestaurant
+                ? "Mã đơn hàng"
+                : orderDetail.table_id
+                ? `Bàn ${tableName}`
+                : "Mang đi"}
+            </p>
+          }
+          <p className="text-sm font-medium text-text-disable">
+            #{orderDetail.id}
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-2">
+        <CustomerInfo
+          onOpenChooseCustomerModal={onOpenChooseCustomerModal}
+          onEditCustomer={onEditCustomer}
+        />
+        {!showPayment && (
+          <ButtonIcon
+            iconSrc={<IcThreeDots />}
+            onClick={() => setOpenOrderHelperModal(true)}
+          />
+        )}
+      </div>
+
+      <OrderHelperModal
+        isOpen={openOrderHelperModal}
+        onClose={() => setOpenOrderHelperModal(false)}
+      />
+
+      <ChooseCustomerDrawer
+        isOpen={openChooseCustomerModal}
+        onClose={() => setOpenChooseCustomerModal(false)}
+        onOpenAddCustomerModal={onOpenAddCustomerModal}
+      />
+
+      <AddCustomerDrawer
+        isOpen={openAddCustomerModal}
+        onClose={() => setOpenAddCustomerModal(false)}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,36 @@
+import { VNCurrency } from "@components/common/header";
+import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+import { ceilDecimal } from "@utils/functions";
+import { t } from "i18next";
+
+export const OrderTotal = () => {
+  const { taxAmount, totalAmount, totalQty } = useOrderDetail();
+
+  return (
+    <div className="border-t border-stroke-default px-3 py-2 bg-white text-text-disable">
+      <div className="flex justify-between items-center text-[--color-secondary]">
+        <p className="text-sm leading-5 tracking-[-0.12px]">{t("tax_vat")}</p>
+        <div className="flex gap-1 items-center font-medium">
+          <p className="leading-[26px]">
+            {ceilDecimal(taxAmount)?.toLocaleString()}
+          </p>
+          <p className="leading-6 tracking-[-0.24px]">{VNCurrency}</p>
+        </div>
+      </div>
+
+      <div className="flex justify-between items-center text-[--color-secondary]">
+        <p className="text-sm leading-5 tracking-[-0.12px]">
+          {t("total")} {`(${totalQty} ${t("product")})`}
+        </p>
+        <div className="flex gap-1 items-center font-semibold text-text-active">
+          <p className="leading-7 tracking-[-0.2px]">
+            {ceilDecimal(totalAmount)?.toLocaleString()}
+          </p>
+          <p className="font-semibold leading-6 tracking-[-0.24px]">
+            {VNCurrency}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,72 @@
+import { IcPlus } from "@assets/icons/breadcrumbs-icon";
+import { IcOrderList } from "@assets/icons/pos-icon";
+import ButtonAction from "@components/common/button-action";
+import { ButtonIcon } from "@components/common/button-icon";
+import { TabsLayout, TTab } from "@components/common/tabs-layout";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { TBasicOrder } from "@type/order";
+import { useEffect, useMemo } from "react";
+
+export const OrdersLine = ({
+  draftOrders,
+  onShowDraftOrders,
+  displayedOrders,
+  setDisplayedOrders,
+}: {
+  draftOrders: TBasicOrder[];
+  onShowDraftOrders: () => void;
+  displayedOrders: string[];
+  setDisplayedOrders: (value: string[]) => void;
+}) => {
+  const { getQuery } = useQueryParams();
+
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+  const tableId = getQuery(QUERY_KEYS.TABLE_ID);
+  const { handleCreateOrder } = useOrder();
+
+  const orderTabsValue: TTab[] = useMemo(() => {
+    return displayedOrders
+      ?.filter((id) => !!id)
+      ?.map((orderId) => ({
+        id: orderId,
+        name: `DH-${orderId}`,
+      }));
+  }, [displayedOrders]);
+
+  useEffect(() => {
+    if (displayedOrders.length == 0 || !orderId) return;
+    const isDisplayOrder = displayedOrders.includes(orderId);
+    if (!isDisplayOrder) {
+      setDisplayedOrders([orderId, ...displayedOrders.slice(0, 2)]);
+    }
+  }, [orderId]);
+
+  return (
+    <TabsLayout
+      tabs={orderTabsValue}
+      queryKey={QUERY_KEYS.ORDER_ID}
+      className="border-b border-[--stroke-default] sticky top-0 z-10 px-[6px]"
+      rightButton={
+        <>
+          {draftOrders.length > 0 && (
+            <ButtonAction
+              onClick={() => onShowDraftOrders()}
+              className="border border-text-active !px-3 text-text-active min-w-0"
+              text={draftOrders.length.toString()}
+              iconSrc={<IcOrderList />}
+            />
+          )}
+          {!tableId && (
+            <ButtonIcon
+              iconSrc={<IcPlus />}
+              onClick={() => handleCreateOrder()}
+              className="border-text-active text-text-active"
+            />
+          )}
+        </>
+      }
+    />
+  );
+};

package/src/components/pos-management/menu-content/category-tab.tsx

@@ -0,0 +1,38 @@
+import { IcSearch } from "@assets/icons/breadcrumbs-icon";
+import { IcBarCode } from "@assets/icons/order-icon";
+import { ButtonIcon } from "@components/common/button-icon";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { Dispatch, SetStateAction } from "react";
+import { TabsLayout } from "../../common/tabs-layout";
+
+export const CategoryTabs = ({
+  categoriesData,
+  setIsSearchMode,
+  setIsScanMode,
+}: {
+  categoriesData: TCategory[];
+  setIsSearchMode: Dispatch<SetStateAction<boolean>>;
+  setIsScanMode: () => void;
+}) => {
+  return (
+    <TabsLayout
+      tabs={categoriesData}
+      queryKey={QUERY_KEYS.CATEGORY_ID}
+      className="sticky top-0 z-20"
+      rightButton={
+        <>
+          <ButtonIcon
+            iconSrc={<IcSearch />}
+            onClick={() => setIsSearchMode(true)}
+          />
+          <ButtonIcon iconSrc={<IcBarCode />} onClick={setIsScanMode} />
+        </>
+      }
+    />
+  );
+};
+
+export type TCategory = {
+  id: number;
+  name: string;
+};

package/src/components/pos-management/menu-content/create-order-modal.tsx

@@ -0,0 +1,65 @@
+import { IcCart } from "@assets/icons/cart-icon";
+import { IcSeatTable } from "@assets/icons/table-icon";
+import ButtonAction from "@components/common/button-action";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import { QUERY_KEYS } from "@constants/query.constant";
+import POSPath from "@constants/routes.constants";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { useSale } from "@provider/pos-provider/sale-provider";
+import { useNavigate } from "react-router-dom";
+
+type Props = {
+  onClose: () => void;
+};
+
+export const CreateOrderModal = ({ onClose }: Props) => {
+  const { handleCreateOrder } = useOrder();
+  const { formatQuery } = useQueryParams();
+  const navigate = useNavigate();
+  const { getData, isModePosRestaurant } = useSale();
+
+  const onCreateOrder = () => {
+    handleCreateOrder();
+    onClose();
+  };
+  const onChooseTable = () => {
+    navigate({
+      pathname: POSPath.MENUS,
+      search: `?${formatQuery([QUERY_KEYS.POS_ID, QUERY_KEYS.SESSION_ID])}`,
+    });
+    onClose();
+  };
+
+  return (
+    <ModalZoom
+      isOpen
+      onClose={onClose}
+      className=""
+      modalClassName="w-[50%] text-text-primary"
+      title="Chưa tạo đơn hàng"
+    >
+      <div className="flex flex-col gap-5">
+        <p className="font-medium">
+          Bạn chưa khởi tạo đơn hàng. Vui lòng tạo đơn hàng trước khi thêm món
+        </p>
+        <div className="flex gap-2 w-full">
+          <ButtonAction
+            onClick={onCreateOrder}
+            text="Tạo đơn mang đi"
+            iconSrc={<IcCart />}
+            className="button-secondary w-full"
+          />
+          {isModePosRestaurant && (
+            <ButtonAction
+              onClick={onChooseTable}
+              text="Chọn bàn"
+              iconSrc={<IcSeatTable />}
+              className="button-primary w-full"
+            />
+          )}
+        </div>
+      </div>
+    </ModalZoom>
+  );
+};

package/src/components/pos-management/menu-content/product-content.tsx

@@ -0,0 +1,93 @@
+import { EmptyState } from "@components/common/empty-state";
+import Search from "@components/pos-management/search";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useProduct } from "@provider/pos-provider/product-provider";
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import { TProduct } from "@type/product/product";
+import { useMemo, useState } from "react";
+import { AddProductFromBarcode } from "../add-product-from-barcode";
+import { CategoryTabs } from "./category-tab";
+import { CreateOrderModal } from "./create-order-modal";
+import { ProductItem } from "./product-item";
+
+const ProductContent = () => {
+  const [searchValue, setSearchValue] = useState("");
+  const [isScanMode, setIsScanMode] = useState(false);
+  const [isSearchMode, setIsSearchMode] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  const {
+    queryResult: { data: posSession },
+  } = useSale();
+
+  const { getQuery } = useQueryParams();
+  const activeCategoryId = getQuery(QUERY_KEYS.CATEGORY_ID);
+  const categoriesData = posSession?.[LoadDataModel.POS_CATEGORY]?.data ?? [];
+  const { data: products } = useProduct();
+
+  const productData = useMemo(() => {
+    const productsToFilter = isSearchMode
+      ? products
+      : products?.filter((product: TProduct) =>
+          product?.pos_categ_ids?.includes(Number(activeCategoryId))
+        );
+
+    const data =
+      productsToFilter?.filter((product: TProduct) =>
+        product.display_name.toLowerCase().includes(searchValue.toLowerCase())
+      ) ?? [];
+    return data as TProduct[];
+  }, [products, activeCategoryId, searchValue, isSearchMode]);
+
+  return (
+    <div className="h-full overflow-y-auto">
+      {isSearchMode ? (
+        <Search
+          placeholder="Tìm kiếm món"
+          searchValue={searchValue}
+          onSearchChange={setSearchValue}
+          onClose={() => setIsSearchMode(false)}
+          isNumericMode={false}
+        />
+      ) : (
+        <CategoryTabs
+          categoriesData={categoriesData}
+          setIsSearchMode={setIsSearchMode}
+          setIsScanMode={() => setIsScanMode(!isScanMode)}
+        />
+      )}
+      <div className="overflow-auto p-4 z-0 border-t border-stroke-default">
+        {isSearchMode && !searchValue.length ? (
+          ""
+        ) : isSearchMode && searchValue.length && productData?.length === 0 ? (
+          <EmptyState
+            image="/assets/images/empty-cart.svg"
+            imageAlt="product_no_data"
+            description="Không có món bạn tìm kiếm"
+            className="pt-20"
+            imageClassName="size-[200px]"
+          />
+        ) : (
+          <div className="grid gap-2 grid-cols-[repeat(auto-fill,minmax(162px,1fr))]">
+            {productData?.map((product: TProduct) => (
+              <ProductItem
+                key={product.id}
+                product={product}
+                setShowModal={setShowModal}
+              />
+            ))}
+            {showModal && (
+              <CreateOrderModal onClose={() => setShowModal(false)} />
+            )}
+          </div>
+        )}
+      </div>
+      {isScanMode && productData && (
+        <AddProductFromBarcode productsData={productData} />
+      )}
+    </div>
+  );
+};
+
+export default ProductContent;

package/src/components/pos-management/menu-content/product-detail/info.tsx

@@ -0,0 +1,28 @@
+import { VNCurrency } from "@components/common/header";
+import { TProduct } from "@type/product/product";
+
+type TProps = {
+  productData: TProduct | undefined;
+  totalPrice: number;
+};
+
+const ProductInfo = (props: TProps) => {
+  const { productData, totalPrice } = props;
+
+  if (!productData) return null;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <p className="font-medium leading-6 tracking-[-0.24px] text-text-primary">
+          {productData.display_name}
+        </p>
+        <p className="font-semibold leading-6 tracking-[-0.24px] text-text-primary">
+          {totalPrice.toLocaleString()} {VNCurrency}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ProductInfo;

package/src/components/pos-management/menu-content/product-detail/modal.tsx

@@ -0,0 +1,148 @@
+import TextArea from "@components/common/input/text-area";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import { useProduct } from "@provider/pos-provider/product-provider";
+import { useCartStore } from "@store/states/cart.state";
+import { TAttributeLine, TAttributeValue } from "@type/product/product";
+import { getKey } from "@utils/functions";
+import { t } from "i18next";
+import { useEffect, useMemo, useState } from "react";
+import ProductInfo from "./info";
+import ProductOption from "./option";
+import QuantityControl from "./quantity-control";
+
+const ProductDetailModal = () => {
+  const { productData } = useProduct();
+  const { activeProduct, setActiveProduct, cartItems } = useCartStore();
+  const [selectedOject, setSelectedOject] = useState<Record<number, number[]>>(
+    {}
+  );
+  const [productAttributeValueIds, setProductAttributeValueIds] = useState<
+    number[]
+  >([]);
+  const [quantity, setQuantity] = useState<number>(1);
+  const [note, setNote] = useState<string>("");
+  const onClose = () => {
+    setActiveProduct({ id: "", isFromCart: false });
+    setSelectedOject({});
+    setProductAttributeValueIds([]);
+  };
+
+  const onSetSelectedOject = (
+    id: number,
+    value: number,
+    isMultiOption?: boolean
+  ) => {
+    if (selectedOject?.[id]?.includes(value) && isMultiOption) {
+      setSelectedOject({
+        ...selectedOject,
+        [id]: [...selectedOject[id].filter((item) => item !== value)],
+      });
+    } else
+      setSelectedOject((prev) => ({
+        ...prev,
+        [id]: isMultiOption ? [...(prev?.[id] ?? []), value] : [value],
+      }));
+  };
+
+  useEffect(() => {
+    cartItems?.[activeProduct.id]?.qty &&
+      activeProduct.isFromCart &&
+      setQuantity(cartItems?.[activeProduct.id]?.qty);
+    const attributeValueIds =
+      cartItems?.[activeProduct.id]?.product?.attributeValueIds ?? [];
+    const attributeValue = productData?.attributeLines?.map(
+      (attributeLine: TAttributeLine) => {
+        const pickValue = attributeLine.value_string
+          ?.filter((item: TAttributeValue) =>
+            attributeValueIds.includes(item.id)
+          )
+          .map((item: TAttributeValue) => item.id);
+        pickValue.length > 0 &&
+          setSelectedOject((prev) => ({
+            ...prev,
+            [attributeLine.id]: pickValue,
+          }));
+        return pickValue;
+      }
+    );
+    attributeValue?.flat() &&
+      setProductAttributeValueIds(attributeValue?.flat());
+    return () => {
+      setQuantity(1);
+    };
+  }, [cartItems, activeProduct]);
+
+  const totalPrice = useMemo(() => {
+    const totalAttributePrice =
+      productData?.attributeLines?.reduce((acc, line) => {
+        if (selectedOject?.[line.id]) {
+          return (
+            acc +
+            (line.value_string?.reduce(
+              (totalExtra, item) =>
+                totalExtra +
+                (selectedOject?.[line.id].includes(item.id)
+                  ? item.price_extra
+                  : 0),
+              0
+            ) ?? 0)
+          );
+        }
+        return acc;
+      }, 0) ?? 0;
+    return (totalAttributePrice + (productData?.lst_price ?? 0)) * quantity;
+  }, [productData, selectedOject, quantity]);
+  return (
+    <ModalZoom
+      isOpen={!!activeProduct.id}
+      onClose={onClose}
+      className="p-0 py-4 px-5"
+      modalClassName="w-[70%]"
+      title="Tùy chọn" //multi language
+      footer={
+        <QuantityControl
+          isUpdate={!!activeProduct.isFromCart}
+          onClose={onClose}
+          productData={
+            productData
+              ? {
+                  ...productData,
+                  productCartKey: getKey({
+                    ...productData,
+                    attributeValueIds: productAttributeValueIds?.flat(),
+                  }),
+                }
+              : undefined
+          }
+          selectedOject={selectedOject}
+          quantity={quantity}
+          setQuantity={setQuantity}
+          note={note}
+        />
+      }
+    >
+      <div className="flex flex-col gap-4">
+        <ProductInfo productData={productData} totalPrice={totalPrice} />
+
+        <div className="flex flex-col gap-4">
+          {productData?.attributeLines?.map((option, index) => (
+            <ProductOption
+              key={index}
+              option={option}
+              optionsSelected={selectedOject}
+              onSetSelectedOject={onSetSelectedOject}
+            />
+          ))}
+        </div>
+
+        <TextArea
+          title={t("note_for_kitchen")}
+          placeholder={t("note_for_kitchen_subtitle")}
+          onChange={(e) => setNote(e.target.value)}
+        />
+      </div>
+    </ModalZoom>
+  );
+};
+
+export default ProductDetailModal;

package/src/components/pos-management/menu-content/product-detail/option.tsx

@@ -0,0 +1,87 @@
+import { TAttributeLine, TAttributeValue } from "@type/product/product";
+import { t } from "i18next";
+import { useEffect } from "react";
+
+type TProductOptionProps = {
+  option: TAttributeLine;
+  optionsSelected?: Record<string, number[]>;
+  onSetSelectedOject: (
+    id: number,
+    value: number,
+    isMultiOption?: boolean
+  ) => void;
+};
+
+const ProductOption = (props: TProductOptionProps) => {
+  const { option, optionsSelected, onSetSelectedOject } = props;
+  useEffect(() => {
+    if (option.type == "pills")
+      onSetSelectedOject(option.id, option.value_string[0].id);
+  }, [option]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <p className="font-semibold leading-6 tracking-[-0.24px] text-text-primary">
+          {option.name}
+        </p>
+        {option.type == "multi" && (
+          <p className="px-2 py-1 rounded border border-tertiary text-xs font-medium text-text-secondary leading-4">
+            {t("optional")}
+          </p>
+        )}
+      </div>
+
+      <div className="flex justify-start flex-wrap items-center gap-3">
+        {option.value_string.map((item, index) => (
+          <Option
+            key={index}
+            option={item}
+            isActive={optionsSelected?.[option.id]?.includes(item.id)}
+            onSetSelectedOject={(value: number) =>
+              onSetSelectedOject(option.id, value, option.type == "multi")
+            }
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProductOption;
+
+const Option = ({
+  option,
+  isActive,
+  onSetSelectedOject,
+}: {
+  option: TAttributeValue;
+  isActive?: boolean;
+  onSetSelectedOject: (value: number) => void;
+}) => {
+  const { name, id } = option;
+
+  return (
+    <div
+      onClick={() => onSetSelectedOject(id)}
+      className={`rounded-full ${
+        isActive
+          ? "border-2 border-primary bg-surface-primary"
+          : "border border-stroke-disabled"
+      } px-3 cursor-pointer py-2 w-fit`}
+    >
+      <p
+        className={`text-xs font-medium leading-4 ${
+          isActive ? "menu-title" : "text-text-primary"
+        }`}
+      >
+        {name}{" "}
+        {option.price_extra != 0 && (
+          <span className="menu-title">
+            +{option.price_extra?.toLocaleString("en-EN")}đ
+          </span>
+        )}
+      </p>
+    </div>
+  );
+};