sme-pos-package 1.0.7 → 1.0.9

package/src/components/pos-management/payment-content/bill/content.tsx

@@ -0,0 +1,207 @@
+// import { IcPrint } from "@assets/icons/breadcrumbs-icon";
+// import { UsbPrinter } from "@atomsolution/usb-printer-capacitor";
+// import ButtonAction from "@components/common/button-action";
+// import { ScreenType } from "@components/customer-view";
+// import { QUERY_KEYS } from "@constants/query.constant";
+// import { LoadingIcon } from "@fctc/sme-widget-ui";
+// import { useGetBase64Photo } from "@hooks/common/use-get-base64-photo";
+// import { usePlatform } from "@hooks/common/use-platform";
+// import { useQueryParams } from "@hooks/common/use-query-params";
+// import { usePosAppProvider } from "@provider/app-provider";
+// import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+// import { useOrder } from "@provider/pos-provider/order-provider";
+// import { useSale } from "@provider/pos-provider/sale-provider";
+// import { usePosTable } from "@provider/pos-provider/table-provider";
+// import { dd_mm_yyyy, hh_mm } from "@utils/functions";
+// import { CapacitorPresentation } from "dual-screen-plugin";
+// import { useEffect, useMemo, useState } from "react";
+// import { toast } from "react-toastify";
+
+// const Content = ({ isHideAction }: { isHideAction?: boolean }) => {
+//   const { items } = useOrderDetail();
+//   const { orderDetailById: data } = useOrder();
+//   const { getQuery } = useQueryParams();
+
+//   const tableId = getQuery(QUERY_KEYS.TABLE_ID);
+//   const { company, userProfile } = usePosAppProvider();
+
+//   const { data: logo } = useGetBase64Photo(userProfile?.company?.logo);
+//   const { tablesByFloor } = usePosTable();
+
+//   const { data: saleData } = useSale().queryResult;
+//   const { isAndroid } = usePlatform();
+//   const address = useMemo(() => {
+//     return userProfile?.company?.address;
+//   }, [userProfile?.company]);
+
+//   const addressFormat = useMemo(() => {
+//     return `${address?.street} đường ${address?.street2}, ${
+//       address?.ward ?? ""
+//     }, Tỉnh ${address?.state} `;
+//   }, [userProfile?.company]);
+
+//   // const paymentMethod = useMemo(() => {
+//   //   const paymentId = data?.payment_ids?.[0]?.payment_method_id?.id;
+//   //   if (!paymentId) return "";
+//   //   const methods = saleData?.["pos.payment.method"]?.data;
+//   //   return methods?.find((method: any) => method.id === paymentId)?.name ?? "";
+//   // }, [data?.payment_ids, saleData]);
+
+//   const paymentMethod = "Soft POS";
+//   const amountTotalWithoutTax = useMemo(() => {
+//     return (data?.amount_total ?? 0) - (data?.amount_tax ?? 0);
+//   }, [data?.amount_total, data?.amount_tax]);
+
+//   const tableNumber = useMemo(() => {
+//     const table = tablesByFloor?.find(
+//       (table: any) => table?.id === Number(tableId)
+//     );
+
+//     return table?.table_number ?? "";
+//   }, [tablesByFloor]);
+
+//   const handlePrintText = async () => {
+//     if (!isAndroid) return;
+//     try {
+//       setPrinting(true);
+//       await UsbPrinter.connect();
+
+//       const textBill = generateTextBill();
+//       await UsbPrinter.printText({
+//         text: textBill,
+//       });
+
+//       await UsbPrinter.disconnect();
+//       setPrinting(false);
+//     } catch (e) {
+//       setPrinting(false);
+//       toast.error(`USB Print failed: ${e}`);
+//     }
+//   };
+
+//   const money = (amount: number) => {
+//     return amount.toLocaleString();
+//   };
+
+//   const generateTextBill = () => {
+//     // Tạo danh sách sản phẩm
+//     const productLines =
+//       items
+//         ?.map((item, index) => {
+//           const itemTotal = item.price * item.quantity;
+//           return `[L]${index + 1}. ${item.name}[R]${item.quantity} x ${money(
+//             item.unitPrice
+//           )}
+// [R]${money(itemTotal)} VND`;
+//         })
+//         .join("\n") || "";
+
+//     const textBill = `[C]<font size='big'><b>${
+//       userProfile?.company?.invoice_name
+//     }</b></font>
+// [C]<font size='small'>${addressFormat}</font>
+// [C]
+// [C]<font size=''>Bàn: <b>${tableNumber || "Trống"}</b> | Thời gian: <b>${
+//       data?.create_date && hh_mm(data?.create_date)
+//     } - ${data?.create_date && dd_mm_yyyy(data?.create_date)}</b></font>
+// [C]
+// [L]Số hoá đơn:[R]<b>${data?.pos_reference}</b>
+// [L]Phương thức thanh toán:[R]<b>${paymentMethod || "Chưa xác định"}</b>
+// [C]----------------------------------------
+// [L]<b>TT | Tên món | SL | Đơn giá | Thành tiền</b>
+// [C]----------------------------------------
+// ${productLines}
+// [C]----------------------------------------
+// [L]Thuế (VAT):[R]${money(data?.amount_tax ?? 0)} VND
+// [L]Thành tiền:[R]${money(amountTotalWithoutTax)} VND
+// [C]========================================
+// [L]<font size='wide,tall'><b>Tổng tiền:</b></font>[R]<font size='wide,tall'><b>${money(
+//       data?.amount_total ?? 0
+//     )} VND</b></font>
+// [C]========================================
+// [C]
+// [C]<font size='small'>${
+//       userProfile?.company?.invoice_name
+//     } xin chân thành cảm ơn!
+// [C]Powered by ${company?.companyInfo?.data?.[0]?.display_name}</font>
+// [C]
+// [C]
+// [C]`;
+
+//     return textBill.trimStart();
+//   };
+
+//   const [printing, setPrinting] = useState(false);
+
+//   useEffect(() => {
+//     CapacitorPresentation.sendMessage({
+//       data: {
+//         screen: ScreenType.PAYMENT_SUCCESS,
+//         data: {
+//           totalAmount: data?.amount_total,
+//           time: `${data?.create_date && hh_mm(data?.create_date)} - ${
+//             data?.create_date && dd_mm_yyyy(data?.create_date)
+//           }`,
+//           paymentMethod: paymentMethod,
+//           orderNumber: data?.pos_reference,
+//         },
+//       },
+//     });
+//   }, [paymentMethod, data]);
+
+//   useEffect(() => {
+//     logo && handlePrintText();
+//   }, [logo]);
+
+//   return (
+//     <div className="flex flex-col gap-3 w-full pt-8">
+//       {!isHideAction && (
+//         <div className="flex flex-col items-center justify-center gap-2.5">
+//           {/* <div className="flex items-center gap-2">
+//             <label className="text-sm">
+//               <input
+//                 type="radio"
+//                 name="printMode"
+//                 value="text"
+//                 checked={printMode === "text"}
+//                 onChange={() => setPrintMode("text")}
+//                 className="mr-1"
+//               />
+//               In văn bản
+//             </label>
+//             <label className="text-sm">
+//               <input
+//                 type="radio"
+//                 name="printMode"
+//                 value="svg"
+//                 checked={printMode === "svg"}
+//                 onChange={() => setPrintMode("svg")}
+//                 className="mr-1"
+//               />
+//               In hình ảnh
+//             </label>
+//           </div> */}
+//           <ButtonAction
+//             iconSrc={printing ? <LoadingIcon /> : <IcPrint />}
+//             onClick={() => handlePrintText()}
+//             text={`In hoá đơn`}
+//             className="button-secondary w-[437px]"
+//           />
+//         </div>
+//       )}
+//       <div className="flex justify-center">
+//         {/* {productLines && (
+//           <div className="bg-white rounded-2xl">
+//             <div
+//               dangerouslySetInnerHTML={{
+//                 __html: htmlString,
+//               }}
+//             ></div>
+//           </div>
+//         )} */}
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Content;

