@pisell/private-materials 3.0.136 → 3.0.138

package/lib/components/eftpos/index.js

@@ -33,93 +33,99 @@ __export(eftpos_exports, {
 });
 module.exports = __toCommonJS(eftpos_exports);
 var import_react = __toESM(require("react"));
+var import_ahooks = require("ahooks");
 var import_antd = require("antd");
 var import_utils = require("@pisell/utils");
 var import_table = __toESM(require("./table"));
 var import_device = __toESM(require("./device"));
 var import_pos = __toESM(require("./pos"));
 var import_drawer = __toESM(require("../booking/components/drawer"));
+var import_log = __toESM(require("./log"));
 var import_locales = __toESM(require("./locales"));
+var import_hooks = require("./hooks");
+var import_apiKey = __toESM(require("./icon/apiKey"));
+var import_device2 = __toESM(require("./icon/device"));
 var import_const = require("./const");
 var import_index = require("./index.less");
-var PosTabs = ({
-  Table: Table2,
-  PosForm,
-  style
-}) => {
-  (0, import_react.useEffect)(() => {
-    document.body.id = "body";
-  }, []);
-  const [active, setActive] = (0, import_react.useState)(
-    import_utils.locales.getText("page.eftpos.text.device")
-  );
-  const onClick = (event) => {
-    const target = event.currentTarget;
-    if (!target) {
-      return;
-    }
-    const { key } = target.dataset;
-    key && setActive(key);
-  };
-  const items = [
-    {
-      key: import_utils.locales.getText("page.eftpos.text.device"),
-      label: (active2) => /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos_tabs-tab-label" }, /* @__PURE__ */ import_react.default.createElement(
+import_utils.locales.init(import_locales.default, localStorage.getItem("umi_locale") || "en");
+var PosTabs = (0, import_react.forwardRef)(
+  ({ Table: Table2, PosForm, style, onChange }, ref) => {
+    const [active, setActive] = (0, import_react.useState)("device");
+    const onClick = (event) => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      const { key } = target.dataset;
+      if (key) {
+        setActive(key);
+        onChange(key);
+      }
+    };
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      setActive
+    }));
+    const items = [
+      {
+        key: "device",
+        label: (active2) => /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos_tabs-tab-label" }, /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `pisell-lowcode__pos_circle ${active2 ? "active" : ""}`
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_device2.default, { color: active2 ? "#fff" : "#98A2B3" })
+        ), /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: `pisell-lowcode__pos_tabs-tab-label-tlt ${active2 ? "active" : ""}`
+          },
+          import_utils.locales.getText("page.eftpos.text.device")
+        )),
+        children: Table2
+      },
+      {
+        key: "setting",
+        label: (active2) => /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos_tabs-tab-label" }, /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `pisell-lowcode__pos_circle ${active2 ? "active" : ""}`
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_apiKey.default, { color: active2 ? "#fff" : "#98A2B3" })
+        ), /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: `pisell-lowcode__pos_tabs-tab-label-tlt ${active2 ? "active" : ""}`
+          },
+          import_utils.locales.getText("page.eftpos.text.setting")
+        )),
+        children: PosForm
+      }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos_tabs", style }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos_tabs-nav" }, items.map((item) => {
+      return /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: `pisell-lowcode__pos_circle ${active2 ? "active" : ""}`
-        }
-      ), /* @__PURE__ */ import_react.default.createElement(
-        "span",
-        {
-          className: `pisell-lowcode__pos_tabs-tab-label-tlt ${active2 ? "active" : ""}`
+          key: item.key,
+          style: {
+            display: "contents"
+          },
+          "data-key": item.key,
+          onClick
         },
-        "device"
-      )),
-      children: Table2
-    },
-    {
-      key: "apiKey",
-      label: (active2) => /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos_tabs-tab-label" }, /* @__PURE__ */ import_react.default.createElement(
+        item.label(active === item.key)
+      );
+    })), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos_tab-content" }, items.map((item) => {
+      return /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: `pisell-lowcode__pos_circle ${active2 ? "active" : ""}`
-        }
-      ), /* @__PURE__ */ import_react.default.createElement(
-        "span",
-        {
-          className: `pisell-lowcode__pos_tabs-tab-label-tlt ${active2 ? "active" : ""}`
-        },
-        "apiKey"
-      )),
-      children: PosForm
-    }
-  ];
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos_tabs", style }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos_tabs-nav" }, items.map((item) => {
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        key: item.key,
-        style: {
-          display: "contents"
+          className: `pisell-lowcode__pos_tabs-tabpane ${active === item.key ? "active" : ""}`,
+          key: item.key
         },
-        "data-key": item.key,
-        onClick
-      },
-      item.label(active === item.key)
-    );
-  })), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos_tab-content" }, items.map((item) => {
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: `pisell-lowcode__pos_tabs-tabpane ${active === item.key ? "active" : ""}`,
-        key: item.key
-      },
-      item.children
-    );
-  })));
-};
-import_utils.locales.init(import_locales.default, localStorage.getItem("umi_locale") || "en");
+        item.children
+      );
+    })));
+  }
+);
 var eftpos_default = (props) => {
   const {
     name,
@@ -132,15 +138,28 @@ var eftpos_default = (props) => {
     onDel,
     onEdit,
     getPosComm,
-    savePos
+    savePos,
+    config,
+    tyroUrl,
+    tyroVersion,
+    useTyroLog
   } = props;
   const [page, setPage] = (0, import_react.useState)("list");
+  const [messageApi, contextHolder] = import_antd.message.useMessage({
+    prefixCls: "pisell-lowcode__pos_message"
+  });
   const [loading, setLoading] = (0, import_react.useState)(false);
   const [status, setStatus] = (0, import_react.useState)(import_const.DeviceEnum.Add);
   const tableRef = (0, import_react.useRef)();
   const deviceIdRef = (0, import_react.useRef)("");
   const [deviceItemList, setDeviceCommList] = (0, import_react.useState)([]);
   const [posItemList, setPosCommList] = (0, import_react.useState)([]);
+  const [deviceItem, setDeviceItem] = (0, import_react.useState)();
+  const [pairStatus, setPairStatus] = (0, import_react.useState)("");
+  const [pairMessage, setPairMessage] = (0, import_react.useState)("");
+  const [systemConfigStatus, setSystemConfigStatus] = (0, import_react.useState)(true);
+  const posTabRef = (0, import_react.useRef)(null);
+  const [posLoading, setPosLoading] = (0, import_react.useState)(false);
   const onDelDevice = (id) => {
     return onDel(id);
   };
@@ -169,57 +188,155 @@ var eftpos_default = (props) => {
     setStatus(import_const.DeviceEnum.Repair);
     setPage("edit");
   };
+  const pair = (0, import_hooks.usePairTerminalo)(type, { url: tyroUrl, version: tyroVersion });
+  const onLog = (device) => {
+    console.log(device);
+    setDeviceItem(device);
+    setPage("log");
+  };
   const onSave = async (device) => {
-    setLoading(true);
-    await onEdit({ ...device, type }, status || "add").catch(() => {
+    console.log("device = ", device);
+    const update = async () => {
+      await onEdit({ ...device, type }, status || "add").catch(() => {
+        setLoading(false);
+      });
       setLoading(false);
-    });
-    setLoading(false);
-    await tableRef.current.loadData();
-    setPage("list");
+      await tableRef.current.loadData();
+      setPage("list");
+    };
+    setLoading(true);
+    if (type === "tyro" && status !== "edit") {
+      pair({ ...config, ...device.connection }, (response) => {
+        console.log("response =", response);
+        setPairStatus(response.status);
+        setPairMessage(response.message);
+        if (response.status === "inProgress") {
+          messageApi.open({
+            type: "info",
+            style: {
+              zIndex: (zIndex || 9999) + 1
+            },
+            content: response.message
+          });
+          return;
+        }
+        if (response.status === "success") {
+          messageApi.open({
+            type: "success",
+            style: {
+              zIndex: (zIndex || 9999) + 1
+            },
+            content: response.message
+          });
+          device.connection.integrationKey = response.integrationKey;
+          device.status = "paired";
+          update();
+          return;
+        }
+        messageApi.open({
+          type: "warning",
+          style: {
+            zIndex: (zIndex || 9999) + 1
+          },
+          content: response.message
+        });
+        device.status = "unpaired";
+        update();
+      });
+      return;
+    }
+    update();
   };
+  const onClickByTip = () => {
+    var _a;
+    (_a = posTabRef.current) == null ? void 0 : _a.setActive("setting");
+  };
+  const getPos = (0, import_react.useCallback)(async () => {
+    if (typeof getPosComm === "function") {
+      setPosLoading(true);
+      const list = (await getPosComm(type).catch(() => {
+        setPosLoading(false);
+      })).map((item) => {
+        return {
+          ...item,
+          __sourceName: item.name
+        };
+      });
+      setPosLoading(false);
+      const obj = (0, import_const.getDefaultValue)(list);
+      const status2 = Object.values(obj).every(Boolean);
+      setSystemConfigStatus(status2);
+      setPosCommList(list);
+    }
+  }, [getPosComm]);
   const onSavePos = (pos) => {
     if (typeof savePos === "function") {
-      savePos(pos);
+      setPosLoading(true);
+      savePos(type, pos).then(() => {
+        getPos();
+      }).catch(() => {
+        setPosLoading(false);
+      });
     }
   };
+  (0, import_react.useEffect)(() => {
+    setPairStatus("");
+    setPairMessage("");
+  }, [page]);
   const onBack = () => {
     setPage("list");
   };
-  (0, import_react.useEffect)(() => {
-    if (typeof getPosComm === "function") {
-      setPosCommList(getPosComm(type));
+  const onChangeTabs = (key) => {
+    setPage("list");
+  };
+  (0, import_ahooks.useMount)(() => {
+    if (typeof getPos === "function") {
+      getPos();
     }
-  }, [type, getPosComm]);
+  });
   (0, import_react.useEffect)(() => {
     setPage("list");
   }, [type]);
-  if (type === import_const.Eftpos.Stripe) {
+  if (type === import_const.Eftpos.Windcave) {
     return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
       PosTabs,
       {
+        ref: posTabRef,
         Table: /* @__PURE__ */ import_react.default.createElement(
           import_table.default,
           {
             ref: tableRef,
             eftposName: name,
             type,
+            useTyroLog,
             tableSize,
             getList,
             onDel: onDelDevice,
             onRepair,
             onEdit: onEditDevice,
-            key: `postable${type}`
+            onLog,
+            key: `postable${type}`,
+            systemConfigStatus,
+            onClickByTip
           }
         ),
         PosForm: /* @__PURE__ */ import_react.default.createElement(
-          import_pos.default,
+          import_antd.Spin,
           {
-            eftposName: name,
-            onSave: onSavePos,
-            formItemList: posItemList
-          }
-        )
+            tip: "Loading...",
+            spinning: posLoading,
+            wrapperClassName: "pisell-lowcode__pos_setting_box"
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_pos.default,
+            {
+              eftposName: name,
+              onSave: onSavePos,
+              formItemList: posItemList
+            }
+          )
+        ),
+        onChange: onChangeTabs
       }
     ), /* @__PURE__ */ import_react.default.createElement(
       import_drawer.default,
@@ -245,10 +362,32 @@ var eftpos_default = (props) => {
             formItemList: deviceItemList,
             onSave,
             key: `posdevice${type}`
-          }
+          },
+          pairStatus ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { label: "Status" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { value: pairStatus, disabled: true })) : null,
+          pairMessage ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { label: "Message" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { value: pairMessage, disabled: true })) : null
         )
       )
