@pisell/private-materials 6.2.11 → 6.2.13

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

@@ -55,7 +55,8 @@ var BookingDetailModal = (props) => {
     onCloseEventDetail,
     onSelectEventDetail,
     selectEventDetailProductDetail,
-    checkBeforeSelectEventDetail
+    checkBeforeSelectEventDetail,
+    getProductDetailRequest
   } = (0, import_Sales.useEventDetail)();
   const { addToCart, checkBeforeAddToCart, checkBeforeAddToCartResquest } = (0, import_Sales.useCart)();
   const { initData } = (0, import_Sales.useInit)();
@@ -294,7 +295,7 @@ var BookingDetailModal = (props) => {
       onOk: handleOk,
       width: (0, import_utils.isMobile)() ? "100%" : 600,
       okButtonProps: {
-        loading: checkBeforeAddToCartResquest == null ? void 0 : checkBeforeAddToCartResquest.loading
+        loading: (getProductDetailRequest == null ? void 0 : getProductDetailRequest.loading) || (checkBeforeAddToCartResquest == null ? void 0 : checkBeforeAddToCartResquest.loading)
       }
     },
     content()

package/lib/components/eventBooking/components/scheduleCalendar/calendarItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CalendarDataItem } from '../../type';
 declare type CalendarItemProps = {
     month: string;

package/lib/components/eventBooking/index.js

@@ -66,6 +66,17 @@ var Content = () => {
     }
     getResourceList.run(params);
   }, []);
