sme-pos-package 1.0.7 → 1.0.9

package/src/constants/language.store.ts

@@ -0,0 +1,21 @@
+export interface ILanguage {
+  value: string;
+  label: string;
+  subLabel: string;
+  id: string;
+}
+
+export const languages: ILanguage[] = [
+  {
+    id: "vi_VN",
+    value: "vi",
+    label: "Tiếng Việt",
+    subLabel: "Tiếng Việt",
+  },
+  {
+    id: "en_US",
+    value: "en",
+    label: "English",
+    subLabel: "United Kingdom",
+  },
+];

package/src/constants/methods.constant.ts

@@ -0,0 +1,10 @@
+export const METHOD = {
+  ACTION_POS_ORDER_CANCEL: "action_pos_order_cancel",
+  UNLINK: "unlink",
+  GET_CLOSING_CONTROL_DATA: "get_closing_control_data",
+  POST_CLOSING_CASH_DETAILS: "post_closing_cash_details",
+  UPDATE_CLOSING_CONTROL_STATE_SESSION: "update_closing_control_state_session",
+  ACTION_POS_SESSION_CLOSING_CONTROL: "action_pos_session_closing_control",
+  ACTION_POS_SESSION_CLOSE: "action_pos_session_close",
+  NAME_SEARCH: "name_search",
+};

package/src/constants/order-state.ts

@@ -0,0 +1,8 @@
+export enum ORDER_STATE {
+  NEW = "new",
+  PAID = "paid",
+  INVOICED = "invoiced",
+  IN_PAID = "in_paid",
+  CANCEL = "cancel",
+  ALL = "all",
+}

package/src/constants/payment-color.constant.ts

@@ -0,0 +1,26 @@
+export const PAYMENT_COLORS = [
+  {
+    type: "card",
+    activeBorder: "border-[#6BCE00]",
+    background: "bg-[#F1FFE2]",
+    iconBackground: "bg-[#6BCE00]",
+  },
+  {
+    type: "qr",
+    activeBorder: "border-[#FFD207]",
+    background: "bg-[#FFF5C7]",
+    iconBackground: "bg-[#FFD207]",
+  },
+  {
+    type: "cash",
+    activeBorder: "border-[#004FD3]",
+    background: "bg-[#CEE1FF]",
+    iconBackground: "bg-[#004FD3]",
+  },
+  {
+    type: "soft_pos",
+    activeBorder: "border-[#1FC163]",
+    background: "bg-[#E0FAEB]",
+    iconBackground: "bg-[#1FC163]",
+  },
+];

package/src/constants/query.constant.ts

@@ -0,0 +1,14 @@
+export const QUERY_KEYS = {
+  POS_ID: "pos_id",
+  FLOOR: "floor",
+  SESSION_ID: "session-id",
+  ORDER_ID: "order-id",
+  CATEGORY_ID: "category-id",
+  OPEN: "open",
+  CUSTOMER_INFO: "customer-info",
+  CUSTOMER_ID: "customer-id",
+  TABLE_ID: "table-id",
+  KITCHEN_ORDER_STATUS: "kitchen-order-status",
+  CLOSE_SESSION: "close-session",
+  SHOW_SCREEN: "show-screen",
+};

package/src/constants/routes.constants.ts

@@ -0,0 +1,23 @@
+export const ROUTES = {
+  home: "/",
+  login: "/login",
+  pinCode: "/pin-code",
+  independentForm: "/independent-form",
+} as const;
+
+enum POSPath {
+  POS = "/pos",
+  TABLES = "/pos/tables",
+  MENUS = "/pos/menus",
+  ORDERS = "/pos/orders",
+  PAYMENTS = "/pos/payments",
+  BILL = "/pos/bill",
+  SUCCESS = "/pos/success",
+  MANAGEMENT_FLOOR = "/pos/management-floor",
+  ORDER_DETAIL = "/pos/management-order/order-detail",
+  ORDERS_KITCHEN_MANAGEMENT = "/pos/kitchens/:kitchenId/orders",
+  CUSTOMER_VIEW = "/pos/customer-view",
+  SETTING = "setting/single-form",
+}
+
+export default POSPath;

package/src/constants/template-name.constant.ts

