@pisell/private-materials 3.0.155 → 3.0.157-gray

package/lib/components/booking/info/clientVariant/vertical/index.js

@@ -37,6 +37,8 @@ var import_User01 = __toESM(require("@pisell/icon/es/User01"));
 var import_PlusCircle = __toESM(require("@pisell/icon/es/PlusCircle"));
 var import_antd = require("antd");
 var import_utils = require("@pisell/utils");
+var import_ahooks = require("ahooks");
+var import_classnames = __toESM(require("classnames"));
 var import_useClientFn = __toESM(require("../hooks/useClientFn"));
 var import_SelectDrawer = __toESM(require("./SelectDrawer"));
 var import_pet = __toESM(require("../../pet"));
@@ -44,8 +46,8 @@ var import_index = require("./index.less");
 var import_useEngineContext = __toESM(require("../../../../../hooks/useEngineContext"));
 var import_format = require("../../../forms/format");
 var import_utils2 = require("../../utils");
-var import_ahooks = require("ahooks");
-var VerticalClient = (props) => {
+var import_utils3 = require("../../../utils");
+var VerticalClient = (0, import_react.forwardRef)((props, ref) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
   const { globalState, setGlobalState } = props;
   const modalRef = (0, import_react.useRef)();
@@ -55,6 +57,7 @@ var VerticalClient = (props) => {
   const context = (0, import_useEngineContext.default)();
   const [isHasFormRecord, setIsHasFormRecord] = (0, import_react.useState)(true);
   const isFranchisee = (_d = (_c = (_b = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.businessUtils) == null ? void 0 : _c.getAppByModal) == null ? void 0 : _d.call(_c, "franchisee");
+  import_utils3.request.setRequest(context.appHelper.utils.request);
   state.isFranchisee = isFranchisee;
   stateRef.current = state;
   const {
@@ -175,21 +178,23 @@ var VerticalClient = (props) => {
       }
     });
   };
-  const previewItemTitleRender = (0, import_ahooks.useMemoizedFn)((value, index, values) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
-    const title = getNickname(value.customer) || ((_a2 = value == null ? void 0 : value.customer) == null ? void 0 : _a2.email) || ((_b2 = value == null ? void 0 : value.customer) == null ? void 0 : _b2.phone) || "";
-    if (((_c2 = value == null ? void 0 : value.customer) == null ? void 0 : _c2.id) === prevCustomerId.current) {
+  const previewItemTitleRender = (0, import_ahooks.useMemoizedFn)(
+    (value, index, values) => {
+      var _a2, _b2, _c2, _d2, _e2, _f2;
+      const title = getNickname(value.customer) || ((_a2 = value == null ? void 0 : value.customer) == null ? void 0 : _a2.email) || ((_b2 = value == null ? void 0 : value.customer) == null ? void 0 : _b2.phone) || "";
+      if (((_c2 = value == null ? void 0 : value.customer) == null ? void 0 : _c2.id) === prevCustomerId.current) {
+        if (values.length === index + 1) {
+          prevCustomerId.current = null;
+        }
+        return null;
+      }
+      prevCustomerId.current = (_d2 = value == null ? void 0 : value.customer) == null ? void 0 : _d2.id;
       if (values.length === index + 1) {
         prevCustomerId.current = null;
       }
-      return null;
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-pet-title" }, title, " ' ", ((_f2 = (_e2 = state.pet.formData) == null ? void 0 : _e2[0]) == null ? void 0 : _f2.title) || "");
     }
-    prevCustomerId.current = (_d2 = value == null ? void 0 : value.customer) == null ? void 0 : _d2.id;
-    if (values.length === index + 1) {
-      prevCustomerId.current = null;
-    }
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-pet-title" }, title, " ' ", ((_f2 = (_e2 = state.pet.formData) == null ? void 0 : _e2[0]) == null ? void 0 : _f2.title) || "");
-  });
+  );
   const isShowAddBtn = (0, import_react.useMemo)(() => {
     var _a2, _b2, _c2, _d2, _e2, _f2;
     const formId2 = (_c2 = (_b2 = (_a2 = state.pet) == null ? void 0 : _a2.formData) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.form_id;
@@ -251,13 +256,7 @@ var VerticalClient = (props) => {
       };
       getData();
     }
-  }, [
-    isWalkIn,
-    formId,
-    (_q = state.client.value) == null ? void 0 : _q.id,
-    currentPetValue,
-    boardConfig
-  ]);
+  }, [isWalkIn, formId, (_q = state.client.value) == null ? void 0 : _q.id, currentPetValue, boardConfig]);
   const petRender = (0, import_react.useMemo)(() => {
     var _a2, _b2, _c2;
     if ((state == null ? void 0 : state.disabledEdit) || boardConfig.type !== "form") {
@@ -284,7 +283,9 @@ var VerticalClient = (props) => {
               handleSelectPet({
                 [formId]: (0, import_format.formatAddFormValues)({
                   clientId: (_b3 = (_a4 = state == null ? void 0 : state.client) == null ? void 0 : _a4.value) == null ? void 0 : _b3.id,
-                  value: [{ ...addRecord, customer: (_c3 = state == null ? void 0 : state.client) == null ? void 0 : _c3.value }],
+                  value: [
+                    { ...addRecord, customer: (_c3 = state == null ? void 0 : state.client) == null ? void 0 : _c3.value }
+                  ],
                   data_range: (_e2 = (_d2 = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _d2.holder) == null ? void 0 : _e2.data_range
                 })
               });
@@ -325,80 +326,112 @@ var VerticalClient = (props) => {
     formId,
     (_x = (_w = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _w.holder) == null ? void 0 : _x.data_range
   ]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-vertical-client-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+  const handleOpenClient = () => {
+    if (!isWalkIn || (state == null ? void 0 : state.disableEventBookingEdit)) {
+      return;
+    }
+    handleOpenClientModal();
+  };
+  (0, import_react.useImperativeHandle)(ref, () => {
+    var _a2, _b2;
+    return {
+      open: handleOpenClientModal,
+      close: (_a2 = modalRef.current) == null ? void 0 : _a2.close,
+      setSearch: (_b2 = modalRef.current) == null ? void 0 : _b2.setSearch
+    };
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: "pisell-lowcode__booking-vertical-client",
-      onClick: () => {
-        if (!isWalkIn || (state == null ? void 0 : state.disableEventBookingEdit)) {
-          return;
-        }
-        handleOpenClientModal();
-      }
+      className: (0, import_classnames.default)("pisell-lowcode__booking-vertical-client-wrap", {
+        ["create-booking-page-vertical-client-wrap"]: state.isBookingCreatePage
+      })
     },
-    /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton, { loading: state.loading, active: true, round: true }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Avatar,
-      {
-        className: "pisell-lowcode__booking-client-avatar",
-        src: import_utils.image.ali((_y = state.client.value) == null ? void 0 : _y.cover, 100),
-        size: 64,
-        icon: /* @__PURE__ */ import_react.default.createElement(import_User01.default, { className: "pisell-lowcode__booking-client-list-item-avatar-icon" })
-      }
-    ), isWalkIn ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-info-desc" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-title" }, import_utils.locales.getText("pisell2.text.add-client")), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, import_utils.locales.getText("pisell2.text.leave-empty-for-walk-in"))) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-title" }, getNickname(state.client.value)), ((_z = state.client.value) == null ? void 0 : _z.email) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, (_A = state.client.value) == null ? void 0 : _A.email) : null, ((_B = state.client.value) == null ? void 0 : _B.phone) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, (_C = state.client.value) == null ? void 0 : _C.phone) : null), !isWalkIn && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-action-wrap" }, !state.disabledEdit && /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Dropdown.Button,
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        menu: {
-          items: menus,
-          onClick: menuChange
+        className: (0, import_classnames.default)("pisell-lowcode__booking-vertical-client", {
+          "pisell-lowcode__booking-vertical-client-walkin": isWalkIn
+        }),
+        onClick: handleOpenClient
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton, { loading: false, active: true, round: true }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Avatar,
+        {
+          className: "pisell-lowcode__booking-client-avatar",
+          src: import_utils.image.ali((_y = state.client.value) == null ? void 0 : _y.cover, 100),
+          size: 64,
+          icon: /* @__PURE__ */ import_react.default.createElement(import_User01.default, { className: "pisell-lowcode__booking-client-list-item-avatar-icon" })
+        }
+      ), isWalkIn ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-info-desc" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-title" }, import_utils.locales.getText("pisell2.text.add-client")), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, import_utils.locales.getText("pisell2.text.leave-empty-for-walk-in"))) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-title" }, getNickname(state.client.value)), ((_z = state.client.value) == null ? void 0 : _z.email) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, (_A = state.client.value) == null ? void 0 : _A.email) : null, ((_B = state.client.value) == null ? void 0 : _B.phone) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, (_C = state.client.value) == null ? void 0 : _C.phone) : null), !isWalkIn && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-action-wrap" }, !state.disabledEdit && /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Dropdown.Button,
+        {
+          menu: {
+            items: menus,
+            onClick: menuChange
+          },
+          placement: "bottomRight",
+          onClick: () => handleOpenClientModal()
+        },
+        import_utils.locales.getText("pisell2.text.variant-client-change")
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            handleViewClient();
+          }
         },