+  (0, import_react.useEffect)(() => {
+    const setRealVH = () => {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+    };
+    setRealVH();
+    window.addEventListener("resize", setRealVH);
+    return () => {
+      window.removeEventListener("resize", setRealVH);
+    };
+  }, []);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {

package/lib/components/eventBooking/index.less

@@ -15,7 +15,7 @@
 
 .event-booking-mobile-wrap {
   background: #ffffff;
-  min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100);
   .pisell-section-headers-content {
     width: 100%;
   }

package/lib/components/pay/toC/PaymentMethods/StripePay/Stripe/Finish/index.d.ts

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

package/lib/components/pay/toC/PaymentMethods/StripePay/Stripe/StripeSDK/SDK.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const StripeSDK: ({ public_key, client_secret, children, lang, }: {
     public_key: string;
     client_secret?: string | undefined;

package/lib/components/pay/toC/PaymentMethods/StripePay/Stripe/StripeSDK/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const StripeSDK: ({ public_key, client_secret, children, lang, }: {
     public_key: string;
     client_secret?: string | undefined;

package/lib/components/pay/toC/PaymentMethods/StripePay/Stripe/components/PageLoading/index.d.ts

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

package/lib/components/pay/toC/PaymentMethods/StripePay/Stripe/components/SetupForm/PaymentRequestForm.d.ts

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

package/lib/components/pay/toC/PaymentMethods/StripePay/Stripe/components/SetupForm/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const SetupForm: ({ onReady, amount, order_id, payment_method, scene, }: any) => JSX.Element;
 export default SetupForm;

package/lib/components/pay/toC/PaymentMethods/StripePay/Stripe/index.d.ts

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

package/lib/components/pay/toC/WalletPassBlock/components/WalletUseList/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { WalletPassDataType } from '../../../PaymentMethods/WalletPass/serve';
 import './index.less';
 interface WalletUseListProps {

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/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/schedules/calendar/calendarItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CalendarDataItem } from "../type";
 declare type CalendarItemProps = {
     month: string;

package/lib/components/schedules/components/CurrentDay/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./index.less";
 declare type CurrentDayProps = {
     onClose: () => void;

package/lib/components/schedules/components/ScheduleList/RenderScheduleItem/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 import { ScheduleItem } from '../../../type';
 declare type Item = any;

package/lib/components/schedules/products/ProductDetailDrawer/ProductDetail/index.d.ts

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

package/lib/components/schedules/products/ProductDetailDrawer/ProductDetailByDate/index.d.ts

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

package/lib/components/schedules/products/index.d.ts

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

package/lib/components/schedules/resources/relationProduct/index.d.ts

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

package/lib/components/shoppingCart/components/Cart/Product.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProductProps } from '../../type';
 declare const Product: (props: ProductProps) => JSX.Element;
 export default Product;

package/lib/components/shoppingCart/components/Cart/Product.js

@@ -37,7 +37,6 @@ var import_materials = require("@pisell/materials");
 var import_useClearCart = __toESM(require("../../hooks/useClearCart"));
 var import_useContext = require("../../hooks/useContext");
 var import_useAddService = __toESM(require("../../hooks/useAddService"));
-var import_ahooks = require("ahooks");
 var Product = (props) => {
   const { id, lists, isAdd = true } = props;
   const { state, onAction, onChange } = (0, import_useContext.useContext)();
@@ -55,10 +54,10 @@ var Product = (props) => {
     isShowEditProduct
   } = state;
   const clearCart = (0, import_useClearCart.default)(id);
-  const handleChange = (0, import_ahooks.useMemoizedFn)((item, type, other) => {
+  const handleChange = (item, type, other) => {
     if (disabledEdit && !(other == null ? void 0 : other.disabled)) return;
     onChange(item, type, other);
-  });
+  };
   const productParams = (0, import_react.useMemo)(() => {
     return {
       isShowNote,
@@ -82,33 +81,24 @@ var Product = (props) => {
     isShowChangeHolder,
     isShowEditProduct
   ]);
-  (0, import_ahooks.useTrackedEffect)(
-    (changes) => {
-      console.log("Index of changed dependencies: ", changes);
-    },
-    [clearCart, lists, productParams, hideAddBtn, isAdd, platform]
-  );
-  return (0, import_react.useMemo)(() => {
-    console.log("render cart");
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__shopping-cart-content" }, clearCart, lists == null ? void 0 : lists.map((item) => {
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_materials.ProductCard,
-        {
-          key: item._id,
-          dataSource: item,
-          onAction: (e) => onAction == null ? void 0 : onAction(e),
-          onDelete: (e) => handleChange(e, "delete", item),
-          onNote: (e) => handleChange(e, "note", { note: e.note }),
-          onLike: (e) => handleChange(e, "like", { like_status: e.like_status }),
-          onEditProduct: (e) => handleChange == null ? void 0 : handleChange(e, "edit_product"),
-          onCard: (e) => handleChange == null ? void 0 : handleChange(e, "view"),
-          onChangeResource: (e) => handleChange(item, "change_resource", e),
-          onChangeHolder: (e) => handleChange(item, "change_holder", e),
-          onAddHolder: (e) => handleChange(item, "add_holder", e),
-          ...productParams
-        }
-      );
-    }), !hideAddBtn && platform !== "h5" && isAdd ? (0, import_useAddService.default)(id, "more") : null);
-  }, [clearCart, lists, productParams, hideAddBtn, isAdd, platform]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__shopping-cart-content" }, clearCart, lists == null ? void 0 : lists.map((item) => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_materials.ProductCard,
+      {
+        key: item._id,
+        dataSource: item,
+        onAction: (e) => onAction == null ? void 0 : onAction(e),
+        onDelete: (e) => handleChange(e, "delete", item),
+        onNote: (e) => handleChange(e, "note", { note: e.note }),
+        onLike: (e) => handleChange(e, "like", { like_status: e.like_status }),
+        onEditProduct: (e) => handleChange == null ? void 0 : handleChange(e, "edit_product"),
+        onCard: (e) => handleChange == null ? void 0 : handleChange(e, "view"),
+        onChangeResource: (e) => handleChange(item, "change_resource", e),
+        onChangeHolder: (e) => handleChange(item, "change_holder", e),
+        onAddHolder: (e) => handleChange(item, "add_holder", e),
+        ...productParams
+      }
+    );
+  }), !hideAddBtn && platform !== "h5" && isAdd ? (0, import_useAddService.default)(id, "more") : null);
 };
 var Product_default = Product;

package/lib/components/shoppingCart/components/Cart/index.js

@@ -66,23 +66,20 @@ var Cart = () => {
       };
     });
   }, [carts, platform]);
