sme-pos-package 1.0.14 → 1.0.15

package/src/components/customer-management/customer-info-drawer.tsx

@@ -1,166 +0,0 @@
-import { IcPencil } from "@assets/icons/common";
-import { IcCustomer } from "@assets/icons/user-icon";
-import Input from "@components/common/input";
-import ModalDirection from "@components/common/modal/modal-direction";
-import { QUERY_KEYS } from "@constants/query.constant";
-import { Button } from "@headlessui/react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useQueryParams } from "@hooks/common/use-query-params";
-import { useCustomer } from "@provider/pos-provider/customer-provider";
-import { useSale } from "@provider/pos-provider/sale-provider";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { toast } from "react-toastify";
-import z from "zod";
-
-const schema = z.object({
-  phone: z.string(),
-  name: z.string().min(1, "Tên khách hàng là bắt buộc"),
-  email: z.string(),
-});
-
-type TProps = {
-  setCustomerPhoneNumber: Dispatch<SetStateAction<string>>;
-};
-
-export const CustomerInfoDrawer = (props: TProps) => {
-  const { setCustomerPhoneNumber } = props;
-  const { t } = useTranslation();
-  const { getQuery, removeParams } = useQueryParams();
-  const { getCustomer, updateCustomer } = useCustomer();
-  const { queryResult } = useSale();
-  const isOpen = getQuery(QUERY_KEYS.OPEN) === QUERY_KEYS.CUSTOMER_INFO;
-  const onClose = () => removeParams([QUERY_KEYS.OPEN, QUERY_KEYS.CUSTOMER_ID]);
-  const customerId = getQuery(QUERY_KEYS.CUSTOMER_ID);
-
-  const [isEditing, setIsEditing] = useState(false);
-
-  const { handleSubmit, register, setValue, getValues } = useForm({
-    defaultValues: {
-      phone: "",
-      name: "",
-      email: "",
-    },
-    resolver: zodResolver(schema),
-  });
-
-  const onGetCustomer = async () => {
-    const data: any = await getCustomer.mutateAsync({
-      customerId: Number(customerId),
-    });
-
-    setValue("phone", data[0]?.phone);
-    setValue("name", data[0]?.name);
-    setValue("email", data[0]?.email);
-  };
-
-  const onSubmit = handleSubmit(async (data) => {
-    try {
-      await updateCustomer.mutateAsync({
-        id: Number(customerId),
-        name: data.name,
-        phone: data.phone,
-        email: data.email,
-      });
-      setCustomerPhoneNumber("");
-
-      await queryResult.refetch();
-
-      toast.success(t("updateCustomerSuccess"));
-
-      onClose();
-    } catch (error) {
-      console.log(error);
-    }
-  });
-
-  const handleClose = () => {
-    setIsEditing(false);
-    onClose();
-  };
-
-  useEffect(() => {
-    onGetCustomer();
-  }, [customerId]);
-
-  return (
-    <ModalDirection
-      isOpen={isOpen}
-      onClose={handleClose}
-      direction="right"
-      title={t("detail_customer")}
-      className="max-w-md bg-white font-medium"
-    >
-      <form
-        onSubmit={onSubmit}
-        className="flex flex-col items-center gap-4 h-full"
-      >
-        <div className="flex-1 flex flex-col gap-6 w-full">
-          <div className="flex flex-col gap-4 items-center justify-center">
-            <div className="w-[88px] h-[88px] rounded-full bg-brand-50 flex items-center justify-center text-brand-default">
-              <span>
-                <IcCustomer />
-              </span>
-            </div>
-
-            <p className="text-lg font-semibold leading-[26px] text-text-primary">
-              {isEditing ? getValues("phone") : getValues("name")}
-            </p>
-          </div>
-
-          <div className="flex flex-col gap-6">
-            <Input
-              title={isEditing ? "Tên khách hàng" : "SĐT khách hàng"}
-              register={register(isEditing ? "name" : "phone")}
-              disabled={!isEditing}
-            />
-
-            <Input
-              title="Email"
-              register={register("email")}
-              disabled={!isEditing}
-            />
-
-            {!isEditing && (
-              <Button
-                onClick={() => setIsEditing(true)}
-                className="bg-neutral-50-98 rounded flex items-center justify-center gap-2 h-11 w-full"
-              >
-                <IcPencil />
-                <p className="text-sm font-medium leading-5 text-text-primary tracking-[-0.12px]">
-                  {t("edit_info")}
-                </p>
-              </Button>
-            )}
-          </div>
-        </div>
-
-        <div
-          className={`w-full flex ${
-            !isEditing ? "flex-col" : "flex-row-reverse"
-          } gap-2`}
-        >
-          <Button
-            type="submit"
-            disabled={updateCustomer.isPending || queryResult.isFetching}
-            className="w-full bg-brand-default py-2 h-9 rounded-md"
-          >
-            <p className="text-sm text-white font-medium leading-5 tracking-[-0.12px]">
-              {isEditing ? "Lưu" : t("choose_customer")}
-            </p>
-          </Button>
-
-          <Button
-            onClick={isEditing ? () => setIsEditing(false) : onClose}
-            className="w-full border border-stroke-disabled py-2 h-9 rounded-md"
-          >
-            <p className="text-sm text-text-primary font-medium leading-5 tracking-[-0.12px]">
-              {t("cancel")}
-            </p>
-          </Button>
-        </div>
-      </form>
-    </ModalDirection>
-  );
-};

