@pisell/private-materials 3.2.21 → 3.2.22

package/lib/components/appointmentBooking/locales.js

@@ -98,7 +98,16 @@ var locales_default = {
     "pisell2.appointment.add.guest": "Add guest",
     "pisell2.appointment.edit.service": "Edit services",
     "pisell2.appointment.remove.guest": "Remove guest",
-    "pisell2.appointment.no.available.service": "No available times for this service. Please choose another."
+    "pisell2.appointment.no.available.service": "No available times for this service. Please choose another.",
+    "pisell2.text.apply": "Apply",
+    "pisell2.text.goodpass": "GoodPass",
+    "pisell2.text.goodpass.product-vouchers": "Product Vouchers",
+    "pisell2.text.goodpass.view-more": "View More",
+    "pisell2.text.goodpass.code": "Code",
+    "pisell2.text.goodpass.enter-code": "Enter Code",
+    "pisell2.text.goodpass.code-invalid": "Current code is invalid",
+    "pisell2.text.goodpass.login": "Login",
+    "pisell2.text.goodpass.login-tip": " for member benefit Or use account credit"
   },
   "zh-CN": {
     "pisell2.event.calendar.limit.unavailable": "不可预约",
@@ -175,7 +184,16 @@ var locales_default = {
     "pisell2.appointment.add.guest": "添加预约人",
     "pisell2.appointment.edit.service": "编辑服务",
     "pisell2.appointment.remove.guest": "移除预约人",
-    "pisell2.appointment.no.available.service": "此服务无可用时间，请选择其他服务。"
+    "pisell2.appointment.no.available.service": "此服务无可用时间，请选择其他服务。",
+    "pisell2.text.apply": "应用",
+    "pisell2.text.goodpass": "商品券",
+    "pisell2.text.goodpass.product-vouchers": "商品兑换券",
+    "pisell2.text.goodpass.view-more": "查看更多",
+    "pisell2.text.goodpass.code": "券码",
+    "pisell2.text.goodpass.enter-code": "请输入券码",
+    "pisell2.text.goodpass.code-invalid": "当前券码不可用",
+    "pisell2.text.goodpass.login": "登录",
+    "pisell2.text.goodpass.login-tip": "以获取会员福利或使用账户积分"
   },
   "zh-HK": {
     "pisell2.event.calendar.limit.unavailable": "不可預約",
@@ -252,6 +270,15 @@ var locales_default = {
     "pisell2.appointment.add.guest": "添加預約人",
     "pisell2.appointment.edit.service": "編輯服務",
     "pisell2.appointment.remove.guest": "移除預約人",
-    "pisell2.appointment.no.available.service": "此服务无可用时间，请选择其他服务。"
+    "pisell2.appointment.no.available.service": "此服务无可用时间，请选择其他服务。",
+    "pisell2.text.apply": "應用",
+    "pisell2.text.goodpass": "商品券",
+    "pisell2.text.goodpass.product-vouchers": "商品兌換券",
+    "pisell2.text.goodpass.view-more": "查看更多",
+    "pisell2.text.goodpass.code": "券碼",
+    "pisell2.text.goodpass.enter-code": "請輸入券碼",
+    "pisell2.text.goodpass.code-invalid": "當前券碼不可用",
+    "pisell2.text.goodpass.login": "登錄",
+    "pisell2.text.goodpass.login-tip": "以獲取會員福利或使用賬戶積分"
   }
 };

package/lib/components/appointmentBooking/utils.js

@@ -133,7 +133,9 @@ var formatCarts = (data, resources) => {
       duration_type: d.duration.type,
       locale,
       symbol,
-      resources: currentResources
+      resources: currentResources,
+      is_hide_like: true,
+      holder_title: ""
     };
   });
 };

package/lib/components/booking/addons/index.js

