sme-pos-package 1.0.14 → 1.0.15

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

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

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

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

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

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

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

@@ -1,99 +0,0 @@
-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>
-  );
-};