@pisell/private-materials 6.3.15 → 6.4.2

package/lib/components/checkout/components/WalletPassModule/components/WalletModal/index.less

@@ -0,0 +1,25 @@
+.wallet-modal-title {
+  text-align: center;
+  color: #D92D20;
+}
+
+.wallet-modal-content {
+  padding: 20px 0;
+  .pisell-card-warn-message {
+    z-index: 1;
+    width: calc(100% - 2px);
+    left: 1px;
+    bottom: 1px;
+    border-radius: 0 0 10px 10px;
+  }
+}
+
+.wallet-modal-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  color: #999;
+  font-size: 16px;
+  text-align: center;
+}

package/lib/components/checkout/components/WalletPassModule/components/WalletPassCardDisplay/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { WalletPassCardDisplayProps } from '../../types';
+import './index.less';
+declare const WalletPassCardDisplay: React.FC<WalletPassCardDisplayProps>;
+export default WalletPassCardDisplay;

package/lib/components/checkout/components/WalletPassModule/components/WalletPassCardDisplay/index.js

@@ -0,0 +1,166 @@
+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/checkout/components/WalletPassModule/components/WalletPassCardDisplay/index.tsx
+var WalletPassCardDisplay_exports = {};
+__export(WalletPassCardDisplay_exports, {
+  default: () => WalletPassCardDisplay_default
+});
+module.exports = __toCommonJS(WalletPassCardDisplay_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_WalletPassTextMode = __toESM(require("../WalletPassTextMode"));
+var import_utils2 = require("../../utils");
+var import_index = require("./index.less");
+var Amount = import_materials.PisellText.Amount;
+var WalletPassCardDisplay = ({
+  isCardMode,
+  cardData,
+  selectedWalletIds,
+  onSelectWallet,
+  onDetail,
+  onConfirmEditAmount,
+  onBeforeEditAmount
+}) => {
+  const handleCardListChange = (value) => {
+    onSelectWallet(value);
+  };
+  const formatBalance = (balance, option) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (((_a = option == null ? void 0 : option.data) == null ? void 0 : _a.originData.tag) === "point_card") {
+      const value = (option == null ? void 0 : option.active) ? (balance || 0) - (((_c = (_b = option == null ? void 0 : option.data) == null ? void 0 : _b.originData) == null ? void 0 : _c.recommended_usage_par_value) || 0) : balance;
+      const amount = (0, import_utils2.getPointCardAmount)(
+        value || 0,
+        (_e = (_d = option == null ? void 0 : option.data) == null ? void 0 : _d.originData) == null ? void 0 : _e.wallet_pass_usage_unit
+      );
+      return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+        Amount,
+        {
+          className: "pisell-card-amount-item-value",
+          useThousandsSeparator: true,
+          value,
+          showCurrencySymbol: false
+        }
+      ), "(", /* @__PURE__ */ import_react.default.createElement(
+        Amount,
+        {
+          className: "pisell-card-amount-item-value",
+          useThousandsSeparator: true,
+          value: amount,
+          showCurrencySymbol: false
+        }
+      ), ")");
+    }
+    if (option == null ? void 0 : option.active) {
+      return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+        Amount,
+        {
+          className: "pisell-card-amount-item-value",
+          useThousandsSeparator: true,
+          value: balance ? balance - (((_f = option == null ? void 0 : option.data) == null ? void 0 : _f.redeem) || 0) : 0,
+          showCurrencySymbol: true
+        }
+      ));
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      Amount,
+      {
+        className: "pisell-card-amount-item-value",
+        useThousandsSeparator: true,
+        value: balance,
+        showCurrencySymbol: true
+      }
+    ));
+  };
+  const formatBalanceTitle = (balanceTitle, option) => {
+    if (option == null ? void 0 : option.active) {
+      return /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("wallet-pass-module-balance-after"));
+    }
+    return /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("wallet-pass-module-balance"));
+  };
+  const formatRedeemTitle = (title, option) => {
+    if (option == null ? void 0 : option.active) {
+      return /* @__PURE__ */ import_react.default.createElement("span", null, option.originDom);
+    }
+    return /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("wallet-pass-module-max.use"));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-card-display-container" }, isCardMode ? /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellCardList,
+    {
+      showActiveBackground: true,
+      showName: true,
+      showStoreName: false,
+      showRedeem: true,
+      showBalance: true,
+      showCode: true,
+      showValidDate: true,
+      showDetail: true,
+      showQrCode: true,
+      showCover: true,
+      showActions: false,
+      platform: "pc",
+      mode: "multiple",
+      direction: "horizontal",
+      formatBalance,
+      formatBalanceTitle,
+      formatRedeemTitle,
+      type: "mini",
+      data: cardData,
+      hasMore: false,
+      showEmpty: false,
+      fullWidth: false,
+      value: selectedWalletIds,
+      useExternalDetail: true,
+      onDetail,
+      showStatus: false,
+      onChange: handleCardListChange,
+      actions: {
+        layout: "expanded",
+        detail: {
+          visible: false,
+          iconColor: "#1570EF"
+        },
+        edit: {
+          visible: false,
+          iconColor: "#1570EF"
+        }
+      },
+      enableEditAmount: true,
+      onConfirmEditAmount,
+      onBeforeEditAmount
+    }
+  ) : /* @__PURE__ */ import_react.default.createElement(
+    import_WalletPassTextMode.default,
+    {
+      cardData,
+      selectedWalletIds
+    }
+  ));
+};
+var WalletPassCardDisplay_default = WalletPassCardDisplay;

