@pisell/private-materials 6.2.49 → 6.2.50

package/lib/components/index.d.ts

@@ -17,4 +17,6 @@ import PisellSelectCustomerModal from './pisellSelectCustomerModal';
 import SubTotal from './subTotal';
 import EditBookingModal from './booking/editBookingModal';
 import StepController from './stepController';
-export { Login, BookingInfo, Booking, BookingNotes, BookingAddons, BookingForms, Schedules, ProductExtension, RuleSetting, TaxSelect, ToCPay, PisellSelectCustomerModal, Wallet, WalletList, WorkspaceList, WorkspaceListDetail, SubTotal, EditBookingModal, StepController };
+import PinModal from './pinModal';
+import PinVerifyModal from './pinVerifyModal';
+export { Login, BookingInfo, Booking, BookingNotes, BookingAddons, BookingForms, Schedules, ProductExtension, RuleSetting, TaxSelect, ToCPay, PisellSelectCustomerModal, Wallet, WalletList, WorkspaceList, WorkspaceListDetail, SubTotal, EditBookingModal, StepController, PinModal, PinVerifyModal, };

package/lib/components/index.js

@@ -36,6 +36,8 @@ __export(components_exports, {
   BookingNotes: () => import_notes.default,
   EditBookingModal: () => import_editBookingModal.default,
   Login: () => import_login.default,
+  PinModal: () => import_pinModal.default,
+  PinVerifyModal: () => import_pinVerifyModal.default,
   PisellSelectCustomerModal: () => import_pisellSelectCustomerModal.default,
   ProductExtension: () => import_productExtension.default,
   RuleSetting: () => import_ruleSetting.default,
@@ -69,6 +71,8 @@ var import_pisellSelectCustomerModal = __toESM(require("./pisellSelectCustomerMo
 var import_subTotal = __toESM(require("./subTotal"));
 var import_editBookingModal = __toESM(require("./booking/editBookingModal"));
 var import_stepController = __toESM(require("./stepController"));
+var import_pinModal = __toESM(require("./pinModal"));
+var import_pinVerifyModal = __toESM(require("./pinVerifyModal"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Booking,
@@ -78,6 +82,8 @@ var import_stepController = __toESM(require("./stepController"));
   BookingNotes,
   EditBookingModal,
   Login,
+  PinModal,
+  PinVerifyModal,
   PisellSelectCustomerModal,
   ProductExtension,
   RuleSetting,

package/lib/components/pay/toC/PaymentMethods/MWCreditCard/tds2.js

@@ -171,6 +171,7 @@ var createThreeDSMethodIframe = async (threeDSMethodData, callback) => {
     return defaultReturnParams;
   }
   const displayBox = document.getElementById("threeds-container");
+  displayBox.innerHTML = "";
   let iframe = document.createElement("iframe");
   iframe.classList.add("hidden_TDS_From");
   iframe.name = "threeDSMethodIframe";
@@ -286,6 +287,7 @@ var checkTDSAuth = async (step2, step3, callback) => {
 };
 var createChallengeIframe = (challengeData, callback) => {
   const displayBox = document.getElementById("threeds-container");
+  displayBox.innerHTML = "";
   let iframe = document.createElement("iframe");
   iframe.classList.add("tdsv2challengeIframe");
   iframe.name = "challengeIframe";

package/lib/components/pay/toC/PaymentMethods/WalletPass/List/index.d.ts

@@ -11,6 +11,8 @@ export interface WalletPassListProps {
         name: string;
     };
     onChangeDebounce?: boolean;
+    loading?: boolean;
+    onLoadingChange?: (loading: boolean) => void;
 }
 export declare type WalletPassListRef = {
     init: (params: MachineCodeListParams, formatList?: (val: WalletPassDataType[]) => WalletPassDataType[]) => void;

package/lib/components/pay/toC/PaymentMethods/WalletPass/index.js

@@ -37,16 +37,20 @@ var import_materials = require("@pisell/materials");
 var import_utils = require("@pisell/utils");
 var import_ahooks = require("ahooks");
 var import_icons = require("@ant-design/icons");
+var import_pinVerifyModal = __toESM(require("../../../../pinVerifyModal"));
 var import_MultiModeSearch = __toESM(require("./MultiModeSearch"));
 var import_List = __toESM(require("./List"));
 var import_serve = require("./serve");
 var import_utils2 = require("./utils");
 var import_utils3 = require("../../utils");
 var import_index = require("./index.less");
+var import_useEngineContext = __toESM(require("../../../../../hooks/useEngineContext"));
 var { Amount } = import_materials.PisellText;
 var WalletPass = (0, import_react.forwardRef)((props, ref) => {
-  var _a;
+  var _a, _b, _c, _d, _e;
   const { onWalletPassChange, walletPass, walletSetting } = props;
+  const context = (0, import_useEngineContext.default)();
+  const isWalletCode = (_d = (_c = (_b = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.businessUtils) == null ? void 0 : _c.getAppByModal) == null ? void 0 : _d.call(_c, "wallet");
   const [currentWalletPass, setCurrentWalletPass] = (0, import_react.useState)(walletPass);
   const [loading, setLoading] = (0, import_react.useState)(false);
   const [open, setOpen] = (0, import_react.useState)(false);
@@ -60,7 +64,8 @@ var WalletPass = (0, import_react.forwardRef)((props, ref) => {
   });
   const isAutoSelect = (0, import_react.useRef)(false);
   const listRef = (0, import_react.useRef)(null);
-  const searchValRef = (0, import_react.useRef)("");
+  const searchValRef = (0, import_react.useRef)(null);
+  const pinVerifyModalRef = (0, import_react.useRef)(null);
   const { cards: walletPassSelectCards, amount } = currentWalletPass || {};
   const [currentCustomerWalletPass, otherCustomerWalletPass] = (0, import_react.useMemo)(() => {
     const current = [];
@@ -98,9 +103,9 @@ var WalletPass = (0, import_react.forwardRef)((props, ref) => {
     return codes;
   }, [addList, selectValue]);
   const refreshList = (0, import_ahooks.useMemoizedFn)(() => {
-    var _a2, _b;
+    var _a2, _b2;
     if ((order == null ? void 0 : order.order_id) && (order == null ? void 0 : order.customer_id)) {
-      (_b = listRef.current) == null ? void 0 : _b.init(
+      (_b2 = listRef.current) == null ? void 0 : _b2.init(
         {
           order_id: order.order_id,
           available: 2,
@@ -146,52 +151,86 @@ var WalletPass = (0, import_react.forwardRef)((props, ref) => {
       refreshList();
     });
   };
-  const searchList = async (val, isSelectChange) => {
+  const searchList = async ({ code, customer_pin_key }, isSelectChange) => {
     var _a2;
     if (!(order == null ? void 0 : order.order_id)) return;
-    const result = await (0, import_serve.searchMachineCodeList)({
-      order_id: order.order_id,
-      code: val,
-      prepare_payments,
-      filter_prepare_wallet_pass: 1,
-      sale_channel: ((_a2 = order._order) == null ? void 0 : _a2.sale_channel) || "online-store"
-    });
-    if (!result) {
-      if (!isSelectChange) {
-        (0, import_materials.PisellToast)({
-          content: import_utils.locales.getText("tocPay.text.walletSearchEmpty")
-        });
+    setLoading(true);
+    try {
+      const result = await (0, import_serve.searchMachineCodeList)({
+        order_id: order.order_id,
+        code,
+        prepare_payments,
+        // filter_prepare_wallet_pass: 1,
+        sale_channel: ((_a2 = order._order) == null ? void 0 : _a2.sale_channel) || "online-store",
+        customer_pin_key
+      });
+      if (!result) {
+        if (!isSelectChange) {
+          (0, import_materials.PisellToast)({
+            content: import_utils.locales.getText("tocPay.text.walletSearchEmpty")
+          });
+        }
+        return;
+      }
+      if (isSelectChange && !searchValRef.current) {
+        return;
       }
-      return;
+      setSearchData(
+        (0, import_utils2.formatMachineCodeServer2CardList)(
+          [...searchSelectData.details, ...result],
+          searchSelectData.ids
+        )
+      );
+      if (result.length) {
+        if (result.length === 1 && result[0].unified_available_status && isAutoSelect.current) {
+          setSearchSelectData({
+            ids: [result[0].id],
+            details: result
+          });
+        }
+        setSearchOpen(true);
+        searchValRef.current = { code, customer_pin_key };
+      }
+    } finally {
+      setLoading(false);
     }
-    setSearchData(
-      (0, import_utils2.formatMachineCodeServer2CardList)(
-        [...searchSelectData.details, ...result],
-        searchSelectData.ids
-      )
-    );
-    if (result.length) {
-      if (result.length === 1 && result[0].unified_available_status && isAutoSelect.current) {
-        setSearchSelectData({
-          ids: [result[0].id],
-          details: result
-        });
+  };
+  const searchWalletCodeFn = async (val) => {
+    var _a2;
+    setLoading(true);
+    try {
+      const result = await (0, import_serve.searchWalletCode)({ code: val, with_customer: 1 });
+      console.log(result, "result");
+      if (!result) {
+        searchList({ code: val });
+        return;
       }
-      setSearchOpen(true);
-      searchValRef.current = val;
+      (_a2 = pinVerifyModalRef.current) == null ? void 0 : _a2.open({
+        wallet_code: result.code,
+        wallet_detail_id: result.id,
+        failed_count: result.failed_count,
+        check_max_count: result.check_max_count,
+        customer: result.customer
+      });
+    } finally {
+      setLoading(false);
     }
   };
   const handleSearch = (0, import_ahooks.useMemoizedFn)((val) => {
     if (!val || searchOpen) return;
     isAutoSelect.current = true;
-    searchList(val);
+    if ((0, import_utils2.getIsWalletCode)(val) && isWalletCode) {
+      searchWalletCodeFn(val);
+    } else {
+      searchList({ code: val });
+    }
   });
   (0, import_react.useImperativeHandle)(ref, () => ({
     init
   }));
   const handleSearchModalClose = () => {
     setSearchOpen(false);
-    searchValRef.current = "";
+    searchValRef.current = null;
     setSearchSelectData({
       ids: [],
       details: []
@@ -309,7 +348,7 @@ var WalletPass = (0, import_react.forwardRef)((props, ref) => {
       okText: import_utils.locales.getText("tocPay.text.select"),
       onOk: handleSelectOk,
       okButtonProps: {
-        disabled: ((_a = searchSelectData.ids) == null ? void 0 : _a.length) === 0
+        disabled: ((_e = searchSelectData.ids) == null ? void 0 : _e.length) === 0
       }
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: "", style: { marginTop: 24 } }, /* @__PURE__ */ import_react.default.createElement(
@@ -318,9 +357,18 @@ var WalletPass = (0, import_react.forwardRef)((props, ref) => {
         walletSetting,
         data: searchData,
         value: searchSelectData.ids,
-        onChange: handleAddChange
+        onChange: handleAddChange,
+        loading
       }
     ))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_pinVerifyModal.default,
+    {
+      ref: pinVerifyModalRef,
+      onSuccess: (params) => {
+        searchList({ customer_pin_key: params == null ? void 0 : params.customer_pin_key });
+      }
+    }
   ));
 });
 var WalletPass_default = (0, import_react.memo)(WalletPass);

package/lib/components/pay/toC/PaymentMethods/WalletPass/serve.d.ts

@@ -84,14 +84,15 @@ export declare const getRecommendMachineCodeList: (order_id: number) => Promise<
  */
 export declare const searchMachineCodeList: (params: {
     order_id: number | string;
-    code: string;
+    code?: string;
     sale_channel: string;
     prepare_payments: {
         voucher_id: number;
         amount: number;
         tag: string;
     }[];
-    filter_prepare_wallet_pass: 1 | 0;
+    filter_prepare_wallet_pass?: 1 | 0;
+    customer_pin_key?: string;
 }) => Promise<WalletPassDataType[]>;
 /**
  * walletpass支付
@@ -110,4 +111,39 @@ export declare const walletPassPay: (params: {
         };
     }[];
 }) => Promise<WalletPassDataType[]>;
+/**
+ * 搜索wallet code
+ */
+export declare const searchWalletCode: (params: {
+    code: string;
+    with_customer: 1 | 0;
+}) => Promise<{
+    code: string;
+    id: number;
+    status: 'enable' | 'disable' | 'expired';
+    expired_at: string;
+    customer: Record<string, any>;
+    check_max_count: number;
+    failed_count: number;
+}>;
+/**
+ * 验证pin码
+ */
+export declare const verifyPinCode: (params: {
+    wallet_detail_id: number;
+    pin: string;
+}) => Promise<{
+    status: number;
+    customer_id: number;
+    msg: string;
+    customer_pin_key: string;
+}>;
+/**
+ * 获取pin码
+ */
+export declare const getPin: (params: {
+    wallet_detail_id: number;
+}) => Promise<{
+    pin: string;
+}>;
 export {};

package/lib/components/pay/toC/PaymentMethods/WalletPass/serve.js

@@ -20,8 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var serve_exports = {};
 __export(serve_exports, {
   getMachineCodeList: () => getMachineCodeList,
+  getPin: () => getPin,
   getRecommendMachineCodeList: () => getRecommendMachineCodeList,
   searchMachineCodeList: () => searchMachineCodeList,
+  searchWalletCode: () => searchWalletCode,
+  verifyPinCode: () => verifyPinCode,
   walletPassPay: () => walletPassPay
 });
 module.exports = __toCommonJS(serve_exports);
@@ -45,10 +48,25 @@ var walletPassPay = async (params) => {
   const { data } = await import_utils.request.getRequest().post(`/h5/pay/order/wallet-pass-pay/${order_id}`, others);
   return data;
 };
+var searchWalletCode = async (params) => {
+  const { data } = await import_utils.request.getRequest().post(`/h5/wallet/detail/search`, params);
+  return data;
+};
+var verifyPinCode = async (params) => {
+  const { data } = await import_utils.request.getRequest().post(`/h5/wallet/detail/pin/validate`, params);
+  return data;
+};
+var getPin = async (params) => {
+  const { data } = await import_utils.request.getRequest().get(`/h5/wallet/detail/pin`, params);
+  return data;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getMachineCodeList,
+  getPin,
   getRecommendMachineCodeList,
   searchMachineCodeList,
+  searchWalletCode,
+  verifyPinCode,
   walletPassPay
 });

package/lib/components/pay/toC/PaymentMethods/WalletPass/utils.d.ts

@@ -1,3 +1,9 @@
 import { WalletPassDataType } from './serve';
 export declare const formatMachineCodeServer2CardList: (data: WalletPassDataType[], selectId?: number[]) => any;
 export declare const getDataByIds: (arr: any[], ids: number[]) => any[];
+/**
+ * 判断是否是wallet code
+ * @param val
+ * @returns
+ */
+export declare const getIsWalletCode: (val: string) => boolean;

package/lib/components/pay/toC/PaymentMethods/WalletPass/utils.js

@@ -20,7 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utils_exports = {};
 __export(utils_exports, {
   formatMachineCodeServer2CardList: () => formatMachineCodeServer2CardList,
-  getDataByIds: () => getDataByIds
+  getDataByIds: () => getDataByIds,
+  getIsWalletCode: () => getIsWalletCode
 });
 module.exports = __toCommonJS(utils_exports);
 var import_utils = require("@pisell/utils");
@@ -64,8 +65,12 @@ var formatMachineCodeServer2CardList = (data, selectId = []) => {
 var getDataByIds = (arr, ids) => {
   return arr.filter((item) => ids.includes(item.id));
 };
+var getIsWalletCode = (val) => {
+  return val.startsWith("WL");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   formatMachineCodeServer2CardList,
-  getDataByIds
+  getDataByIds,
+  getIsWalletCode
 });

package/lib/components/pay/toC/model.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface FormState {
     platform: 'pc' | 'h5' | '' | undefined;
     order: any;
@@ -29,11 +28,4 @@ export interface PayGroup {
     pay_number?: string;
     _order: any;
 }
-export declare const Provider: (ComponentUi: any) => any, Context: import("react").Context<{
-    state: FormState;
-} & {
-    dispatch: (params: {
-        type: string;
-        payload: any;
-    }) => void;
-}>;
+export declare const Provider: any, Context: any;

package/lib/components/pay/toC/utils.js

@@ -49,7 +49,7 @@ var formatWalletPassParams = (payGroup) => {
   const payments = (walletPass == null ? void 0 : walletPass.cards.map((item) => {
     return {
       amount: getAvailableMaxAmount(item),
-      wallet_pass_use_value: item.available_max_par_value,
+      wallet_pass_use_value: item.recommended_usage_par_value,
       voucher_id: item.id,
       tag: item.tag,
       wallet_pass_usage_unit: item.wallet_pass_usage_unit

package/lib/components/pinModal/hooks.d.ts

@@ -0,0 +1,7 @@
+export declare const usePin: () => {
+    pin: string;
+    lastUpdateTime: string;
+    getPin: (id: string | number) => void;
+    resetPin: (id: string | number) => void;
+    resetPinLoading: boolean;
+};

package/lib/components/pinModal/hooks.js

@@ -0,0 +1,85 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pinModal/hooks.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  usePin: () => usePin
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_react = require("react");
+var import_ahooks = require("ahooks");
+var import_dayjs = __toESM(require("dayjs"));
+var import_serve = require("./serve");
+var usePin = () => {
+  const [pin, setPin] = (0, import_react.useState)("");
+  const [lastUpdateTime, setLastUpdateTime] = (0, import_react.useState)("");
+  const _getPinRequest = (0, import_ahooks.useRequest)(import_serve.getPinApi, {
+    manual: true,
+    loadingDelay: 100,
+    onSuccess: (res) => {
+      const { code, data } = res;
+      if (code === 200 && (data == null ? void 0 : data.pin)) {
+        setPin(data.pin);
+        setLastUpdateTime(getTime((data == null ? void 0 : data.generated_at) || ""));
+      }
+    }
+  });
+  const getTime = (time) => {
+    if (!time) return "";
+    return (0, import_dayjs.default)(time).format("YYYY-MM-DD HH:mm");
+  };
+  const _resetPinRequest = (0, import_ahooks.useRequest)(import_serve.resetPinApi, {
+    manual: true,
+    loadingDelay: 100,
+    onSuccess: (res) => {
+      const { code, data } = res;
+      if (code === 200 && (data == null ? void 0 : data.pin)) {
+        setPin(data.pin);
+        setLastUpdateTime(getTime((data == null ? void 0 : data.generated_at) || ""));
+      }
+    }
+  });
+  const getPin = (id) => {
+    _getPinRequest.run({ wallet_detail_id: id });
+  };
+  const resetPin = (id) => {
+    _resetPinRequest.run({ wallet_detail_id: id });
+  };
+  return {
+    pin,
+    lastUpdateTime,
+    getPin,
+    resetPin,
+    resetPinLoading: _resetPinRequest.loading
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePin
+});

package/lib/components/pinModal/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

package/lib/components/pinModal/index.js

@@ -0,0 +1,88 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pinModal/index.tsx
+var pinModal_exports = {};
+__export(pinModal_exports, {
+  default: () => pinModal_default
+});
+module.exports = __toCommonJS(pinModal_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_locales = __toESM(require("./locales"));
+var import_hooks = require("./hooks");
+var import_utils2 = require("../../utils");
+var import_index = require("./index.less");
+var PinModal = (props, ref) => {
+  var _a, _b, _c, _d;
+  const context = (0, import_useEngineContext.default)();
+  import_utils.locales.init(import_locales.default, ((_b = (_a = context == null ? void 0 : context.engine) == null ? void 0 : _a.props) == null ? void 0 : _b.locale) || "en");
+  import_utils2.request.setRequest((_d = (_c = context == null ? void 0 : context.appHelper) == null ? void 0 : _c.utils) == null ? void 0 : _d.request);
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const { pin, lastUpdateTime, getPin, resetPin, resetPinLoading } = (0, import_hooks.usePin)();
+  const walletDetailIdRef = (0, import_react.useRef)();
+  const onOpen = (wallet_detail_id) => {
+    walletDetailIdRef.current = wallet_detail_id;
+    getPin(wallet_detail_id);
+    setVisible(true);
+  };
+  const onHide = () => {
+    walletDetailIdRef.current = void 0;
+    setVisible(false);
+  };
+  const onResetPin = async () => {
+    if (!walletDetailIdRef.current || resetPinLoading) {
+      return;
+    }
+    resetPin(walletDetailIdRef.current);
+  };
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    open: onOpen,
+    hide: onHide
+  }));
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      title: import_utils.locales.getText("pisell2.pin.modal.title"),
+      open: visible,
+      okText: import_utils.locales.getText("pisell2.pin.modal.reset.pin"),
+      onOk: onResetPin,
+      cancelText: import_utils.locales.getText("pisell2.pin.modal.cancel"),
+      onCancel: onHide,
+      okButtonProps: {
+        loading: resetPinLoading
+      },
+      destroyOnClose: true,
+      mobileModalHeight: "auto"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pin-modal" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pin-modal-content" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pin-modal-content-label" }, import_utils.locales.getText("pisell2.pin.modal.label")), /* @__PURE__ */ import_react.default.createElement("span", { className: "pin-modal-content-code" }, pin)), /* @__PURE__ */ import_react.default.createElement("span", { className: "pin-modal-content-desc" }, import_utils.locales.getText("pisell2.pin.modal.desc")), /* @__PURE__ */ import_react.default.createElement("span", { className: "pin-modal-content-time" }, import_utils.locales.getText("pisell2.pin.modal.time"), lastUpdateTime))
+  );
+};
+var pinModal_default = (0, import_react.forwardRef)(PinModal);

package/lib/components/pinModal/index.less

@@ -0,0 +1,44 @@
+.pin-modal {
+  width: 100%;
+  height: 100%;
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+
+    &-label {
+      color: #101828;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 400;
+    }
+
+    &-code {
+      color: #101828;
+      text-align: center;
+      font-size: 24px;
+      font-weight: 600;
+    }
+
+    &-desc {
+      color: #101828;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    &-time {
+      color: #667085;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 400;
+    }
+  }
+}