# Original Vue Recharge Center Logic

## Routes

- `/recharge`
  - Clears the persisted `targetUser` store on mount.
  - Lets the user input a target account / user ID.
  - Searches the target user before entering the payment page.
  - Opens a help modal with recharge instructions.
- `/recharge-pay-way`
  - Reads the target user from the persisted `targetUser` store.
  - Loads payment application, target region/country, commodity packages, and payment channels.
  - Places a recharge order and redirects to a third-party payment page.

## State

- `targetUser`
  - Persisted Pinia store.
  - `setTargetUser(profile)` after `/recharge` search succeeds.
  - `clearTargetUser()` on `/recharge` mount and after Airwallex order redirect starts.
- `selectedCountry`
  - Country store value used by `/recharge-pay-way`.
  - First returned country is selected when the store is empty.
- `countryList`
  - Country store list populated from `/order/web/pay/user-profile`.
- `applicationId`
  - Fixed value in original Vue: `1963531459019739137`.
- `type`
  - `FREIGHT_GOLD_SUPER` when `targetUser.isSuperFreightAgent`.
  - `FREIGHT_GOLD` when `targetUser.isFreightAgent`.
  - `GOLD` otherwise.

## APIs

### Get current user profile

`GET /team/member/profile`

Usage in new H5:
- Loads the current logged-in user's account card before the recharge flow.
- This is the same current-user profile source reused by the hyapp center pages.

Reusable fields:
- `id`
- `account`
- `userNickname`
- `name`
- `userAvatar`
- `ownSpecialId.account`

### Get current user coin balance

`GET /wallet/freight/balance`

Original Vue reference:
- The old recharge agency / coin seller page imports `a4` from the main bundle.
- `a4` maps to `dX()`, which calls `GET /wallet/freight/balance`.
- Original UI stores `body.toString()` and displays it under `my_coins`.

Usage in new H5:
- Displays the current user's Coins card.
- If the request fails, the page keeps showing `0` and the recharge flow still works.

Reusable fields:
- `body` as number
- `body.gold`
- `body.goldBalance`
- `body.coin`
- `body.coins`
- `body.balance`
- `body.amount`

### Search target user

`GET /user/user-profile/open-search?account=<account>`

Usage:
- Called from `/recharge` search button.
- Success condition in Vue: `status && body.id`.
- Success action: save `body` to `targetUser`, then route to `/recharge-pay-way`.
- Failure action: toast `User info not found`.

Reusable fields:
- `id`
- `account`
- `userNickname`
- `name`
- `userAvatar`
- `ownSpecialId.account`
- `isFreightAgent`
- `isSuperFreightAgent`

### Recharge coins to target user

`POST /wallet/freight/ship`

Body:

```json
{
  "acceptUserId": "<target user id>",
  "quantity": 1000
}
```

Original Vue reference:
- The old coin seller page imports `a5` from the main bundle.
- `a5` maps to `mX(payload)`, which calls `POST /wallet/freight/ship`.
- Original submit logic sends `te({ acceptUserId: o, quantity: t })`.
- If the response has `body`, Vue uses it as the updated current coin balance.

Usage in new H5:
- After searching the target user, the page shows one coins input and a confirm recharge button.
- It no longer shows country selection, payment methods, or recharge packages for this direct transfer flow.

Reusable fields:
- `acceptUserId`: target user `id`
- `quantity`: entered coins amount
- response `body`: updated current user coin balance when returned

### Get transfer history

`GET /wallet/freight/balance/running/water/client/flowByUserId`

Query params:
- `userId=<current user id>`
- `type=0 | 1`
- `searchId=<searched user id or empty>`
- `lastId=<last record id for load more or empty>`

Original Vue reference:
- The seller records page imports `ad` as `Z` from the main bundle.
- `Z(params)` maps to `hX(params)`, which calls this endpoint.
- Original page uses `type=0` for `income` and `type=1` for `expenditure`.
- For each record, Vue displays `+quantity` when `record.type === 0`, otherwise `-quantity`.
- For user display, Vue reads `record.userAccount` for income records and `record.acceptUserAccount` for expenditure records.

Usage in new H5:
- The Coins card has a right-side History button.
- History opens in a center modal with Income / Expenditure tabs, user ID search, and load more using `lastId`.

### Get payment application

`GET /order/web/pay/application/{applicationId}`

Usage:
- Called by `/recharge-pay-way`.
- Original code reads `body.appCode`.

Reusable fields:
- `id`
- `appName`
- `appCode`
- `androidLink`
- `iosLink`

### Get target recharge profile and countries

`GET /order/web/pay/user-profile`

Query params:
- `sysOrigin=<appCode>`
- `account=<targetUser.account>`
- `type=GOLD | FREIGHT_GOLD | FREIGHT_GOLD_SUPER`

Usage:
- Called after payment application is loaded.
- Backend resolves user region and available pay countries.
- Original Vue sets `countryList`, selects the first country if none is selected, and stores `regionId`.

Reusable fields:
- `userProfile.id`
- `userProfile.userAvatar`
- `userProfile.userNickname`
- `userProfile.account`
- `userProfile.sysOrigin`
- `countryList[].id`
- `countryList[].countryId`
- `countryList[].country.countryName`
- `countryList[].country.aliasName`
- `countryList[].country.nationalFlag`
- `regionId`

### Get commodities and channels

`GET /order/web/pay/commodity`

Query params:
- `applicationId=1963531459019739137`
- `payCountryId=<selected country id>`
- `regionId=<regionId>`
- `type=GOLD | FREIGHT_GOLD | FREIGHT_GOLD_SUPER`

Usage:
- Called after country/profile data is ready.
- Original Vue renders all returned channels, and each channel shows the same commodity grid.

Reusable fields:
- `application`
- `commodity[].id`
- `commodity[].content`
- `commodity[].awardContent`
- `commodity[].amountUsd`
- `commodity[].amount`
- `commodity[].currency`
- `channels[].channel.channelCode`
- `channels[].channel.channelName`
- `channels[].channel.channelIcon`
- `channels[].details.channelCode`
- `channels[].details.factoryChannel`
- `channels[].details.factoryMinLimit`
- `channels[].details.factoryMaxLimit`

### Place recharge order

`POST /order/web/pay/recharge`

Body:

```json
{
  "applicationId": "1963531459019739137",
  "payCountryId": "<selected country id>",
  "goodsId": "<commodity id>",
  "userId": "<target user id>",
  "channelCode": "<channel.channelCode>"
}
```

Usage:
- Called when the user taps a commodity under a payment channel.
- If `body.factoryCode === "AIRWALLEX"`, original Vue loads Airwallex Elements and calls `redirectToCheckout`.
- If `body.requestUrl` exists, original Vue redirects with `location.href = decodeURIComponent(requestUrl)`.

Reusable fields:
- `orderId`
- `tradeNo`
- `factoryCode`
- `factoryChannelCode`
- `currency`
- `requestUrl`
- `expand.id`
- `expand.client_secret`

## New H5 implementation notes

- New page lives at `h5/hyapp/recharge-center`.
- It keeps the existing hyapp center architecture: static `index.html`, `style.css`, `script.js`.
- It uses URL `token` for Java API authorization and sends the same H5 request headers used by the existing hyapp center pages.
- It uses the old coin seller direct-transfer API for the current UI: search target user, enter coins amount, and confirm recharge.
- The older `/recharge-pay-way` country / package / third-party payment flow is documented above for reference but is not rendered in the current H5 page.