@pisell/private-materials 3.3.26 → 3.3.27

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

@@ -37,38 +37,113 @@ var import_materials = require("@pisell/materials");
 var import_classnames = __toESM(require("classnames"));
 var import_utils = require("@pisell/utils");
 var import_WalletPass = __toESM(require("../PaymentMethods/WalletPass"));
+var import_WalletAvailable = __toESM(require("./components/WalletAvailable"));
+var import_WalletBestValueFound = __toESM(require("./components/WalletBestValueFound"));
+var import_WalletUseList = __toESM(require("./components/WalletUseList"));
 var import_index = require("./index.less");
-var WalletPassBlock = (props) => {
-  var _a;
-  const { className, payGroup, onWalletPassChange, customer_id, ...others } = props;
+var import_icons = require("@ant-design/icons");
+var WalletPassBlock = (props, ref) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    className,
+    payGroup,
+    onWalletPassChange,
+    customer_id,
+    walletSetting,
+    ...others
+  } = props;
   const walletPassRef = (0, import_react.useRef)(null);
+  const walletAvailableRef = (0, import_react.useRef)(null);
+  const walletBestValueFoundRef = (0, import_react.useRef)(null);
+  const [isViewDetail, setIsViewDetail] = (0, import_react.useState)(false);
+  const contentRef = (0, import_react.useRef)(null);
+  const [contentHeight, setContentHeight] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (contentRef.current) {
+      const scrollHeight = contentRef.current.scrollHeight;
+      setContentHeight(isViewDetail ? scrollHeight : 0);
+    }
+  }, [isViewDetail, (_a = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _a.cards]);
   const handleClick = () => {
     var _a2;
+    setIsViewDetail(false);
     (_a2 = walletPassRef.current) == null ? void 0 : _a2.init({ ...payGroup, customer_id });
   };