@@ -355,7 +355,7 @@ var Addons = (0, import_model.Provider)((props) => {
     if (!state.bookingId) {
       return null;
     }
-    return /* @__PURE__ */ import_react.default.createElement(import_footer.default, { state, buttons: _footer, source: "addons" });
+    return /* @__PURE__ */ import_react.default.createElement(import_footer.default, { state, dispatch, buttons: _footer, source: "addons" });
   }, [state, _footer]);
   const editProductDetail = (item) => {
     if (state.disabledEdit) {

package/lib/components/booking/components/TabProduct/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./index.less";
 interface TabProductProps {
     list: any[];

package/lib/components/booking/components/TabProduct/productItem/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 declare const ProductItem: ({ item, onClick, amountSymbol, style, className, }: any) => JSX.Element;
 export default ProductItem;

package/lib/components/booking/components/footer/index.js

@@ -49,6 +49,7 @@ var import_amount = require("./amount");
 var import_index = require("./index.less");
 var import_serve2 = require("./serve");
 var import_utils4 = require("./utils");
+var import_voucher = __toESM(require("../voucher"));
 var Footer = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { state, buttons, dispatch, source } = props;
@@ -782,7 +783,7 @@ var Footer = (props) => {
         break;
     }
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton, { title: false, round: true, loading: showFooter, active: true }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-footer-total" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode__booking-footer-left" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode__booking-footer-left-total" }, totalText), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode__booking-footer-left-arrears" }, arrearsText)), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton, { title: false, round: true, loading: showFooter, active: true }, /* @__PURE__ */ import_react.default.createElement(import_voucher.default, { state, dispatch }), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-footer-total" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode__booking-footer-left" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode__booking-footer-left-total" }, totalText), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode__booking-footer-left-arrears" }, arrearsText)), /* @__PURE__ */ import_react.default.createElement(
     "span",
     {
       className: "pisell-lowcode__booking-footer-right",

package/lib/components/booking/components/footer/utils.js

@@ -188,17 +188,32 @@ var formatMetaData = (item) => {
   }
   return metadata;
 };
+var formatDiscountList = (list) => {
+  return list.map((item) => {
+    var _a, _b, _c, _d;
+    return {
+      amount: item.amount,
+      product_id: item.product_id || ((_a = item.discount) == null ? void 0 : _a.product_id),
+      resource_id: item.resource_id || ((_b = item.discount) == null ? void 0 : _b.resource_id),
+      title: item.title || ((_c = item.discount) == null ? void 0 : _c.title),
+      original_amount: item.original_amount || ((_d = item.discount) == null ? void 0 : _d.original_amount),
+      id: item.id,
+      type: item.type
+    };
+  });
+};
 var formatProducts = (item) => {
   var _a, _b, _c, _d, _e, _f;
   const total = Number(item._extend.total);
   const origin_total = Number(item._extend.origin_total);
   const discount_amount = origin_total - total;
+  const discount_list = formatDiscountList((item == null ? void 0 : item.discount_list) || []);
   const discount_type = discount_amount < 0 ? "change_price" : "discount";
   return {
     "num": item._extend.quantity,
     "price": formatProductPrice(item),
     "product_id": (item == null ? void 0 : item.product_id) || item.id,
-    "discount_amount": discount_amount,
+    "discount_amount": discount_list.length > 0 ? 0 : discount_amount,
     "product_discount_reason": item._extend.discount_reason || "",
     "is_charge_tax": item.is_charge_tax,
     "note": (item == null ? void 0 : item.note) || "",
@@ -210,6 +225,7 @@ var formatProducts = (item) => {
     "bundle_edit": item._extend.bundle_edit,
     "product_option_item": formatProductOption((_d = (_c = item._extend) == null ? void 0 : _c.other) == null ? void 0 : _d.option),
     "product_variant_id": ((_f = (_e = item._extend) == null ? void 0 : _e.other) == null ? void 0 : _f.product_variant_id) || 0,
+    "discount_list": discount_list,
     metadata: formatMetaData(item)
   };
 };
@@ -363,6 +379,7 @@ var formatValues = (state) => {
     ...values,
     ...customer
   };
+  debugger;
   values.holder = formatHolder(state, values);
   if (isDay) {
     values.relation_products = formatRelationProducts(state);

package/lib/components/booking/components/voucher/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const VoucherCard: (props: any) => JSX.Element;
+export default VoucherCard;

package/lib/components/booking/components/voucher/index.js

@@ -0,0 +1,211 @@
+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/booking/components/voucher/index.tsx
+var voucher_exports = {};
+__export(voucher_exports, {
+  default: () => voucher_default
+});
+module.exports = __toCommonJS(voucher_exports);
+var import_react = __toESM(require("react"));
+var import_ChevronDown = __toESM(require("@pisell/icon/es/ChevronDown"));
+var import_classnames = __toESM(require("classnames"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var import_materials = require("@pisell/materials");
+var import_icons = require("@ant-design/icons");
+var import_index = require("./index.less");
+var ShopDiscountHooks = {
+  onInited: "shopDiscount:onInited",
+  onDestroy: "shopDiscount:onDestroy",
+  onLoadDiscountList: "shopDiscount:onLoadDiscountList",
+  onCustomerChange: "shopDiscount:onCustomerChange",
+  onDiscountListChange: "shopDiscount:onDiscountListChange",
+  onRulesListChange: "shopDiscount:onRulesListChange",
+  onLoadPrepareCalcResult: "shopDiscount:onLoadPrepareCalcResult"
+};
+var VoucherCard = (props) => {
+  var _a, _b;
+  const context = (0, import_useEngineContext.default)();
+  const [showDetail, setShowDetail] = (0, import_react.useState)(true);
+  const { state, dispatch } = props;
+  const { pisellos } = (_a = context.appHelper) == null ? void 0 : _a.utils;
+  const [code, setCode] = (0, import_react.useState)("");
+  const [discountList, setDisCountList] = (0, import_react.useState)([]);
+  const productRef = (0, import_react.useRef)(state.service.value);
+  const shopDiscount = pisellos.getModule("shopDiscount");
+  const availableData = (0, import_react.useMemo)(() => {
+    const shopDiscount2 = pisellos.getModule("shopDiscount");
+    return discountList.filter((item) => !!item.isAvailable).map((discount) => {
+      return {
+        ...discount,
+        savedAmount: shopDiscount2.calcDiscountApplicableProductTotalPrice(discount)
+      };
+    });
+  }, [discountList]);
+  (0, import_react.useEffect)(() => {
+    shopDiscount.setCustomer(state.client.value);
+  }, [(_b = state.client.value) == null ? void 0 : _b.id]);
+  (0, import_react.useEffect)(() => {
+    shopDiscount.setProductList(state.service.value);
+  }, [state.service.value]);
+  (0, import_react.useEffect)(() => {
+    if (productRef.current === state.service.value) {
+      return;
+    }
+    const val = shopDiscount.calcDiscount(state.service.value);
+    console.log("input: ", state.service.value);
+    console.log("output: ", val);
+    productRef.current = val.productList;
+    dispatch({
+      type: "setService",
+      payload: {
+        value: val.productList
+      }
+    });
+  }, [state.service.value]);
+  (0, import_react.useEffect)(() => {
+    pisellos.effects.on(ShopDiscountHooks.onCustomerChange, (customer) => {
+      console.log(customer, "customerChange");
+      dispatch({
+        type: "setClient",
+        payload: {
+          value: customer
+        }
+      });
+    });
+    pisellos.effects.on(
+      ShopDiscountHooks.onLoadPrepareCalcResult,
+      (result) => {
+        dispatch({
+          type: "setService",
+          payload: {
+            value: result.productList
+          }
+        });
+      }
+    );
+    pisellos.effects.on(
+      ShopDiscountHooks.onDiscountListChange,
+      (discount) => {
+        console.log(discount, "discountChange");
+        setDisCountList(discount);
+      }
+    );
+    return () => {
+      shopDiscount.clear();
+      pisellos.effects.off(ShopDiscountHooks.onCustomerChange);
+      pisellos.effects.off(ShopDiscountHooks.onLoadPrepareCalcResult);
+      pisellos.effects.off(ShopDiscountHooks.onDiscountListChange);
+    };
+  }, [state.bookingId]);
+  const onScanCode = async () => {
+    const val = await shopDiscount.scanCode(code);
+    console.log(val);
+    if (val == null ? void 0 : val.isAvailable) {
+      dispatch({
+        type: "setService",
+        payload: {
+          value: val.productList
+        }
+      });
+    } else {
+      (0, import_materials.PisellToast)({
+        content: import_utils.locales.getText("pisell2.text.goodpass.code-invalid")
+      });
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-footer-voucher-container" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "voucher-title" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "voucher-title-left" }, import_utils.locales.getText("pisell2.text.goodpass")), /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: "voucher-title-right",
+      onClick: () => {
+        console.log("showDetail: ", showDetail);
+        setShowDetail(!showDetail);
+      }
+    },
+    import_utils.locales.getText("pisell2.text.details"),
+    " ",
+    /* @__PURE__ */ import_react.default.createElement(
+      import_ChevronDown.default,
+      {
+        className: (0, import_classnames.default)("voucher-right-icon", {
+          show: showDetail
+        })
+      }
+    )
+  )), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("voucher-detail", {
+        show: showDetail
+      })
+    },
+    (availableData == null ? void 0 : availableData.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellGoodPassCard,
+      {
+        style: { width: "100%" },
+        dataSource: availableData,
+        onChange: (val) => {
+          const shopDiscount2 = pisellos.getModule("shopDiscount");
+          const detail = shopDiscount2.setDiscountSelected({
+            discountId: val.id,
+            isSelected: val.isSelected
+          });
+          console.log("setDiscountSelected:", detail);
+          dispatch({
+            type: "setService",
+            payload: {
+              value: detail.productList
+            }
+          });
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "voucher-code-input-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "voucher-code-input" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { whiteSpace: "nowrap" } }, import_utils.locales.getText("pisell2.text.goodpass.code"), ":"), /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellInput,
+      {
+        value: code,
+        onChange: (e) => {
+          var _a2;
+          setCode((_a2 = e.target) == null ? void 0 : _a2.value);
+        },
+        size: "small",
+        placeholder: import_utils.locales.getText("pisell2.text.goodpass.enter-code"),
+        suffix: /* @__PURE__ */ import_react.default.createElement(import_materials.PisellTooltip, { title: "" }, /* @__PURE__ */ import_react.default.createElement(
+          import_icons.QuestionCircleOutlined,
+          {
+            style: { color: "rgba(0,0,0,.45)" }
+          }
+        ))
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { size: "small", onClick: onScanCode, disabled: !code }, import_utils.locales.getText("pisell2.text.apply")))
+  ));
+};
+var voucher_default = VoucherCard;

package/lib/components/booking/components/voucher/index.less

@@ -0,0 +1,88 @@
+.pisell-lowcode__booking-footer-voucher-container {
+  margin-bottom: 8px;
+  .voucher-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    .voucher-title-left {
+      color: var(--base-black, #000);
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 28px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .voucher-title-right {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      color: #7f56d9;
+      cursor: pointer;
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 500;
+    }
+
+    .voucher-right-icon {
+      font-size: 20px;
+      width: 24px;
+      height: 24px;
+      color: #7f56d9;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &.show {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .voucher-detail {
+    width: 100%;
+    transition: 0.2s;
+    max-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    &.show {
+      max-height: unset;
+    }
+  }
+
+  .voucher-code-input-wrapper {
+    margin-top: 6px;
+    display: flex;
+    width: 100%;
+    height: 42px;
+    padding: 8px;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    border-radius: 8px;
+    border: 1px solid var(--Gray-300, #d0d5dd);
+    background: #fff;
+  }
+
+  .voucher-code-input {
+    display: flex;
+    align-items: center;
+    > div {
+      color: var(--Gray-500, #667085);
+      text-align: center;
+      font-family: Inter;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+      margin-right: 8px;
+    }
+  }
+}

package/lib/components/booking/components/voucher/pisellGoodPassCard/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import './index.less';
+interface ApplicableProductDetails {
+    amount: string;
+    type: string;
+    resource_id: number;
+    title: string;
+    original_amount: string;
+}
+interface Discount {
+    id: number;
+    product_name: string;
+    encoded: string;
+    code: string;
+    tag: string;
+    expire_time?: string;
+    product_id: number;
+    relation_type: string;
+    par_value: string;
+    used_par_value: string;
+    limit_status: string;
+    limited_relation_product_data: any;
+    balance: string;
+    format_title: any;
+    product: any;
+    savedAmount: number;
+    isDisabled: boolean;
+    isSelected?: boolean;
+    isAvailable?: boolean;
+    isUsed?: boolean;
+    applicableProductIds?: number[];
+    applicableProductDetails: ApplicableProductDetails[];
+    appliedProductDetails: any[];
+}
+export interface PisellGoodPassCardProps {
+    /**数据源 */
+    dataSource: Array<Discount>;
+    /**事件 */
+    onChange?: (current: {
+        id: string | number;
+        isSelected: boolean;
+    }) => void;
+    /**样式 */
+    style: React.CSSProperties;
+}
+declare const index: (props: PisellGoodPassCardProps) => JSX.Element;
+export default index;

package/lib/components/booking/components/voucher/pisellGoodPassCard/index.js

@@ -0,0 +1,109 @@
+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/booking/components/voucher/pisellGoodPassCard/index.tsx
+var pisellGoodPassCard_exports = {};
+__export(pisellGoodPassCard_exports, {
+  default: () => pisellGoodPassCard_default
+});
+module.exports = __toCommonJS(pisellGoodPassCard_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_materials = require("@pisell/materials");
+var import_useEngineContext = __toESM(require("../../../../../hooks/useEngineContext"));
+var import_index = require("./index.less");
+var clsPrefix = "pisell-good-pass-card";
+var index = (props) => {
+  var _a;
+  const context = (0, import_useEngineContext.default)();
+  const { translationShop } = (_a = context.appHelper) == null ? void 0 : _a.utils;
+  const { dataSource = [], onChange, style = {} } = props;
+  const [showModal, setShowModal] = (0, import_react.useState)(false);
+  console.log("pisell good card datasource", dataSource);
+  const handleChange = (newValue) => {
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  const handleItemChange = (item, checked) => {
+    handleChange({
+      id: item.id,
+      isSelected: checked
+    });
+  };
+  const renderVoucherContent = (item) => {
+    return /* @__PURE__ */ import_react.default.createElement("span", null, "Save ", /* @__PURE__ */ import_react.default.createElement(import_materials.PisellText.Amount, { value: item.savedAmount }));
+  };
+  const renderActionElement = (item) => {
+    const isChecked = item.isSelected;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Checkbox,
+      {
+        disabled: item.isDisabled,
+        style: { marginLeft: 8 },
+        checked: isChecked,
+        onChange: (e) => handleItemChange(item, e.target.checked)
+      }
+    );
+  };
+  const renderVoucherItem = (item) => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { key: item.id, className: `${clsPrefix}-voucher-item` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "item-title" }, translationShop(item.format_title)), /* @__PURE__ */ import_react.default.createElement("div", { className: "item-content" }, renderVoucherContent(item), renderActionElement(item)));
+  };
+  const renderModal = () => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellModal,
+      {
+        title: "Vouchers",
+        footer: null,
+        open: showModal,
+        onCancel: () => setShowModal(false),
+        className: `${clsPrefix}-all-items-modal`
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "10px 0" } }, dataSource.map(renderVoucherItem))
+    );
+  };
+  const renderMixedMode = () => {
+    const list = dataSource.length > 3 ? dataSource.slice(0, 3) : dataSource;
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: `${clsPrefix}-header` }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.goodpass.product-vouchers")), /* @__PURE__ */ import_react.default.createElement(import_antd.Typography.Text, { underline: true, onClick: () => setShowModal(true) }, import_utils.locales.getText("pisell2.text.goodpass.view-more"))), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: 4 } }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${clsPrefix}-body` }, list.map(renderVoucherItem)));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderModal(), /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellCard,
+    {
+      padding: 8,
+      borderRadius: 8,
+      style: {
+        width: 378,
+        ...style
+      },
+      className: clsPrefix
+    },
+    renderMixedMode()
+  ));
+};
+var pisellGoodPassCard_default = index;

package/lib/components/booking/components/voucher/pisellGoodPassCard/index.less

@@ -0,0 +1,52 @@
+.pisell-good-pass-card-all-items-modal,
+.pisell-good-pass-card {
+  .pisell-good-pass-card-header,
+  .pisell-good-pass-card-group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--Gray-900, #101828);
+    text-align: center;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  .pisell-good-pass-card-voucher-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 22px;
+
+    .item-title {
+      color: var(--Gray-500, #667085);
+      text-align: center;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+    }
+
+    .item-content {
+      color: var(--, #8157d5);
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+
+      .add-btn {
+        color: var(--, #8157d5);
+        text-align: center;
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px; /* 142.857% */
+      }
+    }
+  }
+}

package/lib/components/booking/deposit/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Deposit: (props: any) => JSX.Element;
 export default Deposit;