sme-pos-package 1.0.7 → 1.0.9

package/src/provider/pos-provider/payment-provider/index.tsx

@@ -0,0 +1,30 @@
+import usePaymentProvider, {
+  usePaymentProviderType,
+} from "@hooks/payment/use-payment-provider"
+import { createContext, useContext } from "react"
+
+const ReactContext = createContext<usePaymentProviderType>(
+  {} as usePaymentProviderType
+)
+
+export const PaymentProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  return (
+    <ReactContext.Provider value={usePaymentProvider()}>
+      {children}
+    </ReactContext.Provider>
+  )
+}
+
+export const usePayment = () => {
+  const context = useContext(ReactContext)
+
+  if (!context) {
+    throw new Error("usePayment must be used within a PaymentProvider")
+  }
+
+  return context
+}

package/src/provider/pos-provider/product-provider/index.tsx

@@ -0,0 +1,30 @@
+import useProductProvider, {
+  useProductProviderType,
+} from "@hooks/product/use-product-provider"
+import { createContext, useContext } from "react"
+
+const ReactContext = createContext<useProductProviderType>(
+  {} as useProductProviderType
+)
+
+export const ProductProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  return (
+    <ReactContext.Provider value={useProductProvider()}>
+      {children}
+    </ReactContext.Provider>
+  )
+}
+
+export const useProduct = () => {
+  const context = useContext(ReactContext)
+
+  if (!context) {
+    throw new Error("useProduct must be used within a ProductProvider")
+  }
+
+  return context
+}

package/src/provider/pos-provider/sale-provider/index.tsx

