ResumeSubscription
The ResumeSubscription component provides a user interface for resuming a canceled subscription. It handles the necessary logic, including prompting the user to re-stake funds if required, and appears as a modal dialog by default.
This component must be used within a PaymentProvider to access the required payment context.
Overview#
The component streamlines the subscription recovery process. When rendered, it first checks if the subscription requires a new stake to be resumed. Based on this information, it presents one of two flows:
- Direct Resume: If no new stake is needed, the user can confirm to directly reactivate the subscription.
- Resume with Re-Stake: If a stake is required, the component will initiate a wallet connection flow, asking the user to approve the staking transaction to resume their subscription.
Props#
Prop | Type | Description |
|---|---|---|
|
| Required. The ID of the subscription to be resumed. |
|
| Optional. A callback function that is executed after the subscription has been successfully resumed. It receives the updated subscription object as an argument. |
|
| Optional. Props to customize the underlying Material-UI Dialog component. Default: |
|
| Optional. If |
|
| Optional. An authentication token to be included in API requests. This is useful for cross-origin requests or when the application manages authentication separately. |
Usage Examples#
Basic Usage#
This example shows the simplest way to use ResumeSubscription. The dialog will be open by default, and a success toast will appear upon completion.
import { PaymentProvider, ResumeSubscription } from '@blocklet/payment-react';
function SubscriptionManagement({ subscriptionId, refetchSubscription }) {
return (
<PaymentProvider session={session} connect={connectApi}>
<ResumeSubscription
subscriptionId={subscriptionId}
onResumed={(subscription) => {
console.log('Subscription resumed:', subscription);
// You can update your application's state here
refetchSubscription();
}}
/>
</PaymentProvider>
);
}Controlling the Dialog#
In a real-world application, you'll likely want to control when the dialog is visible. You can manage its state from the parent component and pass it down via dialogProps.
import { useState } from 'react';
import { Button } from '@mui/material';
import { PaymentProvider, ResumeSubscription } from '@blocklet/payment-react';
function SubscriptionDetails({ subscriptionId }) {
const [isResumeDialogOpen, setResumeDialogOpen] = useState(false);
const handleCloseDialog = () => {
setResumeDialogOpen(false);
};
return (
<PaymentProvider session={session} connect={connectApi}>
<Button onClick={() => setResumeDialogOpen(true)}>
Resume Subscription
</Button>
{isResumeDialogOpen && (
<ResumeSubscription
subscriptionId={subscriptionId}
onResumed={() => {
console.log('Subscription has been resumed.');
handleCloseDialog();
// Refresh subscription data
}}
dialogProps={{
open: isResumeDialogOpen,
onClose: handleCloseDialog,
title: 'Confirm Subscription Renewal',
}}
/>
)}
</PaymentProvider>
);
}Usage with an Authentication Token#
If your API requests require an authentication token (for example, in a Blocklet that interacts with another Blocklet's API), you can provide it using the authToken prop.
import { PaymentProvider, ResumeSubscription } from '@blocklet/payment-react';
function SecureSubscriptionResume({ subscriptionId, token }) {
return (
<PaymentProvider session={session} connect={connectApi}>
<ResumeSubscription
subscriptionId={subscriptionId}
authToken={token}
onResumed={(subscription) => {
console.log('Subscription resumed securely:', subscription.id);
}}
/>
</PaymentProvider>
);
}These examples demonstrate how to integrate the ResumeSubscription component for various common scenarios.