@blocklet/payment-react 1.20.16 → 1.20.17

package/docs/components-ui-form-elements-country-select.zh-TW.md

@@ -0,0 +1,126 @@
+# CountrySelect
+
+`CountrySelect` 元件提供了一個方便使用者選擇國家的下拉式選單。它具有可搜尋的列表、顯示國旗，並提供響應式設計，能適應桌面和行動裝置的視窗。它設計用於在 `react-hook-form` 管理的表單中使用。
+
+## Props
+
+| Prop         | Type                             | Description                                                                                 | Required | Default |
+|--------------|----------------------------------|---------------------------------------------------------------------------------------------|----------|---------|
+| `value`      | `CountryIso2`                    | 所選國家的 ISO2 代碼（例如 'us'）。                                         | Yes      |         |
+| `onChange`   | `(value: CountryIso2) => void`   | 選擇國家時叫用的回呼函式。                             | Yes      |         |
+| `name`       | `string`                         | 輸入框的 name 屬性，用於與 `react-hook-form` 整合。              | Yes      |         |
+| `sx`         | `SxProps`                        | 應用於根元素的自訂樣式。                                            | No       | `{}`    |
+| `showDialCode` | `boolean`                        | 如果為 `true`，國家的撥號代碼將與其名稱一起顯示在列表中。        | No       | `false` |
+
+## 基本用法
+
+要使用 `CountrySelect` 元件，您必須將其包裝在 `react-hook-form` 的 `FormProvider` 中。元件的狀態應透過表單上下文進行管理。
+
+```tsx Basic CountrySelect Example icon=logos:react
+import { FormProvider, useForm } from 'react-hook-form';
+import { Box, Button, Typography } from '@mui/material';
+import CountrySelect from '@blocklet/payment-react/src/components/country-select'; // 根據需要調整路徑
+import type { CountryIso2 } from 'react-international-phone';
+
+export default function BasicCountrySelect() {
+  const methods = useForm<{ country: CountryIso2 }>({
+    defaultValues: {
+      country: 'us',
+    },
+  });
+
+  const { handleSubmit, watch, setValue } = methods;
+  const countryValue = watch('country'); // 監聽變更以更新受控元件
+
+  const onSubmit = (data: { country: CountryIso2 }) => {
+    alert(`表單已提交，國家：${data.country}`);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 400 }}>
+          <Typography variant="h6">選擇您的國家</Typography>
+          <CountrySelect
+            name="country"
+            value={countryValue}
+            onChange={(newCountry) => {
+              setValue('country', newCountry, { shouldValidate: true });
+            }}
+          />
+          <Button type="submit" variant="contained">
+            提交
+          </Button>
+          <Typography>
+            目前表單值：{countryValue}
+          </Typography>
+        </Box>
+      </form>
+    </FormProvider>
+  );
+}
+```
+
+## 功能
+
+### 搜尋與篩選
+元件在下拉列表頂部包含一個搜尋欄，讓使用者可以透過國家名稱、ISO2 代碼或撥號代碼快速找到國家。例如，搜尋「+1」將會顯示美國和加拿大。
+
+### 響應式 UI
+在桌面裝置上，`CountrySelect` 會渲染為標準的下拉式選單。在行動裝置上，它會轉換成一個從螢幕底部滑出的全寬對話方塊，為小型裝置提供最佳化的使用者體驗。
+
+### 鍵盤可及性
+`CountrySelect` 支援完整的鍵盤導覽。使用者可以使用 `ArrowUp` 和 `ArrowDown` 鍵在列表中導覽，`Enter` 鍵選擇國家，`Escape` 鍵關閉下拉選單。`Tab` 和 `Shift+Tab` 也可以在列表項目之間循環。
+
+### 表單整合
+設計用於與 `react-hook-form` 無縫協作。當做出選擇時，它會自動更新表單狀態，因此需要將其包裝在 `FormProvider` 內。
+
+## 進階用法
+
+### 顯示撥號代碼
+
+您可以透過將 `showDialCode` 屬性設定為 `true`，在列表中顯示每個國家的電話撥號代碼。
+
+```tsx CountrySelect with Dial Code icon=logos:react
+import { FormProvider, useForm } from 'react-hook-form';
+import { Box, Button } from '@mui/material';
+import CountrySelect from '@blocklet/payment-react/src/components/country-select'; // 根據需要調整路徑
+import type { CountryIso2 } from 'react-international-phone';
+
+export default function CountrySelectWithDialCode() {
+  const methods = useForm<{ country: CountryIso2 }>({
+    defaultValues: {
+      country: 'gb',
+    },
+  });
+
+  const { handleSubmit, watch, setValue } = methods;
+  const countryValue = watch('country');
+
+  const onSubmit = (data: { country: CountryIso2 }) => {
+    alert(`表單已提交，國家：${data.country}`);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 400 }}>
+          <CountrySelect
+            name="country"
+            value={countryValue}
+            onChange={(newCountry) => setValue('country', newCountry)}
+            showDialCode={true}
+          />
+          <Button type="submit" variant="contained">
+            提交
+          </Button>
+        </Box>
+      </form>
+    </FormProvider>
+  );
+}
+```
+
+## 後續步驟
+
+此元件是建構更複雜表單元素的基礎。查看它如何整合到 [PhoneInput](./components-ui-form-elements-phone-input.md) 元件中，以建立一個完整的國際電話號碼欄位。