@@ -0,0 +1,168 @@
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useService } from "@fctc/widget-logic/provider";
+import { sessionStorageUtils } from "@fctc/widget-logic/utils";
+import { usePosAppProvider } from "@provider/app-provider";
+import { useQuery } from "@tanstack/react-query";
+import { createContext, useContext } from "react";
+
+import { useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+
+export enum LoadDataModel {
+  ACCOUNT_CASH_ROUNDING = "account.cash.rounding",
+  ACCOUNT_FISCAL_POSITION = "account.fiscal.position",
+  ACCOUNT_FISCAL_POSITION_TAX = "account.fiscal.position.tax",
+  ACCOUNT_TAX = "account.tax",
+  ACCOUNT_TAX_GROUP = "account.tax.group",
+  DECIMAL_PRECISION = "decimal.precision",
+  IR_MODULE_MODULE = "ir.module.module",
+  IR_UI_VIEW = "ir.ui.view",
+  POS_BILL = "pos.bill",
+  POS_CATEGORY = "pos.category",
+  POS_CONFIG = "pos.config",
+  POS_NOTE = "pos.note",
+  POS_ORDER = "pos.order",
+  POS_ORDER_LINE = "pos.order.line",
+  POS_PACK_OPERATION_LOT = "pos.pack.operation.lot",
+  POS_PAYMENT = "pos.payment",
+  POS_PAYMENT_METHOD = "pos.payment.method",
+  POS_PRINTER = "pos.printer",
+  POS_SESSION = "pos.session",
+  POS_PREPARATION_DISPLAY_DISPLAY = "pos_preparation_display.display",
+  PRODUCT_ATTRIBUTE = "product.attribute",
+  PRODUCT_ATTRIBUTE_CUSTOM_VALUE = "product.attribute.custom.value",
+  PRODUCT_CATEGORY = "product.category",
+  PRODUCT_COMBO = "product.combo",
+  PRODUCT_COMBO_ITEM = "product.combo.item",
+  PRODUCT_PACKAGING = "product.packaging",
+  PRODUCT_PRICELIST = "product.pricelist",
+  PRODUCT_PRICELIST_ITEM = "product.pricelist.item",
+  PRODUCT_PRODUCT = "product.product",
+  PRODUCT_TAG = "product.tag",
+  PRODUCT_TEMPLATE_ATTRIBUTE_LINE = "product.template.attribute.line",
+  PRODUCT_TEMPLATE_ATTRIBUTE_VALUE = "product.template.attribute.value",
+  RES_COMPANY = "res.company",
+  RES_COUNTRY = "res.country",
+  RES_COUNTRY_STATE = "res.country.state",
+  RES_CURRENCY = "res.currency",
+  RES_LANG = "res.lang",
+  RES_PARTNER = "res.partner",
+  RES_USERS = "res.users",
+  STOCK_PICKING_TYPE = "stock.picking.type",
+  UOM_CATEGORY = "uom.category",
+  UOM_UOM = "uom.uom",
+  LOYALTY_PROGRAM = "loyalty.program",
+  LOYALTY_RULE = "loyalty.rule",
+  RESTAURANT_TABLE = "restaurant.table",
+  RESTAURANT_FLOOR = "restaurant.floor",
+  POS_MAKE_PAYMENT = "pos.make.payment",
+}
+
+const useGetLoadPosSession = (enabled = true) => {
+  const { useLoadDataPosSession } = useService();
+  const loadDataPosSessionMutation = useLoadDataPosSession().mutateAsync;
+  const { user } = usePosAppProvider();
+  const xNode = user?.userProfile?.data?.x_node;
+  const service = sessionStorageUtils.getMenuFocus().service || `wesap`;
+  const [searchParams] = useSearchParams();
+  const sessionId = searchParams.get(QUERY_KEYS.SESSION_ID);
+
+  const queryResult = useQuery<any>({
+    queryKey: ["get-load-pos-session", service, xNode, sessionId],
+    queryFn: () => {
+      return loadDataPosSessionMutation({
+        model: LoadDataModel.POS_SESSION,
+        ids: [sessionId],
+        service: service ?? "",
+        xNode: xNode ?? "",
+      });
+    },
+    enabled: enabled && !!service && !!xNode && !!sessionId,
+  });
+  const { data, isLoading } = queryResult;
+
+  const getSpec = useCallback(
+    (model: LoadDataModel) => {
+      if (!data || isLoading) return undefined;
+
+      const { fields, relations } = data[model] ?? {};
+
+      let spec: Record<string, any> = {};
+
+      if (fields?.length) {
+        spec = Object.fromEntries(fields.map((key: string) => [key, {}]));
+      } else if (relations) {
+        spec = Object.fromEntries(
+          Object.keys(relations).map((key) => [key, {}])
+        );
+      }
+
+      if ("payment_ids" in spec) {
+        spec["payment_ids"] = {
+          fields: {
+            currency_id: {
+              fields: {
+                id: {},
+                display_name: {},
+              },
+            },
+            payment_date: {},
+            payment_method_id: {
+              fields: {
+                id: {},
+                display_name: {},
+              },
+            },
+            amount: {},
+            payment_method_payment_mode: {},
+            card_no: {},
+            card_brand: {},
+            cardholder_name: {},
+          },
+        };
+      }
+
+      return spec;
+    },
+    [data, isLoading]
+  );
+
+  const getData = useCallback(
+    (model: LoadDataModel) => {
+      if (!data || isLoading) return undefined;
+      return (data[model]?.data ?? {}) as Record<string, any>;
+    },
+    [data, isLoading]
+  );
+
+  const isModePosRestaurant = getData(LoadDataModel.POS_CONFIG)?.[0]
+    ?.module_pos_restaurant;
+
+  return { queryResult, getSpec, getData, isModePosRestaurant };
+};
+
+export default useGetLoadPosSession;
+
+export type useGetLoadPosSessionType = ReturnType<typeof useGetLoadPosSession>;
+
+const ReactContext = createContext<useGetLoadPosSessionType>(
+  {} as useGetLoadPosSessionType
+);
+
+export const SaleProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ReactContext.Provider value={useGetLoadPosSession()}>
+      {children}
+    </ReactContext.Provider>
+  );
+};
+
+export const useSale = () => {
+  const context = useContext(ReactContext);
+
+  if (!context) {
+    throw new Error("useSale must be used within a SaleProvider");
+  }
+
+  return context;
+};

package/src/provider/pos-provider/session-provider/index.tsx

@@ -0,0 +1,30 @@
+import useSessionProvider, {
+  useSessionProviderType,
+} from "@hooks/session/use-session-provider"
+import { createContext, useContext } from "react"
+
+const ReactContext = createContext<useSessionProviderType>(
+  {} as useSessionProviderType
+)
+
+export const SessionProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  return (
+    <ReactContext.Provider value={useSessionProvider()}>
+      {children}
+    </ReactContext.Provider>
+  )
+}
+
+export const useSession = () => {
+  const context = useContext(ReactContext)
+
+  if (!context) {
+    throw new Error("useSession must be used within a SessionProvider")
+  }
+
+  return context
+}