-        placement: "bottomRight",
-        onClick: () => handleOpenClientModal()
+        import_utils.locales.getText("pisell2.text.view-profile")
+      )))
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)("pisell-lowcode__booking-vertical-pet", {
+          "pisell-lowcode__booking-vertical-pet-walkin": isWalkIn
+        }),
+        onClick: handleOpenClient
       },
-      import_utils.locales.getText("pisell2.text.variant-client-change")
-    ), /* @__PURE__ */ import_react.default.createElement(
+      petRender
+    ),
+    isShowAddBtn && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-vertical-footer" }, /* @__PURE__ */ import_react.default.createElement(
       import_antd.Button,
       {
-        onClick: (e) => {
-          e.stopPropagation();
-          handleViewClient();
-        }
-      },
-      import_utils.locales.getText("pisell2.text.view-profile")
-    )))
-  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-vertical-pet" }, petRender), isShowAddBtn && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-vertical-footer" }, /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Button,
-    {
-      onClick: () => {
-        const currentClientSearchValue = getCurrentClientSearchValue();
-        modalRef.current.setSearch(currentClientSearchValue);
-        handleOpenClientModal(currentClientSearchValue);
+        onClick: () => {
+          const currentClientSearchValue = getCurrentClientSearchValue();
+          modalRef.current.setSearch(currentClientSearchValue);
+          handleOpenClientModal(currentClientSearchValue);
+        },
+        block: true,
+        size: "large"
       },
-      block: true,
-      size: "large"
-    },
-    import_utils.locales.getText("pisell2.text.select")
-  )), /* @__PURE__ */ import_react.default.createElement(
-    import_SelectDrawer.default,
-    {
-      modalOpen: state.modalOpen,
-      loading,
-      autoFocus: !((_F = (_E = (_D = context == null ? void 0 : context.appHelper) == null ? void 0 : _D.utils) == null ? void 0 : _E.isTerminal) == null ? void 0 : _F.call(_E)),
-      ref: modalRef,
-      onClose: handleClose,
-      handleSelectClient,
-      handleCreateItem,
-      childrenValue: state.pet.value,
-      handleSelectPet,
-      formData: state.pet.formData,
-      searchChange,
-      options: renderList,
-      holder: (_G = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _G.holder,
-      client: (_H = state == null ? void 0 : state.client) == null ? void 0 : _H.value,
-      loadMore,
-      showPet: (boardConfig == null ? void 0 : boardConfig.type) === "form",
-      handleAddPet,
-      franchiseeLoading
-    }
-  ));
-};
+      import_utils.locales.getText("pisell2.text.select")
+    )),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_SelectDrawer.default,
+      {
+        showHeader: !state.isBookingCreatePage,
+        modalOpen: state.modalOpen,
+        loading,
+        autoFocus: !((_F = (_E = (_D = context == null ? void 0 : context.appHelper) == null ? void 0 : _D.utils) == null ? void 0 : _E.isTerminal) == null ? void 0 : _F.call(_E)),
+        ref: modalRef,
+        onClose: handleClose,
+        handleSelectClient,
+        handleCreateItem,
+        childrenValue: state.pet.value,
+        handleSelectPet,
+        formData: state.pet.formData,
+        searchChange,
+        options: renderList,
+        holder: (_G = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _G.holder,
+        client: (_H = state == null ? void 0 : state.client) == null ? void 0 : _H.value,
+        loadMore,
+        showPet: (boardConfig == null ? void 0 : boardConfig.type) === "form",
+        handleAddPet,
+        franchiseeLoading
+      }
+    )
+  );
+});
 var vertical_default = VerticalClient;