package/lib/components/checkout/components/WalletPassModule/components/WalletPassCardDisplay/index.less

@@ -0,0 +1,11 @@
+.wallet-pass-card-display-container {
+    .pisell-wallet-pass-card-redeem {
+        visibility: visible !important;
+    }
+    .pisell-card-name-wrap {
+        margin-bottom: 4px;
+    }
+    .pisell-wallet-pass-card-mini {
+        height: 130px;
+    }
+}

package/lib/components/checkout/components/WalletPassModule/components/WalletPassHeader/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { WalletPassHeaderProps } from '../../types';
+import './index.less';
+declare const WalletPassHeader: React.FC<WalletPassHeaderProps>;
+export default WalletPassHeader;

package/lib/components/checkout/components/WalletPassModule/components/WalletPassHeader/index.js

@@ -0,0 +1,100 @@
+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/checkout/components/WalletPassModule/components/WalletPassHeader/index.tsx
+var WalletPassHeader_exports = {};
+__export(WalletPassHeader_exports, {
+  default: () => WalletPassHeader_default
+});
+module.exports = __toCommonJS(WalletPassHeader_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
+var WalletPassHeader = ({
+  customerName,
+  selectedCount,
+  expiredCount,
+  isCardMode,
+  onExpiredClick,
+  onBestSaving,
+  onClearAll,
+  onToggleDisplayMode
+}) => {
+  var _a, _b, _c;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-header-left" }, /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: "wallet-pass-module-customer-container",
+      dangerouslySetInnerHTML: {
+        __html: ((_a = import_utils.locales.getText("wallet-pass-module-cards-vouchers-in-wallet")) == null ? void 0 : _a(`<span class="theme-color wallet-pass-module-customer">${customerName}</span>`)) || ""
+      }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)("theme-color") }, (_b = import_utils.locales.getText("wallet-pass-module-applied")) == null ? void 0 : _b(selectedCount)), /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: (0, import_classnames.default)("error-color", "pointer", "underline"),
+      onClick: onExpiredClick
+    },
+    (_c = import_utils.locales.getText("wallet-pass-module-expired")) == null ? void 0 : _c(expiredCount)
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-header-right" }, /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: (0, import_classnames.default)("theme-color", "pointer", "underline"),
+      onClick: onBestSaving
+    },
+    import_utils.locales.getText("wallet-pass-module-best-saving")
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: (0, import_classnames.default)("error-color", "pointer", "underline"),
+      onClick: onClearAll
+    },
+    import_utils.locales.getText("wallet-pass-module-clear-all")
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      onClick: onToggleDisplayMode,
+      className: "wallet-pass-header-right-icon-container"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Icon,
+      {
+        type: "pisell2-chevron-up",
+        className: (0, import_classnames.default)(
+          "wallet-pass-header-right-icon",
+          "theme-color",
+          "pointer",
+          { rotated: !isCardMode }
+        )
+      }
+    )
+  )));
+};
+var WalletPassHeader_default = WalletPassHeader;

package/lib/components/checkout/components/WalletPassModule/components/WalletPassHeader/index.less

