@pisell/private-materials 3.3.34 → 3.3.35

package/lib/components/booking/info/service/actions/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./index.less";
 declare const Actions: ({ currentService }: {
     currentService: any;

package/lib/components/booking/info/service/addService/index.d.ts

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

package/lib/components/booking/info/service/addTimeModal/index.d.ts

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

package/lib/components/booking/info/service/serviceList/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const ServiceList: ({ onEdit }: {
     onEdit: any;

package/lib/components/booking/info/service2/Lists.d.ts

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

package/lib/components/booking/info2/service/actions/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import '../../../info/service/actions/index.less';
 declare const Actions: ({ currentService }: {
     currentService: any;

package/lib/components/booking/info2/service/addService/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PisellDrawerProps } from '../../../components/drawer';
 import '../../../info/service/addService/index.less';
 interface AddServiceProps {

package/lib/components/booking/info2/service/addTimeModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import '../../../info/service/addTimeModal/index.less';
 declare const AddTimeModal: () => JSX.Element;
 export default AddTimeModal;

package/lib/components/booking/info2/service/serviceList/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const ServiceList: ({ onEdit }: {
     onEdit: any;

package/lib/components/booking/materiels/duration/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectProps } from 'antd';
 interface DurationProps extends SelectProps {
     locale?: string;

package/lib/components/booking/materiels/holder/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectProps } from 'antd';
 interface HolderProps extends SelectProps {
     selectProps?: SelectProps;

package/lib/components/booking/materiels/startTime/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectProps } from "antd";
 interface StartTimeProps extends SelectProps {
     locale?: string;

package/lib/components/booking/utils.d.ts

@@ -163,10 +163,10 @@ export declare const getProductTotalPrice: (item: any) => number;
 export declare const getDuration: (duration: number | {
     type: string;
     value: number;
-}) => number | {
+}) => number | "flexible" | {
     type: string;
     value: number;
-} | "flexible";
+};
 export declare const isWalkIn: (customer_id?: number | string) => boolean;
 export declare const getIsEdit: (state: any) => boolean;
 export {};

package/lib/components/booking/utils.js

@@ -230,6 +230,9 @@ var formatProductListByCategory = (list, filterItem) => {
   return Object.values(categoryObject).sort((a, b) => b.sort - a.sort);
 };
 var getResourceTimeIsUsable = (item, cacheItem) => {
+  var _a;
+  const isEdit = !!cacheItem.booking_id;
+  const isCurrentRelation = item.item_id === ((_a = cacheItem == null ? void 0 : cacheItem._extend) == null ? void 0 : _a.relation_id);
   const startDate = (0, import_dayjs.default)(
     cacheItem._extend.start_date.format("YYYY-MM-DD") + " " + getServeStartTime(cacheItem._extend.start_time)
   );
@@ -240,7 +243,8 @@ var getResourceTimeIsUsable = (item, cacheItem) => {
   if (time.max_participants_limit == 0) {
     isMaxLimitRange = true;
   } else {
-    isMaxLimitRange = time.order_event_count < time.max_participants_limit;
+    const orderEventCount = isEdit && isCurrentRelation ? time.order_event_count - 1 : time.order_event_count;
+    isMaxLimitRange = orderEventCount < time.max_participants_limit;
   }
   const timeStartDate = (0, import_dayjs.default)(time.start_date + " " + time.start_time).subtract(
     1,

package/lib/components/eventBooking/components/Provider/Cart/ContinueButton/index.js

@@ -61,59 +61,145 @@ var ContinueButton = () => {
   const [openEmptyHolder, setOpenEmptyHolder] = (0, import_react.useState)(false);
   const { setData, removeSessionStorage } = (0, import_Sales.useSales)();
   const context = (0, import_useEngineContext.default)();
-  const { store } = ((_a = context.appHelper) == null ? void 0 : _a.utils) || {};
+  const { store, action, getStore } = ((_a = context.appHelper) == null ? void 0 : _a.utils) || {};
   const handleCheckout = async () => {
-    var _a2;
-    const value = (0, import_utils2.formatValues)(data);
-    const result = await onCheckout(value);
-    if (result == null ? void 0 : result.success) {
-      removeSessionStorage();
-    } else {
-      (0, import_materials.PisellToast)({
-        content: ((_a2 = result == null ? void 0 : result.err) == null ? void 0 : _a2.message) || ""
-      });
-    }
+    const params = (0, import_utils2.getFormParams)(data);
+    action == null ? void 0 : action({
+      type: "pisell1.goProductForm",
+      data: params,
+      callback: async (e) => {
+        var _a2;
+        const value = (0, import_utils2.formatValues)(data, false, {
+          relation_forms: e
+        });
+        const result = await onCheckout(value);
+        if (result == null ? void 0 : result.success) {
+          removeSessionStorage();
+        } else {
+          (0, import_materials.PisellToast)({
+            content: ((_a2 = result == null ? void 0 : result.err) == null ? void 0 : _a2.message) || ""
+          });
+        }
+      }
+    });
   };
-  const getEventDetailBookingOptions = (0, import_ahooks.useRequest)(
-    import_serve.getEventDetailBookingOptionsApi,
-    {
-      manual: true,
-      onSuccess: (res) => {
+  const _getProductPrice = (0, import_ahooks.useRequest)(import_serve.getProductPrice, {
+    manual: true,
+    onSuccess: (res) => {
+      const list = res.data || [];
+      const productById = list.reduce((pre, cur) => {
+        pre[cur.id] = cur;
+        return pre;
+      }, {});
+      console.log("start update price");
+      const newCartItems = cartData.cartItems.map((item) => {
         var _a2;
-        const list = ((_a2 = res.data) == null ? void 0 : _a2.list) || [];
-        const productById = list.reduce((pre, cur) => {
-          pre[cur.id] = cur;
-          return pre;
-        }, {});
-        const newCartItems = cartData.cartItems.map((item) => {
-          const { product } = item._originData || {};
-          let newProduct = productById[product.product_id];
-          item.price = newProduct.price;
-          item.total = newProduct.price;
+        const { product } = item._originData || {};
+        let newProduct = productById[product.product_id];
+        let _totalPrice = Number(newProduct.price);
+        if (!(item == null ? void 0 : item._productDetail)) {
+          item.price = _totalPrice;
+          item.total = _totalPrice;
           return item;
-        });
-        setData({
-          cartData: {
-            ...cartData,
-            cartItems: newCartItems
+        }
+        const { bundle = [], options } = item._productDetail;
+        if (product == null ? void 0 : product.product_variant_id) {
+          const { variant = [] } = newProduct;
+          const _variant = variant.find(
+            (v) => v.id === product.product_variant_id
+          );
+          if (_variant) {
+            _totalPrice = Number(_variant.price);
           }
-        });
-      }
+        } else if (
+          // 2. 套餐商品
+          Array.isArray(product == null ? void 0 : product.product_bundle) && product.product_bundle.length > 0
+        ) {
+          const { bundle_group = [] } = newProduct;
+          for (let i = 0; i < product.product_bundle.length; i++) {
+            const pbItem = product.product_bundle[i];
+            const { bundle_group_id, bundle_id, option } = pbItem;
+            const _originBundleItemInfo = bundle.find(
+              (bi) => bi.id === bundle_id
+            );
+            const _targetBundleGroup = bundle_group.find(
+              (bg) => bg.id === bundle_group_id
+            );
+            if ((_a2 = _targetBundleGroup == null ? void 0 : _targetBundleGroup.bundle_item) == null ? void 0 : _a2.length) {
+              let _newBundleItemInfo = _targetBundleGroup.bundle_item.find(
+                (bi) => bi.id === bundle_id
+              );
+              if ((_originBundleItemInfo == null ? void 0 : _originBundleItemInfo._bundle_product_id) === (_newBundleItemInfo == null ? void 0 : _newBundleItemInfo.bundle_product_id)) {
+                const {
+                  price_type,
+                  num = 0,
+                  option: _originBundleItemOptions
+                } = _originBundleItemInfo;
+                const _bundleItemPrice = Number(_newBundleItemInfo.price);
+                if (price_type === "markup") {
+                  _totalPrice += _bundleItemPrice * num;
+                } else if (price_type === "markdown") {
+                  _totalPrice -= _bundleItemPrice * num;
+                } else {
+                  _totalPrice += _bundleItemPrice * num;
+                }
+                if (Array.isArray(option) && (option == null ? void 0 : option.length) > 0) {
+                  for (let j = 0; j < option.length; j++) {
+                    const { option_group_item_id } = option[j];
+                    const _originOptionItem = _originBundleItemOptions.find(
+                      (op) => op.product_option_item_id === option_group_item_id
+                    );
+                    if (_originOptionItem) {
+                      const { price, num: _optionNum = 0 } = _originOptionItem;
+                      _totalPrice += Number(price) * _optionNum;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } else if (
+          // 3. 单规格商品
+          Array.isArray(product == null ? void 0 : product.product_option_item) && product.product_option_item.length > 0
+        ) {
+          for (let i = 0; i < product.product_option_item.length; i++) {
+            const { option_group_item_id } = product.product_option_item[i];
+            const _originOptionItem = options.find(
+              (op) => op.product_option_item_id === option_group_item_id
+            );
+            if (_originOptionItem) {
+              const { price, num = 0 } = _originOptionItem;
+              _totalPrice += Number(price) * num;
+            }
+          }
+        }
+        item.price = _totalPrice;
+        item.total = _totalPrice;
+        return item;
+      });
+      console.log("new cart data", newCartItems);
+      setData({
+        cartData: {
+          ...cartData,
+          cartItems: newCartItems
+        }
+      });
     }
-  );
+  });
   const getCartItemProductsWithQuotation = async () => {
     var _a2, _b2;
     const ids = cartData.cartItems.map((item) => {
-      const { product } = item._originData || {};
-      return product == null ? void 0 : product.product_id;
+      const { product = {} } = item._originData || {};
+      const { product_id } = product;
+      return product_id;
     }).filter((id) => !!id);
-    const customer = (_b2 = (_a2 = store == null ? void 0 : store.getState()) == null ? void 0 : _a2.global) == null ? void 0 : _b2.userInfo;
-    getEventDetailBookingOptions.run({
+    const store2 = getStore();
+    const customer = (_b2 = (_a2 = store2 == null ? void 0 : store2.getState()) == null ? void 0 : _a2.global) == null ? void 0 : _b2.userInfo;
+    if (!(ids == null ? void 0 : ids.length)) return;
+    _getProductPrice.run({
       ids,
-      num: 100,
-      skip: 1,
-      customer_id: customer == null ? void 0 : customer.id,
-      open_quotation: 1
+      customer_id: customer == null ? void 0 : customer.id
+      // open_quotation: 1,
     });
   };
   const handleNextStep = async () => {

package/lib/components/eventBooking/components/Provider/Cart/index.d.ts

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

package/lib/components/eventBooking/components/Provider/Content/index.d.ts

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

package/lib/components/eventBooking/components/Provider/Header/index.d.ts

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

package/lib/components/eventBooking/components/Provider/SelectHolderModal.d.ts

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

package/lib/components/eventBooking/components/bookingDetailModal/components/BookingOptions.d.ts

@@ -1,2 +1,4 @@
-declare const BookingOptions: () => JSX.Element;
+declare const BookingOptions: (props: {
+    onChangeBookingOption?: ((bookingOption: any) => void) | undefined;
+}) => JSX.Element;
 export default BookingOptions;

package/lib/components/eventBooking/components/bookingDetailModal/components/BookingOptions.js

@@ -37,9 +37,14 @@ var import_OpenCard = __toESM(require("../../OpenCard"));
 var import_materials = require("@pisell/materials");
 var import_utils = require("@pisell/utils");
 var import_Sales = require("../../../../Sales");
-var BookingOptions = () => {
+var BookingOptions = (props) => {
   var _a, _b;
   const { detail, currentBookingOption, selectEventDetailBookingOptions } = (0, import_Sales.useEventDetail)();
+  const onChange = (value, item) => {
+    var _a2;
+    selectEventDetailBookingOptions(value);
+    (_a2 = props == null ? void 0 : props.onChangeBookingOption) == null ? void 0 : _a2.call(props, item);
+  };
   return /* @__PURE__ */ import_react.default.createElement(
     import_OpenCard.default,
     {
@@ -67,7 +72,7 @@ var BookingOptions = () => {
             }
           ));
         },
-        onChange: (value) => selectEventDetailBookingOptions(value)
+        onChange
       }
     )
   );

package/lib/components/eventBooking/components/bookingDetailModal/components/Resource.d.ts

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

package/lib/components/eventBooking/components/bookingDetailModal/components/Schedule.d.ts

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

package/lib/components/eventBooking/components/bookingDetailModal/index.js

@@ -42,12 +42,21 @@ var import_Resource = __toESM(require("./components/Resource"));
 var import_BookingOptions = __toESM(require("./components/BookingOptions"));
 var import_OrderProductModal = __toESM(require("../Provider/OrderProductModal/index"));
 var import_index = require("./index.less");
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
 var BookingDetailModal = (props) => {
   var _a;
   const modalContentRef = (0, import_react.useRef)(null);
+  const context = (0, import_useEngineContext.default)();
+  const { utils } = context.appHelper || {};
   const tabsRef = (0, import_react.useRef)();
   const { open = false } = props;
-  const { detail, onCloseEventDetail, onSelectEventDetail } = (0, import_Sales.useEventDetail)();
+  const {
+    detail,
+    onCloseEventDetail,
+    onSelectEventDetail,
+    selectEventDetailProductDetail,
+    checkBeforeSelectEventDetail
+  } = (0, import_Sales.useEventDetail)();
   const { addToCart, checkBeforeAddToCart, checkBeforeAddToCartResquest } = (0, import_Sales.useCart)();
   const [activeTab, setActiveTab] = (0, import_react.useState)("introduction");
   const [isScrolling, setIsScrolling] = (0, import_react.useState)(false);
@@ -175,34 +184,80 @@ var BookingDetailModal = (props) => {
     }
   };
   const content = () => {
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-detail-modal-content", style: { height: (0, import_utils.isMobile)() ? "100%" : "calc(80vh - 146px)" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "anchor-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
-      import_materials.PisellAnchor,
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        ref: tabsRef,
-        options: anchorOptions,
-        containerRef: modalContentRef,
-        tab: activeTab,
-        onChange: (key) => {
-          handleTabChange(key);
-        },
-        onTabClick: () => {
-          isUserClickRef.current = true;
+        className: "booking-detail-modal-content",
+        style: { height: (0, import_utils.isMobile)() ? "100%" : "calc(80vh - 146px)" }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "anchor-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+        import_materials.PisellAnchor,
+        {
+          ref: tabsRef,
+          options: anchorOptions,
+          containerRef: modalContentRef,
+          tab: activeTab,
+          onChange: (key) => {
+            handleTabChange(key);
+          },
+          onTabClick: () => {
+            isUserClickRef.current = true;
+          }
         }
+      )),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "content-wrapper", ref: modalContentRef }, /* @__PURE__ */ import_react.default.createElement("div", { "data-section": "introduction", className: "content-section" }, (images == null ? void 0 : images.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(
+        import_materials.PisellImageCarousels,
+        {
+          dataSource: images,
+          width: "100%",
+          height: (0, import_utils.isMobile)() ? 300 : 400,
+          showArrows: !(0, import_utils.isMobile)(),
+          showDots: (images == null ? void 0 : images.length) > 1,
+          autoplay: (images == null ? void 0 : images.length) > 1,
+          loop: false
+        }
+      ) : null, /* @__PURE__ */ import_react.default.createElement(import_eventCard.default, { data: detail == null ? void 0 : detail.introduction })), /* @__PURE__ */ import_react.default.createElement("div", { "data-section": "schedule", className: "content-section" }, /* @__PURE__ */ import_react.default.createElement(import_Schedule.default, null)), /* @__PURE__ */ import_react.default.createElement("div", { "data-section": "resource", className: "content-section" }, /* @__PURE__ */ import_react.default.createElement(import_Resource.default, null)), /* @__PURE__ */ import_react.default.createElement("div", { "data-section": "booking_options", className: "content-section" }, /* @__PURE__ */ import_react.default.createElement(
+        import_BookingOptions.default,
+        {
+          onChangeBookingOption: checkToOpenProductDetailModal
+        }
+      )))
+    );
+  };
+  const checkToOpenProductDetailModal = (bookingOption) => {
+    var _a2;
+    console.log(">>>>>>>", bookingOption);
+    if (((_a2 = bookingOption == null ? void 0 : bookingOption._originData) == null ? void 0 : _a2.is_eject) !== 1) {
+      return;
+    }
+    utils == null ? void 0 : utils.action({
+      type: "pisell1.productDetail",
+      data: {
+        detail: { ...(bookingOption == null ? void 0 : bookingOption._originData) || {} },
+        isOS: false
+      },
+      callback: (data) => {
+        if (data == null ? void 0 : data.isCancel) {
+          return;
+        }
+        console.log("data>>>>>>", data);
+        const product = {
+          ...data,
+          options: (data == null ? void 0 : data.option) || []
+        };
+        delete product.option;
+        selectEventDetailProductDetail(product);
+        handleOk();
       }
-    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "content-wrapper", ref: modalContentRef }, /* @__PURE__ */ import_react.default.createElement("div", { "data-section": "introduction", className: "content-section" }, (images == null ? void 0 : images.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(
-      import_materials.PisellImageCarousels,
-      {
-        dataSource: images,
-        width: "100%",
-        height: (0, import_utils.isMobile)() ? 300 : 400,
-        showArrows: !(0, import_utils.isMobile)(),
-        showDots: (images == null ? void 0 : images.length) > 1,
-        autoplay: (images == null ? void 0 : images.length) > 1,
-        loop: false
-      }
-    ) : null, /* @__PURE__ */ import_react.default.createElement(import_eventCard.default, { data: detail == null ? void 0 : detail.introduction })), /* @__PURE__ */ import_react.default.createElement("div", { "data-section": "schedule", className: "content-section" }, /* @__PURE__ */ import_react.default.createElement(import_Schedule.default, null)), /* @__PURE__ */ import_react.default.createElement("div", { "data-section": "resource", className: "content-section" }, /* @__PURE__ */ import_react.default.createElement(import_Resource.default, null)), /* @__PURE__ */ import_react.default.createElement("div", { "data-section": "booking_options", className: "content-section" }, /* @__PURE__ */ import_react.default.createElement(import_BookingOptions.default, null))));
+    });
   };
   const handleOk = async () => {
+    console.log(">>>>>>>", detail);
+    const result = checkBeforeSelectEventDetail();
+    if (!result) {
+      checkToOpenProductDetailModal(detail == null ? void 0 : detail.selectedProduct);
+      return;
+    }
     onSelectEventDetail();
     const checkRes = await checkBeforeAddToCart();
     if ((checkRes == null ? void 0 : checkRes.result) === false) {

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

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

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/index.d.ts

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

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.js

@@ -58,7 +58,9 @@ var TabProduct = (props) => {
   (0, import_react.useEffect)(() => {
     if (list == null ? void 0 : list.length) {
       setCurrentGroupId(list[0].id);
-      handleObserver();
+      requestAnimationFrame(() => {
+        handleObserver();
+      });
     }
   }, [list]);
   const handleObserver = (0, import_ahooks.useMemoizedFn)(() => {
@@ -142,7 +144,9 @@ var TabProduct = (props) => {
       tab: currentGroupId,
       onChange: (e) => {
         var _a;
-        let comWrapper = document.querySelector(".pisell-product-select-wrapper");
+        let comWrapper = document.querySelector(
+          ".pisell-product-select-wrapper"
+        );
         let categoryDom = document.querySelector(
           ".pisell-product-select-tabs-wrapper"
         );

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 interface TicketBookingProps {
     productExtensionType: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "3.3.34",
+  "version": "3.3.35",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -60,9 +60,9 @@
     "rc-virtual-list": "^3.11.3",
     "decimal.js": "^10.4.3",
     "@pisell/utils": "1.0.42",
-    "@pisell/materials": "3.3.11",
-    "@pisell/date-picker": "3.0.2",
-    "@pisell/icon": "0.0.11"
+    "@pisell/materials": "3.3.12",
+    "@pisell/icon": "0.0.11",
+    "@pisell/date-picker": "3.0.2"
   },
   "peerDependencies": {
     "react": "^18.0.0",