sme-pos-package 1.0.7 → 1.0.9

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

@@ -0,0 +1,185 @@
+import ModalZoom from "@components/common/modal/modal-zoom";
+import { usePosAppProvider } from "@provider/app-provider";
+import { useSocketData } from "@provider/pos-provider/socket-provider";
+import { randomNumber } from "@utils/functions";
+import { t } from "i18next";
+import { QRCodeSVG } from "qrcode.react";
+import { useEffect, useMemo } from "react";
+const QrConnect = ({
+  posId,
+  name,
+  isOpen,
+  onClose,
+  setMqttConnect,
+}: {
+  posId: number;
+  name: string;
+  isOpen: boolean;
+  onClose: () => void;
+  setMqttConnect?: (val: string) => void;
+}) => {
+  const { user } = usePosAppProvider();
+  const dataUser = user?.userProfile?.data;
+  const { clientMtqq } = useSocketData();
+  const mqttConnect = useMemo(() => {
+    if (!dataUser?.company.cif) {
+      return undefined;
+    }
+    if (localStorage.getItem(`mttqQrConnect${posId}`)) {
+      return localStorage.getItem(`mttqQrConnect${posId}`);
+    }
+
+    const serialNumber = randomNumber();
+    localStorage.setItem(`serialNumber${posId}`, serialNumber);
+    const res: MqttConnectType = {
+      cif: dataUser?.company.cif,
+      platform: "web",
+      serialNumber: serialNumber,
+      posId: `${name}(${posId.toString()})`,
+    };
+    localStorage.setItem(`mttqQrConnect${posId}`, JSON.stringify(res));
+    return JSON.stringify(res);
+  }, [dataUser]);
+
+  useEffect(() => {
+    mqttConnect && setMqttConnect && setMqttConnect(mqttConnect);
+  }, [mqttConnect]);
+
+  // useEffect(() => {
+  //   async function getSerialDevice() {
+  //     await CapacitorPresentation.getDeviceInfo().then((info) => {
+  //       console.log("Log ~ getSerialDevice ~ info:", info);
+  //     });
+  //   }
+  //   getSerialDevice();
+  // }, [mqttConnect]);
+
+  useEffect(() => {
+    clientMtqq?.on("message", (topic: any, payload: any) => {
+      if (topic != mqttConnect) return;
+      const props = JSON.parse(payload.toString());
+      const handler: MessageHandlerType = {
+        // [PublishType.Ping]: (payload) => {
+        //   if (typeof payload === "object") {
+        //     clientMtqq?.publish(
+        //       payload.topic,
+        //       JSON.stringify({ type: PublishType.Ping, payload: true })
+        //     );
+        //     localStorage.setItem(
+        //       `PosDevice${posId}`,
+        //       JSON.stringify({
+        //         name: payload.serialNumber,
+        //         latest_date_connect: getTimeNow(),
+        //       })
+        //     );
+        //     // mqttConnect &&
+        //     //   localStorage.setItem(`mttqQrConnect${posId}`, mqttConnect);
+        //     onClose();
+        //   }
+        // },
+      };
+      if (props?.payload && props?.type) {
+        handler[props?.type as PublishType]?.(props.payload);
+      }
+    });
+    // return () => {
+    //   clientMtqq && onDisconnect();
+    // };
+  }, [clientMtqq, mqttConnect]);
+  return (
+    <ModalZoom
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("connect_new_device")}
+      className="pb-4 w-[420px]"
+    >
+      {mqttConnect && (
+        <div className="flex flex-col items-center gap-6">
+          <p className="text-sm font-medium text-secondary">
+            {t("qr_connect_description")}
+          </p>
+          <QRCodeSVG
+            value={mqttConnect}
+            size={220}
+            bgColor={"#ffffff"}
+            fgColor={"#000000"}
+            level={"L"}
+          />
+          <p className="text-base font-semibold">
+            {t("device_code")}: POS-{posId}
+          </p>
+        </div>
+      )}
+    </ModalZoom>
+  );
+};
+
+export default QrConnect;
+
+export enum PublishType {
+  Ping = "ping",
+  Payment = "payment",
+  PaymentResult = "payment_result",
+  RequestPayment = "request_payment",
+}
+export type MqttConnectType = {
+  cif: string;
+  platform: "android" | "ios" | "web" | "other";
+  serialNumber: string;
+  posId?: string;
+};
+
+export type PublishPayload =
+  | {
+      type: PublishType.Ping;
+      payload:
+        | {
+            topic: string;
+            serialNumber: string;
+          }
+        | boolean;
+    }
+  | {
+      type: PublishType.Payment;
+      payload: WaitingOrderType | boolean;
+    }
+  | {
+      type: PublishType.PaymentResult;
+      payload: {
+        isSuccess: boolean;
+        orderId: string;
+      };
+    }
+  | {
+      type: PublishType.RequestPayment;
+      payload: {
+        orderId: string;
+        amount: number;
+        createdAt?: string;
+      };
+    };
+
+export type MessageHandlerType = {
+  [PublishType.Ping]?: (
+    payload:
+      | { topic: string; serialNumber: string; showToast: boolean }
+      | boolean
+  ) => void;
+  [PublishType.Payment]?: (payload: WaitingOrderType | boolean) => void;
+  [PublishType.PaymentResult]?: (payload: {
+    isSuccess: boolean;
+    orderId: string;
+  }) => void;
+  [PublishType.RequestPayment]?: (payload: {
+    orderId: string;
+    amount: number;
+    createdAt?: string;
+  }) => void;
+};
+
+export type WaitingOrderType = {
+  topic: string;
+  orderId: string;
+  amount: number;
+  createdAt?: string;
+};

