sme-pos-package 1.0.14 → 1.0.15

package/src/components/pos-management/pos-helpers/index.tsx

@@ -1,135 +0,0 @@
-import { IcBackPos, IcLayout } from "@assets/icons/helper-icon";
-import LogoutBoxLineIcon from "@assets/icons/logout-box-line-icon";
-import PrinterLineIcon from "@assets/icons/printer-line-icon";
-import ModalZoom from "@components/common/modal/modal-zoom";
-import CloseSessionModal from "@components/session-management/close-session-modal";
-import { QUERY_KEYS } from "@constants/query.constant";
-import { useQueryParams } from "@hooks/common/use-query-params";
-import { useCloseSession } from "@provider/pos-provider/close-session-provider";
-import { useSessionStore } from "@store/session";
-import { useState } from "react";
-import { toast } from "react-toastify";
-import { BackConfirm } from "./back-confirm";
-import LayoutDisplayModal from "./layout-display-modal";
-
-type TProps = {
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-enum PosHelper {
-  SETTING_PRINT = "setting-print",
-  LAYOUT_DISPLAY = "layout-display",
-  CLOSE_SESSION = "close-session",
-  BACK_POS = "back-pos",
-}
-
-const OPTIONS = [
-  {
-    id: 1,
-    label: "Bố cục hiển thị",
-    value: PosHelper.LAYOUT_DISPLAY,
-    icon: IcLayout,
-  },
-  {
-    id: 2,
-    label: "Cài đặt máy in",
-    value: PosHelper.SETTING_PRINT,
-    icon: PrinterLineIcon,
-  },
-  {
-    id: 3,
-    label: "Trở về điểm bán",
-    value: PosHelper.BACK_POS,
-    icon: IcBackPos,
-  },
-  {
-    id: 4,
-    label: "Đóng ca",
-    value: PosHelper.CLOSE_SESSION,
-    icon: LogoutBoxLineIcon,
-  },
-];
-
-export const PosHelperModal = ({ isOpen, onClose }: TProps) => {
-  const { setStep, step } = useSessionStore();
-  const { updateQuery } = useQueryParams();
-
-  const { getDataCloseSessionQuery, draftInPaidOrders } = useCloseSession();
-
-  const [showWarning, setShowWarning] = useState(false);
-  const [showLayoutDisplay, setShowLayoutDisplay] = useState(false);
-
-  const onShowComingSoon = () => toast.info("Đang phát triển");
-
-  const handleCloseSession = async () => {
-    updateQuery(QUERY_KEYS.OPEN, QUERY_KEYS.CLOSE_SESSION);
-    await getDataCloseSessionQuery.refetch();
-    if (draftInPaidOrders.length > 0) setStep(1);
-    else setStep(3);
-  };
-
-  const onShowLayoutDisplay = () => {
-    setShowLayoutDisplay(true);
-    onClose();
-  };
-
-  const handleOptionClick = (value: PosHelper) => {
-    switch (value) {
-      case PosHelper.BACK_POS:
-        setShowWarning(true);
-        break;
-      case PosHelper.SETTING_PRINT:
-        onShowComingSoon();
-        break;
-      case PosHelper.LAYOUT_DISPLAY:
-        onShowLayoutDisplay();
-        break;
-      case PosHelper.CLOSE_SESSION:
-        handleCloseSession();
-        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">
-          {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>
-
-      <BackConfirm isOpen={showWarning} onClose={() => setShowWarning(false)} />
-
-      {showLayoutDisplay && (
-        <LayoutDisplayModal
-          isOpen={showLayoutDisplay}
-          onClose={() => setShowLayoutDisplay(false)}
-        />
-      )}
-
-      {step > 0 && <CloseSessionModal />}
-    </>
-  );
-};

package/src/components/pos-management/pos-helpers/layout-display-modal.tsx

@@ -1,99 +0,0 @@
-import Image from "@components/common/image";
-import ModalZoom from "@components/common/modal/modal-zoom";
-import useHeaderStore from "@store/header";
-import { cn } from "@utils/functions";
-import { localStorageUtils } from "@utils/storages";
-import { useState } from "react";
-
-type TProps = {
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-const LAYOUT_OPTIONS = [
-  {
-    value: "left",
-    imageUrl: "/assets/images/layout-display/left-layout.png",
-    label: "Đơn hàng bên trái",
-  },
-  {
-    value: "right",
-    imageUrl: "/assets/images/layout-display/right-layout.png",
-    label: "Đơn hàng bên phải",
-  },
-];
-
-const LayoutDisplayModal = ({ isOpen, onClose }: TProps) => {
-  const layoutDisplayLocal = localStorageUtils.getLayoutDisplay();
-
-  const [layoutSelected, setLayoutSelected] = useState(
-    layoutDisplayLocal || "left"
-  );
-
-  const { setLayoutDisplay } = useHeaderStore();
-
-  const handleChooseLayout = () => {
-    setLayoutDisplay(layoutSelected as "left" | "right");
-    localStorageUtils.setLayoutDisplay(layoutSelected as "left" | "right");
-    onClose();
-  };
-
-  return (
-    <ModalZoom
-      isOpen={isOpen}
-      onClose={onClose}
-      modalClassName="rounded-2xl border-[0.5px] border-stroke-disabled bg-white w-[600px]"
-      title="Tuỳ chỉnh bố cục hiển thị"
-      headerClassName="px-5 py-4 border-b border-stroke-disabled"
-      className="px-5 py-4"
-    >
-      <div className="flex flex-col gap-4">
-        <p className="text-text-primary font-medium leading-6 tracking-[-0.24px]">
-          Chọn vị trí hiển thị thông tin đơn hàng theo sở thích của bạn
-        </p>
-
-        <div className="flex items-center justify-center w-full gap-6">
-          {LAYOUT_OPTIONS.map((item, index) => (
-            <div className="flex flex-col gap-3">
-              <div
-                key={index}
-                style={{
-                  boxShadow:
-                    item.value === layoutSelected
-                      ? "0 0 0 3px rgba(255, 138, 0, 0.24)"
-                      : "",
-                }}
-                onClick={() =>
-                  setLayoutSelected(item.value as "left" | "right")
-                }
-                className={cn("flex-1 border-stroke-disabled rounded-[20px]", {
-                  "border-primary border-2 p-2 ": layoutSelected === item.value,
-                  "p-[9px]": layoutSelected !== item.value,
-                })}
-              >
-                <Image imageUrl={item.imageUrl} className="w-full" />
-              </div>
-
-              <p className="font-medium leading-6 text-center text-text-primary tracking-[-0.24px]">
-                {item.label}
-              </p>
-            </div>
-          ))}
-        </div>
-
-        <div className="w-full flex justify-end">
-          <button
-            className="w-[200px] h-11 bg-primary text-text-primary rounded-lg"
-            onClick={handleChooseLayout}
-          >
-            <span className="text-sm font-semibold leading-5 tracking-[-0.12px]">
-              Lưu
-            </span>
-          </button>
-        </div>
-      </div>
-    </ModalZoom>
-  );
-};
-
-export default LayoutDisplayModal;

package/src/components/pos-management/search.tsx

@@ -1,48 +0,0 @@
-import { IcSearch } from "@assets/icons/breadcrumbs-icon"
-import { IcClose } from "@assets/icons/common"
-
-type TProps = {
-  onClose: () => void
-  searchValue: string
-  onSearchChange: (value: string) => void
-  placeholder: string
-  isNumericMode?: boolean
-}
-
-const Search = ({
-  onClose,
-  searchValue,
-  onSearchChange,
-  placeholder,
-  isNumericMode = false,
-}: TProps) => {
-  const handleClose = () => {
-    onClose()
-    onSearchChange("")
-  }
-
-  return (
-    <div className="w-full pl-4 h-[60px] flex items-center gap-2 bg-white pr-[6px] text-tertiary border-b-2 border-primary">
-      <IcSearch />
-
-      <input
-        inputMode={isNumericMode ? "numeric" : "text"}
-        pattern={isNumericMode ? "[0-9]*" : undefined}
-        value={searchValue}
-        onChange={(e) =>
-          onSearchChange(
-            isNumericMode ? e.target.value.replace(/\D/g, "") : e.target.value
-          )
-        }
-        className="flex-1 font-medium leading-6 text-text-primary tracking-[-0.24px] placeholder:text-tertiary outline-none border-none"
-        placeholder={placeholder}
-      />
-
-      <button onClick={handleClose}>
-        <IcClose />
-      </button>
-    </div>
-  )
-}
-
-export default Search

package/src/components/pos-management/table-content/filtered-tables.tsx

@@ -1,59 +0,0 @@
-import { EmptyState } from "@components/common/empty-state";
-import { usePosTable } from "@provider/pos-provider/table-provider";
-import { TMapedTable } from "@type/table";
-import { cn } from "@utils/functions";
-import { TableItem } from "./table-item";
-
-type TProps = {
-  filteredFloors: any[];
-  searchValue?: string;
-};
-
-const FilteredTables = ({ filteredFloors, searchValue }: TProps) => {
-  const { mapTablesWithOrder } = usePosTable();
-
-  return (
-    <div
-      className={cn("z-0 w-full h-full p-4 overflow-y-auto flex-1 ", {
-        "bg-white": filteredFloors && filteredFloors.length > 0,
-      })}
-    >
-      {filteredFloors && filteredFloors.length > 0 ? (
-        <div className="flex flex-col gap-4">
-          {filteredFloors.map((floor) => {
-            return (
-              <div className="flex flex-col gap-4" key={floor.id}>
-                <p className="px-2 py-1 rounded bg-neutral-100-96">
-                  <span className="font-semibold text-text-primary leading-6 tracking-[-0.24px]">
-                    {floor.name}
-                  </span>
-                </p>
-                {mapTablesWithOrder?.map((item: TMapedTable) => (
-                  <div
-                    key={item.table.id}
-                    className="grid gap-5 grid-cols-[repeat(auto-fill,minmax(157px,1fr))]"
-                  >
-                    <TableItem key={item.table.id} tableCard={item} />
-                  </div>
-                ))}
-              </div>
-            );
-          })}
-        </div>
-      ) : searchValue ? (
-        <div className="z-0 h-full">
-          <EmptyState
-            image="/assets/images/empty-table-state.png"
-            imageAlt="No table"
-            description="Không có bàn bạn tìm kiếm"
-            imageClassName="w-[342px] h-[320px]"
-          />
-        </div>
-      ) : (
-        ""
-      )}
-    </div>
-  );
-};
-
-export default FilteredTables;

package/src/components/pos-management/table-content/floor-tabs.tsx

@@ -1,65 +0,0 @@
-import { IcSearch } from "@assets/icons/breadcrumbs-icon";
-import IcHomeGearLine from "@assets/icons/home-gear-line-icon";
-import { ButtonIcon } from "@components/common/button-icon";
-import { QUERY_KEYS } from "@constants/query.constant";
-import { TFloor } from "@type/floor/floor";
-import { Dispatch, SetStateAction } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { RefreshButton, TabsLayout } from "../../common/tabs-layout";
-import POSPath from "@constants/routes.constants";
-
-export const FloorTabs = ({
-  floorData,
-  onRefresh,
-  setOpenSearch,
-}: {
-  floorData: TFloor[];
-  onRefresh: () => void;
-  setOpenSearch: Dispatch<SetStateAction<boolean>>;
-}) => {
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-
-  return (
-    <>
-      {floorData.length > 0 && (
-        <TabsLayout
-          tabs={floorData.map((floor) => ({
-            id: floor.id,
-            name: floor.name,
-          }))}
-          queryKey={QUERY_KEYS.FLOOR}
-          rightButton={
-            <>
-              <ButtonIcon
-                onClick={() => {
-                  setOpenSearch(true);
-                }}
-                iconSrc={<IcSearch />}
-              />
-              <RefreshButton onRefresh={onRefresh} />
-            </>
-          }
-          alwaysShowButton={
-            <div
-              id="create-first-table"
-              data-menu-id={32}
-              data-menu-level={1}
-              data-tooltip-id={`menu-${32}`}
-            >
-              <ButtonIcon
-                onClick={() =>
-                  navigate({
-                    pathname: POSPath.MANAGEMENT_FLOOR,
-                    search: searchParams.toString(),
-                  })
-                }
-                iconSrc={<IcHomeGearLine />}
-              />
-            </div>
-          }
-        />
-      )}
-    </>
-  );
-};

package/src/components/pos-management/table-content/index.tsx

@@ -1,76 +0,0 @@
-import Search from "@components/pos-management/search";
-import { FloorTabs } from "@components/pos-management/table-content/floor-tabs";
-import { AddTableModal } from "@components/restaurant-management/add-table-modal";
-import { useFloor } from "@provider/pos-provider/floor-provider";
-import { driver } from "driver.js";
-import { useEffect, useMemo, useState } from "react";
-import FilteredTables from "./filtered-tables";
-import Tables from "./tables";
-
-const TableContent = () => {
-  const { floors: floorData } = useFloor();
-  const [searchValue, setSearchValue] = useState("");
-  const [openSearch, setOpenSearch] = useState(false);
-  const [isOpenAddModal, setIsOpenAddModal] = useState(false);
-
-  const filteredFloors = useMemo(() => {
-    if (!floorData) return [];
-
-    if (!searchValue) return [];
-
-    return floorData;
-  }, [floorData, searchValue]);
-
-  useEffect(() => {
-    const numberTable = floorData.reduce((acc: number, floor: any) => {
-      return acc + floor?.table_ids?.length;
-    }, 0);
-
-    if (numberTable && numberTable < 1) {
-      const driverObj = driver();
-      driverObj.highlight({
-        element: "#create-first-table",
-        popover: {
-          title: "Tạo bàn đầu tiên",
-          description:
-            "Có vẻ như bạn chưa có bàn nào. Để tạo một bàn mới hãy nhấp vào biểu tượng ngôi nhà",
-        },
-      });
-    }
-  }, [floorData]);
-
-  return (
-    <div className="flex flex-col flex-1 size-full bg-white">
-      {openSearch ? (
-        <Search
-          onClose={() => setOpenSearch(false)}
-          searchValue={searchValue}
-          onSearchChange={setSearchValue}
-          placeholder="Tìm kiếm bàn"
-          isNumericMode
-        />
-      ) : (
-        <FloorTabs
-          floorData={floorData}
-          onRefresh={() => {}}
-          setOpenSearch={setOpenSearch}
-        />
-      )}
-
-      {!openSearch && <Tables onOpenAddModal={() => setIsOpenAddModal(true)} />}
-      {openSearch && (
-        <FilteredTables
-          filteredFloors={filteredFloors}
-          searchValue={searchValue}
-        />
-      )}
-
-      <AddTableModal
-        isOpen={isOpenAddModal}
-        onClose={() => setIsOpenAddModal(false)}
-      />
-    </div>
-  );
-};
-
-export default TableContent;

package/src/components/pos-management/table-content/table-item.tsx

@@ -1,127 +0,0 @@
-import { IcAvailableTable, IcSeatTable } from "@assets/icons/table-icon";
-import Image from "@components/common/image";
-import { QUERY_KEYS } from "@constants/query.constant";
-import { useQueryParams } from "@hooks/common/use-query-params";
-import { useOrder } from "@provider/pos-provider/order-provider";
-import { TMapedTable } from "@type/table";
-import { cn } from "@utils/functions";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-
-export const TableItem = ({ tableCard }: { tableCard: TMapedTable }) => {
-  const { table, isTakeAway, currentOrder } = tableCard;
-  const { t } = useTranslation();
-  const { getQuery, updateMultipleQuery } = useQueryParams();
-  const tableId = getQuery(QUERY_KEYS.TABLE_ID);
-  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
-  const { handleCreateOrder, draftOrders } = useOrder();
-  const isActiveTable = useMemo(() => {
-    return ((currentOrder
-      ? currentOrder?.id?.toString() === orderId
-      : isTakeAway && !tableId && orderId) ?? false) as boolean;
-  }, [tableId, orderId, currentOrder]);
-
-  const takeAwayOrders = useMemo(() => {
-    return draftOrders.filter((order) => !order.table_id);
-  }, [draftOrders]);
-
-  const onClickTableItem = (table: TMapedTable) => {
-    if (table.isTakeAway) {
-      if (takeAwayOrders.length == 0) {
-        onCreateOrder();
-      } else if (tableId) {
-        updateMultipleQuery([
-          {
-            key: QUERY_KEYS.ORDER_ID,
-            value: String(takeAwayOrders[0]?.id),
-          },
-          {
-            key: QUERY_KEYS.TABLE_ID,
-            value: "",
-          },
-        ]);
-      }
-    } else if (table.currentOrder) {
-      updateMultipleQuery([
-        {
-          key: QUERY_KEYS.ORDER_ID,
-          value: table.currentOrder?.id?.toString() ?? "",
-        },
-        {
-          key: QUERY_KEYS.TABLE_ID,
-          value: table.table.id != 0 ? table.table.id?.toString() : "",
-        },
-      ]);
-    } else onCreateOrder(table.table.id);
-  };
-
-  const onCreateOrder = (tableId?: number) => {
-    handleCreateOrder(tableId);
-  };
-
-  return (
-    <div
-      className={cn(
-        "rounded-xl size-full flex flex-col items-center px-2 pb-2 gap-2 h-[100px] cursor-pointer",
-        {
-          "border-sub-secondary border": !currentOrder,
-        }
-      )}
-      style={{
-        background: isTakeAway
-          ? "var(--text-take-away-color)"
-          : currentOrder
-          ? "var(--text-unavailable-table-color)"
-          : "white",
-        boxShadow: isActiveTable ? `0 0 0 2px #FFF, 0 0 0 4px #0101FF` : "",
-      }}
-      onClick={() => onClickTableItem(tableCard)}
-    >
-      <div
-        className={`w-[110px] h-6 px-2 rounded-b-xl flex text-sm font-semibold items-center ${
-          !isTakeAway && !currentOrder ? "bg-neutral-100-96" : "bg-white"
-        } ${isTakeAway ? "justify-center" : "justify-between"} `}
-      >
-        <p className=" text-text-primary">
-          {isTakeAway ? "Mang đi" : `${t("table")} ${table.table_number}`}
-        </p>
-        {!isTakeAway && (
-          <div className="flex gap-1 items-center text-text-active">
-            <IcSeatTable />
-            <p className="text-sm font-semibold">{table.seats}</p>
-          </div>
-        )}
-      </div>
-      <div
-        className={`flex-1 w-full rounded-lg flex items-center justify-center  ${
-          !isTakeAway && !currentOrder
-            ? "bg-[#FAFAFA] border-dashed border-stroke-disabled border text-text-active"
-            : "bg-white "
-        }`}
-      >
-        {isTakeAway ? (
-          <div className="flex items-center gap-[10px]">
-            <Image
-              imageUrl="/assets/images/take-away.png"
-              className="w-12 aspect-square"
-            />
-            <p className="text-sm font-medium text-text-primary">
-              {takeAwayOrders?.length ?? 0} đơn
-            </p>
-          </div>
-        ) : currentOrder ? (
-          <div className="flex flex-col gap-1 items-center justify-center">
-            <p className="text-sm font-medium text-text-disable leading-5 tracking-[-0.12px] text-text-active">
-              Đơn hàng
-            </p>
-            <p className="text-text-primary text-[18px] font-semibold leading-6">
-              #{currentOrder?.id}
-            </p>
-          </div>
-        ) : (
-          <IcAvailableTable />
-        )}
-      </div>
-    </div>
-  );
-};