package/src/provider/pos-provider/socket-provider/index.tsx

@@ -0,0 +1,118 @@
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { usePosAppProvider } from "@provider/app-provider";
+import mqtt from "mqtt";
+import { createContext, useContext, useState } from "react";
+
+const useSocket = () => {
+  const [clientMtqq, setClientMtqq] = useState<any>();
+  const { user } = usePosAppProvider();
+
+  const { getQuery } = useQueryParams();
+  const posId = getQuery(QUERY_KEYS.POS_ID);
+  const dataUser = user?.userProfile?.data;
+
+  const onConnect = (topicName: string | string[]) => {
+    console.log("🔌 Trying to connect to MQTT...");
+    const options = {
+      clientId: [dataUser?.company.cif, "web", `serialNumber${posId}`].join(
+        "-"
+      ),
+      reconnectPeriod: 3000,
+      keepalive: 20,
+      clean: false,
+    };
+    const client = mqtt.connect("wss://sme-socket-dev.atomsolution.vn", {
+      path: "/mqtt",
+      ...options,
+    });
+    client.on("connect", () => {
+      if (!topicName || topicName?.length === 0) return;
+      client.subscribe(topicName, (err) => {
+        if (err) {
+          console.error("❌ Subscribe error:", err);
+        } else {
+          console.log("📡 Subscribed successfully!", client);
+        }
+      });
+    });
+
+    client.on("error", (err) => {
+      console.error("❌ MQTT Error:", err);
+    });
+
+    client.on("reconnect", () => {
+      console.log("♻️ Reconnecting to MQTT...");
+    });
+
+    setClientMtqq(client);
+  };
+
+  const onDisconnect = () => {
+    clientMtqq?.end(true);
+    setClientMtqq(undefined);
+  };
+
+  const onPublish = (topic: string, payload: string) => {
+    clientMtqq?.publish(topic, payload);
+    // if (clientMtqq) console.log("send", topic, payload);
+  };
+
+  const onSubscribe = (topic: string | string[]) => {
+    clientMtqq.on("connect", () => {
+      clientMtqq.subscribe(topic, (err: any) => {
+        if (err) {
+          console.error("❌ Subscribe error:", err);
+        } else {
+          console.log("📡 Subscribed successfully!", clientMtqq);
+        }
+      });
+    });
+  };
+
+  return { clientMtqq, onDisconnect, onPublish, onConnect, onSubscribe };
+};
+
+export type useSocketType = ReturnType<typeof useSocket>;
+
+const ReactContext = createContext<useSocketType>({} as useSocketType);
+
+const SocketProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ReactContext.Provider value={useSocket()}>
+      {children}
+    </ReactContext.Provider>
+  );
+};
+
+export default SocketProvider;
+
+export const useSocketData = () => {
+  const context = useContext(ReactContext);
+
+  if (!context) {
+    throw new Error("useSocketData must be used within a ");
+  }
+
+  return context;
+};
+
+export function convertMessage(str: string) {
+  try {
+    let obj = JSON.parse(str);
+
+    if (typeof obj === "string") {
+      obj = JSON.parse(obj);
+    }
+
+    const type = obj?.type?.split("-")?.pop();
+
+    return {
+      type,
+      sound: obj?.payload?.sound ?? false,
+    };
+  } catch (e) {
+    console.error("❌ Invalid JSON", e);
+    return undefined;
+  }
+}

package/src/provider/pos-provider/table-provider/index.tsx

@@ -0,0 +1,30 @@
+import usePosTableProvider, {
+  usePosTableProviderType,
+} from "@hooks/table/use-pos-table-provider"
+import { TTable } from "@type/table"
+import { createContext, useContext } from "react"
+
+const ReactContext = createContext<usePosTableProviderType>(
+  {} as usePosTableProviderType
+)
+
+export const TableProvider = ({ children }: { children: React.ReactNode }) => {
+  const queryResult = usePosTableProvider(true)
+  return (
+    <ReactContext.Provider value={queryResult}>
+      {children}
+    </ReactContext.Provider>
+  )
+}
+
+export const usePosTable = () => {
+  const context = useContext(ReactContext)
+
+  if (!context) {
+    throw new Error("usePosTable must be used within a TableProvider")
+  }
+
+  return context
+}
+
+export type TTableRes = TDataRes<TTable[]>

