@pisell/private-materials 3.0.111 → 3.0.113

package/lib/components/pay/toC/PayCountdown/index.less

@@ -0,0 +1,22 @@
+.pay-countdown {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  // margin-top: 24px;
+
+  .countdown-title {
+    color: var(--Text-Text_1, #1B1B1B);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+
+  .countdown-time {
+    color: var(--theme-color);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+}

package/lib/components/pay/toC/PaymentList/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './index.less';
+export declare type OnChangeTypeKey = 'paymentType' | 'paymentListInit';
+export interface PaymentListProps {
+    store?: {
+        paymentList?: any[];
+        paymentType?: string;
+    };
+    handlePayment: (res: any) => void;
+    paymentTypeChange: (res: any) => void;
+    hide?: boolean;
+    renderTitle?: () => React.ReactNode;
+}
+export interface PaymentListRef {
+    init: (props: any) => {};
+    calculateSurcharge: (amount: number) => any;
+}
+declare const _default: React.ForwardRefExoticComponent<PaymentListProps & React.RefAttributes<unknown>>;
+export default _default;

package/lib/components/pay/toC/PaymentList/index.js

@@ -0,0 +1,256 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pay/toC/PaymentList/index.tsx
+var PaymentList_exports = {};
+__export(PaymentList_exports, {
+  default: () => PaymentList_default
+});
+module.exports = __toCommonJS(PaymentList_exports);
+var import_react = __toESM(require("react"));
+var import_serve = require("./serve");
+var import_materials = require("@pisell/materials");
+var import_utils = require("./utils");
+var import_classnames = __toESM(require("classnames"));
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var import_index = require("./index.less");
+var import_utils2 = require("@pisell/utils");
+var offline = [
+  "pisell.offline_payment",
+  "pisell.other.cashmanual",
+  "pisell.custom_payment"
+];
+var PaymentList = (props, ref) => {
+  var _a, _b;
+  const [paymentList, setPaymentList] = (0, import_react.useState)([]);
+  const [paymentType, setPaymentType] = (0, import_react.useState)("");
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const context = (0, import_useEngineContext.default)();
+  const _paymentList = (0, import_react.useMemo)(() => {
+    var _a2;
+    return ((_a2 = props == null ? void 0 : props.store) == null ? void 0 : _a2.paymentList) || paymentList;
+  }, [paymentList, (_a = props == null ? void 0 : props.store) == null ? void 0 : _a.paymentList]);
+  const _paymentType = (0, import_react.useMemo)(() => {
+    var _a2;
+    return ((_a2 = props == null ? void 0 : props.store) == null ? void 0 : _a2.paymentType) || paymentType;
+  }, [paymentType, (_b = props == null ? void 0 : props.store) == null ? void 0 : _b.paymentType]);
+  const _getPaymentList = async (initProps) => {
+    var _a2;
+    setLoading(true);
+    const params = {
+      order_id: initProps == null ? void 0 : initProps.order.order_id,
+      total_amount: initProps == null ? void 0 : initProps.order.total_amount,
+      sale_channel: (initProps == null ? void 0 : initProps.order.sale_channel) || "online-store"
+    };
+    const res = await (0, import_serve.getPaymentList)(params);
+    const paymentList2 = res.paymentList;
+    let first = paymentList2[0];
+    (_a2 = props.paymentTypeChange) == null ? void 0 : _a2.call(props, first);
+    setPaymentList(paymentList2);
+    setPaymentType(first.service);
+    isAutoPayment(paymentList2);
+    setLoading(false);
+    return res;
+  };
+  const _calculateSurcharge = (amount) => {
+    if (!paymentList.length) {
+      return;
+    }
+    let list = (0, import_utils.calculateSurcharge)(paymentList, amount);
+    setPaymentList(list);
+    return list;
+  };
+  const init = (list) => {
+    var _a2, _b2, _c;
+    setLoading(true);
+    const platform = ((_b2 = (_a2 = context.appHelper) == null ? void 0 : _a2.constants) == null ? void 0 : _b2.platform) || "h5";
+    const paymentList2 = (_c = (0, import_serve.filterPaymentList)(list, platform)) == null ? void 0 : _c.paymentList;
+    if (paymentList2.length > 1) {
+      let first = paymentList2[0];
+      setPaymentList(paymentList2);
+      paymentTypeChange(first.service, first);
+      isAutoPayment(paymentList2);
+    }
+    setLoading(false);
+    return paymentList2;
+  };
+  const isAutoPayment = (list) => {
+    const _list = list;
+    if (_list.length === 1) {
+      let isOfflinePayment = _list.find(
+        (d) => offline.find((t) => d.service.includes(t))
+      );
+      if (isOfflinePayment) {
+        setTimeout(() => {
+          var _a2;
+          (_a2 = props.handlePayment) == null ? void 0 : _a2.call(props, isOfflinePayment);
+        }, 200);
+        return true;
+      }
+    }
+    return false;
+  };
+  const paymentTypeChange = (key, item) => {
+    var _a2;
+    setPaymentType(key);
+    (_a2 = props.paymentTypeChange) == null ? void 0 : _a2.call(props, item);
+  };
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      init,
+      calculateSurcharge: _calculateSurcharge
+    })
+  );
+  const renderToast = (_item) => {
+    var _a2, _b2, _c;
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "surcharge-modal-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "surcharge-modal-title" }, _item.title + " " + (((_a2 = _item == null ? void 0 : _item.params) == null ? void 0 : _a2.description) ? import_utils2.locales.getText("tocPay.text.paymentInstructions") : import_utils2.locales.getText("tocPay.text.serviceCharge"))), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "surcharge-info",
+        dangerouslySetInnerHTML: {
+          __html: ((_b2 = _item == null ? void 0 : _item.params) == null ? void 0 : _b2.description) ? (_c = _item == null ? void 0 : _item.params) == null ? void 0 : _c.description : _item.surcharge_fee
+        }
+      }
+    ));
+  };
+  const content = (0, import_react.useMemo)(() => {
+    if (loading) {
+      return null;
+    }
+    if (!_paymentList.length) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_materials.PisellEmpty,
+        {
+          description: import_utils2.locales.getText("tocPay.text.noAvailablePaymentMethods")
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellCheckboxGroup,
+      {
+        options: _paymentList,
+        value: _paymentType,
+        iconPosition: "right",
+        mode: "single",
+        rowKey: "service",
+        className: "payment-list",
+        gap: 12,
+        onChange: paymentTypeChange,
+        optionClassName: "payment-item",
+        renderOption: (d, active) => {
+          var _a2, _b2;
+          const showIcon = d.surcharge && d.service !== "pisell.other.cashmanual" && d.service !== "pisell.custom_payment" || ((_a2 = d == null ? void 0 : d.params) == null ? void 0 : _a2.description) && (d.service === "pisell.other.cashmanual" || d.service === "pisell.custom_payment");
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_materials.PisellRow,
+            {
+              platform: "h5",
+              key: d.service,
+              gap: 12,
+              centerContentFill: true,
+              leftContent: /* @__PURE__ */ import_react.default.createElement("img", { className: "payment-type-image", src: d.url }),
+              centerContent: /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  className: (0, import_classnames.default)("payment-name", {
+                    "text-active-color": active
+                  })
+                },
+                /* @__PURE__ */ import_react.default.createElement(
+                  "div",
+                  {
+                    className: (0, import_classnames.default)("payment-name-text", {
+                      "text-active-color": active
+                    })
+                  },
+                  d.title,
+                  " "
+                ),
+                /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, (((_b2 = d == null ? void 0 : d.params) == null ? void 0 : _b2.description) || d.surcharge) && d.service !== "pisell.offline_payment" ? /* @__PURE__ */ import_react.default.createElement(
+                  import_materials.PisellTooltip,
+                  {
+                    title: renderToast(d),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    }
+                  },
+                  /* @__PURE__ */ import_react.default.createElement(
+                    "span",
+                    {
+                      className: (0, import_classnames.default)("surcharge-wrap", {
+                        "text-active-color": active
+                      })
+                    },
+                    d.surcharge ? /* @__PURE__ */ import_react.default.createElement(
+                      "span",
+                      {
+                        className: (0, import_classnames.default)("surcharge", {
+                          "text-active-color": active
+                        })
+                      },
+                      d.surcharge,
+                      " "
+                    ) : null,
+                    showIcon ? /* @__PURE__ */ import_react.default.createElement(
+                      import_materials.Iconfont,
+                      {
+                        type: "pisell2-help-circle",
+                        className: (0, import_classnames.default)("icon", {
+                          "text-active-color": active
+                        })
+                      }
+                    ) : null
+                  )
+                ) : null, d.payment_method && d.service === "pisell.offline_payment" ? /* @__PURE__ */ import_react.default.createElement(
+                  import_materials.PisellTooltip,
+                  {
+                    title: renderToast(d),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    }
+                  },
+                  /* @__PURE__ */ import_react.default.createElement("div", { className: "surcharge-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+                    import_materials.Iconfont,
+                    {
+                      type: "pisell2-help-circle",
+                      className: (0, import_classnames.default)("icon", {
+                        "text-active-color": active
+                      })
+                    }
+                  ))
+                ) : null)
+              )
+            }
+          );
+        }
+      }
+    );
+  }, [_paymentList, _paymentType, loading]);
+  return props.hide ? null : /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "payment-header" }, props.renderTitle ? props.renderTitle() : import_utils2.locales.getText("tocPay.text.paymentMethod")), content);
+};
+var PaymentList_default = (0, import_react.forwardRef)(PaymentList);