package/docs/components-ui-form-elements-country-select.zh.md

@@ -0,0 +1,126 @@
+# CountrySelect
+
+`CountrySelect` 组件提供了一个用户友好的国家选择下拉菜单。它具有可搜索列表、显示国旗，并提供响应式设计，可适应桌面和移动设备。该组件设计用于在 `react-hook-form` 管理的表单中使用。
+
+## Props
+
+| Prop | Type | Description | Required | Default |
+|---|---|---|---|---|
+| `value` | `CountryIso2` | 所选国家的 ISO2 代码（例如，'us'）。 | 是 | |
+| `onChange` | `(value: CountryIso2) => void` | 选择国家时调用的回调函数。 | 是 | |
+| `name` | `string` | 输入的 name 属性，用于与 `react-hook-form` 集成。 | 是 | |
+| `sx` | `SxProps` | 应用于根元素的自定义样式。 | 否 | `{}` |
+| `showDialCode` | `boolean` | 如果为 `true`，国家的电话区号将与其名称一起显示在列表中。 | 否 | `false` |
+
+## 基本用法
+
+要使用 `CountrySelect` 组件，您必须将其包装在 `react-hook-form` 的 `FormProvider` 中。组件的状态应通过表单上下文进行管理。
+
+```tsx Basic CountrySelect Example icon=logos:react
+import { FormProvider, useForm } from 'react-hook-form';
+import { Box, Button, Typography } from '@mui/material';
+import CountrySelect from '@blocklet/payment-react/src/components/country-select'; // Adjust path as needed
+import type { CountryIso2 } from 'react-international-phone';
+
+export default function BasicCountrySelect() {
+  const methods = useForm<{ country: CountryIso2 }>({
+    defaultValues: {
+      country: 'us',
+    },
+  });
+
+  const { handleSubmit, watch, setValue } = methods;
+  const countryValue = watch('country'); // Watch for changes to update the controlled component
+
+  const onSubmit = (data: { country: CountryIso2 }) => {
+    alert(`Form submitted with country: ${data.country}`);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 400 }}>
+          <Typography variant="h6">Select Your Country</Typography>
+          <CountrySelect
+            name="country"
+            value={countryValue}
+            onChange={(newCountry) => {
+              setValue('country', newCountry, { shouldValidate: true });
+            }}
+          />
+          <Button type="submit" variant="contained">
+            Submit
+          </Button>
+          <Typography>
+            Current form value: {countryValue}
+          </Typography>
+        </Box>
+      </form>
+    </FormProvider>
+  );
+}
+```
+
+## 功能
+
+### 搜索和筛选
+组件在下拉列表顶部包含一个搜索栏，允许用户通过国家名称、ISO2 代码或电话区号快速查找国家。例如，搜索“+1”将显示美国和加拿大。
+
+### 响应式 UI
+在桌面设备上，`CountrySelect` 渲染为标准下拉菜单。在移动设备上，它会转变为一个从屏幕底部滑出的全宽对话框，为小型设备提供优化的用户体验。
+
+### 键盘可访问性
+`CountrySelect` 支持完整的键盘导航。用户可以使用 `ArrowUp` 和 `ArrowDown` 键在列表中导航，使用 `Enter` 键选择国家，使用 `Escape` 键关闭下拉列表。`Tab` 和 `Shift+Tab` 也可以在列表项之间循环切换。
+
+### 表单集成
+设计用于与 `react-hook-form` 无缝协作。当做出选择时，它会自动更新表单状态，因此需要将其包装在 `FormProvider` 中。
+
+## 高级用法
+
+### 显示电话区号
+
+您可以通过将 `showDialCode` 属性设置为 `true` 来在列表中显示每个国家的电话区号。
+
+```tsx CountrySelect with Dial Code icon=logos:react
+import { FormProvider, useForm } from 'react-hook-form';
+import { Box, Button } from '@mui/material';
+import CountrySelect from '@blocklet/payment-react/src/components/country-select'; // Adjust path as needed
+import type { CountryIso2 } from 'react-international-phone';
+
+export default function CountrySelectWithDialCode() {
+  const methods = useForm<{ country: CountryIso2 }>({
+    defaultValues: {
+      country: 'gb',
+    },
+  });
+
+  const { handleSubmit, watch, setValue } = methods;
+  const countryValue = watch('country');
+
+  const onSubmit = (data: { country: CountryIso2 }) => {
+    alert(`Form submitted with country: ${data.country}`);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 400 }}>
+          <CountrySelect
+            name="country"
+            value={countryValue}
+            onChange={(newCountry) => setValue('country', newCountry)}
+            showDialCode={true}
+          />
+          <Button type="submit" variant="contained">
+            Submit
+          </Button>
+        </Box>
+      </form>
+    </FormProvider>
+  );
+}
+```
+
+## 后续步骤
+
+该组件是构建更复杂表单元素的基础。请参阅它如何集成到 [PhoneInput](./components-ui-form-elements-phone-input.md) 组件中，以创建一个完整的国际电话号码字段。