package/src/components/customer-management/customer-no-data.tsx

@@ -1,18 +0,0 @@
-import { UserLineIcon } from "@assets/icons/user-icon";
-import { useTranslation } from "react-i18next";
-
-const CustomerNoData = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div className="flex flex-col items-center justify-center gap-6">
-      <UserLineIcon />
-
-      <p className="text-xs px-10 text-center leading-4 text-text-secondary">
-        {t("customerNotFound")}
-      </p>
-    </div>
-  );
-};
-
-export default CustomerNoData;

package/src/components/emenu/emenu-qr-code.tsx

@@ -1,59 +0,0 @@
-import { IcClose } from "@assets/icons/common";
-import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
-import { QRCodeSVG } from "qrcode.react";
-import { useMemo } from "react";
-import ModalZoom from "../common/modal/modal-zoom";
-import { usePosAppProvider } from "@provider/app-provider";
-
-type TProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  tableId: number;
-};
-
-const EMenuQrCode = ({ isOpen, onClose, tableId }: TProps) => {
-  const { user } = usePosAppProvider();
-  const { getData } = useSale();
-
-  const shortName = useMemo(() => user?.userProfile?.data.short_name, [user]);
-  const posConfigData = getData(LoadDataModel.POS_CONFIG);
-
-  const posConfig = useMemo(() => {
-    return {
-      emenuUrl: posConfigData?.[0]?.emenu_url,
-      slugName: posConfigData?.[0]?.slug_name,
-    };
-  }, [posConfigData]);
-
-  const eMenuLink = `${posConfig.emenuUrl}/${shortName}/${posConfig.slugName}/${tableId}`;
-
-  return (
-    <ModalZoom isOpen={isOpen} onClose={onClose} className="p-6 w-[420px]">
-      <div className="flex flex-col gap-6">
-        <div className="flex items-center justify-between">
-          <p className="text-xl font-semibold leading-7 text-text-primary tracking-[-0.2px]">
-            Mã QR E-Emenu
-          </p>
-
-          <button onClick={onClose}>
-            <IcClose className="text-text-primary" />
-          </button>
-        </div>
-
-        {eMenuLink && (
-          <div className="flex items-center justify-center">
-            <QRCodeSVG
-              value={eMenuLink}
-              size={256}
-              bgColor={"#ffffff"}
-              fgColor={"#000000"}
-              level={"L"}
-            />
-          </div>
-        )}
-      </div>
-    </ModalZoom>
-  );
-};
-
-export default EMenuQrCode;

package/src/components/emenu/menu-link.tsx

