sme-pos-package 1.0.13 → 1.0.15

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

@@ -1,118 +0,0 @@
-import { Skeleton } from "@components/common/skeleton";
-import useCheckSession from "@components/common/use-check-session";
-import { ORDER_STATE } from "@constants/order-state";
-import { useEnv } from "@fctc/widget-logic/provider";
-import useGetQuery from "@hooks/common/use-get-query";
-import { useQueryParams } from "@hooks/common/use-query-params";
-import { useOrder } from "@provider/pos-provider/order-provider";
-import { usePayment } from "@provider/pos-provider/payment-provider";
-import { useSale } from "@provider/pos-provider/sale-provider";
-import { useEffect, useState } from "react";
-import { toast } from "react-toastify";
-import { PaymentInfo } from "../payment-info";
-import { PaymentLayout } from "../payment-layout";
-import SessionCloseModal from "../session-close-modal";
-import QRCode from "./qr_code";
-
-type Props = {
-  total: number;
-};
-
-export const QRPayment = ({ total }: Props) => {
-  const { onGeneratePaymentQrInfo } = usePayment();
-  const [qrCode, setQrCode] = useState("");
-  const { env } = useEnv();
-  const { orderId, sessionId } = useGetQuery();
-  const { updateQuery } = useQueryParams();
-  const { orderDetailById } = useOrder();
-
-  const handleGetQrPaymentInfo = async () => {
-    try {
-      if (!sessionId) return;
-      if (!orderId) return;
-      const data = await onGeneratePaymentQrInfo(total, sessionId, orderId);
-      if (!data) return;
-
-      const qrCode = QRCode(
-        data.amount.toString(),
-        data.narrative,
-        data.account_no,
-        data.bin_code
-      );
-      setQrCode(qrCode.imgTag);
-    } catch (error: any) {
-      toast.error(error?.message || "");
-      console.log("error", error);
-    }
-  };
-
-  const [showCloseSessionModal, setShowCloseSessionModal] = useState(false);
-  const { onCheckSession } = useCheckSession();
-  const { queryResult } = useSale();
-
-  const handleCheckPayment = async () => {
-    const isSessionOpened = await onCheckSession();
-
-    if (!isSessionOpened) {
-      setShowCloseSessionModal(true);
-      return;
-    }
-  };
-
-  useEffect(() => {
-    try {
-      handleGetQrPaymentInfo();
-    } catch (error) {
-      console.log("error", error);
-    }
-    handleCheckPayment();
-    const interval = setInterval(() => {
-      if (
-        orderDetailById?.state === ORDER_STATE.IN_PAID ||
-        orderDetailById?.state === ORDER_STATE.NEW
-      ) {
-        queryResult.refetch();
-      }
-    }, 3000);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  return (
-    <div className="h-full flex items-center justify-center w-full">
-      <QRContent qrData={qrCode} />
-      {showCloseSessionModal && (
-        <SessionCloseModal isOpen={showCloseSessionModal} onClose={() => {}} />
-      )}
-    </div>
-  );
-};
-
-export const QRContent = ({ qrData }: { qrData: string }) => {
-  return (
-    <PaymentLayout
-      leftContent={<QrPaymentCode qrData={qrData} />}
-      rightContent={<PaymentInfo />}
-    />
-  );
-};
-
-export const QrPaymentCode = ({ qrData }: { qrData: string }) => {
-  return (
-    <div className="flex flex-col items-center gap-4 size-[250px]">
-      <div className="flex-1 flex flex-col gap-2 items-center justify-center w-[235px]">
-        {qrData ? (
-          <div
-            className="w-full h-full [&>img]:w-full [&>img]:h-full [&>img]:object-contain"
-            dangerouslySetInnerHTML={{ __html: qrData }}
-          />
-        ) : (
-          <Skeleton className="size-[260px] rounded-lg" />
-        )}
-        <img src="/assets/images/bank-logos.png" className="w-full" />
-      </div>
-    </div>
-  );
-};

package/src/components/pos-management/payment-content/qr-payment/qr_code.js

@@ -1,29 +0,0 @@
-import QRCODE from "@unicube/vietqr/qrcode.js";
-
-import { CURRENCY, SERVICE_CODE, VIETQR } from "./vietqr.js";
-
-const QRCode = (amount, description, accountNumber, bankCode) => {
-  let vietQRdata = new VIETQR();
-
-  vietQRdata.fields.is_dynamic_qr = true;
-  vietQRdata.fields.merchant_category = "9999";
-  vietQRdata.fields.amount = amount;
-  vietQRdata.fields.acq = bankCode;
-  vietQRdata.fields.merchant_id = accountNumber;
-  vietQRdata.fields.service_code = SERVICE_CODE.TO_ACCOUNT;
-  vietQRdata.fields.purpose_txn = description;
-  vietQRdata.fields.currency = CURRENCY.VND;
-  let vietQRData = vietQRdata.builder();
-  let qrcode = new QRCODE(0, "M");
-
-  qrcode.addData(vietQRData, "Byte");
-
-  qrcode.make();
-
-  return {
-    imgTag: qrcode.createImgTag(),
-    qrData: vietQRData,
-  };
-};
-
-export default QRCode;

package/src/components/pos-management/payment-content/qr-payment/vietqr.js

@@ -1,436 +0,0 @@
-const SERVICE_CODE = {
-  PAYMENT: "QRPUSH",
-  TO_CARD: "QRIBFTTC",
-  TO_ACCOUNT: "QRIBFTTA",
-};
-const NAPAS_GUID = "A000000727";
-const CURRENCY = {
-  VND: "704",
-  USD: "840",
-};
-var FIELDS = {
-  is_dynamic_qr: true,
-  merchant_category: "",
-  merchant_name: "",
-  merchant_city: "",
-  postal_code: "",
-  currency: "704",
-  country_code: "VN",
-  amount: "0",
-  acq: "970403",
-  merchant_id: "",
-  service_code: SERVICE_CODE.TO_ACCOUNT,
-  bill_number: "",
-  mobile_number: "",
-  store_label: "",
-  loyalty_number: "",
-  ref_label: "",
-  customer_label: "",
-  terminal_label: "",
-  purpose_txn: "",
-  additional_data: "",
-  lang_ref: "",
-  local_merchant_name: "",
-  local_merchant_city: "",
-  uuid: "",
-  ipn_url: "",
-  app_package_name: "",
-  custom_data: "",
-};
-
-function pad_left(n, width, z) {
-  z = z || "0";
-  n = n + "";
-  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
-}
-
-const CRC = {
-  stringToUtf8ByteArray(str) {
-    var out = [],
-      p = 0;
-    for (var i = 0; i < str.length; i++) {
-      var c = str.charCodeAt(i);
-      if (c < 128) {
-        out[p++] = c;
-      } else if (c < 2048) {
-        out[p++] = (c >> 6) | 192;
-        out[p++] = (c & 63) | 128;
-      } else if (
-        (c & 0xfc00) == 0xd800 &&
-        i + 1 < str.length &&
-        (str.charCodeAt(i + 1) & 0xfc00) == 0xdc00
-      ) {
-        // Surrogate Pair
-        c = 0x10000 + ((c & 0x03ff) << 10) + (str.charCodeAt(++i) & 0x03ff);
-        out[p++] = (c >> 18) | 240;
-        out[p++] = ((c >> 12) & 63) | 128;
-        out[p++] = ((c >> 6) & 63) | 128;
-        out[p++] = (c & 63) | 128;
-      } else {
-        out[p++] = (c >> 12) | 224;
-        out[p++] = ((c >> 6) & 63) | 128;
-        out[p++] = (c & 63) | 128;
-      }
-    }
-    return out;
-  },
-
-  /**
-   * Function này phải dùng stringToUtf8ByteArray để convert về Byte[]
-   * @param {*} str
-   * @param {*} offset
-   * @returns
-   */
-
-  getCrc16(str, offset = 0) {
-    let data = this.stringToUtf8ByteArray(str);
-    if (
-      data == null ||
-      offset < 0 ||
-      offset > data.length - 1 ||
-      offset + length > data.length
-    ) {
-      return 0;
-    }
-
-    let crc = 0xffff;
-    for (let i = 0; i < str.length; ++i) {
-      crc ^= data[offset + i] << 8;
-      for (let j = 0; j < 8; ++j) {
-        crc = (crc & 0x8000) > 0 ? (crc << 1) ^ 0x1021 : crc << 1;
-      }
-    }
-    return (crc & 0xffff).toString(16).toUpperCase();
-  },
-
-  /**
-   * Function này không dùng stringToUtf8ByteArray để convert về Byte[]
-   * @param {Chuỗi cần check CRC} text
-   * @param {true hoặc false, mặc định là true} hex_output
-   * @returns {Chuỗi CRC}
-   */
-
-  getCrc16_array(text, hex_output = true) {
-    if (!Array.isArray(text)) text = [[text]];
-    const polynomial = 0x1021;
-    let result = text.map((row) =>
-      row.map((string) => {
-        if (!string.length) return null;
-        const bytes = Array.from(String(string)).map(
-          (char) => char.charCodeAt(0) & 0xff
-        ); // gives 8 bits; higher bits get discarded
-        let crc = 0xffff;
-        bytes.forEach((byte) => {
-          for (let i = 0; i < 8; i++) {
-            let bit = 1 === ((byte >> (7 - i)) & 1);
-            let c15 = 1 === ((crc >> 15) & 1);
-            crc <<= 1;
-            if (c15 ^ bit) crc ^= polynomial;
-          }
-        });
-        crc &= 0xffff;
-        // Padding handling
-        let crcHexString = crc.toString(16).toUpperCase();
-        crcHexString =
-          crcHexString.length < 4 ? pad_left(crcHexString, 4) : crcHexString;
-        return hex_output ? crcHexString : crc;
-      })
-    );
-    return result.toString();
-  },
-
-  /**
-   * This function is used for replace special character and Vietnamese Utf-8 character to ASCII character
-   * @param {*} str
-   * @returns
-   */
-  nonAccentVietnamese(str) {
-    str = str.toLowerCase();
-    str = str.replace(new RegExp("/", "g"), "-");
-    str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, "a");
-    str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, "e");
-    str = str.replace(/ì|í|ị|ỉ|ĩ/g, "i");
-    str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, "o");
-    str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, "u");
-    str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, "y");
-    str = str.replace(/đ/g, "d");
-    // Some system encode vietnamese combining accent as individual utf-8 characters
-    str = str.replace(/\u0300|\u0301|\u0303|\u0309|\u0323/g, ""); // Huyền sắc hỏi ngã nặng
-    str = str.replace(/\u02C6|\u0306|\u031B/g, ""); // Â, Ê, Ă, Ơ, Ư
-    return str.toUpperCase().trim();
-  },
-};
-
-const TLV = class {
-  constructor(
-    id = 0,
-    name = "",
-    length = 99,
-    is_fixed = true,
-    presense = "O",
-    // eslint-disable-next-line no-constant-binary-expression
-    value = "" || []
-  ) {
-    this.tagId = id;
-    this.tagName = name;
-    if (is_fixed) {
-      this.tagLength = length;
-    } else {
-      this.tagLength = name.length;
-    }
-    this.tagValue = value;
-    this.presense = presense;
-  }
-
-  toString() {
-    let value = "";
-    if (Array.isArray(this.tagValue)) {
-      for (let de = 0; de < this.tagValue.length; de++) {
-        if (this.tagValue[de] instanceof TLV) {
-          if (this.tagValue[de].tagValue !== "") {
-            value += this.tagValue[de].toString();
-          }
-        }
-      }
-    } else {
-      value = this.tagValue;
-    }
-    if (value === "") {
-      return "";
-    } else {
-      this.tagLength = value.length;
-      return `${this.tagId >= 10 ? `${this.tagId}` : `0${this.tagId}`}${
-        this.tagLength >= 10 ? `${this.tagLength}` : `0${this.tagLength}`
-      }${value}`;
-    }
-  }
-};
-
-//Classes
-const VIETQR = class {
-  constructor() {
-    this.data = [];
-    this.fields = FIELDS;
-  }
-
-  toStringNoCrc() {
-    let str = "";
-    for (let de = 0; de < this.data.length; de++) {
-      if (this.data[de] instanceof TLV) {
-        let deString = this.data[de].toString();
-        str += deString;
-      }
-    }
-    return `${str}6304`;
-  }
-
-  getCrc() {
-    return CRC.getCrc16_array(this.toStringNoCrc());
-  }
-
-  toString() {
-    let semi_vietqr = this.toStringNoCrc();
-    let crc_value = this.getCrc();
-    return `${semi_vietqr}${crc_value}`;
-  }
-
-  builder() {
-    this.data[0] = new TLV(0, "Payload Format Indicator", 2, true, "M", "01");
-    this.data[1] = new TLV(
-      1,
-      "QR Type",
-      2,
-      true,
-      "M",
-      this.fields.is_dynamic_qr ? "12" : "11"
-    );
-    this.data[38] = new TLV(
-      38,
-      "QR code service on NAPAS system",
-      99,
-      false,
-      "M",
-      [
-        new TLV(
-          0,
-          "Global Unique Identifier - GUID",
-          10,
-          true,
-          "M",
-          NAPAS_GUID
-        ),
-        new TLV(1, "Payment network specific", 32, false, "M", [
-          new TLV(0, "Acquier ID/BNB ID", 6, true, "M", this.fields.acq),
-          new TLV(
-            1,
-            "Merchant ID/Consumer ID",
-            19,
-            false,
-            "M",
-            this.fields.merchant_id
-          ),
-        ]),
-        new TLV(2, "Service Code", 10, false, "C", this.fields.service_code),
-      ]
-    );
-    this.data[52] = new TLV(
-      52,
-      "Merchant Category Code",
-      4,
-      true,
-      "O",
-      this.fields.merchant_category
-    );
-    this.data[53] = new TLV(
-      53,
-      "Transaction Currency",
-      3,
-      true,
-      "M",
-      this.fields.currency
-    );
-    this.data[54] = new TLV(
-      54,
-      "Transaction Amount",
-      13,
-      false,
-      "C",
-      this.fields.is_dynamic_qr ? this.fields.amount : ""
-    );
-    this.data[55] = new TLV(55, "Tip or Convenience Indicator", 2, true, "O");
-    this.data[56] = new TLV(
-      56,
-      "Value of Convenience Fee Fixed",
-      13,
-      false,
-      "O"
-    );
-    this.data[57] = new TLV(
-      57,
-      "Value of Convenience Fee Percentage",
-      5,
-      false,
-      "O"
-    );
-    this.data[58] = new TLV(
-      58,
-      "Country Code",
-      2,
-      true,
-      "M",
-      this.fields.country_code
-    );
-    this.data[59] = new TLV(
-      59,
-      "Merchant Name",
-      25,
-      false,
-      "O",
-      this.fields.merchant_name
-    );
-    this.data[60] = new TLV(
-      60,
-      "Merchant City",
-      15,
-      false,
-      "O",
-      this.fields.merchant_city
-    );
-    this.data[61] = new TLV(
-      61,
-      "Postal Code",
-      10,
-      false,
-      "O",
-      this.fields.postal_code
-    );
-    this.data[62] = new TLV(
-      62,
-      "Additional Data Field Template",
-      99,
-      true,
-      "O",
-      [
-        null,
-        new TLV(1, "Bill Number", 25, false, "C", this.fields.bill_number),
-        new TLV(2, "Mobile Number", 25, false, "C", this.fields.mobile_number),
-        new TLV(3, "Store Label", 25, false, "O", this.fields.store_label),
-        new TLV(
-          4,
-          "Loyalty Number",
-          25,
-          false,
-          "O",
-          this.fields.loyalty_number
-        ),
-        new TLV(5, "Reference Label", 25, false, "C", this.fields.ref_label),
-        new TLV(
-          6,
-          "Customer Label",
-          25,
-          false,
-          "C",
-          this.fields.customer_label
-        ),
-        new TLV(
-          7,
-          "Terminal Label",
-          25,
-          false,
-          "O",
-          this.fields.terminal_label
-        ),
-        new TLV(
-          8,
-          "Purpose of Transaction",
-          25,
-          false,
-          "C",
-          CRC.nonAccentVietnamese(this.fields.purpose_txn)
-        ),
-        new TLV(
-          9,
-          "Additional Consumer Data Request",
-          3,
-          false,
-          "O",
-          this.fields.additional_data
-        ),
-      ]
-    );
-    this.data[63] = new TLV(63, "CRC (Cyclic Redundancy Check)", 4, true, "M");
-    this.data[64] = new TLV(
-      64,
-      "Merchant Information - Language Template",
-      2,
-      true,
-      "O",
-      [
-        new TLV(0, "Language Preference", 2, true, "M", this.fields.lang_ref),
-        new TLV(
-          1,
-          "Merchant Name - Alternate Language",
-          25,
-          false,
-          "M",
-          this.fields.local_merchant_name
-        ),
-        new TLV(
-          2,
-          "Merchant City - Alternate Language",
-          15,
-          false,
-          "O",
-          this.fields.local_merchant_city
-        ),
-      ]
-    );
-    this.data[80] = new TLV(80, "UniCube data", 99, false, "0", [
-      new TLV(0, "uuid", 16, false, "O", this.fields.uuid),
-      new TLV(1, "custom data", 83, false, "O", this.fields.custom_data),
-    ]);
-    return this.toString();
-  }
-};
-
-export { CURRENCY, SERVICE_CODE, VIETQR };

