sme-pos-package 1.0.7 → 1.0.9

package/src/utils/pos/bill.ts

@@ -0,0 +1,156 @@
+import { OrderDetailItemType } from "@type/order";
+import { dd_mm_yyyy, formatCurrency, hh_mm } from "@utils/functions";
+
+type TProps = {
+  items: OrderDetailItemType[];
+  data: any;
+  company: any;
+  userProfile: any;
+  addressFormat: string;
+  table: string;
+  paymentMethod: string;
+  amountTotalWithoutTax: number;
+  label: string;
+};
+
+const W_IDX = 2;
+const W_NAME = 18;
+const W_QTY = 3;
+const W_PRICE = 9;
+const W_AMT = 12;
+
+const padLeft = (s: string, w: number) => {
+  if (s.length >= w) return s.slice(-w);
+  return " ".repeat(w - s.length) + s;
+};
+
+const padRight = (s: string, w: number) => {
+  if (s.length >= w) return s.slice(0, w);
+  return s + " ".repeat(w - s.length);
+};
+
+const padCenter = (s: string, w: number) => {
+  if (s.length >= w) return s.slice(0, w);
+
+  const total = w - s.length;
+  const left = Math.floor(total / 2);
+  const right = Math.ceil(total / 2);
+
+  return " ".repeat(left) + s + " ".repeat(right);
+};
+
+const wrap = (text: string, w: number): string[] => {
+  if (w <= 0) return [""];
+  const words = text.split(/\s+/);
+  const lines: string[] = [];
+  let line = "";
+  for (const wrd of words) {
+    if (line.length === 0) {
+      line = wrd.slice(0, w);
+    } else if (line.length + 1 + wrd.length <= w) {
+      line += ` ${wrd}`;
+    } else {
+      lines.push(padRight(line, w));
+      line = wrd.slice(0, w);
+    }
+  }
+  if (line.length > 0) lines.push(padRight(line, w));
+  return lines.length === 0 ? [padRight("", w)] : lines;
+};
+
+const itemRows = (index: number, item: any): string => {
+  const itemTotal = item.price * item.quantity;
+  const itemName = item.name;
+  const nameLines = wrap(itemName, W_NAME);
+
+  let first =
+    "[L]" +
+    padLeft(index.toString(), W_IDX) +
+    " " +
+    nameLines[0] +
+    " " +
+    padLeft(item.quantity.toString(), W_QTY) +
+    " " +
+    padLeft(formatCurrency(item.unitPrice), W_PRICE) +
+    " " +
+    padLeft(formatCurrency(itemTotal), W_AMT);
+
+  if (nameLines.length === 1) return first;
+
+  const cont = nameLines
+    .slice(1)
+    .map((ln) => {
+      return "[L]" + " ".repeat(W_IDX + 1) + ln;
+    })
+    .join("\n");
+  return first + "\n" + cont;
+};
+
+const headerRow = () => {
+  const row =
+    padLeft("TT", W_IDX) +
+    " " +
+    padCenter("Ten mon", W_NAME) +
+    " " +
+    padLeft("SL", W_QTY) +
+    " " +
+    padLeft("Don gia", W_PRICE) +
+    " " +
+    padLeft("Thanh tien", W_AMT);
+  return `[L]<b>${row}</b>`;
+};
+
+export const generateBill = ({
+  items,
+  data,
+  company,
+  userProfile,
+  addressFormat,
+  table,
+  paymentMethod,
+  amountTotalWithoutTax,
+  label,
+}: TProps) => {
+  const tableBlock =
+    items
+      ?.map((item, index) => {
+        return itemRows(index + 1, item);
+      })
+      .join("\n[C]\n") || "";
+
+  const textBill = `[C]{LOGO}
+[C]
+[L]<font size='small'>${addressFormat}</font>
+
+[C]<font size='wide'><b>${label}</b></font>
+[C]
+[C]<b>${table}</b> | Thoi gian: <b>${hh_mm(data?.date_order)} - ${dd_mm_yyyy(
+    data?.date_order
+  )}</b></font>
+[C]
+[C]------------------------------------------------
+[C]
+[L]So hoa don:[R]<b>${data?.pos_reference}</b>
+[L]Phuong thuc thanh toan:[R]<b>${paymentMethod || "Chua xac dinh"}</b>
+[C]
+[C]------------------------------------------------
+${headerRow()}
+[C]------------------------------------------------
+${tableBlock}
+
+     [C]Thue (VAT): [R]${formatCurrency(data?.amount_tax)}d
+     [C]Thanh tien: [R]${formatCurrency(amountTotalWithoutTax)}d
+[C]------------------------------------------------
+[L]<font size='wide,tall'><b>Tong tien:</b></font>[R]<font size='wide,tall'><b>${formatCurrency(
+    data?.amount_total
+  )}d</b></font>
+[C]
+[C]<font size='small'>${
+    userProfile?.company?.invoice_name
+  } xin chan thanh cam on!
+[C]Powered by ${company?.companyInfo?.data?.[0]?.display_name}</font>
+[C]
+[C]
+[C]`;
+  return textBill.trimStart();
+};