package/docs/components-ui-form-elements-currency-selector.ja.md

@@ -0,0 +1,108 @@
+# CurrencySelector
+
+`CurrencySelector`コンポーネントは、利用可能なオプションのリストから支払い通貨を選択するための、使いやすいインターフェースを提供します。各通貨をロゴ、シンボル、関連する支払い方法とともに表示し、ユーザーが簡単に選択できるようにします。このコンポーネントは通常、より大きな支払いフォームやチェックアウトフォーム内で使用されます。
+
+## Props
+
+| Prop         | Type                                                     | Description                                                                                                       | Required |
+| :----------- | :------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- | :------- |
+| `value`      | `string`                                                 | 現在選択されている通貨のIDです。親コンポーネントのstateで管理する必要があります。              | Yes      |
+| `currencies` | `TPaymentCurrency[]`                                     | 選択可能なオプションとして表示される、利用可能な通貨オブジェクトの配列です。                                          | Yes      |
+| `onChange`   | `(currencyId: string, methodId?: string) => void`        | ユーザーが通貨を選択したときに実行されるコールバック関数です。新しい通貨IDと、オプションで関連する支払い方法のIDを受け取ります。 | Yes      |
+
+### TPaymentCurrency 型
+
+`currencies` propは、以下の構造を持つオブジェクトの配列を想定しています：
+
+```typescript TPaymentCurrency icon=mdi:code-json
+export type TPaymentCurrency = {
+  id: string;       // 通貨オプションの一意の識別子
+  logo: string;     // 通貨/メソッドのロゴのURL
+  name: string;     // 通貨の表示名
+  symbol: string;   // 通貨記号（例：'$'、'€'）
+  method: {         // 関連する支払い方法
+    id: string;
+    name: string;
+  };
+};
+```
+
+## 使用例
+
+以下は`CurrencySelector`コンポーネントを実装する基本的な例です。親コンポーネントで選択された通貨のstateを管理し、利用可能な通貨のリストを提供する必要があります。
+
+`@blocklet/payment-react`コンポーネントは`PaymentProvider`内で動作するように設計されており、`PaymentProvider`が必要なテーマとコンテキストを提供します。コンポーネントが適切にラップされていることを確認してください。
+
+```jsx MyCurrencySelectorComponent.tsx icon=logos:react
+import React, { useState } from 'react';
+import { PaymentProvider } from '@blocklet/payment-react';
+import { CurrencySelector } from '@blocklet/payment-react/components';
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+import { useSessionContext } from '@/hooks/session-context'; // このインポートパスをあなたのプロジェクト構造に合わせて調整してください
+
+// デモンストレーション用のモックデータ
+const mockCurrencies: TPaymentCurrency[] = [
+  {
+    id: 'usd_xxxxxx',
+    logo: 'https://path-to-your/usd-logo.png',
+    name: 'US Dollar',
+    symbol: 'USD',
+    method: {
+      id: 'stripe_yyyyy',
+      name: 'Stripe',
+    },
+  },
+  {
+    id: 'eth_zzzzzz',
+    logo: 'https://path-to-your/eth-logo.png',
+    name: 'Ethereum',
+    symbol: 'ETH',
+    method: {
+      id: 'crypto_aaaaa',
+      name: 'Crypto Payment',
+    },
+  },
+];
+
+function MyCurrencySelectorComponent() {
+  const [selectedCurrency, setSelectedCurrency] = useState<string>(mockCurrencies[0].id);
+
+  const handleCurrencyChange = (currencyId: string, methodId?: string) => {
+    console.log(`選択された通貨: ${currencyId}, メソッド: ${methodId}`);
+    setSelectedCurrency(currencyId);
+  };
+
+  return (
+    <div>
+      <h3>通貨を選択</h3>
+      <CurrencySelector
+        value={selectedCurrency}
+        currencies={mockCurrencies}
+        onChange={handleCurrencyChange}
+      />
+    </div>
+  );
+}
+
+// あなたのアプリのエントリーポイント
+export default function App() {
+  const { session, connectApi } = useSessionContext();
+
+  if (!session || !connectApi) {
+    return <div>読み込み中...</div>;
+  }
+
+  return (
+    <PaymentProvider session={session} connectApi={connectApi}>
+      <MyCurrencySelectorComponent />
+    </PaymentProvider>
+  );
+}
+```
+
+この例では：
+1.  `TPaymentCurrency`構造に従う`mockCurrencies`配列を定義します。
+2.  `MyCurrencySelectorComponent`は`useState`フックを使用して`selectedCurrency`を追跡します。
+3.  `handleCurrencyChange`関数は、新しい通貨が選択されたときにstateを更新し、新しい値をログに出力します。
+4.  `CurrencySelector`は制御されたコンポーネントであり、その`value`と`onChange` propsは親のstateによって管理されます。
+5.  コンポーネント全体が`PaymentProvider`でラップされ、適切なレンダリングとスタイリングに使用されるMaterial-UIテーマへのアクセスを確保します。