package/src/components/pos-management/payment-content/bill/index.tsx

@@ -0,0 +1,18 @@
+// import { useSpeech } from "@hooks/common/use-speech";
+// import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+// import { useEffect } from "react";
+// import Content from "./content";
+
+// const BillContent = () => {
+//   const { speak } = useSpeech();
+//   const { taxAmount, totalAmount } = useOrderDetail();
+//   const total = totalAmount + taxAmount;
+
+//   useEffect(() => {
+//     speak(`Thanh toán thành công, ${total} đồng`);
+//   }, []);
+
+//   return <Content />;
+// };
+
+// export default BillContent;

package/src/components/pos-management/payment-content/card-payment/index.tsx

@@ -0,0 +1,124 @@
+import {
+  BorderGradient,
+  DashedLine,
+  IcBankCard,
+  IcCardPaymentMerchant,
+  IcCardPaymentPos,
+  IcConnect,
+} from "@assets/icons/payment-icon";
+import ButtonAction from "@components/common/button-action";
+import { ORDER_STATE } from "@constants/order-state";
+import useLoopFetchOrder from "@hooks/order/use-loop-fetch-order";
+import { usePayment } from "@provider/pos-provider/payment-provider";
+import { useSocketData } from "@provider/pos-provider/socket-provider";
+import { JSX, useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { PaymentInfo } from "../payment-info";
+import { PaymentLayout } from "../payment-layout";
+import { MessageHandlerType, PublishType } from "./pos-payment/qr-connect";
+import WaitingForPaymentPosModal from "./waiting-for-payment-pos-modal";
+
+export const CardPaymentMethod = ({ total }: { total: number }) => {
+  useLoopFetchOrder();
+
+  return (
+    <PaymentLayout
+      leftContent={<LeftContent />}
+      rightContent={<RightContent total={total} />}
+    />
+  );
+};
+
+const LeftContent = () => {
+  return (
+    <div className="flex flex-col gap-3 items-center">
+      <DeviceIcon icon={IcCardPaymentMerchant} />
+      <DashedLine />
+      <IcConnect />
+      <DashedLine />
+      <DeviceIcon icon={IcCardPaymentPos} />
+    </div>
+  );
+};
+
+const RightContent = ({ total }: { total: number }) => {
+  const { onRequestPayment } = usePayment();
+  const { clientMtqq } = useSocketData();
+  const [orderStatus, setOrderStatus] = useState<string>(ORDER_STATE.NEW);
+  const [showWaitingModal, setShowWaitingModal] = useState(false);
+
+  useEffect(() => {
+    orderStatus === "waiting_for_payment"
+      ? setShowWaitingModal(true)
+      : setShowWaitingModal(false);
+  }, [orderStatus]);
+
+  useEffect(() => {
+    clientMtqq?.on("message", (_: any, payload: any) => {
+      const props = JSON.parse(payload.toString());
+      const handler: MessageHandlerType = {
+        [PublishType.Payment]: (payload) => {
+          if (typeof payload === "boolean") {
+            toast.success("Gọi thanh toán thành công");
+            setOrderStatus("waiting_for_payment");
+          }
+        },
+        [PublishType.PaymentResult]: (payload) => {
+          const { isSuccess, orderId } = payload;
+          if (isSuccess) {
+            toast.success("Thanh toán thành công12");
+            setOrderStatus("waiting_for_update");
+          } else {
+            toast.error("Thanh toán thất bại");
+            setOrderStatus("payemnt_failed");
+          }
+        },
+      };
+      if (props?.payload && props?.type) {
+        handler[props?.type as PublishType]?.(props.payload);
+      }
+    });
+  }, [clientMtqq]);
+
+  const handleRequestPayment = async (amount: number) => {
+    try {
+      await onRequestPayment(amount);
+    } catch (error: any) {
+      toast.error(error?.message || "");
+    }
+  };
+  return (
+    <>
+      <div className="flex flex-col gap-3 h-full justify-center ">
+        <PaymentInfo />
+        <ButtonAction
+          onClick={() => handleRequestPayment(total)}
+          iconSrc={<IcBankCard />}
+          text="Thanh toán trên POS"
+          className="button-primary h-[56px]"
+        />
+      </div>
+      <WaitingForPaymentPosModal
+        isOpen={showWaitingModal}
+        onClose={() => setOrderStatus(ORDER_STATE.NEW)}
+        onRetry={() => onRequestPayment(total)}
+      />
+    </>
+  );
+};
+
+const DeviceIcon = ({ icon }: { icon: JSX.Element }) => {
+  return (
+    <div
+      className="rounded-full relative size-[90px] flex justify-center items-center"
+      style={{}}
+    >
+      <div className=" z-0 absolute top-0 left-0 ">
+        <BorderGradient />
+      </div>
+      <div className="relative size-20 border border-stroke-disabled rounded-full flex justify-center items-center">
+        {icon}
+      </div>
+    </div>
+  );
+};

package/src/components/pos-management/payment-content/card-payment/pos-payment/pos-connect.tsx

@@ -0,0 +1,183 @@
+import { IcDisConnectPos, IcPosConnect } from "@assets/icons/pos-connect-icon";
+import QrConnect, {
+  MessageHandlerType,
+  MqttConnectType,
+  PublishType,
+} from "@components/pos-management/payment-content/card-payment/pos-payment/qr-connect";
+
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useSpeech } from "@hooks/common/use-speech";
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import { useSocketData } from "@provider/pos-provider/socket-provider";
+import { parseStringToObject, randomNumber } from "@utils/functions";
+import { t } from "i18next";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+
+export const PosConnect = ({ dataUser }: { dataUser: any }) => {
+  const { clientMtqq, onPublish, onDisconnect, onConnect } = useSocketData();
+  const { speak } = useSpeech();
+
+  const { getQuery } = useQueryParams();
+  const posId = getQuery(QUERY_KEYS.POS_ID);
+
+  const sessionId = getQuery(QUERY_KEYS.SESSION_ID);
+  const { getData } = useSale();
+
+  const POSName = getData(LoadDataModel.POS_CONFIG)?.[0]?.name;
+  const qrLocal = localStorage.getItem(`mttqQrConnect${posId}`);
+  const serialNumberPosLocal = localStorage.getItem(`serialNumberPos${posId}`);
+
+  const [socketPaymentQr, setSocketPaymentQr] = useState("");
+  const [showQrConnect, setShowQrConnect] = useState(false);
+  const [serialNumberPos, setSerialNumberPos] = useState("");
+  const [isConnect, setIsConnect] = useState(0);
+
+  const onGetQrConnect = async () => {
+    if (!dataUser?.company.cif) {
+      return undefined;
+    }
+    if (qrLocal) return qrLocal;
+
+    const serialNumber = randomNumber();
+    localStorage.setItem(`serialNumber${posId}`, serialNumber);
+    const res: MqttConnectType = {
+      cif: dataUser?.company.cif,
+      platform: "web",
+      serialNumber: serialNumber,
+      posId: `${POSName}(${posId?.toString()})`,
+    };
+    localStorage.setItem(`mttqQrConnect${posId}`, JSON.stringify(res));
+    return JSON.stringify(res);
+  };
+
+  const onConnectDevice = async () => {
+    const qr = await onGetQrConnect();
+    qr && setSocketPaymentQr(qr);
+    setShowQrConnect(true);
+  };
+
+  useEffect(() => {
+    qrLocal && setSocketPaymentQr(qrLocal);
+    serialNumberPosLocal && setSerialNumberPos(serialNumberPosLocal);
+  }, [qrLocal, serialNumberPosLocal]);
+
+  const cancelConnect = () => {
+    setSocketPaymentQr("");
+    setSerialNumberPos("");
+    localStorage.removeItem(`serialNumberPos${posId}`);
+    localStorage.removeItem(`mttqQrConnect${posId}`);
+  };
+
+  useEffect(() => {
+    clientMtqq?.on("message", (_: any, payload: any) => {
+      const props =
+        typeof JSON.parse(payload.toString()) === "object"
+          ? JSON.parse(payload.toString())
+          : parseStringToObject(JSON.parse(payload.toString()));
+      // console.log("props", props);
+      const handleRequiredPayment = async () => {
+        speak(`Bàn ${props?.payload?.table_number} yêu cầu thanh toán`);
+        toast.success(`Bàn ${props?.payload?.table_number} yêu cầu thanh toán`);
+      };
+      const handler: MessageHandlerType = {
+        [PublishType.RequestPayment]: () => handleRequiredPayment(),
+        [PublishType.Ping]: (payload) => {
+          if (typeof payload === "object") {
+            setIsConnect(3000);
+            // console.log("payload", payload);
+            const serialNumberOnMessage = payload.serialNumber;
+            localStorage.setItem(
+              `serialNumberPos${posId}`,
+              serialNumberOnMessage
+            );
+            setShowQrConnect(false);
+            serialNumberOnMessage && setSerialNumberPos(serialNumberOnMessage);
+            if (payload.showToast)
+              toast.success(
+                `${t("receive_connection_from")}:` + payload.serialNumber
+              );
+          }
+        },
+      };
+      if (props?.payload && props?.type) {
+        handler[props?.type as PublishType]?.(props.payload);
+      }
+    });
+  }, [clientMtqq]);
+
+  useEffect(() => {
+    const topics = [];
+    socketPaymentQr && topics.push(socketPaymentQr);
+    dataUser?.x_node &&
+      sessionId &&
+      topics.push(`["${dataUser?.x_node}","pos.${sessionId}"]`);
+    if (dataUser?.x_node && onConnect) {
+      onConnect(topics);
+    }
+  }, [dataUser, sessionId, posId, socketPaymentQr]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (socketPaymentQr && serialNumberPos) {
+        onPublish(
+          socketPaymentQr,
+          JSON.stringify({ type: PublishType.Ping, payload: true })
+        );
+        setIsConnect((prev) => prev - 1000);
+      }
+    }, 1500);
+
+    return () => clearInterval(interval);
+  }, [socketPaymentQr, serialNumberPos, clientMtqq]);
+
+  useEffect(() => {
+    return () => {
+      clientMtqq && onDisconnect();
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        className={`flex gap-2 items-center rounded-full h-11 bg-white px-[6px] ${
+          !serialNumberPos && "cursor-pointer"
+        }`}
+        onClick={() => !serialNumberPos && onConnectDevice()}
+      >
+        <div className="size-8 rounded-full bg-sub-secondary flex justify-center items-center relative">
+          <IcPosConnect />
+          {serialNumberPos && (
+            <div className="absolute size-[10px] bg-white rounded-full right-0 bottom-0 flex justify-center items-center">
+              <div
+                className="size-[7px] rounded-full"
+                style={{
+                  background: isConnect > 0 ? "#22c55e" : "#ef4444",
+                }}
+              />
+            </div>
+          )}
+        </div>
+        <p className="pr-[10px] tetx-sm text-semibold text-text-primary">
+          {serialNumberPos ? serialNumberPos : "Kết nối"}
+        </p>
+        {serialNumberPos && (
+          <div onClick={() => cancelConnect()}>
+            <IcDisConnectPos />
+          </div>
+        )}
+      </div>
+      {showQrConnect && (
+        <QrConnect
+          isOpen={showQrConnect}
+          onClose={() => setShowQrConnect(false)}
+          posId={posId && !isNaN(Number(posId)) ? Number(posId) : 0}
+          name={POSName}
+        />
+      )}
+    </>
+  );
+};
+
+export default PosConnect;