@blocklet/payment-react 1.19.19 → 1.19.20

package/es/checkout/form.js

@@ -3,6 +3,7 @@ import { useRequest, useSetState } from "ahooks";
 import noop from "lodash/noop";
 import { useEffect } from "react";
 import { joinURL } from "ufo";
+import { ReactGA } from "@arcblock/ux/lib/withTracker";
 import api from "../libs/api.js";
 import { getPrefix, mergeExtraParams } from "../libs/util.js";
 import Payment from "../payment/index.js";
@@ -56,11 +57,26 @@ export default function CheckoutForm({
   const handlePaid = (result) => {
     setState({ completed: true });
     onPaid?.(result);
+    const paySuccessEvent = {
+      action: "paySuccess",
+      // @ts-ignore 后续升级的话就会报错了，移除这个 lint 即可
+      mode: data?.checkoutSession?.mode,
+      success: true
+    };
+    ReactGA.event(paySuccessEvent.action, paySuccessEvent);
   };
   const handleError = (err) => {
     console.error(err);
     setState({ appError: err });
     onError?.(err);
+    const payFailedEvent = {
+      action: "payFailed",
+      // @ts-ignore后续升级的话就会报错了，移除这个 lint 即可
+      mode: data?.checkoutSession?.mode,
+      errorMessage: err.message,
+      success: false
+    };
+    ReactGA.event(payFailedEvent.action, payFailedEvent);
   };
   const Checkout = formType === "donation" ? /* @__PURE__ */ jsx(
     DonationForm,

package/es/payment/form/index.js

@@ -14,6 +14,7 @@ import { fromUnitToToken } from "@ocap/util";
 import DID from "@arcblock/ux/lib/DID";
 import isEmpty from "lodash/isEmpty";
 import { HelpOutline, OpenInNew } from "@mui/icons-material";
+import { ReactGA } from "@arcblock/ux/lib/withTracker";
 import FormInput from "../../components/input.js";
 import FormLabel from "../../components/label.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -267,7 +268,16 @@ export default function PaymentForm({
         onPaid(result);
       }
     } catch (err) {
-      Toast.error(formatError(err));
+      const errorMessage = formatError(err);
+      const payFailedEvent = {
+        action: "payFailed",
+        // @ts-ignore 后续升级的话就会报错了，移除这个 lint 即可
+        mode: checkoutSession.mode,
+        errorMessage,
+        success: false
+      };
+      ReactGA.event(payFailedEvent.action, payFailedEvent);
+      Toast.error(errorMessage);
     } finally {
       setState({ paying: false });
       processingRef.current = false;

package/lib/checkout/form.js

@@ -9,6 +9,7 @@ var _ahooks = require("ahooks");
 var _noop = _interopRequireDefault(require("lodash/noop"));
 var _react = require("react");
 var _ufo = require("ufo");
+var _withTracker = require("@arcblock/ux/lib/withTracker");
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _payment = _interopRequireDefault(require("../payment"));
@@ -67,6 +68,13 @@ function CheckoutForm({
       completed: true
     });
     onPaid?.(result);
+    const paySuccessEvent = {
+      action: "paySuccess",
+      // @ts-ignore 后续升级的话就会报错了，移除这个 lint 即可
+      mode: data?.checkoutSession?.mode,
+      success: true
+    };
+    _withTracker.ReactGA.event(paySuccessEvent.action, paySuccessEvent);
   };
   const handleError = err => {
     console.error(err);
@@ -74,6 +82,14 @@ function CheckoutForm({
       appError: err
     });
     onError?.(err);
+    const payFailedEvent = {
+      action: "payFailed",
+      // @ts-ignore后续升级的话就会报错了，移除这个 lint 即可
+      mode: data?.checkoutSession?.mode,
+      errorMessage: err.message,
+      success: false
+    };
+    _withTracker.ReactGA.event(payFailedEvent.action, payFailedEvent);
   };
   const Checkout = formType === "donation" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_donationForm.default, {
     checkoutSession: data?.checkoutSession,

package/lib/payment/form/index.js

@@ -21,6 +21,7 @@ var _util = require("@ocap/util");
 var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _iconsMaterial = require("@mui/icons-material");
+var _withTracker = require("@arcblock/ux/lib/withTracker");
 var _input = _interopRequireDefault(require("../../components/input"));
 var _label = _interopRequireDefault(require("../../components/label"));
 var _payment = require("../../contexts/payment");
@@ -305,7 +306,16 @@ function PaymentForm({
         onPaid(result);
       }
     } catch (err) {
-      _Toast.default.error((0, _util2.formatError)(err));
+      const errorMessage = (0, _util2.formatError)(err);
+      const payFailedEvent = {
+        action: "payFailed",
+        // @ts-ignore 后续升级的话就会报错了，移除这个 lint 即可
+        mode: checkoutSession.mode,
+        errorMessage,
+        success: false
+      };
+      _withTracker.ReactGA.event(payFailedEvent.action, payFailedEvent);
+      _Toast.default.error(errorMessage);
     } finally {
       setState({
         paying: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.19.19",
+  "version": "1.19.20",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.19.19",
+    "@blocklet/payment-types": "1.19.20",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "76facca620eda1132f8c6d5b8f42d8fd9ef78b05"
+  "gitHead": "4e09a5936748fc15c1ab6ea90b741b3e44f5eab7"
 }

package/src/checkout/form.tsx

@@ -4,6 +4,8 @@ import noop from 'lodash/noop';
 import { useEffect } from 'react';
 import { joinURL } from 'ufo';
 
+import { ReactGA } from '@arcblock/ux/lib/withTracker';
+import type { PayFailedEvent, PaySuccessEvent } from '@arcblock/ux/lib/withTracker/action/pay';
 import api from '../libs/api';
 import { getPrefix, mergeExtraParams } from '../libs/util';
 import Payment from '../payment';
@@ -70,12 +72,29 @@ export default function CheckoutForm({
   const handlePaid = (result: CheckoutContext) => {
     setState({ completed: true });
     onPaid?.(result as CheckoutContext);
+
+    const paySuccessEvent: PaySuccessEvent = {
+      action: 'paySuccess',
+      // @ts-ignore 后续升级的话就会报错了，移除这个 lint 即可
+      mode: data?.checkoutSession?.mode!,
+      success: true,
+    };
+    ReactGA.event(paySuccessEvent.action, paySuccessEvent);
   };
 
   const handleError = (err: any) => {
     console.error(err);
     setState({ appError: err });
     onError?.(err);
+
+    const payFailedEvent: PayFailedEvent = {
+      action: 'payFailed',
+      // @ts-ignore后续升级的话就会报错了，移除这个 lint 即可
+      mode: data?.checkoutSession?.mode!,
+      errorMessage: err.message,
+      success: false,
+    };
+    ReactGA.event(payFailedEvent.action, payFailedEvent);
   };
 
   const Checkout =

package/src/payment/form/index.tsx

@@ -15,9 +15,11 @@ import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
 import { fromUnitToToken } from '@ocap/util';
 import DID from '@arcblock/ux/lib/DID';
+import { PayFailedEvent } from '@arcblock/ux/lib/withTracker/action/pay';
 
 import isEmpty from 'lodash/isEmpty';
 import { HelpOutline, OpenInNew } from '@mui/icons-material';
+import { ReactGA } from '@arcblock/ux/lib/withTracker';
 import FormInput from '../../components/input';
 import FormLabel from '../../components/label';
 import { usePaymentContext } from '../../contexts/payment';
@@ -382,7 +384,17 @@ export default function PaymentForm({
         onPaid(result);
       }
     } catch (err) {
-      Toast.error(formatError(err));
+      const errorMessage = formatError(err);
+      const payFailedEvent: PayFailedEvent = {
+        action: 'payFailed',
+        // @ts-ignore 后续升级的话就会报错了，移除这个 lint 即可
+        mode: checkoutSession.mode,
+        errorMessage,
+        success: false,
+      };
+      ReactGA.event(payFailedEvent.action, payFailedEvent);
+
+      Toast.error(errorMessage);
     } finally {
       setState({ paying: false });
       processingRef.current = false;