@pisell/private-materials 6.0.25 → 6.2.1

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

@@ -1,4 +1,5 @@
 import { PayGroup } from "./model";
+import { WalletPassDataType } from "./PaymentMethods/WalletPass/serve";
 /**
  * 计算walletPass列表数据的总金额
  * @param list
@@ -21,7 +22,7 @@ export declare const formatWalletPassParams: (payGroup: PayGroup) => {
     order_id: string;
     payment_group_id: number;
     payments: {
-        amount: any;
+        amount: string;
         wallet_pass_use_value: any;
         voucher_id: any;
         tag: any;
@@ -47,3 +48,10 @@ export declare const isFranchiseeShop: (path?: any, history?: any) => any;
  */
 export declare const getFranchiseeShopId: (path?: any, history?: any) => number;
 export declare const formatFranchiseeRoute: (url: string, history?: any) => string;
+export declare const getAvailableMaxAmount: (data: WalletPassDataType) => string;
+export declare const clientPayment: (params: {
+    order_id: number;
+    type: "aliPay" | "wxPay";
+    values: any;
+    interaction?: any;
+}) => void;

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

@@ -20,9 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utils_exports = {};
 __export(utils_exports, {
   calcWalletPassListAmount: () => calcWalletPassListAmount,
+  clientPayment: () => clientPayment,
   formatFranchiseeRoute: () => formatFranchiseeRoute,
   formatWalletPassList2PreparePayments: () => formatWalletPassList2PreparePayments,
   formatWalletPassParams: () => formatWalletPassParams,
+  getAvailableMaxAmount: () => getAvailableMaxAmount,
   getFranchiseeShopId: () => getFranchiseeShopId,
   getIsWalletPassAndTripartitePayment: () => getIsWalletPassAndTripartitePayment,
   isFranchiseeShop: () => isFranchiseeShop
@@ -31,13 +33,13 @@ module.exports = __toCommonJS(utils_exports);
 var import_decimal = require("decimal.js");
 var import_status = require("./status");
 var calcWalletPassListAmount = (list) => {
-  return list.reduce((pre, cur) => pre.add(new import_decimal.Decimal(String(cur.available_max_amount || 0))), new import_decimal.Decimal("0")).toNumber();
+  return list.reduce((pre, cur) => pre.add(new import_decimal.Decimal(String(getAvailableMaxAmount(cur) || 0))), new import_decimal.Decimal("0")).toNumber();
 };
 var formatWalletPassList2PreparePayments = (list) => {
   return (list || []).map((item) => {
     return {
       voucher_id: item.id || 0,
-      amount: Number(item.available_max_amount) || 0,
+      amount: Number(getAvailableMaxAmount(item)) || 0,
       tag: item.tag || ""
     };
   });
@@ -46,7 +48,7 @@ var formatWalletPassParams = (payGroup) => {
   const { order_id, payment_group_id, walletPass } = payGroup;
   const payments = (walletPass == null ? void 0 : walletPass.cards.map((item) => {
     return {
-      amount: item.available_max_amount,
+      amount: getAvailableMaxAmount(item),
       wallet_pass_use_value: item.available_max_par_value,
       voucher_id: item.id,
       tag: item.tag,
@@ -81,12 +83,30 @@ var formatFranchiseeRoute = (url, history) => {
   }
   return url;
 };
+var getAvailableMaxAmount = (data) => {
+  return data.tag !== "point_card" ? data.available_max_amount : data == null ? void 0 : data.recommended_usage_amount;
+};
+var clientPayment = (params) => {
+  var _a, _b;
+  const { interaction, type, order_id, values } = params;
+  (_b = (_a = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _a.postMessageToApp) == null ? void 0 : _b.call(_a, {
+    module: "global",
+    key: "paymentClient",
+    data: {
+      type,
+      order_id,
+      ...values
+    }
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   calcWalletPassListAmount,
+  clientPayment,
   formatFranchiseeRoute,
   formatWalletPassList2PreparePayments,
   formatWalletPassParams,
+  getAvailableMaxAmount,
   getFranchiseeShopId,
   getIsWalletPassAndTripartitePayment,
   isFranchiseeShop

package/lib/components/pisellSelectCustomerModal/RightPanel/Add/BirthdayField/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const DateSectionCom: ({ value, onChange, showTime, className, style, useSpace, format, itemStyle, }: any) => JSX.Element;
 export default DateSectionCom;

package/lib/components/pisellSelectCustomerModal/RightPanel/Add/GenderField/index.d.ts

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

package/lib/components/pisellSelectCustomerModal/RightPanel/Add/PhoneField/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const PhoneField: ({ value, onChange }: any) => JSX.Element;
 export default PhoneField;

package/lib/components/pisellSelectCustomerModal/RightPanel/Add/PhoneField/index.js

@@ -36,15 +36,18 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_ahooks = require("ahooks");
 var import_serve = require("./serve");
+var import_utils = require("../../../../../utils");
+var import_useEngineContext = __toESM(require("../../../../../hooks/useEngineContext"));
 var defaultValue = {
   code: "+61",
   phone: ""
 };
 var PhoneField = ({ value, onChange }) => {
+  const context = (0, import_useEngineContext.default)();
+  import_utils.request.setRequest(context.appHelper.utils.request);
   const codes = (0, import_ahooks.useRequest)(import_serve.getCountries, {
     manual: true
   });
-  console.log("codes", codes.data);
   (0, import_react.useEffect)(() => {
     codes.run();
   }, []);

package/lib/components/pisellSelectCustomerModal/RightPanel/Add/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 interface AddClientProps {
     onChange: (value: any) => void;

package/lib/components/pisellSelectCustomerModal/RightPanel/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 interface RightPanelProps {
     value: any;

package/lib/components/productExtension/fields/Actor/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const Actor: ({ name }: {
     name: string;
 }) => JSX.Element;

package/lib/components/productExtension/fields/Forms/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface InfoProps {
     relation_id: any;
     action: any;

package/lib/components/productExtension/fields/SelectProducts/ProductItem/index.d.ts

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

package/lib/components/productExtension/fields/SelectProducts/ProductItem/index.js

@@ -35,6 +35,8 @@ module.exports = __toCommonJS(ProductItem_exports);
 var import_react = __toESM(require("react"));
 var import_utils = require("@pisell/utils");
 var import_classnames = __toESM(require("classnames"));
+var import_decimal = __toESM(require("decimal.js"));
+var import_pisellPriceText = __toESM(require("../../../../productSelect/components/pisellPriceText"));
 var import_index = require("./index.less");
 var ProductItem = ({
   item = {},
@@ -43,6 +45,11 @@ var ProductItem = ({
   style,
   className
 }) => {
+  const { price, is_bundle, minimum_markup_price } = item;
+  let _price = price;
+  if (is_bundle) {
+    _price = new import_decimal.default(price).plus(new import_decimal.default(minimum_markup_price)).toFixed(2);
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -59,7 +66,7 @@ var ProductItem = ({
         className: "product-item-card-cover"
       }
     ) : null,
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "product-item-card-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-item-card-title" }, item.title), /* @__PURE__ */ import_react.default.createElement("div", { className: "product-item-card-price" }, (0, import_utils.formatAmount)(item.price, 2, amountSymbol)))
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "product-item-card-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-item-card-title" }, item.title), /* @__PURE__ */ import_react.default.createElement("div", { className: "product-item-card-price" }, /* @__PURE__ */ import_react.default.createElement(import_pisellPriceText.default, { value: _price, isMini: is_bundle })))
   );
 };
 var ProductItem_default = ProductItem;

package/lib/components/productExtension/fields/SelectProducts/ProductItemPreview/index.d.ts

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

package/lib/components/productExtension/fields/SelectProducts/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 interface valueType {
 }

package/lib/components/productExtension/fields/SelectResourcesTable/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const SelectResourcesTable: ({ value, onChange }: any) => JSX.Element;
 export default SelectResourcesTable;

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

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

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

@@ -0,0 +1,2 @@
+declare const TabProduct: (props: any) => JSX.Element;
+export default TabProduct;

package/lib/components/productSelect/components/TabProduct/index.js

@@ -0,0 +1,189 @@
+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/productSelect/components/TabProduct/index.tsx
+var TabProduct_exports = {};
+__export(TabProduct_exports, {
+  default: () => TabProduct_default
+});
+module.exports = __toCommonJS(TabProduct_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_ahooks = require("ahooks");
+var import_utils = require("@pisell/utils");
+var import_tabs = __toESM(require("./tabs"));
+var import_productGroup = __toESM(require("../productGroup"));
+var io = null;
+var TabProduct = (props) => {
+  const {
+    showTab = true,
+    layout,
+    list,
+    onChange,
+    amountSymbol = "$",
+    scrollDom,
+    value: currentProductId,
+    loading,
+    emptyDescription,
+    ...rest
+  } = props;
+  const tabsRef = (0, import_react.useRef)();
+  const [currentGroupId, setCurrentGroupId] = (0, import_react.useState)(1);
+  (0, import_react.useEffect)(() => {
+    if (list == null ? void 0 : list.length) {
+      setCurrentGroupId(list[0].id);
+      requestAnimationFrame(() => {
+        handleObserver();
+      });
+    }
+  }, [list]);
+  const debouncedScroll = (0, import_ahooks.useDebounceFn)(
+    (id) => {
+      var _a;
+      (_a = tabsRef == null ? void 0 : tabsRef.current) == null ? void 0 : _a.scroll(id);
+    },
+    { wait: 100 }
+    // 100ms防抖
+  );
+  const handleObserver = (0, import_ahooks.useMemoizedFn)(() => {
+    const _marginTop = 270;
+    const _marginBottom = window.innerHeight - 70 - 200 - 70;
+    const _rootMargin = `${_marginTop * -1}px 0px ${_marginBottom * -1}px 0px`;
+    io = new IntersectionObserver(
+      (entries) => {
+        var _a, _b;
+        const enteringEntries = entries.filter((entry) => entry.isIntersecting);
+        if (enteringEntries.length > 0) {
+          const topMostEntry = enteringEntries.reduce((top, current) => {
+            return current.boundingClientRect.top < top.boundingClientRect.top ? current : top;
+          });
+          const [name, id] = (_b = (_a = topMostEntry == null ? void 0 : topMostEntry.target) == null ? void 0 : _a.id) == null ? void 0 : _b.split("-");
+          const newGroupId = Number(id);
+          setCurrentGroupId(newGroupId);
+          debouncedScroll.run(id);
+        }
+      },
+      {
+        root: null,
+        rootMargin: _rootMargin
+      }
+    );
+    if (list == null ? void 0 : list.length) {
+      for (const item of list) {
+        const _item = document.querySelector(`#list-${item.id}`);
+        if (_item) {
+          io.observe(_item);
+        }
+      }
+    }
+  });
+  const handleUnobserver = (0, import_ahooks.useMemoizedFn)(() => {
+    if ((list == null ? void 0 : list.length) && io) {
+      for (const item of list) {
+        const _item = document.querySelector(`#list-${item.id}`);
+        if (_item) {
+          io.unobserve(_item);
+        }
+      }
+    }
+  });
+  const renderContent = () => {
+    if (loading) {
+      return /* @__PURE__ */ import_react.default.createElement(import_productGroup.ProductGroupSkeleton, { layout });
+    }
+    if (!(list == null ? void 0 : list.length)) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_materials.PisellEmpty,
+        {
+          description: emptyDescription || import_utils.locales.getText("pisell2.product-select.empty")
+        }
+      );
+    }
+    return list.map((item, i) => {
+      return /* @__PURE__ */ import_react.default.createElement("div", { id: `list-${item.id}`, key: i }, /* @__PURE__ */ import_react.default.createElement(
+        import_productGroup.default,
+        {
+          onSelectProduct: onChange,
+          currentProductId,
+          key: item.id,
+          data: item,
+          layout,
+          ...rest
+        }
+      ));
+    });
+  };
+  const tabSkeleton = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-pisell-tabs" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "booking-pisell-tabs-btn-left",
+        style: { marginLeft: 20, width: 0 }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-pisell-tabs-content" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton.Button, { active: true, size: "large", shape: "round" })));
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showTab ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-product-select-tabs-wrapper" }, loading ? tabSkeleton : /* @__PURE__ */ import_react.default.createElement(
+    import_tabs.default,
+    {
+      ref: tabsRef,
+      options: list,
+      rowKey: "id",
+      tab: currentGroupId,
+      onChange: (e) => {
+        var _a;
+        let comWrapper = document.querySelector(
+          ".pisell-product-select-wrapper"
+        );
+        let categoryDom = document.querySelector(
+          ".pisell-product-select-tabs-wrapper"
+        );
+        let wrapperOffsetTop = comWrapper.offsetTop;
+        let top = 0;
+        if (categoryDom) {
+          top = categoryDom.offsetHeight;
+        }
+        const dom = document == null ? void 0 : document.querySelector("#list-" + e);
+        const main = document == null ? void 0 : document.querySelector(scrollDom);
+        if (dom && main) {
+          if (e === ((_a = list[0]) == null ? void 0 : _a.id)) {
+            main.scrollTop = 0;
+          } else {
+            main.scrollTop = dom.offsetTop - top - wrapperOffsetTop;
+          }
+        }
+        handleUnobserver();
+        setCurrentGroupId(e);
+        setTimeout(() => {
+          handleObserver();
+        }, 1e3);
+      }
+    }
+  )) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-product-select-product-list" }, renderContent()));
+};
+var TabProduct_default = TabProduct;

package/lib/components/productSelect/components/TabProduct/tabs/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+export interface Com<T> extends React.FC<T> {
+}
+export declare type RowKey = string | number;
+export interface Option {
+    id: number | string;
+    name: React.ReactNode;
+}
+export interface TabsProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
+    renderTab: (item: any) => React.ReactNode;
+    rowKey: RowKey;
+    name: RowKey;
+    onChange: (key: RowKey, _item: any) => void;
+    tab: RowKey;
+    className: string;
+    tabsRef: any;
+    options: Option[];
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<Partial<TabsProps>, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

package/lib/components/productSelect/components/TabProduct/tabs/index.js

@@ -0,0 +1,202 @@
+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/productSelect/components/TabProduct/tabs/index.tsx
+var tabs_exports = {};
+__export(tabs_exports, {
+  default: () => tabs_default
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_ahooks = require("ahooks");
+var import_ChevronLeft = __toESM(require("@pisell/icon/es/ChevronLeft"));
+var import_ChevronRight = __toESM(require("@pisell/icon/es/ChevronRight"));
+var import_index = require("./index.less");
+var Tabs = ({ renderTab, rowKey, name = "tabs-", onChange, tab, className, options }, ref) => {
+  const [isShowButton, setIsShowButton] = (0, import_react.useState)(false);
+  (0, import_react.useImperativeHandle)(ref, () => {
+    return {
+      scroll: (tab2) => {
+        if (tab2) {
+          const dom = document.querySelector(`#${name}${tab2}`);
+          if (dom) {
+            setTabScroll(dom == null ? void 0 : dom.offsetLeft);
+          }
+        }
+      }
+    };
+  });
+  const _onChange = (_key, _item, e) => {
+    if (onChange) {
+      onChange(_key, _item);
+    }
+    setTabScroll(e.target.offsetLeft);
+  };
+  (0, import_react.useEffect)(() => {
+    if (options == null ? void 0 : options.length) {
+      calculateWidth();
+    }
+  }, [options]);
+  const calculateWidth = () => {
+    const tabsWrapper = document.querySelector("#pisell-tabs");
+    const tabsContent = document.querySelector("#pisell-tabs-content");
+    if ((tabsContent == null ? void 0 : tabsContent.offsetWidth) + 60 > (tabsWrapper == null ? void 0 : tabsWrapper.offsetWidth)) {
+      setIsShowButton(true);
+    }
+  };
+  const _options = (0, import_react.useMemo)(() => {
+    return options || [];
+  }, [options]);
+  const [leftWidth, setLeftWidth] = (0, import_react.useState)(40);
+  const [leftActive, setLeftActive] = (0, import_react.useState)(false);
+  const [rightWidth, setRightWidth] = (0, import_react.useState)(40);
+  const [rightActive, setRightActive] = (0, import_react.useState)(true);
+  const debounceChange = (0, import_ahooks.useDebounceFn)(
+    ({ current, total }) => {
+      if (current === 0) {
+        setLeftActive(false);
+      } else {
+        setLeftActive(true);
+      }
+      if (current + 10 >= total) {
+        setRightActive(false);
+      } else {
+        setRightActive(true);
+      }
+    },
+    {
+      wait: 200
+    }
+  );
+  const onScroll = (e) => {
+    let total = e.target.scrollWidth - e.target.clientWidth;
+    let current = e.target.scrollLeft;
+    debounceChange.run({ current, total });
+  };
+  const setTabScroll = (val) => {
+    let dom = document.querySelector("#pisell-tabs-content");
+    console.log("domdom", dom);
+    if (!dom) {
+      return;
+    }
+    dom.scrollLeft = val;
+  };
+  const onPageChange = (type) => {
+    let dom = document.querySelector("#pisell-tabs-content");
+    if (!dom) {
+      return;
+    }
+    if (type === "left") {
+      setTabScroll((dom == null ? void 0 : dom.scrollLeft) - dom.clientWidth / 2);
+    } else {
+      setTabScroll((dom == null ? void 0 : dom.scrollLeft) + dom.clientWidth / 2);
+    }
+  };
+  const leftBtn = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "booking-pisell-tabs-btn-left",
+        style: {
+          width: leftWidth,
+          // marginLeft: !leftWidth ? '20px' : 0,
+          opacity: leftActive ? 1 : 0.3
+        },
+        onClick: () => {
+          onPageChange("left");
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_ChevronRight.default, { className: "booking-pisell-tabs-btn-icon" })
+    );
+  }, [leftWidth, leftActive]);
+  const rightBtn = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "booking-pisell-tabs-btn-right",
+        style: {
+          width: rightWidth,
+          // marginRight: !rightWidth ? '20px' : 0,
+          opacity: rightActive ? 1 : 0.3
+        },
+        onClick: () => {
+          onPageChange("right");
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_ChevronLeft.default,
+        {
+          type: "icona-iconArrowsLine",
+          className: "booking-pisell-tabs-btn-icon"
+        }
+      )
+    );
+  }, [rightWidth, rightActive]);
+  const content = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "booking-pisell-tabs-content",
+        id: "pisell-tabs-content",
+        onScroll,
+        style: { width: "unset" }
+      },
+      !isShowButton ? /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 4 } }) : null,
+      _options.map((d, i) => {
+        let _key = rowKey ? d[rowKey] : i;
+        return /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)("booking-pisell-tabs-tab", {
+              "booking-pisell-tabs-tab-active": tab === _key
+            }),
+            key: _key,
+            id: name + "" + _key,
+            onClick: (e) => {
+              _onChange(_key, d, e);
+            }
+          },
+          renderTab ? renderTab(d) : /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-pisell-tabs-tab-content" }, d.name)
+        );
+      })
+    );
+  }, [_options, rowKey, name, tab, isShowButton]);
+  console.log("isShow", isShowButton);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("booking-pisell-tabs", className),
+      id: "pisell-tabs"
+    },
+    isShowButton && leftBtn,
+    content,
+    isShowButton && rightBtn
+  );
+};
+var tabs_default = (0, import_react.forwardRef)(Tabs);