sme-pos-package 1.0.7 → 1.0.9

package/src/pages/pincode/index.tsx

@@ -0,0 +1,198 @@
+import LoadingIcon from "@assets/icons/loading-icon";
+import { PinCodeIcon } from "@assets/icons/pincode";
+import ButtonAction from "@components/common/button-action";
+import OpenSessionModal from "@components/session-management/open-shift";
+import { useService } from "@fctc/widget-logic/provider";
+import { usePosAppProvider } from "@provider/app-provider";
+import { t } from "i18next";
+import { OTPInput } from "input-otp";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+const EnterPinCode = () => {
+  const model = "pos.pin.wizard";
+  const service = "wesap";
+  const specification = {
+    display_name: {},
+    pin: {},
+  };
+  const context = {
+    lang: "vi_VN",
+    tz: "Asia/Saigon",
+    uid: 37,
+  };
+
+  const navigate = useNavigate();
+  const methods = useForm({
+    mode: "onBlur",
+  });
+
+  const { useSave, useButton } = useService();
+  const [openModal, setOpenModal] = useState(false);
+  const [posConfigId, setPosConfigId] = useState<any>(null);
+  const [otpValue, setOtpValue] = useState<string>("");
+  const [isError, setIsError] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { user } = usePosAppProvider();
+  const { mutateAsync: callButtonMutate } = useButton();
+  const { mutateAsync: fetchSave } = useSave();
+
+  const onValidateOtp = async () => {
+    if (otpValue.length !== 6) {
+      setIsError(true);
+      return;
+    }
+    setIsLoading(true);
+    const clearOtpValue = () => {
+      setOtpValue("");
+    };
+    try {
+      const data = await fetchSave({
+        ids: [],
+        data: {
+          pin: otpValue,
+        },
+        model,
+        context,
+        specification: specification,
+        service,
+        xNode: user?.userProfile?.data?.x_node,
+      });
+
+      const dataCallButton = await callButtonMutate({
+        model,
+        method: "action_resolve_pin",
+        ids: data?.[0]?.id ? [data?.[0]?.id] : data?.id ? [data?.id] : [],
+        context,
+        service,
+        xNode: user?.userProfile?.data?.x_node,
+      });
+
+      if (dataCallButton?.type === "ir.actions.client") {
+        if (dataCallButton?.params?.error_code === "no_open_session") {
+          setOpenModal(!openModal);
+          setPosConfigId(dataCallButton?.params?.pos_config_id);
+          return;
+        }
+        if (dataCallButton?.params?.type === "warning") {
+          clearOtpValue();
+          toast.error(dataCallButton?.params?.message);
+        }
+      } else if (dataCallButton?.type === "ir.actions.act_url") {
+        if (dataCallButton?.url) {
+          sessionStorage.setItem(
+            "enter_pincode",
+            window.location.href.split("console")[1]
+          );
+          localStorage.setItem(
+            "backUrl",
+            window.location.href.split("console")[1]
+          );
+          navigate(dataCallButton?.url);
+        }
+      }
+    } catch (error: any) {
+      if (error?.message) {
+        clearOtpValue();
+        toast.error(error?.message);
+      } else {
+        toast.error(`${t("confirm_button")} ${t("failure")}`);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onValidateOtp();
+    }
+  };
+
+  // useEffect(() => {
+  //   if (otpValue.length === 6 && isAndroid) hideKeyboard()
+  // }, [otpValue])
+
+  return (
+    <div className="flex justify-center items-center h-screen bg-neutral-100-96 enter-pin-code-form">
+      <div className="w-[760px] rounded-xl border border-stroke-default m-auto px-6 py-10 bg-white flex flex-col gap-8">
+        <div className="flex flex-col gap-1 w-full items-center">
+          <PinCodeIcon />
+          <div className="flex flex-col gap-1 text-center">
+            <span className="text-2xl font-semibold">
+              {t("enter_pin_title")}
+            </span>
+            <span className="text-sm font-normal">
+              {t("enter_pin_subtitle")}
+            </span>
+          </div>
+        </div>
+        <div className="max-w-[464px] mx-auto">
+          <OTPInput
+            maxLength={6}
+            value={otpValue}
+            onKeyDown={onKeyDown}
+            onChange={(val) => {
+              const cleanVal = val.replace(/\D/g, "").slice(0, 6);
+              setOtpValue(cleanVal);
+              setIsError(false);
+            }}
+            onPaste={(e) => {
+              e.preventDefault();
+              const pasted = e.clipboardData.getData("text");
+              const cleanVal = pasted.replace(/\D/g, "").slice(0, 6);
+              setOtpValue(cleanVal);
+              setIsError(false);
+            }}
+            render={({ slots }) => (
+              <div className="grid grid-cols-6 gap-4 px-2 ">
+                {slots.map((slot, index) => (
+                  <div
+                    key={index}
+                    className={`w-full aspect-square rounded-xl border ${
+                      isError
+                        ? "border-colored-error text-colored-error"
+                        : slot?.isActive
+                        ? "border-secondary"
+                        : "border-stroke-default text-primary"
+                    } flex items-center font-semibold leading-7 min-w-16 aspect-square justify-center text-xl`}
+                  >
+                    {slot?.char}
+                  </div>
+                ))}
+              </div>
+            )}
+          />
+        </div>
+        <div className="flex justify-center">
+          <ButtonAction
+            onClick={onValidateOtp}
+            iconSrc={isLoading && <LoadingIcon />}
+            className={`button-primary ${
+              isLoading ? "cursor-not-allowed" : ""
+            } w-full`}
+            text={t("continue_enter_pincode")}
+          />
+        </div>
+      </div>
+
+      {openModal && (
+        <OpenSessionModal
+          openModal={openModal}
+          setOpenModal={setOpenModal}
+          methods={methods}
+          row={{}}
+          record={{
+            id: posConfigId,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EnterPinCode;

package/src/pages/pos/kitchen-management/layout.tsx

@@ -0,0 +1,18 @@
+// import { Outlet } from "react-router-dom";
+// import { KitchenProvider } from "@provider/pos-provider/kitchen-provider";
+// import { ProductProvider } from "@provider/pos-provider/product-provider";
+// import { SaleProvider } from "@provider/pos-provider/sale-provider";
+
+// const KitchenManagementLayout = () => {
+//   return (
+//     <SaleProvider>
+//       <ProductProvider>
+//         <KitchenProvider>
+//           <Outlet />
+//         </KitchenProvider>
+//       </ProductProvider>
+//     </SaleProvider>
+//   );
+// };
+
+// export default KitchenManagementLayout;

package/src/pages/pos/management-floor/index.tsx

@@ -0,0 +1,7 @@
+import ManagementFloor from "@components/restaurant-management";
+
+const ManagementFloorsPage = () => {
+  return <ManagementFloor />;
+};
+
+export default ManagementFloorsPage;

package/src/pages/pos/management-order/index.tsx

@@ -0,0 +1,7 @@
+import { ManagementOrder } from "@components/order-management"
+
+const ManagementOrderPage = () => {
+  return <ManagementOrder />
+}
+
+export default ManagementOrderPage

package/src/pages/pos/management-order/order-detail/index.tsx

@@ -0,0 +1,7 @@
+import OrderDetail from "@components/order-management/order-detail/order-detail";
+
+const OrderDetailPage = () => {
+  return <OrderDetail />;
+};
+
+export default OrderDetailPage;

package/src/pages/pos/payment-success/index.tsx

@@ -0,0 +1,75 @@
+import ButtonAction from "@components/common/button-action";
+import { ORDER_STATE } from "@constants/order-state";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import Lottie from "lottie-react";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import animationData from "../../../../public/assets/lottie/success.json";
+import POSPath from "@constants/routes.constants";
+
+const PaymentSuccess = () => {
+  const { getQuery, formatQuery } = useQueryParams();
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+  const navigate = useNavigate();
+  const { orders, setOrders } = useOrder();
+  const { taxAmount, totalAmount } = useOrderDetail();
+
+  const onComplete = () => {
+    navigate({
+      pathname: POSPath.MENUS,
+      search: `?${formatQuery([QUERY_KEYS.POS_ID, QUERY_KEYS.SESSION_ID])}`,
+    });
+  };
+
+  const onPrint = () => {};
+  useEffect(() => {
+    setOrders(
+      orders.map((order) =>
+        order.id == Number(orderId)
+          ? {
+              ...order,
+              state: ORDER_STATE.PAID,
+            }
+          : order
+      )
+    );
+  }, []);
+
+  return (
+    <div className="flex flex-col items-center gap-5 h-screen w-full justify-center bg-white">
+      <div style={{ width: 200 }}>
+        <Lottie animationData={animationData} />
+      </div>
+      <div className="flex flex-col items-center gap-[10px]">
+        <p className="text-xl font-semibold text-colored-success">
+          Thanh toán thành công
+        </p>
+        <p className="w-[400px] text-sm text-text-disable font-medium text-center">
+          Thanh toán đơn hàng {orderId} thành công. Bạn có thể xem chi tiết đơn
+          hàng{" "}
+          <span className="text-colored-primary underline cursor-pointer">
+            tại đây
+          </span>
+          . hệ thống sẽ tự động chuyển về trang bán hàng sau 10s.
+        </p>
+      </div>
+      <div className="flex gap-2 w-full  max-w-[444px]">
+        <ButtonAction
+          text="Hoàn tất"
+          className="button-primary w-full"
+          onClick={() => onComplete()}
+        />
+        <ButtonAction
+          text="In hóa đơn"
+          className="button-primary w-full"
+          onClick={() => onPrint()}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PaymentSuccess;

package/src/provider/app-provider.tsx

@@ -0,0 +1,56 @@
+import {
+  useCompany,
+  useUser,
+  type useCompanyType,
+  type useUserType,
+} from "@fctc/widget-logic/hooks";
+import { useEnv } from "@fctc/widget-logic/provider";
+
+import { createContext, useContext, useMemo } from "react";
+
+type PosAppProviderType = {
+  user: useUserType;
+  company: useCompanyType;
+  userProfile: any;
+};
+
+const PosAppProviderInitialValue: PosAppProviderType = {
+  user: {} as useUserType,
+  company: {} as useCompanyType,
+  userProfile: {},
+};
+const ReactContext = createContext<PosAppProviderType>(
+  PosAppProviderInitialValue
+);
+
+const PosAppProvider = ({ children }: { children: React.ReactNode }) => {
+  const { env } = useEnv();
+  const user = useUser({ service: env.default_service });
+  const company = useCompany({ service: env.default_service });
+
+  const userProfile = useMemo(() => {
+    return user?.userProfile?.data;
+  }, [user]);
+
+  return (
+    <ReactContext.Provider
+      value={{
+        user,
+        company,
+        userProfile,
+      }}
+    >
+      {children}
+    </ReactContext.Provider>
+  );
+};
+export default PosAppProvider;
+export const usePosAppProvider = () => {
+  const context = useContext(ReactContext);
+
+  if (!context) {
+    return PosAppProviderInitialValue;
+  }
+
+  return context;
+};

package/src/provider/fallback/custom-error.tsx

@@ -0,0 +1,26 @@
+const CustomError = () => {
+  return (
+    <div className="flex w-full h-screen items-center justify-center overflow-auto bg-weak-50 p-4">
+      <div className="flex h-fit flex-col items-center justify-center rounded-[16px] bg-white px-4 py-[48px]">
+        {/* <div className='aspect-[154/140] w-[44%]'>
+          <Image src={crash_app} className='!object-contain' />
+        </div> */}
+        <p className="mt-4 w-full text-center text-xl font-semibold text-strong-950">
+          An error occurred!
+        </p>
+        <p className="mt-4 w-full text-center text-soft-400">
+          Sorry, we are unable to process your request at this time. Please try
+          again later.
+        </p>
+        <a
+          className="mt-6 flex w-full items-center justify-center rounded-[10px] border border-primary-custom py-3 text-base font-medium text-text-primary"
+          href={"/"}
+        >
+          Back to home
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default CustomError

package/src/provider/main-provider.tsx

@@ -0,0 +1,41 @@
+import {
+  EnvProvider,
+  MainProvider,
+  MetaProvider,
+  ServiceProvider,
+} from "@fctc/widget-logic/provider";
+import CustomError from "@provider/fallback/custom-error";
+import { ModalProvider } from "@provider/modal-provider";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AnimatePresence } from "framer-motion";
+import { ErrorBoundary } from "react-error-boundary";
+
+const queryClient = new QueryClient({});
+const AppProvider = ({
+  user,
+  children,
+}: {
+  user: any;
+  children: React.ReactNode;
+}) => {
+  return (
+    <AnimatePresence mode="wait">
+      {/* <Suspense fallback={<CustomSuspense />}> */}
+      <ErrorBoundary fallback={<CustomError />}>
+        <EnvProvider>
+          <QueryClientProvider client={queryClient}>
+            <MainProvider>
+              <ServiceProvider>
+                <MetaProvider>
+                  <ModalProvider>{children}</ModalProvider>
+                </MetaProvider>
+              </ServiceProvider>
+            </MainProvider>
+          </QueryClientProvider>
+        </EnvProvider>
+      </ErrorBoundary>
+      {/* </Suspense> */}
+    </AnimatePresence>
+  );
+};
+export default AppProvider;

package/src/provider/meta-provider.tsx

@@ -0,0 +1,72 @@
+import { useEnv } from "@fctc/widget-logic/provider";
+import { ContextApi } from "@fctc/widget-logic/types";
+import { ReactNode, useEffect } from "react";
+
+type MetaProviderProps = {
+  children: ReactNode;
+};
+
+export const MetaProvider = ({ children }: MetaProviderProps) => {
+  const { env }: ContextApi = useEnv();
+
+  function updateMetadata() {
+    const metadata = env?.defaultCompany;
+
+    if (!metadata) return;
+
+    if (metadata.display_name) {
+      document.title = metadata.display_name;
+    }
+
+    // document.documentElement.style.setProperty(
+    //   "--primary",
+    //   metadata?.primary_color
+    // );
+    // document.documentElement.style.setProperty(
+    //   "--secondary",
+    //   metadata?.secondary_color
+    // );
+
+    // Update description meta tag
+    const metaDescription = document.querySelector('meta[name="description"]');
+    if (metaDescription) {
+      metaDescription.setAttribute("content", metadata.display_name);
+    } else {
+      const newMetaDescription = document.createElement("meta");
+      newMetaDescription.name = "description";
+      newMetaDescription.content = metadata.display_name;
+      document.head.appendChild(newMetaDescription);
+    }
+
+    // Function to update or create link elements
+    const updateIcon = (rel: string, href: string) => {
+      let linkIcon = document.querySelector(
+        `link[rel="${rel}"]`
+      ) as HTMLLinkElement | null;
+      if (linkIcon) {
+        linkIcon.href = href;
+      } else {
+        linkIcon = document.createElement("link");
+        linkIcon.rel = rel;
+        linkIcon.href = href;
+        document.head.appendChild(linkIcon);
+      }
+    };
+
+    if (metadata.logo) {
+      updateIcon("icon", "/document-icon.svg");
+      updateIcon("apple-touch-icon", "/document-icon.svg");
+
+      const faviconLink = document.querySelector('link[href="favicon.ico"]');
+      if (faviconLink) {
+        faviconLink.remove();
+      }
+    }
+  }
+
+  useEffect(() => {
+    updateMetadata();
+  }, [env?.defaultCompany]);
+
+  return <>{children}</>;
+};

package/src/provider/modal-provider.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext, useState } from 'react'
+
+type ModalContext = {
+  isAppScale: boolean
+  handleCheckScaleApp: () => void
+  handleToggleInModal: (isOpen: boolean) => void
+}
+
+const Context = createContext<ModalContext | undefined>(undefined)
+
+const Provider = ({ children }: { children: React.ReactNode }) => {
+  const [isAppScale, setIsAppScale] = useState(false)
+  const handleCheckScaleApp = () => {
+    const bottomModals = document.querySelectorAll('.bottom-modal')
+    const isOpen = bottomModals.length > 1
+
+    if ((isOpen && !isAppScale) || (!isOpen && isAppScale)) {
+      setIsAppScale(isOpen)
+    }
+  }
+
+  const handleToggleInModal = (isOpen: boolean) => {
+    if (isOpen) {
+      if (!isAppScale) {
+        setIsAppScale(isOpen)
+      }
+    } else {
+      const bottomModals = document.querySelectorAll('.bottom-modal')
+      if (bottomModals.length == 1 && isAppScale) {
+        setIsAppScale(isOpen)
+      }
+    }
+  }
+  return (
+    <Context.Provider value={{ isAppScale, handleCheckScaleApp: handleCheckScaleApp, handleToggleInModal }}>
+      {children}
+    </Context.Provider>
+  )
+}
+export const ModalProvider = Provider
+
+export const useModal = () => {
+  const context = useContext(Context)
+  if (!context) {
+    throw new Error('useModal must be used within a ModalProvider')
+  }
+  return context
+}

package/src/provider/notification-provider.tsx

@@ -0,0 +1,64 @@
+// import { sessionStorageUtils } from "@fctc/widget-logic/utils";
+// import { useEnv } from "@fctc/widget-logic/provider";
+// import { useService } from "@fctc/widget-logic/provider";
+
+// import { createContext, useContext } from "react";
+// import { usePosAppProvider } from "./app-provider";
+
+// const ReactContext = createContext<useNotificationProviderType>(
+//   {} as useNotificationProviderType
+// );
+
+// export const NotificationsProvider = ({
+//   children,
+// }: {
+//   children: React.ReactNode;
+// }) => {
+//   return (
+//     <ReactContext.Provider value={useNotificationProvider()}>
+//       {children}
+//     </ReactContext.Provider>
+//   );
+// };
+
+// export const useNotificationView = () => {
+//   const context = useContext(ReactContext);
+
+//   if (!context) {
+//     throw new Error(
+//       "useNotificationView must be used within a NotificationsProvider"
+//     );
+//   }
+
+//   return context;
+// };
+
+// const useNotificationProvider = () => {
+//   const { useGetNotifications } = useService();
+//   const { env } = useEnv();
+//   const { user } = usePosAppProvider();
+//   const service =
+//     sessionStorageUtils?.getMenuFocus()?.service || env?.default_service;
+//   const dataUser = user?.userProfile?.data;
+//   const queryResult = useGetNotifications({
+//     body: {
+//       failures: true,
+//       systray_get_activities: true,
+//       context: env?.context,
+//     },
+//     service: service,
+//     xNode: service == "wesap" && dataUser?.x_node,
+//     enabled: false,
+//     queryKey: [],
+//   });
+
+//   return {
+//     queryResult,
+//   };
+// };
+
+// export default useNotificationProvider;
+
+// export type useNotificationProviderType = ReturnType<
+//   typeof useNotificationProvider
+// >;