@@ -0,0 +1,64 @@
+.wallet-pass-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.wallet-pass-header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  .wallet-pass-module-customer-container {
+    max-width: 340px;
+    display: flex;
+    gap: 6px;
+  }
+  .wallet-pass-module-customer {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.wallet-pass-header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.theme-color {
+  color: var(--theme-color, #7f56da);
+}
+
+.error-color {
+  color: var(--Error-500, #f04438);
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.wallet-pass-header-right-icon-container {
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wallet-pass-header-right-icon {
+  color: var(--theme-color, #7f56da);
+  font-size: 24px;
+  transition: transform 0.3s ease;
+}
+
+.wallet-pass-header-right-icon.rotated {
+  transform: rotate(180deg);
+}

package/lib/components/checkout/components/WalletPassModule/components/WalletPassTextMode/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { WalletPassTextModeProps } from '../../types';
+import './index.less';
+declare const WalletPassTextMode: React.FC<WalletPassTextModeProps>;
+export default WalletPassTextMode;

package/lib/components/checkout/components/WalletPassModule/components/WalletPassTextMode/index.js

@@ -0,0 +1,51 @@
+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/checkout/components/WalletPassModule/components/WalletPassTextMode/index.tsx
+var WalletPassTextMode_exports = {};
+__export(WalletPassTextMode_exports, {
+  default: () => WalletPassTextMode_default
+});
+module.exports = __toCommonJS(WalletPassTextMode_exports);
+var import_react = __toESM(require("react"));
+var import_index = require("./index.less");
+var WalletPassTextMode = ({
+  cardData,
+  selectedWalletIds
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-text-mode" }, cardData && cardData.length > 0 ? cardData.filter((card) => selectedWalletIds.includes(card.id)).map((card) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: card.id,
+      className: "wallet-pass-text-item selected"
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "wallet-pass-text-name" }, card.name),
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "wallet-pass-text-amount" }, "-", card.redeem ? `${card.redeem}` : "$0")
+  )) : /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-text-empty" }));
+};
+var WalletPassTextMode_default = WalletPassTextMode;

package/lib/components/checkout/components/WalletPassModule/components/WalletPassTextMode/index.less

@@ -0,0 +1,31 @@
+/* 文字模式样式 */
+.wallet-pass-text-mode {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.wallet-pass-text-item {
+  color: #7f56da;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  display: inline-block;
+}
+
+.wallet-pass-text-name {
+  margin-right: 6px;
+}
+
+.wallet-pass-text-amount {
+}
+
+.wallet-pass-text-empty {
+  //display: flex;
+  //align-items: center;
+  //justify-content: center;
+  //padding: 40px 20px;
+  //color: #9ca3af;
+  //font-size: 14px;
+  //text-align: center;
+}

package/lib/components/checkout/components/WalletPassModule/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { WalletPassModuleProps, WalletPassModuleRef } from './types';
+import './index.less';
+declare const WalletPassModule: React.ForwardRefExoticComponent<WalletPassModuleProps & React.RefAttributes<WalletPassModuleRef>>;
+export default WalletPassModule;

package/lib/components/checkout/components/WalletPassModule/index.js

@@ -0,0 +1,198 @@
+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/checkout/components/WalletPassModule/index.tsx
+var WalletPassModule_exports = {};
+__export(WalletPassModule_exports, {
+  default: () => WalletPassModule_default
+});
+module.exports = __toCommonJS(WalletPassModule_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_useWalletPass = require("../../hooks/useWalletPass");
+var import_WalletPassHeader = __toESM(require("./components/WalletPassHeader"));
+var import_WalletPassCardDisplay = __toESM(require("./components/WalletPassCardDisplay"));
+var import_WalletModal = __toESM(require("./components/WalletModal"));
+var import_DiscountWallet = __toESM(require("./components/DiscountWallet"));
+var import_utils2 = require("./utils");
+var import_constants = require("../../constants");
+var import_index = require("./index.less");
+var WalletPassModule = (0, import_react.forwardRef)(
+  (props, ref) => {
+    var _a;
+    const { orderInfo, onSelectChange, customAmount, paymentItems } = props;
+    const {
+      handleSelectWallet,
+      cardData,
+      selectedWalletIds,
+      expiredWalletIds,
+      expiredWalletData,
+      disabledWalletData,
+      clearAllSelectedWallet,
+      clearDisabledWalletData,
+      handleBestSaving,
+      loading,
+      handleSearchIdentificationCode,
+      availableDiscountList,
+      selectedDiscountList,
+      handleSelectDiscount,
+      customerName,
+      handleConfirmEditAmount,
+      handleBeforeEditAmount
+    } = (0, import_useWalletPass.useWalletPass)({
+      onSelectChange,
+      customAmount
+    });
+    const [expiredModalVisible, setExpiredModalVisible] = (0, import_react.useState)(false);
+    const [disabledModalVisible, setDisabledModalVisible] = (0, import_react.useState)(false);
+    const [isCardMode, setIsCardMode] = (0, import_react.useState)(true);
+    const handleExpiredClick = () => {
+      setExpiredModalVisible(true);
+    };
+    const handleExpiredModalClose = () => {
+      setExpiredModalVisible(false);
+    };
+    const handleDisabledModalClose = () => {
+      setDisabledModalVisible(false);
+      clearDisabledWalletData();
+    };
+    const toggleDisplayMode = () => {
+      setIsCardMode(!isCardMode);
+    };
+    const handleDetail = (record, index) => {
+    };
+    const formattedDisabledWalletData = import_react.default.useMemo(() => {
+      return (0, import_utils2.formatMachineCodeServer2CardList)(disabledWalletData || [], [], {
+        error: true,
+        showStatus: false
+      });
+    }, [disabledWalletData]);
+    (0, import_react.useEffect)(() => {
+      if (disabledWalletData && disabledWalletData.length > 0) {
+        if (!disabledModalVisible) {
+          setDisabledModalVisible(true);
+        }
+      }
+    }, [disabledWalletData, disabledModalVisible]);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      handleSearchIdentificationCode,
+      getWalletPassData: (select) => ({
+        selectedWallet: select.length ? cardData.filter(
+          (card) => selectedWalletIds.includes(card.id)
+        ) : [],
+        availableDiscountList,
+        selectedDiscountList
+      })
+    }));
+    const disabledTitle = (0, import_react.useMemo)(() => {
+      var _a2, _b;
+      if (disabledWalletData && disabledWalletData.length === 1) {
+        return ((_b = (_a2 = disabledWalletData[0]) == null ? void 0 : _a2.unified_messages) == null ? void 0 : _b.title) || "";
+      }
+      return import_utils.locales.getText("wallet-pass-module-disabled-modal-title");
+    }, [disabledWalletData]);
+    const selectedCount = (0, import_react.useMemo)(() => {
+      return selectedWalletIds.length + selectedDiscountList.length;
+    }, [selectedWalletIds.length, selectedDiscountList.length]);
+    const discountDisabled = (0, import_react.useMemo)(() => {
+      return !!(paymentItems == null ? void 0 : paymentItems.some((item) => {
+        return !import_constants.WALLET_PASS_CODE_ARRAY.includes(item.code);
+      }));
+    }, [paymentItems]);
+    if (cardData.length === 0 && availableDiscountList.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-module-container" }, /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellLoading,
+      {
+        delay: 300,
+        loading,
+        fullscreen: false,
+        mask: {
+          backgroundColor: "rgba(255, 255, 255, 0.5)",
+          width: "100%",
+          height: "100%"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-module" }, /* @__PURE__ */ import_react.default.createElement(
+        import_WalletPassHeader.default,
+        {
+          customerName,
+          selectedCount,
+          expiredCount: expiredWalletIds.length,
+          isCardMode,
+          onExpiredClick: handleExpiredClick,
+          onBestSaving: handleBestSaving,
+          onClearAll: clearAllSelectedWallet,
+          onToggleDisplayMode: toggleDisplayMode
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_WalletPassCardDisplay.default,
+        {
+          isCardMode,
+          cardData,
+          selectedWalletIds,
+          onSelectWallet: handleSelectWallet,
+          onDetail: handleDetail,
+          onConfirmEditAmount: handleConfirmEditAmount,
+          onBeforeEditAmount: handleBeforeEditAmount
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_DiscountWallet.default,
+        {
+          isCardMode,
+          cardData: availableDiscountList,
+          selectedWalletIds: selectedDiscountList,
+          onSelectWallet: handleSelectDiscount,
+          onDetail: handleDetail,
+          discountDisabled
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_WalletModal.default,
+        {
+          visible: expiredModalVisible,
+          walletData: expiredWalletData,
+          onClose: handleExpiredModalClose,
+          title: (_a = import_utils.locales.getText("wallet-pass-module-expired-modal-title")) == null ? void 0 : _a(
+            (expiredWalletData == null ? void 0 : expiredWalletData.length) || 0
+          )
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_WalletModal.default,
+        {
+          visible: disabledModalVisible,
+          walletData: formattedDisabledWalletData,
+          onClose: handleDisabledModalClose,
+          title: disabledTitle
+        }
+      ))
+    ));
+  }
+);
+var WalletPassModule_default = WalletPassModule;