package/src/utils/pos/convert-order.ts

@@ -0,0 +1,58 @@
+import { ORDER_STATE } from "@constants/order-state";
+import { OrderStatus, TBasicOrder } from "@type/order";
+import { TOrder } from "@type/sale";
+
+type ApiOrder = {
+  id: number;
+  pos_reference: string;
+  amount_total: number;
+  date_order: string | Date;
+  state: string;
+  table_id: string | number | boolean;
+  [key: string]: any;
+};
+
+function formatOrderStatus(status: string): OrderStatus {
+  switch (status) {
+    case "draft":
+      return ORDER_STATE.NEW;
+    default:
+      return status as OrderStatus;
+  }
+}
+
+export function convertOrders(records: ApiOrder[]) {
+  return records.map((order) => {
+    const date = add7Hours(order.date_order);
+    return {
+      id: order.id,
+      table_id: order.table_id,
+      state: formatOrderStatus(order.state),
+      lines: order.lines,
+      create_date: date,
+      pos_reference: order.pos_reference,
+      amount_total: order.amount_total,
+      amount_tax: 0,
+      user_id: order.user_id,
+      partner_id: order.partner_id,
+    } as TBasicOrder;
+  });
+}
+
+export function convertOrderDetail(apiOrder?: TOrder): TOrder | undefined {
+  if (!apiOrder) {
+    return undefined;
+  }
+  const date_order = add7Hours(apiOrder.date_order);
+
+  return {
+    ...apiOrder,
+    table_id: apiOrder.table_id ? apiOrder.table_id.toString() : false,
+    date_order,
+  };
+}
+
+function add7Hours(str: string | Date) {
+  const d = new Date(str);
+  return new Date(d.getTime() + 7 * 3600 * 1000);
+}

package/src/utils/pos/helpers.ts

@@ -0,0 +1,48 @@
+import { TEMPLATE_NAME } from "@constants/template-name.constant";
+import { JSX } from "react";
+
+export const getGridColsClass = (templateName: string | undefined) => {
+  switch (templateName) {
+    case TEMPLATE_NAME.PRODUCT_TEMPLATE:
+      return "grid-cols-[repeat(auto-fill,minmax(202px,1fr))]";
+    case TEMPLATE_NAME.PREPARATION_TEMPLATE:
+      return "grid-cols-[repeat(auto-fill,minmax(324px,1fr))]";
+    case TEMPLATE_NAME.CUSTOMER_PROFILE_TEMPLATE:
+      return "grid-cols-[repeat(auto-fill,minmax(350px,1fr))]";
+    default:
+      return "grid-cols-[repeat(auto-fill,minmax(397px,1fr))]";
+  }
+};
+
+type CurrencyOptions = {
+  value?: number | string;
+  currency?: string;
+  render?: (value: string, currency: string) => JSX.Element;
+};
+
+function formatCurrency(value?: number | string, currency?: string): string;
+function formatCurrency(props: CurrencyOptions): JSX.Element;
+function formatCurrency(
+  arg1?: number | string | CurrencyOptions,
+  arg2?: string
+): string | JSX.Element {
+  let value = 0;
+  let currency = "đ";
+  let render = undefined;
+  if (typeof arg1 === "object") {
+    if (arg1.value) value = Number(arg1.value);
+    if (arg1.currency) currency = arg1.currency;
+    render = arg1.render;
+  } else {
+    if (arg1) value = Number(arg1);
+    if (arg2) currency = arg2;
+  }
+
+  const format = new Intl.NumberFormat("en-US");
+  const valueString = format.format(Math.ceil(Number(value)));
+  if (render) return render(valueString, currency);
+  if (!value || Number(value) <= 0) return "0 " + currency;
+  return valueString + " " + currency;
+}
+
+export { formatCurrency };