package/src/provider/public-provider.tsx

@@ -0,0 +1,104 @@
+import { useEnv } from "@fctc/widget-logic/provider";
+import { isObjectEmpty, sessionStorageUtils } from "@fctc/widget-logic/utils";
+import useHeaderStore from "@store/header";
+import { useEffect } from "react";
+import { usePosAppProvider } from "./app-provider";
+import { I18nProvider } from "@fctc/sme-widget-ui";
+import { ToastContainer } from "react-toastify";
+
+const PublicProvider = ({ children }: { children: React.ReactNode }) => {
+  const { setupEnv, env, setEnvFile } = useEnv();
+  const { user } = usePosAppProvider();
+  const dataUser = user?.userProfile?.data;
+  const service = sessionStorageUtils.getMenuFocus().service;
+  const { selectedLang } = useHeaderStore();
+
+  useEffect(() => {
+    async function loadEnvAndConfig() {
+      try {
+        const envResponse = await fetch("/env.json");
+        const envConfig = await envResponse.json();
+        const configResponse = await fetch("/config.json");
+        const config = await configResponse.json();
+        console.log("config", config);
+        setupEnv({
+          baseUrl: envConfig.baseUrl,
+          default_service: "mms",
+          config: {
+            grantType: envConfig.config?.grantType,
+            clientId: window.location.hostname.includes("mms")
+              ? envConfig.config?.mmsClientId
+              : envConfig.config?.mpClientId,
+            clientSecret: envConfig.config?.clientSecret,
+            redirectUri: window.location.hostname.includes("mms")
+              ? envConfig.config?.mmsRedirectUrl
+              : envConfig.config?.mpRedirectUrl,
+            websiteCode: window.location.hostname.includes("mms")
+              ? envConfig.config?.websiteMmscode
+              : envConfig.config?.websiteMpcode,
+          },
+          refreshTokenEndpoint: "/id/api/v2/token",
+          xNode: service === "wesap" ? dataUser?.x_node : "",
+        });
+
+        setEnvFile(config);
+
+        document.documentElement.style.setProperty(
+          "--background-button",
+          config?.VITE_BG_BUTTON
+        );
+        document.documentElement.style.setProperty(
+          "--primary",
+          config?.VITE_BG_BUTTON
+        );
+        document.documentElement.style.setProperty(
+          "--background-page",
+          config?.VITE_BACKGROUND_PAGE
+        );
+        document.documentElement.style.setProperty(
+          "--text-color",
+          config?.TEXT_COLOR
+        );
+        document.documentElement.style.setProperty(
+          "--stroke-default",
+          config?.STROKE_DEFAULT
+        );
+        document.documentElement.style.setProperty(
+          "--selected-color",
+          config?.SELECTED_COLOR
+        );
+        document.documentElement.style.setProperty(
+          "--active-menu-bg-color",
+          config?.SIDEBAR_ACTIVE_MENU_BACKGROUND
+        );
+        document.documentElement.style.setProperty(
+          "--active-menu-text-color",
+          config?.SIDEBAR_ACTIVE_MENU_TEXT
+        );
+        document.documentElement.style.setProperty(
+          "--active-border-color",
+          config?.BORDER_ACTIVE_COLOR
+        );
+      } catch (error) {
+        console.error("Error loading env or config:", error);
+      }
+    }
+
+    if (!env?.requests) {
+      loadEnvAndConfig();
+    }
+  }, []);
+
+  return (
+    <I18nProvider lang={String(selectedLang?.value)}>
+      <ToastContainer position="bottom-right" />
+      {
+        env?.requests &&
+          !isObjectEmpty(env?.requests) &&
+          env?.envFile &&
+          children
+      }
+    </I18nProvider>
+  );
+};
+export default PublicProvider;

package/src/provider/use-session-provider.ts