-  return (0, import_react.useMemo)(() => {
-    console.log("render cart 22222");
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-lowcode__shopping-cart") }, isProductList ? /* @__PURE__ */ import_react.default.createElement(import_Product.default, { id: void 0, lists: state == null ? void 0 : state.products }) : /* @__PURE__ */ import_react.default.createElement(
-      import_materials.Collapse,
-      {
-        items: cartsMap,
-        showHeader: true,
-        panelBackground: "#ffffff",
-        collapsible: platform !== "shop" ? "disabled" : "-",
-        accordion: platform === "shop",
-        onChange: (key) => {
-          updateState({ activeKey: key });
-          onActiveKey(key);
-        },
-        ...collapseParams
-      }
-    ));
-  }, [isProductList, cartsMap, platform, collapseParams, state == null ? void 0 : state.products]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-lowcode__shopping-cart") }, isProductList ? /* @__PURE__ */ import_react.default.createElement(import_Product.default, { id: void 0, lists: state == null ? void 0 : state.products }) : /* @__PURE__ */ import_react.default.createElement(
+    import_materials.Collapse,
+    {
+      items: cartsMap,
+      showHeader: true,
+      panelBackground: "#ffffff",
+      collapsible: platform !== "shop" ? "disabled" : "-",
+      accordion: platform === "shop",
+      onChange: (key) => {
+        updateState({ activeKey: key });
+        onActiveKey(key);
+      },
+      ...collapseParams
+    }
+  ));
 };
 var Cart_default = Cart;

package/lib/components/shoppingCart/components/Empty/index.d.ts

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

package/lib/components/shoppingCart/components/Render/index.d.ts

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

package/lib/components/ticketBooking/components/addServiceVariant/addService.js

@@ -48,7 +48,7 @@ var import_utils6 = require("../../utils");
 var import_notAvailable = __toESM(require("../notAvailable"));
 var import_dayjs = __toESM(require("dayjs"));
 var AddSerivce = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const { onEdit, state, dispatch, renderMode = "current" } = props;
   const [loading, setLoading] = (0, import_react.useState)(true);
   const context = (0, import_useEngineContext.default)();