package/docs/components-ui-form-elements-currency-selector.zh-TW.md

@@ -0,0 +1,108 @@
+# CurrencySelector
+
+`CurrencySelector` 組件提供了一個使用者友善的介面，讓使用者能從可用選項清單中選擇支付貨幣。它會顯示每種貨幣的標誌、符號及相關的支付方式，方便使用者進行選擇。此組件通常用於較大的支付或結帳表單中。
+
+## 屬性
+
+| Prop | 類型 | 描述 | 必填 |
+| :----------- | :------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- | :------- |
+| `value` | `string` | 當前所選貨幣的 ID。此 ID 應由父組件的狀態管理。 | 是 |
+| `currencies` | `TPaymentCurrency[]` | 一個可用貨幣物件的陣列，用以顯示為可選選項。 | 是 |
+| `onChange` | `(currencyId: string, methodId?: string) => void` | 當使用者選擇貨幣時執行的回呼函式。它會接收新的貨幣 ID 和可選的相關支付方式 ID。 | 是 |
+
+### TPaymentCurrency 類型
+
+`currencies` 屬性需要一個具有以下結構的物件陣列：
+
+```typescript TPaymentCurrency icon=mdi:code-json
+export type TPaymentCurrency = {
+  id: string;       // 貨幣選項的唯一識別碼
+  logo: string;     // 貨幣/方式標誌的 URL
+  name: string;     // 貨幣的顯示名稱
+  symbol: string;   // 貨幣符號（例如：'$'、'€'）
+  method: {         // 相關的支付方式
+    id: string;
+    name: string;
+  };
+};
+```
+
+## 使用範例
+
+這是一個如何實現 `CurrencySelector` 組件的基本範例。您需要在父組件中管理所選貨幣的狀態，並提供一個可用貨幣的清單。
+
+請注意，`@blocklet/payment-react` 組件設計為在 `PaymentProvider` 內運作，`PaymentProvider` 提供了必要的主題和上下文。請確保您的組件被適當地包裹。
+
+```jsx MyCurrencySelectorComponent.tsx icon=logos:react
+import React, { useState } from 'react';
+import { PaymentProvider } from '@blocklet/payment-react';
+import { CurrencySelector } from '@blocklet/payment-react/components';
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+import { useSessionContext } from '@/hooks/session-context'; // 根據您的專案結構調整此匯入路徑
+
+// 用於示範的模擬資料
+const mockCurrencies: TPaymentCurrency[] = [
+  {
+    id: 'usd_xxxxxx',
+    logo: 'https://path-to-your/usd-logo.png',
+    name: 'US Dollar',
+    symbol: 'USD',
+    method: {
+      id: 'stripe_yyyyy',
+      name: 'Stripe',
+    },
+  },
+  {
+    id: 'eth_zzzzzz',
+    logo: 'https://path-to-your/eth-logo.png',
+    name: 'Ethereum',
+    symbol: 'ETH',
+    method: {
+      id: 'crypto_aaaaa',
+      name: 'Crypto Payment',
+    },
+  },
+];
+
+function MyCurrencySelectorComponent() {
+  const [selectedCurrency, setSelectedCurrency] = useState<string>(mockCurrencies[0].id);
+
+  const handleCurrencyChange = (currencyId: string, methodId?: string) => {
+    console.log(`選擇的貨幣：${currencyId}，方式：${methodId}`);
+    setSelectedCurrency(currencyId);
+  };
+
+  return (
+    <div>
+      <h3>選擇貨幣</h3>
+      <CurrencySelector
+        value={selectedCurrency}
+        currencies={mockCurrencies}
+        onChange={handleCurrencyChange}
+      />
+    </div>
+  );
+}
+
+// 您的應用程式進入點
+export default function App() {
+  const { session, connectApi } = useSessionContext();
+
+  if (!session || !connectApi) {
+    return <div>載入中...</div>;
+  }
+
+  return (
+    <PaymentProvider session={session} connectApi={connectApi}>
+      <MyCurrencySelectorComponent />
+    </PaymentProvider>
+  );
+}
+```
+
+在此範例中：
+1.  我們定義了一個遵循 `TPaymentCurrency` 結構的 `mockCurrencies` 陣列。
+2.  `MyCurrencySelectorComponent` 使用 `useState` hook 來追蹤 `selectedCurrency`。
+3.  `handleCurrencyChange` 函式在選擇新貨幣時更新狀態，並記錄新值。
+4.  `CurrencySelector` 是一個受控組件，其 `value` 和 `onChange` 屬性由父組件的狀態管理。
+5.  整個組件被包裹在 `PaymentProvider` 中，以確保正確的渲染和存取用於樣式設定的 Material-UI 主題。

