sme-pos-package 1.0.14 → 1.0.15

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

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

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

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

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

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

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

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