@@ -0,0 +1,79 @@
+import { useService } from "@fctc/widget-logic/provider";
+import { sessionStorageUtils } from "@fctc/widget-logic/utils";
+import { useMutation } from "@tanstack/react-query";
+import { usePosAppProvider } from "./app-provider";
+
+const useSessionProvider = () => {
+  const { useCreateSession, useHandleClosingSession, useCreatePosConfig } =
+    useService();
+
+  const createSessionMutation = useCreateSession().mutateAsync;
+  const setOpeningCashBoxMutation = useHandleClosingSession().mutateAsync;
+  const createPosConfigMutation = useCreatePosConfig().mutateAsync;
+
+  const { user } = usePosAppProvider();
+  const dataUser = user?.userProfile?.data;
+  const service = sessionStorageUtils.getMenuFocus().service || `wesap`;
+  const xNode = dataUser?.x_node || "";
+
+  const openSession = useMutation({
+    mutationFn: async (configId: number) => {
+      return await createSessionMutation({
+        configId,
+        model: "pos.session",
+        service,
+        xNode,
+      });
+    },
+  });
+
+  const setOpeningCashBox = useMutation({
+    mutationFn: ({
+      cashBoxValue,
+      sessionId,
+    }: {
+      cashBoxValue: number;
+      sessionId: number;
+    }) => {
+      return setOpeningCashBoxMutation({
+        model: "pos.session",
+        ids: [Number(sessionId)],
+        service,
+        xNode,
+        method: "set_opening_control",
+        kwargs: {
+          cashbox_value: cashBoxValue,
+          notes: "Opening cashbox",
+        },
+      });
+    },
+  });
+
+  const createPosConfig = useMutation({
+    mutationFn: async ({
+      name,
+      modulePosRestaurant,
+    }: {
+      name: string;
+      modulePosRestaurant: string;
+    }) => {
+      return await createPosConfigMutation({
+        model: "pos.config",
+        name,
+        service,
+        xNode,
+        modulePosRestaurant,
+      });
+    },
+  });
+
+  return {
+    openSession,
+    setOpeningCashBox,
+    createPosConfig,
+  };
+};
+
+export default useSessionProvider;
+
+export type useSessionProviderType = ReturnType<typeof useSessionProvider>;

package/src/router/app-router.tsx

@@ -0,0 +1,38 @@
+import {
+  EnvProvider,
+  MainProvider,
+  MetaProvider,
+  ServiceProvider,
+} from "@fctc/widget-logic/provider";
+import CustomError from "@provider/fallback/custom-error";
+import { ModalProvider } from "@provider/modal-provider";
+import PublicProvider from "@provider/public-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 = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <AnimatePresence mode="wait">
+      {/* <Suspense fallback={<CustomSuspense />}> */}
+      <ErrorBoundary fallback={<CustomError />}>
+        <EnvProvider>
+          <QueryClientProvider client={queryClient}>
+            <MainProvider>
+              <ServiceProvider>
+                <MetaProvider>
+                  <ModalProvider>
+                    <PublicProvider>{children}</PublicProvider>
+                  </ModalProvider>
+                </MetaProvider>
+              </ServiceProvider>
+            </MainProvider>
+          </QueryClientProvider>
+        </EnvProvider>
+      </ErrorBoundary>
+      {/* </Suspense> */}
+    </AnimatePresence>
+  );
+};
+export default AppProvider;

package/src/router/index.tsx

@@ -0,0 +1,26 @@
+import { ROUTES } from "@constants/routes.constants"
+import { LoginPage } from "@pages/login"
+import EnterPinCode from "@pages/pincode"
+import { Navigate, Route, Routes } from "react-router-dom"
+import POSRoutes from "./pos-route"
+import ProtectedRoute from "./protected-route"
+import PublicRoute from "./public-route"
+
+const AppRouter = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Navigate to={ROUTES.pinCode} replace />} />
+
+      <Route element={<PublicRoute />}>
+        <Route path={ROUTES.login} element={<LoginPage />} />
+      </Route>
+
+      <Route element={<ProtectedRoute />}>
+        <Route path={ROUTES.pinCode} element={<EnterPinCode />} />
+        {POSRoutes()}
+      </Route>
+    </Routes>
+  )
+}
+
+export default AppRouter