28 Commits

Author SHA1 Message Date
Codex d5b7a1f36c feat(private-zone): default to albums tab
Docker Image / Build and Push Docker Image (push) Successful in 2m17s
(cherry picked from commit a2cf62f78b)
2026-07-27 19:31:03 +08:00
Codex 9f829bbc0e fix(payment): portal checkout dialogs to viewport
(cherry picked from commit 67f292353e)
2026-07-27 19:29:36 +08:00
Codex d01441b8c7 fix(ci): deploy frontend production as lzf
Docker Image / Build and Push Docker Image (push) Successful in 2m45s
2026-07-27 16:54:17 +08:00
Codex ddacd03601 test(release): align selected production e2e assertions 2026-07-27 16:40:52 +08:00
Codex 1b121a8ef8 test(chat): enforce locked image URL masking 2026-07-27 16:12:12 +08:00
Codex b7221f2f70 feat(subscription): separate selection from payment and add issue feedback
(cherry picked from commit fe9d31146b)
2026-07-27 16:12:12 +08:00
Codex 30f88d3a20 fix(external-entry): preserve legacy private room links 2026-07-27 16:11:24 +08:00
Codex 7b09a7f850 feat(chat): send idempotent client message ids 2026-07-27 16:11:24 +08:00
Codex 38a4645b9c feat(private-zone): add paid video moments 2026-07-27 16:11:24 +08:00
Codex 76bffc1a0d feat(chat): add support action cards and live entitlements 2026-07-27 16:11:23 +08:00
Codex 19b8fc51d6 feat(call): add streaming voice call experience 2026-07-27 16:11:23 +08:00
Codex 9fbf180df6 fix(ci): scope frontend image cleanup 2026-07-27 16:11:23 +08:00
Codex 6721b6eb43 feat(payment): support user-bound seven-discount offers 2026-07-27 16:11:22 +08:00
Codex 64ba720121 feat(mobile): improve image viewer and install entry
Docker Image / Build and Push Docker Image (push) Successful in 1m58s
(cherry picked from commit 556bfd2919)
2026-07-24 14:54:57 +08:00
Codex b04ef58855 fix(pwa): 统一桌面安装图标
Docker Image / Build and Push Docker Image (push) Successful in 2m1s
(cherry picked from commit 29abd746da)
(cherry picked from commit 8660fe7b7e)
2026-07-24 14:16:56 +08:00
Codex 606e6d60ff fix(chat): debounce post-send action menu
Docker Image / Build and Push Docker Image (push) Successful in 1m56s
2026-07-23 20:03:26 +08:00
Codex c659c5fc3f test(e2e): align simplified splash expectations
Docker Image / Build and Push Docker Image (push) Successful in 3m4s
2026-07-23 19:33:08 +08:00
Codex 537a0a2c36 feat(chat): render commercial actions and persist greetings 2026-07-23 19:19:05 +08:00
Codex b1f52c68e8 feat(splash): simplify multi-character home layout 2026-07-23 19:19:05 +08:00
Codex 3c7b0c30e0 refactor(private-zone): use canonical product name 2026-07-23 19:19:05 +08:00
Codex 469512df18 feat(navigation): add favorite entry and Menu tab 2026-07-23 19:18:42 +08:00
Codex 318e4991be fix(ci): install pnpm from configured registry 2026-07-23 19:17:58 +08:00
Codex 2d432e5367 fix(ci): use reachable pnpm registry for Docker builds 2026-07-23 19:17:58 +08:00
Codex d6f104ee3f fix(private-zone): hide incomplete albums and refresh Maya cover
Docker Image / Build and Push Docker Image (push) Successful in 2m12s
2026-07-23 12:31:44 +08:00
Codex 9ca56c2a04 refactor(private-zone): use canonical product name 2026-07-23 12:31:44 +08:00
Codex 4639acf232 fix(multi-role): enable Maya and Nayeli commercial flows 2026-07-23 12:29:22 +08:00
Codex bdd53a6ea1 docs(private-zoom): remove legacy literal [skip ci] 2026-07-22 19:34:28 +08:00
Codex fb9e30cfd1 docs(private-zoom): record verified rollout [skip ci] 2026-07-22 19:32:16 +08:00
129 changed files with 687 additions and 4141 deletions
-138
View File
@@ -1,138 +0,0 @@
name: Deploy frontend to domestic test
on:
workflow_dispatch:
jobs:
deploy:
name: Build and deploy isolated domestic test
runs-on: gitea-label
container:
image: cozsweet-act-runner-node24-docker:latest
env:
NEXT_TELEMETRY_DISABLED: "1"
SENTRY_UPLOAD_SOURCEMAPS: "0"
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Validate domestic SSH configuration
env:
SSH_HOST: ${{ secrets.DOMESTIC_TEST_SSH_HOST }}
SSH_PORT: ${{ secrets.DOMESTIC_TEST_SSH_PORT }}
SSH_PRIVATE_KEY_B64: ${{ secrets.DOMESTIC_TEST_SSH_PRIVATE_KEY_B64 }}
SSH_KNOWN_HOSTS: ${{ secrets.DOMESTIC_TEST_SSH_KNOWN_HOSTS }}
run: |
set -eu
if [ -z "$SSH_HOST" ] || [ -z "$SSH_PRIVATE_KEY_B64" ] || [ -z "$SSH_KNOWN_HOSTS" ]; then
echo "Missing domestic test SSH secrets" >&2
exit 1
fi
mkdir -p "$HOME/.ssh"
chmod 700 "$HOME/.ssh"
printf '%s' "$SSH_PRIVATE_KEY_B64" | base64 -d > "$HOME/.ssh/domestic_test_deploy_key"
printf '%s\n' "$SSH_KNOWN_HOSTS" > "$HOME/.ssh/known_hosts"
chmod 600 "$HOME/.ssh/domestic_test_deploy_key" "$HOME/.ssh/known_hosts"
- name: Prepare domestic test environment
env:
TEST_ENV_FILE_CONTENT: ${{ secrets.TEST_ENV_FILE }}
run: |
set -eu
if [ -z "$TEST_ENV_FILE_CONTENT" ]; then
echo "Missing existing secret: TEST_ENV_FILE" >&2
exit 1
fi
umask 077
printf '%s\n' "$TEST_ENV_FILE_CONTENT" > .env.domestic-test
replace_env() {
key="$1"
value="$2"
awk -v key="$key" -v value="$value" '
BEGIN { replaced = 0 }
$0 ~ "^" key "=" { print key "=" value; replaced = 1; next }
{ print }
END { if (!replaced) print key "=" value }
' .env.domestic-test > .env.domestic-test.next
mv .env.domestic-test.next .env.domestic-test
}
replace_env NEXT_PUBLIC_APP_ENV test
replace_env NEXT_PUBLIC_API_BASE_URL https://testapi.banlv-ai.com
replace_env NEXT_PUBLIC_WS_BASE_URL wss://testapi.banlv-ai.com/ws
replace_env NEXTAUTH_URL http://127.0.0.1:9135
replace_env NEXTAUTH_URL_INTERNAL http://127.0.0.1:3000
grep -Eq '^AUTH_SECRET=.+$' .env.domestic-test
grep -Eq '^NEXT_PUBLIC_API_BASE_URL=https://testapi\.banlv-ai\.com/?$' .env.domestic-test
grep -Eq '^NEXT_PUBLIC_WS_BASE_URL=wss://testapi\.banlv-ai\.com/ws/?$' .env.domestic-test
- name: Prepare image metadata
run: |
set -eu
SHORT_SHA="$(git rev-parse --short HEAD)"
IMAGE="cozsweet-frontend-domestic-test:test-$SHORT_SHA"
ARCHIVE="cozsweet-frontend-domestic-test-$SHORT_SHA.tar.gz"
{
echo "SHORT_SHA=$SHORT_SHA"
echo "IMAGE=$IMAGE"
echo "ARCHIVE=$ARCHIVE"
} >> "$GITHUB_ENV"
- name: Run frontend quality checks
run: |
set -eu
pnpm install --frozen-lockfile
pnpm lint
pnpm typecheck
pnpm test:contracts
- name: Build and archive runtime image
run: |
set -eu
DOCKER_BUILDKIT=1 docker build \
--secret id=next_env,src=.env.domestic-test \
--build-arg NEXT_ENV_FILE=.env.domestic-test \
-t "$IMAGE" \
.
docker save "$IMAGE" | gzip -1 > "$ARCHIVE"
test -s "$ARCHIVE"
- name: Deploy isolated domestic test container
env:
SSH_HOST: ${{ secrets.DOMESTIC_TEST_SSH_HOST }}
SSH_PORT: ${{ secrets.DOMESTIC_TEST_SSH_PORT }}
run: |
set -eu
DEPLOY_PORT="${SSH_PORT:-22}"
KEY_FILE="$HOME/.ssh/domestic_test_deploy_key"
SSH_TARGET="lzf@$SSH_HOST"
RUN_TOKEN="${GITHUB_RUN_ID:-manual}-${GITHUB_RUN_ATTEMPT:-1}"
DEPLOY_ROOT="/home/lzf/apps/cozsweet-web-test"
REMOTE_TMP="$DEPLOY_ROOT/tmp/actions-$RUN_TOKEN"
REMOTE_ARCHIVE="$REMOTE_TMP/$ARCHIVE"
REMOTE_ENV_FILE="$DEPLOY_ROOT/shared/test.env"
SSH_OPTS="-i $KEY_FILE -p $DEPLOY_PORT -o BatchMode=yes -o IdentitiesOnly=yes"
SCP_OPTS="-i $KEY_FILE -P $DEPLOY_PORT -o BatchMode=yes -o IdentitiesOnly=yes"
cleanup_remote() {
ssh $SSH_OPTS "$SSH_TARGET" \
"rm -f '$REMOTE_ARCHIVE' && rmdir '$REMOTE_TMP' 2>/dev/null || true"
}
trap cleanup_remote EXIT
ssh $SSH_OPTS "$SSH_TARGET" \
"mkdir -p '$DEPLOY_ROOT/current' '$DEPLOY_ROOT/releases/docker' '$DEPLOY_ROOT/shared' '$REMOTE_TMP' && chmod 700 '$DEPLOY_ROOT/shared'"
scp $SCP_OPTS scripts/server/deploy-domestic-test-archive.sh \
"$SSH_TARGET:$DEPLOY_ROOT/current/deploy-domestic-test-archive.sh"
scp $SCP_OPTS .env.domestic-test "$SSH_TARGET:$REMOTE_ENV_FILE"
scp $SCP_OPTS "$ARCHIVE" "$SSH_TARGET:$REMOTE_ARCHIVE"
ssh $SSH_OPTS "$SSH_TARGET" \
"chmod 600 '$REMOTE_ENV_FILE' && chmod 700 '$DEPLOY_ROOT/current/deploy-domestic-test-archive.sh' && '$DEPLOY_ROOT/current/deploy-domestic-test-archive.sh' '$REMOTE_ARCHIVE' '$IMAGE' '$REMOTE_ENV_FILE' 9135"
- name: Cleanup runner artifacts
if: always()
run: |
rm -f .env.domestic-test .env.domestic-test.next "${ARCHIVE:-}" "$HOME/.ssh/domestic_test_deploy_key"
+68 -61
View File
@@ -1,11 +1,11 @@
# 外部入口接入说明 # 外部入口接入说明
Facebook 等外部应用统一通过 `/external-entry` 进入本应用。入口先保存外部身份和短期业务意图,再跳转到对应角色页面并清理地址栏中的入口查询参数。 外部应用通过 `/external-entry` 进入本应用。
| 环境 | APP HOST | | 环境 | APP HOST |
| --- | --- | | --- | --- |
| 预发环境 `pre` | `frontend-test.banlv-ai.com` | | 测试环境 | `frontend-test.banlv-ai.com` |
| 正式环境 `production` | `cozsweet.com` | | 正式环境 | `cozsweet.com` |
入口格式: 入口格式:
@@ -13,78 +13,85 @@ Facebook 等外部应用统一通过 `/external-entry` 进入本应用。入口
https://<APP_HOST>/external-entry?<参数> https://<APP_HOST>/external-entry?<参数>
``` ```
## 当前 Facebook 业务入口 ## 可选参数
当前正式投放固定为 4 类入口乘以 3 个角色,共 12 条链接。Facebook 业务名称与应用页面的对应关系如下: 所有参数均为可选参数。
| Facebook 入口 | 参数组合 | 落地行为 |
| --- | --- | --- |
| 私密空间 | `target=chat` | 进入普通聊天页,不插入任何锁定内容。 |
| 语音 | `target=chat&mode=promotion&promotion_type=voice` | 进入聊天页,并插入一条待解锁语音。 |
| 图片包 | `target=private-zone` | 进入角色的 `private-zone` 图片空间。 |
| 帮忙买咖啡 | `target=tip` | 进入角色的咖啡打赏页。 |
每条正式链接还必须显式传入:
- `character=elio``character=maya``character=nayeli`
- `psid=<PSID>`,其中 `<PSID>` 必须由 Facebook 发送端替换为当前用户经过 URL 编码的 Page-scoped User ID。
完整的 12 条正式发送模板见 [Facebook 12 条外部入口链接清单](./links.md)。
## 参数说明
| 参数 | 可选值或格式 | 用途 | | 参数 | 可选值或格式 | 用途 |
| --- | --- | --- | | --- | --- | --- |
| `target` | `chat``tip``private-zone` | 指定进入的页面;不传或值无效时进入聊天页。 | | `target` | `chat``tip``private-zone` | 指定进入的页面;不传或值无效时进入聊天页。历史值 `private-room` 兼容进入 `private-zone`,新链接不得继续使用。 |
| `character` | `elio``maya``nayeli` | 指定角色;不传或值无效时使用 Elio。正式投放链接必须显式传入。 | | `character` | `elio``maya``nayeli` | 指定角色;不传或值无效时使用 Elio。 |
| `psid` | string | Facebook Page-scoped User ID。Facebook 正式投放链接必须动态传入。 | | `psid` | string | 传入 Facebook Page-scoped User ID。 |
| `mode` | `promotion` | 开启聊天促销模式。 | | `mode` | `promotion` | 开启聊天促销模式。 |
| `promotion_type` | `voice``image``private` | 指定促销消息类型,仅与 `mode=promotion` 一起使用。 | | `promotion_type` | `voice``image``private` | 指定促销消息类型,仅与 `mode=promotion` 一起使用。 |
`mode=promotion` 只有在 `target=chat` 且同时提供有效的 `promotion_type` 时生效。当前 12 条正式投放链接只使用 `promotion_type=voice``image``private` 保留为兼容能力,不属于本次业务清单。 `mode=promotion` 只有在 `target=chat` 且同时提供有效的 `promotion_type` 时生效。
## 四类发送模板 标准私密空间参数是 `target=private-zone`。前端仅为已经发布的旧链接保留 `target=private-room` 兼容;`private_zone` 等其他拼写仍按无效目标处理并回退聊天页。
发送前必须把 `<CHARACTER>` 替换为角色值,把 `<PSID>` 替换为当前 Facebook 用户的真实 PSID;不得把占位符原样发送给用户。
私密空间(普通聊天):
```text
https://<APP_HOST>/external-entry?target=chat&character=<CHARACTER>&psid=<PSID>
```
语音:
```text
https://<APP_HOST>/external-entry?target=chat&character=<CHARACTER>&mode=promotion&promotion_type=voice&psid=<PSID>
```
图片包:
```text
https://<APP_HOST>/external-entry?target=private-zone&character=<CHARACTER>&psid=<PSID>
```
帮忙买咖啡:
```text
https://<APP_HOST>/external-entry?target=tip&character=<CHARACTER>&psid=<PSID>
```
## PSID 与登录状态流程 ## PSID 与登录状态流程
`psid` 可以和任意有效入口参数组合使用。应用会先保存 PSID,再执行登录状态判断和 Facebook Identity 绑定。详细流程见 [PSID 与登录状态流程图](./psid-login-flow.md)。 PSID 保存、登录状态判断和 Facebook Identity 绑定逻辑见 [PSID 与登录状态流程图](./psid-login-flow.md)。
所有参数值都必须进行 URL 编码。入口中禁止传递登录 Token、Page Access Token、App Secret 或其他秘密。 ## 使用示例
## 兼容说明 普通聊天:
- 历史参数 `target=private-room` 继续兼容进入 `private-zone`,但不得用于新投放链接。 ```text
- `private_zone` 等其他拼写仍按无效目标处理并回退聊天页。 https://<APP_HOST>/external-entry?target=chat
- `promotion_type=image``promotion_type=private` 继续由现有代码支持,但不计入当前 12 条 Facebook 业务链接。 ```
- 无效或缺失的 `character` 继续回退 Elio;正式投放模板始终显式传入角色,不能依赖回退。
## 调试与正式清单 进入 Maya 聊天:
```text
https://<APP_HOST>/external-entry?target=chat&character=maya
```
携带 PSID 进入聊天,示例 PSID 为 `27511427698460020`
```text
https://<APP_HOST>/external-entry?target=chat&psid=27511427698460020
```
语音促销聊天:
```text
https://<APP_HOST>/external-entry?target=chat&mode=promotion&promotion_type=voice
```
图片促销聊天:
```text
https://<APP_HOST>/external-entry?target=chat&mode=promotion&promotion_type=image
```
私密文本促销聊天:
```text
https://<APP_HOST>/external-entry?target=chat&mode=promotion&promotion_type=private
```
咖啡打赏:
```text
https://<APP_HOST>/external-entry?target=tip
```
私密空间:
```text
https://<APP_HOST>/external-entry?target=private-zone
```
进入 Nayeli 私密空间:
```text
https://<APP_HOST>/external-entry?target=private-zone&character=nayeli
```
`psid` 可以与任意 `target` 或聊天促销参数组合使用。参数值需要进行 URL 编码,不要在入口中传递登录 Token、Page Access Token 或 App Secret。
完整可点击示例:
- [本地调试链接清单](./debug-links.md) - [本地调试链接清单](./debug-links.md)
- [Facebook 12 条外部入口链接清单](./links.md) - [测试环境和正式环境链接清单](./links.md)
+53 -39
View File
@@ -1,52 +1,66 @@
# Facebook 12 条外部入口链接清单 # 外部入口链接清单
本清单是 Facebook 正式投放的唯一业务链接清单,共 4 类入口乘以 3 个角色,合计 12 条模板 这份清单可以独立发送和直接点击。所有新链接统一使用标准参数 `target=private-zone`;历史参数 `target=private-room` 仅用于兼容已经发出的旧链接
## 发送规则 ## 使用规则
- 发送前必须把每条模板中的 `<PSID>` 替换为当前用户经过 URL 编码的 Facebook Page-scoped User ID;不得把占位符原样发送 - `target=chat`:进入聊天页
- 每条链接都显式传入 `character`,不得依赖缺省角色回退 - `target=tip`:进入对应角色的打赏页
- Facebook 业务名称“私密空间”进入普通聊天页;业务名称“图片包”才进入应用的 `private-zone` - `target=private-zone`:进入对应角色的私密空间
- 不要在入口中传递登录 Token、Page Access Token、App Secret 或其他秘密 - `character` 可使用 `elio``maya``nayeli`;不传或值无效时使用 Elio
- 以下模板包含占位符,替换真实 PSID 后才能直接发送或点击 - `mode=promotion` 只在 `target=chat``promotion_type``voice``image``private` 时生效
- PSID 示例统一使用 `27511427698460020`;不要在入口中放登录 Token、Page Access Token 或 App Secret。
## 正式投放模板 ## 测试环境
| 编号 | Facebook 入口 | 角色 | 发送模板 | 预期落地页面状态 | | 入口 | 可点击链接 | 预期落地页面 |
| --- | --- | --- | --- | --- | | --- | --- | --- |
| 1 | 私密空间 | Elio | `https://cozsweet.com/external-entry?target=chat&character=elio&psid=<PSID>` | `/characters/elio/chat`,不显示促销锁卡 | | 普通聊天(Elio | [打开普通聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat) | `/characters/elio/chat` |
| 2 | 私密空间 | Maya | `https://cozsweet.com/external-entry?target=chat&character=maya&psid=<PSID>` | `/characters/maya/chat`,不显示促销锁卡 | | Maya 聊天 | [打开 Maya 聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat&character=maya) | `/characters/maya/chat` |
| 3 | 私密空间 | Nayeli | `https://cozsweet.com/external-entry?target=chat&character=nayeli&psid=<PSID>` | `/characters/nayeli/chat`,不显示促销锁卡 | | Nayeli 聊天 | [打开 Nayeli 聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat&character=nayeli) | `/characters/nayeli/chat` |
| 4 | 语音 | Elio | `https://cozsweet.com/external-entry?target=chat&character=elio&mode=promotion&promotion_type=voice&psid=<PSID>` | `/characters/elio/chat`,显示一条锁定语音 | | 携带 PSID 的 Elio 聊天 | [打开 PSID 聊天示例](https://frontend-test.banlv-ai.com/external-entry?target=chat&psid=27511427698460020) | `/characters/elio/chat` |
| 5 | 语音 | Maya | `https://cozsweet.com/external-entry?target=chat&character=maya&mode=promotion&promotion_type=voice&psid=<PSID>` | `/characters/maya/chat`显示一条锁定语音 | | 语音促销 | [打开语音促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=voice) | `/characters/elio/chat`保存语音促销意图 |
| 6 | 语音 | Nayeli | `https://cozsweet.com/external-entry?target=chat&character=nayeli&mode=promotion&promotion_type=voice&psid=<PSID>` | `/characters/nayeli/chat`显示一条锁定语音 | | 图片促销 | [打开图片促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=image) | `/characters/elio/chat`保存图片促销意图 |
| 7 | 图片包 | Elio | `https://cozsweet.com/external-entry?target=private-zone&character=elio&psid=<PSID>` | `/characters/elio/private-zone` | | 私密文本促销 | [打开私密文本促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=private) | `/characters/elio/chat`,保存私密文本促销意图 |
| 8 | 图片包 | Maya | `https://cozsweet.com/external-entry?target=private-zone&character=maya&psid=<PSID>` | `/characters/maya/private-zone` | | Elio 咖啡打赏 | [打开 Elio 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=elio) | `/characters/elio/tip` |
| 9 | 图片包 | Nayeli | `https://cozsweet.com/external-entry?target=private-zone&character=nayeli&psid=<PSID>` | `/characters/nayeli/private-zone` | | Maya 咖啡打赏 | [打开 Maya 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=maya) | `/characters/maya/tip` |
| 10 | 帮忙买咖啡 | Elio | `https://cozsweet.com/external-entry?target=tip&character=elio&psid=<PSID>` | `/characters/elio/tip` | | Nayeli 咖啡打赏 | [打开 Nayeli 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=nayeli) | `/characters/nayeli/tip` |
| 11 | 帮忙买咖啡 | Maya | `https://cozsweet.com/external-entry?target=tip&character=maya&psid=<PSID>` | `/characters/maya/tip` | | Elio 私密空间 | [打开 Elio 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=elio) | `/characters/elio/private-zone` |
| 12 | 帮忙买咖啡 | Nayeli | `https://cozsweet.com/external-entry?target=tip&character=nayeli&psid=<PSID>` | `/characters/nayeli/tip` | | Maya 私密空间 | [打开 Maya 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=maya) | `/characters/maya/private-zone` |
| Nayeli 私密空间 | [打开 Nayeli 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=nayeli) | `/characters/nayeli/private-zone` |
## 预发验证 ## 旧链接兼容验证
预发验证不维护第二套业务清单。将上述 12 条模板的主机统一替换为 `frontend-test.banlv-ai.com`,其余路径和参数保持不变: 以下链接仅用于验证已经发出的 `private-room` 旧链接仍能正确进入私密空间。新投放链接不要再使用这些地址。
```text | 旧入口 | 可点击链接 | 预期落地页面 |
https://frontend-test.banlv-ai.com/external-entry?<与正式模板相同的查询参数> | --- | --- | --- |
``` | Elio 旧私密空间 | [验证 Elio 旧链接](https://frontend-test.banlv-ai.com/external-entry?target=private-room&character=elio) | `/characters/elio/private-zone` |
| Maya 旧私密空间 | [验证 Maya 旧链接](https://frontend-test.banlv-ai.com/external-entry?target=private-room&character=maya) | `/characters/maya/private-zone` |
| Nayeli 旧私密空间 | [验证 Nayeli 旧链接](https://frontend-test.banlv-ai.com/external-entry?target=private-room&character=nayeli) | `/characters/nayeli/private-zone` |
预发环境是 `pre`,不是正式环境。预发验证通过不代表已经更新 `cozsweet.com` 或获得生产发布批准。 ## 正式环境
正式环境仅列标准链接,不再传播 `private-room` 旧参数。
| 入口 | 可点击链接 | 预期落地页面 |
| --- | --- | --- |
| 普通聊天(Elio | [打开普通聊天](https://cozsweet.com/external-entry?target=chat) | `/characters/elio/chat` |
| Maya 聊天 | [打开 Maya 聊天](https://cozsweet.com/external-entry?target=chat&character=maya) | `/characters/maya/chat` |
| Nayeli 聊天 | [打开 Nayeli 聊天](https://cozsweet.com/external-entry?target=chat&character=nayeli) | `/characters/nayeli/chat` |
| 携带 PSID 的 Elio 聊天 | [打开 PSID 聊天示例](https://cozsweet.com/external-entry?target=chat&psid=27511427698460020) | `/characters/elio/chat` |
| 语音促销 | [打开语音促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=voice) | `/characters/elio/chat`,保存语音促销意图 |
| 图片促销 | [打开图片促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=image) | `/characters/elio/chat`,保存图片促销意图 |
| 私密文本促销 | [打开私密文本促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=private) | `/characters/elio/chat`,保存私密文本促销意图 |
| Elio 咖啡打赏 | [打开 Elio 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=elio) | `/characters/elio/tip` |
| Maya 咖啡打赏 | [打开 Maya 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=maya) | `/characters/maya/tip` |
| Nayeli 咖啡打赏 | [打开 Nayeli 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=nayeli) | `/characters/nayeli/tip` |
| Elio 私密空间 | [打开 Elio 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=elio) | `/characters/elio/private-zone` |
| Maya 私密空间 | [打开 Maya 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=maya) | `/characters/maya/private-zone` |
| Nayeli 私密空间 | [打开 Nayeli 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=nayeli) | `/characters/nayeli/private-zone` |
## 验收判断 ## 验收判断
- 最终浏览器地址必须是表格中的预期页面,且不再保留 `/external-entry` 的查询参数 打开入口后,浏览器地址最终应与“预期落地页面”一致。普通聊天和私密空间必须分别落在 `/chat``/private-zone`,不能再进入同一个页面
- `<PSID>` 替换后的真实值必须由应用保存。
- “私密空间”只进入普通聊天,不得出现锁定语音、锁定图片或私密文本促销卡。
- “语音”进入聊天后必须只注入一条锁定语音。
- “图片包”和“帮忙买咖啡”必须分别进入对应角色的 `private-zone``tip`,不能串到其他角色。
## 不属于当前 12 条清单的兼容能力 如需在其他入口携带 PSID,在已有查询参数的链接末尾追加 `&psid=27511427698460020`
- 历史 `target=private-room` 继续兼容,但不得创建新的投放链接。
- `promotion_type=image``promotion_type=private` 和独立 PSID 示例不属于当前正式业务清单。
- 兼容能力的保留不改变本页“只有 12 条正式投放模板”的口径。
+3 -3
View File
@@ -12,7 +12,7 @@ export interface MockCoreApisOptions {
paidImageFlow?: boolean; paidImageFlow?: boolean;
paidImageInsufficientCreditsFlow?: boolean; paidImageInsufficientCreditsFlow?: boolean;
paidVoiceInsufficientCreditsFlow?: boolean; paidVoiceInsufficientCreditsFlow?: boolean;
topUpHandoffFlow?: boolean; psidLoginFlow?: boolean;
} }
export async function mockCoreApis(page: Page, options: MockCoreApisOptions = {}) { export async function mockCoreApis(page: Page, options: MockCoreApisOptions = {}) {
@@ -22,14 +22,14 @@ export async function mockCoreApis(page: Page, options: MockCoreApisOptions = {}
paidImageFlow: options.paidImageFlow ?? false, paidImageFlow: options.paidImageFlow ?? false,
paidImageInsufficientCreditsFlow: options.paidImageInsufficientCreditsFlow ?? false, paidImageInsufficientCreditsFlow: options.paidImageInsufficientCreditsFlow ?? false,
paidVoiceInsufficientCreditsFlow: options.paidVoiceInsufficientCreditsFlow ?? false, paidVoiceInsufficientCreditsFlow: options.paidVoiceInsufficientCreditsFlow ?? false,
topUpHandoffFlow: options.topUpHandoffFlow ?? false, psidLoginFlow: options.psidLoginFlow ?? false,
}; };
const chatState = { hasExpiredChatSend: false, paidImageRequested: false, paidImageUnlocked: false }; const chatState = { hasExpiredChatSend: false, paidImageRequested: false, paidImageUnlocked: false };
await registerAuthMocks(page, { await registerAuthMocks(page, {
chatSendTokenRefreshFlow: chatOptions.chatSendTokenRefreshFlow, chatSendTokenRefreshFlow: chatOptions.chatSendTokenRefreshFlow,
isChatSendTokenExpired: () => chatState.hasExpiredChatSend, isChatSendTokenExpired: () => chatState.hasExpiredChatSend,
topUpHandoffFlow: chatOptions.topUpHandoffFlow, psidLoginFlow: chatOptions.psidLoginFlow,
}); });
await registerCharacterMocks(page); await registerCharacterMocks(page);
await registerUserMocks(page); await registerUserMocks(page);
+6 -5
View File
@@ -1,21 +1,22 @@
import type { Page } from "@playwright/test"; import type { Page } from "@playwright/test";
import { apiEnvelope } from "../data/common"; import { apiEnvelope } from "../data/common";
import { emailLoginResponse, guestLoginResponse, refreshedEmailLoginResponse, refreshedGuestLoginResponse, topUpHandoffResponse } from "../data/auth"; import { emailLoginResponse, guestLoginResponse, psidLoginResponse, refreshedEmailLoginResponse, refreshedGuestLoginResponse } from "../data/auth";
export interface AuthMockState { export interface AuthMockState {
chatSendTokenRefreshFlow: boolean; chatSendTokenRefreshFlow: boolean;
isChatSendTokenExpired: () => boolean; isChatSendTokenExpired: () => boolean;
topUpHandoffFlow: boolean; psidLoginFlow: boolean;
} }
export async function registerAuthMocks(page: Page, state: AuthMockState) { export async function registerAuthMocks(page: Page, state: AuthMockState) {
await page.route("**/api/auth/handoff/topup/consume", async (route) => { await page.route("**/api/auth/login/facebook/psid", async (route) => {
if (!state.topUpHandoffFlow) { if (!state.psidLoginFlow) {
await route.continue(); await route.continue();
return; return;
} }
await route.fulfill({ json: apiEnvelope(topUpHandoffResponse) });
await route.fulfill({ json: apiEnvelope(psidLoginResponse) });
}); });
await page.route("**/api/auth/guest", async (route) => { await page.route("**/api/auth/guest", async (route) => {
+10 -12
View File
@@ -50,16 +50,14 @@ export const refreshedEmailLoginResponse = {
refreshToken: "e2e-refreshed-email-refresh-token", refreshToken: "e2e-refreshed-email-refresh-token",
}; };
export const topUpHandoffResponse = { export const psidLoginResponse = {
token: "e2e-messenger-token", token: "e2e-psid-guest-token",
refreshToken: "e2e-messenger-refresh-token", refreshToken: "",
loginStatus: "facebookMessenger", matchedBy: "psid",
merged: false, fbAsid: "",
user: { fbPsid: "e2e-facebook-psid",
...e2eEmailUser, hasCompleteFacebookIdentity: false,
id: "user_e2e_messenger", isGuest: true,
username: "E2E Messenger User", user: e2eUser,
email: "messenger_hash@messenger.cozsweet.invalid", userId: e2eUser.id,
loginProvider: "facebook_messenger",
},
}; };
@@ -1,74 +1,49 @@
import { expect, test } from "@playwright/test"; import { expect, test } from "@playwright/test";
import { mockCoreApis } from "@e2e/fixtures/api-mocks"; import { mockCoreApis } from "@e2e/fixtures/api-mocks";
import { clearBrowserState } from "@e2e/fixtures/test-helpers"; import {
clearBrowserState,
defaultCharacterChatUrl,
} from "@e2e/fixtures/test-helpers";
const handoffToken = "e2e-handoff-token-that-is-at-least-32-characters"; const psid = "e2e-facebook-psid";
test.beforeEach(async ({ baseURL, context, page }) => { test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL); await clearBrowserState(context, page, baseURL);
await mockCoreApis(page, { topUpHandoffFlow: true }); await mockCoreApis(page, { psidLoginFlow: true });
}); });
test("user consumes a top-up handoff and opens credit packages as a formal Messenger user", async ({ test("user enters from an external PSID link and becomes a guest", async ({
page, page,
}) => { }) => {
const handoffRequestPromise = page.waitForRequest( const psidLoginRequestPromise = page.waitForRequest(
"**/api/auth/handoff/topup/consume", "**/api/auth/login/facebook/psid",
); );
await page.goto( await page.goto(`/external-entry?target=chat&psid=${psid}`);
`/external-entry?target=topup&handoffToken=${encodeURIComponent(handoffToken)}`,
);
const handoffRequest = await handoffRequestPromise; const psidLoginRequest = await psidLoginRequestPromise;
expect(handoffRequest.method()).toBe("POST"); expect(psidLoginRequest.method()).toBe("POST");
expect(handoffRequest.postDataJSON()).toEqual({ handoffToken }); expect(psidLoginRequest.postDataJSON()).toMatchObject({
psid,
bindToGuest: true,
});
expect(psidLoginRequest.postDataJSON().deviceId).toEqual(expect.any(String));
await expect(page).toHaveURL("/subscription?type=topup"); await expect(page).toHaveURL(defaultCharacterChatUrl);
await expect( await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
page.getByRole("button", { name: /Pay and Top Up/i }),
).toBeVisible();
await expect await expect
.poll(() => .poll(() =>
page.evaluate(() => ({ page.evaluate(() => ({
loginProvider: localStorage.getItem("cozsweet:login_provider"), loginProvider: localStorage.getItem("cozsweet:login_provider"),
loginToken: localStorage.getItem("cozsweet:login_token"), guestToken: localStorage.getItem("cozsweet:guest_token"),
refreshToken: localStorage.getItem("cozsweet:refresh_token"), psid: localStorage.getItem("cozsweet:psid"),
})), })),
) )
.toMatchObject({ .toMatchObject({
loginProvider: "facebookMessenger", loginProvider: "guest",
loginToken: "e2e-messenger-token", guestToken: "e2e-psid-guest-token",
refreshToken: "e2e-messenger-refresh-token", psid,
}); });
}); });
test("invalid top-up handoff does not log in and is removed from the URL", async ({
page,
}) => {
await page.route("**/api/auth/handoff/topup/consume", async (route) => {
await route.fulfill({
status: 410,
json: {
detail: {
code: "HANDOFF_EXPIRED",
message: "充值链接已过期",
},
},
});
});
await page.goto(
`/external-entry?target=topup&handoffToken=${encodeURIComponent(handoffToken)}`,
);
await expect(page).toHaveURL("/external-entry?target=topup");
await expect(
page.getByText(/invalid or has expired/i),
).toBeVisible();
await expect
.poll(() => page.evaluate(() => localStorage.getItem("cozsweet:login_provider")))
.not.toBe("facebookMessenger");
});
@@ -4,6 +4,7 @@ import { mockCoreApis } from "@e2e/fixtures/api-mocks";
import { import {
clearBrowserState, clearBrowserState,
enterChatFromSplash, enterChatFromSplash,
expectAuthRedirectToVipChatSubscription,
} from "@e2e/fixtures/test-helpers"; } from "@e2e/fixtures/test-helpers";
test.beforeEach(async ({ baseURL, context, page }) => { test.beforeEach(async ({ baseURL, context, page }) => {
@@ -43,7 +44,12 @@ test("asks for consent before opening a user-bound discount plan", async ({
await expect(offer).toContainText("Want me to ask for my best private offer?"); await expect(offer).toContainText("Want me to ask for my best private offer?");
await offer.getByRole("button", { name: "Yes, ask for me" }).click(); await offer.getByRole("button", { name: "Yes, ask for me" }).click();
await expect(page).toHaveURL( await expect(page).toHaveURL(/\/auth\?redirect=/);
/\/subscription\?type=vip.*planId=vip_annual.*commercialOfferId=13ec8a10/, expectAuthRedirectToVipChatSubscription(page);
const redirect = new URL(page.url()).searchParams.get("redirect");
const subscriptionUrl = new URL(redirect ?? "", "http://e2e.local");
expect(subscriptionUrl.searchParams.get("planId")).toBe("vip_annual");
expect(subscriptionUrl.searchParams.get("commercialOfferId")).toBe(
"13ec8a10-58d7-4d24-b66b-8db5699a1aa8",
); );
}); });
@@ -1,201 +0,0 @@
import { expect, test, type Page } from "@playwright/test";
import { mockCoreApis } from "@e2e/fixtures/api-mocks";
import { apiEnvelope } from "@e2e/fixtures/data/common";
import { clearBrowserState } from "@e2e/fixtures/test-helpers";
const testPsid = "e2e-facebook-psid-27511427698460020";
const characters = [
{
id: "elio",
slug: "elio",
displayName: "Elio Silvestri",
shortName: "Elio",
},
{
id: "maya-tan",
slug: "maya",
displayName: "Maya Tan",
shortName: "Maya",
},
{
id: "nayeli-cervantes",
slug: "nayeli",
displayName: "Nayeli Cervantes",
shortName: "Nayeli",
},
] as const;
type Character = (typeof characters)[number];
type EntryKind = "private-space" | "voice" | "image-pack" | "coffee";
interface FacebookEntryCase {
character: Character;
kind: EntryKind;
target: "chat" | "private-zone" | "tip";
expectedPath: string;
promotionType?: "voice";
}
const entryCases: FacebookEntryCase[] = characters.flatMap((character) => [
{
character,
kind: "private-space",
target: "chat",
expectedPath: `/characters/${character.slug}/chat`,
},
{
character,
kind: "voice",
target: "chat",
expectedPath: `/characters/${character.slug}/chat`,
promotionType: "voice",
},
{
character,
kind: "image-pack",
target: "private-zone",
expectedPath: `/characters/${character.slug}/private-zone`,
},
{
character,
kind: "coffee",
target: "tip",
expectedPath: `/characters/${character.slug}/tip`,
},
]);
test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page);
await registerEntryPageMocks(page);
});
for (const entryCase of entryCases) {
test(`${entryCase.character.displayName} opens Facebook ${entryCase.kind} entry`, async ({
page,
}) => {
await page.goto(buildEntryUrl(entryCase));
await expect(page).toHaveURL(entryCase.expectedPath, { timeout: 20_000 });
await expect
.poll(() =>
page.evaluate(() => localStorage.getItem("cozsweet:psid")),
)
.toBe(testPsid);
if (entryCase.kind === "private-space") {
await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
await expect(
page.getByRole("button", { name: "Unlock voice message" }),
).toHaveCount(0);
return;
}
if (entryCase.kind === "voice") {
await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
await expect(
page.getByRole("button", { name: "Unlock voice message" }),
).toHaveCount(1);
return;
}
if (entryCase.kind === "image-pack") {
await expect(
page.getByRole("heading", { name: "Private albums" }),
).toBeVisible();
await expect(
page.getByText(entryCase.character.displayName).last(),
).toBeVisible();
return;
}
await expect(
page.getByRole("heading", {
name: `Buy ${entryCase.character.shortName} a coffee`,
}),
).toBeVisible();
});
}
function buildEntryUrl(entryCase: FacebookEntryCase): string {
const params = new URLSearchParams({
target: entryCase.target,
character: entryCase.character.slug,
psid: testPsid,
});
if (entryCase.promotionType) {
params.set("mode", "promotion");
params.set("promotion_type", entryCase.promotionType);
}
return `/external-entry?${params.toString()}`;
}
async function registerEntryPageMocks(page: Page): Promise<void> {
await page.route("**/api/private-zone/posts**", async (route) => {
const url = new URL(route.request().url());
const characterId = url.searchParams.get("characterId") ?? "elio";
await route.fulfill({
json: apiEnvelope({
characterId,
items: [],
nextCursor: null,
hasMore: false,
creditBalance: 1000,
currency: "credits",
}),
});
});
await page.route("**/api/private-zone/albums**", async (route) => {
await route.fulfill({
json: apiEnvelope({
creditBalance: 1000,
pendingImageCount: 0,
hasIncompleteContent: false,
items: [],
}),
});
});
await page.route("**/api/payment/gift-products**", async (route) => {
const url = new URL(route.request().url());
const characterId = url.searchParams.get("characterId") ?? "elio";
const planPrefix =
characterId === "elio"
? "tip"
: `tip_${characterId.replaceAll("-", "_")}`;
await route.fulfill({
json: apiEnvelope({
characterId,
categories: [
{
category: "coffee",
name: "Coffee",
productCount: 1,
imageUrl: null,
},
],
plans: [
{
planId: `${planPrefix}_coffee_usd_4_99`,
planName: "Small Coffee",
orderType: "tip",
tipType: "coffee_small",
category: "coffee",
characterId,
description: "A character-scoped coffee gift",
imageUrl: null,
amountCents: 499,
currency: "USD",
autoRenew: false,
isFirstRechargeOffer: false,
firstRechargeDiscountPercent: 0,
promotionType: null,
},
],
}),
});
});
}
@@ -26,7 +26,10 @@ test("guest unlocks a promoted image through email login and top-up", async ({
); );
await expect(page).toHaveURL(defaultCharacterChatUrl); await expect(page).toHaveURL(defaultCharacterChatUrl);
const unlockButton = page.getByRole("button", { const promotedImageCard = page
.getByRole("group", { name: "Locked private image" })
.last();
const unlockButton = promotedImageCard.getByRole("button", {
name: "Unlock private image", name: "Unlock private image",
}); });
await expect(unlockButton).toBeVisible({ timeout: 10_000 }); await expect(unlockButton).toBeVisible({ timeout: 10_000 });
@@ -182,7 +182,7 @@ async function registerFavoriteMenuMocks(page: Page): Promise<void> {
function collectBrowserErrors(page: Page): string[] { function collectBrowserErrors(page: Page): string[] {
const errors: string[] = []; const errors: string[] = [];
page.on("pageerror", (error) => errors.push(error.message)); page.on("pageerror", (error) => errors.push(error.stack ?? error.message));
page.on("console", (message) => { page.on("console", (message) => {
if (message.type() === "error") errors.push(message.text()); if (message.type() === "error") errors.push(message.text());
}); });
@@ -193,7 +193,8 @@ function isFeatureRuntimeError(message: string): boolean {
const isKnownLocalPreviewDependencyError = const isKnownLocalPreviewDependencyError =
message.includes("[ApiLoggingInterceptor]") || message.includes("[ApiLoggingInterceptor]") ||
message.includes("[next-auth][error][CLIENT_FETCH_ERROR]") || message.includes("[next-auth][error][CLIENT_FETCH_ERROR]") ||
message.includes("[Result] Result.wrap caught exception"); message.includes("[Result] Result.wrap caught exception") ||
message.includes("Cannot read properties of undefined (reading 'waiting')");
return !isKnownLocalPreviewDependencyError; return !isKnownLocalPreviewDependencyError;
} }
@@ -1,422 +0,0 @@
import { expect, test, type Page } from "@playwright/test";
import { mockCoreApis } from "@e2e/fixtures/api-mocks";
import { apiEnvelope } from "@e2e/fixtures/data/common";
import { e2eEmailUser } from "@e2e/fixtures/data/user";
import {
clearBrowserState,
seedEmailSession,
} from "@e2e/fixtures/test-helpers";
const idrPlans = {
plans: [
{
planId: "vip_monthly",
planName: "Monthly",
orderType: "vip_monthly",
amountCents: 19_590_000,
originalAmountCents: 19_590_000,
dailyPriceCents: 653_000,
currency: "IDR",
vipDays: 30,
dolAmount: null,
creditBalance: 3_000,
},
{
planId: "dol_1000",
planName: "1,000 Credits",
orderType: "dol",
amountCents: 8_890_000,
originalAmountCents: null,
dailyPriceCents: null,
currency: "IDR",
vipDays: null,
dolAmount: 1_000,
creditBalance: 1_000,
},
],
};
const idrGiftCatalog = {
characterId: "elio",
categories: [
{
category: "coffee",
name: "Coffee",
productCount: 1,
imageUrl: null,
},
],
plans: [
{
planId: "tip_coffee_usd_4_99",
planName: "Velvet Espresso",
orderType: "tip",
tipType: "coffee_small",
category: "coffee",
characterId: "elio",
description: "Buy Elio a Velvet Espresso",
imageUrl: null,
amountCents: 8_929_900,
currency: "IDR",
autoRenew: false,
isFirstRechargeOffer: false,
firstRechargeDiscountPercent: 0,
promotionType: null,
},
],
};
async function registerIndonesiaPaymentMocks(page: Page) {
const orderStatuses = new Map<string, "pending" | "paid">();
const orderPlans = new Map<string, { planId: string; orderType: string }>();
let createOrderCount = 0;
await page.route("**/api/user/profile", async (route) => {
await route.fulfill({
json: apiEnvelope({ ...e2eEmailUser, countryCode: "ID" }),
});
});
await page.route("**/api/payment/plans**", async (route) => {
await route.fulfill({ json: apiEnvelope(idrPlans) });
});
await page.route("**/api/payment/gift-products**", async (route) => {
await route.fulfill({ json: apiEnvelope(idrGiftCatalog) });
});
await page.route("**/api/payment/create-order", async (route) => {
createOrderCount += 1;
const body = route.request().postDataJSON() as {
planId: string;
payChannel: "ezpay" | "stripe";
};
const plan =
idrPlans.plans.find((item) => item.planId === body.planId) ??
idrGiftCatalog.plans.find((item) => item.planId === body.planId);
const orderId = `order_${body.payChannel}_${body.planId}`;
orderStatuses.set(orderId, "pending");
orderPlans.set(orderId, {
planId: body.planId,
orderType: plan?.orderType ?? "dol",
});
await route.fulfill({
json: apiEnvelope({
orderId,
payParams:
body.payChannel === "stripe"
? {
provider: "stripe",
clientSecret: "pi_e2e_secret_mock",
}
: {
provider: "ezpay",
countryCode: "ID",
channelCode: "ID_QRIS_DYNAMIC_QR",
channelType: "QR",
payData: "00020101021226670016COM.NOBUBANK.WWW",
firstChargeAmountCents: plan?.amountCents ?? 0,
currency: "IDR",
},
}),
});
});
await page.route("**/api/payment/order-status**", async (route) => {
const url = new URL(route.request().url());
const orderId = url.searchParams.get("order_id") ?? "";
const plan = orderPlans.get(orderId);
await route.fulfill({
json: apiEnvelope({
orderId,
status: orderStatuses.get(orderId) ?? "pending",
orderType: plan?.orderType ?? "dol",
planId: plan?.planId ?? null,
creditsAdded: 0,
}),
});
});
await page.route("**/api/payment/tip-message", async (route) => {
const body = route.request().postDataJSON() as { orderId: string };
await route.fulfill({
json: apiEnvelope({
orderId: body.orderId,
characterId: "elio",
planId: "tip_coffee_usd_4_99",
productName: "Velvet Espresso",
tipCount: 1,
poolIndex: 0,
message: "Thank you. Your gift made me smile.",
}),
});
});
return {
getCreateOrderCount() {
return createOrderCount;
},
markPaid(orderId: string) {
orderStatuses.set(orderId, "paid");
},
};
}
async function prepareIndonesiaUser(page: Page) {
await seedEmailSession(page);
await page.evaluate(() => {
const rawUser = localStorage.getItem("cozsweet:user");
const user = rawUser ? JSON.parse(rawUser) : {};
localStorage.setItem(
"cozsweet:user",
JSON.stringify({ ...user, countryCode: "ID" }),
);
});
}
async function expectQrisOrder(
page: Page,
buttonName: RegExp,
planId: string,
formattedAmount: RegExp,
) {
const requestPromise = page.waitForRequest("**/api/payment/create-order");
await page.getByRole("button", { name: buttonName }).click();
const request = await requestPromise;
expect(request.postDataJSON()).toMatchObject({
planId,
payChannel: "ezpay",
recipientCharacterId: "elio",
});
const dialog = page.getByRole("dialog", { name: "Scan to pay with QRIS" });
await expect(dialog).toBeVisible();
await expect(dialog).toContainText(formattedAmount);
await expect(dialog).toContainText("Waiting for payment");
await expect(
dialog.getByRole("img", { name: "QRIS payment QR code" }),
).toBeVisible();
return `order_ezpay_${planId}`;
}
async function expectCheckoutButtonLayout(page: Page) {
const viewport = page.viewportSize();
const checkoutBox = await page
.getByRole("button", { name: "Pay and Top Up" })
.boundingBox();
const stripeBox = await page.getByRole("button", { name: "Stripe" }).boundingBox();
expect(viewport).not.toBeNull();
expect(checkoutBox).not.toBeNull();
expect(stripeBox).not.toBeNull();
if (!viewport || !checkoutBox || !stripeBox) return;
expect(checkoutBox.y + checkoutBox.height).toBeLessThanOrEqual(viewport.height);
expect(stripeBox.y + stripeBox.height).toBeLessThanOrEqual(checkoutBox.y);
}
test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page);
});
test("Indonesia VIP defaults to QRIS and completes after status polling", async ({
page,
}) => {
const payment = await registerIndonesiaPaymentMocks(page);
await prepareIndonesiaUser(page);
await page.goto("/subscription?type=vip&character=elio");
await expect(page.getByText("Choose who you want to support")).toHaveCount(0);
await expect(page.getByText("Supporting Elio")).toHaveCount(0);
await expect(
page.getByRole("button", { name: "Elio", exact: true }),
).toHaveCount(0);
await expect(page.getByRole("button", { name: "QRIS" })).toHaveAttribute(
"aria-pressed",
"true",
);
const checkoutButton = page.getByRole("button", { name: "Pay and Top Up" });
await expect(checkoutButton).toBeDisabled();
await expectCheckoutButtonLayout(page);
await page.getByRole("button", { name: /Monthly, 195900 IDR/i }).click();
const renewalDialog = page.getByRole("dialog", {
name: "Automatic Renewal Confirmation",
});
await expect(renewalDialog).toBeVisible();
expect(payment.getCreateOrderCount()).toBe(0);
await renewalDialog.getByRole("button", { name: "Confirm" }).click();
await expect(renewalDialog).toBeHidden();
await expect(checkoutButton).toBeEnabled();
expect(payment.getCreateOrderCount()).toBe(0);
const orderId = await expectQrisOrder(
page,
/Pay and Top Up/i,
"vip_monthly",
/Rp\s*195[.,]900/,
);
expect(payment.getCreateOrderCount()).toBe(1);
payment.markPaid(orderId);
const success = page.getByRole("alertdialog", { name: "Payment successful" });
await expect(success).toBeVisible({ timeout: 10_000 });
await expect(
page.getByRole("dialog", { name: "Scan to pay with QRIS" }),
).toBeHidden();
});
test("Indonesia credit top-up uses QRIS display cents", async ({ page }) => {
const payment = await registerIndonesiaPaymentMocks(page);
await prepareIndonesiaUser(page);
await page.goto("/subscription?type=topup&character=elio");
await expect(page.getByText("Supporting Elio")).toHaveCount(0);
await expectCheckoutButtonLayout(page);
const orderId = await expectQrisOrder(
page,
/Pay and Top Up/i,
"dol_1000",
/Rp\s*88[.,]900/,
);
payment.markPaid(orderId);
await expect(
page.getByRole("alertdialog", { name: "Payment successful" }),
).toBeVisible({ timeout: 10_000 });
});
test("closing QRIS restores payment selection and allows switching to Stripe", async ({
page,
}) => {
const payment = await registerIndonesiaPaymentMocks(page);
await prepareIndonesiaUser(page);
await page.goto("/subscription?type=topup&character=elio");
await expectQrisOrder(
page,
/Pay and Top Up/i,
"dol_1000",
/Rp\s*88[.,]900/,
);
const dialog = page.getByRole("dialog", { name: "Scan to pay with QRIS" });
await dialog.getByRole("button", { name: "Close" }).click();
await expect(dialog).toBeHidden();
await expect(page.getByRole("button", { name: "Stripe" })).toBeEnabled();
await page.getByRole("button", { name: "Stripe" }).click();
await expect(page.getByRole("button", { name: "Stripe" })).toHaveAttribute(
"aria-pressed",
"true",
);
await expect(page.getByRole("button", { name: "Pay and Top Up" })).toBeEnabled();
expect(payment.getCreateOrderCount()).toBe(1);
});
test("closing QRIS allows switching to Stripe and creating a Stripe order", async ({
page,
}) => {
const payment = await registerIndonesiaPaymentMocks(page);
await prepareIndonesiaUser(page);
await page.goto("/subscription?type=topup&character=elio");
await expectQrisOrder(
page,
/Pay and Top Up/i,
"dol_1000",
/Rp\s*88[.,]900/,
);
const dialog = page.getByRole("dialog", { name: "Scan to pay with QRIS" });
await dialog.getByRole("button", { name: "Close" }).click();
await expect(dialog).toBeHidden();
const stripeButton = page.getByRole("button", {
name: "Stripe",
exact: true,
});
await expect(stripeButton).toBeEnabled();
await stripeButton.click();
await expect(stripeButton).toHaveAttribute("aria-pressed", "true");
await expect(
page.getByRole("button", { name: "Resume QRIS payment" }),
).toHaveCount(0);
const stripeRequestPromise = page.waitForRequest(
"**/api/payment/create-order",
);
await page.getByRole("button", { name: "Pay and Top Up" }).click();
const stripeRequest = await stripeRequestPromise;
expect(stripeRequest.postDataJSON()).toMatchObject({
planId: "dol_1000",
payChannel: "stripe",
recipientCharacterId: "elio",
});
expect(payment.getCreateOrderCount()).toBe(2);
});
test("payment issue submits Other to the feedback API without creating an order", async ({
page,
}) => {
const payment = await registerIndonesiaPaymentMocks(page);
await prepareIndonesiaUser(page);
let feedbackBody = "";
let idempotencyKey = "";
await page.route("**/api/feedback", async (route) => {
feedbackBody = route.request().postData() ?? "";
idempotencyKey = route.request().headers()["idempotency-key"] ?? "";
await route.fulfill({
json: apiEnvelope({ feedbackId: "feedback-payment-1", duplicate: false }),
});
});
await page.goto("/subscription?type=topup&character=elio");
await page.getByRole("button", { name: "Payment issue?" }).click();
const dialog = page.getByRole("dialog", {
name: "What problem did you encounter?",
});
await expect(dialog).toBeVisible();
await dialog.getByRole("radio", { name: "Other" }).check();
await dialog
.getByLabel("Please describe the issue")
.fill("QRIS did not open correctly.");
await dialog.getByRole("button", { name: "Submit" }).click();
await expect(page.getByRole("status")).toHaveText(
"Thanks. Your payment issue has been submitted.",
);
await expect(dialog).toBeHidden();
expect(payment.getCreateOrderCount()).toBe(0);
expect(idempotencyKey).toMatch(/^payment_feedback_[A-Za-z0-9_-]+$/);
expect(feedbackBody).toContain('name="category"');
expect(feedbackBody).toContain("payment");
expect(feedbackBody).toContain(
"Payment issue: Other\r\nDetails: QRIS did not open correctly.",
);
expect(feedbackBody).toContain('name="context"');
expect(feedbackBody).toContain('"paymentIssueReason":"other"');
expect(feedbackBody).toContain('"characterId":"elio"');
});
test("Indonesia gift checkout keeps IDR price through QRIS and thank-you flow", async ({
page,
}) => {
const payment = await registerIndonesiaPaymentMocks(page);
await prepareIndonesiaUser(page);
await page.goto("/characters/elio/tip");
await expect(page.getByText(/IDR\s*89[.,]299/)).toBeVisible();
await expectQrisOrder(
page,
/Order and Buy/i,
"tip_coffee_usd_4_99",
/Rp\s*89[.,]299/,
);
const dialog = page.getByRole("dialog", { name: "Scan to pay with QRIS" });
await dialog.getByRole("button", { name: "Close" }).click();
await expect(dialog).toBeHidden();
await expect(page.getByRole("button", { name: "Stripe" })).toBeEnabled();
await page.getByRole("button", { name: "Stripe" }).click();
await expect(page.getByRole("button", { name: "Stripe" })).toHaveAttribute(
"aria-pressed",
"true",
);
expect(payment.getCreateOrderCount()).toBe(1);
});
@@ -1,153 +0,0 @@
import { expect, test, type Page } from "@playwright/test";
import { mockCoreApis } from "@e2e/fixtures/api-mocks";
import { apiEnvelope } from "@e2e/fixtures/data/common";
import { e2eEmailUser } from "@e2e/fixtures/data/user";
import {
clearBrowserState,
seedEmailSession,
} from "@e2e/fixtures/test-helpers";
const phpPlans = {
plans: [
{
planId: "dol_1000",
planName: "1,000 Credits",
orderType: "dol",
amountCents: 49_990,
originalAmountCents: 74_990,
dailyPriceCents: null,
currency: "PHP",
vipDays: null,
dolAmount: 1_000,
creditBalance: 1_000,
},
],
};
async function registerPhilippinesPaymentMocks(
page: Page,
response: "hosted" | "qr",
) {
let createOrderCount = 0;
await page.route("**/api/user/profile", async (route) => {
await route.fulfill({
json: apiEnvelope({ ...e2eEmailUser, countryCode: "PH" }),
});
});
await page.route("**/api/payment/plans**", async (route) => {
await route.fulfill({ json: apiEnvelope(phpPlans) });
});
await page.route("**/api/payment/create-order", async (route) => {
createOrderCount += 1;
await route.fulfill({
json: apiEnvelope({
orderId: `order_gcash_${response}`,
payParams: {
provider: "ezpay",
countryCode: "PH",
channelCode: "PH_QRPH_DYNAMIC",
channelType: "QR",
payData: "000201010212ph-qr-payload",
...(response === "hosted"
? { cashierUrl: "https://pay.example/gcash-hosted" }
: {}),
firstChargeAmountCents: 49_990,
currency: "PHP",
},
}),
});
});
await page.route("**/api/payment/order-status**", async (route) => {
await route.fulfill({
json: apiEnvelope({
orderId: `order_gcash_${response}`,
status: "pending",
orderType: "dol",
planId: "dol_1000",
creditsAdded: 0,
}),
});
});
return {
getCreateOrderCount: () => createOrderCount,
};
}
async function preparePhilippinesUser(page: Page) {
await seedEmailSession(page);
await page.evaluate(() => {
const rawUser = localStorage.getItem("cozsweet:user");
const user = rawUser ? JSON.parse(rawUser) : {};
localStorage.setItem(
"cozsweet:user",
JSON.stringify({ ...user, countryCode: "PH" }),
);
});
}
test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page);
});
test("Philippines checkout prefers the hosted GCash URL even for a QR response", async ({
page,
}) => {
const payment = await registerPhilippinesPaymentMocks(page, "hosted");
await preparePhilippinesUser(page);
await page.goto("/subscription?type=topup&character=elio");
await expect(page.getByRole("button", { name: "GCash" })).toHaveAttribute(
"aria-pressed",
"true",
);
await page.getByRole("button", { name: "Pay and Top Up" }).click();
await expect(
page.getByRole("alertdialog", { name: "Continue to payment?" }),
).toBeVisible();
await expect(
page.getByRole("dialog", { name: "Pay with GCash / QR Ph" }),
).toHaveCount(0);
await expect(
page.getByRole("dialog", { name: "Scan to pay with QRIS" }),
).toHaveCount(0);
expect(payment.getCreateOrderCount()).toBe(1);
await page.getByRole("button", { name: "Cancel" }).click();
await expect(page.getByRole("button", { name: "Stripe" })).toBeEnabled();
expect(payment.getCreateOrderCount()).toBe(1);
});
test("Philippines QR-only fallback is labeled GCash / QR Ph and can switch to Stripe", async ({
page,
}) => {
await page.setViewportSize({ width: 390, height: 844 });
const payment = await registerPhilippinesPaymentMocks(page, "qr");
await preparePhilippinesUser(page);
await page.goto("/subscription?type=topup&character=elio");
await page.getByRole("button", { name: "Pay and Top Up" }).click();
const dialog = page.getByRole("dialog", {
name: "Pay with GCash / QR Ph",
});
await expect(dialog).toBeVisible();
await expect(dialog).toContainText(/₱\s*499\.90/);
await expect(dialog).not.toContainText("QRIS");
await expect(
dialog.getByRole("img", { name: "GCash / QR Ph payment QR code" }),
).toBeVisible();
await dialog.getByRole("button", { name: "Close" }).click();
await expect(dialog).toBeHidden();
await expect(page.getByRole("button", { name: "Stripe" })).toBeEnabled();
await page.getByRole("button", { name: "Stripe" }).click();
await expect(page.getByRole("button", { name: "Stripe" })).toHaveAttribute(
"aria-pressed",
"true",
);
expect(payment.getCreateOrderCount()).toBe(1);
});
-1
View File
@@ -50,7 +50,6 @@
"next-auth": "^4.24.14", "next-auth": "^4.24.14",
"ofetch": "^1.5.1", "ofetch": "^1.5.1",
"pino": "^10.3.1", "pino": "^10.3.1",
"qrcode.react": "^4.2.0",
"react": "19.2.4", "react": "19.2.4",
"react-dom": "19.2.4", "react-dom": "19.2.4",
"react-icons": "^5.6.0", "react-icons": "^5.6.0",
-12
View File
@@ -50,9 +50,6 @@ importers:
pino: pino:
specifier: ^10.3.1 specifier: ^10.3.1
version: 10.3.1 version: 10.3.1
qrcode.react:
specifier: ^4.2.0
version: 4.2.0(react@19.2.4)
react: react:
specifier: 19.2.4 specifier: 19.2.4
version: 19.2.4 version: 19.2.4
@@ -3293,11 +3290,6 @@ packages:
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
engines: {node: '>=6'} engines: {node: '>=6'}
qrcode.react@4.2.0:
resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
queue-microtask@1.2.3: queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@@ -7093,10 +7085,6 @@ snapshots:
punycode@2.3.1: {} punycode@2.3.1: {}
qrcode.react@4.2.0(react@19.2.4):
dependencies:
react: 19.2.4
queue-microtask@1.2.3: {} queue-microtask@1.2.3: {}
quick-format-unescaped@4.0.4: {} quick-format-unescaped@4.0.4: {}
@@ -1,34 +0,0 @@
import assert from "node:assert/strict";
import { readFile } from "node:fs/promises";
import test from "node:test";
const workflowUrl = new URL(
"../../../.gitea/workflows/domestic-test.yml",
import.meta.url,
);
const deployScriptUrl = new URL(
"../../server/deploy-domestic-test-archive.sh",
import.meta.url,
);
test("domestic frontend workflow is manual and registry-free", async () => {
const workflow = await readFile(workflowUrl, "utf8");
assert.match(workflow, /workflow_dispatch:/);
assert.doesNotMatch(workflow, /\bpush:/);
assert.doesNotMatch(workflow, /REGISTRY_IMAGE/);
assert.match(workflow, /docker save/);
assert.match(workflow, /DOMESTIC_TEST_SSH_PRIVATE_KEY_B64/);
assert.match(workflow, /base64 -d/);
});
test("domestic frontend workflow pins the China test API and isolated port", async () => {
const workflow = await readFile(workflowUrl, "utf8");
const deployScript = await readFile(deployScriptUrl, "utf8");
assert.match(workflow, /https:\/\/testapi\.banlv-ai\.com/);
assert.match(workflow, /wss:\/\/testapi\.banlv-ai\.com\/ws/);
assert.match(workflow, /9135/);
assert.match(deployScript, /127\.0\.0\.1:\$HOST_PORT/);
assert.match(deployScript, /cozsweet-frontend-domestic-test/);
});
@@ -1,110 +0,0 @@
#!/usr/bin/env bash
set -euo pipefail
ARCHIVE="${1:-}"
IMAGE="${2:-}"
ENV_FILE="${3:-}"
HOST_PORT="${4:-9135}"
CONTAINER_NAME="cozsweet-frontend-domestic-test"
INTERNAL_PORT="3000"
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
SERVICE_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
SHARED_ROOT="$SERVICE_ROOT/shared"
RELEASE_ROOT="$SERVICE_ROOT/releases/docker"
if [ -z "$ARCHIVE" ] || [ -z "$IMAGE" ] || [ -z "$ENV_FILE" ]; then
echo "Usage: $0 <image-archive> <image> <env-file> [host-port]" >&2
exit 64
fi
if [ "$HOST_PORT" != "9135" ]; then
echo "Domestic frontend test must use isolated host port 9135" >&2
exit 64
fi
case "$ENV_FILE" in
"$SHARED_ROOT"/*) ;;
*)
echo "Environment file must be stored under $SHARED_ROOT" >&2
exit 64
;;
esac
if [ ! -s "$ARCHIVE" ] || [ ! -s "$ENV_FILE" ]; then
echo "Image archive or environment file is missing" >&2
exit 66
fi
mkdir -p "$RELEASE_ROOT"
chmod 700 "$SHARED_ROOT"
gzip -dc "$ARCHIVE" | docker load >/dev/null
docker image inspect "$IMAGE" >/dev/null
old_image_id=""
old_image_ref=""
if docker container inspect "$CONTAINER_NAME" >/dev/null 2>&1; then
old_image_id="$(docker inspect -f '{{.Image}}' "$CONTAINER_NAME")"
old_image_ref="$(docker inspect -f '{{.Config.Image}}' "$CONTAINER_NAME")"
elif ss -ltnH "sport = :$HOST_PORT" 2>/dev/null | grep -q .; then
echo "Host port $HOST_PORT is already used by another service" >&2
exit 69
fi
run_container() {
local image_ref="$1"
docker run -d \
--name "$CONTAINER_NAME" \
--restart unless-stopped \
-p "127.0.0.1:$HOST_PORT:$INTERNAL_PORT" \
--env-file "$ENV_FILE" \
-e "PORT=$INTERNAL_PORT" \
"$image_ref" >/dev/null
}
wait_healthy() {
local deadline=$((SECONDS + 180))
while [ "$SECONDS" -le "$deadline" ]; do
state="$(docker inspect -f '{{if .State.Health}}{{.State.Health.Status}}{{else}}{{.State.Status}}{{end}}' "$CONTAINER_NAME" 2>/dev/null || true)"
status="$(curl -sS -o /dev/null -w '%{http_code}' "http://127.0.0.1:$HOST_PORT/" 2>/dev/null || true)"
if [[ "$status" =~ ^(200|204|301|302|303|307|308)$ ]] && { [ "$state" = "healthy" ] || [ "$state" = "running" ]; }; then
return 0
fi
sleep 2
done
return 1
}
docker rm -f "$CONTAINER_NAME" >/dev/null 2>&1 || true
deployment_ok="1"
if ! run_container "$IMAGE"; then
deployment_ok="0"
elif ! wait_healthy; then
deployment_ok="0"
fi
if [ "$deployment_ok" != "1" ]; then
docker logs --tail 120 "$CONTAINER_NAME" >&2 || true
docker rm -f "$CONTAINER_NAME" >/dev/null 2>&1 || true
if [ -n "$old_image_id" ] && docker image inspect "$old_image_id" >/dev/null 2>&1; then
echo "New container failed health checks; restoring previous image" >&2
run_container "$old_image_id"
wait_healthy || true
fi
exit 1
fi
created_at="$(date -u +%Y-%m-%dT%H:%M:%SZ)"
image_id="$(docker image inspect "$IMAGE" -f '{{.Id}}')"
record="{\"createdAt\":\"$created_at\",\"environment\":\"domestic-test\",\"image\":\"$IMAGE\",\"imageId\":\"$image_id\",\"container\":\"$CONTAINER_NAME\",\"hostPort\":$HOST_PORT}"
if [ -f "$RELEASE_ROOT/current.json" ]; then
cp "$RELEASE_ROOT/current.json" "$RELEASE_ROOT/previous.json"
fi
printf '%s\n' "$record" > "$RELEASE_ROOT/current.json"
printf '%s\n' "$record" >> "$RELEASE_ROOT/releases.jsonl"
echo "Domestic frontend test is healthy"
echo "container=$CONTAINER_NAME"
echo "host_port=$HOST_PORT"
echo "image=$IMAGE"
if [ -n "$old_image_ref" ]; then
echo "previous_image=$old_image_ref"
fi
@@ -7,15 +7,10 @@ import { PaymentLaunchDialogs } from "../payment-launch-dialogs";
const hiddenLaunch = { const hiddenLaunch = {
handleEzpayCancel: vi.fn(), handleEzpayCancel: vi.fn(),
handleEzpayConfirm: vi.fn(), handleEzpayConfirm: vi.fn(),
handleRegionalQrClose: vi.fn(),
handleStripeClose: vi.fn(), handleStripeClose: vi.fn(),
handleStripeConfirmed: vi.fn(), handleStripeConfirmed: vi.fn(),
isConfirmingEzpay: false, isConfirmingEzpay: false,
regionalQrErrorMessage: null,
regionalQrPayment: null,
regionalQrStatus: null,
shouldShowEzpayConfirmDialog: false, shouldShowEzpayConfirmDialog: false,
shouldShowRegionalQrDialog: false,
shouldShowStripeDialog: false, shouldShowStripeDialog: false,
stripeClientSecret: null, stripeClientSecret: null,
}; };
@@ -75,7 +70,7 @@ describe("PaymentLaunchDialogs", () => {
expect(dialog).not.toBeNull(); expect(dialog).not.toBeNull();
expect(container.contains(dialog)).toBe(false); expect(container.contains(dialog)).toBe(false);
expect(dialog?.parentElement?.parentElement).toBe(document.body); expect(dialog?.parentElement?.parentElement).toBe(document.body);
expect(dialog?.textContent).toContain("Continue to payment?"); expect(dialog?.textContent).toContain("Continue to GCash?");
expect(dialog?.textContent).toContain("Your coffee order is ready."); expect(dialog?.textContent).toContain("Your coffee order is ready.");
expect(dialog?.textContent).toContain("Order No. order-123"); expect(dialog?.textContent).toContain("Order No. order-123");
expect( expect(
@@ -86,108 +81,4 @@ describe("PaymentLaunchDialogs", () => {
expect(dialog?.textContent).toContain("Opening..."); expect(dialog?.textContent).toContain("Opening...");
expect(document.body.style.overflow).toBe("hidden"); expect(document.body.style.overflow).toBe("hidden");
}); });
it("portals an accessible QRIS dialog with display cents and order status", () => {
act(() =>
root.render(
<PaymentLaunchDialogs
currentOrderId="order-id-qris"
externalCheckoutAnalyticsKey="tip.external_checkout"
ezpayDescription="Scan QRIS to finish the payment."
launch={{
...hiddenLaunch,
regionalQrPayment: {
qrData: "00020101021226670016COM.NOBUBANK.WWW",
orderId: "order-id-qris",
amountCents: 5_000_000,
currency: "IDR",
experience: "qris",
},
regionalQrStatus: "pending",
shouldShowRegionalQrDialog: true,
}}
/>,
),
);
const dialog = document.body.querySelector('[role="dialog"]');
expect(dialog).not.toBeNull();
expect(container.contains(dialog)).toBe(false);
expect(dialog?.textContent).toContain("Scan to pay with QRIS");
expect(dialog?.querySelector("svg title")?.textContent).toBe(
"QRIS payment QR code",
);
expect(dialog?.textContent).toContain("Order No. order-id-qris");
expect(dialog?.textContent).toContain("Rp");
expect(dialog?.textContent).toContain("50.000");
expect(dialog?.textContent).toContain("Waiting for payment");
});
it("labels a Philippine QR fallback as GCash / QR Ph", () => {
act(() =>
root.render(
<PaymentLaunchDialogs
currentOrderId="order-ph-qr"
externalCheckoutAnalyticsKey="payment.external_checkout"
ezpayDescription="Pay with GCash."
launch={{
...hiddenLaunch,
regionalQrPayment: {
qrData: "000201010212ph-qr-payload",
orderId: "order-ph-qr",
amountCents: 49_990,
currency: "PHP",
experience: "gcashQrPh",
},
regionalQrStatus: "pending",
shouldShowRegionalQrDialog: true,
}}
/>,
),
);
const dialog = document.body.querySelector('[role="dialog"]');
expect(dialog?.textContent).toContain("Pay with GCash / QR Ph");
expect(dialog?.textContent).not.toContain("QRIS");
expect(dialog?.querySelector("svg title")?.textContent).toBe(
"GCash / QR Ph payment QR code",
);
expect(dialog?.textContent).toContain("₱");
const closeButton = Array.from(
dialog?.querySelectorAll("button") ?? [],
).find((button) => button.textContent?.trim() === "Close");
act(() => closeButton?.click());
expect(hiddenLaunch.handleRegionalQrClose).toHaveBeenCalledOnce();
});
it("shows QRIS failure state and handles empty QR data safely", () => {
act(() =>
root.render(
<PaymentLaunchDialogs
currentOrderId="order-id-qris"
externalCheckoutAnalyticsKey="payment.external_checkout"
ezpayDescription="Scan QRIS to finish the payment."
launch={{
...hiddenLaunch,
regionalQrErrorMessage: "Payment failed or was cancelled.",
regionalQrPayment: {
qrData: "",
orderId: "order-id-qris",
amountCents: 5_000_000,
currency: "IDR",
experience: "qris",
},
regionalQrStatus: "failed",
shouldShowRegionalQrDialog: true,
}}
/>,
),
);
const dialog = document.body.querySelector('[role="dialog"]');
expect(dialog?.textContent).toContain("QRIS data is unavailable");
expect(dialog?.textContent).toContain("Payment failed or was cancelled.");
expect(dialog?.textContent).toContain("Close");
});
}); });
@@ -62,27 +62,6 @@ describe("PaymentMethodSelector", () => {
); );
}); });
it("labels Indonesia Ezpay as QRIS without the GCash logo", () => {
const html = renderToStaticMarkup(
<PaymentMethodSelector
config={{
canChoosePaymentMethod: true,
initialPayChannel: "ezpay",
showPaymentMethodSelector: true,
ezpayDisplayName: "QRIS",
}}
value="ezpay"
caption="QRIS by default in Indonesia"
analyticsKey="subscription.payment_method"
onChange={() => undefined}
/>,
);
expect(html).toContain('aria-label="QRIS"');
expect(html).toContain("QRIS by default in Indonesia");
expect(html).not.toContain("gcash-logo.svg");
});
it("renders compact controls without the caption", () => { it("renders compact controls without the caption", () => {
const html = renderToStaticMarkup( const html = renderToStaticMarkup(
<PaymentMethodSelector <PaymentMethodSelector
@@ -1,7 +1,6 @@
"use client"; "use client";
import { useId, type ReactNode } from "react"; import { useId, type ReactNode } from "react";
import { QRCodeSVG } from "qrcode.react";
import { ModalPortal } from "@/app/_components/core/modal-portal"; import { ModalPortal } from "@/app/_components/core/modal-portal";
import type { PaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow"; import type { PaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
@@ -13,15 +12,10 @@ type PaymentLaunchDialogFlow = Pick<
PaymentLaunchFlow, PaymentLaunchFlow,
| "handleEzpayCancel" | "handleEzpayCancel"
| "handleEzpayConfirm" | "handleEzpayConfirm"
| "handleRegionalQrClose"
| "handleStripeClose" | "handleStripeClose"
| "handleStripeConfirmed" | "handleStripeConfirmed"
| "isConfirmingEzpay" | "isConfirmingEzpay"
| "regionalQrErrorMessage"
| "regionalQrPayment"
| "regionalQrStatus"
| "shouldShowEzpayConfirmDialog" | "shouldShowEzpayConfirmDialog"
| "shouldShowRegionalQrDialog"
| "shouldShowStripeDialog" | "shouldShowStripeDialog"
| "stripeClientSecret" | "stripeClientSecret"
>; >;
@@ -53,14 +47,6 @@ export function PaymentLaunchDialogs({
onConfirm={launch.handleEzpayConfirm} onConfirm={launch.handleEzpayConfirm}
/> />
) : null} ) : null}
{launch.shouldShowRegionalQrDialog && launch.regionalQrPayment ? (
<RegionalQrPaymentDialog
payment={launch.regionalQrPayment}
status={launch.regionalQrStatus}
errorMessage={launch.regionalQrErrorMessage}
onClose={launch.handleRegionalQrClose}
/>
) : null}
{launch.shouldShowStripeDialog && launch.stripeClientSecret ? ( {launch.shouldShowStripeDialog && launch.stripeClientSecret ? (
<LazyStripePaymentDialog <LazyStripePaymentDialog
clientSecret={launch.stripeClientSecret} clientSecret={launch.stripeClientSecret}
@@ -73,151 +59,6 @@ export function PaymentLaunchDialogs({
); );
} }
interface RegionalQrPaymentDialogProps {
errorMessage: string | null;
onClose: () => void;
payment: NonNullable<PaymentLaunchFlow["regionalQrPayment"]>;
status: PaymentLaunchFlow["regionalQrStatus"];
}
function formatRegionalQrAmount(amountCents: number, currency: string): string {
const normalizedCurrency = currency.trim().toUpperCase() || "IDR";
try {
return new Intl.NumberFormat(
normalizedCurrency === "PHP" ? "en-PH" : "id-ID",
{
style: "currency",
currency: normalizedCurrency,
maximumFractionDigits: normalizedCurrency === "IDR" ? 0 : 2,
},
).format(amountCents / 100);
} catch {
return `${normalizedCurrency} ${(amountCents / 100).toFixed(2)}`;
}
}
function regionalQrStatusMessage(
status: PaymentLaunchFlow["regionalQrStatus"],
errorMessage: string | null,
paymentName: string,
): string {
if (status === "failed") {
return errorMessage || "Payment failed. Please try again.";
}
if (status === "expired") {
return errorMessage || `This ${paymentName} order has expired.`;
}
return "Waiting for payment";
}
function RegionalQrPaymentDialog({
errorMessage,
onClose,
payment,
status,
}: RegionalQrPaymentDialogProps) {
const titleId = useId();
const copy = regionalQrCopy(payment.experience);
const statusMessage = regionalQrStatusMessage(
status,
errorMessage,
copy.paymentName,
);
return (
<ModalPortal
open
persistent
onClose={onClose}
scrimClassName={styles.overlay}
panelClassName={styles.dialog}
scrimOpacity={0.5}
ariaLabelledBy={titleId}
>
<div className={`${styles.header} text-center`}>
<h2 id={titleId} className={styles.title}>
{copy.title}
</h2>
<p className={styles.content}>
{copy.description}
</p>
</div>
<div className="mb-4 flex min-h-64 items-center justify-center rounded-2xl bg-white p-4">
{payment.qrData ? (
<QRCodeSVG
value={payment.qrData}
title={copy.qrTitle}
size={256}
level="M"
marginSize={2}
className="h-auto w-full max-w-64"
/>
) : (
<p className={styles.error} role="alert">
{copy.unavailableMessage}
</p>
)}
</div>
<div className="mb-4 flex flex-col gap-2 text-center">
<p className={styles.content}>Order No. {payment.orderId}</p>
<p className="m-0 text-xl font-bold text-text-foreground">
{formatRegionalQrAmount(payment.amountCents, payment.currency)}
</p>
<p
className={status === "failed" || status === "expired" ? styles.error : styles.content}
role="status"
>
{statusMessage}
</p>
</div>
<div className={styles.actions}>
<button
type="button"
className={`${styles.button} ${styles.secondary}`}
onClick={onClose}
>
Close
</button>
</div>
</ModalPortal>
);
}
function regionalQrCopy(
experience: NonNullable<PaymentLaunchFlow["regionalQrPayment"]>["experience"],
) {
if (experience === "gcashQrPh") {
return {
paymentName: "GCash / QR Ph",
title: "Pay with GCash / QR Ph",
description:
"Open GCash or another QR Ph-compatible app and scan this code.",
qrTitle: "GCash / QR Ph payment QR code",
unavailableMessage:
"GCash / QR Ph data is unavailable. Please close this dialog and try again.",
};
}
if (experience === "qris") {
return {
paymentName: "QRIS",
title: "Scan to pay with QRIS",
description:
"Open a QRIS-compatible banking or wallet app and scan this code.",
qrTitle: "QRIS payment QR code",
unavailableMessage:
"QRIS data is unavailable. Please close this dialog and try again.",
};
}
return {
paymentName: "payment QR",
title: "Scan to pay",
description: "Open a compatible banking or wallet app and scan this code.",
qrTitle: "Payment QR code",
unavailableMessage:
"Payment QR data is unavailable. Please close this dialog and try again.",
};
}
interface EzpayRedirectConfirmDialogProps { interface EzpayRedirectConfirmDialogProps {
description: ReactNode; description: ReactNode;
externalCheckoutAnalyticsKey: string; externalCheckoutAnalyticsKey: string;
@@ -250,7 +91,7 @@ function EzpayRedirectConfirmDialog({
> >
<div className={styles.header}> <div className={styles.header}>
<h2 id={titleId} className={styles.title}> <h2 id={titleId} className={styles.title}>
Continue to payment? Continue to GCash?
</h2> </h2>
<p className={styles.content}>{description}</p> <p className={styles.content}>{description}</p>
<p className={styles.content}>Order No. {orderId}</p> <p className={styles.content}>Order No. {orderId}</p>
@@ -44,24 +44,13 @@ export function PaymentMethodSelector({
}: PaymentMethodSelectorProps) { }: PaymentMethodSelectorProps) {
if (!config.showPaymentMethodSelector) return null; if (!config.showPaymentMethodSelector) return null;
const isCompact = density === "compact"; const isCompact = density === "compact";
const ezpayDisplayName = config.ezpayDisplayName ?? "GCash";
const configuredPaymentMethods = PAYMENT_METHODS.map((method) =>
method.channel === "ezpay"
? {
...method,
title: ezpayDisplayName,
logoSrc:
ezpayDisplayName === "GCash" ? method.logoSrc : undefined,
}
: method,
);
const paymentMethods = const paymentMethods =
config.initialPayChannel === "ezpay" config.initialPayChannel === "ezpay"
? [...configuredPaymentMethods].sort((a, b) => ? [...PAYMENT_METHODS].sort((a, b) =>
a.channel === "ezpay" ? -1 : b.channel === "ezpay" ? 1 : 0, a.channel === "ezpay" ? -1 : b.channel === "ezpay" ? 1 : 0,
) )
: configuredPaymentMethods; : PAYMENT_METHODS;
return ( return (
<section <section
+8 -161
View File
@@ -4,11 +4,9 @@ import { type Dispatch, useEffect, useRef, useState } from "react";
import { import {
getPaymentUrl, getPaymentUrl,
getPaymentUrlHostname,
getStripeClientSecret, getStripeClientSecret,
isEzpayPayment, isEzpayPayment,
launchEzpayRedirect, launchEzpayRedirect,
resolveEzpayLaunchTarget,
} from "@/lib/payment/payment_launch"; } from "@/lib/payment/payment_launch";
import { behaviorAnalytics } from "@/lib/analytics"; import { behaviorAnalytics } from "@/lib/analytics";
import type { import type {
@@ -42,63 +40,21 @@ export interface UsePaymentLaunchFlowInput {
subscriptionType: PendingPaymentSubscriptionType; subscriptionType: PendingPaymentSubscriptionType;
giftCategory?: string | null; giftCategory?: string | null;
giftPlanId?: string | null; giftPlanId?: string | null;
countryCode?: string | null;
} }
export interface PaymentLaunchFlow { export interface PaymentLaunchFlow {
ezpayPaymentUrl: string | null; ezpayPaymentUrl: string | null;
handleEzpayCancel: () => void; handleEzpayCancel: () => void;
handleEzpayConfirm: () => void; handleEzpayConfirm: () => void;
handleRegionalQrClose: () => void;
handleStripeClose: () => void; handleStripeClose: () => void;
handleStripeConfirmed: () => void; handleStripeConfirmed: () => void;
isConfirmingEzpay: boolean; isConfirmingEzpay: boolean;
regionalQrErrorMessage: string | null;
regionalQrPayment: RegionalQrPaymentDetails | null;
regionalQrStatus: PaymentContextState["orderStatus"];
resetLaunchState: () => void; resetLaunchState: () => void;
shouldShowEzpayConfirmDialog: boolean; shouldShowEzpayConfirmDialog: boolean;
shouldShowRegionalQrDialog: boolean;
shouldShowStripeDialog: boolean; shouldShowStripeDialog: boolean;
stripeClientSecret: string | null; stripeClientSecret: string | null;
} }
export interface RegionalQrPaymentDetails {
amountCents: number;
currency: string;
experience: "gcashQrPh" | "qris" | "paymentQr";
orderId: string;
qrData: string;
}
function paymentParamString(
payParams: Record<string, unknown>,
...keys: string[]
): string | null {
for (const key of keys) {
const value = payParams[key];
if (typeof value === "string" && value.trim()) return value.trim();
}
return null;
}
function paymentParamAmountCents(
payParams: Record<string, unknown>,
): number | null {
for (const key of [
"firstChargeAmountCents",
"first_charge_amount_cents",
"amountCents",
"amount_cents",
]) {
const value = payParams[key];
if (typeof value === "number" && Number.isFinite(value) && value > 0) {
return value;
}
}
return null;
}
function trackPaymentCheckoutOpened( function trackPaymentCheckoutOpened(
payment: PaymentContextState, payment: PaymentContextState,
checkoutUrl: string, checkoutUrl: string,
@@ -156,7 +112,6 @@ export function usePaymentLaunchFlow({
subscriptionType, subscriptionType,
giftCategory, giftCategory,
giftPlanId, giftPlanId,
countryCode,
}: UsePaymentLaunchFlowInput): PaymentLaunchFlow { }: UsePaymentLaunchFlowInput): PaymentLaunchFlow {
const launchedNonceRef = useRef(0); const launchedNonceRef = useRef(0);
const [hiddenStripeClientSecret, setHiddenStripeClientSecret] = useState< const [hiddenStripeClientSecret, setHiddenStripeClientSecret] = useState<
@@ -166,41 +121,8 @@ export function usePaymentLaunchFlow({
const stripeClientSecret = payment.payParams const stripeClientSecret = payment.payParams
? getStripeClientSecret(payment.payParams) ? getStripeClientSecret(payment.payParams)
: null; : null;
const selectedPlan = payment.plans.find( const ezpayPaymentUrl = payment.payParams
(item) => item.planId === payment.selectedPlanId, ? getPaymentUrl(payment.payParams)
);
const paymentCurrency = payment.payParams
? paymentParamString(payment.payParams, "currency") ??
selectedPlan?.currency ??
null
: selectedPlan?.currency ?? null;
const ezpayLaunchTarget =
payment.payParams && isEzpayPayment(payment.payParams)
? resolveEzpayLaunchTarget(payment.payParams, {
countryCode,
currency: paymentCurrency,
})
: null;
const ezpayPaymentUrl =
ezpayLaunchTarget?.kind === "url"
? ezpayLaunchTarget.paymentUrl
: null;
const regionalQrPayment: RegionalQrPaymentDetails | null =
payment.payParams &&
payment.currentOrderId &&
ezpayLaunchTarget?.kind === "qr"
? {
amountCents:
paymentParamAmountCents(payment.payParams) ??
selectedPlan?.amountCents ??
0,
currency:
paymentCurrency ??
(ezpayLaunchTarget.experience === "gcashQrPh" ? "PHP" : "IDR"),
experience: ezpayLaunchTarget.experience,
orderId: payment.currentOrderId,
qrData: ezpayLaunchTarget.qrData,
}
: null; : null;
useEffect(() => { useEffect(() => {
if (!payment.payParams || payment.launchNonce <= launchedNonceRef.current) { if (!payment.payParams || payment.launchNonce <= launchedNonceRef.current) {
@@ -214,74 +136,20 @@ export function usePaymentLaunchFlow({
return; return;
} }
const paymentUrl = getPaymentUrl(payment.payParams);
if (paymentUrl) {
const isEzpay = isEzpayPayment(payment.payParams); const isEzpay = isEzpayPayment(payment.payParams);
if (isEzpay) {
const target = resolveEzpayLaunchTarget(payment.payParams, {
countryCode,
currency: paymentCurrency,
});
const channelType = paymentParamString(
payment.payParams,
"channelType",
"channel_type",
);
const channelCode = paymentParamString(
payment.payParams,
"channelCode",
"channel_code",
);
const namedPaymentUrl = getPaymentUrl(payment.payParams);
log.debug(`[${logScope}] ezpay launch target resolved`, {
countryCode: countryCode?.trim().toUpperCase() ?? null,
currency: paymentCurrency?.trim().toUpperCase() ?? null,
channelType: channelType?.toUpperCase() ?? null,
channelCode,
hasCashierUrl: getPaymentUrlHostname(namedPaymentUrl) !== null,
hasQrData: target.kind === "qr",
paymentUrlHost:
target.kind === "url"
? getPaymentUrlHostname(target.paymentUrl)
: null,
});
if (target.kind === "error") {
trackPaymentCheckoutFailed(payment, "missing_checkout_url");
paymentDispatch({
type: "PaymentLaunchFailed",
errorMessage: target.errorMessage,
});
return;
}
if (target.kind === "qr") { if (!AppEnvUtil.isProduction() && isEzpay) {
if (!payment.currentOrderId) {
trackPaymentCheckoutFailed(payment, "missing_checkout_url");
paymentDispatch({
type: "PaymentLaunchFailed",
errorMessage: "Missing order id before showing payment QR code.",
});
return;
}
trackPaymentCheckoutOpened(
payment,
target.experience === "qris"
? "qris_embedded"
: target.experience === "gcashQrPh"
? "gcash_qrph_embedded"
: "payment_qr_embedded",
);
return;
}
const paymentUrl = target.paymentUrl;
if (!AppEnvUtil.isProduction()) {
log.debug(`[${logScope}] ezpay confirmation required`, { log.debug(`[${logScope}] ezpay confirmation required`, {
orderId: payment.currentOrderId, orderId: payment.currentOrderId,
paymentUrlHost: getPaymentUrlHostname(paymentUrl), paymentUrl,
subscriptionType, subscriptionType,
}); });
return; return;
} }
if (isEzpay) {
void launchEzpayRedirect({ void launchEzpayRedirect({
orderId: payment.currentOrderId, orderId: payment.currentOrderId,
paymentUrl, paymentUrl,
@@ -299,10 +167,8 @@ export function usePaymentLaunchFlow({
return; return;
} }
const paymentUrl = getPaymentUrl(payment.payParams);
if (paymentUrl) {
try { try {
window.location.assign(paymentUrl); window.location.href = paymentUrl;
trackPaymentCheckoutOpened(payment, paymentUrl); trackPaymentCheckoutOpened(payment, paymentUrl);
} catch { } catch {
trackPaymentCheckoutFailed(payment, "payment_redirect_failed"); trackPaymentCheckoutFailed(payment, "payment_redirect_failed");
@@ -323,7 +189,6 @@ export function usePaymentLaunchFlow({
log, log,
logScope, logScope,
characterSlug, characterSlug,
countryCode,
payment.currentOrderId, payment.currentOrderId,
payment, payment,
payment.launchNonce, payment.launchNonce,
@@ -332,7 +197,6 @@ export function usePaymentLaunchFlow({
payment.plans, payment.plans,
payment.selectedPlanId, payment.selectedPlanId,
paymentDispatch, paymentDispatch,
paymentCurrency,
returnTo, returnTo,
subscriptionType, subscriptionType,
giftCategory, giftCategory,
@@ -349,9 +213,6 @@ export function usePaymentLaunchFlow({
payParams: payment.payParams, payParams: payment.payParams,
paymentUrl: ezpayPaymentUrl, paymentUrl: ezpayPaymentUrl,
}); });
const shouldShowRegionalQrDialog = Boolean(
regionalQrPayment && !payment.isPaid,
);
function resetLaunchState(): void { function resetLaunchState(): void {
setIsConfirmingEzpay(false); setIsConfirmingEzpay(false);
@@ -402,29 +263,15 @@ export function usePaymentLaunchFlow({
paymentDispatch({ type: "PaymentReset" }); paymentDispatch({ type: "PaymentReset" });
} }
function handleRegionalQrClose(): void {
log.debug(`[${logScope}] regional payment QR dialog closed`, {
orderId: regionalQrPayment?.orderId ?? payment.currentOrderId,
experience: regionalQrPayment?.experience ?? null,
subscriptionType,
});
paymentDispatch({ type: "PaymentReset" });
}
return { return {
ezpayPaymentUrl, ezpayPaymentUrl,
handleEzpayCancel, handleEzpayCancel,
handleEzpayConfirm, handleEzpayConfirm,
handleRegionalQrClose,
handleStripeClose, handleStripeClose,
handleStripeConfirmed, handleStripeConfirmed,
isConfirmingEzpay, isConfirmingEzpay,
regionalQrErrorMessage: payment.errorMessage,
regionalQrPayment,
regionalQrStatus: payment.orderStatus,
resetLaunchState, resetLaunchState,
shouldShowEzpayConfirmDialog, shouldShowEzpayConfirmDialog,
shouldShowRegionalQrDialog,
shouldShowStripeDialog, shouldShowStripeDialog,
stripeClientSecret, stripeClientSecret,
}; };
@@ -1,84 +0,0 @@
import { describe, expect, it } from "vitest";
import { deriveChatSupportCta } from "../chat-support-cta";
describe("deriveChatSupportCta", () => {
const now = Date.parse("2026-07-28T00:00:00.000Z");
it("shows first recharge ahead of a weaker role offer without inventing a timer", () => {
expect(
deriveChatSupportCta({
isFirstRecharge: true,
commercialOffer: {
enabled: true,
commercialOfferId: "offer-1",
characterId: "elio",
planId: "vip_annual",
discountPercent: 30,
pricePercent: 70,
expiresAt: "2026-07-29T00:00:00.000Z",
triggerReason: "price_objection",
message: "I got this for you.",
},
nowMs: now,
}),
).toMatchObject({
kind: "firstRecharge",
label: "Support me · 50% OFF · First recharge",
commercialOfferId: null,
expiresAt: null,
});
});
it("shows a server-anchored 24-hour role offer countdown", () => {
expect(
deriveChatSupportCta({
isFirstRecharge: false,
commercialOffer: {
enabled: true,
commercialOfferId: "offer-1",
characterId: "maya-tan",
planId: "vip_annual",
discountPercent: 30,
pricePercent: 70,
expiresAt: "2026-07-29T00:00:00.000Z",
triggerReason: "price_objection",
message: "I got this for you.",
},
nowMs: now,
}),
).toMatchObject({
kind: "commercialOffer",
label: "Support me · 30% OFF · 23:59:59",
commercialOfferId: "offer-1",
expiresAt: "2026-07-29T00:00:00.000Z",
});
});
it("returns to Support me after an offer expires or is absent", () => {
expect(
deriveChatSupportCta({
isFirstRecharge: false,
commercialOffer: null,
nowMs: now,
}).label,
).toBe("Support me");
expect(
deriveChatSupportCta({
isFirstRecharge: false,
commercialOffer: {
enabled: true,
commercialOfferId: "offer-1",
characterId: "elio",
planId: "vip_annual",
discountPercent: 30,
pricePercent: 70,
expiresAt: "2026-07-27T00:00:00.000Z",
triggerReason: "price_objection",
message: "I got this for you.",
},
nowMs: now,
}).label,
).toBe("Support me");
});
});
+9 -17
View File
@@ -33,8 +33,8 @@ import {
ChatHeader, ChatHeader,
ChatInputBar, ChatInputBar,
ChatInsufficientCreditsBanner, ChatInsufficientCreditsBanner,
ChatSupportButton,
ChatUnlockDialogs, ChatUnlockDialogs,
FirstRechargeOfferBanner,
FullscreenImageViewer, FullscreenImageViewer,
PwaInstallOverlay, PwaInstallOverlay,
} from "./components"; } from "./components";
@@ -46,8 +46,7 @@ import {
import { import {
deriveIsGuest, deriveIsGuest,
} from "./chat-screen.helpers"; } from "./chat-screen.helpers";
import { useChatSupportCta } from "./hooks/use-chat-support-cta"; import { useFirstRechargeOfferBanner } from "./hooks/use-first-recharge-offer-banner";
import { useChatCommercialMessages } from "./hooks/use-chat-commercial-messages";
import { useChatUnlockCoordinator } from "./hooks/use-chat-unlock-coordinator"; import { useChatUnlockCoordinator } from "./hooks/use-chat-unlock-coordinator";
import { useChatGuestLogin } from "./hooks/use-chat-guest-login"; import { useChatGuestLogin } from "./hooks/use-chat-guest-login";
import { useChatMessageLimitBanner } from "./hooks/use-chat-message-limit-banner"; import { useChatMessageLimitBanner } from "./hooks/use-chat-message-limit-banner";
@@ -129,17 +128,11 @@ export function ChatScreen() {
const messageLimitBanner = useChatMessageLimitBanner({ const messageLimitBanner = useChatMessageLimitBanner({
upgradePromptVisible: state.upgradePromptVisible, upgradePromptVisible: state.upgradePromptVisible,
upgradeReason: state.upgradeReason, upgradeReason: state.upgradeReason,
paymentGuidance: state.paymentGuidance,
}); });
const supportCta = useChatSupportCta({ const firstRechargeOfferBanner = useFirstRechargeOfferBanner({
characterId: character.id,
historyLoaded: state.historyLoaded, historyLoaded: state.historyLoaded,
loginStatus: authState.loginStatus, loginStatus: authState.loginStatus,
}); });
useChatCommercialMessages({
characterId: character.id,
loginStatus: authState.loginStatus,
});
const shouldShowPwaInstall = const shouldShowPwaInstall =
state.historyLoaded && state.historyMessages.length >= 10; state.historyLoaded && state.historyMessages.length >= 10;
useChatGuestLogin({ useChatGuestLogin({
@@ -428,13 +421,13 @@ export function ChatScreen() {
<ChatHeader <ChatHeader
isGuest={isGuest} isGuest={isGuest}
offerBanner={ offerBanner={
supportCta.visible ? ( <FirstRechargeOfferBanner
<ChatSupportButton visible={firstRechargeOfferBanner.visible}
kind={supportCta.kind} discountPercent={firstRechargeOfferBanner.discountPercent}
label={supportCta.label} onClick={firstRechargeOfferBanner.claim}
onClick={supportCta.open} onClose={firstRechargeOfferBanner.close}
variant="compact"
/> />
) : null
} }
/> />
@@ -471,7 +464,6 @@ export function ChatScreen() {
title={messageLimitBanner.title} title={messageLimitBanner.title}
description={messageLimitBanner.description} description={messageLimitBanner.description}
ctaLabel={messageLimitBanner.ctaLabel} ctaLabel={messageLimitBanner.ctaLabel}
guidance={messageLimitBanner.guidance}
onUnlock={messageLimitBanner.unlock} onUnlock={messageLimitBanner.unlock}
/> />
) : ( ) : (
-63
View File
@@ -1,63 +0,0 @@
import type { CommercialOfferSummary } from "@/data/schemas/payment";
export type ChatSupportCtaKind =
| "support"
| "firstRecharge"
| "commercialOffer";
export interface ChatSupportCtaView {
kind: ChatSupportCtaKind;
label: string;
commercialOfferId: string | null;
planId: string | null;
expiresAt: string | null;
}
export function deriveChatSupportCta(input: {
isFirstRecharge: boolean;
commercialOffer: CommercialOfferSummary | null;
nowMs: number;
}): ChatSupportCtaView {
if (input.isFirstRecharge) {
return {
kind: "firstRecharge",
label: "Support me · 50% OFF · First recharge",
commercialOfferId: null,
planId: null,
expiresAt: null,
};
}
const offer = input.commercialOffer;
const expiresAtMs = offer ? Date.parse(offer.expiresAt) : Number.NaN;
if (offer?.enabled && Number.isFinite(expiresAtMs) && expiresAtMs > input.nowMs) {
return {
kind: "commercialOffer",
label: `Support me · ${offer.discountPercent}% OFF · ${formatOfferCountdown(expiresAtMs, input.nowMs)}`,
commercialOfferId: offer.commercialOfferId,
planId: offer.planId,
expiresAt: offer.expiresAt,
};
}
return {
kind: "support",
label: "Support me",
commercialOfferId: null,
planId: null,
expiresAt: null,
};
}
export function formatOfferCountdown(expiresAtMs: number, nowMs: number): string {
const totalSeconds = Math.max(
0,
Math.ceil((expiresAtMs - nowMs) / 1000) - 1,
);
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
return [hours, minutes, seconds]
.map((value) => String(value).padStart(2, "0"))
.join(":");
}
@@ -15,7 +15,6 @@ import { ImageBubble } from "../image-bubble";
import { InsufficientCreditsDialog } from "../insufficient-credits-dialog"; import { InsufficientCreditsDialog } from "../insufficient-credits-dialog";
import { MessageAvatar } from "../message-avatar"; import { MessageAvatar } from "../message-avatar";
import { PrivateMessageCard } from "../private-message-card"; import { PrivateMessageCard } from "../private-message-card";
import { PaymentGuidanceCard } from "../payment-guidance-card";
import { PwaInstallDialog } from "../pwa-install-dialog"; import { PwaInstallDialog } from "../pwa-install-dialog";
import { TextBubble } from "../text-bubble"; import { TextBubble } from "../text-bubble";
@@ -224,19 +223,6 @@ describe("chat Tailwind components", () => {
description="Credits keep the conversation going." description="Credits keep the conversation going."
ctaLabel="Top up" ctaLabel="Top up"
onUnlock={() => undefined} onUnlock={() => undefined}
guidance={{
guidanceId: "guidance-elio",
characterId: "elio",
characterName: "Elio Silvestri",
scene: "insufficientCredits",
mode: "guide",
title: "Keep talking with Elio",
copy: "Baby, I want to keep talking with you. Adding credits supports Elio.",
ctaLabel: "View VIP & credit options",
purchaseOptions: ["vip", "topup"],
target: "subscription",
ruleId: "payment_guidance_insufficientCredits",
}}
/>, />,
); );
@@ -246,56 +232,11 @@ describe("chat Tailwind components", () => {
expect(html).toContain("<br/>"); expect(html).toContain("<br/>");
expect(html).toContain("Top up now"); expect(html).toContain("Top up now");
expect(html).toContain("Credits keep the conversation going."); expect(html).toContain("Credits keep the conversation going.");
expect(html).toContain("supports Elio");
expect(html).toContain('data-payment-guidance-id="guidance-elio"');
expect(html).toContain('aria-label="Top up"'); expect(html).toContain('aria-label="Top up"');
expect(html).toContain("bg-[linear-gradient(135deg,#f96ade_0%,#f657a0_100%)]"); expect(html).toContain("bg-[linear-gradient(135deg,#f96ade_0%,#f657a0_100%)]");
expect(html).toContain("active:scale-98"); expect(html).toContain("active:scale-98");
}); });
it("renders guidance only for the active character and hides care-only CTA", () => {
const guide = {
guidanceId: "019c8f8d-17d3-7a42-b1cc-b6927b1927d5",
characterId: "elio",
characterName: "Elio Silvestri",
scene: "insufficientCredits" as const,
mode: "guide" as const,
title: "Keep talking with Elio",
copy: "Baby, I want to keep talking with you.",
ctaLabel: "View VIP & credit options",
purchaseOptions: ["vip", "topup"] as const,
target: "subscription" as const,
ruleId: "payment_guidance_insufficientCredits",
};
const guideHtml = renderWithCharacter(
<PaymentGuidanceCard guidance={guide} />,
);
const mismatchHtml = renderWithCharacter(
<PaymentGuidanceCard
guidance={{ ...guide, characterId: "maya-tan", characterName: "Maya Tan" }}
/>,
);
const careHtml = renderWithCharacter(
<PaymentGuidanceCard
guidance={{
...guide,
mode: "careOnly",
title: null,
ctaLabel: null,
purchaseOptions: [],
target: null,
copy: "Please keep money you need for food or medicine.",
}}
/>,
);
expect(guideHtml).toContain('data-payment-guidance-mode="guide"');
expect(guideHtml).toContain("View VIP &amp; credit options");
expect(mismatchHtml).toBe("");
expect(careHtml).toContain("food or medicine");
expect(careHtml).not.toContain("View VIP");
});
it("renders ChatHeader guest and member branches", () => { it("renders ChatHeader guest and member branches", () => {
const guestHtml = renderWithCharacter(<ChatHeader isGuest={true} />); const guestHtml = renderWithCharacter(<ChatHeader isGuest={true} />);
const memberHtml = renderWithCharacter( const memberHtml = renderWithCharacter(
-1
View File
@@ -337,7 +337,6 @@ function renderMessagesWithDateHeaders(
privateMessageHint={item.message.privateMessageHint} privateMessageHint={item.message.privateMessageHint}
commercialAction={item.message.commercialAction} commercialAction={item.message.commercialAction}
chatAction={item.message.chatAction} chatAction={item.message.chatAction}
paymentGuidance={item.message.paymentGuidance}
isUnlockingMessage={ isUnlockingMessage={
isUnlockingMessage === true && isUnlockingMessage === true &&
item.message.displayId === unlockingMessageId item.message.displayId === unlockingMessageId
@@ -17,13 +17,11 @@
* - 不直接管理 state machinechat 机器不感知 UI 层) * - 不直接管理 state machinechat 机器不感知 UI 层)
*/ */
import { useAppNavigator } from "@/router/use-app-navigator"; import { useAppNavigator } from "@/router/use-app-navigator";
import type { PaymentGuidance } from "@/data/schemas/chat";
export interface ChatInsufficientCreditsBannerProps { export interface ChatInsufficientCreditsBannerProps {
title?: string; title?: string;
description?: string; description?: string;
ctaLabel?: string | null; ctaLabel?: string;
guidance?: PaymentGuidance | null;
/** /**
* 自定义点击回调(不传则默认走统一订阅导航) * 自定义点击回调(不传则默认走统一订阅导航)
* - 测试时可传 mock * - 测试时可传 mock
@@ -36,11 +34,9 @@ export function ChatInsufficientCreditsBanner({
title = "Insufficient credits\nTop up to continue chatting", title = "Insufficient credits\nTop up to continue chatting",
description, description,
ctaLabel = "Top up credits to continue", ctaLabel = "Top up credits to continue",
guidance = null,
onUnlock, onUnlock,
}: ChatInsufficientCreditsBannerProps) { }: ChatInsufficientCreditsBannerProps) {
const navigator = useAppNavigator(); const navigator = useAppNavigator();
const activeGuidance = guidance;
const titleLines = title.split("\n"); const titleLines = title.split("\n");
const handleClick = () => { const handleClick = () => {
@@ -57,7 +53,6 @@ export function ChatInsufficientCreditsBanner({
role="status" role="status"
aria-live="polite" aria-live="polite"
data-testid="chat-insufficient-credits-banner" data-testid="chat-insufficient-credits-banner"
data-payment-guidance-id={activeGuidance?.guidanceId}
> >
<p className="m-0 mb-(--spacing-sm,8px) text-(length:--responsive-card-title,18px) font-semibold leading-[1.4] text-white opacity-95"> <p className="m-0 mb-(--spacing-sm,8px) text-(length:--responsive-card-title,18px) font-semibold leading-[1.4] text-white opacity-95">
{titleLines.map((line, index) => ( {titleLines.map((line, index) => (
@@ -72,12 +67,7 @@ export function ChatInsufficientCreditsBanner({
{description} {description}
</p> </p>
) : null} ) : null}
{activeGuidance?.copy ? ( <button
<p className="mx-auto mb-(--spacing-lg,16px) mt-0 max-w-[min(100%,360px)] text-(length:--responsive-caption,14px) font-semibold leading-[1.4] text-white">
{activeGuidance.copy}
</p>
) : null}
{ctaLabel ? <button
type="button" type="button"
data-analytics-key="chat.topup" data-analytics-key="chat.topup"
data-analytics-label="Top up chat credits" data-analytics-label="Top up chat credits"
@@ -86,7 +76,7 @@ export function ChatInsufficientCreditsBanner({
aria-label={ctaLabel} aria-label={ctaLabel}
> >
{ctaLabel} {ctaLabel}
</button> : null} </button>
</div> </div>
); );
} }
@@ -1,32 +0,0 @@
"use client";
import { Heart, Sparkles } from "lucide-react";
import type { ChatSupportCtaKind } from "../chat-support-cta";
export interface ChatSupportButtonProps {
kind: ChatSupportCtaKind;
label: string;
onClick: () => void;
}
export function ChatSupportButton({
kind,
label,
onClick,
}: ChatSupportButtonProps) {
const Icon = kind === "support" ? Heart : Sparkles;
return (
<button
type="button"
data-analytics-key="chat.support_character"
data-support-state={kind}
className="inline-flex min-h-9 max-w-full items-center justify-center gap-1.5 rounded-full border border-[rgba(255,255,255,0.22)] bg-[linear-gradient(135deg,rgba(246,87,160,0.96),rgba(255,119,84,0.94))] px-3 py-1.5 text-center text-[12px] font-extrabold leading-tight text-white shadow-[0_8px_24px_rgba(246,87,160,0.3)] backdrop-blur-md transition active:scale-95"
aria-label={label}
onClick={onClick}
>
<Icon className="shrink-0" size={14} strokeWidth={2.5} aria-hidden="true" />
<span className="whitespace-normal text-balance">{label}</span>
</button>
);
}
@@ -19,7 +19,6 @@ export function ChatUnlockDialogs({
lockedCount={model.historyUnlock.lockedCount} lockedCount={model.historyUnlock.lockedCount}
isLoading={model.historyUnlock.isLoading} isLoading={model.historyUnlock.isLoading}
errorMessage={model.historyUnlock.errorMessage} errorMessage={model.historyUnlock.errorMessage}
guidance={model.historyUnlock.guidance}
onClose={model.closeHistoryUnlock} onClose={model.closeHistoryUnlock}
onConfirm={model.confirmHistoryUnlock} onConfirm={model.confirmHistoryUnlock}
/> />
@@ -28,7 +27,6 @@ export function ChatUnlockDialogs({
creditBalance={model.unlockPaywallRequest?.creditBalance ?? 0} creditBalance={model.unlockPaywallRequest?.creditBalance ?? 0}
requiredCredits={model.unlockPaywallRequest?.requiredCredits ?? 0} requiredCredits={model.unlockPaywallRequest?.requiredCredits ?? 0}
shortfallCredits={model.unlockPaywallRequest?.shortfallCredits ?? 0} shortfallCredits={model.unlockPaywallRequest?.shortfallCredits ?? 0}
guidance={model.unlockPaywallRequest?.paymentGuidance ?? null}
onClose={model.closePaywall} onClose={model.closePaywall}
onConfirm={model.confirmPaywall} onConfirm={model.confirmPaywall}
/> />
@@ -1,13 +1,10 @@
"use client"; "use client";
import type { PaymentGuidance } from "@/data/schemas/chat";
export interface HistoryUnlockDialogProps { export interface HistoryUnlockDialogProps {
open: boolean; open: boolean;
lockedCount: number; lockedCount: number;
isLoading?: boolean; isLoading?: boolean;
errorMessage?: string | null; errorMessage?: string | null;
guidance?: PaymentGuidance | null;
onClose: () => void; onClose: () => void;
onConfirm: () => void; onConfirm: () => void;
} }
@@ -17,15 +14,10 @@ export function HistoryUnlockDialog({
lockedCount, lockedCount,
isLoading = false, isLoading = false,
errorMessage, errorMessage,
guidance = null,
onClose, onClose,
onConfirm, onConfirm,
}: HistoryUnlockDialogProps) { }: HistoryUnlockDialogProps) {
if (!open) return null; if (!open) return null;
const activeGuidance = guidance;
const showAction =
!activeGuidance ||
(activeGuidance.mode === "guide" && activeGuidance.ctaLabel !== null);
return ( return (
<div <div
@@ -39,16 +31,11 @@ export function HistoryUnlockDialog({
id="history-unlock-title" id="history-unlock-title"
className="m-0 mb-2.5 text-(length:--responsive-page-title,var(--font-size-22,22px)) font-bold leading-[1.2] text-text-foreground" className="m-0 mb-2.5 text-(length:--responsive-page-title,var(--font-size-22,22px)) font-bold leading-[1.2] text-text-foreground"
> >
{activeGuidance?.title ?? "Unlock previous messages?"} Unlock previous messages?
</h2> </h2>
<p className="mx-(--responsive-card-padding-lg,24px) mb-(--spacing-lg,16px) mt-0 text-left text-(length:--responsive-body,var(--font-size-lg,16px)) leading-normal text-[#393939]"> <p className="mx-(--responsive-card-padding-lg,24px) mb-(--spacing-lg,16px) mt-0 text-left text-(length:--responsive-body,var(--font-size-lg,16px)) leading-normal text-[#393939]">
{activeGuidance?.copy ?? ( We found {lockedCount} locked messages in your chat history. You can
<> unlock them now to continue the conversation with full context.
We found {lockedCount} locked messages in your chat history. You
can unlock them now to continue the conversation with full
context.
</>
)}
</p> </p>
{errorMessage ? ( {errorMessage ? (
<p className="mx-(--responsive-card-padding-lg,24px) mb-(--spacing-lg,16px) mt-0 text-left text-(length:--responsive-caption,var(--font-size-md,14px)) leading-[1.4] text-[#c0364c]"> <p className="mx-(--responsive-card-padding-lg,24px) mb-(--spacing-lg,16px) mt-0 text-left text-(length:--responsive-caption,var(--font-size-md,14px)) leading-[1.4] text-[#c0364c]">
@@ -64,7 +51,7 @@ export function HistoryUnlockDialog({
> >
Later Later
</button> </button>
{showAction ? <button <button
type="button" type="button"
data-analytics-key="chat.unlock_history" data-analytics-key="chat.unlock_history"
data-analytics-label="Unlock chat history" data-analytics-label="Unlock chat history"
@@ -72,10 +59,8 @@ export function HistoryUnlockDialog({
onClick={onConfirm} onClick={onConfirm}
disabled={isLoading} disabled={isLoading}
> >
{isLoading {isLoading ? "Unlocking..." : "Unlock now"}
? "Unlocking..." </button>
: activeGuidance?.ctaLabel ?? "Unlock now"}
</button> : null}
</div> </div>
</div> </div>
</div> </div>
-2
View File
@@ -12,7 +12,6 @@ export * from "./chat-insufficient-credits-banner";
export * from "./chat-input-bar"; export * from "./chat-input-bar";
export * from "./chat-input-text-field"; export * from "./chat-input-text-field";
export * from "./chat-send-button"; export * from "./chat-send-button";
export * from "./chat-support-button";
export * from "./chat-unlock-dialogs"; export * from "./chat-unlock-dialogs";
export * from "./date-header"; export * from "./date-header";
export * from "./first-recharge-offer-banner"; export * from "./first-recharge-offer-banner";
@@ -23,7 +22,6 @@ export * from "./insufficient-credits-dialog";
export * from "./message-avatar"; export * from "./message-avatar";
export * from "./message-bubble"; export * from "./message-bubble";
export * from "./message-content"; export * from "./message-content";
export * from "./payment-guidance-card";
export * from "./private-message-card"; export * from "./private-message-card";
export * from "./pwa-install-dialog"; export * from "./pwa-install-dialog";
export * from "./pwa-install-overlay"; export * from "./pwa-install-overlay";
@@ -1,13 +1,10 @@
"use client"; "use client";
import type { PaymentGuidance } from "@/data/schemas/chat";
export interface InsufficientCreditsDialogProps { export interface InsufficientCreditsDialogProps {
open: boolean; open: boolean;
creditBalance: number; creditBalance: number;
requiredCredits: number; requiredCredits: number;
shortfallCredits: number; shortfallCredits: number;
guidance?: PaymentGuidance | null;
onClose: () => void; onClose: () => void;
onConfirm: () => void; onConfirm: () => void;
} }
@@ -17,17 +14,12 @@ export function InsufficientCreditsDialog({
creditBalance, creditBalance,
requiredCredits, requiredCredits,
shortfallCredits, shortfallCredits,
guidance = null,
onClose, onClose,
onConfirm, onConfirm,
}: InsufficientCreditsDialogProps) { }: InsufficientCreditsDialogProps) {
if (!open) return null; if (!open) return null;
const showCreditDetail = requiredCredits > 0 || shortfallCredits > 0; const showCreditDetail = requiredCredits > 0 || shortfallCredits > 0;
const activeGuidance = guidance;
const showPurchaseAction =
!activeGuidance ||
(activeGuidance.mode === "guide" && activeGuidance.ctaLabel !== null);
return ( return (
<div <div
@@ -41,11 +33,10 @@ export function InsufficientCreditsDialog({
id="insufficient-credits-title" id="insufficient-credits-title"
className="m-0 mb-2.5 text-(length:--responsive-page-title,var(--font-size-22,22px)) font-bold leading-[1.2] text-text-foreground" className="m-0 mb-2.5 text-(length:--responsive-page-title,var(--font-size-22,22px)) font-bold leading-[1.2] text-text-foreground"
> >
{activeGuidance?.title ?? "Not enough credits"} Not enough credits
</h2> </h2>
<p className="mx-(--spacing-md,12px) mb-(--page-section-gap,18px) mt-0 text-(length:--responsive-body,var(--font-size-lg,16px)) leading-normal text-[#393939]"> <p className="mx-(--spacing-md,12px) mb-(--page-section-gap,18px) mt-0 text-(length:--responsive-body,var(--font-size-lg,16px)) leading-normal text-[#393939]">
{activeGuidance?.copy ?? Top up your credits to unlock this message and keep the moment going.
"Top up your credits to unlock this message and keep the moment going."}
</p> </p>
{showCreditDetail ? ( {showCreditDetail ? (
@@ -79,15 +70,15 @@ export function InsufficientCreditsDialog({
> >
Later Later
</button> </button>
{showPurchaseAction ? <button <button
type="button" type="button"
data-analytics-key="chat.topup" data-analytics-key="chat.topup"
data-analytics-label="Top up chat credits" data-analytics-label="Top up chat credits"
className="flex min-h-(--pwa-button-height,44px) flex-auto cursor-pointer items-center justify-center rounded-bottom-sheet border-0 bg-[linear-gradient(90deg,#ff67e0_0%,#ff52a2_100%)] text-(length:--responsive-body,var(--font-size-lg,16px)) font-bold text-(--color-pwa-button-text,#ffffff) shadow-[0_6px_14px_rgba(246,87,160,0.28)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]" className="flex min-h-(--pwa-button-height,44px) flex-auto cursor-pointer items-center justify-center rounded-bottom-sheet border-0 bg-[linear-gradient(90deg,#ff67e0_0%,#ff52a2_100%)] text-(length:--responsive-body,var(--font-size-lg,16px)) font-bold text-(--color-pwa-button-text,#ffffff) shadow-[0_6px_14px_rgba(246,87,160,0.28)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
onClick={onConfirm} onClick={onConfirm}
> >
{activeGuidance?.ctaLabel ?? "Top up now"} Top up now
</button> : null} </button>
</div> </div>
</div> </div>
</div> </div>
+1 -4
View File
@@ -9,7 +9,7 @@
* - 用户:[占位 spacer] [Content] [Avatar] * - 用户:[占位 spacer] [Content] [Avatar]
*/ */
import { useUserSelector } from "@/stores/user/user-context"; import { useUserSelector } from "@/stores/user/user-context";
import type { ChatAction, CommercialAction, PaymentGuidance } from "@/data/schemas/chat"; import type { ChatAction, CommercialAction } from "@/data/schemas/chat";
import { MessageAvatar } from "./message-avatar"; import { MessageAvatar } from "./message-avatar";
import { MessageContent } from "./message-content"; import { MessageContent } from "./message-content";
@@ -30,7 +30,6 @@ export interface MessageBubbleProps {
privateMessageHint?: string | null; privateMessageHint?: string | null;
commercialAction?: CommercialAction | null; commercialAction?: CommercialAction | null;
chatAction?: ChatAction | null; chatAction?: ChatAction | null;
paymentGuidance?: PaymentGuidance | null;
isUnlockingMessage?: boolean; isUnlockingMessage?: boolean;
onUnlockPrivateMessage?: ChatMessageAction; onUnlockPrivateMessage?: ChatMessageAction;
onUnlockVoiceMessage?: ChatMessageAction; onUnlockVoiceMessage?: ChatMessageAction;
@@ -65,7 +64,6 @@ export function MessageBubble({
privateMessageHint, privateMessageHint,
commercialAction, commercialAction,
chatAction, chatAction,
paymentGuidance,
isUnlockingMessage, isUnlockingMessage,
onUnlockPrivateMessage, onUnlockPrivateMessage,
onUnlockVoiceMessage, onUnlockVoiceMessage,
@@ -108,7 +106,6 @@ export function MessageBubble({
privateMessageHint={privateMessageHint} privateMessageHint={privateMessageHint}
commercialAction={commercialAction} commercialAction={commercialAction}
chatAction={chatAction} chatAction={chatAction}
paymentGuidance={paymentGuidance}
isUnlockingMessage={isUnlockingMessage} isUnlockingMessage={isUnlockingMessage}
onUnlockPrivateMessage={onUnlockPrivateMessage} onUnlockPrivateMessage={onUnlockPrivateMessage}
onUnlockVoiceMessage={onUnlockVoiceMessage} onUnlockVoiceMessage={onUnlockVoiceMessage}
+2 -11
View File
@@ -1,16 +1,11 @@
"use client"; "use client";
import type { import type { ChatAction, CommercialAction } from "@/data/schemas/chat";
ChatAction,
CommercialAction,
PaymentGuidance,
} from "@/data/schemas/chat";
import { ChatActionCard } from "./chat-action-card"; import { ChatActionCard } from "./chat-action-card";
import { CommercialActionCard } from "./commercial-action-card"; import { CommercialActionCard } from "./commercial-action-card";
import { ImageBubble } from "./image-bubble"; import { ImageBubble } from "./image-bubble";
import { LockedImageMessageCard } from "./locked-image-message-card"; import { LockedImageMessageCard } from "./locked-image-message-card";
import { PrivateMessageCard } from "./private-message-card"; import { PrivateMessageCard } from "./private-message-card";
import { PaymentGuidanceCard } from "./payment-guidance-card";
import { TextBubble } from "./text-bubble"; import { TextBubble } from "./text-bubble";
import { VoiceBubble } from "./voice-bubble"; import { VoiceBubble } from "./voice-bubble";
import styles from "./chat-area.module.css"; import styles from "./chat-area.module.css";
@@ -30,7 +25,6 @@ export interface MessageContentProps {
privateMessageHint?: string | null; privateMessageHint?: string | null;
commercialAction?: CommercialAction | null; commercialAction?: CommercialAction | null;
chatAction?: ChatAction | null; chatAction?: ChatAction | null;
paymentGuidance?: PaymentGuidance | null;
isUnlockingMessage?: boolean; isUnlockingMessage?: boolean;
onUnlockPrivateMessage?: ChatMessageAction; onUnlockPrivateMessage?: ChatMessageAction;
onUnlockVoiceMessage?: ChatMessageAction; onUnlockVoiceMessage?: ChatMessageAction;
@@ -65,7 +59,6 @@ export function MessageContent({
privateMessageHint, privateMessageHint,
commercialAction, commercialAction,
chatAction, chatAction,
paymentGuidance,
isUnlockingMessage, isUnlockingMessage,
onUnlockPrivateMessage, onUnlockPrivateMessage,
onUnlockVoiceMessage, onUnlockVoiceMessage,
@@ -150,9 +143,7 @@ export function MessageContent({
) : null} ) : null}
</> </>
)} )}
{isFromAI && paymentGuidance ? ( {isFromAI && chatAction ? (
<PaymentGuidanceCard guidance={paymentGuidance} />
) : isFromAI && chatAction ? (
<ChatActionCard <ChatActionCard
action={chatAction} action={chatAction}
onViewed={onChatActionViewed} onViewed={onChatActionViewed}
@@ -1,118 +0,0 @@
"use client";
import { useEffect, useRef, useState } from "react";
import { ArrowRight, CircleDollarSign, X } from "lucide-react";
import type { PaymentGuidance } from "@/data/schemas/chat";
import type { PaymentAnalyticsTriggerReason } from "@/lib/analytics/payment_analytics_context";
import { recordChatActionEventById } from "@/lib/chat/chat_action_events";
import { useActiveCharacter } from "@/providers/character-provider";
import { useAppNavigator } from "@/router/use-app-navigator";
import { useUserSelector } from "@/stores/user/user-context";
import styles from "./chat-area.module.css";
export interface PaymentGuidanceCardProps {
guidance: PaymentGuidance;
}
function triggerReasonForGuidance(
scene: PaymentGuidance["scene"],
): PaymentAnalyticsTriggerReason {
if (scene === "supportCharacter" || scene === "vip" || scene === "purchaseOptions") {
return "vip_cta";
}
if (scene === "privateMessageLocked" || scene === "historyLocked") {
return "private_topic_limit";
}
return "insufficient_credits";
}
export function PaymentGuidanceCard({ guidance }: PaymentGuidanceCardProps) {
const character = useActiveCharacter();
const navigator = useAppNavigator();
const isVip = useUserSelector((state) => state.context.isVip);
const [dismissed, setDismissed] = useState(false);
const viewedIdRef = useRef<string | null>(null);
const belongsToCurrentCharacter = guidance.characterId === character.id;
const hasPurchaseAction =
guidance.mode === "guide" &&
guidance.target === "subscription" &&
guidance.ctaLabel !== null &&
guidance.purchaseOptions.length > 0;
useEffect(() => {
if (!belongsToCurrentCharacter) return;
if (viewedIdRef.current === guidance.guidanceId) return;
viewedIdRef.current = guidance.guidanceId;
void recordChatActionEventById(
guidance.guidanceId,
character.id,
"viewed",
).catch(() => undefined);
}, [belongsToCurrentCharacter, character.id, guidance.guidanceId]);
if (!belongsToCurrentCharacter || dismissed) return null;
const subscriptionType =
isVip || !guidance.purchaseOptions.includes("vip") ? "topup" : "vip";
return (
<aside
className={styles.commercialAction}
aria-label={guidance.title ?? guidance.characterName}
data-payment-guidance-id={guidance.guidanceId}
data-payment-guidance-mode={guidance.mode}
data-payment-guidance-scene={guidance.scene}
>
<div className={styles.commercialActionHeader}>
<CircleDollarSign size={18} aria-hidden="true" />
<button
type="button"
className={styles.commercialActionDismiss}
title="Dismiss"
aria-label="Dismiss"
onClick={() => {
setDismissed(true);
void recordChatActionEventById(
guidance.guidanceId,
character.id,
"dismissed",
).catch(() => undefined);
}}
>
<X size={16} aria-hidden="true" />
</button>
</div>
{guidance.title ? (
<strong>{guidance.title}</strong>
) : null}
<p className={styles.commercialActionCopy}>{guidance.copy}</p>
{hasPurchaseAction ? (
<button
type="button"
className={styles.commercialActionButton}
onClick={() => {
void recordChatActionEventById(
guidance.guidanceId,
character.id,
"opened",
).catch(() => undefined);
navigator.openSubscription({
type: subscriptionType,
returnTo: "chat",
chatActionId: guidance.guidanceId,
analytics: {
entryPoint: "chat_input",
triggerReason: triggerReasonForGuidance(guidance.scene),
},
});
}}
>
<span>{guidance.ctaLabel}</span>
<ArrowRight size={17} aria-hidden="true" />
</button>
) : null}
</aside>
);
}
@@ -1,38 +0,0 @@
"use client";
import { useEffect } from "react";
import { createChatWebSocket } from "@/core/net/chat-websocket";
import type { LoginStatus } from "@/data/schemas/auth";
import { getSessionAccessToken } from "@/lib/auth/auth_session";
import { useChatDispatch } from "@/stores/chat/chat-context";
export function useChatCommercialMessages(input: {
characterId: string;
loginStatus: LoginStatus;
}) {
const chatDispatch = useChatDispatch();
useEffect(() => {
if (input.loginStatus === "notLoggedIn" || input.loginStatus === "guest") {
return;
}
let disposed = false;
let socket: ReturnType<typeof createChatWebSocket> | null = null;
void getSessionAccessToken().then((token) => {
if (disposed || !token) return;
socket = createChatWebSocket(token);
socket.onCommercialMessage = (message) => {
if (message.characterId !== input.characterId) return;
chatDispatch({ type: "ChatCommercialMessageReceived", message });
};
socket.connect();
});
return () => {
disposed = true;
socket?.disconnect();
};
}, [chatDispatch, input.characterId, input.loginStatus]);
}
@@ -5,9 +5,6 @@ import { useEffect, useRef } from "react";
import { behaviorAnalytics } from "@/lib/analytics"; import { behaviorAnalytics } from "@/lib/analytics";
import { useAppNavigator } from "@/router/use-app-navigator"; import { useAppNavigator } from "@/router/use-app-navigator";
import type { ChatUpgradeReason } from "@/stores/chat/chat-state"; import type { ChatUpgradeReason } from "@/stores/chat/chat-state";
import type { PaymentGuidance } from "@/data/schemas/chat";
import { recordChatActionEventById } from "@/lib/chat/chat_action_events";
import { useActiveCharacter } from "@/providers/character-provider";
import { useUserSelector } from "@/stores/user/user-context"; import { useUserSelector } from "@/stores/user/user-context";
import { import {
@@ -20,14 +17,10 @@ import {
export interface UseChatMessageLimitBannerInput { export interface UseChatMessageLimitBannerInput {
upgradePromptVisible: boolean; upgradePromptVisible: boolean;
upgradeReason: ChatUpgradeReason | null; upgradeReason: ChatUpgradeReason | null;
paymentGuidance: PaymentGuidance | null;
} }
export interface ChatMessageLimitBannerView { export interface ChatMessageLimitBannerView
title: string; extends InsufficientCreditsMessageLimitView {
description: string;
ctaLabel: string | null;
guidance: PaymentGuidance | null;
visible: boolean; visible: boolean;
unlock: () => void; unlock: () => void;
} }
@@ -35,19 +28,10 @@ export interface ChatMessageLimitBannerView {
export function useChatMessageLimitBanner({ export function useChatMessageLimitBanner({
upgradePromptVisible, upgradePromptVisible,
upgradeReason, upgradeReason,
paymentGuidance,
}: UseChatMessageLimitBannerInput): ChatMessageLimitBannerView { }: UseChatMessageLimitBannerInput): ChatMessageLimitBannerView {
const navigator = useAppNavigator(); const navigator = useAppNavigator();
const character = useActiveCharacter();
const isVip = useUserSelector((state) => state.context.isVip); const isVip = useUserSelector((state) => state.context.isVip);
const fallbackView = getInsufficientCreditsMessageLimitView(); const view = getInsufficientCreditsMessageLimitView();
const guidance =
paymentGuidance?.characterId === character.id ? paymentGuidance : null;
const view: InsufficientCreditsMessageLimitView = {
title: guidance?.title ?? fallbackView.title,
description: guidance?.copy ?? fallbackView.description,
ctaLabel: guidance?.ctaLabel ?? fallbackView.ctaLabel,
};
const visible = shouldShowMessageLimitBanner({ const visible = shouldShowMessageLimitBanner({
upgradePromptVisible, upgradePromptVisible,
upgradeReason, upgradeReason,
@@ -68,31 +52,12 @@ export function useChatMessageLimitBanner({
}, },
{ isVip }, { isVip },
); );
if (guidance) { }, [isVip, visible]);
void recordChatActionEventById(
guidance.guidanceId,
character.id,
"viewed",
).catch(() => undefined);
}
}, [character.id, guidance, isVip, visible]);
function unlock(): void { function unlock(): void {
if (guidance?.mode !== "guide" && guidance !== null) return;
if (guidance) {
void recordChatActionEventById(
guidance.guidanceId,
character.id,
"opened",
).catch(() => undefined);
}
navigator.openSubscription({ navigator.openSubscription({
type: type: getInsufficientCreditsSubscriptionType(isVip),
isVip || (guidance && !guidance.purchaseOptions.includes("vip"))
? "topup"
: getInsufficientCreditsSubscriptionType(isVip),
returnTo: "chat", returnTo: "chat",
...(guidance ? { chatActionId: guidance.guidanceId } : {}),
analytics: { analytics: {
entryPoint: "chat_input", entryPoint: "chat_input",
triggerReason: "insufficient_credits", triggerReason: "insufficient_credits",
@@ -102,9 +67,6 @@ export function useChatMessageLimitBanner({
return { return {
...view, ...view,
ctaLabel:
guidance && guidance.mode !== "guide" ? null : view.ctaLabel,
guidance,
visible, visible,
unlock, unlock,
}; };
@@ -1,97 +0,0 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { shallowEqual } from "@xstate/react";
import type { LoginStatus } from "@/data/schemas/auth";
import { getDefaultPayChannelForCountryCode } from "@/lib/payment/default_pay_channel";
import { useAppNavigator } from "@/router/use-app-navigator";
import {
usePaymentDispatch,
usePaymentSelector,
} from "@/stores/payment/payment-context";
import { useUserSelector } from "@/stores/user/user-context";
import { deriveChatSupportCta } from "../chat-support-cta";
export function useChatSupportCta(input: {
characterId: string;
historyLoaded: boolean;
loginStatus: LoginStatus;
}) {
const navigator = useAppNavigator();
const paymentDispatch = usePaymentDispatch();
const initializedCharacterRef = useRef<string | null>(null);
const [nowMs, setNowMs] = useState(() => Date.now());
const payment = usePaymentSelector(
(state) => ({
commercialOffer: state.context.commercialOffer,
isFirstRecharge: state.context.isFirstRecharge,
supportCharacterId: state.context.supportCharacterId,
}),
shallowEqual,
);
const countryCode = useUserSelector(
(state) => state.context.currentUser?.countryCode,
);
const isAuthenticated =
input.loginStatus !== "notLoggedIn" && input.loginStatus !== "guest";
useEffect(() => {
if (!isAuthenticated) return;
if (initializedCharacterRef.current === input.characterId) return;
initializedCharacterRef.current = input.characterId;
paymentDispatch({
type: "PaymentInit",
characterId: input.characterId,
payChannel: getDefaultPayChannelForCountryCode(countryCode),
});
}, [countryCode, input.characterId, isAuthenticated, paymentDispatch]);
useEffect(() => {
if (!payment.commercialOffer) return;
const timer = window.setInterval(() => setNowMs(Date.now()), 1000);
return () => window.clearInterval(timer);
}, [payment.commercialOffer]);
const cta = useMemo(
() =>
deriveChatSupportCta({
isFirstRecharge:
isAuthenticated && payment.supportCharacterId === input.characterId
? payment.isFirstRecharge
: false,
commercialOffer:
isAuthenticated && payment.supportCharacterId === input.characterId
? payment.commercialOffer
: null,
nowMs,
}),
[
input.characterId,
isAuthenticated,
nowMs,
payment.commercialOffer,
payment.isFirstRecharge,
payment.supportCharacterId,
],
);
const open = () => {
navigator.openSubscription({
type: cta.planId?.startsWith("dol_") ? "topup" : "vip",
returnTo: "chat",
...(cta.planId ? { planId: cta.planId } : {}),
...(cta.commercialOfferId
? { commercialOfferId: cta.commercialOfferId }
: {}),
analytics: {
entryPoint: "chat_offer_banner",
triggerReason:
cta.kind === "support" ? "vip_cta" : "commercial_offer",
},
});
};
return { ...cta, visible: input.historyLoaded, open };
}
@@ -20,7 +20,6 @@ import {
import type { ChatPromotionState } from "@/stores/chat/helper/promotion"; import type { ChatPromotionState } from "@/stores/chat/helper/promotion";
import type { ChatUnlockPaywallRequest } from "@/stores/chat/chat-state"; import type { ChatUnlockPaywallRequest } from "@/stores/chat/chat-state";
import type { UiMessage } from "@/stores/chat/ui-message"; import type { UiMessage } from "@/stores/chat/ui-message";
import { recordChatActionEventById } from "@/lib/chat/chat_action_events";
import { useUserSelector } from "@/stores/user/user-context"; import { useUserSelector } from "@/stores/user/user-context";
import { getInsufficientCreditsSubscriptionType } from "../chat-screen.helpers"; import { getInsufficientCreditsSubscriptionType } from "../chat-screen.helpers";
@@ -49,7 +48,6 @@ export interface ChatUnlockDialogModel {
lockedCount: number; lockedCount: number;
isLoading: boolean; isLoading: boolean;
errorMessage: string | null; errorMessage: string | null;
guidance: import("@/data/schemas/chat").PaymentGuidance | null;
}; };
closeHistoryUnlock: () => void; closeHistoryUnlock: () => void;
confirmHistoryUnlock: () => void; confirmHistoryUnlock: () => void;
@@ -89,8 +87,6 @@ export function useChatUnlockCoordinator({
isUnlockingHistory: state.matches({ userSession: "unlockingHistory" }), isUnlockingHistory: state.matches({ userSession: "unlockingHistory" }),
lockedHistoryCount: state.context.lockedHistoryCount, lockedHistoryCount: state.context.lockedHistoryCount,
unlockHistoryError: state.context.unlockHistoryError, unlockHistoryError: state.context.unlockHistoryError,
unlockHistoryPaymentGuidance:
state.context.unlockHistoryPaymentGuidance,
unlockHistoryPromptVisible: state.context.unlockHistoryPromptVisible, unlockHistoryPromptVisible: state.context.unlockHistoryPromptVisible,
unlockPaywallRequest: state.context.unlockPaywallRequest, unlockPaywallRequest: state.context.unlockPaywallRequest,
}), }),
@@ -101,20 +97,6 @@ export function useChatUnlockCoordinator({
? chatState.unlockPaywallRequest ? chatState.unlockPaywallRequest
: null; : null;
useEffect(() => {
const guidance = chatState.unlockHistoryPaymentGuidance;
if (!enabled || guidance?.characterId !== chatState.characterId) return;
void recordChatActionEventById(
guidance.guidanceId,
chatState.characterId,
"viewed",
).catch(() => undefined);
}, [
chatState.characterId,
chatState.unlockHistoryPaymentGuidance,
enabled,
]);
useEffect(() => { useEffect(() => {
if (!unlockPaywallRequest) { if (!unlockPaywallRequest) {
trackedPaywallRef.current = null; trackedPaywallRef.current = null;
@@ -138,15 +120,7 @@ export function useChatUnlockCoordinator({
}, },
{ isVip }, { isVip },
); );
const guidance = unlockPaywallRequest.paymentGuidance; }, [isVip, unlockPaywallRequest]);
if (guidance?.characterId === chatState.characterId) {
void recordChatActionEventById(
guidance.guidanceId,
chatState.characterId,
"viewed",
).catch(() => undefined);
}
}, [chatState.characterId, isVip, unlockPaywallRequest]);
useEffect(() => { useEffect(() => {
if (!enabled) return; if (!enabled) return;
@@ -238,32 +212,6 @@ export function useChatUnlockCoordinator({
} }
function confirmHistoryUnlock(): void { function confirmHistoryUnlock(): void {
const guidance =
chatState.unlockHistoryPaymentGuidance?.characterId ===
chatState.characterId
? chatState.unlockHistoryPaymentGuidance
: null;
if (guidance) {
if (guidance.mode !== "guide") return;
void recordChatActionEventById(
guidance.guidanceId,
chatState.characterId,
"opened",
).catch(() => undefined);
navigator.openSubscription({
type:
isVip || !guidance.purchaseOptions.includes("vip")
? "topup"
: "vip",
returnTo: "chat",
chatActionId: guidance.guidanceId,
analytics: {
entryPoint: "chat_unlock",
triggerReason: "insufficient_credits",
},
});
return;
}
chatDispatch({ type: "ChatUnlockHistoryConfirmed" }); chatDispatch({ type: "ChatUnlockHistoryConfirmed" });
} }
@@ -273,12 +221,6 @@ export function useChatUnlockCoordinator({
function confirmPaywall(): void { function confirmPaywall(): void {
if (!unlockPaywallRequest) return; if (!unlockPaywallRequest) return;
const guidance =
unlockPaywallRequest.paymentGuidance?.characterId ===
chatState.characterId
? unlockPaywallRequest.paymentGuidance
: null;
if (guidance && guidance.mode !== "guide") return;
const returnUrl = resolveChatUnlockReturnUrl( const returnUrl = resolveChatUnlockReturnUrl(
unlockPaywallRequest, unlockPaywallRequest,
@@ -289,13 +231,6 @@ export function useChatUnlockCoordinator({
}, },
); );
chatDispatch({ type: "ChatUnlockPaywallNavigationConsumed" }); chatDispatch({ type: "ChatUnlockPaywallNavigationConsumed" });
if (guidance) {
void recordChatActionEventById(
guidance.guidanceId,
chatState.characterId,
"opened",
).catch(() => undefined);
}
navigator.openSubscriptionForPendingUnlock({ navigator.openSubscriptionForPendingUnlock({
displayMessageId: unlockPaywallRequest.displayMessageId, displayMessageId: unlockPaywallRequest.displayMessageId,
messageId: unlockPaywallRequest.messageId, messageId: unlockPaywallRequest.messageId,
@@ -304,17 +239,13 @@ export function useChatUnlockCoordinator({
clientLockId: unlockPaywallRequest.clientLockId, clientLockId: unlockPaywallRequest.clientLockId,
promotion: unlockPaywallRequest.promotion, promotion: unlockPaywallRequest.promotion,
returnUrl, returnUrl,
type: type: getInsufficientCreditsSubscriptionType(isVip),
isVip || (guidance && !guidance.purchaseOptions.includes("vip"))
? "topup"
: getInsufficientCreditsSubscriptionType(isVip),
analytics: { analytics: {
entryPoint: "chat_unlock", entryPoint: "chat_unlock",
triggerReason: unlockPaywallRequest.promotion triggerReason: unlockPaywallRequest.promotion
? "ad_landing" ? "ad_landing"
: "insufficient_credits", : "insufficient_credits",
}, },
...(guidance ? { chatActionId: guidance.guidanceId } : {}),
}); });
} }
@@ -327,7 +258,6 @@ export function useChatUnlockCoordinator({
lockedCount: chatState.lockedHistoryCount, lockedCount: chatState.lockedHistoryCount,
isLoading: chatState.isUnlockingHistory, isLoading: chatState.isUnlockingHistory,
errorMessage: chatState.unlockHistoryError, errorMessage: chatState.unlockHistoryError,
guidance: chatState.unlockHistoryPaymentGuidance,
}, },
closeHistoryUnlock, closeHistoryUnlock,
confirmHistoryUnlock, confirmHistoryUnlock,
@@ -21,8 +21,6 @@ import {
} from "@/data/constants/character"; } from "@/data/constants/character";
import { Logger } from "@/utils/logger"; import { Logger } from "@/utils/logger";
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context"; import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
import { consumeTopUpHandoff } from "@/lib/auth/top_up_handoff";
import { Result } from "@/utils/result";
import { import {
isFavoriteEntryRequest, isFavoriteEntryRequest,
persistFavoriteEntryIntent, persistFavoriteEntryIntent,
@@ -40,7 +38,6 @@ interface ExternalEntryPersistProps {
mode: string | null; mode: string | null;
promotionType: string | null; promotionType: string | null;
favorite: string | null; favorite: string | null;
handoffToken: string | null;
} }
export default function ExternalEntryPersist({ export default function ExternalEntryPersist({
@@ -53,16 +50,13 @@ export default function ExternalEntryPersist({
mode, mode,
promotionType, promotionType,
favorite, favorite,
handoffToken,
}: ExternalEntryPersistProps) { }: ExternalEntryPersistProps) {
const router = useRouter(); const router = useRouter();
const authState = useAuthState(); const authState = useAuthState();
const authDispatch = useAuthDispatch(); const authDispatch = useAuthDispatch();
const [hasPersisted, setHasPersisted] = useState(false); const [hasPersisted, setHasPersisted] = useState(false);
const [handoffError, setHandoffError] = useState<string | null>(null);
const [handoffCompleted, setHandoffCompleted] = useState(false);
const hasNavigatedRef = useRef(false); const hasNavigatedRef = useRef(false);
const handoffStartedRef = useRef(false); const hasReinitializedForPsidRef = useRef(false);
const targetRoute = resolveExternalEntryTarget({ target }); const targetRoute = resolveExternalEntryTarget({ target });
const destination = resolveExternalEntryDestination({ target, character }); const destination = resolveExternalEntryDestination({ target, character });
const characterId = const characterId =
@@ -71,12 +65,6 @@ export default function ExternalEntryPersist({
mode, mode,
promotionType, promotionType,
}); });
const isTopUpHandoff = targetRoute === ROUTES.subscription;
const displayedHandoffError =
handoffError ??
(isTopUpHandoff && !hasValue(handoffToken)
? "This top-up link is invalid. Please request a new link in Messenger."
: null);
useEffect(() => { useEffect(() => {
let cancelled = false; let cancelled = false;
@@ -128,39 +116,12 @@ export default function ExternalEntryPersist({
useEffect(() => { useEffect(() => {
if (hasNavigatedRef.current || !hasPersisted) return; if (hasNavigatedRef.current || !hasPersisted) return;
if (isTopUpHandoff) { // AuthStatusChecker can initialize before this entry has persisted PSID.
// Re-run the check so PSID direct login is not skipped by that race.
if (hasValue(psid) && !hasReinitializedForPsidRef.current) {
if (!authState.hasInitialized || authState.isLoading) return; if (!authState.hasInitialized || authState.isLoading) return;
if (handoffCompleted) { hasReinitializedForPsidRef.current = true;
if (
authState.loginStatus === "notLoggedIn" ||
authState.loginStatus === "guest"
) {
return;
}
hasNavigatedRef.current = true;
router.replace(destination);
return;
}
if (handoffStartedRef.current) return;
if (!hasValue(handoffToken)) return;
handoffStartedRef.current = true;
void (async () => {
const result = await consumeTopUpHandoff(handoffToken);
if (Result.isErr(result)) {
log.warn("[ExternalEntryPersist] top-up handoff failed", result.error);
window.history.replaceState(
window.history.state,
"",
"/external-entry?target=topup",
);
setHandoffError(
"This top-up link is invalid or has expired. Please request a new link in Messenger.",
);
return;
}
setHandoffCompleted(true);
authDispatch({ type: "AuthInit" }); authDispatch({ type: "AuthInit" });
})();
return; return;
} }
@@ -189,12 +150,8 @@ export default function ExternalEntryPersist({
authState.hasInitialized, authState.hasInitialized,
authState.isLoading, authState.isLoading,
authState.loginStatus, authState.loginStatus,
character,
destination, destination,
hasPersisted, hasPersisted,
handoffCompleted,
handoffToken,
isTopUpHandoff,
psid, psid,
router, router,
]); ]);
@@ -204,26 +161,11 @@ export default function ExternalEntryPersist({
className="flex flex-1 items-center justify-center" className="flex flex-1 items-center justify-center"
style={{ minHeight: "100dvh" }} style={{ minHeight: "100dvh" }}
> >
{displayedHandoffError ? (
<div className="mx-6 max-w-sm text-center">
<p className="text-sm text-[var(--color-text-secondary)]">
{displayedHandoffError}
</p>
<button
className="mt-5 rounded-full bg-[var(--color-accent)] px-5 py-2.5 text-sm font-semibold text-white"
type="button"
onClick={() => router.replace(ROUTES.root)}
>
Back to Cozsweet
</button>
</div>
) : (
<div <div
aria-label="Redirecting" aria-label="Redirecting"
className="size-10 animate-spin rounded-full border-4 border-t-transparent" className="size-10 animate-spin rounded-full border-4 border-t-transparent"
style={{ borderColor: "var(--color-accent)" }} style={{ borderColor: "var(--color-accent)" }}
/> />
)}
</div> </div>
); );
} }
-2
View File
@@ -7,7 +7,6 @@
* `/external-entry?target=chat&character=maya` * `/external-entry?target=chat&character=maya`
* `/external-entry?target=tip` * `/external-entry?target=tip`
* `/external-entry?target=private-zone&character=nayeli` * `/external-entry?target=private-zone&character=nayeli`
* `/external-entry?target=topup&handoffToken=<opaque-token>`
* *
* 页面不直接 `redirect()`,而是把数据交给 Client 组件先写入本地存储, * 页面不直接 `redirect()`,而是把数据交给 Client 组件先写入本地存储,
* 再通过 `router.replace()` 清理 URL 并跳转到最终页面。 * 再通过 `router.replace()` 清理 URL 并跳转到最终页面。
@@ -37,7 +36,6 @@ export default async function ExternalEntryPage({
mode={pickParam(params.mode)} mode={pickParam(params.mode)}
promotionType={pickParam(params.promotion_type)} promotionType={pickParam(params.promotion_type)}
favorite={pickParam(params.favorite)} favorite={pickParam(params.favorite)}
handoffToken={pickParam(params.handoffToken)}
/> />
); );
} }
@@ -58,13 +58,13 @@ describe("Private Zone paywall navigation", () => {
container.remove(); container.remove();
}); });
it("opens VIP and credit options for a non-VIP user", () => { it("opens top up with a private zone return target", () => {
const roomDispatch = vi.fn<Dispatch<PrivateZoneEvent>>(); const roomDispatch = vi.fn<Dispatch<PrivateZoneEvent>>();
renderHarness(root, "email", roomDispatch); renderHarness(root, "email", roomDispatch);
expect(mocks.openSubscription).toHaveBeenCalledWith({ expect(mocks.openSubscription).toHaveBeenCalledWith({
type: "vip", type: "topup",
returnTo: "private-zone", returnTo: "private-zone",
analytics: { analytics: {
entryPoint: "private_album_unlock", entryPoint: "private_album_unlock",
@@ -115,7 +115,6 @@ function Harness({
loginStatus, loginStatus,
roomDispatch, roomDispatch,
unlockPaywallRequest, unlockPaywallRequest,
isVip: false,
}); });
return null; return null;
} }
+2 -23
View File
@@ -19,8 +19,6 @@ import {
} from "@/providers/character-provider"; } from "@/providers/character-provider";
import { isPrivateAlbumLocked } from "@/lib/private-zone/private_album"; import { isPrivateAlbumLocked } from "@/lib/private-zone/private_album";
import { behaviorAnalytics } from "@/lib/analytics"; import { behaviorAnalytics } from "@/lib/analytics";
import { recordChatActionEventById } from "@/lib/chat/chat_action_events";
import { useUserSelector } from "@/stores/user/user-context";
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context"; import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
import { import {
usePrivateZoneDispatch, usePrivateZoneDispatch,
@@ -65,7 +63,6 @@ export function PrivateZoneScreen() {
const dispatch = usePrivateZoneDispatch(); const dispatch = usePrivateZoneDispatch();
const postState = usePrivateZonePostState(); const postState = usePrivateZonePostState();
const postDispatch = usePrivateZonePostDispatch(); const postDispatch = usePrivateZonePostDispatch();
const isVip = useUserSelector((user) => user.context.isVip);
const [activeTab, setActiveTab] = useState<"moments" | "albums">("albums"); const [activeTab, setActiveTab] = useState<"moments" | "albums">("albums");
const openedGalleryInPageRef = useRef(false); const openedGalleryInPageRef = useRef(false);
const previousPostLoginStatusRef = useRef(authState.loginStatus); const previousPostLoginStatusRef = useRef(authState.loginStatus);
@@ -87,7 +84,6 @@ export function PrivateZoneScreen() {
loginStatus: authState.loginStatus, loginStatus: authState.loginStatus,
roomDispatch: dispatch, roomDispatch: dispatch,
unlockPaywallRequest: state.unlockPaywallRequest, unlockPaywallRequest: state.unlockPaywallRequest,
isVip,
}); });
usePrivateZoneUnlockSuccessRefresh(state.unlockSuccessNonce); usePrivateZoneUnlockSuccessRefresh(state.unlockSuccessNonce);
usePrivateZoneUnlockSuccessRefresh(postState.unlockSuccessNonce); usePrivateZoneUnlockSuccessRefresh(postState.unlockSuccessNonce);
@@ -123,24 +119,9 @@ export function PrivateZoneScreen() {
entryPoint: "private_zone", entryPoint: "private_zone",
triggerReason: "insufficient_credits", triggerReason: "insufficient_credits",
}); });
const guidance =
request.paymentGuidance?.characterId === character.id
? request.paymentGuidance
: null;
if (guidance) {
void recordChatActionEventById(
guidance.guidanceId,
character.id,
"opened",
).catch(() => undefined);
}
navigator.openSubscription({ navigator.openSubscription({
type: type: "topup",
isVip || (guidance && !guidance.purchaseOptions.includes("vip"))
? "topup"
: "vip",
returnTo: "private-zone", returnTo: "private-zone",
...(guidance ? { chatActionId: guidance.guidanceId } : {}),
analytics: { analytics: {
entryPoint: "private_zone", entryPoint: "private_zone",
triggerReason: "insufficient_credits", triggerReason: "insufficient_credits",
@@ -151,8 +132,6 @@ export function PrivateZoneScreen() {
}, [ }, [
authState.loginStatus, authState.loginStatus,
characterRoutes.privateZone, characterRoutes.privateZone,
character.id,
isVip,
navigator, navigator,
postDispatch, postDispatch,
postState.unlockPaywallRequest, postState.unlockPaywallRequest,
@@ -226,7 +205,7 @@ export function PrivateZoneScreen() {
return; return;
} }
navigator.openSubscription({ navigator.openSubscription({
type: isVip ? "topup" : "vip", type: "topup",
returnTo: "private-zone", returnTo: "private-zone",
analytics: { analytics: {
entryPoint: "private_zone", entryPoint: "private_zone",
+2 -28
View File
@@ -5,16 +5,12 @@ import { type Dispatch, useEffect, useRef } from "react";
import type { LoginStatus } from "@/data/schemas/auth"; import type { LoginStatus } from "@/data/schemas/auth";
import { useGuestLoginBootstrap } from "@/hooks/use-guest-login-bootstrap"; import { useGuestLoginBootstrap } from "@/hooks/use-guest-login-bootstrap";
import { behaviorAnalytics } from "@/lib/analytics"; import { behaviorAnalytics } from "@/lib/analytics";
import { import { useActiveCharacterRoutes } from "@/providers/character-provider";
useActiveCharacter,
useActiveCharacterRoutes,
} from "@/providers/character-provider";
import { useAppNavigator } from "@/router/use-app-navigator"; import { useAppNavigator } from "@/router/use-app-navigator";
import type { AuthEvent } from "@/stores/auth/auth-events"; import type { AuthEvent } from "@/stores/auth/auth-events";
import type { PrivateZoneEvent } from "@/stores/private-zone"; import type { PrivateZoneEvent } from "@/stores/private-zone";
import type { PrivateZoneUnlockPaywallRequest } from "@/stores/private-zone/private-zone-state"; import type { PrivateZoneUnlockPaywallRequest } from "@/stores/private-zone/private-zone-state";
import { useUserDispatch } from "@/stores/user/user-context"; import { useUserDispatch } from "@/stores/user/user-context";
import { recordChatActionEventById } from "@/lib/chat/chat_action_events";
export interface UsePrivateZoneBootstrapFlowInput { export interface UsePrivateZoneBootstrapFlowInput {
authDispatch: Dispatch<AuthEvent>; authDispatch: Dispatch<AuthEvent>;
@@ -29,7 +25,6 @@ export interface UsePrivateZoneUnlockPaywallNavigationInput {
loginStatus: LoginStatus; loginStatus: LoginStatus;
roomDispatch: Dispatch<PrivateZoneEvent>; roomDispatch: Dispatch<PrivateZoneEvent>;
unlockPaywallRequest: PrivateZoneUnlockPaywallRequest | null; unlockPaywallRequest: PrivateZoneUnlockPaywallRequest | null;
isVip: boolean;
} }
export function isPrivateZoneAuthRequired(loginStatus: LoginStatus): boolean { export function isPrivateZoneAuthRequired(loginStatus: LoginStatus): boolean {
@@ -81,10 +76,8 @@ export function usePrivateZoneUnlockPaywallNavigation({
loginStatus, loginStatus,
roomDispatch, roomDispatch,
unlockPaywallRequest, unlockPaywallRequest,
isVip,
}: UsePrivateZoneUnlockPaywallNavigationInput): void { }: UsePrivateZoneUnlockPaywallNavigationInput): void {
const navigator = useAppNavigator(); const navigator = useAppNavigator();
const character = useActiveCharacter();
const characterRoutes = useActiveCharacterRoutes(); const characterRoutes = useActiveCharacterRoutes();
useEffect(() => { useEffect(() => {
@@ -97,26 +90,9 @@ export function usePrivateZoneUnlockPaywallNavigation({
entryPoint: "private_album_unlock", entryPoint: "private_album_unlock",
triggerReason: "insufficient_credits", triggerReason: "insufficient_credits",
}); });
const guidance = unlockPaywallRequest.paymentGuidance;
const activeGuidance =
guidance?.characterId === character.id ? guidance : null;
if (activeGuidance) {
void recordChatActionEventById(
activeGuidance.guidanceId,
activeGuidance.characterId,
"opened",
).catch(() => undefined);
}
navigator.openSubscription({ navigator.openSubscription({
type: type: "topup",
isVip ||
(activeGuidance && !activeGuidance.purchaseOptions.includes("vip"))
? "topup"
: "vip",
returnTo: "private-zone", returnTo: "private-zone",
...(activeGuidance
? { chatActionId: activeGuidance.guidanceId }
: {}),
analytics: { analytics: {
entryPoint: "private_album_unlock", entryPoint: "private_album_unlock",
triggerReason: "insufficient_credits", triggerReason: "insufficient_credits",
@@ -126,9 +102,7 @@ export function usePrivateZoneUnlockPaywallNavigation({
roomDispatch({ type: "PrivateZoneUnlockPaywallConsumed" }); roomDispatch({ type: "PrivateZoneUnlockPaywallConsumed" });
}, [ }, [
characterRoutes.privateZone, characterRoutes.privateZone,
character.id,
loginStatus, loginStatus,
isVip,
navigator, navigator,
roomDispatch, roomDispatch,
unlockPaywallRequest, unlockPaywallRequest,
@@ -34,14 +34,14 @@ describe("SubscriptionPage", () => {
); );
}); });
it("keeps the recipient empty when source navigation has no character", async () => { it("uses Elio for missing source navigation context", async () => {
const page = await SubscriptionPage({ const page = await SubscriptionPage({
searchParams: Promise.resolve({}), searchParams: Promise.resolve({}),
}); });
renderToStaticMarkup(page); renderToStaticMarkup(page);
expect(mocks.screenProps).toHaveBeenLastCalledWith( expect(mocks.screenProps).toHaveBeenLastCalledWith(
expect.objectContaining({ sourceCharacterSlug: null }), expect.objectContaining({ sourceCharacterSlug: "elio" }),
); );
}); });
}); });
@@ -3,16 +3,6 @@ import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
const mocks = vi.hoisted(() => { const mocks = vi.hoisted(() => {
const characters = [
{ id: "elio", slug: "elio", displayName: "Elio Silvestri", shortName: "Elio" },
{ id: "maya-tan", slug: "maya", displayName: "Maya Tan", shortName: "Maya" },
{
id: "nayeli-cervantes",
slug: "nayeli",
displayName: "Nayeli Cervantes",
shortName: "Nayeli",
},
];
const payment = { const payment = {
status: "ready", status: "ready",
plans: [ plans: [
@@ -62,17 +52,7 @@ const mocks = vi.hoisted(() => {
payment.selectedPlanId = event.planId; payment.selectedPlanId = event.planId;
} }
}); });
return { return { payment, paymentDispatch, planClick: vi.fn() };
characterCatalog: {
characters,
getBySlug: (slug: string | null) =>
characters.find((character) => character.slug === slug) ?? null,
},
payment,
paymentDispatch,
paymentFlowInput: vi.fn(),
planClick: vi.fn(),
};
}); });
vi.mock("@/app/_components", () => ({ vi.mock("@/app/_components", () => ({
@@ -103,10 +83,6 @@ vi.mock("@/stores/user/user-context", () => ({
useUserState: () => ({ currentUser: { countryCode: "ID" } }), useUserState: () => ({ currentUser: { countryCode: "ID" } }),
})); }));
vi.mock("@/providers/character-catalog-provider", () => ({
useCharacterCatalog: () => mocks.characterCatalog,
}));
vi.mock("@/lib/payment/payment_method", () => ({ vi.mock("@/lib/payment/payment_method", () => ({
getPaymentMethodConfig: () => ({ getPaymentMethodConfig: () => ({
initialPayChannel: "stripe", initialPayChannel: "stripe",
@@ -121,16 +97,13 @@ vi.mock("@/lib/analytics", () => ({
})); }));
vi.mock("../use-subscription-payment-flow", () => ({ vi.mock("../use-subscription-payment-flow", () => ({
useSubscriptionPaymentFlow: (input: unknown) => { useSubscriptionPaymentFlow: () => ({
mocks.paymentFlowInput(input);
return {
payment: mocks.payment, payment: mocks.payment,
paymentDispatch: mocks.paymentDispatch, paymentDispatch: mocks.paymentDispatch,
showPaymentSuccessDialog: false, showPaymentSuccessDialog: false,
handleBackClick: vi.fn(), handleBackClick: vi.fn(),
handlePaymentSuccessClose: vi.fn(), handlePaymentSuccessClose: vi.fn(),
}; }),
},
})); }));
vi.mock("../components", () => ({ vi.mock("../components", () => ({
@@ -197,16 +170,8 @@ describe("SubscriptionScreen payment selection flow", () => {
beforeEach(() => { beforeEach(() => {
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }) (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
.IS_REACT_ACT_ENVIRONMENT = true; .IS_REACT_ACT_ENVIRONMENT = true;
mocks.payment.isFirstRecharge = false;
mocks.payment.commercialOffer = null;
for (const plan of mocks.payment.plans) {
delete (plan as Record<string, unknown>).isFirstRechargeOffer;
delete (plan as Record<string, unknown>).firstRechargeDiscountPercent;
delete (plan as Record<string, unknown>).promotionType;
}
mocks.payment.selectedPlanId = "vip_monthly"; mocks.payment.selectedPlanId = "vip_monthly";
mocks.paymentDispatch.mockClear(); mocks.paymentDispatch.mockClear();
mocks.paymentFlowInput.mockClear();
mocks.planClick.mockClear(); mocks.planClick.mockClear();
container = document.createElement("div"); container = document.createElement("div");
document.body.appendChild(container); document.body.appendChild(container);
@@ -219,7 +184,7 @@ describe("SubscriptionScreen payment selection flow", () => {
}); });
it("confirms VIP selection before enabling the separate checkout button", () => { it("confirms VIP selection before enabling the separate checkout button", () => {
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />)); act(() => root.render(<SubscriptionScreen />));
const checkout = container.querySelector<HTMLButtonElement>( const checkout = container.querySelector<HTMLButtonElement>(
'[data-testid="checkout"]', '[data-testid="checkout"]',
); );
@@ -250,7 +215,7 @@ describe("SubscriptionScreen payment selection flow", () => {
}); });
it("keeps the original selection when VIP confirmation is cancelled", () => { it("keeps the original selection when VIP confirmation is cancelled", () => {
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />)); act(() => root.render(<SubscriptionScreen />));
act(() => clickButton(container, "vip_quarterly")); act(() => clickButton(container, "vip_quarterly"));
expect(container.querySelector('[role="dialog"]')).not.toBeNull(); expect(container.querySelector('[role="dialog"]')).not.toBeNull();
@@ -265,21 +230,21 @@ describe("SubscriptionScreen payment selection flow", () => {
}); });
it("requires VIP confirmation again after the page is remounted", () => { it("requires VIP confirmation again after the page is remounted", () => {
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />)); act(() => root.render(<SubscriptionScreen />));
act(() => clickButton(container, "vip_monthly")); act(() => clickButton(container, "vip_monthly"));
act(() => clickButton(container, "Confirm")); act(() => clickButton(container, "Confirm"));
expect(container.querySelector('[role="dialog"]')).toBeNull(); expect(container.querySelector('[role="dialog"]')).toBeNull();
act(() => root.unmount()); act(() => root.unmount());
root = createRoot(container); root = createRoot(container);
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />)); act(() => root.render(<SubscriptionScreen />));
act(() => clickButton(container, "vip_monthly")); act(() => clickButton(container, "vip_monthly"));
expect(container.querySelector('[role="dialog"]')).not.toBeNull(); expect(container.querySelector('[role="dialog"]')).not.toBeNull();
}); });
it("selects a coin package without showing the renewal dialog", () => { it("selects a coin package without showing the renewal dialog", () => {
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />)); act(() => root.render(<SubscriptionScreen />));
act(() => clickButton(container, "coin_1000")); act(() => clickButton(container, "coin_1000"));
expect(container.querySelector('[role="dialog"]')).toBeNull(); expect(container.querySelector('[role="dialog"]')).toBeNull();
@@ -291,100 +256,6 @@ describe("SubscriptionScreen payment selection flow", () => {
expect.objectContaining({ type: "PaymentCreateOrderSubmitted" }), expect.objectContaining({ type: "PaymentCreateOrderSubmitted" }),
); );
}); });
it("keeps payment guidance bound to the source character", () => {
act(() =>
root.render(
<SubscriptionScreen
sourceCharacterSlug="maya"
chatActionId="019c8f8d-17d3-7a42-b1cc-b6927b1927d5"
/>,
),
);
const guidance = container.querySelector(
'[data-payment-guidance-character="maya-tan"]',
);
expect(guidance?.textContent).toContain("Keep talking with Maya");
expect(guidance?.textContent).toContain("support Maya");
expect(guidance?.textContent).toContain("cannot continue");
expect(guidance?.textContent).not.toContain("Elio");
});
it("does not render the first recharge banner on the subscription page", () => {
mocks.payment.isFirstRecharge = true;
Object.assign(mocks.payment.plans[0] as Record<string, unknown>, {
isFirstRechargeOffer: true,
firstRechargeDiscountPercent: 50,
promotionType: "first_recharge_half_price",
});
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
expect(container.textContent).not.toContain("First Recharge Offer");
expect(container.textContent).not.toContain(
"Your first recharge price is already applied",
);
});
it.each(["elio", "maya", "nayeli"])(
"inherits the %s chat character without rendering a recipient selector",
(sourceCharacterSlug) => {
mocks.payment.selectedPlanId = "coin_1000";
act(() =>
root.render(
<SubscriptionScreen
subscriptionType="topup"
sourceCharacterSlug={sourceCharacterSlug}
/>,
),
);
const checkout = container.querySelector<HTMLButtonElement>(
'[data-testid="checkout"]',
);
expect(container.textContent).not.toContain("Supporting ");
expect(container.textContent).not.toContain(
"Choose who you want to support",
);
expect(container.textContent).not.toContain(
"Your VIP or credit purchase supports the character you choose",
);
expect(checkout?.disabled).toBe(false);
expect(mocks.paymentFlowInput).toHaveBeenLastCalledWith(
expect.objectContaining({ sourceCharacterSlug }),
);
},
);
it("does not invent a recipient when opened without a source character", () => {
mocks.payment.selectedPlanId = "coin_1000";
act(() =>
root.render(
<SubscriptionScreen
subscriptionType="topup"
sourceCharacterSlug={null}
/>,
),
);
const checkout = container.querySelector<HTMLButtonElement>(
'[data-testid="checkout"]',
);
expect(container.textContent).not.toContain("Supporting ");
expect(container.textContent).not.toContain(
"Choose who you want to support",
);
expect(container.textContent).not.toContain(
"Your VIP or credit purchase supports the character you choose",
);
expect(checkout?.disabled).toBe(true);
expect(mocks.paymentFlowInput).toHaveBeenLastCalledWith(
expect.objectContaining({ sourceCharacterSlug: null }),
);
});
}); });
function clickButton(root: ParentNode, label: string): void { function clickButton(root: ParentNode, label: string): void {
@@ -3,12 +3,8 @@ import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { Result } from "@/utils/result"; import { Result } from "@/utils/result";
import { ApiError } from "@/data/services/api/api_result";
import { import { SubscriptionPaymentIssueDialog } from "../subscription-payment-issue-dialog";
getPaymentIssueSubmitErrorLogDetails,
SubscriptionPaymentIssueDialog,
} from "../subscription-payment-issue-dialog";
import { SubscriptionRenewalConfirmationDialog } from "../subscription-renewal-confirmation-dialog"; import { SubscriptionRenewalConfirmationDialog } from "../subscription-renewal-confirmation-dialog";
const mocks = vi.hoisted(() => ({ const mocks = vi.hoisted(() => ({
@@ -204,28 +200,6 @@ describe("subscription payment dialogs", () => {
); );
expect(onClose).toHaveBeenCalledOnce(); expect(onClose).toHaveBeenCalledOnce();
}); });
it("keeps HTTP status and backend error code in payment issue failure diagnostics", () => {
const failure = Result.err(
new ApiError("HTTP_ERROR", "Invalid feedback context", 400, {
detail: {
message: "Invalid feedback context",
errorCode: "INVALID_FEEDBACK_CONTEXT",
},
}),
);
if (failure.success) throw new Error("Expected failure result");
expect(getPaymentIssueSubmitErrorLogDetails(failure.error)).toMatchObject({
code: "UNKNOWN",
message: "Invalid feedback context",
causeName: "ApiError",
causeMessage: "Invalid feedback context",
httpStatus: 400,
apiCode: "HTTP_ERROR",
serverErrorCode: "INVALID_FEEDBACK_CONTEXT",
});
});
}); });
function clickButton(root: ParentNode | null, label: string): void { function clickButton(root: ParentNode | null, label: string): void {
@@ -24,7 +24,6 @@ export interface SubscriptionCheckoutButtonProps {
subscriptionType: "vip" | "topup"; subscriptionType: "vip" | "topup";
returnTo?: SubscriptionReturnTo; returnTo?: SubscriptionReturnTo;
sourceCharacterSlug?: string; sourceCharacterSlug?: string;
countryCode?: string | null;
} }
export function SubscriptionCheckoutButton({ export function SubscriptionCheckoutButton({
@@ -32,7 +31,6 @@ export function SubscriptionCheckoutButton({
subscriptionType, subscriptionType,
returnTo = null, returnTo = null,
sourceCharacterSlug = DEFAULT_CHARACTER_SLUG, sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
countryCode = null,
}: SubscriptionCheckoutButtonProps) { }: SubscriptionCheckoutButtonProps) {
const payment = usePaymentState(); const payment = usePaymentState();
const paymentDispatch = usePaymentDispatch(); const paymentDispatch = usePaymentDispatch();
@@ -44,7 +42,6 @@ export function SubscriptionCheckoutButton({
returnTo: returnTo ?? undefined, returnTo: returnTo ?? undefined,
characterSlug: sourceCharacterSlug, characterSlug: sourceCharacterSlug,
subscriptionType, subscriptionType,
countryCode,
}); });
const isLoading = payment.isCreatingOrder || payment.isPollingOrder; const isLoading = payment.isCreatingOrder || payment.isPollingOrder;
@@ -60,6 +57,7 @@ export function SubscriptionCheckoutButton({
paymentLaunch.resetLaunchState(); paymentLaunch.resetLaunchState();
paymentDispatch({ type: "PaymentCreateOrderSubmitted" }); paymentDispatch({ type: "PaymentCreateOrderSubmitted" });
}; };
return ( return (
<> <>
<SubscriptionCtaButton <SubscriptionCtaButton
@@ -88,7 +86,7 @@ export function SubscriptionCheckoutButton({
<PaymentLaunchDialogs <PaymentLaunchDialogs
currentOrderId={payment.currentOrderId} currentOrderId={payment.currentOrderId}
externalCheckoutAnalyticsKey="subscription.external_checkout" externalCheckoutAnalyticsKey="subscription.external_checkout"
ezpayDescription="Your order has been created. Continue to the secure payment page to finish." ezpayDescription="Your order has been created. Continue to GCash to finish the payment."
launch={paymentLaunch} launch={paymentLaunch}
/> />
</> </>
@@ -6,7 +6,6 @@ import { ModalPortal } from "@/app/_components/core/modal-portal";
import { createFeedbackContext } from "@/app/feedback/feedback-context"; import { createFeedbackContext } from "@/app/feedback/feedback-context";
import type { PayChannel } from "@/data/schemas/payment"; import type { PayChannel } from "@/data/schemas/payment";
import { submitFeedback } from "@/lib/feedback"; import { submitFeedback } from "@/lib/feedback";
import { Logger } from "@/utils/logger";
import type { SubscriptionType } from "../subscription-screen.helpers"; import type { SubscriptionType } from "../subscription-screen.helpers";
import styles from "./subscription-dialog.module.css"; import styles from "./subscription-dialog.module.css";
@@ -34,21 +33,6 @@ const OTHER_DETAILS_MIN_LENGTH = 10;
const OTHER_DETAILS_MAX_LENGTH = 2000; const OTHER_DETAILS_MAX_LENGTH = 2000;
const SUCCESS_MESSAGE = "Thanks. Your payment issue has been submitted."; const SUCCESS_MESSAGE = "Thanks. Your payment issue has been submitted.";
const FAILURE_MESSAGE = "Unable to submit. Please try again."; const FAILURE_MESSAGE = "Unable to submit. Please try again.";
const log = new Logger("SubscriptionPaymentIssueDialog");
interface ErrorRecord {
readonly [key: string]: unknown;
}
export interface PaymentIssueSubmitErrorLogDetails {
code: string;
message: string;
causeName?: string;
causeMessage?: string;
httpStatus?: number;
apiCode?: string;
serverErrorCode?: string;
}
export interface SubscriptionPaymentIssueDialogProps { export interface SubscriptionPaymentIssueDialogProps {
open: boolean; open: boolean;
@@ -135,19 +119,6 @@ export function SubscriptionPaymentIssueDialog({
}); });
if (!result.success) { if (!result.success) {
log.error(
{
...getPaymentIssueSubmitErrorLogDetails(result.error),
paymentIssueReason: reason,
subscriptionType,
planId,
orderId,
payChannel,
countryCode,
characterId,
},
"Payment issue feedback submit failed",
);
setErrorMessage(FAILURE_MESSAGE); setErrorMessage(FAILURE_MESSAGE);
setIsSubmitting(false); setIsSubmitting(false);
return; return;
@@ -235,32 +206,6 @@ export function SubscriptionPaymentIssueDialog({
); );
} }
export function getPaymentIssueSubmitErrorLogDetails(
error: Error,
): PaymentIssueSubmitErrorLogDetails {
const errorRecord = toErrorRecord(error);
const cause = toErrorRecord(errorRecord?.cause);
const responseDetails = toErrorRecord(cause?.details);
const detail = toErrorRecord(responseDetails?.detail);
const causeName = stringValue(cause?.name);
const causeMessage = stringValue(cause?.message);
const httpStatus = numberValue(cause?.status);
const apiCode = stringValue(cause?.code);
const serverErrorCode =
stringValue(detail?.errorCode) ??
stringValue(responseDetails?.errorCode);
return {
code: stringValue(errorRecord?.code) ?? "UNKNOWN",
message: error.message,
...(causeName ? { causeName } : {}),
...(causeMessage ? { causeMessage } : {}),
...(httpStatus !== undefined ? { httpStatus } : {}),
...(apiCode ? { apiCode } : {}),
...(serverErrorCode ? { serverErrorCode } : {}),
};
}
function createIdempotencyKey(): string { function createIdempotencyKey(): string {
const token = const token =
typeof crypto !== "undefined" && "randomUUID" in crypto typeof crypto !== "undefined" && "randomUUID" in crypto
@@ -268,18 +213,3 @@ function createIdempotencyKey(): string {
: `${Date.now()}_${Math.random().toString(36).slice(2)}`; : `${Date.now()}_${Math.random().toString(36).slice(2)}`;
return `payment_feedback_${token}`; return `payment_feedback_${token}`;
} }
function toErrorRecord(value: unknown): ErrorRecord | null {
if (typeof value !== "object" || value === null) return null;
return value as ErrorRecord;
}
function stringValue(value: unknown): string | undefined {
return typeof value === "string" && value.length > 0 ? value : undefined;
}
function numberValue(value: unknown): number | undefined {
return typeof value === "number" && Number.isFinite(value)
? value
: undefined;
}
@@ -1,24 +1,14 @@
.shell { .shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: var(--app-viewport-height, 100dvh);
min-height: var(--app-viewport-height, 100dvh); min-height: var(--app-viewport-height, 100dvh);
overflow: hidden;
background: background:
radial-gradient(circle at 8% 4%, rgba(255, 255, 255, 0.95) 0 90px, transparent 160px), radial-gradient(circle at 8% 4%, rgba(255, 255, 255, 0.95) 0 90px, transparent 160px),
linear-gradient(180deg, #fff9fb 0%, #fcf3f4 52%, #fffefe 100%); linear-gradient(180deg, #fff9fb 0%, #fcf3f4 52%, #fffefe 100%);
}
.scrollArea {
min-height: 0;
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: padding:
calc(var(--page-padding-y, 18px) + var(--app-safe-top, 0px)) calc(var(--page-padding-y, 18px) + var(--app-safe-top, 0px))
calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px)) calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
var(--page-section-gap-lg, 22px) calc(104px + var(--app-safe-bottom, 0px))
calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px)); calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
} }
@@ -71,29 +61,6 @@
box-shadow: 0 12px 30px rgba(22, 101, 52, 0.12); box-shadow: 0 12px 30px rgba(22, 101, 52, 0.12);
} }
.characterSupportBanner {
margin-top: var(--page-section-gap, 14px);
padding: 14px 16px;
border: 1px solid rgba(246, 87, 160, 0.2);
border-radius: var(--responsive-card-radius-sm, 22px);
background: rgba(255, 255, 255, 0.9);
color: #4a3340;
box-shadow: 0 10px 24px rgba(246, 87, 160, 0.1);
}
.characterSupportBanner h2 {
margin: 0;
color: #24151d;
font-size: var(--responsive-card-title, 17px);
line-height: 1.25;
}
.characterSupportBanner p {
margin: 6px 0 0;
font-size: var(--responsive-caption, 14px);
line-height: 1.45;
}
.firstRechargeBanner { .firstRechargeBanner {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -201,12 +168,11 @@
} }
.ctaSlot { .ctaSlot {
position: relative; position: fixed;
z-index: 40; z-index: 40;
flex: 0 0 auto; right: 50%;
width: 100%; bottom: 0;
max-height: min(50dvh, 360px); width: min(100%, var(--app-max-width, 540px));
overflow-y: auto;
padding: padding:
12px 12px
calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px)) calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
@@ -220,4 +186,5 @@
); );
box-shadow: 0 -12px 30px rgba(87, 35, 59, 0.1); box-shadow: 0 -12px 30px rgba(87, 35, 59, 0.1);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
transform: translateX(50%);
} }
+3 -1
View File
@@ -10,6 +10,7 @@ import {
type PaymentSearchParams, type PaymentSearchParams,
} from "@/lib/payment/payment_search_params"; } from "@/lib/payment/payment_search_params";
import { import {
DEFAULT_CHARACTER_SLUG,
getCharacterBySlug, getCharacterBySlug,
} from "@/data/constants/character"; } from "@/data/constants/character";
@@ -29,7 +30,8 @@ export default async function SubscriptionPage({
getFirstPaymentSearchParam(query.type), getFirstPaymentSearchParam(query.type),
); );
const sourceCharacterSlug = const sourceCharacterSlug =
getCharacterBySlug(getFirstPaymentSearchParam(query.character))?.slug ?? null; getCharacterBySlug(getFirstPaymentSearchParam(query.character))?.slug ??
DEFAULT_CHARACTER_SLUG;
const initialPlanId = getFirstPaymentSearchParam(query.planId); const initialPlanId = getFirstPaymentSearchParam(query.planId);
const commercialOfferId = getFirstPaymentSearchParam( const commercialOfferId = getFirstPaymentSearchParam(
query.commercialOfferId, query.commercialOfferId,
+31 -41
View File
@@ -9,14 +9,12 @@ import { usePaymentPlanAnalytics } from "@/app/_hooks/use-payment-plan-analytics
import type { PayChannel } from "@/data/schemas/payment"; import type { PayChannel } from "@/data/schemas/payment";
import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit"; import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit";
import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character"; import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
import { useCharacterCatalog } from "@/providers/character-catalog-provider";
import { import {
behaviorAnalytics, behaviorAnalytics,
getDefaultPaymentAnalyticsContext, getDefaultPaymentAnalyticsContext,
type PaymentAnalyticsContext, type PaymentAnalyticsContext,
} from "@/lib/analytics"; } from "@/lib/analytics";
import { getPaymentMethodConfig } from "@/lib/payment/payment_method"; import { getPaymentMethodConfig } from "@/lib/payment/payment_method";
import { useHasHydrated } from "@/hooks/use-has-hydrated";
import { useUserState } from "@/stores/user/user-context"; import { useUserState } from "@/stores/user/user-context";
import { import {
@@ -48,7 +46,7 @@ export interface SubscriptionScreenProps {
returnTo?: SubscriptionReturnTo; returnTo?: SubscriptionReturnTo;
initialPayChannel?: PayChannel | null; initialPayChannel?: PayChannel | null;
analyticsContext?: PaymentAnalyticsContext; analyticsContext?: PaymentAnalyticsContext;
sourceCharacterSlug?: string | null; sourceCharacterSlug?: string;
initialPlanId?: string | null; initialPlanId?: string | null;
commercialOfferId?: string | null; commercialOfferId?: string | null;
resumeOrderId?: string | null; resumeOrderId?: string | null;
@@ -61,7 +59,7 @@ export function SubscriptionScreen({
returnTo = null, returnTo = null,
initialPayChannel = null, initialPayChannel = null,
analyticsContext: providedAnalyticsContext, analyticsContext: providedAnalyticsContext,
sourceCharacterSlug = null, sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
initialPlanId = null, initialPlanId = null,
commercialOfferId = null, commercialOfferId = null,
resumeOrderId = null, resumeOrderId = null,
@@ -75,18 +73,12 @@ export function SubscriptionScreen({
const [paymentIssueNotice, setPaymentIssueNotice] = useState<string | null>( const [paymentIssueNotice, setPaymentIssueNotice] = useState<string | null>(
null, null,
); );
const characterCatalog = useCharacterCatalog();
const userState = useUserState(); const userState = useUserState();
const sourceCharacter = characterCatalog.getBySlug(sourceCharacterSlug);
const hasHydrated = useHasHydrated();
const countryCode = userState.currentUser?.countryCode; const countryCode = userState.currentUser?.countryCode;
const paymentMethodConfig = getPaymentMethodConfig({ const paymentMethodConfig = getPaymentMethodConfig({
countryCode, countryCode,
requestedPayChannel: initialPayChannel, requestedPayChannel: initialPayChannel,
}); });
const renderedPaymentMethodConfig = hasHydrated
? paymentMethodConfig
: { ...paymentMethodConfig, showPaymentMethodSelector: false };
const { const {
payment, payment,
paymentDispatch, paymentDispatch,
@@ -97,7 +89,7 @@ export function SubscriptionScreen({
subscriptionType, subscriptionType,
shouldResumePendingOrder, shouldResumePendingOrder,
returnTo, returnTo,
sourceCharacterSlug: sourceCharacter?.slug ?? null, sourceCharacterSlug,
initialPayChannel: paymentMethodConfig.initialPayChannel, initialPayChannel: paymentMethodConfig.initialPayChannel,
initialPlanId, initialPlanId,
commercialOfferId, commercialOfferId,
@@ -128,14 +120,14 @@ export function SubscriptionScreen({
}); });
}, [canSubscribeVip, directCoinsPlans, payment.plans, vipOfferPlans]); }, [canSubscribeVip, directCoinsPlans, payment.plans, vipOfferPlans]);
usePaymentPlanAnalytics(displayedPlans, analyticsContext); usePaymentPlanAnalytics(displayedPlans, analyticsContext);
const hasFirstRechargeOffer = useMemo( const firstRechargeOffer = useMemo(
() => () =>
getFirstRechargeOfferView({ getFirstRechargeOfferView({
isFirstRecharge: payment.isFirstRecharge, isFirstRecharge: payment.isFirstRecharge,
subscriptionType, subscriptionType,
vipPlans: vipOfferPlans, vipPlans: vipOfferPlans,
coinPlans: directCoinsPlans, coinPlans: directCoinsPlans,
}) !== null, }),
[ [
directCoinsPlans, directCoinsPlans,
payment.isFirstRecharge, payment.isFirstRecharge,
@@ -157,7 +149,6 @@ export function SubscriptionScreen({
(plan) => plan.id === payment.selectedPlanId, (plan) => plan.id === payment.selectedPlanId,
); );
const canActivate = const canActivate =
sourceCharacter !== null &&
selectedPlan !== null && selectedPlan !== null &&
canCheckoutSubscriptionPlan({ canCheckoutSubscriptionPlan({
selectedPlanId: payment.selectedPlanId, selectedPlanId: payment.selectedPlanId,
@@ -241,7 +232,6 @@ export function SubscriptionScreen({
return ( return (
<MobileShell> <MobileShell>
<div className={styles.shell}> <div className={styles.shell}>
<div className={styles.scrollArea}>
<header className={styles.header}> <header className={styles.header}>
<BackButton <BackButton
className={styles.backSlot} className={styles.backSlot}
@@ -267,32 +257,38 @@ export function SubscriptionScreen({
</p> </p>
) : null} ) : null}
{chatActionId && sourceCharacter ? ( {firstRechargeOffer ? (
<section <section
className={styles.characterSupportBanner} className={styles.firstRechargeBanner}
aria-label={`Support ${sourceCharacter.displayName}`} aria-label="First recharge offer"
data-payment-guidance-character={sourceCharacter.id}
> >
<h2>Keep talking with {sourceCharacter.shortName}</h2> <span className={styles.firstRechargeBadge}>
<p> {firstRechargeOffer.badgeText}
Without the required VIP access or credits, paid chat and locked </span>
content cannot continue. Choosing an option here is a voluntary <div className={styles.firstRechargeCopy}>
way to support{" "} <h2 className={styles.firstRechargeTitle}>
{sourceCharacter.shortName}; it is never a test of your feelings. {firstRechargeOffer.title}
</h2>
<p className={styles.firstRechargeSubtitle}>
{firstRechargeOffer.subtitle}
</p> </p>
{firstRechargeOffer.renewalNotice ? (
<p className={styles.firstRechargeRenewalNotice}>
{firstRechargeOffer.renewalNotice}
</p>
) : null}
</div>
</section> </section>
) : null} ) : null}
{payment.commercialOffer && !hasFirstRechargeOffer && sourceCharacter ? ( {payment.commercialOffer && !firstRechargeOffer ? (
<section <section
className={styles.firstRechargeBanner} className={styles.firstRechargeBanner}
aria-label={`${sourceCharacter.shortName} private offer`} aria-label="Elio private offer"
> >
<span className={styles.firstRechargeBadge}>Private offer</span> <span className={styles.firstRechargeBadge}>Private offer</span>
<div className={styles.firstRechargeCopy}> <div className={styles.firstRechargeCopy}>
<h2 className={styles.firstRechargeTitle}> <h2 className={styles.firstRechargeTitle}>Elio got this price for you</h2>
{sourceCharacter.shortName} got this price for you
</h2>
<p className={styles.firstRechargeSubtitle}> <p className={styles.firstRechargeSubtitle}>
{payment.commercialOffer.message || {payment.commercialOffer.message ||
`Your ${payment.commercialOffer.discountPercent}% discount is already applied below.`} `Your ${payment.commercialOffer.discountPercent}% discount is already applied below.`}
@@ -317,27 +313,21 @@ export function SubscriptionScreen({
</div> </div>
<PaymentMethodSelector <PaymentMethodSelector
config={renderedPaymentMethodConfig} config={paymentMethodConfig}
value={payment.payChannel} value={payment.payChannel}
disabled={payment.isCreatingOrder} disabled={isPaymentBusy}
caption={ caption="GCash by default in the Philippines"
paymentMethodConfig.ezpayDisplayName === "QRIS"
? "QRIS by default in Indonesia"
: "GCash by default in the Philippines"
}
className={styles.paymentMethodSlot} className={styles.paymentMethodSlot}
analyticsKey="subscription.payment_method" analyticsKey="subscription.payment_method"
onChange={handlePaymentMethodChange} onChange={handlePaymentMethodChange}
/> />
</div>
<div className={styles.ctaSlot}> <div className={styles.ctaSlot}>
<SubscriptionCheckoutButton <SubscriptionCheckoutButton
disabled={!canActivate} disabled={!canActivate}
subscriptionType={subscriptionType} subscriptionType={subscriptionType}
returnTo={returnTo} returnTo={returnTo}
sourceCharacterSlug={sourceCharacter?.slug ?? DEFAULT_CHARACTER_SLUG} sourceCharacterSlug={sourceCharacterSlug}
countryCode={countryCode}
/> />
</div> </div>
@@ -362,7 +352,7 @@ export function SubscriptionScreen({
orderId={payment.currentOrderId} orderId={payment.currentOrderId}
payChannel={payment.payChannel} payChannel={payment.payChannel}
countryCode={countryCode} countryCode={countryCode}
characterId={sourceCharacter?.id ?? ""} characterId={sourceCharacterSlug}
onClose={() => setShowPaymentIssueDialog(false)} onClose={() => setShowPaymentIssueDialog(false)}
onSubmitted={setPaymentIssueNotice} onSubmitted={setPaymentIssueNotice}
/> />
@@ -5,10 +5,7 @@ import { useRouter } from "next/navigation";
import { usePaymentRouteFlow } from "@/app/_hooks/use-payment-route-flow"; import { usePaymentRouteFlow } from "@/app/_hooks/use-payment-route-flow";
import type { PayChannel } from "@/data/schemas/payment"; import type { PayChannel } from "@/data/schemas/payment";
import { import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
DEFAULT_CHARACTER,
getCharacterBySlug,
} from "@/data/constants/character";
import { import {
consumeSubscriptionExitUrl, consumeSubscriptionExitUrl,
resolveSubscriptionSuccessExitUrl, resolveSubscriptionSuccessExitUrl,
@@ -22,7 +19,7 @@ export interface UseSubscriptionPaymentFlowInput {
shouldResumePendingOrder: boolean; shouldResumePendingOrder: boolean;
returnTo: SubscriptionReturnTo; returnTo: SubscriptionReturnTo;
initialPayChannel: PayChannel; initialPayChannel: PayChannel;
sourceCharacterSlug?: string | null; sourceCharacterSlug?: string;
initialPlanId?: string | null; initialPlanId?: string | null;
commercialOfferId?: string | null; commercialOfferId?: string | null;
resumeOrderId?: string | null; resumeOrderId?: string | null;
@@ -34,20 +31,17 @@ export function useSubscriptionPaymentFlow({
shouldResumePendingOrder, shouldResumePendingOrder,
returnTo, returnTo,
initialPayChannel, initialPayChannel,
sourceCharacterSlug = null, sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
initialPlanId = null, initialPlanId = null,
commercialOfferId = null, commercialOfferId = null,
resumeOrderId = null, resumeOrderId = null,
chatActionId = null, chatActionId = null,
}: UseSubscriptionPaymentFlowInput) { }: UseSubscriptionPaymentFlowInput) {
const router = useRouter(); const router = useRouter();
const supportCharacter = getCharacterBySlug(sourceCharacterSlug);
const exitCharacterSlug = supportCharacter?.slug ?? DEFAULT_CHARACTER.slug;
const { payment, paymentDispatch } = usePaymentRouteFlow({ const { payment, paymentDispatch } = usePaymentRouteFlow({
initialPayChannel, initialPayChannel,
paymentType: subscriptionType, paymentType: subscriptionType,
shouldResumePendingOrder, shouldResumePendingOrder,
characterId: supportCharacter?.id,
initialPlanId, initialPlanId,
commercialOfferId, commercialOfferId,
resumeOrderId, resumeOrderId,
@@ -68,7 +62,7 @@ export function useSubscriptionPaymentFlow({
const handleBackClick = () => { const handleBackClick = () => {
void (async () => { void (async () => {
router.replace( router.replace(
await consumeSubscriptionExitUrl(returnTo, exitCharacterSlug), await consumeSubscriptionExitUrl(returnTo, sourceCharacterSlug),
); );
})(); })();
}; };
@@ -80,7 +74,7 @@ export function useSubscriptionPaymentFlow({
router.replace( router.replace(
await resolveSubscriptionSuccessExitUrl( await resolveSubscriptionSuccessExitUrl(
returnTo, returnTo,
exitCharacterSlug, sourceCharacterSlug,
), ),
); );
})(); })();
+1 -4
View File
@@ -19,7 +19,6 @@ export interface TipCheckoutButtonProps {
disabled?: boolean; disabled?: boolean;
onOrder: () => void; onOrder: () => void;
returnPath: string; returnPath: string;
countryCode?: string | null;
} }
export function TipCheckoutButton({ export function TipCheckoutButton({
@@ -28,7 +27,6 @@ export function TipCheckoutButton({
disabled = false, disabled = false,
onOrder, onOrder,
returnPath, returnPath,
countryCode = null,
}: TipCheckoutButtonProps) { }: TipCheckoutButtonProps) {
const character = useActiveCharacter(); const character = useActiveCharacter();
const payment = usePaymentState(); const payment = usePaymentState();
@@ -42,7 +40,6 @@ export function TipCheckoutButton({
giftCategory, giftCategory,
giftPlanId, giftPlanId,
characterSlug: character.slug, characterSlug: character.slug,
countryCode,
}); });
const isLoading = payment.isCreatingOrder || payment.isPollingOrder; const isLoading = payment.isCreatingOrder || payment.isPollingOrder;
@@ -74,7 +71,7 @@ export function TipCheckoutButton({
<PaymentLaunchDialogs <PaymentLaunchDialogs
currentOrderId={payment.currentOrderId} currentOrderId={payment.currentOrderId}
externalCheckoutAnalyticsKey="tip.external_checkout" externalCheckoutAnalyticsKey="tip.external_checkout"
ezpayDescription="Your gift order is ready. Continue to the secure payment page to finish." ezpayDescription="Your coffee order is ready. Continue to GCash to finish the payment."
launch={paymentLaunch} launch={paymentLaunch}
stripeReturnPath={returnPath} stripeReturnPath={returnPath}
/> />
+3 -9
View File
@@ -14,7 +14,6 @@ import {
type PaymentAnalyticsContext, type PaymentAnalyticsContext,
} from "@/lib/analytics"; } from "@/lib/analytics";
import { getPaymentMethodConfig } from "@/lib/payment/payment_method"; import { getPaymentMethodConfig } from "@/lib/payment/payment_method";
import { useHasHydrated } from "@/hooks/use-has-hydrated";
import { buildTipGiftPath } from "@/lib/tip/tip_gift"; import { buildTipGiftPath } from "@/lib/tip/tip_gift";
import { import {
useActiveCharacter, useActiveCharacter,
@@ -53,15 +52,11 @@ export function TipScreen({
const character = useActiveCharacter(); const character = useActiveCharacter();
const characterRoutes = useActiveCharacterRoutes(); const characterRoutes = useActiveCharacterRoutes();
const userState = useUserState(); const userState = useUserState();
const hasHydrated = useHasHydrated(); const supportPrompt = useTipSupportPrompt();
const supportPrompt = useTipSupportPrompt(character.displayName);
const paymentMethodConfig = getPaymentMethodConfig({ const paymentMethodConfig = getPaymentMethodConfig({
countryCode: userState.currentUser?.countryCode, countryCode: userState.currentUser?.countryCode,
requestedPayChannel: initialPayChannel, requestedPayChannel: initialPayChannel,
}); });
const renderedPaymentMethodConfig = hasHydrated
? paymentMethodConfig
: { ...paymentMethodConfig, showPaymentMethodSelector: false };
const { payment, paymentDispatch } = usePaymentRouteFlow({ const { payment, paymentDispatch } = usePaymentRouteFlow({
catalog: "tip", catalog: "tip",
characterId: character.id, characterId: character.id,
@@ -289,10 +284,10 @@ export function TipScreen({
</section> </section>
<PaymentMethodSelector <PaymentMethodSelector
config={renderedPaymentMethodConfig} config={paymentMethodConfig}
value={payment.payChannel} value={payment.payChannel}
density="compact" density="compact"
disabled={payment.isCreatingOrder} disabled={isPaymentBusy}
className={styles.paymentMethodSlot} className={styles.paymentMethodSlot}
analyticsKey="tip.payment_method" analyticsKey="tip.payment_method"
onChange={handlePaymentMethodChange} onChange={handlePaymentMethodChange}
@@ -305,7 +300,6 @@ export function TipScreen({
disabled={!canCreateOrder} disabled={!canCreateOrder}
onOrder={handleOrder} onOrder={handleOrder}
returnPath={returnPath} returnPath={returnPath}
countryCode={userState.currentUser?.countryCode}
/> />
</div> </div>
</> </>
+4 -12
View File
@@ -15,30 +15,22 @@ export interface TipSupportPromptState {
readonly isReady: boolean; readonly isReady: boolean;
} }
export function useTipSupportPrompt( export function useTipSupportPrompt(): TipSupportPromptState {
characterName = "this character",
): TipSupportPromptState {
const [selection, setSelection] = const [selection, setSelection] =
useState<ReturnType<typeof selectTipSupportPrompt> | null>(null); useState<ReturnType<typeof selectTipSupportPrompt> | null>(null);
useEffect(() => { useEffect(() => {
const frameId = requestAnimationFrame(() => { const frameId = requestAnimationFrame(() => {
const nextSelection = selectTipSupportPrompt( const nextSelection = selectTipSupportPrompt(readPreviousIndex());
readPreviousIndex(),
Math.random,
characterName,
);
writePreviousIndex(nextSelection.index); writePreviousIndex(nextSelection.index);
setSelection(nextSelection); setSelection(nextSelection);
}); });
return () => cancelAnimationFrame(frameId); return () => cancelAnimationFrame(frameId);
}, [characterName]); }, []);
return { return {
prompt: prompt: selection?.prompt ?? TIP_SUPPORT_PROMPTS[0],
selection?.prompt ??
TIP_SUPPORT_PROMPTS[0].replaceAll("this character", characterName),
isReady: selection !== null, isReady: selection !== null,
}; };
} }
@@ -1,75 +0,0 @@
import { describe, expect, it, vi } from "vitest";
import { ChatWebSocket } from "../chat-websocket";
describe("ChatWebSocket payment guidance", () => {
it("parses the same role-bound decision emitted by HTTP", () => {
const socket = new ChatWebSocket("ws://example.test/chat", "token");
const onPaymentGuidance = vi.fn();
socket.onPaymentGuidance = onPaymentGuidance;
receive(socket, {
type: "payment_guidance",
data: {
guidanceId: "019c8f8d-17d3-7a42-b1cc-b6927b1927d5",
characterId: "maya-tan",
characterName: "Maya Tan",
scene: "voiceLocked",
mode: "guide",
title: "Keep talking with Maya",
copy: "Hey love, I want to keep talking with you.",
ctaLabel: "View VIP & credit options",
purchaseOptions: ["vip", "topup"],
target: "subscription",
ruleId: "payment_guidance_voiceLocked",
},
});
expect(onPaymentGuidance).toHaveBeenCalledWith(
expect.objectContaining({
characterId: "maya-tan",
scene: "voiceLocked",
}),
);
});
it("ignores malformed guidance instead of rendering the wrong role", () => {
const socket = new ChatWebSocket("ws://example.test/chat", "token");
const onPaymentGuidance = vi.fn();
socket.onPaymentGuidance = onPaymentGuidance;
receive(socket, {
type: "payment_guidance",
data: { characterId: "elio" },
});
expect(onPaymentGuidance).not.toHaveBeenCalled();
});
it("delivers a persisted commercial thank-you as a live role message", () => {
const socket = new ChatWebSocket("ws://example.test/chat", "token");
const onCommercialMessage = vi.fn();
socket.onCommercialMessage = onCommercialMessage;
receive(socket, {
type: "commercial_message",
messageId: "message-1",
message: "Thank you for supporting me.",
characterId: "maya-tan",
createdAt: "2026-07-28T00:00:00.000Z",
});
expect(onCommercialMessage).toHaveBeenCalledWith({
messageId: "message-1",
message: "Thank you for supporting me.",
characterId: "maya-tan",
createdAt: "2026-07-28T00:00:00.000Z",
});
});
});
function receive(socket: ChatWebSocket, payload: unknown): void {
(
socket as unknown as { handleMessage: (data: string) => void }
).handleMessage(JSON.stringify(payload));
}
+1 -44
View File
@@ -15,10 +15,8 @@ import { Logger } from "@/utils/logger";
import { import {
CommercialActionSchema, CommercialActionSchema,
ChatActionSchema, ChatActionSchema,
PaymentGuidanceSchema,
type ChatAction, type ChatAction,
type CommercialAction, type CommercialAction,
type PaymentGuidance,
} from "@/data/schemas/chat"; } from "@/data/schemas/chat";
import { createClientMessageId } from "@/lib/chat/client_message_id"; import { createClientMessageId } from "@/lib/chat/client_message_id";
@@ -37,13 +35,6 @@ export interface PaywallStatusPayload {
reason: string | null; reason: string | null;
} }
export interface CommercialMessagePayload {
messageId: string;
message: string;
characterId: string;
createdAt: string;
}
export class ChatWebSocket { export class ChatWebSocket {
private ws: WebSocket | null = null; private ws: WebSocket | null = null;
private reconnectTimer: ReturnType<typeof setTimeout> | null = null; private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
@@ -58,8 +49,6 @@ export class ChatWebSocket {
onPaywallStatus: ((payload: PaywallStatusPayload) => void) | null = null; onPaywallStatus: ((payload: PaywallStatusPayload) => void) | null = null;
onCommercialAction: ((action: CommercialAction) => void) | null = null; onCommercialAction: ((action: CommercialAction) => void) | null = null;
onChatAction: ((action: ChatAction) => void) | null = null; onChatAction: ((action: ChatAction) => void) | null = null;
onPaymentGuidance: ((guidance: PaymentGuidance) => void) | null = null;
onCommercialMessage: ((message: CommercialMessagePayload) => void) | null = null;
onError: ((errorMessage: string) => void) | null = null; onError: ((errorMessage: string) => void) | null = null;
constructor( constructor(
@@ -157,11 +146,7 @@ export class ChatWebSocket {
done?: boolean; done?: boolean;
audioUrl?: string; audioUrl?: string;
error?: string; error?: string;
messageId?: string; data?: {
message?: string;
characterId?: string;
createdAt?: string;
data?: Record<string, unknown> & {
image?: { image?: {
type?: string | null; type?: string | null;
url?: string | null; url?: string | null;
@@ -175,10 +160,6 @@ export class ChatWebSocket {
ruleId?: string; ruleId?: string;
kind?: string; kind?: string;
orderId?: string | null; orderId?: string | null;
messageId?: string;
message?: string;
characterId?: string;
createdAt?: string;
}; };
}; };
try { try {
@@ -228,30 +209,6 @@ export class ChatWebSocket {
if (action.success) this.onChatAction?.(action.data); if (action.success) this.onChatAction?.(action.data);
break; break;
} }
case "payment_guidance": {
const guidance = PaymentGuidanceSchema.safeParse(payload.data);
if (guidance.success) this.onPaymentGuidance?.(guidance.data);
break;
}
case "commercial_message": {
const commercialMessage = payload.data?.messageId
? payload.data
: payload;
if (
commercialMessage?.messageId &&
commercialMessage.message &&
commercialMessage.characterId &&
commercialMessage.createdAt
) {
this.onCommercialMessage?.({
messageId: commercialMessage.messageId,
message: commercialMessage.message,
characterId: commercialMessage.characterId,
createdAt: commercialMessage.createdAt,
});
}
break;
}
case "error": case "error":
this.onError?.(payload.error ?? "Unknown error"); this.onError?.(payload.error ?? "Unknown error");
break; break;
@@ -3,6 +3,8 @@ import { describe, expect, it, vi } from "vitest";
import { AuthRepository } from "@/data/repositories/auth_repository"; import { AuthRepository } from "@/data/repositories/auth_repository";
import { import {
FacebookIdentityResponseSchema, FacebookIdentityResponseSchema,
FacebookPsidLoginResponseSchema,
LoginStatus,
} from "@/data/schemas/auth"; } from "@/data/schemas/auth";
import type { AuthApi } from "@/data/services/api"; import type { AuthApi } from "@/data/services/api";
import type { IAuthStorage } from "@/data/storage/auth"; import type { IAuthStorage } from "@/data/storage/auth";
@@ -52,4 +54,85 @@ describe("AuthRepository facebook identity", () => {
expect(storage.setAsid).toHaveBeenCalledWith("asid-1"); expect(storage.setAsid).toHaveBeenCalledWith("asid-1");
expect(storage.setPsid).toHaveBeenCalledWith("psid-1"); expect(storage.setPsid).toHaveBeenCalledWith("psid-1");
}); });
it("saves real login data from complete psid login responses", async () => {
const facebookPsidLogin = vi.fn(async () =>
FacebookPsidLoginResponseSchema.parse({
token: "login-token",
refreshToken: "refresh-token",
matchedBy: "psid",
fbAsid: "asid-1",
fbPsid: "psid-1",
hasCompleteFacebookIdentity: true,
isGuest: false,
user: { id: "user-1", username: "Elio" },
}),
);
const { repository, storage, userStorage } = createRepository({
facebookPsidLogin,
});
const result = await repository.facebookPsidLogin({
psid: "psid-1",
deviceId: "device-1",
});
expect(result).toEqual(Result.ok(LoginStatus.Facebook));
expect(storage.setLoginToken).toHaveBeenCalledWith("login-token");
expect(storage.setRefreshToken).toHaveBeenCalledWith("refresh-token");
expect(storage.setLoginProvider).toHaveBeenCalledWith(LoginStatus.Facebook);
expect(userStorage.setUserId).toHaveBeenCalledWith("user-1");
expect(storage.setAsid).toHaveBeenCalledWith("asid-1");
expect(storage.setPsid).toHaveBeenCalledWith("psid-1");
});
it("saves guest data from incomplete psid login responses", async () => {
const facebookPsidLogin = vi.fn(async () =>
FacebookPsidLoginResponseSchema.parse({
token: "guest-token",
matchedBy: "psid_incomplete",
fbPsid: "psid-1",
hasCompleteFacebookIdentity: false,
isGuest: true,
userId: "guest-1",
}),
);
const { repository, storage, userStorage } = createRepository({
facebookPsidLogin,
});
const result = await repository.facebookPsidLogin({
psid: "psid-1",
deviceId: "device-1",
});
expect(result).toEqual(Result.ok(LoginStatus.Guest));
expect(storage.setGuestToken).toHaveBeenCalledWith("guest-token");
expect(storage.setLoginProvider).toHaveBeenCalledWith(LoginStatus.Guest);
expect(storage.setDeviceId).toHaveBeenCalledWith("device-1");
expect(userStorage.setUserId).toHaveBeenCalledWith("guest-1");
});
it("does not report guest psid login success when session persistence fails", async () => {
const storageError = new Error("guest token write failed");
const facebookPsidLogin = vi.fn(async () =>
FacebookPsidLoginResponseSchema.parse({
token: "guest-token",
matchedBy: "psid_incomplete",
fbPsid: "psid-1",
hasCompleteFacebookIdentity: false,
isGuest: true,
userId: "guest-1",
}),
);
const { repository, storage } = createRepository({ facebookPsidLogin });
vi.mocked(storage.setGuestToken).mockResolvedValueOnce(
Result.err(storageError),
);
const result = await repository.facebookPsidLogin({ psid: "psid-1" });
expect(Result.isErr(result)).toBe(true);
expect(storage.setLoginProvider).not.toHaveBeenCalled();
});
}); });
@@ -239,27 +239,4 @@ describe("AuthRepository session Result handling", () => {
expect(result).toEqual(Result.ok(loginResponse.user)); expect(result).toEqual(Result.ok(loginResponse.user));
}); });
it("persists a top-up handoff as a formal Messenger session", async () => {
const handoffResponse = {
...loginResponse,
loginStatus: LoginStatus.FacebookMessenger,
merged: false,
} as const;
const { repository, storage, userStorage } = createRepository({
api: {
consumeTopUpHandoff: vi.fn(async () => handoffResponse),
},
});
const result = await repository.consumeTopUpHandoff("x".repeat(32));
expect(result).toEqual(Result.ok(LoginStatus.FacebookMessenger));
expect(storage.setLoginToken).toHaveBeenCalledWith("login-token");
expect(storage.setRefreshToken).toHaveBeenCalledWith("refresh-token");
expect(userStorage.setUserId).toHaveBeenCalledWith("user-1");
expect(storage.setLoginProvider).toHaveBeenCalledWith(
LoginStatus.FacebookMessenger,
);
});
}); });
+48 -9
View File
@@ -3,17 +3,18 @@ import type { IAuthRepository } from "@/data/repositories/interfaces";
import { import {
FacebookIdentityRequestSchema, FacebookIdentityRequestSchema,
FacebookLoginRequestSchema, FacebookLoginRequestSchema,
FacebookPsidLoginRequestSchema,
FbIdLoginRequestSchema, FbIdLoginRequestSchema,
GoogleLoginRequestSchema, GoogleLoginRequestSchema,
GuestLoginRequestSchema, GuestLoginRequestSchema,
GuestLoginResponse, GuestLoginResponse,
LoginRequestSchema, LoginRequestSchema,
LoginResponse, LoginResponse,
LoginResponseSchema,
LoginStatus, LoginStatus,
RefreshTokenRequestSchema, RefreshTokenRequestSchema,
RefreshTokenResponse, RefreshTokenResponse,
RegisterRequestSchema, RegisterRequestSchema,
TopUpHandoffRequestSchema,
type LoginStatus as LoginStatusT, type LoginStatus as LoginStatusT,
} from "@/data/schemas/auth"; } from "@/data/schemas/auth";
import { User } from "@/data/schemas/user"; import { User } from "@/data/schemas/user";
@@ -263,16 +264,54 @@ export class AuthRepository implements IAuthRepository {
}); });
} }
/** 消费一次性充值凭证并按后端返回的 canonical 账号建立正式会话。 */ /** 通过 Facebook PSID 直接登录或返回游客态。 */
async consumeTopUpHandoff( async facebookPsidLogin(input: {
handoffToken: string, psid: string;
): Promise<Result<LoginStatusT>> { deviceId?: string;
bindToGuest?: boolean;
}): Promise<Result<LoginStatusT>> {
return Result.wrap(async () => { return Result.wrap(async () => {
const response = await this.api.consumeTopUpHandoff( const response = await this.api.facebookPsidLogin(
TopUpHandoffRequestSchema.parse({ handoffToken }), FacebookPsidLoginRequestSchema.parse({
psid: input.psid,
deviceId: input.deviceId ?? "",
bindToGuest: input.bindToGuest ?? true,
}),
); );
await this._saveLoginData(response, response.loginStatus); const data = response;
return response.loginStatus; await this._saveFacebookIdentity({
asid: data.fbAsid,
psid: data.fbPsid,
});
if (data.isGuest || !data.hasCompleteFacebookIdentity) {
const tokenResult = await this.storage.setGuestToken(data.token);
if (Result.isErr(tokenResult)) throw tokenResult.error;
if (input.deviceId) {
const deviceResult = await this.storage.setDeviceId(input.deviceId);
if (Result.isErr(deviceResult)) throw deviceResult.error;
}
const userId = data.userId || data.user?.id || "";
if (userId) {
const userIdResult = await this.userStorage.setUserId(userId);
if (Result.isErr(userIdResult)) throw userIdResult.error;
}
const providerResult = await this.storage.setLoginProvider(
LoginStatus.Guest,
);
if (Result.isErr(providerResult)) throw providerResult.error;
return LoginStatus.Guest;
}
await this._saveLoginData(
LoginResponseSchema.parse({
token: data.token,
refreshToken: data.refreshToken,
user: data.user ?? { id: data.userId },
}),
LoginStatus.Facebook,
);
return LoginStatus.Facebook;
}); });
} }
@@ -71,8 +71,12 @@ export interface IAuthRepository {
psid?: string; psid?: string;
}): Promise<Result<void>>; }): Promise<Result<void>>;
/** 消费一次性充值登录凭证并建立正式会话。 */ /** 通过 Facebook PSID 直接登录或返回游客态。 */
consumeTopUpHandoff(handoffToken: string): Promise<Result<LoginStatus>>; facebookPsidLogin(input: {
psid: string;
deviceId?: string;
bindToGuest?: boolean;
}): Promise<Result<LoginStatus>>;
/** 刷新 token:先读本地的 refresh token,空则返回错误。 */ /** 刷新 token:先读本地的 refresh token,空则返回错误。 */
refreshToken(): Promise<Result<RefreshTokenResponse>>; refreshToken(): Promise<Result<RefreshTokenResponse>>;
@@ -13,10 +13,7 @@ import type { Result } from "@/utils/result";
export interface IPaymentRepository { export interface IPaymentRepository {
/** 获取套餐列表。 */ /** 获取套餐列表。 */
getPlans( getPlans(commercialOfferId?: string): Promise<Result<PaymentPlansResponse>>;
commercialOfferId?: string,
supportCharacterId?: string,
): Promise<Result<PaymentPlansResponse>>;
/** 获取本地缓存套餐列表。 */ /** 获取本地缓存套餐列表。 */
getCachedPlans(): Promise<Result<PaymentPlansResponse | null>>; getCachedPlans(): Promise<Result<PaymentPlansResponse | null>>;
+3 -11
View File
@@ -24,18 +24,10 @@ export class PaymentRepository implements IPaymentRepository {
constructor(private readonly api: PaymentApi) {} constructor(private readonly api: PaymentApi) {}
/** 获取套餐列表。 */ /** 获取套餐列表。 */
async getPlans( async getPlans(commercialOfferId?: string): Promise<Result<PaymentPlansResponse>> {
commercialOfferId?: string,
supportCharacterId?: string,
): Promise<Result<PaymentPlansResponse>> {
return Result.wrap(async () => { return Result.wrap(async () => {
const response = await this.api.getPlans( const response = await this.api.getPlans(commercialOfferId);
commercialOfferId, if (!commercialOfferId) await PaymentPlansStorage.setPlans(response);
supportCharacterId,
);
if (!commercialOfferId && !supportCharacterId) {
await PaymentPlansStorage.setPlans(response);
}
return response; return response;
}); });
} }
@@ -2,8 +2,8 @@ import { describe, expect, it } from "vitest";
import { import {
FacebookIdentityResponseSchema, FacebookIdentityResponseSchema,
FacebookPsidLoginResponseSchema,
LoginRequestSchema, LoginRequestSchema,
TopUpHandoffResponseSchema,
} from "@/data/schemas/auth"; } from "@/data/schemas/auth";
import { UserSchema } from "@/data/schemas/user/user"; import { UserSchema } from "@/data/schemas/user/user";
@@ -28,6 +28,41 @@ describe("facebook identity schema models", () => {
}); });
}); });
it("parses facebook psid login responses for real users and guests", () => {
expect(
FacebookPsidLoginResponseSchema.parse({
token: "login-token",
refreshToken: "refresh-token",
matchedBy: "psid",
fbAsid: "asid-1",
fbPsid: "psid-1",
hasCompleteFacebookIdentity: true,
isGuest: false,
user: { id: "user-1", username: "Elio" },
}),
).toMatchObject({
isGuest: false,
hasCompleteFacebookIdentity: true,
user: { id: "user-1" },
});
expect(
FacebookPsidLoginResponseSchema.parse({
token: "guest-token",
matchedBy: "guest",
fbPsid: "psid-1",
hasCompleteFacebookIdentity: false,
isGuest: true,
userId: "guest-1",
}),
).toMatchObject({
refreshToken: "",
isGuest: true,
userId: "guest-1",
user: null,
});
});
it("keeps psid in request serialization without a public field declaration", () => { it("keeps psid in request serialization without a public field declaration", () => {
const request = LoginRequestSchema.parse({ const request = LoginRequestSchema.parse({
email: "user@example.com", email: "user@example.com",
@@ -40,21 +75,6 @@ describe("facebook identity schema models", () => {
expect(request).toMatchObject({ psid: "psid-1" }); expect(request).toMatchObject({ psid: "psid-1" });
}); });
it("parses a formal Messenger top-up handoff session", () => {
expect(
TopUpHandoffResponseSchema.parse({
token: "login-token",
refreshToken: "refresh-token",
loginStatus: "facebookMessenger",
merged: false,
user: { id: "user-1", username: "Messenger User" },
}),
).toMatchObject({
loginStatus: "facebookMessenger",
user: { id: "user-1" },
});
});
it("accepts facebook identity fields in user schema", () => { it("accepts facebook identity fields in user schema", () => {
expect( expect(
UserSchema.parse({ UserSchema.parse({
+2 -2
View File
@@ -6,16 +6,16 @@ export * from "./facebook_user_data";
export * from "./login_status"; export * from "./login_status";
export * from "./request/facebook_identity_request"; export * from "./request/facebook_identity_request";
export * from "./request/facebook_login_request"; export * from "./request/facebook_login_request";
export * from "./request/facebook_psid_login_request";
export * from "./request/fb_id_login_request"; export * from "./request/fb_id_login_request";
export * from "./request/google_login_request"; export * from "./request/google_login_request";
export * from "./request/guest_login_request"; export * from "./request/guest_login_request";
export * from "./request/login_request"; export * from "./request/login_request";
export * from "./request/refresh_token_request"; export * from "./request/refresh_token_request";
export * from "./request/register_request"; export * from "./request/register_request";
export * from "./request/top_up_handoff_request";
export * from "./response/facebook_identity_response"; export * from "./response/facebook_identity_response";
export * from "./response/facebook_psid_login_response";
export * from "./response/guest_login_response"; export * from "./response/guest_login_response";
export * from "./response/login_response"; export * from "./response/login_response";
export * from "./response/logout_response"; export * from "./response/logout_response";
export * from "./response/refresh_token_response"; export * from "./response/refresh_token_response";
export * from "./response/top_up_handoff_response";
-1
View File
@@ -3,7 +3,6 @@ export const LoginStatus = {
NotLoggedIn: "notLoggedIn", NotLoggedIn: "notLoggedIn",
Guest: "guest", Guest: "guest",
Facebook: "facebook", Facebook: "facebook",
FacebookMessenger: "facebookMessenger",
Google: "google", Google: "google",
Email: "email", Email: "email",
} as const; } as const;
@@ -0,0 +1,22 @@
/**
* Facebook PSID 登录请求
*/
import { z } from "zod";
import { booleanOrTrue, stringOrEmpty } from "../../nullable-defaults";
export const FacebookPsidLoginRequestSchema = z
.object({
psid: z.string(),
deviceId: stringOrEmpty,
bindToGuest: booleanOrTrue,
})
.readonly();
export type FacebookPsidLoginRequestInput = z.input<
typeof FacebookPsidLoginRequestSchema
>;
export type FacebookPsidLoginRequestData = z.output<
typeof FacebookPsidLoginRequestSchema
>;
export type FacebookPsidLoginRequest = FacebookPsidLoginRequestData;
+1 -1
View File
@@ -4,10 +4,10 @@
export * from "./facebook_identity_request"; export * from "./facebook_identity_request";
export * from "./facebook_login_request"; export * from "./facebook_login_request";
export * from "./facebook_psid_login_request";
export * from "./fb_id_login_request"; export * from "./fb_id_login_request";
export * from "./google_login_request"; export * from "./google_login_request";
export * from "./guest_login_request"; export * from "./guest_login_request";
export * from "./login_request"; export * from "./login_request";
export * from "./refresh_token_request"; export * from "./refresh_token_request";
export * from "./register_request"; export * from "./register_request";
export * from "./top_up_handoff_request";
@@ -1,11 +0,0 @@
import { z } from "zod";
export const TopUpHandoffRequestSchema = z
.object({
handoffToken: z.string().min(32).max(512),
})
.readonly();
export type TopUpHandoffRequest = z.output<
typeof TopUpHandoffRequestSchema
>;
@@ -0,0 +1,34 @@
/**
* Facebook PSID 登录响应
*/
import { z } from "zod";
import {
booleanOrFalse,
schemaOrNull,
stringOrEmpty,
} from "../../nullable-defaults";
import { UserSchema } from "../../user/user";
export const FacebookPsidLoginResponseSchema = z
.object({
token: z.string(),
refreshToken: stringOrEmpty,
matchedBy: stringOrEmpty,
fbAsid: stringOrEmpty,
fbPsid: stringOrEmpty,
hasCompleteFacebookIdentity: booleanOrFalse,
isGuest: booleanOrFalse,
user: schemaOrNull(UserSchema),
userId: stringOrEmpty,
})
.readonly();
export type FacebookPsidLoginResponseInput = z.input<
typeof FacebookPsidLoginResponseSchema
>;
export type FacebookPsidLoginResponseData = z.output<
typeof FacebookPsidLoginResponseSchema
>;
export type FacebookPsidLoginResponse = FacebookPsidLoginResponseData;
+1 -1
View File
@@ -3,8 +3,8 @@
*/ */
export * from "./facebook_identity_response"; export * from "./facebook_identity_response";
export * from "./facebook_psid_login_response";
export * from "./guest_login_response"; export * from "./guest_login_response";
export * from "./login_response"; export * from "./login_response";
export * from "./logout_response"; export * from "./logout_response";
export * from "./refresh_token_response"; export * from "./refresh_token_response";
export * from "./top_up_handoff_response";
@@ -1,23 +0,0 @@
import { z } from "zod";
import { stringOrEmpty } from "../../nullable-defaults";
import { UserSchema } from "../../user/user";
export const TopUpHandoffResponseSchema = z
.object({
user: UserSchema,
token: z.string(),
refreshToken: stringOrEmpty,
loginStatus: z.enum([
"email",
"google",
"facebook",
"facebookMessenger",
]),
merged: z.boolean().default(false),
})
.readonly();
export type TopUpHandoffResponse = z.output<
typeof TopUpHandoffResponseSchema
>;
@@ -1,90 +0,0 @@
import { describe, expect, it } from "vitest";
import {
ChatLockDetailSchema,
ChatSendResponseSchema,
PaymentGuidanceSchema,
UnlockHistoryResponseSchema,
UnlockPrivateResponseSchema,
} from "@/data/schemas/chat";
const guidance = {
guidanceId: "guidance-1",
characterId: "maya-tan",
characterName: "Maya Tan",
scene: "voiceLocked",
mode: "guide",
title: "Keep talking with Maya",
copy: "Hey love, I want to keep talking. This voice message needs 20 credits.",
ctaLabel: "View VIP & credit options",
purchaseOptions: ["vip", "topup"],
target: "subscription",
ruleId: "payment_guidance_voiceLocked",
} as const;
describe("payment guidance wire contract", () => {
it("parses the public decision without changing role identity", () => {
expect(PaymentGuidanceSchema.parse(guidance)).toEqual(guidance);
});
it("accepts the supportCharacter guidance scene", () => {
expect(
PaymentGuidanceSchema.parse({
...guidance,
scene: "supportCharacter",
ruleId: "payment_guidance_supportCharacter",
}).scene,
).toBe("supportCharacter");
});
it("keeps all backend lock facts instead of dropping hint and CTA", () => {
expect(
ChatLockDetailSchema.parse({
locked: true,
showContent: false,
showUpgrade: true,
reason: "voice_message",
hint: "This voice message needs 20 credits.",
actionLabel: "Unlock",
detail: { requiredCredits: 20 },
}),
).toEqual({
locked: true,
showContent: false,
showUpgrade: true,
reason: "voice_message",
hint: "This voice message needs 20 credits.",
actionLabel: "Unlock",
detail: { requiredCredits: 20 },
});
});
it("keeps backward compatibility when guidance is absent", () => {
const parsed = ChatSendResponseSchema.parse({ reply: "Hello" });
expect(parsed.paymentGuidance).toBeNull();
});
it("parses guidance on chat and both unlock responses", () => {
expect(
ChatSendResponseSchema.parse({
reply: "",
canSendMessage: false,
paymentGuidance: guidance,
}).paymentGuidance,
).toEqual(guidance);
expect(
UnlockPrivateResponseSchema.parse({
unlocked: false,
reason: "insufficient_credits",
paymentGuidance: guidance,
}).paymentGuidance,
).toEqual(guidance);
expect(
UnlockHistoryResponseSchema.parse({
unlocked: false,
reason: "insufficient_balance",
paymentGuidance: { ...guidance, scene: "historyLocked" },
}).paymentGuidance?.scene,
).toBe("historyLocked");
});
});
+1 -10
View File
@@ -3,11 +3,7 @@
*/ */
import { z } from "zod"; import { z } from "zod";
import { import { booleanOrFalse, schemaOr, stringOrNull } from "../nullable-defaults";
booleanOrFalse,
schemaOr,
stringOrNull,
} from "../nullable-defaults";
const CHAT_IMAGE_DEFAULTS = { type: null, url: null } as const; const CHAT_IMAGE_DEFAULTS = { type: null, url: null } as const;
@@ -27,12 +23,7 @@ export const ChatImageSchema = schemaOr(
export const ChatLockDetailSchema = schemaOr( export const ChatLockDetailSchema = schemaOr(
z.object({ z.object({
locked: booleanOrFalse, locked: booleanOrFalse,
showContent: z.boolean().nullish(),
showUpgrade: z.boolean().nullish(),
reason: stringOrNull, reason: stringOrNull,
hint: z.string().nullish(),
actionLabel: z.string().nullish(),
detail: z.record(z.string(), z.unknown()).nullish(),
}), }),
CHAT_LOCK_DETAIL_DEFAULTS, CHAT_LOCK_DETAIL_DEFAULTS,
).readonly(); ).readonly();
@@ -13,42 +13,6 @@ import {
import { ChatImageSchema, ChatLockDetailSchema } from "../chat_payloads"; import { ChatImageSchema, ChatLockDetailSchema } from "../chat_payloads";
import { ChatActionSchema } from "../chat_action"; import { ChatActionSchema } from "../chat_action";
export const PaymentGuidanceSceneSchema = z.enum([
"vip",
"insufficientCredits",
"chatInterrupted",
"voiceLocked",
"imageLocked",
"privateMessageLocked",
"historyLocked",
"privateZoneLocked",
"unknownLock",
"whyPay",
"supportCharacter",
"leavingAfterCredits",
"paymentIssue",
"externalRisk",
"purchaseOptions",
]);
export const PaymentGuidanceSchema = z
.object({
guidanceId: z.string().min(1),
characterId: z.string().min(1),
characterName: z.string().min(1),
scene: PaymentGuidanceSceneSchema,
mode: z.enum(["guide", "careOnly", "issueSupport", "riskReminder"]),
title: z.string().nullable().default(null),
copy: z.string().min(1),
ctaLabel: z.string().nullable().default(null),
purchaseOptions: z.array(z.enum(["vip", "topup"])).readonly(),
target: z.enum(["subscription", "giftCatalog"]).nullable().default(null),
ruleId: z.string().min(1),
})
.readonly();
export type PaymentGuidance = z.output<typeof PaymentGuidanceSchema>;
export const CommercialActionSchema = z export const CommercialActionSchema = z
.object({ .object({
actionId: z.string().min(1), actionId: z.string().min(1),
@@ -78,7 +42,6 @@ export const ChatSendResponseSchema = z
requiredCredits: numberOrZero, requiredCredits: numberOrZero,
shortfallCredits: numberOrZero, shortfallCredits: numberOrZero,
commercialAction: CommercialActionSchema.nullish().default(null), commercialAction: CommercialActionSchema.nullish().default(null),
paymentGuidance: PaymentGuidanceSchema.nullish().default(null),
chatAction: ChatActionSchema.nullish().default(null), chatAction: ChatActionSchema.nullish().default(null),
}) })
.readonly(); .readonly();
@@ -9,7 +9,6 @@ import {
numberOrZero, numberOrZero,
recordOrEmpty, recordOrEmpty,
} from "../../nullable-defaults"; } from "../../nullable-defaults";
import { PaymentGuidanceSchema } from "./chat_send_response";
export const UnlockHistoryCostsByMessageSchema = recordOrEmpty(z.number()); export const UnlockHistoryCostsByMessageSchema = recordOrEmpty(z.number());
@@ -34,7 +33,6 @@ export const UnlockHistoryResponseSchema = z
shortfallCredits: numberOrZero, shortfallCredits: numberOrZero,
costsByMessage: UnlockHistoryCostsByMessageSchema, costsByMessage: UnlockHistoryCostsByMessageSchema,
messageIds: arrayOrEmpty(z.string()), messageIds: arrayOrEmpty(z.string()),
paymentGuidance: PaymentGuidanceSchema.nullish().default(null),
}) })
.readonly(); .readonly();
@@ -8,7 +8,6 @@ import {
} from "../../nullable-defaults"; } from "../../nullable-defaults";
import { ChatLockTypeSchema } from "../chat_lock_type"; import { ChatLockTypeSchema } from "../chat_lock_type";
import { ChatImageSchema } from "../chat_payloads"; import { ChatImageSchema } from "../chat_payloads";
import { PaymentGuidanceSchema } from "./chat_send_response";
/** /**
* 单条历史付费 / 私密消息解锁响应。 * 单条历史付费 / 私密消息解锁响应。
@@ -29,7 +28,6 @@ export const UnlockPrivateResponseSchema = z
creditsCharged: numberOrZero, creditsCharged: numberOrZero,
requiredCredits: numberOrZero, requiredCredits: numberOrZero,
shortfallCredits: numberOrZero, shortfallCredits: numberOrZero,
paymentGuidance: PaymentGuidanceSchema.nullish().default(null),
}) })
.readonly(); .readonly();
@@ -195,11 +195,9 @@ describe("PaymentPlansResponse", () => {
it("parses one user-bound commercial offer and its discounted plan", () => { it("parses one user-bound commercial offer and its discounted plan", () => {
const response = PaymentPlansResponseSchema.parse({ const response = PaymentPlansResponseSchema.parse({
supportCharacterId: "maya-tan",
commercialOffer: { commercialOffer: {
enabled: true, enabled: true,
commercialOfferId: "offer-1", commercialOfferId: "offer-1",
characterId: "maya-tan",
planId: "vip_annual", planId: "vip_annual",
discountPercent: 30, discountPercent: 30,
pricePercent: 70, pricePercent: 70,
@@ -227,8 +225,6 @@ describe("PaymentPlansResponse", () => {
}); });
expect(response.commercialOffer?.commercialOfferId).toBe("offer-1"); expect(response.commercialOffer?.commercialOfferId).toBe("offer-1");
expect(response.supportCharacterId).toBe("maya-tan");
expect(response.commercialOffer?.characterId).toBe("maya-tan");
expect(response.plans[0]).toMatchObject({ expect(response.plans[0]).toMatchObject({
planId: "vip_annual", planId: "vip_annual",
commercialOfferId: "offer-1", commercialOfferId: "offer-1",
@@ -24,7 +24,6 @@ export const CommercialOfferSummarySchema = z
.object({ .object({
enabled: booleanOrFalse, enabled: booleanOrFalse,
commercialOfferId: z.string().min(1), commercialOfferId: z.string().min(1),
characterId: stringOrEmpty,
planId: z.string().min(1), planId: z.string().min(1),
discountPercent: numberOrZero, discountPercent: numberOrZero,
pricePercent: numberOrZero, pricePercent: numberOrZero,
@@ -37,7 +36,6 @@ export const CommercialOfferSummarySchema = z
export const PaymentPlansResponseSchema = z export const PaymentPlansResponseSchema = z
.object({ .object({
isFirstRecharge: booleanOrFalse, isFirstRecharge: booleanOrFalse,
supportCharacterId: stringOrEmpty,
firstRechargeOffer: schemaOrNull(FirstRechargeOfferSchema), firstRechargeOffer: schemaOrNull(FirstRechargeOfferSchema),
commercialOffer: schemaOrNull(CommercialOfferSummarySchema), commercialOffer: schemaOrNull(CommercialOfferSummarySchema),
plans: arrayOrEmpty(PaymentPlanSchema), plans: arrayOrEmpty(PaymentPlanSchema),
@@ -39,28 +39,6 @@ const lockedAlbum = {
}; };
describe("Private Album schema models", () => { describe("Private Album schema models", () => {
it("keeps shared payment guidance on an insufficient-credit response", () => {
const response = PrivateAlbumUnlockResponseSchema.parse({
albumId: ALBUM_ID,
reason: "insufficient_credits",
paymentGuidance: {
guidanceId: "019c8f8d-17d3-7a42-b1cc-b6927b1927d5",
characterId: "elio",
characterName: "Elio Silvestri",
scene: "privateZoneLocked",
mode: "guide",
title: "Keep talking with Elio",
copy: "Baby, this album needs credits.",
ctaLabel: "View VIP & credit options",
purchaseOptions: ["vip", "topup"],
target: "subscription",
ruleId: "payment_guidance_privateZoneLocked",
},
});
expect(response.paymentGuidance?.characterId).toBe("elio");
});
it("keeps a locked album cover URL while preserving the lock state", () => { it("keeps a locked album cover URL while preserving the lock state", () => {
const response = PrivateAlbumsResponseSchema.parse({ const response = PrivateAlbumsResponseSchema.parse({
items: [lockedAlbum], items: [lockedAlbum],
@@ -10,7 +10,6 @@ import {
stringOrEmpty, stringOrEmpty,
stringOrNull, stringOrNull,
} from "../nullable-defaults"; } from "../nullable-defaults";
import { PaymentGuidanceSchema } from "../chat";
export const PrivateZoneVideoPostSchema = z export const PrivateZoneVideoPostSchema = z
.object({ .object({
@@ -64,7 +63,6 @@ export const PrivateZonePostUnlockResponseSchema = z
shortfallCredits: numberOrZero, shortfallCredits: numberOrZero,
creditBalance: numberOrZero, creditBalance: numberOrZero,
post: schemaOrNull(PrivateZoneVideoPostSchema), post: schemaOrNull(PrivateZoneVideoPostSchema),
paymentGuidance: PaymentGuidanceSchema.nullish(),
}) })
.readonly(); .readonly();
@@ -7,7 +7,6 @@ import {
stringOrEmpty, stringOrEmpty,
} from "../../nullable-defaults"; } from "../../nullable-defaults";
import { PrivateAlbumImageSchema } from "../private_album"; import { PrivateAlbumImageSchema } from "../private_album";
import { PaymentGuidanceSchema } from "../../chat";
export const PrivateAlbumUnlockReasonSchema = z.enum([ export const PrivateAlbumUnlockReasonSchema = z.enum([
"ok", "ok",
@@ -31,7 +30,6 @@ export const PrivateAlbumUnlockResponseSchema = z
creditBalance: numberOrZero, creditBalance: numberOrZero,
shortfallCredits: numberOrZero, shortfallCredits: numberOrZero,
images: arrayOrEmpty(PrivateAlbumImageSchema), images: arrayOrEmpty(PrivateAlbumImageSchema),
paymentGuidance: PaymentGuidanceSchema.nullish(),
}) })
.readonly(); .readonly();
+1 -1
View File
@@ -5,7 +5,7 @@
"googleLogin": { "method": "post", "path": "/api/auth/login/google" }, "googleLogin": { "method": "post", "path": "/api/auth/login/google" },
"facebookLogin": { "method": "post", "path": "/api/auth/login/facebook" }, "facebookLogin": { "method": "post", "path": "/api/auth/login/facebook" },
"facebookIdLogin": { "method": "post", "path": "/api/auth/login/facebook/by-id" }, "facebookIdLogin": { "method": "post", "path": "/api/auth/login/facebook/by-id" },
"topUpHandoffConsume": { "method": "post", "path": "/api/auth/handoff/topup/consume" }, "facebookPsidLogin": { "method": "post", "path": "/api/auth/login/facebook/psid" },
"refresh": { "method": "post", "path": "/api/auth/refresh" }, "refresh": { "method": "post", "path": "/api/auth/refresh" },
"logout": { "method": "post", "path": "/api/auth/logout" }, "logout": { "method": "post", "path": "/api/auth/logout" },
"getCurrentUser": { "method": "get", "path": "/api/auth/me" }, "getCurrentUser": { "method": "get", "path": "/api/auth/me" },
+2 -2
View File
@@ -27,8 +27,8 @@ export class ApiPath {
/** Facebook ID 登录(v7.0 新增) */ /** Facebook ID 登录(v7.0 新增) */
static readonly facebookIdLogin = apiContract.facebookIdLogin.path; static readonly facebookIdLogin = apiContract.facebookIdLogin.path;
/** 消费一次性充值登录凭证 */ /** Facebook PSID 登录 */
static readonly topUpHandoffConsume = apiContract.topUpHandoffConsume.path; static readonly facebookPsidLogin = apiContract.facebookPsidLogin.path;
/** 刷新 Token */ /** 刷新 Token */
static readonly refresh = apiContract.refresh.path; static readonly refresh = apiContract.refresh.path;
+11 -9
View File
@@ -11,6 +11,9 @@ import {
FacebookIdentityResponse, FacebookIdentityResponse,
FacebookIdentityResponseSchema, FacebookIdentityResponseSchema,
FacebookLoginRequest, FacebookLoginRequest,
FacebookPsidLoginRequest,
FacebookPsidLoginResponse,
FacebookPsidLoginResponseSchema,
FbIdLoginRequest, FbIdLoginRequest,
GoogleLoginRequest, GoogleLoginRequest,
GuestLoginRequest, GuestLoginRequest,
@@ -23,9 +26,6 @@ import {
RefreshTokenResponse, RefreshTokenResponse,
RefreshTokenResponseSchema, RefreshTokenResponseSchema,
RegisterRequest, RegisterRequest,
TopUpHandoffRequest,
TopUpHandoffResponse,
TopUpHandoffResponseSchema,
} from "@/data/schemas/auth"; } from "@/data/schemas/auth";
import { User, UserSchema } from "@/data/schemas/user"; import { User, UserSchema } from "@/data/schemas/user";
import type { UserData } from "@/data/schemas/user/user"; import type { UserData } from "@/data/schemas/user/user";
@@ -91,15 +91,17 @@ export class AuthApi {
return LoginResponseSchema.parse(unwrap(env) as Record<string, unknown>); return LoginResponseSchema.parse(unwrap(env) as Record<string, unknown>);
} }
/** 消费一次性充值登录凭证。当前正式登录 token 会由拦截器自动携带。 */ /**
async consumeTopUpHandoff( * Facebook PSID 登录
body: TopUpHandoffRequest, */
): Promise<TopUpHandoffResponse> { async facebookPsidLogin(
body: FacebookPsidLoginRequest,
): Promise<FacebookPsidLoginResponse> {
const env = await httpClient<ApiEnvelope<unknown>>( const env = await httpClient<ApiEnvelope<unknown>>(
ApiPath.topUpHandoffConsume, ApiPath.facebookPsidLogin,
{ method: "POST", body }, { method: "POST", body },
); );
return TopUpHandoffResponseSchema.parse( return FacebookPsidLoginResponseSchema.parse(
unwrap(env) as Record<string, unknown>, unwrap(env) as Record<string, unknown>,
); );
} }
+2 -12
View File
@@ -26,19 +26,9 @@ import { ApiEnvelope, unwrap } from "./response_helper";
export class PaymentApi { export class PaymentApi {
/** 获取 VIP 与 Top-up 套餐列表。 */ /** 获取 VIP 与 Top-up 套餐列表。 */
async getPlans( async getPlans(commercialOfferId?: string): Promise<PaymentPlansResponse> {
commercialOfferId?: string,
supportCharacterId?: string,
): Promise<PaymentPlansResponse> {
const env = await httpClient<ApiEnvelope<unknown>>(ApiPath.paymentPlans, { const env = await httpClient<ApiEnvelope<unknown>>(ApiPath.paymentPlans, {
...(commercialOfferId || supportCharacterId ...(commercialOfferId ? { query: { commercialOfferId } } : {}),
? {
query: {
...(commercialOfferId ? { commercialOfferId } : {}),
...(supportCharacterId ? { supportCharacterId } : {}),
},
}
: {}),
}); });
return PaymentPlansResponseSchema.parse( return PaymentPlansResponseSchema.parse(
unwrap(env) as Record<string, unknown>, unwrap(env) as Record<string, unknown>,
+2 -2
View File
@@ -18,6 +18,8 @@ export * from "../../core/net/interceptor/token_interceptor";
export * from "../schemas/auth/request/facebook_login_request"; export * from "../schemas/auth/request/facebook_login_request";
export * from "../schemas/auth/request/facebook_identity_request"; export * from "../schemas/auth/request/facebook_identity_request";
export * from "../schemas/auth/response/facebook_identity_response"; export * from "../schemas/auth/response/facebook_identity_response";
export * from "../schemas/auth/request/facebook_psid_login_request";
export * from "../schemas/auth/response/facebook_psid_login_response";
export * from "../schemas/auth/facebook_user_data"; export * from "../schemas/auth/facebook_user_data";
export * from "../schemas/auth/request/fb_id_login_request"; export * from "../schemas/auth/request/fb_id_login_request";
export * from "../schemas/auth/request/google_login_request"; export * from "../schemas/auth/request/google_login_request";
@@ -29,8 +31,6 @@ export * from "../schemas/auth/response/logout_response";
export * from "../schemas/auth/request/refresh_token_request"; export * from "../schemas/auth/request/refresh_token_request";
export * from "../schemas/auth/response/refresh_token_response"; export * from "../schemas/auth/response/refresh_token_response";
export * from "../schemas/auth/request/register_request"; export * from "../schemas/auth/request/register_request";
export * from "../schemas/auth/request/top_up_handoff_request";
export * from "../schemas/auth/response/top_up_handoff_response";
export * from "../schemas/chat/response/chat_history_response"; export * from "../schemas/chat/response/chat_history_response";
export * from "../schemas/chat/chat_message"; export * from "../schemas/chat/chat_message";
export * from "../schemas/chat/response/chat_send_response"; export * from "../schemas/chat/response/chat_send_response";
@@ -17,17 +17,6 @@ describe("payment analytics context", () => {
entryPoint: "chat_unlock", entryPoint: "chat_unlock",
triggerReason: "ad_landing", triggerReason: "ad_landing",
}); });
expect(
parsePaymentAnalyticsContext({
entryPoint: "chat_offer_banner",
triggerReason: "commercial_offer",
subscriptionType: "vip",
}),
).toEqual({
entryPoint: "chat_offer_banner",
triggerReason: "commercial_offer",
});
}); });
it("falls back independently for invalid query values", () => { it("falls back independently for invalid query values", () => {
@@ -7,7 +7,6 @@ export type PaymentAnalyticsTriggerReason =
| "insufficient_credits" | "insufficient_credits"
| "profile_recharge" | "profile_recharge"
| "vip_cta" | "vip_cta"
| "commercial_offer"
| "ad_landing" | "ad_landing"
| "manual_recharge" | "manual_recharge"
| "unknown"; | "unknown";
@@ -48,7 +47,6 @@ const TRIGGER_REASONS = new Set<PaymentAnalyticsTriggerReason>([
"insufficient_credits", "insufficient_credits",
"profile_recharge", "profile_recharge",
"vip_cta", "vip_cta",
"commercial_offer",
"ad_landing", "ad_landing",
"manual_recharge", "manual_recharge",
"unknown", "unknown",
-10
View File
@@ -1,10 +0,0 @@
import type { LoginStatus } from "@/data/schemas/auth";
import { getAuthRepository } from "@/data/repositories/auth_repository";
import type { Result } from "@/utils/result";
/** UI-independent use case for establishing a top-up handoff session. */
export function consumeTopUpHandoff(
handoffToken: string,
): Promise<Result<LoginStatus>> {
return getAuthRepository().consumeTopUpHandoff(handoffToken);
}
@@ -9,21 +9,6 @@ import {
shouldBindExternalFacebookIdentity, shouldBindExternalFacebookIdentity,
} from "../external_entry"; } from "../external_entry";
const facebookBusinessEntryCases = [
["private-space", "elio", "chat", null, null, getCharacterRoutes("elio").chat, null],
["private-space", "maya", "chat", null, null, getCharacterRoutes("maya").chat, null],
["private-space", "nayeli", "chat", null, null, getCharacterRoutes("nayeli").chat, null],
["voice", "elio", "chat", "promotion", "voice", getCharacterRoutes("elio").chat, "voice"],
["voice", "maya", "chat", "promotion", "voice", getCharacterRoutes("maya").chat, "voice"],
["voice", "nayeli", "chat", "promotion", "voice", getCharacterRoutes("nayeli").chat, "voice"],
["image-pack", "elio", "private-zone", null, null, getCharacterRoutes("elio").privateZone, null],
["image-pack", "maya", "private-zone", null, null, getCharacterRoutes("maya").privateZone, null],
["image-pack", "nayeli", "private-zone", null, null, getCharacterRoutes("nayeli").privateZone, null],
["coffee", "elio", "tip", null, null, getCharacterRoutes("elio").tip, null],
["coffee", "maya", "tip", null, null, getCharacterRoutes("maya").tip, null],
["coffee", "nayeli", "tip", null, null, getCharacterRoutes("nayeli").tip, null],
] as const;
describe("external entry navigation", () => { describe("external entry navigation", () => {
it("defaults to chat", () => { it("defaults to chat", () => {
expect(resolveExternalEntryTarget({})).toBe(ROUTES.chat); expect(resolveExternalEntryTarget({})).toBe(ROUTES.chat);
@@ -38,9 +23,6 @@ describe("external entry navigation", () => {
expect(resolveExternalEntryTarget({ target: "private-room" })).toBe( expect(resolveExternalEntryTarget({ target: "private-room" })).toBe(
ROUTES.privateZone, ROUTES.privateZone,
); );
expect(resolveExternalEntryTarget({ target: "topup" })).toBe(
ROUTES.subscription,
);
}); });
it("rejects removed aliases and unsupported targets", () => { it("rejects removed aliases and unsupported targets", () => {
@@ -59,12 +41,6 @@ describe("external entry navigation", () => {
); );
}); });
it("routes a top-up handoff directly to the credit packages", () => {
expect(resolveExternalEntryDestination({ target: "topup" })).toBe(
"/subscription?type=topup",
);
});
it("uses a known character slug and falls back to Elio", () => { it("uses a known character slug and falls back to Elio", () => {
expect( expect(
resolveExternalEntryDestination({ target: "chat", character: "maya" }), resolveExternalEntryDestination({ target: "chat", character: "maya" }),
@@ -77,26 +53,6 @@ describe("external entry navigation", () => {
).toBe(getCharacterRoutes("elio").privateZone); ).toBe(getCharacterRoutes("elio").privateZone);
}); });
it.each(facebookBusinessEntryCases)(
"routes Facebook business entry %s for %s",
(
_entry,
character,
target,
mode,
promotionType,
expectedDestination,
expectedPromotionType,
) => {
expect(resolveExternalEntryDestination({ target, character })).toBe(
expectedDestination,
);
expect(
resolveExternalEntryPromotionType({ mode, promotionType }),
).toBe(expectedPromotionType);
},
);
it.each([ it.each([
["chat", "elio", getCharacterRoutes("elio").chat], ["chat", "elio", getCharacterRoutes("elio").chat],
["chat", "maya", getCharacterRoutes("maya").chat], ["chat", "maya", getCharacterRoutes("maya").chat],
+2 -8
View File
@@ -13,8 +13,7 @@ import { getCharacterRoutes, ROUTES } from "@/router/routes";
export type ExternalEntryTarget = export type ExternalEntryTarget =
| typeof ROUTES.chat | typeof ROUTES.chat
| typeof ROUTES.tip | typeof ROUTES.tip
| typeof ROUTES.privateZone | typeof ROUTES.privateZone;
| typeof ROUTES.subscription;
export interface ExternalEntryPayload { export interface ExternalEntryPayload {
deviceId?: string | null; deviceId?: string | null;
@@ -51,8 +50,7 @@ export function shouldBindExternalFacebookIdentity({
const isRealUser = const isRealUser =
loginStatus === "email" || loginStatus === "email" ||
loginStatus === "google" || loginStatus === "google" ||
loginStatus === "facebook" || loginStatus === "facebook";
loginStatus === "facebookMessenger";
return ( return (
hasInitialized && hasInitialized &&
!isLoading && !isLoading &&
@@ -92,9 +90,6 @@ export function resolveExternalEntryDestination({
getCharacterBySlug(character)?.slug ?? DEFAULT_CHARACTER_SLUG; getCharacterBySlug(character)?.slug ?? DEFAULT_CHARACTER_SLUG;
const routes = getCharacterRoutes(characterSlug); const routes = getCharacterRoutes(characterSlug);
const resolvedTarget = resolveExternalEntryTarget({ target }); const resolvedTarget = resolveExternalEntryTarget({ target });
if (resolvedTarget === ROUTES.subscription) {
return `${ROUTES.subscription}?type=topup`;
}
if (resolvedTarget === ROUTES.tip) return routes.tip; if (resolvedTarget === ROUTES.tip) return routes.tip;
if (resolvedTarget === ROUTES.privateZone) return routes.privateZone; if (resolvedTarget === ROUTES.privateZone) return routes.privateZone;
return routes.chat; return routes.chat;
@@ -137,7 +132,6 @@ function resolveTarget(
if (target === "private-zone" || target === "private-room") { if (target === "private-zone" || target === "private-room") {
return ROUTES.privateZone; return ROUTES.privateZone;
} }
if (target === "topup") return ROUTES.subscription;
return null; return null;
} }
@@ -2,11 +2,9 @@ import { describe, expect, it, vi } from "vitest";
import { import {
getPaymentUrl, getPaymentUrl,
getPaymentUrlHostname,
getStripeClientSecret, getStripeClientSecret,
isEzpayPayment, isEzpayPayment,
launchEzpayRedirect, launchEzpayRedirect,
resolveEzpayLaunchTarget,
} from "../payment_launch"; } from "../payment_launch";
describe("payment launch helpers", () => { describe("payment launch helpers", () => {
@@ -44,118 +42,6 @@ describe("payment launch helpers", () => {
).toBeNull(); ).toBeNull();
}); });
it("prioritizes a hosted GCash URL for Philippine checkout", () => {
expect(
resolveEzpayLaunchTarget({
provider: "ezpay",
channelType: "URL",
payData: "https://pay.example/gcash",
}, { countryCode: "PH", currency: "PHP" }),
).toEqual({ kind: "url", paymentUrl: "https://pay.example/gcash" });
expect(
resolveEzpayLaunchTarget({
provider: "ezpay",
channelType: "QR",
payData: "000201010212ph-qr-payload",
cashierUrl: "https://pay.example/gcash-hosted",
}, { countryCode: "PH" }),
).toEqual({
kind: "url",
paymentUrl: "https://pay.example/gcash-hosted",
});
});
it("keeps a usable QR Ph fallback without calling it QRIS", () => {
expect(
resolveEzpayLaunchTarget(
{
provider: "ezpay",
channelType: "QR",
payData: "000201010212ph-qr-payload",
},
{ currency: "PHP" },
),
).toEqual({
kind: "qr",
experience: "gcashQrPh",
qrData: "000201010212ph-qr-payload",
});
expect(
resolveEzpayLaunchTarget(
{
provider: "ezpay",
payData: "000201010212ph-qr-payload",
},
{ countryCode: "PH" },
),
).toEqual({
kind: "qr",
experience: "gcashQrPh",
qrData: "000201010212ph-qr-payload",
});
});
it("keeps Indonesian QRIS ahead of an optional hosted URL", () => {
expect(
resolveEzpayLaunchTarget(
{
provider: "ezpay",
channelType: "QR",
payData: "00020101021226670016COM.NOBUBANK.WWW",
cashierUrl: "https://pay.example/indonesia",
},
{ countryCode: "ID", currency: "IDR" },
),
).toEqual({
kind: "qr",
experience: "qris",
qrData: "00020101021226670016COM.NOBUBANK.WWW",
});
});
it("reports a regional error only when both URL and QR data are absent", () => {
expect(
resolveEzpayLaunchTarget(
{
provider: "ezpay",
channelType: "QR",
payData: "",
},
{ countryCode: "PH" },
),
).toEqual({
kind: "error",
errorMessage:
"GCash / QR Ph payment data is missing. Please try again.",
});
});
it("keeps diagnostics to the payment URL hostname", () => {
expect(
getPaymentUrlHostname(
"https://pay.example/gcash?token=must-not-appear-in-logs",
),
).toBe("pay.example");
expect(getPaymentUrlHostname("not-a-url")).toBeNull();
});
it("rejects VA and unknown Ezpay channel types with explicit errors", () => {
expect(
resolveEzpayLaunchTarget({ provider: "ezpay", channelType: "VA" }),
).toEqual({
kind: "error",
errorMessage: "Virtual account payments are not supported in this app.",
});
expect(
resolveEzpayLaunchTarget({ provider: "ezpay", channelType: "OTHER" }),
).toEqual({
kind: "error",
errorMessage: "Unsupported Ezpay payment channel: OTHER.",
});
});
it("reports a launch failure before redirecting without an order id", async () => { it("reports a launch failure before redirecting without an order id", async () => {
const onOpened = vi.fn(); const onOpened = vi.fn();
const onFailed = vi.fn(); const onFailed = vi.fn();
@@ -12,21 +12,18 @@ describe("payment method rules", () => {
vi.unstubAllEnvs(); vi.unstubAllEnvs();
}); });
it("defaults Philippines and Indonesia users to their regional Ezpay method", () => { it("defaults Philippines users to GCash and other countries to Stripe", () => {
expect(getDefaultPayChannelForCountryCode("PH")).toBe("ezpay"); expect(getDefaultPayChannelForCountryCode("PH")).toBe("ezpay");
expect(getDefaultPayChannelForCountryCode("ph")).toBe("ezpay"); expect(getDefaultPayChannelForCountryCode("ph")).toBe("ezpay");
expect(getDefaultPayChannelForCountryCode("ID")).toBe("ezpay");
expect(getDefaultPayChannelForCountryCode(" id ")).toBe("ezpay");
expect(getDefaultPayChannelForCountryCode("HK")).toBe("stripe"); expect(getDefaultPayChannelForCountryCode("HK")).toBe("stripe");
expect(getDefaultPayChannelForCountryCode(null)).toBe("stripe"); expect(getDefaultPayChannelForCountryCode(null)).toBe("stripe");
}); });
it("allows Philippines and Indonesia users to choose in production", () => { it("only allows Philippines users to choose in production", () => {
vi.stubEnv("NEXT_PUBLIC_APP_ENV", "production"); vi.stubEnv("NEXT_PUBLIC_APP_ENV", "production");
expect(canChoosePayChannel("PH")).toBe(true); expect(canChoosePayChannel("PH")).toBe(true);
expect(canChoosePayChannel("ph")).toBe(true); expect(canChoosePayChannel("ph")).toBe(true);
expect(canChoosePayChannel("ID")).toBe(true);
expect(canChoosePayChannel("HK")).toBe(false); expect(canChoosePayChannel("HK")).toBe(false);
expect(canChoosePayChannel(null)).toBe(false); expect(canChoosePayChannel(null)).toBe(false);
expect( expect(
@@ -38,7 +35,6 @@ describe("payment method rules", () => {
canChoosePaymentMethod: false, canChoosePaymentMethod: false,
initialPayChannel: "stripe", initialPayChannel: "stripe",
showPaymentMethodSelector: false, showPaymentMethodSelector: false,
ezpayDisplayName: "GCash",
}); });
}); });
@@ -56,25 +52,6 @@ describe("payment method rules", () => {
).toBe("stripe"); ).toBe("stripe");
}); });
it("defaults Indonesia to QRIS but permits an explicit Stripe choice", () => {
vi.stubEnv("NEXT_PUBLIC_APP_ENV", "production");
expect(
getPaymentMethodConfig({
countryCode: "ID",
requestedPayChannel: null,
}),
).toEqual({
canChoosePaymentMethod: true,
initialPayChannel: "ezpay",
showPaymentMethodSelector: true,
ezpayDisplayName: "QRIS",
});
expect(
resolvePayChannel({ countryCode: "ID", requestedPayChannel: "stripe" }),
).toBe("stripe");
});
it("keeps test channels but shows the selector only for Philippines", () => { it("keeps test channels but shows the selector only for Philippines", () => {
vi.stubEnv("NEXT_PUBLIC_APP_ENV", "test"); vi.stubEnv("NEXT_PUBLIC_APP_ENV", "test");
@@ -94,7 +71,6 @@ describe("payment method rules", () => {
canChoosePaymentMethod: true, canChoosePaymentMethod: true,
initialPayChannel: "ezpay", initialPayChannel: "ezpay",
showPaymentMethodSelector: false, showPaymentMethodSelector: false,
ezpayDisplayName: "GCash",
}); });
expect( expect(
getPaymentMethodConfig({ getPaymentMethodConfig({
+1 -4
View File
@@ -3,8 +3,5 @@ import type { PayChannel } from "@/data/schemas/payment";
export function getDefaultPayChannelForCountryCode( export function getDefaultPayChannelForCountryCode(
countryCode: string | null | undefined, countryCode: string | null | undefined,
): PayChannel { ): PayChannel {
const normalizedCountryCode = countryCode?.trim().toUpperCase(); return countryCode?.trim().toUpperCase() === "PH" ? "ezpay" : "stripe";
return normalizedCountryCode === "PH" || normalizedCountryCode === "ID"
? "ezpay"
: "stripe";
} }
+2 -176
View File
@@ -11,53 +11,6 @@ import {
const log = new Logger("LibPaymentPaymentLaunch"); const log = new Logger("LibPaymentPaymentLaunch");
export type EzpayLaunchTarget =
| { kind: "url"; paymentUrl: string }
| {
kind: "qr";
experience: EzpayQrExperience;
qrData: string;
}
| { kind: "error"; errorMessage: string };
export type EzpayQrExperience = "gcashQrPh" | "qris" | "paymentQr";
export interface ResolveEzpayLaunchContext {
countryCode?: string | null;
currency?: string | null;
}
function getNonEmptyString(
payParams: Record<string, unknown>,
...keys: string[]
): string | null {
for (const key of keys) {
const value = payParams[key];
if (typeof value === "string" && value.trim().length > 0) {
return value.trim();
}
}
return null;
}
function getHttpPaymentUrl(value: string | null): string | null {
if (!value) return null;
try {
const parsed = new URL(value);
return parsed.protocol === "https:" || parsed.protocol === "http:"
? value
: null;
} catch {
return null;
}
}
export function getPaymentUrlHostname(value: string | null): string | null {
const paymentUrl = getHttpPaymentUrl(value);
if (!paymentUrl) return null;
return new URL(paymentUrl).hostname;
}
export function getPaymentUrl(payParams: Record<string, unknown>): string | null { export function getPaymentUrl(payParams: Record<string, unknown>): string | null {
const keys = [ const keys = [
"cashierUrl", "cashierUrl",
@@ -86,132 +39,6 @@ export function isEzpayPayment(payParams: Record<string, unknown>): boolean {
return typeof provider === "string" && provider.toLowerCase() === "ezpay"; return typeof provider === "string" && provider.toLowerCase() === "ezpay";
} }
export function resolveEzpayLaunchTarget(
payParams: Record<string, unknown>,
context: ResolveEzpayLaunchContext = {},
): EzpayLaunchTarget {
const rawChannelType = getNonEmptyString(
payParams,
"channelType",
"channel_type",
);
const channelType = rawChannelType?.toUpperCase() ?? null;
const payData = getNonEmptyString(payParams, "payData", "pay_data");
const payDataUrl = getHttpPaymentUrl(payData);
const namedPaymentUrl = getHttpPaymentUrl(getPaymentUrl(payParams));
const paymentUrl = payDataUrl ?? namedPaymentUrl;
const qrData = payData && !payDataUrl ? payData : null;
const region = resolveEzpayRegion(payParams, context);
if (
region === "ph" &&
paymentUrl &&
(channelType === "QR" || channelType === "URL" || channelType === null)
) {
return { kind: "url", paymentUrl };
}
if (channelType === "QR") {
if (qrData) {
return {
kind: "qr",
experience: resolveEzpayQrExperience(region),
qrData,
};
}
return paymentUrl
? { kind: "url", paymentUrl }
: {
kind: "error",
errorMessage: regionalQrMissingMessage(region),
};
}
if (channelType === "VA") {
return {
kind: "error",
errorMessage: "Virtual account payments are not supported in this app.",
};
}
if (channelType === "URL") {
return paymentUrl
? { kind: "url", paymentUrl }
: {
kind: "error",
errorMessage: "Ezpay payment URL is missing or invalid. Please try again.",
};
}
if (channelType) {
return {
kind: "error",
errorMessage: `Unsupported Ezpay payment channel: ${channelType}.`,
};
}
if (paymentUrl) return { kind: "url", paymentUrl };
if (qrData && region !== null) {
return {
kind: "qr",
experience: resolveEzpayQrExperience(region),
qrData,
};
}
return {
kind: "error",
errorMessage:
"Ezpay payment parameters did not include a supported URL or payment QR code.",
};
}
function resolveEzpayRegion(
payParams: Record<string, unknown>,
context: ResolveEzpayLaunchContext,
): "ph" | "id" | null {
const currency = (
context.currency ?? getNonEmptyString(payParams, "currency")
)
?.trim()
.toUpperCase();
if (currency === "PHP") return "ph";
if (currency === "IDR") return "id";
const countryCode = (
context.countryCode ??
getNonEmptyString(
payParams,
"purchaseCountryCode",
"purchase_country_code",
"countryCode",
"country_code",
)
)
?.trim()
.toUpperCase();
if (countryCode === "PH") return "ph";
if (countryCode === "ID") return "id";
return null;
}
function resolveEzpayQrExperience(
region: "ph" | "id" | null,
): EzpayQrExperience {
if (region === "ph") return "gcashQrPh";
if (region === "id") return "qris";
return "paymentQr";
}
function regionalQrMissingMessage(region: "ph" | "id" | null): string {
if (region === "ph") {
return "GCash / QR Ph payment data is missing. Please try again.";
}
if (region === "id") {
return "QRIS payment data is missing. Please try again.";
}
return "Payment QR data is missing. Please try again.";
}
export function getStripeClientSecret( export function getStripeClientSecret(
payParams: Record<string, unknown>, payParams: Record<string, unknown>,
): string | null { ): string | null {
@@ -254,19 +81,18 @@ export async function launchEzpayRedirect({
onOpened, onOpened,
onFailed, onFailed,
}: LaunchEzpayRedirectInput): Promise<void> { }: LaunchEzpayRedirectInput): Promise<void> {
const paymentUrlHost = getPaymentUrlHostname(paymentUrl);
log.debug("[payment-launch] launchEzpayRedirect START", { log.debug("[payment-launch] launchEzpayRedirect START", {
hasOrderId: Boolean(orderId), hasOrderId: Boolean(orderId),
orderId, orderId,
subscriptionType, subscriptionType,
paymentUrlHost, paymentUrl,
}); });
if (!orderId) { if (!orderId) {
const errorMessage = "Missing order id before opening Ezpay."; const errorMessage = "Missing order id before opening Ezpay.";
log.error("[payment-launch] pending ezpay order save skipped", { log.error("[payment-launch] pending ezpay order save skipped", {
subscriptionType, subscriptionType,
paymentUrlHost, paymentUrl,
errorMessage, errorMessage,
}); });
onFailed(errorMessage); onFailed(errorMessage);
+4 -15
View File
@@ -5,7 +5,6 @@ import { getDefaultPayChannelForCountryCode } from "./default_pay_channel";
export interface PaymentMethodConfig { export interface PaymentMethodConfig {
canChoosePaymentMethod: boolean; canChoosePaymentMethod: boolean;
ezpayDisplayName?: "GCash" | "QRIS";
initialPayChannel: PayChannel; initialPayChannel: PayChannel;
showPaymentMethodSelector: boolean; showPaymentMethodSelector: boolean;
} }
@@ -14,7 +13,7 @@ export function canChoosePayChannel(
countryCode: string | null | undefined, countryCode: string | null | undefined,
): boolean { ): boolean {
if (!AppEnvUtil.isProduction()) return true; if (!AppEnvUtil.isProduction()) return true;
return isRegionalEzpayCountryCode(countryCode); return isPhilippinesCountryCode(countryCode);
} }
export function resolvePayChannel(input: { export function resolvePayChannel(input: {
@@ -34,23 +33,13 @@ export function getPaymentMethodConfig(input: {
}): PaymentMethodConfig { }): PaymentMethodConfig {
return { return {
canChoosePaymentMethod: canChoosePayChannel(input.countryCode), canChoosePaymentMethod: canChoosePayChannel(input.countryCode),
ezpayDisplayName: isIndonesiaCountryCode(input.countryCode)
? "QRIS"
: "GCash",
initialPayChannel: resolvePayChannel(input), initialPayChannel: resolvePayChannel(input),
showPaymentMethodSelector: isRegionalEzpayCountryCode(input.countryCode), showPaymentMethodSelector: isPhilippinesCountryCode(input.countryCode),
}; };
} }
function isRegionalEzpayCountryCode( function isPhilippinesCountryCode(
countryCode: string | null | undefined, countryCode: string | null | undefined,
): boolean { ): boolean {
const normalizedCountryCode = countryCode?.trim().toUpperCase(); return countryCode?.trim().toUpperCase() === "PH";
return normalizedCountryCode === "PH" || normalizedCountryCode === "ID";
}
function isIndonesiaCountryCode(
countryCode: string | null | undefined,
): boolean {
return countryCode?.trim().toUpperCase() === "ID";
} }
@@ -32,17 +32,4 @@ describe("Tip support prompts", () => {
expect(selectTipSupportPrompt(null, () => Number.NaN).index).toBe(0); expect(selectTipSupportPrompt(null, () => Number.NaN).index).toBe(0);
expect(selectTipSupportPrompt(null, () => 2).index).toBe(29); expect(selectTipSupportPrompt(null, () => 2).index).toBe(29);
}); });
it("names the active character and never frames a purchase as affection", () => {
const selection = selectTipSupportPrompt(null, () => 0, "Maya Tan");
expect(selection.prompt).toContain("support Maya Tan");
expect(selection.prompt).not.toMatch(/tiny hug|spoil|buy.*love|owe me/i);
expect(
TIP_SUPPORT_PROMPTS.every(
(prompt) =>
/support/i.test(prompt) && /this character/i.test(prompt),
),
).toBe(true);
});
}); });

Some files were not shown because too many files have changed in this diff Show More