@@ -0,0 +1,9 @@
+export const TEMPLATE_NAME = {
+  PARTNER_TEMPLATE: "partner_template",
+  PRODUCT_TEMPLATE: "product_template",
+  POS_TEMPLATE: "pos_template",
+  PREPARATION_TEMPLATE: "preparation_template",
+  POS_ORDER_TEMPLATE: "pos_order_template",
+  CUSTOMER_PROFILE_TEMPLATE: "customer_profile_template",
+  CATEGORY_PRODUCT_TEMPLATE: "category_product_template",
+} as const;

package/src/hooks/bill/use-get-bill-information.ts

@@ -0,0 +1,49 @@
+import { useGetBase64Photo } from "@hooks/common/use-get-base64-photo";
+import { usePosAppProvider } from "@provider/app-provider";
+import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+import { useMemo } from "react";
+
+const useGetBillInformation = () => {
+  const { items } = useOrderDetail();
+  const { taxAmount, totalAmount } = useOrderDetail();
+  const { company, userProfile } = usePosAppProvider();
+
+  const { data: brandLogo } = useGetBase64Photo(
+    company?.companyInfo.data[0]?.logo
+  );
+
+  // const data: any = convertOrderDetail(orderDetailById);
+
+  const address = useMemo(() => {
+    return userProfile?.company?.address;
+  }, [userProfile?.company]);
+
+  const addressFormat = useMemo(() => {
+    return `${address?.street} ${address?.street2}, ${
+      address?.ward ?? ""
+    }, Tỉnh ${address?.state} `;
+  }, [userProfile?.company]);
+
+  // const paymentMethod = useMemo(() => {
+  //   return (
+  //     orderDetailData?.payment_ids?.[0]?.payment_method_id?.display_name ||
+  //     "Chưa xác định"
+  //   );
+  // }, [orderDetailData]);
+
+  const amountTotalWithoutTax = useMemo(() => {
+    return totalAmount - taxAmount;
+  }, [totalAmount, taxAmount]);
+
+  return {
+    items,
+    company,
+    userProfile,
+    addressFormat,
+    brandLogo,
+    paymentMethod: "Tiền mặt",
+    amountTotalWithoutTax,
+  };
+};
+
+export default useGetBillInformation;

package/src/hooks/common/load-env-config.ts

@@ -0,0 +1,98 @@
+import { useEnv } from "@fctc/widget-logic/provider";
+
+export const loadEnvConfig = () => {
+  const { setupEnv, env, setEnvFile } = useEnv();
+  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();
+      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
+      );
+      document.documentElement.style.setProperty(
+        "--text-button",
+        config?.TEXT_BUTTON
+      );
+      document.documentElement.style.setProperty(
+        "--text-active-primary",
+        config?.ACTIVE_PRIMARY_COLOR
+      );
+      document.documentElement.style.setProperty(
+        "--text-active-secondary",
+        config?.ACTIVE_SECONDARY_COLOR
+      );
+      document.documentElement.style.setProperty(
+        "--text-take-away-color",
+        config?.TAKE_AWAY_COLOR
+      );
+      document.documentElement.style.setProperty(
+        "--text-unavailable-table-color",
+        config?.UNAVAILABLE_TABLE_COLOR
+      );
+      document.documentElement.style.setProperty(
+        "--text-surface-primary",
+        config?.SURFACE_PRIMARY_COLOR
+      );
+    } catch (error) {
+      console.error("Error loading env or config:", error);
+    }
+  }
+  return { loadEnvAndConfig };
+};

package/src/hooks/common/use-back.ts

@@ -0,0 +1,13 @@
+import { startTransition } from "react";
+import { useNavigate } from "react-router-dom";
+
+const useBack = () => {
+  const navigate = useNavigate();
+  return () => {
+    startTransition(() => {
+      navigate(-1);
+    });
+  };
+};
+
+export default useBack;

package/src/hooks/common/use-broadcast.ts

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+
+export function useBroadcast<T>(
+  channelName: string,
+  onMessage: (msg: T) => void
+) {
+  useEffect(() => {
+    const bc = new BroadcastChannel(channelName);
+    bc.onmessage = (event) => {
+      onMessage(event.data);
+    };
+    return () => bc.close();
+  }, [channelName, onMessage]);
+
+  const postMessage = (msg: T) => {
+    const bc = new BroadcastChannel(channelName);
+    bc.postMessage(msg);
+    bc.close();
+  };
+
+  return { postMessage };
+}