@@ -1,67 +0,0 @@
-import { IcCopy } from "@assets/icons/common";
-import { IcCheck, IcQR } from "@assets/icons/emenu-icon";
-import { copyLinkButtonController } from "@fctc/widget-logic/widget";
-import { QRCodeSVG } from "qrcode.react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import ModalZoom from "../common/modal/modal-zoom";
-import { usePosAppProvider } from "@provider/app-provider";
-
-const EMenuLink = (props: any) => {
-  const { formValues, pos_slug_key, value } = props;
-  const { t } = useTranslation();
-  const { user } = usePosAppProvider();
-  const [isOpenQr, setIsOpenQr] = useState(false);
-  const dataUser = user?.userProfile?.data;
-
-  const eMenuLink = `${value}/${dataUser?.short_name}/${formValues?.[pos_slug_key]}`;
-
-  const { handleCopyToClipboard, isCopied } = copyLinkButtonController({
-    value: eMenuLink,
-    defaultValue: eMenuLink,
-  });
-
-  return (
-    <div className="flex items-center justify-center gap-2">
-      <div className="border border-stroke-disabled rounded-lg flex max-w-[400px]">
-        <span className="p-[10px] border-r border-stroke-disabled text-sm font-medium text-tertiary truncate line-clamp-1 ">
-          {eMenuLink}
-        </span>
-        <button
-          className="cursor-pointer p-[12px]"
-          type="button"
-          onClick={() => handleCopyToClipboard(eMenuLink as string)}
-        >
-          {isCopied ? <IcCheck /> : <IcCopy />}
-        </button>
-      </div>
-      <button
-        type="button"
-        onClick={() => setIsOpenQr(!isOpenQr)}
-        className="p-[10px] border border-stroke-disabled rounded-xl"
-      >
-        <IcQR />
-      </button>
-      <ModalZoom
-        isOpen={isOpenQr}
-        onClose={() => setIsOpenQr(!isOpenQr)}
-        title={t("qr_e_menu")}
-        className=""
-      >
-        {eMenuLink && (
-          <div className="flex flex-col items-center gap-6">
-            <QRCodeSVG
-              value={eMenuLink}
-              size={220}
-              bgColor={"#ffffff"}
-              fgColor={"#000000"}
-              level={"L"}
-            />
-          </div>
-        )}
-      </ModalZoom>
-    </div>
-  );
-};
-
-export default EMenuLink;

package/src/components/index.ts

@@ -1,8 +0,0 @@
-export { default as EMenuLink } from "./emenu/menu-link";
-export { default as KitchenTemplate } from "./kanban-template/kitchen-template";
-export { default as PosOrderTemplate } from "./kanban-template/pos-order-template";
-export { default as PosTemplate } from "./kanban-template/pos-template";
-export { default as OpenSessionModal } from "./session-management/open-shift";
-
-export { default as ProductContent } from "./pos-management/menu-content/product-content";
-export { default as TableContent } from "./pos-management/table-content/index";

package/src/components/kanban-template/kitchen-template.tsx

@@ -1,60 +0,0 @@
-import { Line } from "@assets/icons/customer-view-icon";
-import ButtonAction from "@components/common/button-action";
-import KitchenStatus from "@components/kitchen-management/kitchen-status";
-import POSPath from "@constants/routes.constants";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { generatePath, useNavigate } from "react-router-dom";
-
-type TProps = {
-  columns: any[];
-  row: any;
-  onClickRow: any;
-};
-
-const KitchenTemplate = ({ columns, row, onClickRow }: TProps) => {
-  const navigate = useNavigate();
-  const kitchenId = useMemo(() => row["id"], [row]);
-  const { t } = useTranslation();
-
-  const onNavigateToOrderList = () => {
-    sessionStorage.setItem(
-      "enter_pincode",
-      window.location.href.split("console")[1]
-    );
-    localStorage.setItem("backUrl", window.location.href.split("console")[1]);
-    navigate(
-      `${generatePath(POSPath.ORDERS_KITCHEN_MANAGEMENT, { kitchenId })}?`
-    );
-  };
-
-  return (
-    <div
-      style={{
-        boxShadow: "0 2px 4px 0 rgba(27, 28, 29, 0.04)",
-      }}
-      className="p-4 rounded-2xl bg-white flex flex-col gap-4 h-fit border border-stroke-disabled"
-      onClick={() => onClickRow(columns, row)}
-    >
-      <div className="flex flex-col gap-2">
-        <p className="font-semibold leading-6 tracking-[-0.24px] text-strong-950">
-          {row["name"]}
-        </p>
-        <KitchenStatus stages={row["stage_ids"]} />
-      </div>
-
-      <Line />
-
-      <ButtonAction
-        onClick={(e) => {
-          e.stopPropagation();
-          onNavigateToOrderList();
-        }}
-        className="rounded-[6px] bg-primary h-11"
-        text={t("detail_button")}
-      />
-    </div>
-  );
-};
-
-export default KitchenTemplate;

package/src/components/kanban-template/pos-order-template.tsx

