sme-pos-package 1.0.7 → 1.0.9

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

@@ -0,0 +1,155 @@
+import { IcPlus, IcSubtractLine } from "@assets/icons/breadcrumbs-icon";
+import { IcTrash } from "@assets/icons/common";
+import ButtonAction from "@components/common/button-action";
+import { ButtonIcon } from "@components/common/button-icon";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { TAttributeLine, TProduct } from "@type/product/product";
+import { t } from "i18next";
+import { useState } from "react";
+
+type TProps = {
+  productData: TProduct | undefined;
+  onClose: () => void;
+  selectedOject: Record<string, number[]> | undefined;
+  isUpdate: boolean;
+  quantity: number | string;
+  setQuantity: (val: any) => void;
+  note?: string;
+};
+
+const QuantityControl = (props: TProps) => {
+  const {
+    productData,
+    onClose,
+    selectedOject,
+    quantity,
+    setQuantity,
+    isUpdate,
+    note,
+  } = props;
+  const { changeProductQty } = useOrder();
+  const { getQuery } = useQueryParams();
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+
+  const [showKeyPad, setShowKeyPad] = useState(false);
+
+  const handleAddToCart = async (qty: number | string) => {
+    if (!productData) return;
+
+    try {
+      const attributesValue = selectedOject
+        ? Object.values(selectedOject).flat()
+        : [];
+      const pickAttributeValue = productData.attributeLines?.map(
+        (attributeLine: TAttributeLine) => {
+          return {
+            ...attributeLine,
+            value_string: attributeLine.value_string?.filter(
+              (attributeValue: any) =>
+                attributesValue?.includes(attributeValue.id)
+            ),
+          };
+        }
+      );
+      await changeProductQty({
+        product: {
+          ...productData,
+          attributeValueIds: attributesValue,
+          pickAttributeValue: pickAttributeValue,
+        },
+        qty: Number(qty),
+        orderId: Number(orderId),
+        note: note,
+      });
+      onClose();
+    } catch (error) {
+      console.log("error", error);
+    }
+  };
+
+  const onConfirm = (value: number) => handleAddToCart(value);
+
+  const onPlus = () => {
+    setQuantity((prev: any) => {
+      if (prev === "") return 1;
+      return prev + 1;
+    });
+  };
+
+  const onMinus = () => {
+    setQuantity((prev: any) => {
+      if (prev <= 1) {
+        return 1;
+      }
+      return prev - 1;
+    });
+  };
+
+  const onShowKeyPad = () => {
+    if (quantity === 1) {
+      setQuantity(1);
+    }
+    setShowKeyPad(true);
+  };
+
+  return (
+    <div className="flex flex-col gap-4 px-5 py-4">
+      <div className="flex items-center justify-between">
+        <button
+          onClick={() => handleAddToCart(0)}
+          style={{
+            boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
+          }}
+          className="w-12 aspect-square rounded-xl border border-stroke-disabled flex items-center justify-center"
+        >
+          <IcTrash />
+        </button>
+
+        <div className="flex items-center gap-2">
+          <ButtonIcon
+            onClick={onMinus}
+            iconSrc={<IcSubtractLine />}
+            className="rounded-full text-primary border-primary"
+          />
+
+          <input
+            type="number"
+            className="w-12 aspect-square text-center border-b-2 border-[--color-primary] outline-none"
+            value={quantity}
+            onChange={(e) => {
+              const val = e.target.value;
+              setQuantity(val === "" ? "" : Number(val));
+            }}
+            readOnly={false}
+            onClick={onShowKeyPad}
+          />
+
+          <ButtonIcon
+            onClick={onPlus}
+            iconSrc={<IcPlus />}
+            className="rounded-full text-white border-none bg-primary"
+          />
+        </div>
+
+        <ButtonAction
+          onClick={() => handleAddToCart(quantity)}
+          className="w-fit button-primary text-white"
+          text={isUpdate ? t("update") : t("add")}
+        />
+      </div>
+
+      {/* {showKeyPad && isAndroid && (
+        <SaleKeyPad
+          onConfirm={onConfirm}
+          onCancel={() => setShowKeyPad(false)}
+          quantity={quantity}
+          setQuantity={setQuantity}
+        />
+      )} */}
+    </div>
+  );
+};
+
+export default QuantityControl;

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

