sme-pos-package 1.0.13 → 1.0.15

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

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

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

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

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