-  const centerContentDesc = (0, import_react.useMemo)(() => {
-    var _a2, _b, _c;
-    if (!((_a2 = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _a2.amount) || ((_b = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _b.amount) == 0) {
-      return import_utils.locales.getText("tocPay.text.walletCanPay");
-    } else {
-      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, import_utils.locales.getText("tocPay.text.congrats"), " ", /* @__PURE__ */ import_react.default.createElement(
-        import_materials.PisellText.Amount,
-        {
-          value: (_c = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _c.amount,
-          className: "price"
-        }
-      ), " ", import_utils.locales.getText("tocPay.text.creditHaveBeen"));
+  const hasNoWalletPassAmount = (0, import_react.useMemo)(() => {
+    var _a2, _b2;
+    return !((_a2 = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _a2.amount) || ((_b2 = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _b2.amount) == 0;
+  }, [(_b = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _b.amount]);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    open: () => {
+      var _a2, _b2;
+      if (hasNoWalletPassAmount) {
+        (_a2 = walletAvailableRef.current) == null ? void 0 : _a2.open();
+      } else {
+        (_b2 = walletBestValueFoundRef.current) == null ? void 0 : _b2.open();
+      }
     }
-  }, [(_a = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _a.amount]);
+  }));
+  const handleViewDetail = (e) => {
+    e.stopPropagation();
+    setIsViewDetail(!isViewDetail);
+  };
+  const handleUnused = () => {
+    onWalletPassChange == null ? void 0 : onWalletPassChange({
+      cards: [],
+      amount: 0
+    });
+  };
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { ...others, className: (0, import_classnames.default)("wallet-pass-wrap", className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-title" }, import_utils.locales.getText("tocPay.text.howToPay")), /* @__PURE__ */ import_react.default.createElement(
     import_materials.PisellRow,
     {
       className: "wallet-pass-card",
-      centerContent: /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-card-title" }, import_utils.locales.getText("tocPay.text.walletPass")), /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-card-desc" }, centerContentDesc), /* @__PURE__ */ import_react.default.createElement(
+      centerContent: /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-card-title" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-card-title-left" }, /* @__PURE__ */ import_react.default.createElement(
+        import_materials.Icon,
+        {
+          type: "pisell2-a-wallet-021",
+          className: "wallet-pass-card-title-left-icon"
+        }
+      ), walletSetting.name), walletSetting.popup_status === 1 && /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-card-title-right" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "wallet-pass-card-title-right-amount" }, "-", /* @__PURE__ */ import_react.default.createElement(import_materials.PisellText.Amount, { value: (_c = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _c.amount })), /* @__PURE__ */ import_react.default.createElement(import_icons.CaretRightOutlined, { className: "wallet-pass-card-title-right-icon" }))), walletSetting.popup_status === 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-card-desc-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-card-desc" }, hasNoWalletPassAmount ? import_utils.locales.getText(
+        "tocPay.text.hasNoWalletPassAmount"
+      ) : import_utils.locales.getText("tocPay.text.bestValueFound")), !hasNoWalletPassAmount && /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-card-total-savings" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-pass-card-total-savings-title" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "wallet-pass-card-total-savings-title-left" }, import_utils.locales.getText("tocPay.text.totalSavings"), ":", /* @__PURE__ */ import_react.default.createElement(
+        import_materials.PisellText.Amount,
+        {
+          value: (_d = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _d.amount
+        }
+      )), /* @__PURE__ */ import_react.default.createElement(
+        "span",
+        {
+          className: "wallet-pass-card-total-savings-title-right",
+          onClick: handleViewDetail
+        },
+        import_utils.locales.getText("tocPay.text.viewDetail"),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_materials.Icon,
+          {
+            type: "pisell2-chevron-down",
+            className: (0, import_classnames.default)(
+              "wallet-pass-card-total-savings-title-right-icon",
+              {
+                "is-rotate": isViewDetail
+              }
+            )
+          }
+        )
+      )), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          ref: contentRef,
+          className: "wallet-pass-card-total-savings-desc",
+          style: { height: contentHeight }
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_WalletUseList.default, { walletPass: ((_e = payGroup == null ? void 0 : payGroup.walletPass) == null ? void 0 : _e.cards) || [] })
+      ))), /* @__PURE__ */ import_react.default.createElement(
         import_materials.Button,
         {
           size: "large",
           className: "wallet-pass-card-to-use",
+          type: "primary",
+          block: true,
           rightIcon: /* @__PURE__ */ import_react.default.createElement(
             import_materials.Iconfont,
             {
@@ -77,8 +152,10 @@ var WalletPassBlock = (props) => {
             }
           )
         },
-        import_utils.locales.getText("tocPay.text.toUse")
-      )),
+        import_utils.locales.getText(
+          hasNoWalletPassAmount ? "tocPay.text.useWalletPass" : "tocPay.text.editWalletPass"
+        )(walletSetting.name)
+      ))),
       padding: 16,
       gap: 4,
       onClick: handleClick
@@ -87,9 +164,27 @@ var WalletPassBlock = (props) => {
     import_WalletPass.default,
     {
       ref: walletPassRef,
+      walletSetting,
       onWalletPassChange,
       walletPass: payGroup == null ? void 0 : payGroup.walletPass
     }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_WalletAvailable.default,
+    {
+      ref: walletAvailableRef,
+      walletSetting,
+      payGroup,
+      onOk: handleClick
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_WalletBestValueFound.default,
+    {
+      ref: walletBestValueFoundRef,
+      walletSetting,
+      payGroup,
+      onEdit: handleClick,
+      onUnused: handleUnused
+    }
   ));
 };
-var WalletPassBlock_default = WalletPassBlock;
+var WalletPassBlock_default = (0, import_react.forwardRef)(WalletPassBlock);

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

@@ -4,11 +4,12 @@
     margin-top: 8px;
     .wallet-pass-card-icon {
       font-size: 20px;
-      color: #344054;
+      color: #fff;
     }
     & > span {
       display: flex;
       align-items: center;
+      justify-content: center;
     }
   }
 
