sme-pos-package 1.0.13 → 1.0.15

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

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

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

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

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

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

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

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

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

@@ -1,87 +0,0 @@
-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>
-  );
-};