package/src/hooks/common/use-click-outside.ts

@@ -0,0 +1,58 @@
+import { useEffect, useRef, type RefObject } from "react";
+
+const DEFAULT_EVENTS = ["mousedown", "touchstart"] as const;
+
+type EventType = (typeof DEFAULT_EVENTS)[number];
+
+interface UseClickOutsideOptions {
+  handler: (event?: Event) => void;
+  events?: readonly EventType[];
+  nodes?: (HTMLDivElement | null)[]; // Ensure consistency with HTMLDivElement
+  refs?: any;
+}
+
+export const useClickOutside = ({
+  handler,
+  events = DEFAULT_EVENTS,
+  nodes = [], // Default to empty array to avoid undefined errors
+  refs,
+}: UseClickOutsideOptions): RefObject<HTMLDivElement | null> => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const listener = (event: Event) => {
+      const { target } = event as MouseEvent | TouchEvent;
+
+      if (
+        refs &&
+        refs?.length > 0 &&
+        refs?.some((r: any) => r.current?.contains(target as Node))
+      ) {
+        return;
+      }
+
+      if (!(target instanceof HTMLElement)) return;
+
+      const shouldIgnore =
+        target.hasAttribute("data-ignore-outside-clicks") ||
+        (!document.body.contains(target) && target.tagName !== "HTML");
+
+      const shouldTrigger =
+        nodes.length > 0
+          ? nodes.every((node) => node && !event.composedPath().includes(node))
+          : ref.current && !ref.current.contains(target);
+
+      if (shouldTrigger && !shouldIgnore) {
+        handler(event);
+      }
+    };
+
+    events.forEach((event) => document.addEventListener(event, listener));
+
+    return () => {
+      events.forEach((event) => document.removeEventListener(event, listener));
+    };
+  }, [handler, nodes, events]);
+
+  return ref;
+};

package/src/hooks/common/use-get-base64-photo.ts

@@ -0,0 +1,71 @@
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetBase64Photo = (src?: string) => {
+  const queryResult = useQuery({
+    queryKey: ["photo-base64", src],
+    queryFn: () => urlToBase64(src ?? ""),
+    enabled: !!src,
+  });
+
+  return {
+    isLoading: queryResult.isLoading,
+    data: src ? queryResult.data : undefined,
+  };
+};
+
+async function urlToBase64(url: string): Promise<string> {
+  try {
+    // 1️⃣ Fetch ảnh (binary)
+    const response = await fetch(url, { mode: "cors" });
+    if (!response.ok) throw new Error(`Fetch failed: ${response.statusText}`);
+
+    const contentType = response.headers.get("content-type") || "";
+
+    // 2️⃣ Nếu là SVG
+    if (contentType.includes("image/svg")) {
+      const svgText = await response.text();
+      const svgBlob = new Blob([svgText], { type: "image/svg+xml" });
+      const svgUrl = URL.createObjectURL(svgBlob);
+      const pngBase64 = await convertSvgToPngBase64(svgUrl);
+      URL.revokeObjectURL(svgUrl);
+      return pngBase64;
+    }
+
+    // 3️⃣ Nếu là ảnh thường (png/jpg/webp)
+    const blob = await response.blob();
+    const imgUrl = URL.createObjectURL(blob);
+    const pngBase64 = await convertSvgToPngBase64(imgUrl);
+    URL.revokeObjectURL(imgUrl);
+    return pngBase64;
+  } catch (err) {
+    console.error("urlToBase64 error:", err);
+    throw err;
+  }
+}
+
+// Ảnh SVG hoặc PNG → PNG base64
+function convertSvgToPngBase64(imageUrl: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const width = img.naturalWidth || img.width || 512;
+      const height = img.naturalHeight || img.height || 512;
+      canvas.width = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext("2d");
+      ctx?.drawImage(img, 0, 0, width, height);
+
+      try {
+        const base64 = canvas.toDataURL("image/png");
+        resolve(base64);
+      } catch (err) {
+        reject(err);
+      }
+    };
+    img.onerror = reject;
+    img.src = imageUrl;
+  });
+}

package/src/hooks/common/use-get-query.ts

