@blocklet/payment-react 1.18.13 → 1.18.14

package/es/libs/util.d.ts

@@ -114,3 +114,7 @@ export declare function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded
 export declare function getPaymentKitComponent(): any;
 export declare function openDonationSettings(openInNewTab?: boolean): void;
 export declare function getUserProfileLink(userDid: string, locale?: string): string;
+export declare function parseMarkedText(text: string): Array<{
+    type: 'text' | 'marked';
+    content: string;
+}>;

package/es/libs/util.js

@@ -933,3 +933,23 @@ export function getUserProfileLink(userDid, locale = "en") {
     })
   );
 }
+export function parseMarkedText(text) {
+  if (!text)
+    return [];
+  const parts = text.split(/(#([^#]*)#)/);
+  const result = [];
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (!part)
+      continue;
+    if (i % 3 === 0) {
+      result.push({ type: "text", content: part });
+    } else if (i % 3 === 1 && part.startsWith("#") && part.endsWith("#")) {
+      const content = part.slice(1, -1);
+      if (content.length >= 0) {
+        result.push({ type: "marked", content });
+      }
+    }
+  }
+  return result.filter((p) => p.content !== "");
+}

package/es/payment/form/index.js

@@ -137,6 +137,11 @@ export default function PaymentForm({
         setValue("customer_phone", session.user.phone);
       }
     }
+    if (!session?.user) {
+      setValue("customer_name", "");
+      setValue("customer_email", "");
+      setValue("customer_phone", "");
+    }
   }, [session?.user, getValues, setValue]);
   useEffect(() => {
     setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);

package/es/payment/form/stripe/form.js

@@ -8,7 +8,7 @@ import { useSetState } from "ahooks";
 import { useEffect, useCallback } from "react";
 import { useMobile } from "../../../hooks/mobile.js";
 import LoadingButton from "../../../components/loading-button.js";
-const { Elements, PaymentElement, useElements, useStripe, loadStripe } = globalThis.__STRIPE_COMPONENTS__;
+const { Elements, PaymentElement, useElements, useStripe, loadStripe, LinkAuthenticationElement } = globalThis.__STRIPE_COMPONENTS__;
 function StripeCheckoutForm({
   clientSecret,
   intentType,
@@ -90,10 +90,30 @@ function StripeCheckoutForm({
     // eslint-disable-line
   );
   return /* @__PURE__ */ jsxs(Content, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx(
+      LinkAuthenticationElement,
+      {
+        options: {
+          defaultEmail: customer.email
+        }
+      }
+    ),
     /* @__PURE__ */ jsx(
       PaymentElement,
       {
-        options: { layout: "auto", fields: { billingDetails: "never" }, readOnly: state.confirming },
+        options: {
+          layout: "auto",
+          fields: { billingDetails: "never" },
+          readOnly: state.confirming,
+          defaultValues: {
+            billingDetails: {
+              name: customer.name,
+              phone: customer.phone,
+              email: customer.email,
+              address: customer.address
+            }
+          }
+        },
         onReady: () => setState({ loaded: true })
       }
     ),
@@ -170,17 +190,27 @@ export default function StripeCheckout({
           minWidth: isMobile ? "100%" : "500px"
         }
       },
-      children: /* @__PURE__ */ jsx(Elements, { options: { clientSecret, locale: locale === "zh" ? "zh-CN" : "en" }, stripe: stripePromise, children: /* @__PURE__ */ jsx(
-        StripeCheckoutForm,
+      children: /* @__PURE__ */ jsx(
+        Elements,
         {
-          clientSecret,
-          intentType,
-          mode,
-          customer,
-          onConfirm,
-          returnUrl
+          options: {
+            clientSecret,
+            locale: locale === "zh" ? "zh-CN" : "en"
+          },
+          stripe: stripePromise,
+          children: /* @__PURE__ */ jsx(
+            StripeCheckoutForm,
+            {
+              clientSecret,
+              intentType,
+              mode,
+              customer,
+              onConfirm,
+              returnUrl
+            }
+          )
         }
-      ) })
+      )
     }
   );
 }

package/es/payment/form/stripe/index.d.ts

@@ -4,6 +4,7 @@ declare global {
         __STRIPE_COMPONENTS__?: {
             Elements: any;
             PaymentElement: any;
+            LinkAuthenticationElement: any;
             useElements: () => any;
             useStripe: () => any;
             loadStripe: (key: string) => Promise<any>;

package/es/payment/form/stripe/index.js

@@ -6,7 +6,8 @@ export default createLazyComponent(async () => {
     PaymentElement: stripeReact.PaymentElement,
     useElements: stripeReact.useElements,
     useStripe: stripeReact.useStripe,
-    loadStripe: stripe.loadStripe
+    loadStripe: stripe.loadStripe,
+    LinkAuthenticationElement: stripeReact.LinkAuthenticationElement
   };
   const { default: Component } = await import("./form.js");
   return Component;

package/es/theme/index.js

@@ -139,6 +139,11 @@ export function PaymentThemeProvider({
             fontWeight: "500",
             lineHeight: "24px"
           },
+          ".base-dialog": {
+            ".MuiPaper-root>.MuiDialogContent-root": {
+              paddingTop: "0"
+            }
+          },
           a: {
             textDecoration: "none !important"
           }

package/lib/libs/util.d.ts

@@ -114,3 +114,7 @@ export declare function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded
 export declare function getPaymentKitComponent(): any;
 export declare function openDonationSettings(openInNewTab?: boolean): void;
 export declare function getUserProfileLink(userDid: string, locale?: string): string;
+export declare function parseMarkedText(text: string): Array<{
+    type: 'text' | 'marked';
+    content: string;
+}>;

package/lib/libs/util.js

@@ -55,6 +55,7 @@ exports.isValidCountry = isValidCountry;
 exports.lazyLoad = lazyLoad;
 exports.mergeExtraParams = void 0;
 exports.openDonationSettings = openDonationSettings;
+exports.parseMarkedText = parseMarkedText;
 exports.sleep = sleep;
 exports.stopEvent = stopEvent;
 exports.truncateText = truncateText;
@@ -1116,4 +1117,28 @@ function getUserProfileLink(userDid, locale = "en") {
     locale,
     did: userDid
   }));
+}
+function parseMarkedText(text) {
+  if (!text) return [];
+  const parts = text.split(/(#([^#]*)#)/);
+  const result = [];
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (!part) continue;
+    if (i % 3 === 0) {
+      result.push({
+        type: "text",
+        content: part
+      });
+    } else if (i % 3 === 1 && part.startsWith("#") && part.endsWith("#")) {
+      const content = part.slice(1, -1);
+      if (content.length >= 0) {
+        result.push({
+          type: "marked",
+          content
+        });
+      }
+    }
+  }
+  return result.filter(p => p.content !== "");
 }

package/lib/payment/form/index.js

@@ -156,6 +156,11 @@ function PaymentForm({
         setValue("customer_phone", session.user.phone);
       }
     }
+    if (!session?.user) {
+      setValue("customer_name", "");
+      setValue("customer_email", "");
+      setValue("customer_phone", "");
+    }
   }, [session?.user, getValues, setValue]);
   (0, _react.useEffect)(() => {
     setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);

package/lib/payment/form/stripe/form.js

@@ -20,7 +20,8 @@ const {
   PaymentElement,
   useElements,
   useStripe,
-  loadStripe
+  loadStripe,
+  LinkAuthenticationElement
 } = globalThis.__STRIPE_COMPONENTS__;
 function StripeCheckoutForm({
   clientSecret,
@@ -123,13 +124,25 @@ function StripeCheckoutForm({
 
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Content, {
     onSubmit: handleSubmit,
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentElement, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(LinkAuthenticationElement, {
+      options: {
+        defaultEmail: customer.email
+      }
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentElement, {
       options: {
         layout: "auto",
         fields: {
           billingDetails: "never"
         },
-        readOnly: state.confirming
+        readOnly: state.confirming,
+        defaultValues: {
+          billingDetails: {
+            name: customer.name,
+            phone: customer.phone,
+            email: customer.email,
+            address: customer.address
+          }
+        }
       },
       onReady: () => setState({
         loaded: true

package/lib/payment/form/stripe/index.d.ts

@@ -4,6 +4,7 @@ declare global {
         __STRIPE_COMPONENTS__?: {
             Elements: any;
             PaymentElement: any;
+            LinkAuthenticationElement: any;
             useElements: () => any;
             useStripe: () => any;
             loadStripe: (key: string) => Promise<any>;

package/lib/payment/form/stripe/index.js

@@ -12,7 +12,8 @@ module.exports = (0, _lazyLoader.createLazyComponent)(async () => {
     PaymentElement: stripeReact.PaymentElement,
     useElements: stripeReact.useElements,
     useStripe: stripeReact.useStripe,
-    loadStripe: stripe.loadStripe
+    loadStripe: stripe.loadStripe,
+    LinkAuthenticationElement: stripeReact.LinkAuthenticationElement
   };
   const {
     default: Component

package/lib/theme/index.js

@@ -156,6 +156,11 @@ function PaymentThemeProvider({
             fontWeight: "500",
             lineHeight: "24px"
           },
+          ".base-dialog": {
+            ".MuiPaper-root>.MuiDialogContent-root": {
+              paddingTop: "0"
+            }
+          },
           a: {
             textDecoration: "none !important"
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.13",
+  "version": "1.18.14",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,15 +53,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.11.48",
-    "@arcblock/ux": "^2.11.48",
-    "@arcblock/ws": "^1.19.14",
-    "@blocklet/ui-react": "^2.11.48",
+    "@arcblock/did-connect": "^2.12.12",
+    "@arcblock/ux": "^2.12.12",
+    "@arcblock/ws": "^1.19.15",
+    "@blocklet/ui-react": "^2.12.12",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.19.14",
+    "@ocap/util": "^1.19.15",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.13",
+    "@blocklet/payment-types": "1.18.14",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "b26aa859ba5961c7a8dedfc238a31476cf16036c"
+  "gitHead": "84cf68d98fcf1df0655e90567b98d6bab38f300e"
 }

package/src/libs/util.ts

@@ -1194,3 +1194,28 @@ export function getUserProfileLink(userDid: string, locale = 'en') {
     })
   );
 }
+
+export function parseMarkedText(text: string): Array<{
+  type: 'text' | 'marked';
+  content: string;
+}> {
+  if (!text) return [];
+  const parts = text.split(/(#([^#]*)#)/);
+  const result: { type: 'text' | 'marked'; content: string }[] = [];
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    // eslint-disable-next-line no-continue
+    if (!part) continue;
+    if (i % 3 === 0) {
+      result.push({ type: 'text', content: part });
+    } else if (i % 3 === 1 && part.startsWith('#') && part.endsWith('#')) {
+      const content = part.slice(1, -1);
+      if (content.length >= 0) {
+        result.push({ type: 'marked', content });
+      }
+    }
+  }
+
+  return result.filter((p) => p.content !== '');
+}

package/src/payment/form/index.tsx

@@ -192,6 +192,11 @@ export default function PaymentForm({
         setValue('customer_phone', session.user.phone);
       }
     }
+    if (!session?.user) {
+      setValue('customer_name', '');
+      setValue('customer_email', '');
+      setValue('customer_phone', '');
+    }
   }, [session?.user, getValues, setValue]);
 
   useEffect(() => {

package/src/payment/form/stripe/form.tsx

@@ -9,7 +9,8 @@ import { useEffect, useCallback } from 'react';
 import { useMobile } from '../../../hooks/mobile';
 import LoadingButton from '../../../components/loading-button';
 
-const { Elements, PaymentElement, useElements, useStripe, loadStripe } = (globalThis as any).__STRIPE_COMPONENTS__;
+const { Elements, PaymentElement, useElements, useStripe, loadStripe, LinkAuthenticationElement } = (globalThis as any)
+  .__STRIPE_COMPONENTS__;
 
 export type StripeCheckoutFormProps = {
   clientSecret: string;
@@ -113,8 +114,25 @@ function StripeCheckoutForm({
 
   return (
     <Content onSubmit={handleSubmit}>
+      <LinkAuthenticationElement
+        options={{
+          defaultEmail: customer.email,
+        }}
+      />
       <PaymentElement
-        options={{ layout: 'auto', fields: { billingDetails: 'never' }, readOnly: state.confirming }}
+        options={{
+          layout: 'auto',
+          fields: { billingDetails: 'never' },
+          readOnly: state.confirming,
+          defaultValues: {
+            billingDetails: {
+              name: customer.name,
+              phone: customer.phone,
+              email: customer.email,
+              address: customer.address,
+            },
+          },
+        }}
         onReady={() => setState({ loaded: true })}
       />
       {(!stripe || !elements || !state.loaded) && (
@@ -208,7 +226,12 @@ export default function StripeCheckout({
           minWidth: isMobile ? '100%' : '500px',
         },
       }}>
-      <Elements options={{ clientSecret, locale: locale === 'zh' ? 'zh-CN' : 'en' }} stripe={stripePromise}>
+      <Elements
+        options={{
+          clientSecret,
+          locale: locale === 'zh' ? 'zh-CN' : 'en',
+        }}
+        stripe={stripePromise}>
         <StripeCheckoutForm
           clientSecret={clientSecret}
           intentType={intentType}

package/src/payment/form/stripe/index.tsx

@@ -6,6 +6,7 @@ declare global {
     __STRIPE_COMPONENTS__?: {
       Elements: any;
       PaymentElement: any;
+      LinkAuthenticationElement: any;
       useElements: () => any;
       useStripe: () => any;
       loadStripe: (key: string) => Promise<any>;
@@ -22,6 +23,7 @@ export default createLazyComponent<React.ComponentType<StripeCheckoutProps>, Str
     useElements: stripeReact.useElements,
     useStripe: stripeReact.useStripe,
     loadStripe: stripe.loadStripe,
+    LinkAuthenticationElement: stripeReact.LinkAuthenticationElement,
   };
 
   const { default: Component } = await import('./form');

package/src/theme/index.tsx

@@ -150,6 +150,11 @@ export function PaymentThemeProvider({
             fontWeight: '500',
             lineHeight: '24px',
           },
+          '.base-dialog': {
+            '.MuiPaper-root>.MuiDialogContent-root': {
+              paddingTop: '0',
+            },
+          },
           a: {
             textDecoration: 'none !important',
           },