@blocklet/payment-react/docs/components-business-resume-subscription.md

Reusable react components for payment kit v2

# 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.

<!-- DIAGRAM_IMAGE_START:sequence:4:3 -->
![ResumeSubscription](assets/diagram/resume-subscription-diagram-0.jpg)
<!-- DIAGRAM_IMAGE_END -->


## 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.

```tsx Basic ResumeSubscription Example icon=logos:react
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.

```tsx Handling the onResumed Callback icon=logos:react
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.

```tsx Triggering ResumeSubscription with a Button icon=logos:react
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`.

```tsx Complete Integration Example icon=logos:react
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>
  );
}
```