@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from "react";
+import { toast } from "react-toastify";
+
+const numberKeys = [...Array(9).keys()].map((key) => String(key + 1));
+
+export const SaleKeyPad = ({
+  onConfirm,
+  onCancel,
+  quantity,
+  setQuantity,
+}: {
+  onConfirm: (val: number) => void;
+  quantity: number | string;
+  setQuantity: (val: number) => void;
+  onCancel: () => void;
+}) => {
+  const [inputValue, setInputValue] = useState<string>("");
+  const ref = useRef<HTMLDivElement>(null);
+
+  const updateQuantity = (val: string) => {
+    setInputValue(val);
+    const num = val === "" ? 0 : Number(val);
+    setQuantity(num);
+  };
+
+  const handlePress = (val: string) => updateQuantity(inputValue + val);
+
+  const handleDelete = () => updateQuantity(inputValue.slice(0, -1));
+
+  const handleConfirm = () => onConfirm(Number(quantity));
+
+  useEffect(() => {
+    ref.current?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+
+  return (
+    <div ref={ref} className="flex justify-center gap-2 h-full">
+      <div className="grid grid-cols-3 gap-2 flex-1">
+        {numberKeys.map((num) => (
+          <button
+            key={num}
+            onClick={() => handlePress(num)}
+            className="h-[50px] w-full rounded-xl border border-stroke-default bg-surface-default flex items-center justify-center"
+          >
+            <p className="text-sm text-text-primary tracking-[-0.14px] font-medium ">
+              {num}
+            </p>
+          </button>
+        ))}
+
+        <button
+          onClick={() => toast.info("Coming soon")}
+          className="h-[50px] w-full rounded-xl border border-stroke-default bg-information flex items-center justify-center"
+        >
+          <p className="text-sm font-medium text-text-primary tracking-[-0.14px]">
+            .
+          </p>
+        </button>
+
+        <button
+          onClick={() => handlePress("0")}
+          className="h-[50px] w-full rounded-xl border border-stroke-default bg-surface-default flex items-center justify-center"
+        >
+          <p className="text-sm font-medium text-text-primary tracking-[-0.14px]">
+            0
+          </p>
+        </button>
+
+        <button
+          onClick={handleDelete}
+          className="h-[50px] w-full rounded-xl border border-stroke-default bg-red-50 flex items-center justify-center"
+        >
+          <p className="text-sm font-medium text-colored-error tracking-[-0.14px]">
+            ⌫
+          </p>
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-2 w-[141px] self-stretch">
+        <button
+          onClick={onCancel}
+          className="h-12 rounded-lg border border-stroke-disabled bg-white hover:bg-white"
+        >
+          <p className="font-bold text-sm leading-5 text-text-primary tracking-[-0.12px]">
+            Huỷ
+          </p>
+        </button>
+
+        <button
+          onClick={handleConfirm}
+          className="rounded-lg bg-brand-default flex-1"
+        >
+          <p className="text-sm font-bold leading-5 text-white tracking-[-0.12px]">
+            Đồng ý
+          </p>
+        </button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,65 @@
+import { VNCurrency } from "@components/common/header";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { useCartStore } from "@store/states/cart.state";
+import { TProduct } from "@type/product/product";
+import { getKey } from "@utils/functions";
+
+type Props = {
+  product: TProduct;
+  setShowModal: (value: boolean) => void;
+};
+
+export const ProductItem = ({ product, setShowModal }: Props) => {
+  const { changeProductQty } = useOrder();
+  const { setActiveProduct } = useCartStore();
+  const { getQuery } = useQueryParams();
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+
+  const onAddProductToCart = () => {
+    if (!orderId) setShowModal(true);
+
+    if (product.attributeLines && product.attributeLines?.length > 0) {
+      setActiveProduct({ id: getKey(product), isFromCart: false });
+      return;
+    }
+    changeProductQty({
+      product: product,
+      qty: 1,
+      orderId: Number(orderId),
+    });
+  };
+
+  return (
+    <>
+      <div
+        className="bg-white rounded-lg h-fit overflow-hidden cursor-pointer border border-black/4"
+        onClick={() => onAddProductToCart()}
+      >
+        <div className="relative">
+          <img
+            src={product.image_128}
+            alt={product.name}
+            className="w-full object-cover h-[81px] object-center z-0 relative"
+          />
+          <div
+            className="z-10 absolute size-full px-2 py-1 bottom-0 left-0 flex items-end"
+            style={{
+              background:
+                "linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.70) 100%)",
+            }}
+          >
+            <p className="text-white text-sm font-medium">
+              {product.display_name}
+            </p>
+          </div>
+        </div>
+        <p className="px-2 py-1 text-xs text-text-primary font-semibold">
+          {product.lst_price.toLocaleString()}
+          {VNCurrency}
+        </p>
+      </div>
+    </>
+  );
+};

package/src/components/pos-management/order-helper/cancel-order-confirm.tsx

@@ -0,0 +1,43 @@
+import ButtonAction from "@components/common/button-action";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { useTranslation } from "react-i18next";
+
+const CancelOrderConfirm = ({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) => {
+  const { t } = useTranslation();
+  const { handleCancelOrder } = useOrder();
+
+  return (
+    <ModalZoom
+      isOpen={isOpen}
+      onClose={onClose}
+      className="p-0 py-4 px-5"
+      modalClassName="w-[50%]"
+      title="Xác nhận hủy đơn hàng" //TODO
+      footer={
+        <div className="flex gap-2 justify-end p-4">
+          <ButtonAction
+            onClick={() => onClose()}
+            text={t("cancel_button")}
+            className="button-secondary w-full"
+          />
+          <ButtonAction
+            onClick={() => handleCancelOrder()}
+            text={t("confirm_button")}
+            className="button-primary w-full"
+          />
+        </div>
+      }
+    >
+      <p>Bạn có chắc muốn huỷ đơn hàng này không?</p>
+    </ModalZoom>
+  );
+};
+
+export default CancelOrderConfirm;

package/src/components/pos-management/order-helper/history-call.tsx

@@ -0,0 +1,105 @@
+import ModalZoom from "@components/common/modal/modal-zoom";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useKitchen } from "@provider/pos-provider/kitchen-provider";
+import { cn } from "@utils/functions";
+import { useMemo } from "react";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const HistoryCall = (props: Props) => {
+  const { isOpen, onClose } = props;
+  const { getQuery } = useQueryParams();
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+  const { displayDataQueryResult } = useKitchen();
+
+  const kitchenOrders: KitchenOrderType[] = useMemo(() => {
+    const orders = displayDataQueryResult?.data?.orders
+      ?.filter((item: any) => item?.pos_order_id === Number(orderId))
+      ?.map((item: any) => {
+        return {
+          order_lines: item.orderlines,
+          create_date: item.create_date,
+          stage_name: displayDataQueryResult?.data?.stages?.find(
+            (stage: any) => stage.id === item.stage_id
+          )?.name,
+        };
+      });
+    return orders;
+  }, [displayDataQueryResult, orderId]);
+
+  return (
+    <ModalZoom
+      isOpen={isOpen}
+      onClose={onClose}
+      className="p-0 py-4 px-5"
+      modalClassName="w-[60%]"
+      title={`Lịch sử gọi món`}
+    >
+      {kitchenOrders && kitchenOrders?.length > 0 ? (
+        <div className="border border-stroke-disabled flex flex-col rounded-lg">
+          {kitchenOrders?.map((order: KitchenOrderType, index: number) => {
+            return (
+              <div
+                className={`flex flex-col text-text-primary font-medium ${
+                  index > 0 && "border-t border-stroke-disabled"
+                }`}
+              >
+                <Cell
+                  text={order.create_date}
+                  className="text-sm font-semibold italic"
+                />
+                <div className="flex min-h-fit">
+                  <div className="flex flex-col flex-1">
+                    {order?.order_lines?.map((item: any, index: number) => (
+                      <div>
+                        <div className="flex border-t border-stroke-disabled">
+                          <Cell
+                            text={`x${item.product_quantity}`}
+                            className={`text-sm w-[100px] `}
+                          />
+                          <Cell
+                            text={item.product_name}
+                            className="text-sm flex-1 justify-start border-l border-stroke-disabled pl-5"
+                          />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="text-center py-10">Chưa có lịch sử gọi món</p>
+      )}
+    </ModalZoom>
+  );
+};
+
+type CellProps = {
+  text?: string;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+const Cell = (props: CellProps) => {
+  const { text, className, children } = props;
+  return (
+    <div
+      className={cn("flex justify-center items-center h-11 w-full", className)}
+    >
+      {children ?? text}
+    </div>
+  );
+};
+
+type KitchenOrderType = {
+  order_lines: any[];
+  create_date: string;
+  stage_name: string;
+};

package/src/components/pos-management/order-helper/order-helper-modal.tsx

@@ -0,0 +1,116 @@
+import FileCloseLineIcon from "@assets/icons/file-close-line-icon";
+import {
+  IcChangeTable,
+  IcHistoryCall,
+  IcNote,
+} from "@assets/icons/helper-icon";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import CancelOrderConfirm from "./cancel-order-confirm";
+import { HistoryCall } from "./history-call";
+
+type TProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+enum EOrderHelper {
+  CANCEL_ORDER = "cancel-order",
+  CHANGE_TABLE = "change-table",
+  HISTORY_CALL = "history-call",
+  NOTE_ORDER = "note-order",
+}
+
+const OPTIONS = [
+  {
+    id: 1,
+    label: "Lịch sử gọi món",
+    value: EOrderHelper.HISTORY_CALL,
+    icon: IcHistoryCall,
+  },
+  {
+    id: 2,
+    label: "Ghi chú đơn",
+    value: EOrderHelper.NOTE_ORDER,
+    icon: IcNote,
+  },
+  {
+    id: 3,
+    label: "Đổi bàn",
+    value: EOrderHelper.CHANGE_TABLE,
+    icon: IcChangeTable,
+  },
+  {
+    id: 4,
+    label: "Huỷ đơn",
+    value: EOrderHelper.CANCEL_ORDER,
+    icon: FileCloseLineIcon,
+  },
+];
+
+export const OrderHelperModal = ({ isOpen, onClose }: TProps) => {
+  const [showConfirmCancelOrder, setShowConfirmCancelOrder] = useState(false);
+  const [showHistoryCall, setHistoryCall] = useState(false);
+
+  const onShowComingSoon = () => toast.info("Đang phát triển");
+
+  const handleOptionClick = (value: EOrderHelper) => {
+    switch (value) {
+      case EOrderHelper.CANCEL_ORDER:
+        setShowConfirmCancelOrder(true);
+        onClose();
+        break;
+      case EOrderHelper.NOTE_ORDER:
+        onShowComingSoon();
+        break;
+      case EOrderHelper.CHANGE_TABLE:
+        onShowComingSoon();
+        break;
+      case EOrderHelper.HISTORY_CALL:
+        setHistoryCall(true);
+        onClose();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <>
+      <ModalZoom
+        isOpen={isOpen}
+        onClose={onClose}
+        className="border-[0.5px] border-stroke-disabled p-2 bg-neutral-100-96 rounded-xl"
+        modalClassName="w-[70%]"
+      >
+        <div className="grid grid-cols-2 gap-2 w-full">
+          {OPTIONS.map((option) => (
+            <button
+              key={option.id}
+              onClick={() => {
+                handleOptionClick(option.value);
+              }}
+              className="flex flex-col items-center gap-4 w-full h-[189px] rounded-2xl bg-white justify-center text-colored-primary"
+            >
+              <option.icon />
+              <span className="text-text-primary text-2xl font-semibold leading-8 tracking-[-0.24px]">
+                {option.label}
+              </span>
+            </button>
+          ))}
+        </div>
+      </ModalZoom>
+
+      {showConfirmCancelOrder && (
+        <CancelOrderConfirm
+          isOpen={showConfirmCancelOrder}
+          onClose={() => setShowConfirmCancelOrder(false)}
+        />
+      )}
+      {showHistoryCall && (
+        <HistoryCall isOpen onClose={() => setHistoryCall(false)} />
+      )}
+    </>
+  );
+};

package/src/components/pos-management/payment-content/bill/actions.tsx

@@ -0,0 +1,46 @@
+// import { IcPlus, IcPrint } from "@assets/icons/breadcrumbs-icon"
+// import ButtonAction from "@components/common/button-action"
+// import { QUERY_KEYS } from "@constants/query.constant"
+// import { useQueryParams } from "@hooks/common/use-query-params"
+// import { useOrder } from "@provider/pos-provider/order-provider"
+
+// const Actions = ({
+//   // handlePrintBase64,
+//   handlePrintText,
+//   setShowBill,
+// }: {
+//   // handlePrintBase64: () => void
+//   handlePrintText: () => void
+//   setShowBill: (e: boolean) => void
+// }) => {
+//   const { handleCreateOrder } = useOrder()
+//   const { getQuery } = useQueryParams()
+//   const tableId = getQuery(QUERY_KEYS.TABLE_ID)
+//   const { updateQuery } = useQueryParams()
+
+//   const onCreateNewOrder = async () => {
+//     await handleCreateOrder(Number(tableId), (orderId: number) => {
+//       updateQuery(QUERY_KEYS.ORDER_ID, orderId.toString())
+//       setShowBill(false)
+//     })
+//   }
+
+//   return (
+//     <div className="flex items-center justify-center gap-2.5">
+//       <ButtonAction
+//         iconSrc={<IcPlus />}
+//         onClick={onCreateNewOrder}
+//         text="Tạo đơn mới"
+//         className="button-primary"
+//       />
+//       <ButtonAction
+//         iconSrc={<IcPrint />}
+//         onClick={handlePrintText}
+//         text="In hoá đơn"
+//         className="button-secondary"
+//       />
+//     </div>
+//   )
+// }
+
+// export default Actions