@pisell/private-materials 6.2.25 → 6.2.27

package/es/components/booking/info2/utilsByBooking.js

@@ -11,6 +11,7 @@ import dayjs from 'dayjs';
 import { locales } from "@pisell/utils";
 import { getCacheParams, getServeStartTime, getLastServer, flexibleObj, getServiceTimes, findNextDuration, getDays, isSessionProduct } from "../utils";
 import { isNormalProductByDurationSchedule } from "../info/service2/utils";
+import { isOption } from "../../ticketBooking/components/addServiceVariant/utils";
 
 // 获取当前剩余量
 var getUseableEventCount = function getUseableEventCount(eventList, current) {
@@ -421,5 +422,5 @@ export var getIsNoSpecAndPackage = function getIsNoSpecAndPackage(product) {
     var _product$product_bund, _product$product_sku;
     return (product === null || product === void 0 || (_product$product_bund = product.product_bundle) === null || _product$product_bund === void 0 ? void 0 : _product$product_bund.length) === 0 && (product === null || product === void 0 ? void 0 : product.product_variant_id) === 0 && ((product === null || product === void 0 || (_product$product_sku = product.product_sku) === null || _product$product_sku === void 0 || (_product$product_sku = _product$product_sku.option) === null || _product$product_sku === void 0 ? void 0 : _product$product_sku.length) || 0) === 0;
   }
-  return (product === null || product === void 0 ? void 0 : product.is_bundle) === 0 && ((product === null || product === void 0 || (_product$variant = product.variant) === null || _product$variant === void 0 ? void 0 : _product$variant.length) || 0) === 0 && ((product === null || product === void 0 ? void 0 : product.option_group_count) || 0) === 0;
+  return (product === null || product === void 0 ? void 0 : product.is_bundle) === 0 && ((product === null || product === void 0 || (_product$variant = product.variant) === null || _product$variant === void 0 ? void 0 : _product$variant.length) || 0) === 0 && !isOption(product);
 };

package/es/components/booking/materiels/duration/index.js

@@ -20,6 +20,9 @@ var Duration = function Duration(props) {
     startDate = props.startDate,
     timeObj = props.timeObj,
     resetProps = _objectWithoutProperties(props, _excluded);
+  var startDateStr = useMemo(function () {
+    return dayjs(startDate).format('YYYY-MM-DD HH:mm:ss');
+  }, [startDate]);
 
   /**
    * @title: 时间切片
@@ -57,7 +60,7 @@ var Duration = function Duration(props) {
       });
     }
     return durationSlicesBasedOnTime;
-  }, [timeObj, slice, locale, duration, startDate, usableTime]);
+  }, [timeObj.durationSlicesBasedOnTime, slice, locale, duration, startDateStr, usableTime === null || usableTime === void 0 ? void 0 : usableTime.end_at]);
   useEffect(function () {
     timeObjChange === null || timeObjChange === void 0 || timeObjChange(times);
   }, [times]);
@@ -72,6 +75,10 @@ var Duration = function Duration(props) {
       }, d[label]);
     });
   }, []);
-  return /*#__PURE__*/React.createElement(Select, _extends({}, selectProps, resetProps), renderOptions(times));
+  var options = useMemo(function () {
+    console.log('render form options');
+    return renderOptions(times);
+  }, [times]);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, selectProps, resetProps), options);
 };
 export default Duration;

package/es/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/es/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/es/components/booking/utils.d.ts

@@ -165,10 +165,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/es/components/eftpos/deviceList/index.d.ts

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

package/es/components/eftpos/form/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @title: 递归循环表单数据
  * @Author: hongbing.wang