package/docs/components-ui-form-elements-currency-selector.zh.md

@@ -0,0 +1,108 @@
+# CurrencySelector
+
+`CurrencySelector` 组件提供了一个用户友好的界面，用于从可用选项列表中选择支付货币。它会显示每种货币的徽标、符号和关联的支付方式，方便用户做出选择。该组件通常在较大的支付或结账表单中使用。
+
+## Props
+
+| Prop         | Type                                                     | Description                                                                                                       | Required |
+| :----------- | :------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- | :------- |
+| `value`      | `string`                                                 | 当前所选货币的 ID。该值应由父组件的状态管理。              | 是      |
+| `currencies` | `TPaymentCurrency[]`                                     | 一个包含可用货币对象的数组，用作可选项进行显示。                                          | 是      |
+| `onChange`   | `(currencyId: string, methodId?: string) => void`        | 当用户选择一种货币时执行的回调函数。它会接收新的货币 ID 和可选的关联支付方式 ID。 | 是      |
+
+### TPaymentCurrency 类型
+
+`currencies` prop 需要一个具有以下结构的对象数组：
+
+```typescript TPaymentCurrency icon=mdi:code-json
+export type TPaymentCurrency = {
+  id: string;       // 货币选项的唯一标识符
+  logo: string;     // 货币/方式的徽标 URL
+  name: string;     // 货币的显示名称
+  symbol: string;   // 货币符号（例如 '$', '€'）
+  method: {         // 关联的支付方式
+    id: string;
+    name: string;
+  };
+};
+```
+
+## 用法示例
+
+这是一个如何实现 `CurrencySelector` 组件的基本示例。您需要在父组件中管理所选货币的状态，并提供一个可用货币列表。
+
+请注意，`@blocklet/payment-react` 组件设计为在 `PaymentProvider` 内部工作，`PaymentProvider` 提供了必要的主题和上下文。请确保您的组件被正确包裹。
+
+```jsx MyCurrencySelectorComponent.tsx icon=logos:react
+import React, { useState } from 'react';
+import { PaymentProvider } from '@blocklet/payment-react';
+import { CurrencySelector } from '@blocklet/payment-react/components';
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+import { useSessionContext } from '@/hooks/session-context'; // 根据您的项目结构调整此导入路径
+
+// 用于演示的模拟数据
+const mockCurrencies: TPaymentCurrency[] = [
+  {
+    id: 'usd_xxxxxx',
+    logo: 'https://path-to-your/usd-logo.png',
+    name: 'US Dollar',
+    symbol: 'USD',
+    method: {
+      id: 'stripe_yyyyy',
+      name: 'Stripe',
+    },
+  },
+  {
+    id: 'eth_zzzzzz',
+    logo: 'https://path-to-your/eth-logo.png',
+    name: 'Ethereum',
+    symbol: 'ETH',
+    method: {
+      id: 'crypto_aaaaa',
+      name: 'Crypto Payment',
+    },
+  },
+];
+
+function MyCurrencySelectorComponent() {
+  const [selectedCurrency, setSelectedCurrency] = useState<string>(mockCurrencies[0].id);
+
+  const handleCurrencyChange = (currencyId: string, methodId?: string) => {
+    console.log(`Selected currency: ${currencyId}, Method: ${methodId}`);
+    setSelectedCurrency(currencyId);
+  };
+
+  return (
+    <div>
+      <h3>Select a Currency</h3>
+      <CurrencySelector
+        value={selectedCurrency}
+        currencies={mockCurrencies}
+        onChange={handleCurrencyChange}
+      />
+    </div>
+  );
+}
+
+// 您的应用的入口点
+export default function App() {
+  const { session, connectApi } = useSessionContext();
+
+  if (!session || !connectApi) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <PaymentProvider session={session} connectApi={connectApi}>
+      <MyCurrencySelectorComponent />
+    </PaymentProvider>
+  );
+}
+```
+
+在此示例中：
+1.  我们定义了一个遵循 `TPaymentCurrency` 结构的 `mockCurrencies` 数组。
+2.  `MyCurrencySelectorComponent` 使用 `useState` 钩子来跟踪 `selectedCurrency`。
+3.  `handleCurrencyChange` 函数在选择新货币时更新状态，并记录新值。
+4.  `CurrencySelector` 是一个受控组件，其 `value` 和 `onChange` props 由父组件的状态管理。
+5.  整个组件被包裹在 `PaymentProvider` 中，以确保正确渲染并访问用于样式的 Material-UI 主题。