package/src/components/pos-management/payment-content/session-close-modal.tsx

@@ -1,35 +0,0 @@
-import ModalZoom from "@components/common/modal/modal-zoom"
-import { useNavigate } from "react-router-dom"
-
-type TProps = {
-  isOpen: boolean
-  onClose: () => void
-}
-
-const SessionCloseModal = ({ isOpen, onClose }: TProps) => {
-  const navigate = useNavigate()
-
-  const onBack = () => {
-    navigate(`/console${sessionStorage.getItem("enter_pincode")}`)
-  }
-
-  return (
-    <ModalZoom isOpen={isOpen} onClose={onClose}>
-      <div className="flex flex-col gap-2 items-center justify-center">
-        <p className="text-[32px] font-semibold text-text-primary">
-          Opps! Đóng cửa rồi
-        </p>
-
-        <p className="leading-6 text-text-secondary tracking-[-0.24px]">
-          Cửa hàng chúng tôi đang đóng cửa, bạn hãy quay lại sau nhé
-        </p>
-
-        <button onClick={onBack} className="rounded-lg button-primary mt-4">
-          Trở về
-        </button>
-      </div>
-    </ModalZoom>
-  )
-}
-
-export default SessionCloseModal

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

@@ -1,48 +0,0 @@
-import ButtonAction from "@components/common/button-action";
-import { QUERY_KEYS } from "@constants/query.constant";
-import { useQueryParams } from "@hooks/common/use-query-params";
-import { usePayment } from "@provider/pos-provider/payment-provider";
-import Lottie from "lottie-react";
-import animationData from "../../../../../public/assets/lottie/soft_pos.json";
-import { PaymentInfo } from "../payment-info";
-import { PaymentLayout } from "../payment-layout";
-
-export const SoftPosPayment = ({ total }: { total: number }) => {
-  return (
-    <PaymentLayout
-      leftContent={<LeftContent />}
-      rightContent={<RightContent total={total} />}
-    />
-  );
-};
-
-const LeftContent = () => {
-  return (
-    <div className="flex flex-col gap-3 items-center">
-      <div style={{ width: 280 }}>
-        <Lottie animationData={animationData} />
-      </div>
-    </div>
-  );
-};
-
-const RightContent = ({ total }: { total: number }) => {
-  const { onPaymentSoftPos } = usePayment();
-  const { updateQuery } = useQueryParams();
-  const handlePayment = () => {
-    updateQuery(QUERY_KEYS.SHOW_SCREEN, "true");
-    onPaymentSoftPos(total);
-  };
-  return (
-    <>
-      <div className="flex flex-col gap-3 h-full justify-center ">
-        <PaymentInfo />
-        <ButtonAction
-          onClick={() => handlePayment()}
-          text="Thanh toán SoftPos"
-          className="button-primary h-[56px]"
-        />
-      </div>
-    </>
-  );
-};