package/lib/components/pay/toC/PaymentList/index.less

@@ -0,0 +1,112 @@
+.payment-list {
+  margin-top: 10px;
+  margin-bottom: 12px;
+
+  .payment-item {
+    padding: 16px;
+
+    .payment-type-icon-wrap {
+      width: 27px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .payment-type-icon {
+        font-size: 27px;
+        color: var(--theme-color);
+      }
+    }
+
+
+
+    .payment-type-image {
+      width: 46px;
+      height: 32px;
+      object-fit: contain;
+      border-radius: 0 !important;
+      border: none !important;
+      background: var(--Base-White, #FFF);
+      padding: 0 !important;
+      display: block;
+    }
+
+    .payment-name {
+      flex-direction: column;
+      display: flex;
+      min-height: 44px;
+      justify-content: center;
+
+      .payment-name-text {
+        color: var(--Gray-700, #101828);
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 20px;
+      }
+
+      .surcharge-wrap {
+        display: inline;
+        position: relative;
+        z-index: 2;
+        vertical-align: middle;
+
+        .surcharge {
+          color: var(--Gray-600, #667085);
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 18px;
+          margin-right: 6px;
+          vertical-align: middle;
+        }
+
+        .icon {
+          vertical-align: middle;
+          // display: flex;
+          // align-items: center;
+          // justify-content: center;
+          // width: 18px;
+          // height: 18px;
+          font-size: 18px;
+          color: #475467;
+        }
+      }
+    }
+
+  }
+}
+
+
+.text-active-color {
+  color: var(--theme-color) !important;
+}
+
+.payment-header {
+  color: var(--Gray-900, #101828);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28px;
+  margin-top: 20px;
+
+}
+
+.surcharge-modal-wrap {
+  text-align: left;
+  padding: 6px 4px;
+
+  .surcharge-modal-title {
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 18px;
+  }
+
+  .surcharge-info {
+    margin-top: 4px;
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+  }
+}

package/lib/components/pay/toC/PaymentList/mock.d.ts

@@ -0,0 +1,88 @@
+export declare const mockList: ({
+    icon: string;
+    name: string;
+    service: string;
+    surcharge: string;
+    surcharge_fee: string;
+    params?: undefined;
+} | {
+    icon: string;
+    name: string;
+    service: string;
+    surcharge: string;
+    surcharge_fee: string;
+    params: {
+        type_list: string[];
+        payment_method?: undefined;
+        custom_payment_id?: undefined;
+        code?: undefined;
+        name?: undefined;
+        type?: undefined;
+        description?: undefined;
+        voucher_tag?: undefined;
+    };
+} | {
+    icon: string;
+    name: string;
+    service: string;
+    surcharge: string;
+    surcharge_fee: string;
+    params: {
+        payment_method: string;
+        type_list?: undefined;
+        custom_payment_id?: undefined;
+        code?: undefined;
+        name?: undefined;
+        type?: undefined;
+        description?: undefined;
+        voucher_tag?: undefined;
+    };
+} | {
+    icon: string;
+    name: string;
+    service: string;
+    surcharge: string;
+    surcharge_fee: string;
+    params: {
+        custom_payment_id: number;
+        code: string;
+        name: string;
+        type: string;
+        description: string;
+        type_list?: undefined;
+        payment_method?: undefined;
+        voucher_tag?: undefined;
+    };
+} | {
+    icon: string;
+    name: string;
+    service: string;
+    surcharge: string;
+    surcharge_fee: string;
+    params: {
+        custom_payment_id: number;
+        code: string;
+        name: string;
+        type: string;
+        description: string;
+        voucher_tag: string;
+        type_list?: undefined;
+        payment_method?: undefined;
+    };
+} | {
+    icon: string;
+    name: string;
+    service: string;
+    surcharge: string;
+    surcharge_fee: string;
+    params: {
+        custom_payment_id: number;
+        code: string;
+        name: string;
+        type: string;
+        description: null;
+        type_list?: undefined;
+        payment_method?: undefined;
+        voucher_tag?: undefined;
+    };
+})[];

package/lib/components/pay/toC/PaymentList/mock.js

@@ -0,0 +1,174 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pay/toC/PaymentList/mock.ts
+var mock_exports = {};
+__export(mock_exports, {
+  mockList: () => mockList
+});
+module.exports = __toCommonJS(mock_exports);
+var mockList = [
+  {
+    "icon": "alipay",
+    "name": "Alipay",
+    "service": "superpay.alipay.h5",
+    "surcharge": "Surcharge: A$2.90",
+    "surcharge_fee": "2.00% + A$2.00"
+  },
+  {
+    "icon": "wechat",
+    "name": "WeChat Pay",
+    "service": "superpay.wechat.h5",
+    "surcharge": "Surcharge: A$2.90",
+    "surcharge_fee": "2.00% + A$2.00"
+  },
+  {
+    "icon": "stripe",
+    "name": "Online Payment",
+    "service": "stripe",
+    "surcharge": "Surcharge: A$2.90",
+    "surcharge_fee": "5.12% + A$0.60"
+  },
+  {
+    "icon": "apple",
+    "name": "Apple Pay",
+    "service": "mw.apple",
+    "surcharge": "Surcharge: A$0.10 ~ A$1.05",
+    "surcharge_fee": "Domestic 2.10% + A$0.10<br/>Rest Of World 0.00% + A$0.10"
+  },
+  {
+    "icon": "google",
+    "name": "Google Pay",
+    "service": "mw.google",
+    "surcharge": "Surcharge: A$1.40 ~ A$2.30",
+    "surcharge_fee": "Domestic 3.00% + A$0.05<br/>Rest Of World 5.00% + A$0.05"
+  },
+  {
+    "icon": "credit_card",
+    "name": "Visa / Master",
+    "service": "mw.credit_card",
+    "surcharge": "Surcharge: A$3.80 ~ A$5.15",
+    "surcharge_fee": "Visa<br/>Domestic 1.10% + A$4.00<br/>Rest Of World 2.00% + A$3.00<br/>Master<br/>Domestic 4.00% + A$2.00<br/>Rest Of World 7.00% + A$2.00",
+    "params": {
+      "type_list": [
+        "visa",
+        "master"
+      ]
+    }
+  },
+  {
+    "icon": "wallet_pass",
+    "name": "Wallet Pass",
+    "service": "pisell.wallet_pass",
+    "surcharge": "",
+    "surcharge_fee": ""
+  },
+  {
+    "icon": "bank_deposit",
+    "name": "Bank Deposit",
+    "service": "pisell.bank_deposit",
+    "surcharge": "",
+    "surcharge_fee": ""
+  },
+  {
+    "icon": "offline_payment",
+    "name": "Offline Payment",
+    "service": "pisell.offline_payment",
+    "surcharge": "",
+    "surcharge_fee": "",
+    "params": {
+      "payment_method": ""
+    }
+  },
+  {
+    "icon": "cashmanual",
+    "name": "Cash",
+    "service": "pisell.other.cashmanual",
+    "surcharge": "",
+    "surcharge_fee": "",
+    "params": {
+      "custom_payment_id": 20,
+      "code": "CASHMANUAL",
+      "name": "Cash",
+      "type": "default",
+      "description": ""
+    }
+  },
+  {
+    "icon": "productvoucher",
+    "name": "Voucher",
+    "service": "pisell.other.productvoucher",
+    "surcharge": "Surcharge: A$0.00",
+    "surcharge_fee": "0.00% + A$0.00",
+    "params": {
+      "custom_payment_id": 1882,
+      "code": "PRODUCTVOUCHER",
+      "name": "Voucher",
+      "type": "app",
+      "description": "",
+      "voucher_tag": "product_voucher"
+    }
+  },
+  {
+    "icon": "giftcard",
+    "name": "Rechargable Card",
+    "service": "pisell.other.giftcard",
+    "surcharge": "Surcharge: A$0.00",
+    "surcharge_fee": "0.00% + A$0.00",
+    "params": {
+      "custom_payment_id": 1988,
+      "code": "GIFTCARD",
+      "name": "Rechargable Card",
+      "type": "app",
+      "description": "",
+      "voucher_tag": "gift_card"
+    }
+  },
+  {
+    "icon": "custom_payment",
+    "name": "test_custom_111",
+    "service": "pisell.custom_payment",
+    "surcharge": "",
+    "surcharge_fee": "",
+    "params": {
+      "custom_payment_id": 2545,
+      "code": "CUSTOM_2545",
+      "name": "test_custom_111",
+      "type": "custom",
+      "description": "12123"
+    }
+  },
+  {
+    "icon": "custom_payment",
+    "name": "旧礼卡",
+    "service": "pisell.custom_payment",
+    "surcharge": "",
+    "surcharge_fee": "",
+    "params": {
+      "custom_payment_id": 2358,
+      "code": "CUSTOM_2358",
+      "name": "旧礼卡",
+      "type": "custom",
+      "description": null
+    }
+  }
+];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  mockList
+});

package/lib/components/pay/toC/PaymentList/payment/alipay.svg

@@ -0,0 +1,13 @@
+<svg width="46" height="32" viewBox="0 0 46 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="45" height="31" rx="3.5" fill="white"/>
+<rect x="0.5" y="0.5" width="45" height="31" rx="3.5" stroke="#F2F4F7"/>
+<path d="M11.8395 11.731H5.49541C4.66923 11.731 4 12.4064 4 13.2387V19.6365C4 20.4689 4.66923 21.1443 5.49541 21.1443H11.8395C12.6656 21.1443 13.334 20.4689 13.334 19.6365V13.2387C13.3349 12.4055 12.6656 11.731 11.8395 11.731Z" fill="#1677FF"/>
+<path d="M11.6854 17.642C11.3124 17.5159 10.8107 17.3228 10.2526 17.1191C10.5876 16.531 10.8557 15.8618 11.032 15.1343H9.19185V14.466H11.4455V14.093H9.19185V12.9785H8.2722C8.11085 12.9785 8.11085 13.139 8.11085 13.139V14.0921H5.83157V14.4651H8.11085V15.1335H6.22835V15.5064H9.87872C9.74557 15.9702 9.5657 16.4067 9.3532 16.8026C8.16904 16.4084 6.90464 16.0893 6.11108 16.2859C5.60321 16.412 5.27609 16.6368 5.08387 16.8731C4.20214 17.955 4.83434 19.5985 6.69655 19.5985C7.79783 19.5985 8.85855 18.9796 9.68033 17.9594C10.9068 18.5537 13.3342 19.5747 13.3342 19.5747V18.1199C13.3351 18.1199 13.03 18.0952 11.6854 17.642ZM6.52285 18.9699C5.07064 18.9699 4.64124 17.8166 5.35897 17.1852C5.5988 16.9719 6.03614 16.8678 6.26891 16.8449C7.13124 16.7594 7.93009 17.0909 8.87266 17.5547C8.21048 18.4258 7.36667 18.9699 6.52285 18.9699Z" fill="white"/>
+<path d="M24.2686 13.1092C24.2686 13.5959 24.6248 13.9239 25.1212 13.9239C25.6176 13.9239 25.9738 13.5959 25.9738 13.1092C25.9738 12.6313 25.6176 12.2944 25.1212 12.2944C24.6248 12.2944 24.2686 12.6313 24.2686 13.1092Z" fill="#1677FF"/>
+<path d="M23.3692 12.5H21.8896V19.3369H23.3692V12.5Z" fill="black"/>
+<path d="M19.2958 12.7344H17.3101L15.0908 19.3377H16.4584L16.8331 18.045H19.1838L19.54 19.3377H21.2911L19.2958 12.7344ZM17.1417 16.9676L18.0217 13.9238H18.0587L18.892 16.9676H17.1417Z" fill="black"/>
+<path d="M25.8604 14.3174H24.3809V19.338H25.8604V14.3174Z" fill="black"/>
+<path d="M41.3244 14.3266L41.3333 14.3169H39.9384L39.0575 17.3703H39.0108L37.9994 14.3169H36.3418L38.3363 19.356L37.503 20.892V20.929H38.8045L41.3244 14.3266Z" fill="black"/>
+<path d="M29.5422 14.2139C28.999 14.2139 28.5776 14.4202 28.0997 14.8134V14.317H26.6201V20.9291H28.0997V19.29C28.3809 19.3649 28.6428 19.4028 28.9611 19.4028C30.2819 19.4028 31.4714 18.4285 31.4714 16.6959C31.4714 15.1414 30.6099 14.2139 29.5422 14.2139ZM28.6049 18.4753C28.4365 18.4753 28.2769 18.4568 28.0988 18.4003V15.6846C28.4083 15.4695 28.6604 15.3663 28.9787 15.3663C29.5316 15.3663 29.9716 15.8063 29.9716 16.7436C29.9725 17.9418 29.3261 18.4753 28.6049 18.4753Z" fill="black"/>
+<path d="M36.051 18.082V15.9844C36.051 14.8417 35.3765 14.2139 34.187 14.2139C33.4279 14.2139 32.9041 14.3452 31.9483 14.6353L32.2102 15.7878C33.0814 15.3945 33.4649 15.2261 33.8679 15.2261C34.3546 15.2261 34.5706 15.5726 34.5706 16.1069V16.144C32.875 16.4623 32.3504 16.6404 32.0233 16.9684C31.7799 17.2117 31.6768 17.5583 31.6768 17.9612C31.6768 18.9258 32.4262 19.4408 33.1281 19.4408C33.6527 19.4408 34.0742 19.2441 34.6455 18.813L34.7487 19.3376H36.2283L36.051 18.082ZM34.5715 18.1199C34.1782 18.3351 33.9534 18.4197 33.6915 18.4197C33.3353 18.4197 33.1105 18.1852 33.1105 17.8113C33.1105 17.6711 33.1387 17.5301 33.2507 17.4181C33.4288 17.24 33.7753 17.1086 34.5715 16.9217V18.1199Z" fill="black"/>
+</svg>