-    ));
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_drawer.default,
+      {
+        open: page === "log",
+        onClose: onBack,
+        title: import_utils.locales.getText("page.eftpos.text.log"),
+        titleNoWrap: true,
+        zIndex: zIndex || 9999,
+        destroyOnClose: true,
+        className: "pisell-lowcode__pos_drawer pisell-lowcode__pos_drawer_log"
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_log.default,
+        {
+          type,
+          tyroUrl,
+          tyroVersion,
+          device: deviceItem
+        }
+      )
+    ), contextHolder);
   }
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     import_table.default,
@@ -256,12 +395,16 @@ var eftpos_default = (props) => {
       eftposName: name,
       ref: tableRef,
       type,
+      useTyroLog,
       tableSize,
       getList,
       onDel: onDelDevice,
       onRepair,
+      onLog,
       onEdit: onEditDevice,
-      key: `table${type}`
+      key: `table${type}`,
+      systemConfigStatus,
+      onClickByTip
     }
   ), /* @__PURE__ */ import_react.default.createElement(
     import_drawer.default,
@@ -287,8 +430,30 @@ var eftpos_default = (props) => {
           formItemList: deviceItemList,
           onSave,
           key: `device${type}`
-        }
+        },
+        pairStatus ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { label: "Status" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { value: pairStatus, disabled: true })) : null,
+        pairMessage ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { label: "Message" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { value: pairMessage, disabled: true })) : null
       )
     )