package/es/components/eftpos/group/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RadioGroupProps } from 'antd';
 export declare const CheckboxGroup: ({ direction, options, ...props }: any) => JSX.Element;
 export declare const RadioGroup: ({ direction, options, ...props }: RadioGroupProps & {

package/es/components/eftpos/hooks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Eftpos } from './const';
 /**
  * @title: tyro 设备连接

package/es/components/eftpos/icon/apiKey.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: ({ color }: {
     color?: string | undefined;
 }) => JSX.Element;

package/es/components/eftpos/icon/device.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: ({ color }: {
     color?: string | undefined;
 }) => JSX.Element;

package/es/components/eftpos/receipt/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @title: 自定义组件设置
  * @description: 自定义组件设置

package/es/components/eftpos/surcharge/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.css';
 /**
  * @title: 自定义组件设置

package/es/components/eftposPay/amount.d.ts

@@ -8,7 +8,7 @@ import { PosProps } from './const';
  */
 declare const _default: ({ className, onChange, onClose, formatAmount, isMobile, net, client }: {
     className?: string | undefined;
-    onChange?: ((status: "page" | "success" | "print" | "fail" | "mark_tx_processed", params?: string | {
+    onChange?: ((status: "success" | "page" | "fail" | "print" | "mark_tx_processed", params?: string | {
         [keys: string]: unknown;
     } | undefined, other?: any) => void) | undefined;
     onClose: () => void;

package/es/components/eftposPay/app.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PosProps, RouteType } from './const';
 declare const App: ({ action, api, device_number, terminal, tyroUrl, tyroVersion, onChangeParams, isMobile, channel, formatAmount, ...props }: Omit<PosProps, "type" | "mode" | "getApi"> & {
     action: RouteType;

package/es/components/eftposPay/component/alert/warn.d.ts

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

package/es/components/eftposPay/component/header/titlebar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './titlebar.less';
 declare enum EPopupTitleBarVariantType {
     BackTitleClose = "back-title-cancel",

package/es/components/eftposPay/component/step/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StatusType } from '../../const';
 declare const _default: (props: {
     status: StatusType;

package/es/components/eftposPay/component/step/step.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: (props: {
     status: string;
     pedding?: string;

package/es/components/eftposPay/device.d.ts

@@ -10,7 +10,7 @@ import './device.less';
 declare const _default: ({ api, onChange, onClose, className, device_number, isMobile, net, client, formatAmount, }: {
     api: PayProps['api'];
     className?: string | undefined;
-    onChange?: ((status: "page" | "success" | "print" | "fail" | "mark_tx_processed", params?: string | {
+    onChange?: ((status: "success" | "page" | "fail" | "print" | "mark_tx_processed", params?: string | {
         [keys: string]: unknown;
     } | undefined, other?: any) => void) | undefined;
     onClose: () => void;

package/es/components/eftposPay/hooks.d.ts

@@ -15,11 +15,11 @@ export declare const useStoreRef: <T extends {
     readonly numRef: React.MutableRefObject<string | number | undefined>;
     readonly orderIdRef: React.MutableRefObject<string | number>;
     readonly modeRef: React.MutableRefObject<ModeEnum>;
-    readonly statusRef: React.MutableRefObject<"loading" | "success" | "warn" | "fail" | "pedding" | "resove" | "reject" | "question">;
+    readonly statusRef: React.MutableRefObject<"success" | "warn" | "loading" | "fail" | "pedding" | "resove" | "reject" | "question">;
     readonly netRef: React.MutableRefObject<boolean | undefined>;
     readonly symbolRef: React.MutableRefObject<string>;
     readonly amountRef: React.MutableRefObject<string | number>;
-    readonly eftposRef: React.MutableRefObject<"stripe" | "payo" | "tyro" | "windcave" | "linkly">;
+    readonly eftposRef: React.MutableRefObject<"payo" | "tyro" | "windcave" | "stripe" | "linkly">;
     readonly clientRef: React.MutableRefObject<ClientEnum>;
     readonly dataRef: React.MutableRefObject<import("./store").State>;
 };

package/es/components/eftposPay/store/index.d.ts

@@ -174,7 +174,7 @@ export declare const updateCustom: (payload: {
 export declare const updateStatus: (status: 'loading' | 'warn' | 'fail' | 'success' | 'question') => {
     type: EActionTypes;
     payload: {
-        status: "loading" | "success" | "warn" | "fail" | "question";
+        status: "success" | "warn" | "loading" | "fail" | "question";
     };
 };
 /**
@@ -295,10 +295,10 @@ export declare const backUpFree: (payload: Partial<State>) => {
         name?: string | undefined;
         symbol?: string | undefined;
         amount?: string | number | undefined;
-        mode?: "refund" | "pay" | "fullPay" | "query" | undefined;
+        mode?: "query" | "pay" | "fullPay" | "refund" | undefined;
         order_id?: string | number | undefined;
-        eftpos?: "stripe" | "payo" | "tyro" | "windcave" | "linkly" | undefined;
-        action?: "amount" | "pay" | "deviceList" | undefined;
+        eftpos?: "payo" | "tyro" | "windcave" | "stripe" | "linkly" | undefined;
+        action?: "amount" | "deviceList" | "pay" | undefined;
         key?: number | undefined;
         step?: number | undefined;
         title?: string | undefined;
@@ -308,7 +308,7 @@ export declare const backUpFree: (payload: Partial<State>) => {
         net?: boolean | undefined;
         component?: string | undefined;
         form?: string | undefined;
-        status?: "loading" | "success" | "warn" | "fail" | "pedding" | "resove" | "reject" | "question" | undefined;
+        status?: "success" | "warn" | "loading" | "fail" | "pedding" | "resove" | "reject" | "question" | undefined;
         warn?: string | undefined;
         steps?: {
             /** 用于重置当前步骤 */

package/es/components/eftposPay/tyro/hooks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @title: 获取 Tyro 资源
  * @description:

package/es/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/CalenDateStatus/index.d.ts

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

package/es/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/Item/DayItem/index.d.ts

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

package/es/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/Item/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 import { CalendarItemProps } from '../../../../../type';
 declare const Item: (props: CalendarItemProps) => JSX.Element;

package/es/components/eventBooking/components/bookingAvailabilityCalendar/components/CalendarDate/Status/index.d.ts

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

package/es/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/es/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/es/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/es/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/es/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/es/components/productExtension/fields/Forms/index.d.ts

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

package/es/components/schedules/calendar/calendarItem.d.ts

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

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

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

package/es/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/es/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/es/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/es/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/es/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/es/components/shoppingCart/components/Cart/Product.js

@@ -1,11 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useMemo } from 'react';
-import { ProductCard } from '@pisell/materials';
-// import ProductCard from '../../../../../../materials/src/components/productCard';
+// import { ProductCard } from '@pisell/materials';
+import ProductCard from "../../../../../../materials/src/components/productCard";
 import useClearCart from "../../hooks/useClearCart";
 import { useContext } from "../../hooks/useContext";
 import useAddService from "../../hooks/useAddService";
 import { isNormalProductByDurationSchedule } from "../../../booking/info/service2/utils";
+import PisellNumberSelector from "../../../../pro/pisellNumberSelector";
+import { useMemoizedFn } from "ahooks";
 var Product = function Product(props) {
   var id = props.id,
     lists = props.lists,
@@ -38,10 +40,10 @@ var Product = function Product(props) {
    * @Author: WangHan
    * @Date: 2024-11-28 22:02
    */
-  var handleChange = function handleChange(item, type, other) {
+  var handleChange = useMemoizedFn(function (item, type, other) {
     if (disabledEdit && !(other !== null && other !== void 0 && other.disabled)) return;
     onChange(item, type, other);
-  };
+  });
   var productParams = useMemo(function () {
     return {
       isShowNote: isShowNote,
@@ -55,58 +57,82 @@ var Product = function Product(props) {
       isShowEditProduct: isShowEditProduct
     };
   }, [isShowNote, isShowPackageNote, disabledEdit, isShowChangeResource, isShowDelete, isShowHolder, isShowAddHolderButton, isShowChangeHolder, isShowEditProduct]);
-  var getProductCardStyleProps = function getProductCardStyleProps(type) {
+  var getProductCardStyleProps = useMemoizedFn(function (type) {
     var conf = productCardStyleConfig["".concat(type, "_product_card_style")];
     return {
       isShowImage: conf === null || conf === void 0 ? void 0 : conf.show_product_image,
       isShowDelete: conf === null || conf === void 0 ? void 0 : conf.show_remove_button
     };
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "pisell-lowcode__shopping-cart-content"
-  }, clearCart, lists === null || lists === void 0 ? void 0 : lists.map(function (item) {
-    var Comp = ProductCard;
-    var isRetail;
-    if (state.scenario === 'booking2') {
-      isRetail = isNormalProductByDurationSchedule(item === null || item === void 0 ? void 0 : item._origin);
-      Comp = isRetail ? ProductCard.V2 : ProductCard;
-    }
-    return /*#__PURE__*/React.createElement(Comp, _extends({
-      type: isRetail ? 'a2' : undefined,
-      key: item._id,
-      dataSource: item,
-      onAction: function onAction(e) {
-        return _onAction === null || _onAction === void 0 ? void 0 : _onAction(e);
-      },
-      onDelete: function onDelete(e) {
-        return handleChange(e, 'delete', item);
-      },
-      onNote: function onNote(e) {
-        return handleChange(e, 'note', {
-          note: e.note
-        });
-      },
-      onLike: function onLike(e) {
-        return handleChange(e, 'like', {
-          like_status: e.like_status
-        });
-      },
-      onEditProduct: function onEditProduct(e) {
-        return handleChange === null || handleChange === void 0 ? void 0 : handleChange(e, 'edit_product');
-      },
-      onCard: function onCard(e) {
-        return handleChange === null || handleChange === void 0 ? void 0 : handleChange(e, 'view');
-      },
-      onChangeResource: function onChangeResource(e) {
-        return handleChange(item, 'change_resource', e);
-      },
-      onChangeHolder: function onChangeHolder(e) {
-        return handleChange(item, 'change_holder', e);
-      },
-      onAddHolder: function onAddHolder(e) {
-        return handleChange(item, 'add_holder', e);
+  });
+  return useMemo(function () {
+    console.log('render cart');
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode__shopping-cart-content"
+    }, clearCart, lists === null || lists === void 0 ? void 0 : lists.map(function (item) {
+      var Comp = ProductCard;
+      var isRetail;
+      if (state.scenario === 'booking2') {
+        isRetail = isNormalProductByDurationSchedule(item === null || item === void 0 ? void 0 : item._origin);
+        Comp = isRetail ? ProductCard.V2 : ProductCard;
       }
-    }, productParams, getProductCardStyleProps(isRetail ? 'retail' : 'appointment')));
-  }), !hideAddBtn && platform !== 'h5' && isAdd ? useAddService(id, 'more') : null);
+      return /*#__PURE__*/React.createElement(Comp, _extends({
+        type: isRetail ? 'a2' : undefined,
+        rightActions: [{
+          key: 'update_number',
+          text: /*#__PURE__*/React.createElement(PisellNumberSelector, {
+            enablePriceAdjust: true,
+            min: 1,
+            className: "pisell-sku-card__pisell-number-setter",
+            value: item === null || item === void 0 ? void 0 : item.num,
+            onChange: function onChange(value) {
+              if (value < 1) {
+                handleChange(item, 'num', {
+                  num: 1
+                });
+              } else {
+                handleChange(item, 'num', {
+                  num: value
+                });
+              }
+            }
+          }),
+          color: '#667085'
+        }],
+        key: item._id,
+        dataSource: item,
+        onAction: function onAction(e) {
+          return _onAction === null || _onAction === void 0 ? void 0 : _onAction(e);
+        },
+        onDelete: function onDelete(e) {
+          return handleChange(e, 'delete', item);
+        },
+        onNote: function onNote(e) {
+          return handleChange(e, 'note', {
+            note: e.note
+          });
+        },
+        onLike: function onLike(e) {
+          return handleChange(e, 'like', {
+            like_status: e.like_status
+          });
+        },
+        onEditProduct: function onEditProduct(e) {
+          return handleChange === null || handleChange === void 0 ? void 0 : handleChange(e, 'edit_product');
+        },
+        onCard: function onCard(e) {
+          return handleChange === null || handleChange === void 0 ? void 0 : handleChange(e, 'view');
+        },
+        onChangeResource: function onChangeResource(e) {
+          return handleChange(item, 'change_resource', e);
+        },
+        onChangeHolder: function onChangeHolder(e) {
+          return handleChange(item, 'change_holder', e);
+        },
+        onAddHolder: function onAddHolder(e) {
+          return handleChange(item, 'add_holder', e);
+        }
+      }, productParams, getProductCardStyleProps(isRetail ? 'retail' : 'appointment')));
+    }), !hideAddBtn && platform !== 'h5' && isAdd ? useAddService(id, 'more') : null);
+  }, [clearCart, lists, productParams, hideAddBtn, isAdd, platform]);
 };
 export default Product;

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

@@ -51,23 +51,26 @@ var Cart = function Cart() {
       });
     });
   }, [carts, platform]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('pisell-lowcode__shopping-cart')
-  }, isProductList ? /*#__PURE__*/React.createElement(Product, {
-    id: undefined,
-    lists: state === null || state === void 0 ? void 0 : state.products
-  }) : /*#__PURE__*/React.createElement(Collapse, _extends({
-    items: cartsMap,
-    showHeader: true,
-    panelBackground: "#ffffff",
-    collapsible: platform !== 'shop' ? 'disabled' : '-',
-    accordion: platform === 'shop',
-    onChange: function onChange(key) {
-      updateState({
-        activeKey: key
-      });
-      onActiveKey(key);
-    }
-  }, collapseParams)));
+  return useMemo(function () {
+    console.log('render cart 22222');
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('pisell-lowcode__shopping-cart')
+    }, isProductList ? /*#__PURE__*/React.createElement(Product, {
+      id: undefined,
+      lists: state === null || state === void 0 ? void 0 : state.products
+    }) : /*#__PURE__*/React.createElement(Collapse, _extends({
+      items: cartsMap,
+      showHeader: true,
+      panelBackground: "#ffffff",
+      collapsible: platform !== 'shop' ? 'disabled' : '-',
+      accordion: platform === 'shop',
+      onChange: function onChange(key) {
+        updateState({
+          activeKey: key
+        });
+        onActiveKey(key);
+      }
+    }, collapseParams)));
+  }, [isProductList, cartsMap, platform, collapseParams, state === null || state === void 0 ? void 0 : state.products]);
 };
 export default Cart;

package/es/components/shoppingCart/components/Cart/index.less

@@ -66,3 +66,17 @@
   //  align-items: start;
   //}
 }
+
+.pisell-sku-card__pisell-number-setter {
+  width: 110px;
+
+  .pisell-number-selector-btn {
+    flex-shrink: 0;
+  }
+
+  .pisell-number-selector-number {
+    min-width: unset !important;
+    padding: 0 !important;
+    flex: 1;
+  }
+}