@blocklet/payment-react 1.19.17 → 1.19.19

package/README.md

@@ -51,6 +51,8 @@ function App() {
 - `CheckoutTable` - Pricing table display
 - `CheckoutDonate` - Donation widget
 - `OverdueInvoicePayment` - Handle overdue invoice payments
+- `AutoTopup` - Auto-recharge configuration display card
+- `AutoTopupModal` - Auto-recharge configuration modal
 
 ### Form Components
 - `FormInput` - Base form input component
@@ -226,6 +228,132 @@ const LazyComponent = createLazyComponent(async () => {
 });
 ```
 
+### Auto-Topup Components
+
+The auto-topup feature allows users to automatically recharge their credit balance when it falls below a specified threshold. This helps ensure uninterrupted service usage.
+
+#### AutoTopup
+
+Display and manage auto-recharge configurations with different rendering modes.
+
+```tsx
+import { AutoTopup, PaymentProvider } from '@blocklet/payment-react';
+
+function CreditManagementPage() {
+  return (
+    <PaymentProvider session={session}>
+      {/* Default mode - fully expanded display */}
+      <AutoTopup
+        currencyId="credit-currency-id"
+        onConfigChange={(config) => {
+          console.log('Auto-topup config updated:', config);
+        }}
+      />
+
+      {/* Simple mode - collapsed by default, expandable */}
+      <AutoTopup
+        currencyId="credit-currency-id"
+        mode="simple"
+        onConfigChange={(config) => {
+          // Handle configuration changes
+          refreshCreditBalance();
+        }}
+      />
+
+      {/* Custom mode - full control over rendering */}
+      <AutoTopup
+        currencyId="credit-currency-id"
+        mode="custom"
+        onConfigChange={(config) => console.log('Config updated:', config)}
+      >
+        {(openModal, config, paymentData, loading) => (
+          <div>
+            {loading ? (
+              <div>Loading auto-topup configuration...</div>
+            ) : (
+              <div>
+                <h3>Auto Recharge Status</h3>
+                <p>Status: {config?.enabled ? 'Active' : 'Inactive'}</p>
+                {config?.enabled && (
+                  <p>
+                    Threshold: {config.threshold} {config.currency?.symbol}
+                  </p>
+                )}
+                {paymentData?.balanceInfo && (
+                  <p>
+                    Wallet Balance: {paymentData.balanceInfo.token} {config?.rechargeCurrency?.symbol}
+                  </p>
+                )}
+                <button onClick={openModal}>Configure Auto-Topup</button>
+              </div>
+            )}
+          </div>
+        )}
+      </AutoTopup>
+    </PaymentProvider>
+  );
+}
+```
+
+#### AutoTopupModal
+
+Configure auto-recharge settings including threshold, payment method, and purchase amount.
+
+```tsx
+import { AutoTopupModal, PaymentProvider } from '@blocklet/payment-react';
+import { useState } from 'react';
+
+function AutoRechargeSettings({ currencyId }) {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const handleSuccess = (config) => {
+    console.log('Auto-recharge configured:', config);
+    setModalOpen(false);
+    // Refresh the parent component or update state
+  };
+
+  const handleError = (error) => {
+    console.error('Configuration failed:', error);
+  };
+
+  return (
+    <PaymentProvider session={session}>
+      <button onClick={() => setModalOpen(true)}>
+        Setup Auto-Recharge
+      </button>
+
+      <AutoTopupModal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        currencyId={currencyId}
+        onSuccess={handleSuccess}
+        onError={handleError}
+        defaultEnabled={true} // Start with auto-recharge enabled
+      />
+    </PaymentProvider>
+  );
+}
+```
+
+#### Component Props
+
+**AutoTopup Props:**
+- `currencyId` [Required] - The currency ID for auto-recharge
+- `onConfigChange` [Optional] - Callback when configuration changes: `(config: AutoRechargeConfig) => void`
+- `mode` [Optional] - Rendering mode: `'default' | 'simple' | 'custom'`
+- `sx` [Optional] - Custom styles
+- `children` [Optional] - Custom render function for `custom` mode: `(openModal, config, paymentData, loading) => ReactNode`
+
+**AutoTopupModal Props:**
+- `open` [Required] - Whether modal is open
+- `onClose` [Required] - Close modal callback
+- `currencyId` [Required] - The currency ID for auto-recharge
+- `customerId` [Optional] - Customer ID (defaults to current session user)
+- `onSuccess` [Optional] - Success callback: `(config: AutoRechargeConfig) => void`
+- `onError` [Optional] - Error callback: `(error: any) => void`
+- `defaultEnabled` [Optional] - Whether to default the enabled state to true
+
+
 ## Complete Examples
 
 ### Donation Page Example
@@ -319,6 +447,191 @@ function DonationPage() {
 }
 ```
 
+### Auto-Topup Integration Example
+
+Complete example showing how to integrate auto-topup functionality into a credit management dashboard.
+
+```tsx
+import {
+  PaymentProvider,
+  AutoTopup,
+  AutoTopupModal,
+  CustomerInvoiceList,
+  Amount
+} from '@blocklet/payment-react';
+import { useState, useEffect } from 'react';
+import { Grid, Card, CardContent, Typography, Button } from '@mui/material';
+
+function CreditDashboard() {
+  const [session, setSession] = useState(null);
+  const [creditCurrencies, setCreditCurrencies] = useState([]);
+  const [showSetupModal, setShowSetupModal] = useState(false);
+  const [selectedCurrency, setSelectedCurrency] = useState(null);
+
+  useEffect(() => {
+    // Initialize session and fetch credit currencies
+    const initializeDashboard = async () => {
+      const userSession = await fetchSession();
+      setSession(userSession);
+      
+      const currencies = await fetchCreditCurrencies();
+      setCreditCurrencies(currencies);
+    };
+    
+    initializeDashboard();
+  }, []);
+
+  const handleAutoTopupChange = (currencyId, config) => {
+    console.log(`Auto-topup updated for ${currencyId}:`, config);
+    // Update local state or refetch data
+  };
+
+  return (
+    <PaymentProvider session={session}>
+      <Grid container spacing={3}>
+        {/* Credit Balance Cards with Auto-Topup */}
+        {creditCurrencies.map((currency) => (
+          <Grid item xs={12} md={6} key={currency.id}>
+            <Card>
+              <CardContent>
+                <Typography variant="h6" gutterBottom>
+                  {currency.name} Balance
+                </Typography>
+                
+                {/* Current balance display */}
+                <Typography variant="h4" color="primary" gutterBottom>
+                  <Amount
+                    amount={currency.balance}
+                    decimal={currency.decimal}
+                    symbol={currency.symbol}
+                  />
+                </Typography>
+                
+                {/* Auto-topup configuration */}
+                <AutoTopup
+                  currencyId={currency.id}
+                  mode="simple"
+                  onConfigChange={(config) => 
+                    handleAutoTopupChange(currency.id, config)
+                  }
+                  sx={{ mt: 2 }}
+                />
+                
+                {/* Manual setup button for currencies without auto-topup */}
+                <Button
+                  variant="outlined"
+                  onClick={() => {
+                    setSelectedCurrency(currency);
+                    setShowSetupModal(true);
+                  }}
+                  sx={{ mt: 1 }}
+                >
+                  Configure Auto-Recharge
+                </Button>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+
+        {/* Usage History */}
+        <Grid item xs={12}>
+          <Card>
+            <CardContent>
+              <Typography variant="h6" gutterBottom>
+                Credit Usage History
+              </Typography>
+              <CustomerInvoiceList
+                customer_id={session?.user?.did}
+                type="table"
+                include_staking
+                status="paid,open"
+              />
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+
+      {/* Auto-topup Setup Modal */}
+      {showSetupModal && selectedCurrency && (
+        <AutoTopupModal
+          open={showSetupModal}
+          onClose={() => {
+            setShowSetupModal(false);
+            setSelectedCurrency(null);
+          }}
+          currencyId={selectedCurrency.id}
+          onSuccess={(config) => {
+            console.log('Auto-topup configured:', config);
+            handleAutoTopupChange(selectedCurrency.id, config);
+            setShowSetupModal(false);
+            setSelectedCurrency(null);
+          }}
+          onError={(error) => {
+            console.error('Auto-topup setup failed:', error);
+          }}
+          defaultEnabled={true}
+        />
+      )}
+    </PaymentProvider>
+  );
+}
+
+// Custom auto-topup display using custom mode
+function CustomAutoTopupDisplay({ currencyId }) {
+  return (
+    <AutoTopup
+      currencyId={currencyId}
+      mode="custom"
+    >
+      {(openModal, config, paymentData, loading) => {
+        if (loading) return <div>Loading...</div>;
+
+        return (
+          <Card variant="outlined">
+            <CardContent>
+              <Typography variant="subtitle1" gutterBottom>
+                Smart Auto-Recharge
+              </Typography>
+              
+              {config?.enabled ? (
+                <div>
+                  <Typography color="success.main" gutterBottom>
+                    ✓ Active - Recharges when balance drops below {config.threshold} {config.currency?.symbol}
+                  </Typography>
+                  
+                  <Typography variant="body2" color="text.secondary">
+                    Next recharge: {config.quantity}x {config.price?.product?.name}
+                  </Typography>
+                  
+                  {paymentData?.balanceInfo && (
+                    <Typography variant="body2" sx={{ mt: 1 }}>
+                      Wallet Balance: {paymentData.balanceInfo.token} {config.rechargeCurrency?.symbol}
+                    </Typography>
+                  )}
+                </div>
+              ) : (
+                <Typography color="text.secondary" gutterBottom>
+                  Auto-recharge is not configured
+                </Typography>
+              )}
+              
+              <Button
+                variant="contained"
+                size="small"
+                onClick={openModal}
+                sx={{ mt: 2 }}
+              >
+                {config?.enabled ? 'Modify Settings' : 'Setup Auto-Recharge'}
+              </Button>
+            </CardContent>
+          </Card>
+        );
+      }}
+    </AutoTopup>
+  );
+}
+```
+
 ### Subscription Management Example
 
 - `ResumeSubscription` component

package/es/checkout/form.js

@@ -53,9 +53,9 @@ export default function CheckoutForm({
       );
     }
   }, [type, mode, data, extraParams]);
-  const handlePaid = () => {
+  const handlePaid = (result) => {
     setState({ completed: true });
-    onPaid?.(data);
+    onPaid?.(result);
   };
   const handleError = (err) => {
     console.error(err);

package/es/components/auto-topup/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SxProps } from '@mui/material';
+import type { AutoRechargeConfig } from '@blocklet/payment-types';
+export interface AutoTopupCardProps {
+    currencyId: string;
+    onConfigChange?: (config: AutoRechargeConfig) => void;
+    sx?: SxProps;
+    mode?: 'default' | 'simple' | 'custom';
+    children?: (openModal: () => void, config: AutoRechargeConfig | null, paymentData: {
+        paymentInfo: any;
+        balanceInfo: any;
+    } | null, loading: boolean) => React.ReactNode;
+}
+export default function AutoTopupCard({ currencyId, onConfigChange, sx, mode, children, }: AutoTopupCardProps): JSX.Element | null;