-  ));
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_drawer.default,
+    {
+      open: page === "log",
+      onClose: onBack,
+      title: import_utils.locales.getText("page.eftpos.text.log"),
+      titleNoWrap: true,
+      zIndex: zIndex || 9999,
+      destroyOnClose: true,
+      className: "pisell-lowcode__pos_drawer pisell-lowcode__pos_drawer_log"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_log.default,
+      {
+        type,
+        tyroUrl,
+        tyroVersion,
+        device: deviceItem
+      }
+    )
+  ), contextHolder);
 };

package/lib/components/eftpos/index.less

@@ -6,6 +6,9 @@
   background: #f2f2f7;
   color: #acacac;
   border: 1px solid #f2f2f7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .pisell-lowcode__pos_circle.active {
   background: var(--primary-600, #7f56d9);
@@ -44,6 +47,7 @@
   justify-content: center;
   cursor: pointer;
   padding: 16px 0;
+  gap: 6px;
 }
 .pisell-lowcode__pos_tabs-tab-label-tlt {
   color: #0d1619;
@@ -63,6 +67,7 @@
 .pisell-lowcode__pos_tabs-tabpane {
   display: none;
   flex: 1;
+  overflow: hidden;
 }
 .pisell-lowcode__pos_tabs-tabpane.active {
   display: flex;
@@ -70,12 +75,20 @@
 .pisell-lowcode__pos_tab-content {
   display: flex;
   flex: 1;
+  overflow: hidden;
 }
 
 .pisell-lowcode__pos_box {
   height: 100%;
 }
 
+.pisell-lowcode__pos_setting_box {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+
+
 .pisell-lowcode__pos_drawer {
   transform: translateZ(0);
 }
@@ -116,6 +129,7 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
+  overflow: hidden;
 }
 
 .pisell-lowcode__pos-table-act {
@@ -155,7 +169,8 @@
 .pisell-lowcode__pos-device {
   display: flex;
   flex-direction: column;
-  padding: 24px 32px 0 !important;
+  padding: 24px 22px 0 !important;
+  margin: 0 0 0 10px;
   overflow: hidden;
 }
 .pisell-lowcode__pos-device-btn {
@@ -167,3 +182,25 @@
   background-color: #fff;
   padding: 0 0 24px 0 !important;
 }
+
+.pisell-lowcode__pos_message {
+  z-index: var(--pisell-lc-pos-message-z-index, 9999);
+}
+
+.pisell-lowcode__pos_message .pisell-lowcode__pos_message-notice-content {
+  background-color: #fff !important;
+}
+
+.pisell-lowcode__pos_drawer_log .pisell-lowcode-drawer-body {
+  display: flex;
+  flex-direction: column;
+}
+.pisell-lowcode__pos_drawer_log
+  .pisell-lowcode-drawer-body
+  .pisell-lowcode__booking-drawer-title-wrap
+  + div {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}

package/lib/components/eftpos/locales.d.ts

@@ -26,6 +26,10 @@ declare const _default: {
         'page.eftpos.text.table.del.text': string;
         'page.eftpos.text.table.del.delete': string;
         'page.eftpos.text.table.del.cancel': string;
+        'page.eftpos.text.log': string;
+        'page.eftpos.text.setting': string;
+        'page.eftpos.text.setting.tip': string;
+        'page.eftpos.text.setting.btn': string;
     };
     'zh-CN': {
         'page.eftpos.text.manufacturer': string;
@@ -54,6 +58,10 @@ declare const _default: {
         'page.eftpos.text.table.del.text': string;
         'page.eftpos.text.table.del.delete': string;
         'page.eftpos.text.table.del.cancel': string;
+        'page.eftpos.text.log': string;
+        'page.eftpos.text.setting': string;
+        'page.eftpos.text.setting.tip': string;
+        'page.eftpos.text.setting.btn': string;
     };
     'zh-HK': {
         'page.eftpos.text.manufacturer': string;
@@ -82,6 +90,10 @@ declare const _default: {
         'page.eftpos.text.table.del.text': string;
         'page.eftpos.text.table.del.delete': string;
         'page.eftpos.text.table.del.cancel': string;
+        'page.eftpos.text.log': string;
+        'page.eftpos.text.setting': string;
+        'page.eftpos.text.setting.tip': string;
+        'page.eftpos.text.setting.btn': string;
     };
 };
 export default _default;

package/lib/components/eftpos/locales.js

@@ -55,7 +55,11 @@ var locales_default = {
     "page.eftpos.text.table.del.title": "Delete device",
     "page.eftpos.text.table.del.text": "Are you sure you want to delete the device?",
     "page.eftpos.text.table.del.delete": "Delete",
-    "page.eftpos.text.table.del.cancel": "Cancel"
+    "page.eftpos.text.table.del.cancel": "Cancel",
+    "page.eftpos.text.log": "Log",
+    "page.eftpos.text.setting": "Setting",
+    "page.eftpos.text.setting.tip": "You have not configured the necessary parameters, which may affect the normal use of your POS! ",
+    "page.eftpos.text.setting.btn": "Go to configure"
   },
   "zh-CN": {
     "page.eftpos.text.manufacturer": "厂商",
@@ -89,7 +93,11 @@ var locales_default = {
     "page.eftpos.text.table.del.title": "删除设备",
     "page.eftpos.text.table.del.text": "您确定要删除设备？",
     "page.eftpos.text.table.del.delete": "删除",
-    "page.eftpos.text.table.del.cancel": "取消"
+    "page.eftpos.text.table.del.cancel": "取消",
+    "page.eftpos.text.log": "日志",
+    "page.eftpos.text.setting": "设置",
+    "page.eftpos.text.setting.tip": "您尚未配置必要参数，这可能会影响您Pos的正常使用！",
+    "page.eftpos.text.setting.btn": "前往配置"
   },
   "zh-HK": {
     "page.eftpos.text.manufacturer": "廠商",
@@ -123,6 +131,10 @@ var locales_default = {
     "page.eftpos.text.table.del.title": "刪除設備",
     "page.eftpos.text.table.del.text": "您確定要刪除設備？",
     "page.eftpos.text.table.del.delete": "刪除",
-    "page.eftpos.text.table.del.cancel": "取消"
+    "page.eftpos.text.table.del.cancel": "取消",
+    "page.eftpos.text.log": "日誌",
+    "page.eftpos.text.setting": "设置",
+    "page.eftpos.text.setting.tip": "您尚未配置必要參數，這可能會影響您Pos的正常使用！",
+    "page.eftpos.text.setting.btn": "前往配置"
   }
 };

package/lib/components/eftpos/log.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Eftpos } from './const';
+export default function Log({ device, type, tyroUrl, tyroVersion, }: {
+    device: any;
+    type: Eftpos;
+    tyroUrl: string;
+    tyroVersion: string;
+}): React.JSX.Element;