package/lib/components/booking/info/clientVariant/vertical/index.less

@@ -3,12 +3,12 @@
   overflow: hidden;
   height: 100%;
   width: 100%;
-  border-right: 1px solid var(--Gray-200, #EAECF0);
-  background: var(--Gray-50, #F9FAFB);
+  border-right: 1px solid var(--Gray-200, #eaecf0);
+  background: var(--Gray-50, #f9fafb);
   display: flex;
   flex-direction: column;
   .pisell-lowcode-drawer-content {
-    border-right: 1px solid var(--Gray-200, #EAECF0);
+    border-right: 1px solid var(--Gray-200, #eaecf0);
   }
   .pisell-lowcode__booking-drawer-title-wrap {
     padding: 24px 24px 0;
@@ -16,17 +16,21 @@
   .pisell-lowcode__booking-drawer-back {
     margin-right: 6px;
   }
-  .pisell-lowcode__booking-drawer-back, .pisell-lowcode__booking-drawer-title {
+  .pisell-lowcode__booking-drawer-back,
+  .pisell-lowcode__booking-drawer-title {
     font-size: 18px;
   }
 }
+.pisell-lowcode__booking-vertical-client-walkin {
+  cursor: pointer;
+}
 .pisell-lowcode__booking-vertical-client {
   padding: 24px 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
-  border-bottom: 1px solid var(--Gray-200, #EAECF0);
+  border-bottom: 1px solid var(--Gray-200, #eaecf0);
   .pisell-lowcode__booking-client-avatar {
     margin-bottom: 16px;
   }
@@ -37,16 +41,17 @@
     font-weight: 600;
     line-height: 24px; /* 150% */
     text-align: center;
+    display: inline-block;
   }
   .pisell-lowcode__booking-client-desc-item {
-    color: var(--Gray-400, #98A2B3);
+    color: var(--Gray-400, #98a2b3);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px; /* 142.857% */
     text-align: center;
     max-width: 200px;
-    word-break:break-word
+    word-break: break-word;
   }
   .pisell-lowcode__booking-client-action-wrap {
     display: flex;
@@ -56,11 +61,23 @@
   }
 }
 
+.pisell-lowcode__booking-client-info-desc {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  div > span {
+    cursor: pointer;
+  }
+}
+
 .pisell-lowcode__booking-vertical-pet {
   padding: 0 24px 24px;
-  flex:1;
+  flex: 1;
   overflow: auto;
 }
+.pisell-lowcode__booking-vertical-pet-walkin {
+  cursor: pointer;
+}
 .pisell-lowcode__booking-pet-title {
   color: var(--Gray-700, #344054);
   font-size: 14px;
@@ -77,9 +94,10 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
-  border-top: 1px solid var(--Gray-200, #EAECF0);
-  background: var(--Base-White, #FFF);
-  box-shadow: 0px -4px 8px -2px rgba(16, 24, 40, 0.10), 0px -2px 4px -2px rgba(16, 24, 40, 0.06);
+  border-top: 1px solid var(--Gray-200, #eaecf0);
+  background: var(--Base-White, #fff);
+  box-shadow: 0px -4px 8px -2px rgba(16, 24, 40, 0.1),
+    0px -2px 4px -2px rgba(16, 24, 40, 0.06);
 }
 .pisell-lowcode__create-form-wrap {
   display: flex;
@@ -98,4 +116,12 @@
     font-weight: 400;
     line-height: 24px;
   }
+}
+.create-booking-page-vertical-client-wrap {
+  .pisell-lowcode__booking-drawer-title-wrap {
+    padding: 16px 16px 0 !important;
+  }
+  .pisell-lowcode-input-affix-wrapper {
+    margin-top: 0 !important;
+  }
 }

package/lib/components/booking/info/date/index.js

@@ -113,6 +113,7 @@ var DateCom = () => {
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-body-select-date" }, /* @__PURE__ */ import_react.default.createElement(
     import_antd.DatePicker,
     {
+      inputReadOnly: true,
       allowClear: false,
       size: "large",
       style: { width: "100%", padding: 0 },

package/lib/components/booking/info/date/index.less

@@ -1,9 +1,11 @@
 .pisell-lowcode__booking-body-select-date {
   padding: 24px 0 8px;
   font-weight: 550;
+  cursor: pointer;
 
   .pisell-lowcode-picker-input>input {
     font-weight: 550;
+    cursor: pointer;
   }
 
   .ant-picker-suffix,

package/lib/components/booking/info/header/index.js

@@ -40,7 +40,7 @@ var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContex
 var import_index = require("./index.less");
 var import_classnames = __toESM(require("classnames"));
 var header = ({ state, dispatch }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c;
   const context = (0, import_useEngineContext.default)();
   const [modalContent, setModalContent] = (0, import_react.useState)({
     open: false,
@@ -49,6 +49,12 @@ var header = ({ state, dispatch }) => {
     title: /* @__PURE__ */ import_react.default.createElement("div", { className: "", style: { height: 14 } })
   });
   const { isTerminal, interaction, store, storage } = (_a = context.appHelper) == null ? void 0 : _a.utils;
+  const bookingDetail = (0, import_react.useMemo)(() => {
+    return {
+      ...state.preliminaryBookingDetail || {},
+      ...state.bookingDetail || {}
+    };
+  }, [state.bookingDetail, state.preliminaryBookingDetail]);
   const statusList = [
     {
       label: import_utils.locales.getText("pisell2.text.status.new"),
@@ -155,12 +161,9 @@ var header = ({ state, dispatch }) => {
   };
   const isPaid = (0, import_react.useMemo)(() => {
     return ["partially_paid", "paid"].find(
-      (d) => {
-        var _a2;
-        return d === ((_a2 = state.bookingDetail) == null ? void 0 : _a2.payment_status);
-      }
+      (d) => d === (bookingDetail == null ? void 0 : bookingDetail.payment_status)
     );
-  }, [(_b = state.bookingDetail) == null ? void 0 : _b.payment_status]);
+  }, [bookingDetail == null ? void 0 : bookingDetail.payment_status]);
   const isTicket = (0, import_react.useMemo)(() => {
     var _a2;
     return (((_a2 = state.service) == null ? void 0 : _a2.value) || []).some(
@@ -168,10 +171,9 @@ var header = ({ state, dispatch }) => {
         d.extension_type
       )
     );
-  }, [(_c = state.service) == null ? void 0 : _c.value]);
+  }, [(_b = state.service) == null ? void 0 : _b.value]);
   const paymentProcessingPayment = (type) => {
-    var _a2;
-    const payments = ((_a2 = state == null ? void 0 : state.bookingDetail) == null ? void 0 : _a2.payments) || [];
+    const payments = (bookingDetail == null ? void 0 : bookingDetail.payments) || [];
     const status = ["payment_processing"];
     const payment_method = ["BANK_DEPOSIT"];
     if (type === "bank") {
@@ -361,12 +363,12 @@ var header = ({ state, dispatch }) => {
       className: "booking-header",
       style: { backgroundColor: currentStatus.color }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-order-sales-channel" }, orderSalesChannel[(_d = state.bookingDetail) == null ? void 0 : _d.order_sales_channel] || ""),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-header-line-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-header-left" }, import_utils.locales.getText("pisell2.text.status.booking_id"), ":", " ", ((_f = (_e = state.bookingDetail) == null ? void 0 : _e.bookings) == null ? void 0 : _f.booking_id) || "-"), /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-header-right" }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-order-sales-channel" }, orderSalesChannel[bookingDetail == null ? void 0 : bookingDetail.order_sales_channel] || ""),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-header-line-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-header-left" }, import_utils.locales.getText("pisell2.text.status.booking_id"), ":", " ", ((_c = bookingDetail == null ? void 0 : bookingDetail.bookings) == null ? void 0 : _c.booking_id) || "-"), /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-header-right" }, /* @__PURE__ */ import_react.default.createElement(
       import_antd.Dropdown,
       {
         menu: { items, onClick: onSelect },
-        disabled: state.appointment_status === "cancelled"
+        disabled: state.appointment_status === "cancelled" || !state.bookingDetail
       },
       /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-header-right-status" }, currentStatus.label, state.appointment_status !== "cancelled" ? /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, { className: "booking-header-right-status-icon" }) : null)
     )))

package/lib/components/booking/info/index.less

@@ -15,4 +15,13 @@
   //   height: 42px;
   //   background: #069456;
   // }
+}
+#create-booking-page-info-wrap {
+  .pisell-lowcode__booking-tab-pane-footer {
+    padding: 12px 16px !important;
+  }
+}
+.create-booking-page-info-wrap {
+  position: initial !important;
+  padding: 0 16px !important;
 }

package/lib/components/booking/info/main.js

@@ -49,6 +49,7 @@ var import_date2 = require("./date");
 var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
 var import_notes = __toESM(require("./notes"));
 var import_index = require("./index.less");
+var import_antd = require("antd");
 var defaultModules = {
   client: 1,
   date: 1,
@@ -146,7 +147,19 @@ var Info = (0, import_model.Provider)((props) => {
       },
       bodyClassName: "booking-info-warp"
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-info" }, modules.client ? /* @__PURE__ */ import_react.default.createElement(import_client.default, null) : null, modules.holder && !((_i = modal.state) == null ? void 0 : _i.disabledEdit) ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, params.type === "form" ? /* @__PURE__ */ import_react.default.createElement(import_pet.default, null) : null) : null, modules.date ? /* @__PURE__ */ import_react.default.createElement(import_date.default, null) : null, modules.service ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, modal.state.date.value ? /* @__PURE__ */ import_react.default.createElement(import_service.default, null) : null) : null, notes, slot ? slot : null)
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-info" }, modules.client ? /* @__PURE__ */ import_react.default.createElement(import_client.default, null) : null, modules.holder && !((_i = modal.state) == null ? void 0 : _i.disabledEdit) ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, params.type === "form" ? /* @__PURE__ */ import_react.default.createElement(import_pet.default, null) : null) : null, modules.date ? /* @__PURE__ */ import_react.default.createElement(import_date.default, null) : null, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Skeleton,
+      {
+        loading: globalState.loading,
+        round: true,
+        active: true,
+        avatar: false,
+        style: { paddingTop: 20 }
+      },
+      modules.service ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, modal.state.date.value ? /* @__PURE__ */ import_react.default.createElement(import_service.default, null) : null) : null,
+      notes,
+      slot ? slot : null
+    ))
   ) : null);
 });
 var main_default = Info;

package/lib/components/booking/info/pet/index.js

@@ -410,7 +410,8 @@ var Pet = (props) => {
     state.disableEventBookingEdit,
     params.search,
     loadMore,
-    addButtonProps
+    addButtonProps,
+    state.isBookingCreatePage
   ]);
 };
 var pet_default = Pet;

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

@@ -1,6 +1,12 @@
 import React from 'react';
+import { PisellDrawerProps } from '../../../components/drawer';
 import './index.less';
-declare const Info: ({ onEdit }: {
+interface AddServiceProps {
     onEdit: any;
-}) => React.JSX.Element;
+    dispatch?: any;
+    state?: any;
+    drawerProps?: PisellDrawerProps;
+    renderMode?: 'current' | 'drawer';
+}
+declare const Info: (props: AddServiceProps) => React.JSX.Element;
 export default Info;