@@ -0,0 +1,25 @@
+import { QUERY_KEYS } from "@constants/query.constant"
+import { useMemo } from "react"
+import { useQueryParams } from "./use-query-params"
+
+const useGetQuery = () => {
+  const { getQuery } = useQueryParams()
+
+  return useMemo(() => {
+    const orderId = getQuery(QUERY_KEYS.ORDER_ID)
+    const sessionId = getQuery(QUERY_KEYS.SESSION_ID)
+    const posId = Number(getQuery(QUERY_KEYS.POS_ID)) || 5
+    const kitchenOrderStatus = Number(getQuery(QUERY_KEYS.KITCHEN_ORDER_STATUS))
+    const floorId = Number(getQuery(QUERY_KEYS.FLOOR))
+
+    return {
+      orderId,
+      sessionId,
+      posId,
+      kitchenOrderStatus,
+      floorId,
+    }
+  }, [getQuery])
+}
+
+export default useGetQuery

package/src/hooks/common/use-pos.ts

@@ -0,0 +1,21 @@
+import { sessionStorageUtils } from "@fctc/widget-logic/utils";
+import { usePosAppProvider } from "@provider/app-provider";
+import { useMemo } from "react";
+
+const usePos = () => {
+  const { user } = usePosAppProvider();
+
+  return useMemo(() => {
+    const dataUser = user?.userProfile?.data;
+    const service = sessionStorageUtils.getMenuFocus().service || `wesap`;
+    const xNode = dataUser?.x_node || "";
+
+    return {
+      dataUser,
+      service,
+      xNode,
+    };
+  }, [user]);
+};
+
+export default usePos;

package/src/hooks/common/use-query-params.ts

@@ -0,0 +1,89 @@
+import { useSearchParams } from "react-router-dom";
+
+export const useQueryParams = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const getQuery = (key: string) => {
+    return searchParams.get(key);
+  };
+
+  const updateQuery = (key: string, value: string) => {
+    setSearchParams(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        params.set(key, value);
+        return params;
+      },
+      { replace: true }
+    );
+  };
+
+  const updateMultipleQuery = (query: QueryObject[]) => {
+    setSearchParams(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        query.forEach((q) => {
+          if (q.value) params.set(q.key, q.value);
+          else params.delete(q.key);
+        });
+        return params;
+      },
+      { replace: true }
+    );
+  };
+
+  function removeParam(keys: string[]) {
+    setSearchParams(
+      (prev) => {
+        const params = new URLSearchParams(prev.toString());
+
+        keys.forEach((key) => {
+          params.delete(key);
+        });
+
+        return params;
+      },
+      { replace: true }
+    );
+  }
+
+  function removeParams(keys: string[]) {
+    setSearchParams(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        keys.forEach((key) => {
+          params.delete(key);
+        });
+        return params;
+      },
+      { replace: true }
+    );
+  }
+
+  function formatQuery(allowedKeys: string[]) {
+    const params = new URLSearchParams(searchParams.toString());
+    const filtered = new URLSearchParams();
+
+    for (const key of allowedKeys) {
+      const value = params.get(key);
+      if (value !== null) {
+        filtered.set(key, value);
+      }
+    }
+
+    return filtered.toString();
+  }
+  return {
+    getQuery,
+    formatQuery,
+    updateQuery,
+    removeParam,
+    updateMultipleQuery,
+    removeParams,
+  };
+};
+
+interface QueryObject {
+  key: string;
+  value?: string;
+}

package/src/hooks/common/use-speech.ts

@@ -0,0 +1,36 @@
+export const useSpeech = () => {
+  const speak = async (text: string, lang: string = "vi-VN") => {
+    try {
+      const envResponse = await fetch("/env.json");
+      const envConfig = await envResponse.json();
+      const res = await fetch(
+        `https://texttospeech.googleapis.com/v1/text:synthesize?key=${envConfig.config.googleKey}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            input: { text },
+            voice: { languageCode: lang, name: "vi-VN-Wavenet-A" },
+            audioConfig: { audioEncoding: "MP3" },
+          }),
+        }
+      );
+
+      const data = await res.json();
+      const audioContent = data.audioContent;
+      const audio = new Audio("data:audio/mp3;base64," + audioContent);
+      await audio.play();
+    } catch (err) {
+      console.error("❌ Google TTS lỗi:", err);
+      // await TextToSpeech.speak({ text, lang });
+    }
+  };
+
+  // const stop = async () => {
+  //   await TextToSpeech.stop();
+  // };
+  return {
+    speak,
+    stop,
+  };
+};