@@ -23,27 +24,45 @@
   .wallet-pass-card {
     margin-top: 20px;
     border-radius: 12px;
-    border: 1px solid var(--Gray-400, #98A2B3);
-    background: var(--Base-White, #FFF);
+    border: 1px solid var(--Gray-400, #98a2b3);
+    background: var(--Base-White, #fff);
+    .pisell-row-center {
+      width: 100%;
+    }
 
     .wallet-pass-card-title {
+      display: flex;
+      justify-content: space-between;
       color: var(--Gray-900, #101828);
       font-size: 16px;
-      font-style: normal;
       font-weight: 600;
       line-height: 20px;
+      gap: 6px;
+      .wallet-pass-card-title-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        .wallet-pass-card-title-left-icon {
+          font-size: 22px;
+        }
+      }
+      .wallet-pass-card-title-right {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-shrink: 0;
+        .wallet-pass-card-title-right-icon {
+          font-size: 14px;
+        }
+      }
     }
 
     .wallet-pass-card-desc {
-      color: var(--Gray-600, #101828);
+      color: #757575;
       font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px;
-
-      .price {
-        color: var(--theme-color, #7F56D9);
-      }
+      font-weight: 500;
+      line-height: 20px; /* 142.857% */
+      margin: 4px 0 0;
     }
 
     //.wallet-pass-card-icon {
@@ -73,4 +92,54 @@
     line-height: 24px;
     /* 150% */
   }
-}
+
+  .wallet-pass-card-desc-wrap {
+    .wallet-pass-card-total-savings {
+      .wallet-pass-card-total-savings-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .wallet-pass-card-total-savings-title-left {
+          color: #009951;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 28px; /* 175% */
+        }
+        .wallet-pass-card-total-savings-title-right {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          color: #757575;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 20px; /* 166.667% */
+          padding: 7px 0 7px 0px;
+          .wallet-pass-card-total-savings-title-right-icon {
+            font-size: 18px;
+            color: #344054;
+            transition: transform 0.3s ease;
+            
+            &.is-rotate {
+              transform: rotate(180deg);
+            }
+          }
+        }
+      }
+
+      .wallet-pass-card-total-savings-desc {
+        overflow: hidden;
+        opacity: 0;
+        transition: all 0.3s ease-in-out;
+        will-change: height, opacity;
+
+        &[style*="height: 0"] {
+          opacity: 0;
+        }
+
+        &:not([style*="height: 0"]) {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

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

@@ -51,7 +51,7 @@ var import_locales = __toESM(require("./locales"));
 var import_utils3 = require("./utils");
 var import_index = require("./index.less");
 var ToCPay = (props, ref) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const { state, dispatch } = (0, import_react.useContext)(import_model.Context);
   const paymentListRef = (0, import_react.useRef)();
   const paymentMethodsRef = (0, import_react.useRef)();
@@ -59,13 +59,15 @@ var ToCPay = (props, ref) => {
   const [submitLoading, setSubmitLoading] = (0, import_react.useState)(false);
   const [open, setOpen] = (0, import_react.useState)(false);
   const [renderType, setRenderType] = (0, import_react.useState)("modal");
+  const walletPassBlockRef = (0, import_react.useRef)(null);
   const context = (0, import_useEngineContext.default)();
   const [showInformation, setShowInformation] = (0, import_react.useState)(false);
   const [showDetectIncognitoConfirm, setShowDetectIncognitoConfirm] = (0, import_react.useState)(false);
   const utils = context.appHelper.utils || {};
   const dvaStore = (_c = (_b = (_a = context.appHelper.utils) == null ? void 0 : _a.getStore) == null ? void 0 : _b.call(_a)) == null ? void 0 : _c.getState();
   const customer_id = (_i = (_h = (_g = (_f = (_e = (_d = context.appHelper.utils) == null ? void 0 : _d.getStore()) == null ? void 0 : _e.getState) == null ? void 0 : _f.call(_e)) == null ? void 0 : _g.global) == null ? void 0 : _h.userInfo) == null ? void 0 : _i.id;
-  import_utils.locales.init(import_locales.default, ((_j = dvaStore.core) == null ? void 0 : _j.translateLocale) || "en");
+  const shopName = (_l = (_k = (_j = dvaStore.core) == null ? void 0 : _j.core) == null ? void 0 : _k.shop) == null ? void 0 : _l.name;
+  import_utils.locales.init(import_locales.default, ((_m = dvaStore.core) == null ? void 0 : _m.translateLocale) || "en");
   import_utils2.request.setRequest(utils == null ? void 0 : utils.request);
   const _initStore = (initProps) => {
     var _a2, _b2, _c2, _d2;
@@ -88,6 +90,27 @@ var ToCPay = (props, ref) => {
       }
     });
   };
+  const getWalletSetting = async (initProps) => {
+    var _a2, _b2;
+    const sale_channel = ((_a2 = initProps == null ? void 0 : initProps.order) == null ? void 0 : _a2.sale_channel) || "online-store";
+    const { wallet, wallet_setting } = await (0, import_serve.getWalletNameAndPopupStatus)({
+      setting_type: `${sale_channel}-wallet-setting`
+    });
+    const setting = {
+      name: ((_b2 = utils == null ? void 0 : utils.translation) == null ? void 0 : _b2.call(utils, wallet == null ? void 0 : wallet.name)) || import_utils.locales.getText("tocPay.text.walletName")(shopName),
+      popup_status: (wallet_setting == null ? void 0 : wallet_setting.popup_status) ?? 1
+    };
+    if (setting.popup_status === 1) {
+      setTimeout(() => {
+        var _a3;
+        (_a3 = walletPassBlockRef.current) == null ? void 0 : _a3.open();
+      });
+    }
+    dispatch({
+      type: "setWalletSetting",
+      payload: setting
+    });
+  };
   const init = async (initProps) => {
     const { renderType: renderType2 } = initProps;
     setRenderType(renderType2 ?? "modal");
@@ -97,6 +120,7 @@ var ToCPay = (props, ref) => {
     _initStore(initProps);
     (0, import_payGroup.removePayGroupFromStorage)(initProps.order.order_id);
     await _getPaymentsAndWalletPass(initProps.order);
+    await getWalletSetting(initProps);
   };
   const _getPaymentsAndWalletPass = async (order) => {
     var _a2, _b2;
@@ -193,7 +217,7 @@ var ToCPay = (props, ref) => {
   const waitAmount = (0, import_react.useMemo)(() => {
     var _a2;
     return ((_a2 = state.payGroup) == null ? void 0 : _a2.wait_amount) || 0;
-  }, [(_k = state.payGroup) == null ? void 0 : _k.wait_amount]);
+  }, [(_n = state.payGroup) == null ? void 0 : _n.wait_amount]);
   const isWalletPassPay = (0, import_react.useMemo)(() => {
     var _a2, _b2, _c2;
     const isWalletPass = (_c2 = (_b2 = (_a2 = state.payGroup) == null ? void 0 : _a2.walletPass) == null ? void 0 : _b2.cards) == null ? void 0 : _c2.length;
@@ -267,7 +291,7 @@ var ToCPay = (props, ref) => {
     (_b2 = paymentListRef.current) == null ? void 0 : _b2.calculateSurcharge(
       ((_a2 = state.payGroup) == null ? void 0 : _a2.wait_amount) || 0
     );
-  }, [(_l = state.payGroup) == null ? void 0 : _l.wait_amount]);
+  }, [(_o = state.payGroup) == null ? void 0 : _o.wait_amount]);
   (0, import_react.useImperativeHandle)(ref, () => {
     return {
       init,
@@ -381,14 +405,16 @@ var ToCPay = (props, ref) => {
         loading,
         mask: true
       },
-      ((_m = state.order) == null ? void 0 : _m.countdown) && /* @__PURE__ */ import_react.default.createElement(import_PayCountdown.default, { time: (_n = state.order) == null ? void 0 : _n.countdown }),
-      /* @__PURE__ */ import_react.default.createElement(import_PayAmount.default, { amount: ((_o = state.payGroup) == null ? void 0 : _o.total_amount) || 0 }),
-      ((_p = state.payGroup) == null ? void 0 : _p.walletPass) && /* @__PURE__ */ import_react.default.createElement(
+      ((_p = state.order) == null ? void 0 : _p.countdown) && /* @__PURE__ */ import_react.default.createElement(import_PayCountdown.default, { time: (_q = state.order) == null ? void 0 : _q.countdown }),
+      /* @__PURE__ */ import_react.default.createElement(import_PayAmount.default, { amount: ((_r = state.payGroup) == null ? void 0 : _r.total_amount) || 0 }),
+      ((_s = state.payGroup) == null ? void 0 : _s.walletPass) && /* @__PURE__ */ import_react.default.createElement(
         import_WalletPassBlock.default,
         {
           customer_id,
           payGroup: state.payGroup,
-          onWalletPassChange
+          onWalletPassChange,
+          ref: walletPassBlockRef,
+          walletSetting: state.walletSetting
         }
       ),
       /* @__PURE__ */ import_react.default.createElement(
@@ -399,7 +425,7 @@ var ToCPay = (props, ref) => {
             handlePaymentByType(detail == null ? void 0 : detail.service);
           },
           paymentTypeChange,
-          hide: ((_q = state.payGroup) == null ? void 0 : _q.wait_amount) == 0,
+          hide: ((_t = state.payGroup) == null ? void 0 : _t.wait_amount) == 0,
           renderTitle: renderPaymentListTitle
         }
       )

package/lib/components/pay/toC/locales.d.ts

@@ -60,7 +60,7 @@ declare const _default: {
         'tocPay.text.scanBarQrCode': string;
         'tocPay.text.enterCodes': string;
         'tocPay.text.searchDescribe': string;
-        'tocPay.text.walletPassEmpty': string;
+        'tocPay.text.walletPassEmpty': (walletName: string) => string;
         'tocPay.text.walletPassDisabled': string;
         'tocPay.text.walletPassPermanent': string;
         'tocPay.text.walletPassCompleteTitle': string;
@@ -71,6 +71,28 @@ declare const _default: {
         'tocPay.text.detectIncognitoConfirm': string;
         'tocPay.text.copyLink': string;
         'tocPay.text.copySuccess': string;
+        'tocPay.text.walletName': (shopName: string) => string;
+        'tocPay.text.bestValueFound': string;
+        'tocPay.text.welcomeToUseWalletPass': (walletName: string) => string;
+        'tocPay.text.totalSavings': string;
+        'tocPay.text.bestCombination': (walletName: string) => string;
+        'tocPay.text.recommended': string;
+        'tocPay.text.edit': string;
+        'tocPay.text.confirm': string;
+        'tocPay.text.unusedAndContinueToPayment': string;
+        'tocPay.text.walletPassAvailable': (walletName: string) => string;
+        'tocPay.text.useWalletPass': (walletName: string) => string;
+        'tocPay.text.useWalletPassAdd': (walletName: string) => string;
+        'tocPay.text.editWalletPass': (walletName: string) => string;
+        'tocPay.text.skipAndContinueToPayment': string;
+        'tocPay.text.youMightHaveAnEligibleWalletPass': (walletName: string) => string;
+        'tocPay.text.checkIfYouHaveAnyPointsCardRechargableCardOrVouchersToUse': string;
+        'tocPay.text.addPointsCard': string;
+        'tocPay.text.hasNoWalletPassAmount': string;
+        'tocPay.text.multipleSelectionAvailable': string;
+        'tocPay.text.youCanSelectMultipleWalletPassesToCombineForPayment': (walletName: string) => string;
+        'tocPay.text.bestValueCombination': string;
+        'tocPay.text.viewDetail': string;
     };
     'zh-CN': {
         'tocPay.text.checkout': string;
@@ -133,7 +155,7 @@ declare const _default: {
         'tocPay.text.scanBarQrCode': string;
         'tocPay.text.enterCodes': string;
         'tocPay.text.searchDescribe': string;
-        'tocPay.text.walletPassEmpty': string;
+        'tocPay.text.walletPassEmpty': (walletName: string) => string;
         'tocPay.text.walletPassDisabled': string;
         'tocPay.text.walletPassPermanent': string;
         'tocPay.text.walletPassCompleteTitle': string;
@@ -143,6 +165,28 @@ declare const _default: {
         'tocPay.text.detectIncognitoConfirm': string;
         'tocPay.text.copyLink': string;
         'tocPay.text.copySuccess': string;
+        'tocPay.text.walletName': (shopName: string) => string;
+        'tocPay.text.bestValueFound': string;
+        'tocPay.text.welcomeToUseWalletPass': (walletName: string) => string;
+        'tocPay.text.totalSavings': string;
+        'tocPay.text.bestCombination': (walletName: string) => string;
+        'tocPay.text.recommended': string;
+        'tocPay.text.edit': string;
+        'tocPay.text.confirm': string;
+        'tocPay.text.unusedAndContinueToPayment': string;
+        'tocPay.text.walletPassAvailable': (walletName: string) => string;
+        'tocPay.text.useWalletPass': (walletName: string) => string;
+        'tocPay.text.useWalletPassAdd': (walletName: string) => string;
+        'tocPay.text.editWalletPass': (walletName: string) => string;
+        'tocPay.text.skipAndContinueToPayment': string;
+        'tocPay.text.youMightHaveAnEligibleWalletPass': (walletName: string) => string;
+        'tocPay.text.checkIfYouHaveAnyPointsCardRechargableCardOrVouchersToUse': string;
+        'tocPay.text.addPointsCard': string;
+        'tocPay.text.hasNoWalletPassAmount': string;
+        'tocPay.text.multipleSelectionAvailable': string;
+        'tocPay.text.youCanSelectMultipleWalletPassesToCombineForPayment': (walletName: string) => string;
+        'tocPay.text.bestValueCombination': string;
+        'tocPay.text.viewDetail': string;
     };
     'zh-HK': {
         'tocPay.text.checkout': string;
@@ -205,7 +249,7 @@ declare const _default: {
         'tocPay.text.scanBarQrCode': string;
         'tocPay.text.enterCodes': string;
         'tocPay.text.searchDescribe': string;
-        'tocPay.text.walletPassEmpty': string;
+        'tocPay.text.walletPassEmpty': (walletName: string) => string;
         'tocPay.text.walletPassDisabled': string;
         'tocPay.text.walletPassPermanent': string;
         'tocPay.text.walletPassCompleteTitle': string;
@@ -215,6 +259,28 @@ declare const _default: {
         'tocPay.text.detectIncognitoConfirm': string;
         'tocPay.text.copyLink': string;
         'tocPay.text.copySuccess': string;
+        'tocPay.text.walletName': (shopName: string) => string;
+        'tocPay.text.bestValueFound': string;
+        'tocPay.text.welcomeToUseWalletPass': (walletName: string) => string;
+        'tocPay.text.totalSavings': string;
+        'tocPay.text.bestCombination': (walletName: string) => string;
+        'tocPay.text.recommended': string;
+        'tocPay.text.edit': string;
+        'tocPay.text.confirm': string;
+        'tocPay.text.unusedAndContinueToPayment': string;
+        'tocPay.text.walletPassAvailable': (walletName: string) => string;
+        'tocPay.text.useWalletPass': (walletName: string) => string;
+        'tocPay.text.useWalletPassAdd': (walletName: string) => string;
+        'tocPay.text.editWalletPass': (walletName: string) => string;
+        'tocPay.text.skipAndContinueToPayment': string;
+        'tocPay.text.youMightHaveAnEligibleWalletPass': (walletName: string) => string;
+        'tocPay.text.checkIfYouHaveAnyPointsCardRechargableCardOrVouchersToUse': string;
+        'tocPay.text.addPointsCard': string;
+        'tocPay.text.hasNoWalletPassAmount': string;
+        'tocPay.text.multipleSelectionAvailable': string;
+        'tocPay.text.youCanSelectMultipleWalletPassesToCombineForPayment': (walletName: string) => string;
+        'tocPay.text.bestValueCombination': string;
+        'tocPay.text.viewDetail': string;
     };
 };
 export default _default;

package/lib/components/pay/toC/locales.js

@@ -84,7 +84,7 @@ var locales_default = {
     "tocPay.text.scanBarQrCode": "Scan Bar/QR code",
     "tocPay.text.enterCodes": "Enter codes",
     "tocPay.text.searchDescribe": "Please enter code or encode",
-    "tocPay.text.walletPassEmpty": "No cards available. Please scan or search for cards.",
+    "tocPay.text.walletPassEmpty": (walletName) => `No ${walletName}`,
     "tocPay.text.walletPassDisabled": "Disabled",
     "tocPay.text.walletPassPermanent": "Permanent",
     "tocPay.text.walletPassCompleteTitle": "Please click ‘Submit’ button at the bottom to complete",
@@ -94,7 +94,29 @@ var locales_default = {
     "tocPay.text.walletSearchEmpty": "No results found.",
     "tocPay.text.detectIncognitoConfirm": "You are currently in private mode, wallet payment may not succeed. Please copy the link and continue payment in a non-private browsing tab.",
     "tocPay.text.copyLink": "Copy link",
-    "tocPay.text.copySuccess": "Copy Success"
+    "tocPay.text.copySuccess": "Copy Success",
+    "tocPay.text.walletName": (shopName) => `${shopName}'s wallet`,
+    "tocPay.text.bestValueFound": "Best wallet combination for you！",
+    "tocPay.text.welcomeToUseWalletPass": (walletName) => `Welcome to use ${walletName}`,
+    "tocPay.text.totalSavings": "Total savings",
+    "tocPay.text.bestCombination": (walletName) => `Best combination of your available ${walletName} options`,
+    "tocPay.text.recommended": "Recommended",
+    "tocPay.text.edit": "Edit",
+    "tocPay.text.confirm": "Confirm",
+    "tocPay.text.unusedAndContinueToPayment": "Unused and continue to payment",
+    "tocPay.text.walletPassAvailable": (walletName) => `You have no valid ${walletName}`,
+    "tocPay.text.useWalletPass": (walletName) => `Go to ${walletName}`,
+    "tocPay.text.useWalletPassAdd": (walletName) => `Go to ${walletName}`,
+    "tocPay.text.editWalletPass": (walletName) => `Change Combination`,
+    "tocPay.text.skipAndContinueToPayment": "Skip and continue to payment",
+    "tocPay.text.youMightHaveAnEligibleWalletPass": (walletName) => `You might have an eligible ${walletName}`,
+    "tocPay.text.checkIfYouHaveAnyPointsCardRechargableCardOrVouchersToUse": "Check if you have any Points Card, Rechargable Card , or Vouchers to use",
+    "tocPay.text.addPointsCard": "Add points card, rechargable card, or vouchers if have any in hand.",
+    "tocPay.text.hasNoWalletPassAmount": "View points card, rechargable card, or vouchers options",
+    "tocPay.text.multipleSelectionAvailable": "Multiple selection available",
+    "tocPay.text.youCanSelectMultipleWalletPassesToCombineForPayment": (walletName) => `You can select multiple ${walletName} to combine for payment`,
+    "tocPay.text.bestValueCombination": "Best value combination",
+    "tocPay.text.viewDetail": "View detail"
   },
   "zh-CN": {
     "tocPay.text.checkout": "结账",
@@ -157,7 +179,7 @@ var locales_default = {
     "tocPay.text.scanBarQrCode": "扫描条形码/二维码",
     "tocPay.text.enterCodes": "输入编码",
     "tocPay.text.searchDescribe": "请输入卡片编码或发行编码",
-    "tocPay.text.walletPassEmpty": "没有可使用的卡片，请扫描或搜索卡片",
+    "tocPay.text.walletPassEmpty": (walletName) => `没有可使用的${walletName}`,
     "tocPay.text.walletPassDisabled": "不可用",
     "tocPay.text.walletPassPermanent": "永久有效",
     "tocPay.text.walletPassCompleteTitle": "请点击底部的“提交”按钮完成支付",
@@ -166,7 +188,29 @@ var locales_default = {
     "tocPay.text.walletSearchEmpty": "没有查询到任何结果。",
     "tocPay.text.detectIncognitoConfirm": "当前处于无痕模式，钱包支付可能失败，请复制链接在非无痕模式下继续支付。",
     "tocPay.text.copyLink": "复制链接",
-    "tocPay.text.copySuccess": "复制成功"
+    "tocPay.text.copySuccess": "复制成功",
+    "tocPay.text.walletName": (shopName) => `${shopName}钱包`,
+    "tocPay.text.bestValueFound": "找到最佳组合选择！",
+    "tocPay.text.welcomeToUseWalletPass": (walletName) => `欢迎使用${walletName}`,
+    "tocPay.text.totalSavings": "总节省",
+    "tocPay.text.bestCombination": (walletName) => `可用${walletName}选项的最佳组合`,
+    "tocPay.text.recommended": "推荐",
+    "tocPay.text.edit": "编辑",
+    "tocPay.text.confirm": "确认",
+    "tocPay.text.unusedAndContinueToPayment": "不使用并继续付款",
+    "tocPay.text.walletPassAvailable": (walletName) => `暂无${walletName}可用`,
+    "tocPay.text.useWalletPass": (walletName) => `前往${walletName}`,
+    "tocPay.text.useWalletPassAdd": (walletName) => `前往${walletName}添加`,
+    "tocPay.text.editWalletPass": (walletName) => `修改优惠组合`,
+    "tocPay.text.skipAndContinueToPayment": "跳过并继续付款",
+    "tocPay.text.youMightHaveAnEligibleWalletPass": (walletName) => `您可能拥有符合条件的${walletName}`,
+    "tocPay.text.checkIfYouHaveAnyPointsCardRechargableCardOrVouchersToUse": "检查您是否有积分卡、充值卡或代金券可供使用",
+    "tocPay.text.addPointsCard": "如您有任何优惠券、储值卡、积分卡",
+    "tocPay.text.hasNoWalletPassAmount": "点击查看可激活的储值、积分、代金券选项",
+    "tocPay.text.multipleSelectionAvailable": "可多选",
+    "tocPay.text.youCanSelectMultipleWalletPassesToCombineForPayment": (walletName) => `您可以选择多个${walletName}进行组合付款`,
+    "tocPay.text.bestValueCombination": "最佳组合",
+    "tocPay.text.viewDetail": "查看详情"
   },
   "zh-HK": {
     "tocPay.text.checkout": "結帳",
@@ -229,7 +273,7 @@ var locales_default = {
     "tocPay.text.scanBarQrCode": "掃描條形碼/二維碼",
     "tocPay.text.enterCodes": "輸入編碼",
     "tocPay.text.searchDescribe": "請輸入卡片編碼或發行編碼",
-    "tocPay.text.walletPassEmpty": "沒有可使用的卡片，請掃描或搜尋卡片",
+    "tocPay.text.walletPassEmpty": (walletName) => `沒有可使用的${walletName}`,
     "tocPay.text.walletPassDisabled": "不可用",
     "tocPay.text.walletPassPermanent": "永久有效",
     "tocPay.text.walletPassCompleteTitle": "請點擊底部的“提交”按鈕完成支付",
@@ -238,6 +282,28 @@ var locales_default = {
     "tocPay.text.walletSearchEmpty": "沒有查詢到任何結果。",
     "tocPay.text.detectIncognitoConfirm": "目前處於無痕模式，錢包支付可能失敗，請複製連結在非無痕模式下繼續支付。",
     "tocPay.text.copyLink": "復製链接",
-    "tocPay.text.copySuccess": "復製成功"
+    "tocPay.text.copySuccess": "復製成功",
+    "tocPay.text.walletName": (shopName) => `${shopName}錢包`,
+    "tocPay.text.bestValueFound": "找到最佳組合選擇！",
+    "tocPay.text.welcomeToUseWalletPass": (walletName) => `歡迎使用${walletName}`,
+    "tocPay.text.totalSavings": "總節省",
+    "tocPay.text.bestCombination": (walletName) => `可用${walletName}選項的最佳組合`,
+    "tocPay.text.recommended": "推薦",
+    "tocPay.text.edit": "編輯",
+    "tocPay.text.confirm": "確認",
+    "tocPay.text.unusedAndContinueToPayment": "不使用並繼續付款",
+    "tocPay.text.walletPassAvailable": (walletName) => `暂无${walletName} 可用`,
+    "tocPay.text.useWalletPass": (walletName) => `前往${walletName}`,
+    "tocPay.text.useWalletPassAdd": (walletName) => `前往${walletName}添加`,
+    "tocPay.text.editWalletPass": (walletName) => `修改優惠組合`,
+    "tocPay.text.skipAndContinueToPayment": "跳過並繼續付款",
+    "tocPay.text.youMightHaveAnEligibleWalletPass": (walletName) => `您可能擁有符合條件的${walletName}`,
+    "tocPay.text.checkIfYouHaveAnyPointsCardRechargableCardOrVouchersToUse": "檢查您是否有積分卡、充值卡或代金券可供使用",
+    "tocPay.text.addPointsCard": "如您有任何优惠券、储值卡、积分卡",
+    "tocPay.text.hasNoWalletPassAmount": "點擊查看可激活的儲值、積分、代金券選項",
+    "tocPay.text.multipleSelectionAvailable": "可多選",
+    "tocPay.text.youCanSelectMultipleWalletPassesToCombineForPayment": (walletName) => `您可以選擇多個${walletName}進行組合付款`,
+    "tocPay.text.bestValueCombination": "最佳組合",
+    "tocPay.text.viewDetail": "查看詳情"
   }
 };

package/lib/components/pay/toC/model.d.ts

@@ -5,6 +5,10 @@ export interface FormState {
     payCallback: (res?: any) => void;
     history?: any;
     payGroup?: PayGroup;
+    walletSetting: {
+        name: string;
+        popup_status: 0 | 1 | null;
+    };
 }
 export interface PayGroup {
     order_id?: string;