@pisell/private-materials 3.0.126 → 3.0.128-gray

package/es/components/booking/info/service/addTimeModal/index.js

@@ -13,18 +13,18 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useContext, useEffect, useMemo, useState, useRef } from "react";
+import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
 import Drawer from "../../../components/drawer";
 import { Context } from "../../model";
-import { Button, Skeleton, message, Alert } from "antd";
+import { Button, Skeleton, message, Alert } from 'antd';
 import "./index.less";
-import { locales, formatAmount, createArray, formatDate } from "@pisell/utils";
-import { useUpdateEffect, useDebounceFn } from "ahooks";
+import { locales, formatAmount, createArray, formatDate } from '@pisell/utils';
+import { useUpdateEffect, useDebounceFn, useMemoizedFn } from 'ahooks';
 import Footer from "../../../components/footer";
 import { saveAddTimeProduct, getAddTimeProducts } from "./serve";
 import { getAddTimeSplits, isUsableProduct, addTimeRowKey } from "./utils";
-import classNames from "classnames";
-import dayjs from "dayjs";
+import classNames from 'classnames';
+import dayjs from 'dayjs';
 import BrowserSelect from "../../../components/browserSelect";
 import { isNowTime, getNowTime, getDiscountTime, getResourceTimeIsUsable, flexibleObj, isWalkIn } from "../../../utils";
 import useEngineContext from "../../../../../hooks/useEngineContext";