package/src/utils/pos/session.ts

@@ -0,0 +1,44 @@
+import { QrCodeLine } from "@assets/icons/order-icon";
+import { IcBankCard, IcCashLine } from "@assets/icons/payment-icon";
+
+export const generateCloseSessionData = (
+  data: TSessionData | undefined,
+  cashCount: number
+): TCloseSessionItemProps[] => {
+  if (!data) return [];
+
+  const cashOpening = data.default_cash_details.opening || 0;
+  const cashAmount = data.default_cash_details.amount || 0;
+  const cashDifference = Number(cashCount) - cashOpening - cashAmount;
+
+  const getNonCashPayment = () => {
+    return data.non_cash_payment_methods.map((method) => {
+      return {
+        id: method.id,
+        title: method.name,
+        price: method.amount,
+        subItems: [
+          { title: "record", price: method.amount },
+          { title: "difference", price: 0 },
+        ],
+        icon: method.type === "bank" ? IcBankCard : QrCodeLine,
+      };
+    });
+  };
+
+  return [
+    {
+      id: 1,
+      title: data.default_cash_details.name,
+      price: data.default_cash_details.amount || 0,
+      subItems: [
+        { title: "open_session", price: cashOpening },
+        { title: "cash_in_out", price: 0 },
+        { title: "counted", price: cashCount || 0 },
+        { title: "difference", price: cashDifference },
+      ],
+      icon: IcCashLine,
+    },
+    ...getNonCashPayment(),
+  ];
+};

package/src/utils/storages/index.ts

@@ -0,0 +1 @@
+export * from "./local-storage";

package/src/utils/storages/local-storage.ts

@@ -0,0 +1,72 @@
+export interface Context {
+  uid: number;
+  lang: string;
+  allowCompanys: number[];
+  [key: string]: string | number | number[] | undefined;
+}
+
+export const localStorageUtils = (() => {
+  const setToken = (access_token: string) => {
+    localStorage.setItem("accessToken", access_token);
+  };
+  const setRefreshToken = (refresh_token: string) => {
+    localStorage.setItem("refreshToken", refresh_token);
+  };
+  const setContext = (context: Context) => {
+    localStorage.setItem("rootContext", JSON.stringify(context));
+  };
+
+  const getAccessToken = (): string | null => {
+    return localStorage.getItem("accessToken");
+  };
+  const getRefreshToken = (): string | null => {
+    return localStorage.getItem("refreshToken");
+  };
+
+  const getContext = (): Context | null => {
+    const context = localStorage.getItem("context");
+    return context ? JSON.parse(context) : null;
+  };
+  const setNavbarStyle = (style: string) => {
+    localStorage.setItem("navbarStyle", style);
+  };
+  const getNavbarStyle = (): string | null => {
+    return localStorage.getItem("navbarStyle");
+  };
+  const setLayoutDisplay = (layoutDisplay: "left" | "right") => {
+    localStorage.setItem("layoutDisplay", layoutDisplay);
+  };
+  const getLayoutDisplay = (): "left" | "right" => {
+    return localStorage.getItem("layoutDisplay") as "left" | "right";
+  };
+  const clearToken = () => {
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("refreshToken");
+  };
+  const setBackUrl = (backUrl: string) => {
+    localStorage.setItem("backUrl", backUrl);
+  };
+  const getBackUrl = (): string | null => {
+    return localStorage.getItem("backUrl");
+  };
+  const removeBackUrl = () => {
+    localStorage.removeItem("backUrl");
+  };
+
+  return {
+    setToken,
+    setRefreshToken,
+    setContext,
+    getAccessToken,
+    getRefreshToken,
+    getContext,
+    clearToken,
+    setNavbarStyle,
+    getNavbarStyle,
+    setLayoutDisplay,
+    getLayoutDisplay,
+    setBackUrl,
+    getBackUrl,
+    removeBackUrl,
+  };
+})();