package/src/components/pos-management/pos-helpers/back-confirm.tsx

@@ -1,45 +0,0 @@
-import ButtonAction from "@components/common/button-action";
-import ModalZoom from "@components/common/modal/modal-zoom";
-import { t } from "i18next";
-import { useNavigate } from "react-router-dom";
-
-export const BackConfirm = ({
-  isOpen,
-  onClose,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-}) => {
-  const navigate = useNavigate();
-  const onBack = () => {
-    navigate(`/console${sessionStorage.getItem("enter_pincode")}`);
-  };
-  return (
-    <ModalZoom
-      isOpen={isOpen}
-      onClose={onClose}
-      className="p-0 py-4 px-5"
-      modalClassName="w-[40%]"
-      title="Xác nhận thoát điểm bán" //multi language
-      footer={
-        <div className="flex gap-2 justify-end p-4">
-          <ButtonAction
-            onClick={() => onClose()}
-            text={t("cancel_button")}
-            className="button-secondary w-full"
-          />
-          <ButtonAction
-            onClick={() => onBack()}
-            text={t("confirm_button")}
-            className="button-primary w-full"
-          />
-        </div>
-      }
-    >
-      <p>
-        Bạn có đang thoát khỏi điểm bán này. Bạn có muốn thoát điểm bán này
-        không?
-      </p>
-    </ModalZoom>
-  );
-};