@pisell/private-materials 3.0.110 → 3.0.112

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;
+    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,
+        {
+          extraDescription: 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>

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

@@ -0,0 +1,7 @@
+<svg width="46" height="32" viewBox="0 0 46 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Size=md, Payment method=ApplePay">
+<rect x="0.5" y="0.5" width="45" height="31" rx="5.5" fill="white"/>
+<rect x="0.5" y="0.5" width="45" height="31" rx="5.5" stroke="#F2F4F7"/>
+<path id="ApplePay" fill-rule="evenodd" clip-rule="evenodd" d="M12.6971 11.1244C12.3104 11.5936 11.6915 11.9636 11.0727 11.9108C10.9954 11.2764 11.2983 10.6023 11.6529 10.186C12.0396 9.70357 12.7165 9.35993 13.2644 9.3335C13.3288 9.99434 13.0774 10.642 12.6971 11.1244ZM13.2575 12.0363C12.7123 12.0042 12.2149 12.2044 11.8131 12.3662C11.5545 12.4702 11.3356 12.5584 11.169 12.5584C10.9821 12.5584 10.7541 12.4655 10.4981 12.3613C10.1626 12.2247 9.77915 12.0685 9.37699 12.076C8.45521 12.0892 7.59789 12.6245 7.12733 13.477C6.16042 15.1819 6.87593 17.7063 7.81061 19.0941C8.26827 19.7814 8.81619 20.5347 9.53814 20.5083C9.85576 20.496 10.0842 20.3966 10.3207 20.2938C10.5929 20.1753 10.8757 20.0523 11.3173 20.0523C11.7435 20.0523 12.0139 20.1721 12.2735 20.2871C12.5203 20.3965 12.7574 20.5015 13.1092 20.4951C13.857 20.4819 14.3275 19.8078 14.7852 19.1205C15.2791 18.3829 15.4962 17.663 15.5291 17.5538L15.533 17.5411C15.5322 17.5403 15.5261 17.5375 15.5153 17.5324L15.5153 17.5324C15.3502 17.4549 14.0883 16.8626 14.0762 15.2744C14.064 13.9414 15.0771 13.266 15.2366 13.1596L15.2366 13.1596C15.2463 13.1532 15.2528 13.1488 15.2558 13.1465C14.6112 12.1685 13.6056 12.0628 13.2575 12.0363ZM18.4337 20.4224V10.1199H22.2047C24.1514 10.1199 25.5115 11.4944 25.5115 13.5034C25.5115 15.5123 24.1256 16.9001 22.1531 16.9001H19.9937V20.4224H18.4337ZM19.9932 11.4678H21.7916C23.1453 11.4678 23.9188 12.2079 23.9188 13.5098C23.9188 14.8116 23.1453 15.5584 21.7852 15.5584H19.9932V11.4678ZM30.6619 19.1866C30.2494 19.9928 29.3405 20.5017 28.3607 20.5017C26.9103 20.5017 25.8983 19.6162 25.8983 18.2813C25.8983 16.9596 26.8781 16.1996 28.6894 16.0873L30.6361 15.9683V15.4C30.6361 14.5607 30.1011 14.1048 29.1471 14.1048C28.3607 14.1048 27.787 14.5211 27.671 15.1555H26.2657C26.3109 13.8206 27.5356 12.8492 29.1922 12.8492C30.9778 12.8492 32.1381 13.8074 32.1381 15.2943V20.4224H30.6942V19.1866H30.6619ZM28.78 19.2791C27.9485 19.2791 27.4199 18.8694 27.4199 18.2416C27.4199 17.594 27.9292 17.2173 28.9025 17.1578L30.6365 17.0455V17.627C30.6365 18.5918 29.8372 19.2791 28.78 19.2791ZM36.9274 20.8255C36.3022 22.6296 35.5866 23.2244 34.0654 23.2244C33.9493 23.2244 33.5626 23.2111 33.4723 23.1847V21.9489C33.569 21.9622 33.8075 21.9754 33.93 21.9754C34.6197 21.9754 35.0065 21.678 35.245 20.9048L35.3868 20.4488L32.7439 12.9483H34.3748L36.2119 19.0346H36.2441L38.0813 12.9483H39.667L36.9274 20.8255Z" fill="black"/>
+</g>
+</svg>

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

@@ -0,0 +1,11 @@
+<svg width="46" height="32" viewBox="0 0 46 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Size=md, Payment method=Bank transfer">
+<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 id="credit_card" d="M14.2 25C13.595 25 13.0771 24.7797 12.6463 24.3391C12.2154 23.8984 12 23.3687 12 22.75V9.25C12 8.63125 12.2154 8.10156 12.6463 7.66094C13.0771 7.22031 13.595 7 14.2 7H31.8C32.405 7 32.9229 7.22031 33.3538 7.66094C33.7846 8.10156 34 8.63125 34 9.25V22.75C34 23.3687 33.7846 23.8984 33.3538 24.3391C32.9229 24.7797 32.405 25 31.8 25H14.2Z" fill="#2E90FA"/>
+<rect id="Rectangle 1633" x="12" y="10" width="22" height="3" fill="black"/>
+<rect id="Rectangle 1634" x="13" y="15" width="9" height="2" rx="1" fill="white"/>
+<circle id="Ellipse 135" cx="30.5" cy="21.5" r="6.5" fill="#47CD89"/>
+<path id="sync_alt" d="M28.75 25L27 23.0556L28.75 21.1111L29.2487 21.6556L28.3388 22.6667H33.65V23.4444H28.3388L29.2487 24.4556L28.75 25ZM32.25 21.8889L31.7512 21.3444L32.6613 20.3333H27.35V19.5556H32.6613L31.7512 18.5444L32.25 18L34 19.9444L32.25 21.8889Z" fill="white"/>
+</g>
+</svg>

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

@@ -0,0 +1,8 @@
+<svg width="46" height="32" viewBox="0 0 46 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Size=md, Payment method=Cash">
+<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"/>
+<rect id="Rectangle 1634" x="13" y="15" width="9" height="2" rx="1" fill="white"/>
+<path id="payments" d="M13.7425 25C13.2633 25 12.8531 24.8266 12.5118 24.4799C12.1706 24.133 12 23.7161 12 23.2291V11.1875H13.7425V23.2291H31.8636V25H13.7425ZM17.2273 21.4584C16.7481 21.4584 16.3379 21.285 15.9968 20.9381C15.6554 20.5913 15.4848 20.1745 15.4848 19.6875V9.77092C15.4848 9.28394 15.6554 8.867 15.9968 8.52009C16.3379 8.17337 16.7481 8 17.2273 8H33.2575C33.7367 8 34.1469 8.17337 34.4883 8.52009C34.8294 8.867 35 9.28394 35 9.77092V19.6875C35 20.1745 34.8294 20.5913 34.4883 20.9381C34.1469 21.285 33.7367 21.4584 33.2575 21.4584H17.2273ZM19.6666 19.6875C19.6666 18.9969 19.43 18.411 18.9567 17.9299C18.4833 17.4489 17.9068 17.2084 17.2273 17.2084V19.6875H19.6666ZM30.8182 19.6875H33.2575V17.2084C32.5779 17.2084 32.0015 17.4489 31.5283 17.9299C31.0549 18.411 30.8182 18.9969 30.8182 19.6875ZM25.2425 17.9166C26.1137 17.9166 26.8543 17.6067 27.4641 16.9869C28.0739 16.3671 28.3789 15.6145 28.3789 14.7291C28.3789 13.8437 28.0739 13.0911 27.4641 12.4713C26.8543 11.8515 26.1137 11.5416 25.2425 11.5416C24.3713 11.5416 23.6308 11.8515 23.0209 12.4713C22.4111 13.0911 22.1061 13.8437 22.1061 14.7291C22.1061 15.6145 22.4111 16.3671 23.0209 16.9869C23.6308 17.6067 24.3713 17.9166 25.2425 17.9166ZM17.2273 12.25C17.9068 12.25 18.4833 12.0094 18.9567 11.5283C19.43 11.0473 19.6666 10.4615 19.6666 9.77092H17.2273V12.25ZM33.2575 12.25V9.77092H30.8182C30.8182 10.4615 31.0549 11.0473 31.5283 11.5283C32.0015 12.0094 32.5779 12.25 33.2575 12.25Z" fill="#16A616"/>
+</g>
+</svg>