package/tailwind.preset.ts

@@ -0,0 +1,25 @@
+export default {
+  theme: {
+    extend: {
+      colors: {
+        primary: "var(--color-primary)",
+        secondary: "var(--color-secondary)",
+        text: {
+          primary: "#060606",
+          disable: "#666",
+          btn: "var(--text-button)",
+          active: "var(--text-active-primary)",
+          secondary: "var(--text-active-secondary)",
+        },
+        table: {
+          unavailable: "var(--text-unavailable-table-color)",
+          takeaway: "var(--text-take-away-color)",
+        },
+        surface: {
+          default: "#FAFAFA",
+          primary: "var(--text-surface-primary)",
+        },
+      },
+    },
+  },
+};

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "outDir": "dist",
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "module": "ESNext",
+    "declaration": true,
+    "declarationMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@assets/*": ["./src/assets/*"],
+      "@pages/*": ["./src/pages/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@components/*": ["./src/components/*"],
+      "@icons/*": ["./src/icons/*"],
+      "@layouts/*": ["./src/layouts/*"],
+      "@layouts": ["./src/layouts"],
+      "@router/*": ["./src/router/*"],
+      "@constants/*": ["./src/constants/*"],
+      "@type/*": ["./src/types/*"],
+      "@hooks/*": ["./src/hooks/*"],
+      "@store/*": ["./src/store/*"],
+      "@provider/*": ["./src/provider/*"]
+    }
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  target: "es2020",
+  entry: {
+    index: "src/index.ts",
+    "tailwind.preset": "tailwind.preset.ts",
+  },
+  format: ["esm"],
+  platform: "neutral",
+  dts: true, // Generate TypeScript declaration files
+  splitting: false,
+  clean: true,
+  sourcemap: true,
+  minify: true,
+  external: [
+    "react",
+    "react-dom",
+    "react-router-dom",
+    "@fctc/sme-widget-ui",
+    "@fctc/widget-logic",
+    "lottie-react",
+    "readable-stream", // 🔥 QUAN TRỌNG
+    "stream",
+    "mqtt",
+  ],
+  define: {
+    "process.env.NODE_ENV": '"production"',
+  },
+});

package/dist/index.d.ts

@@ -1,58 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare const EMenuLink: (props: any) => react_jsx_runtime.JSX.Element;
-
-type TProps$1 = {
-    columns: any[];
-    row: any;
-    onClickRow: any;
-};
-declare const KitchenTemplate: ({ columns, row, onClickRow }: TProps$1) => react_jsx_runtime.JSX.Element;
-
-declare const PosOrderTemplate: ({ readOnly, row, handleClick, onAddItem, onPayment, onIssueInvoice, onPrintInvoice, }: {
-    readOnly?: boolean;
-    row: any;
-    handleClick: () => void;
-    onAddItem?: () => void;
-    onPayment?: () => void;
-    onIssueInvoice?: () => void;
-    onPrintInvoice?: () => void;
-}) => react_jsx_runtime.JSX.Element;
-
-declare const PosTemplate: ({ row, columns, onClickRow, settings_act_id, res_model, }: {
-    row: any;
-    columns: any;
-    onClickRow: any;
-    settings_act_id?: number;
-    res_model?: string;
-}) => react_jsx_runtime.JSX.Element;
-
-type RecordType = Record<string, any>;
-type TProps = {
-    openModal: boolean;
-    setOpenModal: (val: boolean) => void;
-    methods: any;
-    row: any;
-    record: RecordType;
-};
-declare const OpenSessionModal: (props: TProps) => react_jsx_runtime.JSX.Element;
-
-declare const PosAppProvider: ({ children }: {
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-
-declare const SocketProvider: ({ children }: {
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-
-declare const PublicProvider: ({ children }: {
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-
-declare const AppProvider: ({ children }: {
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-
-declare const POSRoutes: () => react_jsx_runtime.JSX.Element;
-
-export { AppProvider, EMenuLink, KitchenTemplate, OpenSessionModal, POSRoutes, PosAppProvider, PosOrderTemplate, PosTemplate, PublicProvider, SocketProvider };