@@ -38,7 +38,7 @@ var numberList = createArray(100, function (d, i) {
   return item;
 });
 var AddTimeModal = function AddTimeModal() {
-  var _context$appHelper, _state$bookingConfig2, _state$bookingConfig3, _currentTimeItem$stat, _currentProduct$add_t;
+  var _context$appHelper, _state$bookingConfig2, _state$bookingConfig3, _currentTimeItem$stat2, _currentProduct$add_t2;
   var _useContext = useContext(Context),
     state = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -46,12 +46,12 @@ var AddTimeModal = function AddTimeModal() {
     _useState2 = _slicedToArray(_useState, 2),
     isEdit = _useState2[0],
     setIsEdit = _useState2[1];
-  var _useState3 = useState(""),
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
     loading = _useState4[0],
     setLoading = _useState4[1];
   // id_time
-  var _useState5 = useState(""),
+  var _useState5 = useState(''),
     _useState6 = _slicedToArray(_useState5, 2),
     recordKey = _useState6[0],
     setRecordKey = _useState6[1];
@@ -69,16 +69,16 @@ var AddTimeModal = function AddTimeModal() {
     interaction = _context$appHelper$ut.interaction;
   var statusMap = {
     available: {
-      label: locales.getText("page.booking.text.available"),
-      color: "#079455"
+      label: locales.getText('page.booking.text.available'),
+      color: '#079455'
     },
     fully_booked: {
-      label: locales.getText("page.booking.text.fully-booked"),
-      color: "#DC6803"
+      label: locales.getText('page.booking.text.fully-booked'),
+      color: '#DC6803'
     },
     unavailable: {
-      label: locales.getText("page.booking.text.unavailable"),
-      color: "#98A2B3"
+      label: locales.getText('page.booking.text.unavailable'),
+      color: '#98A2B3'
     }
   };
 
@@ -93,7 +93,7 @@ var AddTimeModal = function AddTimeModal() {
   var transaction_habit_selection = useMemo(function () {
     var _state$bookingConfig, _state$bookingConfig$, _state$bookingConfig$2;
     return (state === null || state === void 0 ? void 0 : (_state$bookingConfig = state.bookingConfig) === null || _state$bookingConfig === void 0 ? void 0 : (_state$bookingConfig$ = _state$bookingConfig.config) === null || _state$bookingConfig$ === void 0 ? void 0 : (_state$bookingConfig$2 = _state$bookingConfig$.information_tab) === null || _state$bookingConfig$2 === void 0 ? void 0 : _state$bookingConfig$2.transaction_habit_selection) || {
-      type: "service_now_pay_later",
+      type: 'service_now_pay_later',
       button_rows: 1
     };
   }, [state === null || state === void 0 ? void 0 : (_state$bookingConfig2 = state.bookingConfig) === null || _state$bookingConfig2 === void 0 ? void 0 : (_state$bookingConfig3 = _state$bookingConfig2.config) === null || _state$bookingConfig3 === void 0 ? void 0 : _state$bookingConfig3.information_tab]);
@@ -105,7 +105,7 @@ var AddTimeModal = function AddTimeModal() {
 
   // 当前time
   var currentTime = useMemo(function () {
-    var _time = addTimeRowKey.getValue(recordKey).time || "";
+    var _time = addTimeRowKey.getValue(recordKey).time || '';
     return _time;
   }, [recordKey]);
 
@@ -138,17 +138,17 @@ var AddTimeModal = function AddTimeModal() {
     try {
       var _state$service$cacheI3;
       if (!currentResource || !((_state$service$cacheI3 = state.service.cacheItem) !== null && _state$service$cacheI3 !== void 0 && _state$service$cacheI3._extend)) {
-        return "";
+        return '';
       }
       var timeItem = currentResource === null || currentResource === void 0 ? void 0 : currentResource.times.find(function (_time) {
         return _time.item_id === state.service.cacheItem._extend.relation_id;
       });
-      var timeEndDate = dayjs(timeItem.end_date + " " + timeItem.end_time).add(1, "second");
+      var timeEndDate = dayjs(timeItem.end_date + ' ' + timeItem.end_time).add(1, 'second');
       return timeEndDate;
     } catch (err) {
-      console.log("err", err);
+      console.log('err', err);
     }
-    return "";
+    return '';
   }, [state.service.cacheItem, currentResource]);
   var getTimeUsableStatus = function getTimeUsableStatus(time) {
     var _state$service$cacheI4;
@@ -163,11 +163,11 @@ var AddTimeModal = function AddTimeModal() {
       var _extend = _objectSpread({}, state.service.cacheItem._extend);
 
       // 结束时间加上加时
-      _extend.endDate = _extend.endDate.add(time, "minutes");
+      _extend.endDate = _extend.endDate.add(time, 'minutes');
       _extend.start_date = _extend.startDate;
       _extend.end_date = _extend.endDate;
-      _extend.end_time = _extend.endDate.format("HH:mm");
-      _extend.start_time = _extend.startDate.format("HH:mm");
+      _extend.end_time = _extend.endDate.format('HH:mm');
+      _extend.start_time = _extend.startDate.format('HH:mm');
 
       // 时长加上加时
       _extend.duration = flexibleObj.add(_extend.duration, time);
@@ -177,10 +177,10 @@ var AddTimeModal = function AddTimeModal() {
       }
 
       // 如果跨天  结束时间前面加一个明天
-      var startText = _extend.startDate.format("hh:mm A");
-      var endText = _extend.endDate.format("hh:mm A");
-      if (_extend.endDate.isAfter(_extend.startDate, "day")) {
-        endText = locales.getText("pisell1.text.tomorrow") + endText;
+      var startText = _extend.startDate.format('hh:mm A');
+      var endText = _extend.endDate.format('hh:mm A');
+      if (_extend.endDate.isAfter(_extend.startDate, 'day')) {
+        endText = locales.getText('pisell1.text.tomorrow') + endText;
       }
       var timeItem = currentResource === null || currentResource === void 0 ? void 0 : currentResource.times.find(function (_time) {
         return _time.item_id === _extend.relation_id;
@@ -192,7 +192,7 @@ var AddTimeModal = function AddTimeModal() {
         return {
           // maxEndTime:
           status: statusMap.unavailable,
-          message: "".concat(currentResource.room_name || currentResource.name, " ").concat(locales.getText("pisell2.text.status.service-error-2"))
+          message: "".concat(currentResource.room_name || currentResource.name, " ").concat(locales.getText('pisell2.text.status.service-error-2'))
         };
       }
     } catch (err) {}
@@ -252,9 +252,9 @@ var AddTimeModal = function AddTimeModal() {
               skip: 1,
               num: 500,
               open_quotation: 1,
-              schedule_date: state.date.value.format("YYYY-MM-DD"),
+              schedule_date: state.date.value.format('YYYY-MM-DD'),
               customer_id: isWalkIn((_state$client = state.client) === null || _state$client === void 0 ? void 0 : (_state$client$value = _state$client.value) === null || _state$client$value === void 0 ? void 0 : _state$client$value.id) ? undefined : (_state$client2 = state.client) === null || _state$client2 === void 0 ? void 0 : (_state$client2$value = _state$client2.value) === null || _state$client2$value === void 0 ? void 0 : _state$client2$value.id,
-              extension_type: ["product_add_time"]
+              extension_type: ['product_add_time']
             }, {
               useCache: true
             });
@@ -279,7 +279,7 @@ var AddTimeModal = function AddTimeModal() {
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            setLoading("list");
+            setLoading('list');
             _context2.next = 3;
             return _getAddTimeProducts();
           case 3:
@@ -305,7 +305,7 @@ var AddTimeModal = function AddTimeModal() {
             if (list.length) {
               setDefaultProduct(list);
             }
-            setLoading("");
+            setLoading('');
             setIsEdit(true);
           case 9:
           case "end":
@@ -338,11 +338,11 @@ var AddTimeModal = function AddTimeModal() {
   }, [state.service.addTimeModal]);
 
   // 选择
-  var onSelectItem = function onSelectItem(pItem, item) {
+  var onSelectItem = useMemoizedFn(function (pItem, item) {
     setRecordKey(addTimeRowKey.create(pItem.id, item.value));
     setIsEdit(true);
     updateServices.run();
-  };
+  });
 
   // 临时模拟出的新服务
   var newService = useMemo(function () {
@@ -357,10 +357,10 @@ var AddTimeModal = function AddTimeModal() {
       price: currentTimeItem.price || 0,
       product_id: currentProduct.id,
       discount_amount: 0,
-      product_discount_reason: "",
+      product_discount_reason: '',
       is_charge_tax: currentProduct.is_charge_tax,
-      discountway: "num",
-      discount_type: "discount"
+      discountway: 'num',
+      discount_type: 'discount'
     };
 
     // 当前子预约
@@ -368,11 +368,11 @@ var AddTimeModal = function AddTimeModal() {
     var relation_products = [relation_product];
 
     // 结束时间加上加时
-    _extend.endDate = _extend.endDate.add(relation_product.product_add_schedule_time, "minutes");
-    var start_date = _extend.startDate.format("YYYY-MM-DD");
-    var end_date = _extend.endDate.format("YYYY-MM-DD");
-    var end_time = _extend.endDate.format("HH:mm");
-    var start_time = _extend.startDate.format("HH:mm");
+    _extend.endDate = _extend.endDate.add(relation_product.product_add_schedule_time, 'minutes');
+    var start_date = _extend.startDate.format('YYYY-MM-DD');
+    var end_date = _extend.endDate.format('YYYY-MM-DD');
+    var end_time = _extend.endDate.format('HH:mm');
+    var start_time = _extend.startDate.format('HH:mm');
 
     // 时长加上加时
     var duration = flexibleObj.add(_extend.duration, relation_product.product_add_schedule_time);
@@ -413,14 +413,14 @@ var AddTimeModal = function AddTimeModal() {
     var _edit = (_originServices$curre2 = originServices.current) === null || _originServices$curre2 === void 0 ? void 0 : _originServices$curre2.edit;
     originServices.current = null;
     dispatch({
-      type: "setService",
+      type: 'setService',
       payload: {
         value: _val,
         edit: _edit
       }
     });
   };
-  var createNewServices = function createNewServices() {
+  var createNewServices = useMemoizedFn(function () {
     var _state$service2;
     var _list = ((_state$service2 = state.service) === null || _state$service2 === void 0 ? void 0 : _state$service2.value) || [];
     if (!originServices.current) {
@@ -437,7 +437,7 @@ var AddTimeModal = function AddTimeModal() {
         return _item;
       });
       dispatch({
-        type: "setService",
+        type: 'setService',
         payload: {
           value: _list,
           edit: true
@@ -446,7 +446,7 @@ var AddTimeModal = function AddTimeModal() {
     } else {
       resetService();
     }
-  };
+  });
   var goCheckout = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
       var _interaction$utils, _interaction$utils$po;
@@ -458,15 +458,15 @@ var AddTimeModal = function AddTimeModal() {
               break;
             }
             return _context3.abrupt("return", interaction === null || interaction === void 0 ? void 0 : (_interaction$utils = interaction.utils) === null || _interaction$utils === void 0 ? void 0 : (_interaction$utils$po = _interaction$utils.postMessageToApp) === null || _interaction$utils$po === void 0 ? void 0 : _interaction$utils$po.call(_interaction$utils, {
-              module: "booking",
-              key: "booking_checkout",
+              module: 'booking',
+              key: 'booking_checkout',
               data: {
                 order_id: state.bookingId
               }
             }));
           case 2:
             state.action({
-              type: "pisell1.handlePayment",
+              type: 'pisell1.handlePayment',
               data: {
                 orderId: state.bookingId
               },
@@ -484,214 +484,207 @@ var AddTimeModal = function AddTimeModal() {
       return _ref3.apply(this, arguments);
     };
   }();
-  var handleCheckout = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            if (!isEdit) {
-              _context4.next = 3;
-              break;
-            }
+  var handleCheckout = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          if (!isEdit) {
             _context4.next = 3;
-            return handleSave("checkout");
-          case 3:
-            goCheckout();
-          case 4:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4);
-    }));
-    return function handleCheckout() {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  var handleSave = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-      var loadingType,
-        _args5 = arguments;
-      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            loadingType = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : "save";
-            if (!(currentTime === null)) {
-              _context5.next = 3;
-              break;
-            }
-            return _context5.abrupt("return");
-          case 3:
-            setLoading(loadingType);
+            break;
+          }
+          _context4.next = 3;
+          return handleSave('checkout');
+        case 3:
+          goCheckout();
+        case 4:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  var handleSave = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+    var loadingType,
+      _args5 = arguments;
+    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          loadingType = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : 'save';
+          if (!(currentTime === null)) {
+            _context5.next = 3;
+            break;
+          }
+          return _context5.abrupt("return");
+        case 3:
+          setLoading(loadingType);
 
-            // save
-            _context5.next = 6;
-            return saveAddTimeProduct({
-              orderId: state.bookingId,
-              params: _objectSpread(_objectSpread({}, newService), {}, {
-                _extend: undefined
-              })
-            });
-          case 6:
-            // 更新外部预约列表
-            setLoading("");
-            message.success(locales.getText("page.booking.text.add-time-success"));
+          // save
+          _context5.next = 6;
+          return saveAddTimeProduct({
+            orderId: state.bookingId,
+            params: _objectSpread(_objectSpread({}, newService), {}, {
+              _extend: undefined
+            })
+          });
+        case 6:
+          // 更新外部预约列表
+          setLoading('');
+          message.success(locales.getText('page.booking.text.add-time-success'));
 
-            // close
-            onCancel();
-            if (!(loadingType === "checkout")) {
-              _context5.next = 11;
-              break;
-            }
-            return _context5.abrupt("return");
-          case 11:
-            // 回调关闭弹窗
-            state === null || state === void 0 ? void 0 : state.action("init");
-          case 12:
-          case "end":
-            return _context5.stop();
-        }
-      }, _callee5);
-    }));
-    return function handleSave() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
+          // close
+          onCancel();
+          if (!(loadingType === 'checkout')) {
+            _context5.next = 11;
+            break;
+          }
+          return _context5.abrupt("return");
+        case 11:
+          // 回调关闭弹窗
+          state === null || state === void 0 ? void 0 : state.action('init');
+        case 12:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
   useEffect(function () {
     if (!state.modalOpen) {
       onCancel();
     }
   }, [state.modalOpen]);
-  var onCancel = function onCancel() {
+  var onCancel = useMemoizedFn(function () {
     setIsEdit(false);
-    setRecordKey("");
+    setRecordKey('');
     resetService();
     setTimeout(function () {
       dispatch({
-        type: "setService",
+        type: 'setService',
         payload: {
           addTimeModal: false
         }
       });
     }, 50);
-  };
+  });
   var updateTime = useMemo(function () {
     if (!newService) {
-      return "";
+      return '';
     }
     var startTime = newService.start_time;
     var endTime = newService.end_time;
     var hours = getDiscountTime(flexibleObj.getValue(newService.duration));
     if (newService.start_date !== newService.end_date) {
       var locale = state.locale;
-      var format = locale === "en" || locale === "en-US" ? "HH:mm DD/MM" : "MM-DD HH:mm";
+      var format = locale === 'en' || locale === 'en-US' ? 'HH:mm DD/MM' : 'MM-DD HH:mm';
       startTime = formatDate("".concat(newService.start_date, " ").concat(newService.start_time), format);
       endTime = formatDate("".concat(newService.end_date, " ").concat(newService.end_time), format);
     }
-    return "".concat(locales.getText("page.booking.text.update-time"), ": ").concat(startTime, " ~ ").concat(endTime, " (").concat(hours, ")");
+    return "".concat(locales.getText('page.booking.text.update-time'), ": ").concat(startTime, " ~ ").concat(endTime, " (").concat(hours, ")");
   }, [newService, state.locale]);
-  return /*#__PURE__*/React.createElement(Drawer, {
-    open: state.service.addTimeModal,
-    title: locales.getText("page.booking.text.add-time"),
-    rootClassName: "booking-server-wrap",
-    onClose: onCancel,
-    footerStyle: {
-      padding: "10px 32px 20px"
-    },
-    hideScrollBar: false,
-    bodyStyle: {
-      position: "relative"
-    },
-    footer: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "pisell-lowcode__booking-add-time-total-wrap"
-    }, currentTimeItem && currentTimeItem !== null && currentTimeItem !== void 0 && (_currentTimeItem$stat = currentTimeItem.status) !== null && _currentTimeItem$stat !== void 0 && _currentTimeItem$stat.message ? /*#__PURE__*/React.createElement(Alert, {
-      message: currentTimeItem.status.message,
-      type: "warning",
-      showIcon: true,
-      style: {
-        marginBottom: 12
-      }
-    }) : null, newService ? /*#__PURE__*/React.createElement("div", {
-      className: "pisell-lowcode__booking-add-time-summary-wrap"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "pisell-lowcode__booking-add-time-summary"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "pisell-lowcode__booking-add-time-summary-time"
-    }, updateTime), /*#__PURE__*/React.createElement("div", {
-      className: "pisell-lowcode__booking-add-time-summary-total"
-    }, locales.getText("pisell1.text.subtotal"), ":", " ", formatAmount((currentTimeItem.price || 0) * number, 2, state.amountSymbol))), (currentProduct === null || currentProduct === void 0 ? void 0 : (_currentProduct$add_t = currentProduct.add_time) === null || _currentProduct$add_t === void 0 ? void 0 : _currentProduct$add_t.calculate_type) === "select_quantity" && /*#__PURE__*/React.createElement("div", {
-      className: "pisell-lowcode__booking-add-time-quantity-wrap"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "pisell-lowcode__booking-add-time-quantity"
-    }, locales.getText("page.booking.text.quantity")), " ", /*#__PURE__*/React.createElement(BrowserSelect, {
-      value: number,
-      onChange: function onChange(e) {
-        setNumber(Number(e.target.value));
-        updateServices.run();
+  return useMemo(function () {
+    var _currentTimeItem$stat, _currentProduct$add_t;
+    return /*#__PURE__*/React.createElement(Drawer, {
+      open: state.service.addTimeModal,
+      title: locales.getText('page.booking.text.add-time'),
+      rootClassName: "booking-server-wrap",
+      onClose: onCancel,
+      footerStyle: {
+        padding: '10px 32px 20px'
+      },
+      hideScrollBar: false,
+      bodyStyle: {
+        position: 'relative'
       },
-      className: "pisell-lowcode__booking-add-time-quantity-select",
-      options: numberList
-    }))) : null), /*#__PURE__*/React.createElement(Footer, {
-      state: state,
-      dispatch: dispatch,
-      source: "addTime",
-      buttons: [/*#__PURE__*/React.createElement(Button, {
-        className: "pisell-lowcode__booking-footer-buttons-item",
-        type: transaction_habit_selection.type === "service_now_pay_later" ? "default" : "primary",
-        disabled: loading === "list" || !isEdit || !currentTime,
-        onClick: handleCheckout,
-        loading: loading === "checkout"
-      }, locales.getText("pisell2.text.checkout")), /*#__PURE__*/React.createElement(Button, {
-        className: "pisell-lowcode__booking-footer-buttons-item",
-        type: transaction_habit_selection.type === "service_now_pay_later" ? "primary" : "default",
-        disabled: loading === "list" || !isEdit || !currentTime,
-        loading: loading === "save",
-        onClick: function onClick() {
-          handleSave("save");
+      footer: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "pisell-lowcode__booking-add-time-total-wrap"
+      }, currentTimeItem && currentTimeItem !== null && currentTimeItem !== void 0 && (_currentTimeItem$stat = currentTimeItem.status) !== null && _currentTimeItem$stat !== void 0 && _currentTimeItem$stat.message ? /*#__PURE__*/React.createElement(Alert, {
+        message: currentTimeItem.status.message,
+        type: "warning",
+        showIcon: true,
+        style: {
+          marginBottom: 12
         }
-      }, locales.getText("pisell2.text.save"))]
-    }))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "pisell-lowcode__booking-add-time-body"
-  }, /*#__PURE__*/React.createElement(Skeleton, {
-    loading: loading === "list",
-    active: true,
-    round: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ""
-  }, renderList.map(function (d) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: ""
+      }) : null, newService ? /*#__PURE__*/React.createElement("div", {
+        className: "pisell-lowcode__booking-add-time-summary-wrap"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "pisell-lowcode__booking-add-time-summary"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "pisell-lowcode__booking-add-time-summary-time"
+      }, updateTime), /*#__PURE__*/React.createElement("div", {
+        className: "pisell-lowcode__booking-add-time-summary-total"
+      }, locales.getText('pisell1.text.subtotal'), ":", ' ', formatAmount((currentTimeItem.price || 0) * number, 2, state.amountSymbol))), (currentProduct === null || currentProduct === void 0 ? void 0 : (_currentProduct$add_t = currentProduct.add_time) === null || _currentProduct$add_t === void 0 ? void 0 : _currentProduct$add_t.calculate_type) === 'select_quantity' && /*#__PURE__*/React.createElement("div", {
+        className: "pisell-lowcode__booking-add-time-quantity-wrap"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "pisell-lowcode__booking-add-time-quantity"
+      }, locales.getText('page.booking.text.quantity')), ' ', /*#__PURE__*/React.createElement(BrowserSelect, {
+        value: number,
+        onChange: function onChange(e) {
+          setNumber(Number(e.target.value));
+          updateServices.run();
+        },
+        className: "pisell-lowcode__booking-add-time-quantity-select",
+        options: numberList
+      }))) : null), /*#__PURE__*/React.createElement(Footer, {
+        state: state,
+        dispatch: dispatch,
+        source: "addTime",
+        buttons: [/*#__PURE__*/React.createElement(Button, {
+          className: "pisell-lowcode__booking-footer-buttons-item",
+          type: transaction_habit_selection.type === 'service_now_pay_later' ? 'default' : 'primary',
+          disabled: loading === 'list' || !isEdit || !currentTime,
+          onClick: handleCheckout,
+          loading: loading === 'checkout'
+        }, locales.getText('pisell2.text.checkout')), /*#__PURE__*/React.createElement(Button, {
+          className: "pisell-lowcode__booking-footer-buttons-item",
+          type: transaction_habit_selection.type === 'service_now_pay_later' ? 'primary' : 'default',
+          disabled: loading === 'list' || !isEdit || !currentTime,
+          loading: loading === 'save',
+          onClick: function onClick() {
+            handleSave('save');
+          }
+        }, locales.getText('pisell2.text.save'))]
+      }))
     }, /*#__PURE__*/React.createElement("div", {
-      className: "pisell-lowcode__booking-add-time-hours"
-    }, d.title), d.times ? /*#__PURE__*/React.createElement("div", {
-      className: "pisell-lowcode__booking-add-time-child-card-list"
-    }, d.times.map(function (child) {
-      var _child$status, _child$status$status, _child$status2, _child$status2$status;
+      className: "pisell-lowcode__booking-add-time-body"
+    }, /*#__PURE__*/React.createElement(Skeleton, {
+      loading: loading === 'list',
+      active: true,
+      round: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ""
+    }, renderList.map(function (d) {
       return /*#__PURE__*/React.createElement("div", {
-        className: classNames("pisell-lowcode__booking-add-time-child-card", {
-          "pisell-lowcode__booking-add-time-child-card-active": recordKey === addTimeRowKey.create(d.id, child.value)
-        }),
-        onClick: function onClick() {
-          if (!child.value) {
-            return;
-          }
-          onSelectItem(d, child);
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "pisell-lowcode__booking-add-time-child-card-left"
+        className: ""
       }, /*#__PURE__*/React.createElement("div", {
-        className: "pisell-lowcode__booking-add-time-child-card-left-time"
-      }, child.label), /*#__PURE__*/React.createElement("div", {
-        className: "pisell-lowcode__booking-add-time-child-card-left-price"
-      }, formatAmount(child.price, 2, state.amountSymbol))), /*#__PURE__*/React.createElement("div", {
-        className: "pisell-lowcode__booking-add-time-child-card-right",
-        style: {
-          color: (_child$status = child.status) === null || _child$status === void 0 ? void 0 : (_child$status$status = _child$status.status) === null || _child$status$status === void 0 ? void 0 : _child$status$status.color
-        }
-      }, (_child$status2 = child.status) === null || _child$status2 === void 0 ? void 0 : (_child$status2$status = _child$status2.status) === null || _child$status2$status === void 0 ? void 0 : _child$status2$status.label));
-    })) : null);
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: ""
-  })));
+        className: "pisell-lowcode__booking-add-time-hours"
+      }, d.title), d.times ? /*#__PURE__*/React.createElement("div", {
+        className: "pisell-lowcode__booking-add-time-child-card-list"
+      }, d.times.map(function (child) {
+        var _child$status, _child$status$status, _child$status2, _child$status2$status;
+        return /*#__PURE__*/React.createElement("div", {
+          className: classNames('pisell-lowcode__booking-add-time-child-card', {
+            'pisell-lowcode__booking-add-time-child-card-active': recordKey === addTimeRowKey.create(d.id, child.value)
+          }),
+          onClick: function onClick() {
+            if (!child.value) {
+              return;
+            }
+            onSelectItem(d, child);
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "pisell-lowcode__booking-add-time-child-card-left"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "pisell-lowcode__booking-add-time-child-card-left-time"
+        }, child.label), /*#__PURE__*/React.createElement("div", {
+          className: "pisell-lowcode__booking-add-time-child-card-left-price"
+        }, formatAmount(child.price, 2, state.amountSymbol))), /*#__PURE__*/React.createElement("div", {
+          className: "pisell-lowcode__booking-add-time-child-card-right",
+          style: {
+            color: (_child$status = child.status) === null || _child$status === void 0 ? void 0 : (_child$status$status = _child$status.status) === null || _child$status$status === void 0 ? void 0 : _child$status$status.color
+          }
+        }, (_child$status2 = child.status) === null || _child$status2 === void 0 ? void 0 : (_child$status2$status = _child$status2.status) === null || _child$status2$status === void 0 ? void 0 : _child$status2$status.label));
+      })) : null);
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: ""
+    })));
+  }, [state.service.addTimeModal, locales, currentTimeItem, currentTimeItem === null || currentTimeItem === void 0 ? void 0 : (_currentTimeItem$stat2 = currentTimeItem.status) === null || _currentTimeItem$stat2 === void 0 ? void 0 : _currentTimeItem$stat2.message, newService, updateTime, currentTimeItem.price, number, state.amountSymbol, currentProduct === null || currentProduct === void 0 ? void 0 : (_currentProduct$add_t2 = currentProduct.add_time) === null || _currentProduct$add_t2 === void 0 ? void 0 : _currentProduct$add_t2.calculate_type, numberList, updateServices.run, state, dispatch, transaction_habit_selection.type, loading, isEdit, currentTime, transaction_habit_selection.type, renderList, recordKey]);
 };
 export default AddTimeModal;