@@ -221,151 +221,10 @@ var AddSerivce = (props) => {
       const isEject = (0, import_utils2.getIsEject)(item, type);
       const isOnlySession = (0, import_utils2.getIsOnlySession)(item);
       let lock = false;
-      let cacheValues = null;
       if (isEject) {
         setCurrentProduct(item);
       } else {
         setCurrentProduct(null);
-        cacheValues = {
-          bundle: [],
-          key: item.id,
-          option: [],
-          product_id: item.id,
-          product_variant_id: 0,
-          quantity: 1,
-          rowKey: item.id,
-          session: null,
-          unique: "08974625397"
-        };
-      }
-      const callback = async (e, extension_type, detail) => {
-        var _a3, _b2, _c2, _d2, _e2, _f2, _g2;
-        setCurrentProduct(null);
-        if (lock) {
-          return;
-        }
-        lock = true;
-        setTimeout(() => {
-          lock = false;
-        }, 2e3);
-        if (!isBooking4) {
-          const data = await createBookingData({
-            product: { ...detail || item, _params: e }
-          });
-          createBooking({ booking: data });
-          return;
-        }
-        const _detail = detail || item;
-        const other = JSON.parse(JSON.stringify(e));
-        other.session = e.session;
-        let cacheItem = {
-          ..._detail,
-          product_id: item.id,
-          _id: (0, import_utils.getUniqueId)(),
-          _key: e.key,
-          _extend: {
-            start_date: state.date.value,
-            quantity: (e == null ? void 0 : e.quantity) || 1,
-            price: _detail.price,
-            product_name: item.title,
-            other
-          },
-          new: 1
-        };
-        let _total = (0, import_utils2.getProductTotalPrice)(cacheItem);
-        cacheItem._extend.total = _total;
-        cacheItem._extend.origin_total = _total;
-        const _isEdit = !!state.service.cacheItem;
-        if (_isEdit) {
-          cacheItem._id = (_a3 = state.service.cacheItem) == null ? void 0 : _a3._id;
-          cacheItem.new = 0;
-        }
-        if (renderMode === "current") {
-          cacheItem.currentDefaultTime = state.date.value.format("HH:mm");
-        }
-        cacheItem = (0, import_utils3.getProductExtend)({
-          cacheItem,
-          state,
-          isDisabledTime: true
-        });
-        if (state.renderType === "eventBooking") {
-          cacheItem.autoClose = false;
-        }
-        if (cacheItem.autoClose) {
-          cacheItem.autoClose = false;
-          cacheItem._serviceKey = (0, import_utils6.genServiceKey)(cacheItem);
-          let { list: _list, quantity } = (0, import_utils6.addService)(
-            [...state.service.value],
-            cacheItem,
-            state
-          );
-          (_b2 = Toast == null ? void 0 : Toast.success) == null ? void 0 : _b2.call(
-            Toast,
-            /* @__PURE__ */ import_react.default.createElement("div", { className: "add-toast-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "add-toast-title" }, cacheItem.title), /* @__PURE__ */ import_react.default.createElement("div", { className: "add-toast-quantity" }, import_utils.locales.getText("pisell2.ticket-booking.in-cart")(
-              quantity || 1
-            )))
-          );
-          (0, import_utils6.addServiceScroll)(e.rowKey, cacheItem);
-          try {
-            if (((_g2 = (_f2 = (_e2 = (_d2 = (_c2 = context.appHelper.utils.store) == null ? void 0 : _c2.getState) == null ? void 0 : _d2.call(_c2)) == null ? void 0 : _e2.global) == null ? void 0 : _f2.globalConfig) == null ? void 0 : _g2.id) === 2155) {
-              const val = _list == null ? void 0 : _list.map((s) => {
-                return {
-                  product_id: s == null ? void 0 : s.product_id,
-                  detailId: s == null ? void 0 : s.id,
-                  detailProductId: s == null ? void 0 : s.product_id,
-                  product_name: s == null ? void 0 : s.title,
-                  price: s == null ? void 0 : s.price,
-                  _id: s == null ? void 0 : s._id,
-                  _key: s == null ? void 0 : s._key,
-                  _serviceKey: s == null ? void 0 : s._serviceKey
-                };
-              });
-              const sendData = {
-                product_id: item == null ? void 0 : item.id,
-                detailId: _detail == null ? void 0 : _detail.id,
-                detailProductId: _detail == null ? void 0 : _detail.product_id,
-                product_name: item == null ? void 0 : item.title,
-                price: _detail == null ? void 0 : _detail.price,
-                serviceVal: val
-              };
-              (0, import_utils.sendWarningLog)({
-                title: "addService",
-                content: [
-                  { key: "添加数据", value: JSON.stringify(sendData) },
-                  {
-                    key: "日期",
-                    value: (0, import_dayjs.default)().format("YYYY-MM-DD HH:mm:ss")
-                  }
-                ]
-              });
-            }
-          } catch (error) {
-          }
-          dispatch({
-            type: "setService",
-            payload: {
-              addModal: false,
-              value: _list,
-              edit: true,
-              changeService: false
-            }
-          });
-        } else {
-          dispatch({
-            type: "setService",
-            payload: {
-              editModal: true,
-              cacheItem,
-              addModal: !cacheItem.autoClose,
-              changeService: false
-            }
-          });
-          onEdit == null ? void 0 : onEdit(cacheItem);
-        }
-      };
-      if (cacheValues) {
-        callback(cacheValues, "", item);
-        return;
       }
       state.action({
         type: "pisell1.handleOpenProductModal",
@@ -387,7 +246,131 @@ var AddSerivce = (props) => {
         onCancel: () => {
           setCurrentProduct(null);
         },
-        callback
+        callback: async (e, extension_type, detail) => {
+          var _a3, _b2, _c2, _d2, _e2, _f2, _g2;
+          setCurrentProduct(null);
+          if (lock) {
+            return;
+          }
+          lock = true;
+          setTimeout(() => {
+            lock = false;
+          }, 2e3);
+          if (!isBooking4) {
+            const data = await createBookingData({
+              product: { ...detail || item, _params: e }
+            });
+            createBooking({ booking: data });
+            return;
+          }
+          const _detail = detail || item;
+          const other = JSON.parse(JSON.stringify(e));
+          other.session = e.session;
+          let cacheItem = {
+            ..._detail,
+            product_id: item.id,
+            _id: (0, import_utils.getUniqueId)(),
+            _key: e.key,
+            _extend: {
+              start_date: state.date.value,
+              quantity: (e == null ? void 0 : e.quantity) || 1,
+              price: _detail.price,
+              product_name: item.title,
+              other
+            },
+            new: 1
+          };
+          let _total = (0, import_utils2.getProductTotalPrice)(cacheItem);
+          cacheItem._extend.total = _total;
+          cacheItem._extend.origin_total = _total;
+          const _isEdit = !!state.service.cacheItem;
+          if (_isEdit) {
+            cacheItem._id = (_a3 = state.service.cacheItem) == null ? void 0 : _a3._id;
+            cacheItem.new = 0;
+          }
+          if (renderMode === "current") {
+            cacheItem.currentDefaultTime = state.date.value.format("HH:mm");
+          }
+          cacheItem = (0, import_utils3.getProductExtend)({
+            cacheItem,
+            state,
+            isDisabledTime: true
+          });
+          if (state.renderType === "eventBooking") {
+            cacheItem.autoClose = false;
+          }
+          if (cacheItem.autoClose) {
+            cacheItem.autoClose = false;
+            cacheItem._serviceKey = (0, import_utils6.genServiceKey)(cacheItem);
+            let { list: _list, quantity } = (0, import_utils6.addService)(
+              [...state.service.value],
+              cacheItem,
+              state
+            );
+            (_b2 = Toast == null ? void 0 : Toast.success) == null ? void 0 : _b2.call(
+              Toast,
+              /* @__PURE__ */ import_react.default.createElement("div", { className: "add-toast-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "add-toast-title" }, cacheItem.title), /* @__PURE__ */ import_react.default.createElement("div", { className: "add-toast-quantity" }, import_utils.locales.getText("pisell2.ticket-booking.in-cart")(
+                quantity || 1
+              )))
+            );
+            (0, import_utils6.addServiceScroll)(e.rowKey, cacheItem);
+            try {
+              if (((_g2 = (_f2 = (_e2 = (_d2 = (_c2 = context.appHelper.utils.store) == null ? void 0 : _c2.getState) == null ? void 0 : _d2.call(_c2)) == null ? void 0 : _e2.global) == null ? void 0 : _f2.globalConfig) == null ? void 0 : _g2.id) === 2155) {
+                const val = _list == null ? void 0 : _list.map((s) => {
+                  return {
+                    product_id: s == null ? void 0 : s.product_id,
+                    detailId: s == null ? void 0 : s.id,
+                    detailProductId: s == null ? void 0 : s.product_id,
+                    product_name: s == null ? void 0 : s.title,
+                    price: s == null ? void 0 : s.price,
+                    _id: s == null ? void 0 : s._id,
+                    _key: s == null ? void 0 : s._key,
+                    _serviceKey: s == null ? void 0 : s._serviceKey
+                  };
+                });
+                const sendData = {
+                  product_id: item == null ? void 0 : item.id,
+                  detailId: _detail == null ? void 0 : _detail.id,
+                  detailProductId: _detail == null ? void 0 : _detail.product_id,
+                  product_name: item == null ? void 0 : item.title,
+                  price: _detail == null ? void 0 : _detail.price,
+                  serviceVal: val
+                };
+                (0, import_utils.sendWarningLog)({
+                  title: "addService",
+                  content: [
+                    { key: "添加数据", value: JSON.stringify(sendData) },
+                    {
+                      key: "日期",
+                      value: (0, import_dayjs.default)().format("YYYY-MM-DD HH:mm:ss")
+                    }
+                  ]
+                });
+              }
+            } catch (error) {
+            }
+            dispatch({
+              type: "setService",
+              payload: {
+                addModal: false,
+                value: _list,
+                edit: true,
+                changeService: false
+              }
+            });
+          } else {
+            dispatch({
+              type: "setService",
+              payload: {
+                editModal: true,
+                cacheItem,
+                addModal: !cacheItem.autoClose,
+                changeService: false
+              }
+            });
+            onEdit == null ? void 0 : onEdit(cacheItem);
+          }
+        }
       });
     }
   );
@@ -445,6 +428,7 @@ var AddSerivce = (props) => {
     }
     return null;
   }, [
+    (_n = (_m = state.service) == null ? void 0 : _m.cacheItem) == null ? void 0 : _n.autoClose,
     state.service.addModal,
     import_utils.locales,
     renderList,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface AddServiceVariantProps {
     globalState: any;
     setGlobalState: any;