@@ -1,77 +0,0 @@
-import { Line } from "@assets/icons/customer-view-icon";
-import { FileListIcon } from "@assets/icons/order-icon";
-import OrderActions from "@components/order-management/order-actions";
-import OrderStatus from "@components/order-management/order-status";
-import { dd_mm_yyyy, hh_mm, formatOrderPrice } from "@utils/functions";
-import { useMemo } from "react";
-
-const PosOrderTemplate = ({
-  readOnly,
-  row,
-  handleClick,
-  onAddItem,
-  onPayment,
-  onIssueInvoice,
-  onPrintInvoice,
-}: {
-  readOnly?: boolean;
-  row: any;
-  handleClick: () => void;
-  onAddItem?: () => void;
-  onPayment?: () => void;
-  onIssueInvoice?: () => void;
-  onPrintInvoice?: () => void;
-}) => {
-  const orderDate: Date = useMemo(() => new Date(row["date_order"]), [row]);
-  return (
-    <div
-      onClick={() => handleClick()}
-      className="p-4 h-fit flex-1 rounded-2xl bg-white flex flex-col gap-3"
-    >
-      <div className="flex items-center justify-center gap-3">
-        <div className="w-14 aspect-square rounded-lg bg-neutral-100-96 flex items-center justify-center">
-          <FileListIcon />
-        </div>
-
-        <div className="flex flex-col flex-1 gap-2 justify-center">
-          <div className="flex items-center justify-between">
-            <p className="font-bold leading-6 text-text-primary tracking-[-0.16px]">
-              #{row["id"]}
-            </p>
-
-            <OrderStatus status={row["state"]} />
-          </div>
-
-          <p className="text-sm leading-5 text-text-secondary tracking-[-0.12px]">
-            {dd_mm_yyyy(orderDate)}{" "}
-            <span className="text-text-secondary">• {hh_mm(orderDate)}</span>
-          </p>
-        </div>
-      </div>
-
-      <div className="relative">
-        <div className="h-4 aspect-square bg-weak-50 rounded-full absolute -left-6 -top-2" />
-        <Line />
-
-        <div className="h-4 aspect-square bg-weak-50 rounded-full absolute -right-6 -top-2" />
-      </div>
-      <div className="flex justify-between items-center">
-        <p className="text-text-primary text-end font-semibold leading-6 tracking-[-0.24px]">
-          {formatOrderPrice(row["amount_total"])}{" "}
-          {row["currency_id"]?.display_name}
-        </p>
-        {!readOnly && (
-          <OrderActions
-            orderStatus={row["state"]}
-            onAddItem={onAddItem}
-            onPayment={onPayment}
-            onIssueInvoice={onIssueInvoice}
-            onPrintInvoice={onPrintInvoice}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default PosOrderTemplate;

package/src/components/kanban-template/pos-template.tsx

@@ -1,170 +0,0 @@
-import { Line } from "@assets/icons/customer-view-icon";
-import { IcSetting } from "@assets/icons/kanban-icon";
-import OpenSessionModal from "@components/session-management/open-shift";
-import { QUERY_KEYS } from "@constants/query.constant";
-import POSPath from "@constants/routes.constants";
-import { dd_mm_yyyy, hh_mm } from "@utils/functions";
-import { t } from "i18next";
-import { Plus } from "lucide-react";
-import { useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-import { createSearchParams, useNavigate } from "react-router-dom";
-
-const PosTemplate = ({
-  row,
-  columns,
-  onClickRow,
-  settings_act_id,
-  res_model,
-}: {
-  row: any;
-  columns: any;
-  onClickRow: any;
-  settings_act_id?: number;
-  res_model?: string;
-}) => {
-  const opened =
-    row["pos_session_state"] === "opened" ||
-    row["pos_session_state"] === "closing_control";
-  const navigate = useNavigate();
-  const [openModal, setOpenModal] = useState(false);
-  const methods = useForm({
-    mode: "onBlur",
-  });
-  const date: Date = useMemo(
-    () => new Date(row["last_session_closing_date"]),
-    [row]
-  );
-
-  const navigateToPosManagement = () => {
-    const isModePosRestaurant = row["module_pos_restaurant"];
-    const sessionId = row["current_session_id"].id;
-    const posId = row["id"];
-    const query = createSearchParams({
-      [QUERY_KEYS.POS_ID]: posId,
-      [QUERY_KEYS.SESSION_ID]: sessionId,
-    })?.toString();
-    sessionStorage.setItem(
-      "enter_pincode",
-      window.location.href.split("console")[1]
-    );
-    localStorage.setItem("backUrl", window.location.href.split("console")[1]);
-    navigate(
-      `${isModePosRestaurant ? POSPath.TABLES : POSPath.MENUS}?${query}`
-    );
-  };
-
-  const navigateSettingManagement = async (e: any) => {
-    e.stopPropagation();
-    navigateSettingManagement({
-      aid: settings_act_id,
-      id: row?.id,
-      model: res_model,
-    });
-  };
-
-  return (
-    <>
-      <div
-        className="relative w-full p-4 border border-[--stroke-default] bg-white rounded-xl shadow-sm flex flex-col overflow-hidden min-h-[200px]"
-        onClick={() => onClickRow(columns, row)}
-      >
-        <div className="flex items-start justify-between">
-          <div className="flex space-x-2">
-            <img
-              src="/assets/images/cashier.svg"
-              alt="POS Icon"
-              className="size-12"
-            />
-            <p className="text-base text-[#0E121B] font-semibold">
-              {row["name"]}
-            </p>
-          </div>
-          <span
-            className={`px-3 py-1 rounded-[4px] text-xs font-medium border ${
-              opened
-                ? "bg-[#E0FAEB] text-[#12AF53] border-[#1FC163]"
-                : "bg-[#FFEBEC] text-[#E93544] border-[#FB2B3D]"
-            }`}
-          >
-            {opened ? t("opening") : t("closed")}
-          </span>
-        </div>
-
-        <div className="relative py-4">
-          <Line />
-        </div>
-
-        <div className="text-sm space-y-2 mt-3 flex-grow">
-          {row["last_session_closing_date"] && (
-            <div className="flex justify-between">
-              <span className="text-gray-500">
-                {" "}
-                {opened ? t("opening") : t("closed")}
-              </span>
-              <span className="font-medium text-[#0E121B]">
-                {hh_mm(date)} • {dd_mm_yyyy(date)}
-              </span>
-            </div>
-          )}
-
-          {opened && (
-            <div className="flex justify-between">
-              <span className="text-gray-500">{t("balance")}</span>
-              <span className="font-medium text-[#0E121B]">
-                {row["last_session_closing_cash"].toLocaleString("vi-VN")}đ
-              </span>
-            </div>
-          )}
-        </div>
-
-        <div className="flex justify-end mt-auto pt-4 gap-[10px]">
-          <button
-            onClick={async (e) => {
-              navigateSettingManagement(e);
-            }}
-            type="button"
-            className="button-secondary flex gap-2 items-center"
-          >
-            <IcSetting />
-            <span>{t("setting")}</span>
-          </button>
-          {opened ? (
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                navigateToPosManagement();
-              }}
-              className="button-primary"
-            >
-              {t("continue_selling")}
-            </button>
-          ) : (
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                setOpenModal(true);
-              }}
-              className="button-primary min-w-[150px] flex gap-2 items-center justify-center"
-            >
-              <Plus className="w-4 h-4" />
-              {t("open_session")}
-            </button>
-          )}
-        </div>
-      </div>
-
-      {openModal && (
-        <OpenSessionModal
-          openModal={openModal}
-          setOpenModal={setOpenModal}
-          methods={methods}
-          row={row}
-          record={row}
-        />
-      )}
-    </>
-  );
-};
-
-export default PosTemplate;

package/src/components/kitchen-management/change-status-confirm-modal.tsx

@@ -1,61 +0,0 @@
-import ButtonAction from "@components/common/button-action";
-import { useTranslation } from "react-i18next";
-import ModalZoom from "../common/modal/modal-zoom";
-
-type TProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  orderId: number;
-  toOrderStatus: string;
-  onChangeOrderStatus: () => void;
-};
-
-const ChangeStatusConfirmModal = ({
-  isOpen,
-  onClose,
-  orderId,
-  toOrderStatus,
-  onChangeOrderStatus,
-}: TProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <ModalZoom
-      isOpen={isOpen}
-      onClose={onClose}
-      title="Xác nhận chuyển trạng thái" //multi-language
-      className="p-6 flex flex-col gap-6 rounded-2xl w-[420px]"
-    >
-      <img
-        src="/source/assets/images/modal-illustration.png"
-        alt="Status change illustration"
-        className="w-[232px] h-auto mx-auto"
-      />
-
-      <p className="text-sm font-medium text-text-secondary leading-5 tracking-[-0.12px]">
-        {t("changeOrderStatus")}
-        <span className="text-text-primary"> DH-{orderId}</span>{" "}
-        {t("fromOrderTo")}{" "}
-        <span className="text-text-primary">{toOrderStatus}</span>{" "}
-        {t("kitchenConfirmStatusQuestion")}
-      </p>
-
-      <div className="flex items-center gap-2">
-        <ButtonAction
-          onClick={onClose}
-          className="button-secondary"
-          text={t("Cancel")}
-        />
-        <ButtonAction
-          onClick={() => {
-            onChangeOrderStatus();
-            onClose();
-          }}
-          className="button-primary"
-          text={t("agree")}
-        />
-      </div>
-    </ModalZoom>
-  );
-};
-export default ChangeStatusConfirmModal;

package/src/components/kitchen-management/index.ts

@@ -1 +0,0 @@
-export { default as OrdersKitchenManagement } from "./orders-kitchen-management";