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

Reusable react components for payment kit v2

# ResumeSubscription

`ResumeSubscription` コンポーネントは、キャンセルされたサブスクリプションをユーザーが再開するための、分かりやすいUIを提供します。ユーザーを確認プロセスに沿って案内するダイアログをレンダリングし、サブスクリプションで必要な場合には再ステーキングのような複雑なシナリオも自動的に処理します。

このコンポーネントは、ウォレットとのやり取りを処理するために必要なコンテキストにアクセスするため、`PaymentProvider` 内で使用する必要があります。

## ワークフロー

以下の図は、ユーザーがサブスクリプションを再開する際のプロセスフローを示したもので、再ステーキングの条件分岐ロジックも含まれています。

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


## Props

| プロパティ       | 型                                                     | 必須 | 説明                                                                                                                             | 
| ---------------- | -------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `subscriptionId` | `string`                                                 | はい     | 再開するサブスクリプションの一意の識別子。                                                                                 |
| `onResumed`      | `(subscription: Subscription) => void`                   | いいえ   | サブスクリプションが正常に再開された後にトリガーされるコールバック関数。引数として更新されたサブスクリプションオブジェクトを受け取ります。 |
| `dialogProps`    | `object`                                                 | いいえ   | 基礎となるMaterial-UIダイアログをカスタマイズするためのProps。状態（`open`、`onClose`）と外観（`title`）を制御できます。            |
| `successToast`   | `boolean`                                                | いいえ   | `true`の場合、正常に再開されると成功通知のトーストが表示されます。デフォルトは`true`です。                                   |
| `authToken`      | `string`                                                 | いいえ   | APIリクエスト用のオプションの認証トークン。これは、オリジン間またはサーバー間のインテグレーションシナリオで役立ちます。            |

## 使用例

### 基本的な使い方

これは、コンポーネントを使用する最も簡単な方法です。デフォルトで開いた状態のダイアログがレンダリングされます。

```tsx Basic ResumeSubscription Example icon=logos:react
import { ResumeSubscription } from '@blocklet/payment-react';

function ResumePage({ subscriptionId }) {
  // このコンポーネントはPaymentProvider内でレンダリングする必要があります
  return <ResumeSubscription subscriptionId={subscriptionId} />;
}
```

### 結果のハンドリング

`onResumed`コールバックを使用して、更新されたサブスクリプションデータを受け取り、アプリケーションの状態を更新します。

```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('サブスクリプションが正常に再開されました:', updatedSubscription);
    setSubscription(updatedSubscription);
    // 確認メッセージの表示やユーザーのリダイレクトも可能です。
  };

  return (
    <div>
      {/* `subscription` の状態に基づいてサブスクリプションの詳細を表示 */}
      <ResumeSubscription
        subscriptionId={subscription.id}
        onResumed={handleSubscriptionResumed}
      />
    </div>
  );
}
```

### ダイアログの制御

より実用的な統合のために、親コンポーネントからダイアログの可視性を制御します。これにより、ボタンのクリックなどのユーザーアクションに応じてダイアログを開くことができます。

```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);
    // サブスクリプションデータを再取得してUIを更新
    alert('サブスクリプションが再開されました！');
  };

  return (
    <>
      <Button variant="contained" onClick={() => setIsModalOpen(true)}>
        サブスクリプションを再開
      </Button>

      {isModalOpen && (
        <ResumeSubscription
          subscriptionId={subscriptionId}
          onResumed={handleResumed}
          dialogProps={{
            open: isModalOpen,
            title: 'サブスクリプション更新の確認',
            onClose: () => setIsModalOpen(false),
          }}
        />
      )}
    </>
  );
}
```

## 完全な統合例

以下は、必須の`PaymentProvider`内に`ResumeSubscription`を統合する方法を示す完全な例です。

```tsx Complete Integration Example icon=logos:react
import { PaymentProvider, ResumeSubscription } from '@blocklet/payment-react';
import { useSessionContext } from 'path/to/your/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('サブスクリプションが更新されました:', updatedSubscription);
    setIsResumeOpen(false);
    // 理想的には、ここでデータを再取得してページ全体を更新します。
  };

  return (
    <PaymentProvider session={session} connect={connect}>
      <Card>
        <CardContent>
          <Typography variant="h5">サブスクリプションの管理</Typography>
          <Typography color="text.secondary">ステータス: {subscription.status}</Typography>

          {subscription.status === 'canceled' && (
            <Button
              variant="contained"
              color="primary"
              sx={{ mt: 2 }}
              onClick={() => setIsResumeOpen(true)}>
              サブスクリプションを再開
            </Button>
          )}
        </CardContent>
      </Card>

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