sme-pos-package 1.0.7 → 1.0.9

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

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

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

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

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

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

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

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

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

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

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