sme-pos-package 1.0.14 → 1.0.15

package/src/pages/pincode/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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