package/src/components/pos-management/payment-content/card-payment/waiting-for-payment-pos-modal.tsx

@@ -0,0 +1,37 @@
+import ButtonAction from "@components/common/button-action";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import Lottie from "lottie-react";
+import animationData from "../../../../../public/assets/lottie/loading.json";
+type TProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onRetry: () => void;
+};
+
+const WaitingForPaymentPosModal = ({ isOpen, onClose, onRetry }: TProps) => {
+  return (
+    <ModalZoom
+      isOpen={isOpen}
+      onClose={() => onClose()}
+      className="rounded-2xl w-[420px] flex flex-col gap-6 items-center justify-center"
+    >
+      <div style={{ width: 248 }}>
+        <Lottie animationData={animationData} />
+      </div>
+
+      <p className="text-2xl font-semibold text-[--text-primary]">
+        Chờ thanh toán
+      </p>
+      <div className="w-full flex justify-between gap-2">
+        <ButtonAction
+          onClick={() => onRetry()}
+          className="button-secondary w-full"
+        >
+          Thử lại
+        </ButtonAction>
+      </div>
+    </ModalZoom>
+  );
+};
+
+export default WaitingForPaymentPosModal;

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

@@ -0,0 +1,216 @@
+import ButtonAction from "@components/common/button-action";
+import { VNCurrency } from "@components/common/header";
+import useCheckSession from "@components/common/use-check-session";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { usePayment } from "@provider/pos-provider/payment-provider";
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import { formatCurrency } from "@utils/functions";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { InfoLine, PaymentInfo } from "../payment-info";
+import { PaymentLayout } from "../payment-layout";
+import SessionCloseModal from "../session-close-modal";
+
+export const CashPayment = ({ total }: { total: number }) => {
+  const [customerAmount, setCustomerAmount] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [isPayingState, setIsPayingState] = useState(false);
+  const [showCloseSessionModal, setShowCloseSessionModal] = useState(false);
+  const { onCheckSession } = useCheckSession();
+  const { handlePayment } = usePayment();
+  const {
+    queryResult: { data },
+  } = useSale();
+
+  const { getQuery } = useQueryParams();
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+  const payment_method_ids = useMemo(() => {
+    if (!data) return [];
+    return (
+      (data?.[LoadDataModel.POS_SESSION].data?.[0]
+        ?.payment_method_ids as number[]) || []
+    );
+  }, [data]);
+
+  const payment_method = useMemo(() => {
+    return data && data[LoadDataModel.POS_PAYMENT_METHOD].data;
+  }, [data]);
+
+  const payment_method_ids_data = useMemo(() => {
+    if (!payment_method) return [];
+    return payment_method
+      ?.filter((item: any) => payment_method_ids.includes(item.id))
+      .map((item: any) => {
+        return {
+          id: item.id,
+          paymentType: item.payment_type,
+        };
+      });
+  }, [payment_method, payment_method_ids]);
+
+  const onPayment = async () => {
+    const amountNumber = Number(customerAmount);
+    if (customerAmount === "") return setErrorMessage("Vui lòng nhập số tiền");
+    if (isNaN(amountNumber) || amountNumber <= 0 || amountNumber < total) {
+      return setErrorMessage(
+        "Vui lòng nhập số tiền lớn hơn hoặc bằng số tiền cần thanh toán."
+      );
+    }
+
+    const isSessionOpened = await onCheckSession();
+
+    if (!isSessionOpened) {
+      setShowCloseSessionModal(true);
+      return;
+    }
+
+    try {
+      await handlePayment({
+        receivedAmount: amountNumber,
+        amount: total,
+        orderId: Number(orderId),
+        paymentMethodId: payment_method_ids_data.find(
+          (item: any) => item.paymentType === "cash"
+        )?.id,
+        paymentName: "cash",
+      });
+    } catch (error) {
+      console.log("error", error);
+      setIsPayingState(false);
+      setErrorMessage("");
+    }
+  };
+
+  const refund: number = useMemo(() => {
+    const amountRefund =
+      Number(customerAmount) - Number(total) > 0
+        ? Number(customerAmount) - Number(total)
+        : 0;
+
+    if (customerAmount) {
+      amountRefund >= 0
+        ? setErrorMessage("")
+        : setErrorMessage("Vui lòng nhập số tiền hợp lệ");
+      return amountRefund;
+    }
+    return 0;
+  }, [customerAmount, total]);
+
+  useEffect(() => {
+    setCustomerAmount(total.toString());
+  }, []);
+  // const { onPaymentSuccess } = useOrderDetail();
+
+  return (
+    <>
+      {/* <div onClick={() => onPaymentSuccess(123)}>dfdsfnsdnf</div> */}
+      <PaymentLayout
+        leftContent={
+          <LeftContent
+            customerAmount={customerAmount}
+            setIsPayingState={setIsPayingState}
+            setCustomerAmount={setCustomerAmount}
+            errorMessage={errorMessage}
+            setErrorMessage={setErrorMessage}
+          />
+        }
+        rightContent={
+          <RightContent
+            customerAmount={customerAmount}
+            refund={refund}
+            onPayment={onPayment}
+            isPayingState={isPayingState}
+          />
+        }
+      />
+      {showCloseSessionModal && (
+        <SessionCloseModal isOpen={showCloseSessionModal} onClose={() => {}} />
+      )}
+    </>
+  );
+};
+
+const LeftContent = ({
+  customerAmount,
+  setIsPayingState,
+  setCustomerAmount,
+  errorMessage,
+  setErrorMessage,
+}: {
+  customerAmount: string;
+  setIsPayingState: React.Dispatch<React.SetStateAction<boolean>>;
+  setCustomerAmount: React.Dispatch<React.SetStateAction<string>>;
+  errorMessage?: string;
+  setErrorMessage: React.Dispatch<React.SetStateAction<string>>;
+}) => {
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawValue = e.target.value.replace(/\,/g, "");
+    if (!/^\d*$/.test(rawValue)) return;
+
+    setCustomerAmount(rawValue);
+  };
+  return (
+    <div className="">
+      <p className="text-text-primary font-medium">Tiền khách đưa</p>
+      <div className="border-b-[2px] border-text-active max-w-[200px] flex justify-between items-center">
+        <input
+          type="text"
+          value={formatCurrency(customerAmount)}
+          onChange={handleAmountChange}
+          onWheel={(e) => e.currentTarget.blur()}
+          onFocus={() => {
+            setErrorMessage("");
+            setIsPayingState(false);
+          }}
+          className="text-[32px] font-semibold placeholder:text-neutral-400-68 outline-none text-text-primary max-w-full"
+          placeholder="0"
+          inputMode="numeric"
+        />
+        <p>{VNCurrency}</p>
+      </div>
+
+      <p className="text-sm leading-5 text-state-error-base mt-1">
+        {errorMessage}
+      </p>
+    </div>
+  );
+};
+
+const RightContent = ({
+  refund,
+  customerAmount,
+  onPayment,
+  isPayingState,
+}: {
+  refund: number;
+  customerAmount: string;
+  onPayment: () => void;
+  isPayingState: boolean;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col gap-3 h-full justify-center ">
+      <PaymentInfo />
+      <div className="flex flex-col gap-3">
+        <div className="w-full h-[1px] bg-stroke-disabled" />
+        <InfoLine
+          label="Tiền khách đưa"
+          value={`${Number(customerAmount).toLocaleString()}${VNCurrency}`}
+        />
+        <InfoLine
+          label="Tiền thừa"
+          value={`${refund.toLocaleString()}${VNCurrency}`}
+          valueClassName="text-colored-success"
+        />
+        <ButtonAction
+          disabled={isPayingState}
+          text={t("finish_payment")}
+          onClick={onPayment}
+          className="button-primary"
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,70 @@
+import { IcClose } from "@assets/icons/common";
+import { ButtonIcon } from "@components/common/button-icon";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+import { useEffect, useState } from "react";
+import { CardPaymentMethod } from "./card-payment";
+import { CashPayment } from "./cash-payment";
+import { PaymentMethodCards } from "./payment-method-cards";
+import { QRPayment } from "./qr-payment";
+import { SoftPosPayment } from "./soft-pos-payment";
+
+type Props = {
+  onHidePayment: () => void;
+};
+
+const enum PaymentMethod {
+  QR = "qr",
+  CARD = "card",
+  CASH = "cash",
+  SOFT_POS = "soft_pos",
+}
+
+export const PaymentContent = ({ onHidePayment }: Props) => {
+  const { taxAmount, totalAmount } = useOrderDetail();
+  const { removeParam } = useQueryParams();
+  const total = totalAmount + taxAmount;
+  const [paymentMethod, setPaymentMethod] = useState<string>("");
+  const renderPaymentContent = () => {
+    switch (paymentMethod) {
+      case PaymentMethod.QR:
+        return <QRPayment total={total} />;
+      case PaymentMethod.CASH:
+        return <CashPayment total={total} />;
+      case PaymentMethod.SOFT_POS:
+        return <SoftPosPayment total={total} />;
+      default:
+        return <CardPaymentMethod total={total} />;
+    }
+  };
+
+  useEffect(() => {
+    if (
+      paymentMethod !== PaymentMethod.QR &&
+      paymentMethod !== PaymentMethod.SOFT_POS
+    )
+      removeParam([QUERY_KEYS.SHOW_SCREEN]);
+  }, [paymentMethod]);
+
+  return (
+    <div className="overflow-y-auto flex-1 h-full flex flex-col">
+      <div className="flex justify-between items-center h-[60px] px-3 py-[6px] sticky top-0 bg-white">
+        <span />
+        <span className="font-semibold text-text-primary">
+          Phương thức thanh toán
+        </span>
+        <ButtonIcon onClick={() => onHidePayment()} iconSrc={<IcClose />} />
+      </div>
+      <div className="flex flex-col gap-4 py-4 px-3 flex-1 overflow-y-auto">
+        <PaymentMethodCards
+          currentPaymentMethod={paymentMethod}
+          setPaymentMethod={setPaymentMethod}
+        />
+        <div className="flex items-center flex-1 w-full">
+          {renderPaymentContent()}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,67 @@
+import { VNCurrency } from "@components/common/header";
+import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+import { ceilDecimal, cn } from "@utils/functions";
+
+export const PaymentInfo = () => {
+  const { taxAmount, totalAmount, totalQty } = useOrderDetail();
+
+  return (
+    <div className="flex-1 flex flex-col gap-3">
+      <InfoLine
+        label="Tổng tiền"
+        value={`${ceilDecimal(totalAmount).toLocaleString()}${VNCurrency}`}
+        subLabel={
+          <div className="h-6 px-2 min-w-6 w-fit rounded-full bg-colored-info text-[#2597D0] text-xs flex justify-center items-center">
+            <span>{totalQty}</span>
+          </div>
+        }
+      />
+      {/* <InfoLine
+          label="Giảm giá"
+          value={totalQty.toString()}
+          valueClassName="text-colored-error"
+        /> */}
+      <InfoLine
+        label="Tiền thuế"
+        value={`${ceilDecimal(taxAmount).toLocaleString()}${VNCurrency}`}
+      />
+      <div className="w-full h-[1px] bg-stroke-disabled" />
+      <InfoLine
+        label="Tổng thanh toán"
+        value={`${ceilDecimal(
+          totalAmount + taxAmount
+        ).toLocaleString()}${VNCurrency}`}
+        labelClassName="text-[18px] text-text-primary"
+        valueClassName="text-[18px] text-text-active"
+      />
+    </div>
+  );
+};
+
+export const InfoLine = ({
+  label,
+  value,
+  subLabel,
+  labelClassName,
+  valueClassName,
+}: {
+  label: string;
+  value: string;
+  subLabel?: React.ReactNode;
+  labelClassName?: string;
+  valueClassName?: string;
+}) => {
+  return (
+    <div className="w-full flex justify-between items-center">
+      <div className="flex gap-[6px] items-center">
+        <p className={cn("text-text-disable font-medium", labelClassName)}>
+          {label}
+        </p>
+        {subLabel}
+      </div>
+      <p className={cn("text-text-primary font-semibold", valueClassName)}>
+        {value}
+      </p>
+    </div>
+  );
+};

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

@@ -0,0 +1,16 @@
+export const PaymentLayout = ({
+  leftContent,
+  rightContent,
+}: {
+  leftContent: React.ReactNode;
+  rightContent: React.ReactNode;
+}) => {
+  return (
+    <div className="grid grid-cols-2 bg-white px-4 py-6 rounded-xl items-center flex-1 min-h-[370px]">
+      <div className="flex justify-center w-full">{leftContent}</div>
+      <div className="px-6 size-full border-l border-dashed border-stroke-disabled flex flex-col justify-end">
+        {rightContent}
+      </div>
+    </div>
+  );
+};

package/src/components/pos-management/payment-content/payment-method-cards.tsx

@@ -0,0 +1,99 @@
+import { IcBankCard, IcQRCode, IcWallet } from "@assets/icons/payment-icon";
+import { PAYMENT_COLORS } from "@constants/payment-color.constant";
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import { useEffect, useMemo } from "react";
+
+const getIcon = (name: string) => {
+  switch (name) {
+    case "cash":
+      return IcWallet;
+    case "qr":
+      return IcQRCode;
+    case "card":
+      return IcBankCard;
+    default:
+      return IcWallet;
+  }
+};
+
+interface PaymentContentProps {
+  currentPaymentMethod: string;
+  setPaymentMethod: (id: string) => void;
+}
+
+export const PaymentMethodCards: React.FC<PaymentContentProps> = ({
+  currentPaymentMethod,
+  setPaymentMethod,
+}) => {
+  const {
+    queryResult: { data },
+  } = useSale();
+  const payMethodIds = useMemo(() => {
+    if (!data) return [];
+    return (
+      (data?.[LoadDataModel.POS_SESSION].data?.[0]
+        ?.payment_method_ids as number[]) || []
+    );
+  }, [data]);
+
+  const paymentMethod = useMemo(() => {
+    return data && data[LoadDataModel.POS_PAYMENT_METHOD].data;
+  }, [data]);
+
+  const paymentMethods = useMemo(() => {
+    if (!paymentMethod) return [];
+    return paymentMethod
+      ?.filter((item: any) => payMethodIds.includes(item.id))
+      .map((item: any) => {
+        return {
+          id: item.id,
+          title: item.name,
+          icon: getIcon(item.payment_type),
+          payment_type: item.payment_type,
+          onclick: () => {
+            setPaymentMethod(item.payment_type);
+          },
+          colorCollection: PAYMENT_COLORS.find(
+            (color) => color.type === item.payment_type
+          ),
+        };
+      });
+  }, [paymentMethod, payMethodIds]);
+
+  useEffect(() => {
+    if (paymentMethods.length > 0) {
+      setPaymentMethod(paymentMethods[0].payment_type);
+    }
+  }, [paymentMethods]);
+
+  return (
+    <div className="flex items-center justify-center gap-4">
+      {paymentMethods.length > 0 &&
+        paymentMethods.map((payment: any) => {
+          const isActive = currentPaymentMethod === payment.payment_type;
+          return (
+            <button
+              key={payment.id}
+              onClick={payment.onclick}
+              className={`w-full h-[60px] flex items-center justify-start gap-4 rounded-xl border px-4
+              ${
+                isActive
+                  ? `${payment.colorCollection?.activeBorder} ${payment.colorCollection?.background} border-2`
+                  : "border-stroke-default bg-white  hover:border-gray-300 p-[17px]"
+              }`}
+            >
+              <div
+                className={`flex h-10 w-10 items-center justify-center rounded-full 
+                text-white ${payment.colorCollection?.iconBackground}`}
+              >
+                <payment.icon />
+              </div>
+              <span className="text-base font-semibold text-text-primary">
+                {payment.title}
+              </span>
+            </button>
+          );
+        })}
+    </div>
+  );
+};