ResumeSubscription

The ResumeSubscription component provides a straightforward UI for users to resume a canceled subscription. It renders a dialog that guides the user through the confirmation process and automatically handles complex scenarios like re-staking if the subscription requires it.

This component must be used within a PaymentProvider to access the necessary context for handling wallet interactions.

Workflow

The following diagram illustrates the process flow when a user resumes a subscription, including the conditional logic for re-staking.

ResumeSubscription

Props

Prop	Type	Required	Description
`subscriptionId`	`string`	Yes	The unique identifier of the subscription to be resumed.
`onResumed`	`(subscription: Subscription) => void`	No	A callback function that is triggered after the subscription is successfully resumed. It receives the updated subscription object as an argument.
`dialogProps`	`object`	No	Props to customize the underlying Material-UI Dialog. You can control its state (`open`, `onClose`) and appearance (`title`).
`successToast`	`boolean`	No	If `true`, a success notification toast is displayed upon successful resumption. Defaults to `true`.
`authToken`	`string`	No	An optional authentication token for API requests. This is useful for cross-origin or server-to-server integration scenarios.

Usage Examples

Basic Usage

This is the simplest way to use the component. It will render an open dialog by default.

Basic ResumeSubscription Example

import { ResumeSubscription } from '@blocklet/payment-react';

function ResumePage({ subscriptionId }) {
  // This component must be rendered within a PaymentProvider
  return <ResumeSubscription subscriptionId={subscriptionId} />;
}

Handling the Result

Use the onResumed callback to receive the updated subscription data and refresh your application's state.

Handling the onResumed Callback

import { ResumeSubscription } from '@blocklet/payment-react';
import { useState } from 'react';

function SubscriptionDetails({ initialSubscription }) {
  const [subscription, setSubscription] = useState(initialSubscription);

  const handleSubscriptionResumed = (updatedSubscription) => {
    console.log('Subscription has been successfully resumed:', updatedSubscription);
    setSubscription(updatedSubscription);
    // You can also show a confirmation message or redirect the user.
  };

  return (
    <div>
      {/* Display subscription details based on the `subscription` state */}
      <ResumeSubscription
        subscriptionId={subscription.id}
        onResumed={handleSubscriptionResumed}
      />
    </div>
  );
}

Controlling the Dialog

For a more practical integration, control the dialog's visibility from a parent component. This allows you to open it in response to a user action, like clicking a button.

Triggering ResumeSubscription with a Button

import { ResumeSubscription } from '@blocklet/payment-react';
import { useState } from 'react';
import { Button } from '@mui/material';

function SubscriptionActions({ subscriptionId }) {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleResumed = () => {
    setIsModalOpen(false);
    // Refetch subscription data to update UI
    alert('Subscription resumed!');
  };

  return (
    <>
      <Button variant="contained" onClick={() => setIsModalOpen(true)}>
        Resume Subscription
      </Button>

      {isModalOpen && (
        <ResumeSubscription
          subscriptionId={subscriptionId}
          onResumed={handleResumed}
          dialogProps={{
            open: isModalOpen,
            title: 'Confirm Subscription Renewal',
            onClose: () => setIsModalOpen(false),
          }}
        />
      )}
    </>
  );
}

Full Integration Example

Here is a complete example showing how to integrate ResumeSubscription within the required PaymentProvider.

Complete Integration Example

import { PaymentProvider, ResumeSubscription } from '@blocklet/payment-react';
import { useSessionContext } from 'path/to/your/session/context'; // Your app's session context
import { useState } from 'react';
import { Button, Card, CardContent, Typography } from '@mui/material';

function SubscriptionManagementPage({ subscription }) {
  const { session, connect } = useSessionContext();
  const [isResumeOpen, setIsResumeOpen] = useState(false);

  const handleResumed = (updatedSubscription) => {
    console.log('Subscription updated:', updatedSubscription);
    setIsResumeOpen(false);
    // Ideally, you would trigger a data refetch here to update the entire page.
  };

  return (
    <PaymentProvider session={session} connect={connect}>
      <Card>
        <CardContent>
          <Typography variant="h5">Manage Your Subscription</Typography>
          <Typography color="text.secondary">Status: {subscription.status}</Typography>

          {subscription.status === 'canceled' && (
            <Button
              variant="contained"
              color="primary"
              sx={{ mt: 2 }}
              onClick={() => setIsResumeOpen(true)}>
              Resume Subscription
            </Button>
          )}
        </CardContent>
      </Card>

      {isResumeOpen && (
        <ResumeSubscription
          subscriptionId={subscription.id}
          onResumed={handleResumed}
          dialogProps={{
            open: isResumeOpen,
            onClose: () => setIsResumeOpen(false),
          }}
        />
      )}
    </PaymentProvider>
  );
}