12 Commits

Author SHA1 Message Date
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
254 changed files with 1027 additions and 10721 deletions
+11 -13
View File
@@ -152,9 +152,12 @@ jobs:
- name: Deploy image over SSH
env:
SSH_HOST: ${{ secrets.SSH_HOST }}
SSH_USER: ${{ secrets.SSH_USER }}
SSH_PORT: ${{ secrets.SSH_PORT }}
SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
SSH_KNOWN_HOSTS: ${{ secrets.SSH_KNOWN_HOSTS }}
TEST_DEPLOY_DIR: ${{ secrets.TEST_DEPLOY_DIR }}
PROD_DEPLOY_DIR: ${{ secrets.PROD_DEPLOY_DIR }}
REGISTRY_HOST: ${{ secrets.REGISTRY_HOST }}
REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }}
@@ -163,18 +166,16 @@ jobs:
case "$DEPLOY_ENV" in
test)
DEPLOY_ROOT="/home/lzf/apps/cozsweet-web-test"
DEPLOY_DIR="${TEST_DEPLOY_DIR:-/opt/cozsweet-web-test}"
HOST_PORT="9135"
CONTAINER_NAME="cozsweet-web-test"
PROJECT_NAME="cozsweet-web-test"
SERVER_RETAIN_COUNT="1"
;;
prod)
DEPLOY_ROOT="/home/lzf/apps/cozsweet-web-prod"
DEPLOY_DIR="${PROD_DEPLOY_DIR:-/opt/cozsweet-web-prod}"
HOST_PORT="9185"
CONTAINER_NAME="cozsweet-web-prod"
PROJECT_NAME="cozsweet-web-prod"
SERVER_RETAIN_COUNT="2"
;;
*)
echo "Unsupported deploy env: $DEPLOY_ENV" >&2
@@ -182,11 +183,8 @@ jobs:
;;
esac
DEPLOY_DIR="$DEPLOY_ROOT/current"
DEPLOY_SHARED_DIR="$DEPLOY_ROOT/shared"
REMOTE_ENV_FILE="$DEPLOY_SHARED_DIR/$NEXT_ENV_FILE"
DEPLOY_HOST="$SSH_HOST"
DEPLOY_USER="lzf"
DEPLOY_USER="$SSH_USER"
DEPLOY_PORT="${SSH_PORT:-22}"
DEPLOY_KEY="$SSH_PRIVATE_KEY"
DEPLOY_KNOWN_HOSTS="$SSH_KNOWN_HOSTS"
@@ -212,19 +210,19 @@ jobs:
SSH_OPTS="-i $KEY_FILE -p $DEPLOY_PORT -o IdentitiesOnly=yes"
SCP_OPTS="-i $KEY_FILE -P $DEPLOY_PORT -o IdentitiesOnly=yes"
ssh $SSH_OPTS "$SSH_TARGET" \
"mkdir -p '$DEPLOY_DIR' '$DEPLOY_SHARED_DIR' '$DEPLOY_ROOT/releases' '$DEPLOY_ROOT/backups' '$DEPLOY_ROOT/tmp' && chmod 700 '$DEPLOY_SHARED_DIR'"
ssh $SSH_OPTS "$SSH_TARGET" "mkdir -p '$DEPLOY_DIR'"
scp $SCP_OPTS docker-compose.yml "$SSH_TARGET:$DEPLOY_DIR/docker-compose.yml"
scp $SCP_OPTS scripts/server/deploy-docker-image.sh "$SSH_TARGET:$DEPLOY_DIR/deploy-docker-image.sh"
scp $SCP_OPTS "$NEXT_ENV_FILE" "$SSH_TARGET:$REMOTE_ENV_FILE"
ssh $SSH_OPTS "$SSH_TARGET" "chmod 600 '$REMOTE_ENV_FILE'"
scp $SCP_OPTS "$NEXT_ENV_FILE" "$SSH_TARGET:$DEPLOY_DIR/$NEXT_ENV_FILE"
printf '%s' "$REGISTRY_PASSWORD" \
| ssh $SSH_OPTS "$SSH_TARGET" \
"docker login '$REGISTRY_HOST' -u '$REGISTRY_USERNAME' --password-stdin"
SERVER_RETAIN_COUNT="1"
ssh $SSH_OPTS "$SSH_TARGET" \
"cd '$DEPLOY_DIR' && chmod +x ./deploy-docker-image.sh && ./deploy-docker-image.sh '$IMAGE_VERSION_TAG' '$REMOTE_ENV_FILE' '$HOST_PORT' '$CONTAINER_NAME' '$PROJECT_NAME' '$SERVER_RETAIN_COUNT'"
"cd '$DEPLOY_DIR' && chmod +x ./deploy-docker-image.sh && ./deploy-docker-image.sh '$IMAGE_VERSION_TAG' '$NEXT_ENV_FILE' '$HOST_PORT' '$CONTAINER_NAME' '$PROJECT_NAME' '$SERVER_RETAIN_COUNT'"
- name: Purge Cloudflare cache
env:
-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"
+66 -61
View File
@@ -1,11 +1,11 @@
# 外部入口接入说明
Facebook 等外部应用统一通过 `/external-entry` 进入本应用。入口先保存外部身份和短期业务意图,再跳转到对应角色页面并清理地址栏中的入口查询参数。
外部应用通过 `/external-entry` 进入本应用。
| 环境 | APP HOST |
| --- | --- |
| 预发环境 `pre` | `frontend-test.banlv-ai.com` |
| 正式环境 `production` | `cozsweet.com` |
| 测试环境 | `frontend-test.banlv-ai.com` |
| 正式环境 | `cozsweet.com` |
入口格式:
@@ -13,78 +13,83 @@ Facebook 等外部应用统一通过 `/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` | 指定进入的页面;不传或值无效时进入聊天页。 |
| `character` | `elio``maya``nayeli` | 指定角色;不传或值无效时使用 Elio。正式投放链接必须显式传入。 |
| `psid` | string | Facebook Page-scoped User ID。Facebook 正式投放链接必须动态传入。 |
| `character` | `elio``maya``nayeli` | 指定角色;不传或值无效时使用 Elio。 |
| `psid` | string | 传入 Facebook Page-scoped User ID。 |
| `mode` | `promotion` | 开启聊天促销模式。 |
| `promotion_type` | `voice``image``private` | 指定促销消息类型,仅与 `mode=promotion` 一起使用。 |
`mode=promotion` 只有在 `target=chat` 且同时提供有效的 `promotion_type` 时生效。当前 12 条正式投放链接只使用 `promotion_type=voice``image``private` 保留为兼容能力,不属于本次业务清单。
## 四类发送模板
发送前必须把 `<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>
```
`mode=promotion` 只有在 `target=chat` 且同时提供有效的 `promotion_type` 时生效。
## 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`,但不得用于新投放链接。
- `private_zone` 等其他拼写仍按无效目标处理并回退聊天页。
- `promotion_type=image``promotion_type=private` 继续由现有代码支持,但不计入当前 12 条 Facebook 业务链接。
- 无效或缺失的 `character` 继续回退 Elio;正式投放模板始终显式传入角色,不能依赖回退。
```text
https://<APP_HOST>/external-entry?target=chat
```
## 调试与正式清单
进入 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)
- [Facebook 12 条外部入口链接清单](./links.md)
- [测试环境和正式环境链接清单](./links.md)
+36 -45
View File
@@ -1,52 +1,43 @@
# Facebook 12 条外部入口链接清单
# 外部入口链接清单
本清单是 Facebook 正式投放的唯一业务链接清单,共 4 类入口乘以 3 个角色,合计 12 条模板。
[返回外部入口接入说明](./README.md)
## 发送规则
以下链接可以直接点击打开。PSID 示例统一使用 `27511427698460020`
- 发送前必须把每条模板中的 `<PSID>` 替换为当前用户经过 URL 编码的 Facebook Page-scoped User ID;不得把占位符原样发送。
- 每条链接都显式传入 `character`,不得依赖缺省角色回退。
- Facebook 业务名称“私密空间”进入普通聊天页;业务名称“图片包”才进入应用的 `private-zone`
- 不要在入口中传递登录 Token、Page Access Token、App Secret 或其他秘密。
- 以下模板包含占位符,替换真实 PSID 后才能直接发送或点击。
## 测试环境
## 正式投放模板
| 入口 | 链接 |
| --- | --- |
| 普通聊天 | [打开普通聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat) |
| Maya 聊天 | [打开 Maya 聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat&character=maya) |
| Nayeli 聊天 | [打开 Nayeli 聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat&character=nayeli) |
| 携带 PSID 的聊天 | [打开 PSID 聊天示例](https://frontend-test.banlv-ai.com/external-entry?target=chat&psid=27511427698460020) |
| 语音促销 | [打开语音促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=voice) |
| 图片促销 | [打开图片促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=image) |
| 私密文本促销 | [打开私密文本促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=private) |
| 咖啡打赏 | [打开咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip) |
| Maya 咖啡打赏 | [打开 Maya 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=maya) |
| Nayeli 咖啡打赏 | [打开 Nayeli 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=nayeli) |
| 私密空间 | [打开私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone) |
| Maya 私密空间 | [打开 Maya 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=maya) |
| Nayeli 私密空间 | [打开 Nayeli 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=nayeli) |
| 编号 | Facebook 入口 | 角色 | 发送模板 | 预期落地与页面状态 |
| --- | --- | --- | --- | --- |
| 1 | 私密空间 | Elio | `https://cozsweet.com/external-entry?target=chat&character=elio&psid=<PSID>` | `/characters/elio/chat`,不显示促销锁卡 |
| 2 | 私密空间 | Maya | `https://cozsweet.com/external-entry?target=chat&character=maya&psid=<PSID>` | `/characters/maya/chat`,不显示促销锁卡 |
| 3 | 私密空间 | Nayeli | `https://cozsweet.com/external-entry?target=chat&character=nayeli&psid=<PSID>` | `/characters/nayeli/chat`,不显示促销锁卡 |
| 4 | 语音 | Elio | `https://cozsweet.com/external-entry?target=chat&character=elio&mode=promotion&promotion_type=voice&psid=<PSID>` | `/characters/elio/chat`,显示一条锁定语音 |
| 5 | 语音 | Maya | `https://cozsweet.com/external-entry?target=chat&character=maya&mode=promotion&promotion_type=voice&psid=<PSID>` | `/characters/maya/chat`,显示一条锁定语音 |
| 6 | 语音 | Nayeli | `https://cozsweet.com/external-entry?target=chat&character=nayeli&mode=promotion&promotion_type=voice&psid=<PSID>` | `/characters/nayeli/chat`,显示一条锁定语音 |
| 7 | 图片包 | Elio | `https://cozsweet.com/external-entry?target=private-zone&character=elio&psid=<PSID>` | `/characters/elio/private-zone` |
| 8 | 图片包 | Maya | `https://cozsweet.com/external-entry?target=private-zone&character=maya&psid=<PSID>` | `/characters/maya/private-zone` |
| 9 | 图片包 | Nayeli | `https://cozsweet.com/external-entry?target=private-zone&character=nayeli&psid=<PSID>` | `/characters/nayeli/private-zone` |
| 10 | 帮忙买咖啡 | Elio | `https://cozsweet.com/external-entry?target=tip&character=elio&psid=<PSID>` | `/characters/elio/tip` |
| 11 | 帮忙买咖啡 | Maya | `https://cozsweet.com/external-entry?target=tip&character=maya&psid=<PSID>` | `/characters/maya/tip` |
| 12 | 帮忙买咖啡 | Nayeli | `https://cozsweet.com/external-entry?target=tip&character=nayeli&psid=<PSID>` | `/characters/nayeli/tip` |
## 正式环境
## 预发验证
| 入口 | 链接 |
| --- | --- |
| 普通聊天 | [打开普通聊天](https://cozsweet.com/external-entry?target=chat) |
| Maya 聊天 | [打开 Maya 聊天](https://cozsweet.com/external-entry?target=chat&character=maya) |
| Nayeli 聊天 | [打开 Nayeli 聊天](https://cozsweet.com/external-entry?target=chat&character=nayeli) |
| 携带 PSID 的聊天 | [打开 PSID 聊天示例](https://cozsweet.com/external-entry?target=chat&psid=27511427698460020) |
| 语音促销 | [打开语音促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=voice) |
| 图片促销 | [打开图片促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=image) |
| 私密文本促销 | [打开私密文本促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=private) |
| 咖啡打赏 | [打开咖啡打赏](https://cozsweet.com/external-entry?target=tip) |
| Maya 咖啡打赏 | [打开 Maya 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=maya) |
| Nayeli 咖啡打赏 | [打开 Nayeli 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=nayeli) |
| 私密空间 | [打开私密空间](https://cozsweet.com/external-entry?target=private-zone) |
| Maya 私密空间 | [打开 Maya 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=maya) |
| Nayeli 私密空间 | [打开 Nayeli 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=nayeli) |
预发验证不维护第二套业务清单。将上述 12 条模板的主机统一替换为 `frontend-test.banlv-ai.com`,其余路径和参数保持不变:
```text
https://frontend-test.banlv-ai.com/external-entry?<与正式模板相同的查询参数>
```
预发环境是 `pre`,不是正式环境。预发验证通过不代表已经更新 `cozsweet.com` 或获得生产发布批准。
## 验收判断
- 最终浏览器地址必须是表格中的预期页面,且不再保留 `/external-entry` 的查询参数。
- `<PSID>` 替换后的真实值必须由应用保存。
- “私密空间”只进入普通聊天,不得出现锁定语音、锁定图片或私密文本促销卡。
- “语音”进入聊天后必须只注入一条锁定语音。
- “图片包”和“帮忙买咖啡”必须分别进入对应角色的 `private-zone``tip`,不能串到其他角色。
## 不属于当前 12 条清单的兼容能力
- 历史 `target=private-room` 继续兼容,但不得创建新的投放链接。
- `promotion_type=image``promotion_type=private` 和独立 PSID 示例不属于当前正式业务清单。
- 兼容能力的保留不改变本页“只有 12 条正式投放模板”的口径。
如需在其他入口携带 PSID,在链接末尾追加 `&psid=27511427698460020`
+3 -3
View File
@@ -12,7 +12,7 @@ export interface MockCoreApisOptions {
paidImageFlow?: boolean;
paidImageInsufficientCreditsFlow?: boolean;
paidVoiceInsufficientCreditsFlow?: boolean;
topUpHandoffFlow?: boolean;
psidLoginFlow?: boolean;
}
export async function mockCoreApis(page: Page, options: MockCoreApisOptions = {}) {
@@ -22,14 +22,14 @@ export async function mockCoreApis(page: Page, options: MockCoreApisOptions = {}
paidImageFlow: options.paidImageFlow ?? false,
paidImageInsufficientCreditsFlow: options.paidImageInsufficientCreditsFlow ?? false,
paidVoiceInsufficientCreditsFlow: options.paidVoiceInsufficientCreditsFlow ?? false,
topUpHandoffFlow: options.topUpHandoffFlow ?? false,
psidLoginFlow: options.psidLoginFlow ?? false,
};
const chatState = { hasExpiredChatSend: false, paidImageRequested: false, paidImageUnlocked: false };
await registerAuthMocks(page, {
chatSendTokenRefreshFlow: chatOptions.chatSendTokenRefreshFlow,
isChatSendTokenExpired: () => chatState.hasExpiredChatSend,
topUpHandoffFlow: chatOptions.topUpHandoffFlow,
psidLoginFlow: chatOptions.psidLoginFlow,
});
await registerCharacterMocks(page);
await registerUserMocks(page);
+6 -5
View File
@@ -1,21 +1,22 @@
import type { Page } from "@playwright/test";
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 {
chatSendTokenRefreshFlow: boolean;
isChatSendTokenExpired: () => boolean;
topUpHandoffFlow: boolean;
psidLoginFlow: boolean;
}
export async function registerAuthMocks(page: Page, state: AuthMockState) {
await page.route("**/api/auth/handoff/topup/consume", async (route) => {
if (!state.topUpHandoffFlow) {
await page.route("**/api/auth/login/facebook/psid", async (route) => {
if (!state.psidLoginFlow) {
await route.continue();
return;
}
await route.fulfill({ json: apiEnvelope(topUpHandoffResponse) });
await route.fulfill({ json: apiEnvelope(psidLoginResponse) });
});
await page.route("**/api/auth/guest", async (route) => {
+1 -15
View File
@@ -61,21 +61,7 @@ export async function registerChatMocks(page: Page, options: ChatMockOptions, st
await route.fulfill({ status: 401, json: { message: "expired" } });
return;
}
const response = message.includes("discount offer test")
? {
...chatSendResponse,
reply: "I know you're thinking carefully about the price.",
messageId: "discount-action-message",
commercialAction: {
actionId: "13ec8a10-58d7-4d24-b66b-8db5699a1aa8",
type: "discountOffer",
copy: "Want me to ask for my best private offer?",
ctaLabel: "Yes, ask for me",
target: "discountConsent",
ruleId: "discount_after_price_objection",
},
}
: message.includes("private album offer test")
const response = message.includes("private album offer test")
? {
...chatSendResponse,
reply: "You always know how to make me smile.",
-10
View File
@@ -4,16 +4,6 @@ import { apiEnvelope } from "../data/common";
import { createPaymentOrderResponse, paidPaymentOrderStatusResponse, paymentPlansResponse, tipPaymentPlansResponse, vipStatusResponse } from "../data/payment";
export async function registerPaymentMocks(page: Page) {
await page.route("**/api/payment/commercial-offers/*/accept", async (route) => route.fulfill({ json: apiEnvelope({
commercialOfferId: "13ec8a10-58d7-4d24-b66b-8db5699a1aa8",
planId: "vip_annual",
subscriptionType: "vip",
discountPercent: 30,
pricePercent: 70,
expiresAt: "2026-07-24T08:00:00+00:00",
message: "I got it for you.",
promotionType: "commercial_seven_discount",
}) }));
await page.route("**/api/payment/plans**", async (route) => route.fulfill({ json: apiEnvelope(paymentPlansResponse) }));
await page.route("**/api/payment/tip-plans**", async (route) => route.fulfill({ json: apiEnvelope(tipPaymentPlansResponse) }));
await page.route("**/api/payment/create-order", async (route) => route.fulfill({ json: apiEnvelope(createPaymentOrderResponse) }));
+10 -12
View File
@@ -50,16 +50,14 @@ export const refreshedEmailLoginResponse = {
refreshToken: "e2e-refreshed-email-refresh-token",
};
export const topUpHandoffResponse = {
token: "e2e-messenger-token",
refreshToken: "e2e-messenger-refresh-token",
loginStatus: "facebookMessenger",
merged: false,
user: {
...e2eEmailUser,
id: "user_e2e_messenger",
username: "E2E Messenger User",
email: "messenger_hash@messenger.cozsweet.invalid",
loginProvider: "facebook_messenger",
},
export const psidLoginResponse = {
token: "e2e-psid-guest-token",
refreshToken: "",
matchedBy: "psid",
fbAsid: "",
fbPsid: "e2e-facebook-psid",
hasCompleteFacebookIdentity: false,
isGuest: true,
user: e2eUser,
userId: e2eUser.id,
};
+2 -2
View File
@@ -75,13 +75,13 @@ export const paidImageChatSendResponse = {
messageId: paidImageMessageId,
isGuest: true,
timestamp: 1_782_180_725_000,
image: { type: "elio_schedule", url: null },
image: { type: "elio_schedule", url: paidImageUrl },
lockDetail: { locked: true, showContent: true, showUpgrade: true, reason: "image", hint: "Activate VIP to unlock the full photo.", detail: null },
};
export function createPaidImageHistoryResponse(unlocked: boolean) {
return {
messages: [{ role: "assistant", type: "image", content: unlocked ? "" : paidImageChatSendResponse.reply, id: paidImageMessageId, created_at: "2026-06-30T00:00:00.000Z", audioUrl: null, image: { type: "elio_schedule", url: unlocked ? paidImageUrl : null }, lockDetail: unlocked ? { locked: false, showContent: true, showUpgrade: false, reason: null, hint: null, detail: null } : paidImageChatSendResponse.lockDetail }],
messages: [{ role: "assistant", type: "image", content: unlocked ? "" : paidImageChatSendResponse.reply, id: paidImageMessageId, created_at: "2026-06-30T00:00:00.000Z", audioUrl: null, image: { type: "elio_schedule", url: paidImageUrl }, lockDetail: unlocked ? { locked: false, showContent: true, showUpgrade: false, reason: null, hint: null, detail: null } : paidImageChatSendResponse.lockDetail }],
total: 1, limit: 50, offset: 0, isVip: unlocked, privateFreeLimit: 0, privateUsedToday: 0, privateCanViewFree: false,
};
}
+1 -11
View File
@@ -1,19 +1,9 @@
import { expect, type Page } from "@playwright/test";
export async function completeVipPayment(page: Page) {
const checkoutButton = page.getByRole("button", { name: "Pay and Top Up" });
await expect(checkoutButton).toBeDisabled();
await page.getByRole("button", { name: /Monthly,/i }).click();
const renewalDialog = page.getByRole("dialog", {
name: "Automatic Renewal Confirmation",
});
await expect(renewalDialog).toBeVisible();
await renewalDialog.getByRole("button", { name: "Confirm" }).click();
await expect(checkoutButton).toBeEnabled();
const createOrderRequestPromise = page.waitForRequest("**/api/payment/create-order");
const orderStatusRequestPromise = page.waitForRequest("**/api/payment/order-status**");
await checkoutButton.click();
await page.getByRole("button", { name: /Pay and Activ/i }).click();
const createOrderRequest = await createOrderRequestPromise;
expect(createOrderRequest.postDataJSON()).toMatchObject({ planId: "vip_monthly", payChannel: "stripe" });
await orderStatusRequestPromise;
@@ -1,74 +1,49 @@
import { expect, test } from "@playwright/test";
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 }) => {
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,
}) => {
const handoffRequestPromise = page.waitForRequest(
"**/api/auth/handoff/topup/consume",
const psidLoginRequestPromise = page.waitForRequest(
"**/api/auth/login/facebook/psid",
);
await page.goto(
`/external-entry?target=topup&handoffToken=${encodeURIComponent(handoffToken)}`,
);
await page.goto(`/external-entry?target=chat&psid=${psid}`);
const handoffRequest = await handoffRequestPromise;
expect(handoffRequest.method()).toBe("POST");
expect(handoffRequest.postDataJSON()).toEqual({ handoffToken });
const psidLoginRequest = await psidLoginRequestPromise;
expect(psidLoginRequest.method()).toBe("POST");
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.getByRole("button", { name: /Pay and Top Up/i }),
).toBeVisible();
await expect(page).toHaveURL(defaultCharacterChatUrl);
await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
await expect
.poll(() =>
page.evaluate(() => ({
loginProvider: localStorage.getItem("cozsweet:login_provider"),
loginToken: localStorage.getItem("cozsweet:login_token"),
refreshToken: localStorage.getItem("cozsweet:refresh_token"),
guestToken: localStorage.getItem("cozsweet:guest_token"),
psid: localStorage.getItem("cozsweet:psid"),
})),
)
.toMatchObject({
loginProvider: "facebookMessenger",
loginToken: "e2e-messenger-token",
refreshToken: "e2e-messenger-refresh-token",
loginProvider: "guest",
guestToken: "e2e-psid-guest-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");
});
@@ -29,21 +29,3 @@ test("renders a backend commercial action and opens the private zone", async ({
await expect(page).toHaveURL(/\/characters\/elio\/private-zone$/);
});
test("asks for consent before opening a user-bound discount plan", async ({
page,
}) => {
await enterChatFromSplash(page);
const input = page.getByRole("textbox", { name: "Message" });
await input.fill("discount offer test");
await input.press("Enter");
const offer = page.getByLabel("Yes, ask for me");
await expect(offer).toContainText("Want me to ask for my best private offer?");
await offer.getByRole("button", { name: "Yes, ask for me" }).click();
await expect(page).toHaveURL(
/\/subscription\?type=vip.*planId=vip_annual.*commercialOfferId=13ec8a10/,
);
});
@@ -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,
},
],
}),
});
});
}
@@ -94,16 +94,8 @@ test("favorite entry and three-tab Menu navigation render on the real pages", as
});
});
await page.goto(defaultCharacterChatPath);
const iosDownload = page.getByRole("button", { name: "Download" });
await expect(iosDownload).toBeVisible();
await iosDownload.click();
await expect(
page.getByRole("heading", { name: "Add CozSweet to Home Screen" }),
).toBeVisible();
await expect(page.getByRole("dialog")).toContainText(
"In Safari, tap the Share button, then choose “Add to Home Screen”.",
);
await savePreview(page, "mobile-ios-external-chat-download.png");
await expect(page.getByRole("button", { name: "Saved" })).toBeVisible();
await savePreview(page, "mobile-ios-external-chat-saved.png");
}
expect(browserErrors.filter(isFeatureRuntimeError)).toEqual([]);
+1 -28
View File
@@ -89,13 +89,6 @@ for (const character of characters) {
test(`${character.displayName} can open a character-scoped Private Zone`, async ({
page,
}) => {
const momentsRequest = page.waitForRequest((request) => {
const url = new URL(request.url());
return (
url.pathname === "/api/private-zone/posts" &&
url.searchParams.get("characterId") === character.id
);
});
const albumRequest = page.waitForRequest((request) => {
const url = new URL(request.url());
return (
@@ -106,15 +99,10 @@ for (const character of characters) {
await page.goto(`/characters/${character.slug}/private-zone`);
await Promise.all([momentsRequest, albumRequest]);
await albumRequest;
await expect(
page.getByRole("heading", { name: "Private albums" }),
).toBeVisible();
await expect(page.getByRole("tab")).toHaveText(["Albums", "Moments"]);
await expect(page.getByRole("tab", { name: "Albums" })).toHaveAttribute(
"aria-selected",
"true",
);
await expect(page.getByText(character.displayName).last()).toBeVisible();
const albumButton = page.getByRole("button", {
name: `View locked collection with 8 images from ${character.displayName}`,
@@ -169,21 +157,6 @@ test("a real Private Zone request failure still offers Retry", async ({
});
async function registerMultiRoleCommercialMocks(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) => {
const url = new URL(route.request().url());
const characterId = url.searchParams.get("characterId") ?? "elio";
+20 -45
View File
@@ -1,8 +1,6 @@
import { expect, test } from "@playwright/test";
import { mockCoreApis } from "@e2e/fixtures/api-mocks";
import { apiEnvelope } from "@e2e/fixtures/data/common";
import { createPaidImageHistoryResponse } from "@e2e/fixtures/data/chat";
import {
paidImageDisplayMessageId,
paidImageMessageId,
@@ -19,6 +17,10 @@ import {
switchToEmailSignIn,
} from "@e2e/fixtures/test-helpers";
const paidImageOverlayUrl = new RegExp(
`${defaultCharacterChatPath}\\?image=${encodeURIComponent(paidImageDisplayMessageId)}$`,
);
test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page, {
@@ -44,18 +46,26 @@ test("guest can unlock a paid image after email login and subscription payment",
message: "给我发图片",
});
const lockedImageCard = page.getByRole("group", {
name: "Locked private image",
const paidImageButton = page.getByRole("button", {
name: "Open image in fullscreen",
}).last();
await expect(lockedImageCard).toBeVisible();
await expect(lockedImageCard.locator("img")).toHaveCount(0);
await lockedImageCard
.getByRole("button", { name: "Unlock private image" })
await expect(paidImageButton).toBeVisible();
await paidImageButton.click();
await expect(page).toHaveURL(paidImageOverlayUrl);
const lockedImageDialog = page.getByRole("dialog", {
name: "Locked fullscreen image",
});
await expect(lockedImageDialog).toBeVisible();
await lockedImageDialog
.getByRole("button", { name: "Unlock high-definition large image" })
.click();
await expect(page).toHaveURL(/\/auth\?redirect=/);
expect(new URL(page.url()).searchParams.get("redirect")).toBe(
defaultCharacterChatPath,
`${defaultCharacterChatPath}?image=${encodeURIComponent(paidImageDisplayMessageId)}`,
);
await switchToEmailSignIn(page);
@@ -63,7 +73,7 @@ test("guest can unlock a paid image after email login and subscription payment",
"**/api/chat/unlock-private",
);
await submitEmailLogin(page, {
expectedUrl: new RegExp(`${defaultCharacterChatPath}$`),
expectedUrl: paidImageOverlayUrl,
});
const unlockRequest = await unlockRequestPromise;
@@ -87,38 +97,3 @@ test("guest can unlock a paid image after email login and subscription payment",
expect(new URL(page.url()).pathname).toBe(defaultCharacterChatPath);
await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
});
test("fullscreen image closes from its back button, the image, and browser history Back", async ({
page,
}) => {
await page.route("**/api/chat/history**", async (route) => {
await route.fulfill({
json: apiEnvelope(createPaidImageHistoryResponse(true)),
});
});
await enterChatFromSplash(page);
await dismissChatInterruptions(page);
const imageButton = page.getByRole("button", {
name: "Open image in fullscreen",
});
const imageDialog = page.getByRole("dialog", { name: "Fullscreen image" });
await imageButton.click();
await expect(imageDialog).toBeVisible();
await imageDialog.getByRole("button", { name: "Back" }).click();
await expect(imageDialog).toHaveCount(0);
await expect(page).toHaveURL(defaultCharacterChatPath);
await imageButton.click();
await expect(imageDialog).toBeVisible();
await imageDialog.locator("img").click();
await expect(imageDialog).toHaveCount(0);
await expect(page).toHaveURL(defaultCharacterChatPath);
await imageButton.click();
await expect(imageDialog).toBeVisible();
await page.goBack();
await expect(imageDialog).toHaveCount(0);
await expect(page).toHaveURL(defaultCharacterChatPath);
});
@@ -1,119 +0,0 @@
import { expect, test, type Page } from "@playwright/test";
import { stripePaymentDialogStyles } from "@/app/_components/payment/stripe-payment-dialog.styles";
import { mockCoreApis } from "@e2e/fixtures/api-mocks";
const viewports = [
{ width: 390, height: 844 },
{ width: 405, height: 797 },
{ width: 540, height: 900 },
] as const;
test.beforeEach(async ({ page }) => {
await mockCoreApis(page);
});
for (const viewport of viewports) {
test(`payment portal stays viewport-bound at ${viewport.width}x${viewport.height}`, async ({
page,
}) => {
await page.setViewportSize(viewport);
await page.goto("/subscription?type=topup", {
waitUntil: "domcontentloaded",
});
await mountPaymentPanel(page, 180);
await expectViewportScrim(page, viewport);
await expectCenteredShortPanel(page, viewport);
await mountPaymentPanel(page, 1_200);
await expectViewportScrim(page, viewport);
await expectScrollableTallPanel(page, viewport);
});
}
async function mountPaymentPanel(page: Page, contentHeight: number) {
await page.evaluate(
({ dialogClassName, overlayClassName, requestedContentHeight }) => {
document.querySelector('[data-testid="payment-layout-overlay"]')?.remove();
document.querySelector('[data-testid="transformed-checkout-host"]')?.remove();
const transformedCheckoutHost = document.createElement("div");
transformedCheckoutHost.dataset.testid = "transformed-checkout-host";
transformedCheckoutHost.style.transform = "translateX(50%)";
document.body.appendChild(transformedCheckoutHost);
const overlay = document.createElement("div");
overlay.dataset.testid = "payment-layout-overlay";
overlay.className = overlayClassName;
const panel = document.createElement("div");
panel.dataset.testid = "payment-layout-panel";
panel.className = dialogClassName;
const content = document.createElement("div");
content.style.height = `${requestedContentHeight}px`;
content.textContent = "Complete payment";
panel.appendChild(content);
overlay.appendChild(panel);
// Mirrors ModalPortal: the overlay must be a body child, never a child of
// the transformed checkout host that triggered it.
document.body.appendChild(overlay);
},
{
dialogClassName: stripePaymentDialogStyles.dialog,
overlayClassName: stripePaymentDialogStyles.overlay,
requestedContentHeight: contentHeight,
},
);
}
async function expectViewportScrim(
page: Page,
viewport: { width: number; height: number },
) {
const overlay = page.getByTestId("payment-layout-overlay");
await expect(overlay).toBeVisible();
const box = await overlay.boundingBox();
expect(box).not.toBeNull();
expect(box?.x).toBeCloseTo(0, 0);
expect(box?.y).toBeCloseTo(0, 0);
expect(box?.width).toBeCloseTo(viewport.width, 0);
expect(box?.height).toBeCloseTo(viewport.height, 0);
await expect(overlay.evaluate((node) => node.parentElement === document.body))
.resolves.toBe(true);
}
async function expectCenteredShortPanel(
page: Page,
viewport: { width: number; height: number },
) {
const panel = page.getByTestId("payment-layout-panel");
const box = await panel.boundingBox();
expect(box).not.toBeNull();
expect(box?.y ?? 0).toBeGreaterThan(100);
expect(Math.abs((box?.y ?? 0) * 2 + (box?.height ?? 0) - viewport.height))
.toBeLessThanOrEqual(2);
}
async function expectScrollableTallPanel(
page: Page,
viewport: { width: number; height: number },
) {
const panel = page.getByTestId("payment-layout-panel");
const box = await panel.boundingBox();
const scrollMetrics = await panel.evaluate((node) => ({
clientHeight: node.clientHeight,
scrollHeight: node.scrollHeight,
}));
expect(box).not.toBeNull();
expect(box?.y ?? 0).toBeGreaterThanOrEqual(15);
expect(box?.y ?? 100).toBeLessThanOrEqual(25);
expect((box?.y ?? 0) + (box?.height ?? 0))
.toBeLessThanOrEqual(viewport.height - 15);
expect(scrollMetrics.scrollHeight).toBeGreaterThan(scrollMetrics.clientHeight);
}
@@ -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);
});
-164
View File
@@ -1,164 +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,
seedEmailSession,
} from "@e2e/fixtures/test-helpers";
const postId = "11111111-1111-1111-1111-111111111111";
let unlocked = false;
test.beforeEach(async ({ baseURL, context, page }) => {
unlocked = false;
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page);
await registerPrivateZoneVideoMocks(page);
});
test("Private Zone defaults to Albums and reveals video after switching to Moments", async ({
page,
}) => {
await seedEmailSession(page);
const listRequest = page.waitForRequest((request) => {
const url = new URL(request.url());
return (
url.pathname === "/api/private-zone/posts" &&
url.searchParams.get("characterId") === "maya-tan"
);
});
await page.goto("/characters/maya/private-zone");
await listRequest;
await expect(
page.getByRole("heading", { name: "Private albums" }),
).toBeVisible();
await expect(page.getByText("Maya archive")).toBeVisible();
await page.getByRole("tab", { name: "Moments" }).click();
await expect(
page.getByRole("heading", { name: "Private moments" }),
).toBeVisible();
await expect(page.getByText("Only for you.")).toBeVisible();
await expect(page.locator("video")).toHaveCount(0);
await page.getByRole("button", { name: "Unlock for 100 credits" }).click();
const dialog = page.getByRole("alertdialog");
await expect(dialog).toContainText("100 credits");
const unlockRequest = page.waitForRequest(
`**/api/private-zone/posts/${postId}/unlock`,
);
await dialog.getByRole("button", { name: "Unlock", exact: true }).click();
expect((await unlockRequest).postDataJSON()).toEqual({ expectedCost: 100 });
const video = page.locator("video");
await expect(video).toHaveCount(1);
await expect(video.locator("source")).toHaveAttribute("src", /video\.mp4/);
await expect(page.getByRole("alertdialog")).toHaveCount(0);
});
test("Albums render first and Moments remain available behind the second tab", async ({ page }) => {
await seedEmailSession(page);
await page.goto("/characters/maya/private-zone");
const tabs = page.getByRole("tab");
await expect(tabs).toHaveText(["Albums", "Moments"]);
await expect(page.getByRole("tab", { name: "Albums" })).toHaveAttribute(
"aria-selected",
"true",
);
await expect(
page.getByRole("heading", { name: "Private albums" }),
).toBeVisible();
await expect(page.getByText("Maya archive")).toBeVisible();
await page.getByRole("tab", { name: "Moments" }).click();
await expect(page.getByRole("tab", { name: "Moments" })).toHaveAttribute(
"aria-selected",
"true",
);
await expect(
page.getByRole("heading", { name: "Private moments" }),
).toBeVisible();
});
async function registerPrivateZoneVideoMocks(page: Page): Promise<void> {
await page.route("**/api/private-zone/posts**", async (route) => {
const url = new URL(route.request().url());
await route.fulfill({
json: apiEnvelope({
characterId: url.searchParams.get("characterId") ?? "maya-tan",
items: [videoPost(unlocked)],
nextCursor: null,
hasMore: false,
creditBalance: unlocked ? 150 : 250,
currency: "credits",
}),
});
});
// Playwright evaluates page routes in reverse registration order. Register
// the specific mutation last so the broader list route cannot intercept it.
await page.route("**/api/private-zone/posts/*/unlock", async (route) => {
unlocked = true;
await route.fulfill({
json: apiEnvelope({
postId,
reason: "ok",
unlocked: true,
creditsCharged: 100,
requiredCredits: 100,
currentCredits: 150,
shortfallCredits: 0,
creditBalance: 150,
post: videoPost(true),
}),
});
});
await page.route("**/api/private-zone/albums**", async (route) => {
await route.fulfill({
json: apiEnvelope({
items: [
{
albumId: "album-maya",
title: "Maya archive",
content: null,
previewText: "Private photos",
imageCount: 1,
images: [{ url: "/images/private-zone/banner/maya.png", locked: true, index: 0 }],
locked: true,
unlocked: false,
unlockCost: 80,
publishedAt: "2026-07-24T10:00:00+00:00",
lockDetail: { locked: true },
},
],
creditBalance: 250,
pendingImageCount: 0,
hasIncompleteContent: false,
}),
});
});
}
function videoPost(isUnlocked: boolean) {
return {
postId,
characterId: "maya-tan",
caption: "Only for you.",
posterUrl: "/images/private-zone/banner/maya.png",
mediaType: "video",
videoUrl: isUnlocked ? "/test-video.mp4?token=short" : null,
videoMimeType: "video/mp4",
videoSizeBytes: 1024,
durationSeconds: 18,
unlockCostCredits: 100,
currency: "credits",
locked: !isUnlocked,
unlocked: isUnlocked,
availableForNewUnlock: true,
publishedAt: "2026-07-24T10:00:00+00:00",
};
}
@@ -2,16 +2,22 @@ import { expect, test } from "@playwright/test";
import { mockCoreApis } from "@e2e/fixtures/api-mocks";
import {
paidImageDisplayMessageId,
paidImageMessageId,
} from "@e2e/fixtures/test-data";
import {
clearBrowserState,
defaultCharacterChatPath,
dismissChatInterruptions,
expectInsufficientCreditsDialog,
expectVipChatSubscriptionUrl,
signInWithEmailAndOpenChat,
} from "@e2e/fixtures/test-helpers";
const paidImageOverlayUrl = new RegExp(
`${defaultCharacterChatPath}\\?image=${encodeURIComponent(paidImageDisplayMessageId)}$`,
);
test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page, {
@@ -19,23 +25,30 @@ test.beforeEach(async ({ baseURL, context, page }) => {
});
});
test("user sees insufficient credits when unlocking from the locked image card and can navigate to subscription", async ({
test("user sees insufficient credits when unlocking a paid image from fullscreen and can navigate to subscription", async ({
page,
}) => {
await signInWithEmailAndOpenChat(page);
await dismissChatInterruptions(page);
const lockedImageCard = page.getByRole("group", {
name: "Locked private image",
const paidImageButton = page.getByRole("button", {
name: "Open image in fullscreen",
}).last();
await expect(lockedImageCard).toBeVisible({ timeout: 10_000 });
await expect(lockedImageCard.locator("img")).toHaveCount(0);
await expect(paidImageButton).toBeVisible({ timeout: 10_000 });
await paidImageButton.click();
await expect(page).toHaveURL(paidImageOverlayUrl);
const lockedImageDialog = page.getByRole("dialog", {
name: "Locked fullscreen image",
});
await expect(lockedImageDialog).toBeVisible();
const unlockRequestPromise = page.waitForRequest(
"**/api/chat/unlock-private",
);
await lockedImageCard
.getByRole("button", { name: "Unlock private image" })
await lockedImageDialog
.getByRole("button", { name: "Unlock high-definition large image" })
.click();
const unlockRequest = await unlockRequestPromise;
-1
View File
@@ -5,7 +5,6 @@ NEXTAUTH_URL=https://frontend-test.banlv-ai.com
NEXTAUTH_URL_INTERNAL=http://localhost:3000
NEXT_PUBLIC_API_BASE_URL=https://proapi.banlv-ai.com
NEXT_PUBLIC_WS_BASE_URL=wss://proapi.banlv-ai.com/ws
NEXT_PUBLIC_ENABLE_VOICE_CALL=false
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51Te8ybEJDtUGxQHo0UMySJ2hW0vVryynzllmIUI3UQdQCFgxNLci0Jmm2lQkRsTaIP7C7IQlFzfFyBJ5rOhr1ML800G8P8DF5R
NEXT_PUBLIC_API_CONNECT_TIMEOUT=30000
-1
View File
@@ -10,7 +10,6 @@ NEXT_PUBLIC_API_BASE_URL=https://api.banlv-ai.com
# WebSocket URL(生产环境)
NEXT_PUBLIC_WS_BASE_URL=wss://api.banlv-ai.com/ws
NEXT_PUBLIC_ENABLE_VOICE_CALL=false
# Stripe 支付(publishable key 可暴露在浏览器端)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_51Te8ybEJDtUGxQHouKlEMfMuCZWifzlhBIReeKvANOtyCXS4zL0SMTWJXiFHPKz7azpF6OnIKXUPFSLs82fevVjr00w1bw5mvl
Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 35 KiB

-1
View File
@@ -50,7 +50,6 @@
"next-auth": "^4.24.14",
"ofetch": "^1.5.1",
"pino": "^10.3.1",
"qrcode.react": "^4.2.0",
"react": "19.2.4",
"react-dom": "19.2.4",
"react-icons": "^5.6.0",
-12
View File
@@ -50,9 +50,6 @@ importers:
pino:
specifier: ^10.3.1
version: 10.3.1
qrcode.react:
specifier: ^4.2.0
version: 4.2.0(react@19.2.4)
react:
specifier: 19.2.4
version: 19.2.4
@@ -3293,11 +3290,6 @@ packages:
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
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:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@@ -7093,10 +7085,6 @@ snapshots:
punycode@2.3.1: {}
qrcode.react@4.2.0(react@19.2.4):
dependencies:
react: 19.2.4
queue-microtask@1.2.3: {}
quick-format-unescaped@4.0.4: {}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 35 KiB

+2 -2
View File
@@ -11,13 +11,13 @@
"lang": "en",
"icons": [
{
"src": "/images/icons/Icon-192.png?v=20260724",
"src": "/images/icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/images/icons/Icon-512.png?v=20260724",
"src": "/images/icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
@@ -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/);
});
+2
View File
@@ -49,6 +49,8 @@ echo "=== compose project: $COMPOSE_PROJECT_NAME ==="
"${COMPOSE[@]}" up -d --remove-orphans --no-build web
"${COMPOSE[@]}" ps
docker image prune -f
prune_project_images() {
local retain_count="$1"
if ! [[ "$retain_count" =~ ^[0-9]+$ ]] || [ "$retain_count" -le 0 ]; then
@@ -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
@@ -1,80 +0,0 @@
/* @vitest-environment jsdom */
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { BrowserDetector } from "@/utils/browser-detect";
import { PlatformDetector } from "@/utils/platform-detect";
import { pwaUtil } from "@/utils/pwa";
import { FavoriteEntryButton } from "../favorite-entry-button";
describe("FavoriteEntryButton install flow", () => {
let container: HTMLDivElement;
let root: Root;
beforeEach(() => {
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
.IS_REACT_ACT_ENVIRONMENT = true;
window.localStorage.setItem("cozsweet:favorite_entry", "1");
vi.spyOn(BrowserDetector, "isInAppBrowser").mockReturnValue(false);
vi.spyOn(pwaUtil, "isInstalled").mockReturnValue(false);
vi.spyOn(pwaUtil, "prepareInstallPrompt").mockImplementation(() => undefined);
vi.spyOn(pwaUtil, "subscribe").mockReturnValue(() => undefined);
container = document.createElement("div");
document.body.append(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
window.localStorage.clear();
vi.restoreAllMocks();
});
it("shows Download on iOS and opens Safari add-to-home instructions", () => {
vi.spyOn(PlatformDetector, "isIOS").mockReturnValue(true);
vi.spyOn(PlatformDetector, "isAndroid").mockReturnValue(false);
renderButton();
const downloadButton = getButton("Download");
act(() => downloadButton.click());
expect(container.querySelector('[role="dialog"]')).not.toBeNull();
expect(container.textContent).toContain("Add CozSweet to Home Screen");
expect(container.textContent).toContain(
"In Safari, tap the Share button, then choose “Add to Home Screen”.",
);
});
it("opens the native Android install prompt and marks an accepted install as Saved", async () => {
vi.spyOn(PlatformDetector, "isIOS").mockReturnValue(false);
vi.spyOn(PlatformDetector, "isAndroid").mockReturnValue(true);
const install = vi.spyOn(pwaUtil, "install").mockResolvedValue("accepted");
renderButton();
await act(async () => {
getButton("Download").click();
await Promise.resolve();
});
expect(install).toHaveBeenCalledTimes(1);
expect(getButton("Saved")).not.toBeNull();
});
function renderButton(): void {
act(() => {
root.render(<FavoriteEntryButton characterSlug="elio" />);
});
}
function getButton(label: string): HTMLButtonElement {
const button = container.querySelector<HTMLButtonElement>(
`button[aria-label="${label}"]`,
);
if (!button) throw new Error(`Missing button: ${label}`);
return button;
}
});
@@ -1,119 +0,0 @@
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { ModalPortal } from "../modal-portal";
describe("ModalPortal", () => {
let container: HTMLDivElement;
let root: Root;
beforeEach(() => {
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
.IS_REACT_ACT_ENVIRONMENT = true;
container = document.createElement("div");
container.style.transform = "translateX(50%)";
document.body.appendChild(container);
document.body.style.overflow = "auto";
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
document.body.style.overflow = "";
});
it("portals outside transformed ancestors and exposes dialog semantics", () => {
const onClose = vi.fn();
act(() =>
root.render(
<ModalPortal
open
onClose={onClose}
scrimClassName="fixed inset-0"
panelClassName="payment-panel"
scrimOpacity={0.5}
role="alertdialog"
ariaLabelledBy="payment-title"
ariaDescribedBy="payment-description"
>
<h2 id="payment-title">Complete payment</h2>
<p id="payment-description">Choose a payment method.</p>
</ModalPortal>,
),
);
const dialog = document.body.querySelector('[role="alertdialog"]');
expect(dialog).not.toBeNull();
expect(container.contains(dialog)).toBe(false);
expect(dialog?.parentElement?.parentElement).toBe(document.body);
expect(dialog?.getAttribute("aria-labelledby")).toBe("payment-title");
expect(dialog?.getAttribute("aria-describedby")).toBe(
"payment-description",
);
expect(document.body.style.overflow).toBe("hidden");
});
it("restores the previous body overflow after the final modal closes", () => {
const renderModals = (showFirst: boolean, showSecond: boolean) => (
<>
<ModalPortal
open={showFirst}
onClose={() => undefined}
scrimClassName="first-scrim"
panelClassName="first-panel"
scrimOpacity={0.4}
>
First
</ModalPortal>
<ModalPortal
open={showSecond}
onClose={() => undefined}
scrimClassName="second-scrim"
panelClassName="second-panel"
scrimOpacity={0.4}
>
Second
</ModalPortal>
</>
);
act(() => root.render(renderModals(true, true)));
expect(document.body.style.overflow).toBe("hidden");
act(() => root.render(renderModals(false, true)));
expect(document.body.style.overflow).toBe("hidden");
act(() => root.render(renderModals(false, false)));
expect(document.body.style.overflow).toBe("auto");
});
it("keeps persistent payment modals open on scrim click and Escape", () => {
const onClose = vi.fn();
act(() =>
root.render(
<ModalPortal
open
persistent
onClose={onClose}
scrimClassName="fixed inset-0"
panelClassName="payment-panel"
scrimOpacity={0.5}
>
Payment
</ModalPortal>,
),
);
const scrim = document.body.querySelector(".fixed.inset-0");
act(() => scrim?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
act(() =>
document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" })),
);
expect(onClose).not.toHaveBeenCalled();
});
});
@@ -78,98 +78,19 @@
outline-color: #f84d96;
}
.guideBackdrop {
position: fixed;
inset: 0;
z-index: 240;
display: flex;
align-items: center;
justify-content: center;
padding:
calc(18px + var(--app-safe-top, 0px))
calc(18px + var(--app-safe-right, 0px))
calc(18px + var(--app-safe-bottom, 0px))
calc(18px + var(--app-safe-left, 0px));
background: rgba(15, 11, 18, 0.58);
backdrop-filter: blur(4px);
}
.guideDialog {
position: relative;
display: flex;
width: min(100%, 340px);
flex-direction: column;
align-items: center;
padding: 28px 22px 20px;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 28px;
background: rgba(255, 250, 252, 0.98);
box-shadow: 0 24px 70px rgba(33, 17, 26, 0.3);
color: #2d2026;
text-align: center;
}
.guideClose {
.hint {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
background: rgba(45, 32, 38, 0.07);
color: #5b4a52;
cursor: pointer;
}
.guideIcon {
display: inline-flex;
width: 58px;
height: 58px;
align-items: center;
justify-content: center;
margin-bottom: 14px;
border-radius: 19px;
background: linear-gradient(135deg, #ff82b2, #f84d96);
box-shadow: 0 12px 26px rgba(248, 77, 150, 0.26);
top: calc(100% + 8px);
right: 0;
z-index: 45;
width: max-content;
max-width: min(72vw, 250px);
padding: 8px 10px;
border-radius: 10px;
background: rgba(22, 18, 25, 0.94);
color: #ffffff;
}
.guideDialog h2 {
margin: 0;
color: #281a21;
font-size: 21px;
font-weight: 850;
line-height: 1.2;
}
.guideDialog p {
margin: 12px 0 20px;
color: #685761;
font-size: 15px;
font-weight: 650;
line-height: 1.5;
}
.guideConfirm {
width: 100%;
min-height: 46px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #ff76ab, #f84d96);
box-shadow: 0 10px 24px rgba(248, 77, 150, 0.24);
color: #ffffff;
cursor: pointer;
font: inherit;
font-size: 16px;
font-weight: 850;
}
.guideClose:focus-visible,
.guideConfirm:focus-visible {
outline: 2px solid #f84d96;
outline-offset: 3px;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}
@@ -1,7 +1,7 @@
"use client";
import { useEffect, useId, useState } from "react";
import { Download, Share2, Star, X } from "lucide-react";
import { useEffect, useState } from "react";
import { Download, Star } from "lucide-react";
import { openChatInExternalBrowser } from "@/lib/chat/chat_external_browser";
import {
@@ -25,10 +25,7 @@ export function FavoriteEntryButton({
tone = "dark",
}: FavoriteEntryButtonProps) {
const [mode, setMode] = useState<FavoriteEntryMode>("favorite");
const [installGuide, setInstallGuide] = useState<
"ios" | "browser" | null
>(null);
const installGuideTitleId = useId();
const [installHint, setInstallHint] = useState(false);
useEffect(() => {
const updateMode = () => {
@@ -49,15 +46,6 @@ export function FavoriteEntryButton({
return unsubscribe;
}, []);
useEffect(() => {
if (!installGuide) return;
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") setInstallGuide(null);
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [installGuide]);
const handleClick = async (): Promise<void> => {
if (mode === "favorite") {
await openChatInExternalBrowser({ characterSlug });
@@ -65,18 +53,14 @@ export function FavoriteEntryButton({
}
if (mode === "download") {
if (PlatformDetector.isIOS()) {
setInstallGuide("ios");
return;
}
pwaUtil.prepareInstallPrompt();
const result = await pwaUtil.install();
if (result === "accepted" || pwaUtil.isInstalled()) {
setMode("saved");
setInstallGuide(null);
setInstallHint(false);
return;
}
if (result === "unavailable") setInstallGuide("browser");
if (result === "unavailable") setInstallHint(true);
}
};
@@ -107,49 +91,10 @@ export function FavoriteEntryButton({
)}
{mode === "favorite" ? null : <span>{label}</span>}
</button>
{installGuide ? (
<div
className={styles.guideBackdrop}
onClick={() => setInstallGuide(null)}
role="presentation"
>
<section
className={styles.guideDialog}
role="dialog"
aria-modal="true"
aria-labelledby={installGuideTitleId}
onClick={(event) => event.stopPropagation()}
>
<button
type="button"
className={styles.guideClose}
onClick={() => setInstallGuide(null)}
aria-label="Close install instructions"
>
<X size={18} aria-hidden="true" />
</button>
<span className={styles.guideIcon} aria-hidden="true">
{installGuide === "ios" ? (
<Share2 size={28} strokeWidth={2.2} />
) : (
<Download size={28} strokeWidth={2.2} />
)}
</span>
<h2 id={installGuideTitleId}>Add CozSweet to Home Screen</h2>
<p>
{installGuide === "ios"
? "In Safari, tap the Share button, then choose “Add to Home Screen”."
: "Open your browser menu, then choose “Add to Home screen”."}
</p>
<button
type="button"
className={styles.guideConfirm}
onClick={() => setInstallGuide(null)}
>
Got it
</button>
</section>
</div>
{installHint ? (
<span className={styles.hint} role="status">
Chrome menu Add to Home screen
</span>
) : null}
</div>
);
+1 -9
View File
@@ -20,10 +20,7 @@ export interface ModalPortalProps {
scrimOpacity: number;
panelStyle?: CSSProperties;
persistent?: boolean;
role?: "dialog" | "alertdialog";
ariaLabel?: string;
ariaLabelledBy?: string;
ariaDescribedBy?: string;
}
export function ModalPortal({
@@ -35,10 +32,7 @@ export function ModalPortal({
scrimOpacity,
panelStyle,
persistent = false,
role = "dialog",
ariaLabel,
ariaLabelledBy,
ariaDescribedBy,
}: ModalPortalProps) {
useEffect(() => {
if (!open || typeof document === "undefined") return;
@@ -69,11 +63,9 @@ export function ModalPortal({
onClick={handleScrimClick}
>
<div
role={role}
role="dialog"
aria-modal="true"
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
aria-describedby={ariaDescribedBy}
className={panelClassName}
style={panelStyle}
onClick={(event) => event.stopPropagation()}
@@ -1,47 +1,23 @@
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it, vi } from "vitest";
import { PaymentLaunchDialogs } from "../payment-launch-dialogs";
const hiddenLaunch = {
handleEzpayCancel: vi.fn(),
handleEzpayConfirm: vi.fn(),
handleRegionalQrClose: vi.fn(),
handleStripeClose: vi.fn(),
handleStripeConfirmed: vi.fn(),
isConfirmingEzpay: false,
regionalQrErrorMessage: null,
regionalQrPayment: null,
regionalQrStatus: null,
shouldShowEzpayConfirmDialog: false,
shouldShowRegionalQrDialog: false,
shouldShowStripeDialog: false,
stripeClientSecret: null,
};
describe("PaymentLaunchDialogs", () => {
let container: HTMLDivElement;
let root: Root;
beforeEach(() => {
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
.IS_REACT_ACT_ENVIRONMENT = true;
container = document.createElement("div");
container.style.transform = "translateX(50%)";
document.body.appendChild(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
document.body.style.overflow = "";
});
it("renders nothing when neither payment dialog is active", () => {
act(() =>
root.render(
expect(
renderToStaticMarkup(
<PaymentLaunchDialogs
currentOrderId={null}
externalCheckoutAnalyticsKey="payment.external_checkout"
@@ -49,145 +25,28 @@ describe("PaymentLaunchDialogs", () => {
launch={hiddenLaunch}
/>,
),
);
expect(document.body.querySelector('[role="dialog"]')).toBeNull();
expect(document.body.querySelector('[role="alertdialog"]')).toBeNull();
).toBe("");
});
it("portals the shared Ezpay confirmation outside transformed checkout UI", () => {
act(() =>
root.render(
<PaymentLaunchDialogs
currentOrderId="order-123"
externalCheckoutAnalyticsKey="tip.external_checkout"
ezpayDescription="Your coffee order is ready."
launch={{
...hiddenLaunch,
isConfirmingEzpay: true,
shouldShowEzpayConfirmDialog: true,
}}
/>,
),
it("renders the shared Ezpay confirmation content", () => {
const html = renderToStaticMarkup(
<PaymentLaunchDialogs
currentOrderId="order-123"
externalCheckoutAnalyticsKey="tip.external_checkout"
ezpayDescription="Your coffee order is ready."
launch={{
...hiddenLaunch,
isConfirmingEzpay: true,
shouldShowEzpayConfirmDialog: true,
}}
/>,
);
const dialog = document.body.querySelector('[role="alertdialog"]');
expect(dialog).not.toBeNull();
expect(container.contains(dialog)).toBe(false);
expect(dialog?.parentElement?.parentElement).toBe(document.body);
expect(dialog?.textContent).toContain("Continue to payment?");
expect(dialog?.textContent).toContain("Your coffee order is ready.");
expect(dialog?.textContent).toContain("Order No. order-123");
expect(
dialog?.querySelector("button[data-analytics-key]")?.getAttribute(
"data-analytics-key",
),
).toBe("tip.external_checkout");
expect(dialog?.textContent).toContain("Opening...");
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");
expect(html).toContain('role="alertdialog"');
expect(html).toContain("Continue to GCash?");
expect(html).toContain("Your coffee order is ready.");
expect(html).toContain("Order No. order-123");
expect(html).toContain('data-analytics-key="tip.external_checkout"');
expect(html).toContain("Opening...");
});
});
@@ -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", () => {
const html = renderToStaticMarkup(
<PaymentMethodSelector
@@ -1,63 +0,0 @@
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { StripePaymentDialogLoading } from "../lazy-stripe-payment-dialog";
import { StripePaymentDialog } from "../stripe-payment-dialog";
describe("Stripe payment portal states", () => {
let container: HTMLDivElement;
let root: Root;
beforeEach(() => {
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
.IS_REACT_ACT_ENVIRONMENT = true;
container = document.createElement("div");
container.style.transform = "translateX(50%)";
document.body.appendChild(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
document.body.style.overflow = "";
});
it("portals the unavailable state and keeps its explicit close action", () => {
const onClose = vi.fn();
act(() =>
root.render(
<StripePaymentDialog
clientSecret="client-secret"
onClose={onClose}
/>,
),
);
const dialog = document.body.querySelector('[role="alertdialog"]');
expect(dialog).not.toBeNull();
expect(container.contains(dialog)).toBe(false);
expect(dialog?.textContent).toContain("Payment unavailable");
expect(dialog?.getAttribute("aria-labelledby")).toBeTruthy();
expect(dialog?.getAttribute("aria-describedby")).toBeTruthy();
const okButton = Array.from(dialog?.querySelectorAll("button") ?? []).find(
(button) => button.textContent === "OK",
);
act(() => okButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
expect(onClose).toHaveBeenCalledOnce();
});
it("portals the lazy loading state", () => {
act(() => root.render(<StripePaymentDialogLoading />));
const dialog = document.body.querySelector('[role="dialog"]');
expect(dialog).not.toBeNull();
expect(container.contains(dialog)).toBe(false);
expect(dialog?.textContent).toContain("Preparing secure payment");
expect(dialog?.textContent).toContain("Loading payment methods...");
expect(dialog?.querySelector('[aria-busy="true"]')).not.toBeNull();
});
});
@@ -2,8 +2,6 @@
import dynamic from "next/dynamic";
import { ModalPortal } from "@/app/_components/core/modal-portal";
import type { StripePaymentDialogProps } from "./stripe-payment-dialog";
import { stripePaymentDialogStyles as styles } from "./stripe-payment-dialog.styles";
@@ -22,28 +20,22 @@ export function LazyStripePaymentDialog(props: StripePaymentDialogProps) {
return <StripePaymentDialog {...props} />;
}
export function StripePaymentDialogLoading() {
function StripePaymentDialogLoading() {
return (
<ModalPortal
open
persistent
onClose={() => undefined}
scrimClassName={styles.overlay}
panelClassName={styles.dialog}
scrimOpacity={0.5}
ariaLabelledBy="stripe-payment-loading-title"
ariaDescribedBy="stripe-payment-loading-description"
<div
className={styles.overlay}
role="dialog"
aria-modal="true"
aria-labelledby="stripe-payment-loading-title"
>
<div aria-busy="true">
<div className={styles.dialog} aria-busy="true">
<div className={styles.header}>
<h2 id="stripe-payment-loading-title" className={styles.title}>
Preparing secure payment
</h2>
<p id="stripe-payment-loading-description" className={styles.content}>
Loading payment methods...
</p>
<p className={styles.content}>Loading payment methods...</p>
</div>
</div>
</ModalPortal>
</div>
);
}
@@ -1,9 +1,7 @@
"use client";
import { useId, type ReactNode } from "react";
import { QRCodeSVG } from "qrcode.react";
import { ModalPortal } from "@/app/_components/core/modal-portal";
import type { PaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
import { LazyStripePaymentDialog } from "./lazy-stripe-payment-dialog";
@@ -13,15 +11,10 @@ type PaymentLaunchDialogFlow = Pick<
PaymentLaunchFlow,
| "handleEzpayCancel"
| "handleEzpayConfirm"
| "handleRegionalQrClose"
| "handleStripeClose"
| "handleStripeConfirmed"
| "isConfirmingEzpay"
| "regionalQrErrorMessage"
| "regionalQrPayment"
| "regionalQrStatus"
| "shouldShowEzpayConfirmDialog"
| "shouldShowRegionalQrDialog"
| "shouldShowStripeDialog"
| "stripeClientSecret"
>;
@@ -53,14 +46,6 @@ export function PaymentLaunchDialogs({
onConfirm={launch.handleEzpayConfirm}
/>
) : null}
{launch.shouldShowRegionalQrDialog && launch.regionalQrPayment ? (
<RegionalQrPaymentDialog
payment={launch.regionalQrPayment}
status={launch.regionalQrStatus}
errorMessage={launch.regionalQrErrorMessage}
onClose={launch.handleRegionalQrClose}
/>
) : null}
{launch.shouldShowStripeDialog && launch.stripeClientSecret ? (
<LazyStripePaymentDialog
clientSecret={launch.stripeClientSecret}
@@ -73,151 +58,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 {
description: ReactNode;
externalCheckoutAnalyticsKey: string;
@@ -238,43 +78,41 @@ function EzpayRedirectConfirmDialog({
const titleId = useId();
return (
<ModalPortal
open
persistent
onClose={onCancel}
scrimClassName={styles.overlay}
panelClassName={styles.dialog}
scrimOpacity={0.5}
<div
className={styles.overlay}
role="alertdialog"
ariaLabelledBy={titleId}
aria-modal="true"
aria-labelledby={titleId}
>
<div className={styles.header}>
<h2 id={titleId} className={styles.title}>
Continue to payment?
</h2>
<p className={styles.content}>{description}</p>
<p className={styles.content}>Order No. {orderId}</p>
<div className={styles.dialog}>
<div className={styles.header}>
<h2 id={titleId} className={styles.title}>
Continue to GCash?
</h2>
<p className={styles.content}>{description}</p>
<p className={styles.content}>Order No. {orderId}</p>
</div>
<div className={styles.actions}>
<button
type="button"
className={`${styles.button} ${styles.secondary}`}
disabled={isConfirming}
onClick={onCancel}
>
Cancel
</button>
<button
type="button"
data-analytics-key={externalCheckoutAnalyticsKey}
data-analytics-label="Continue to external checkout"
className={`${styles.button} ${styles.primary}`}
disabled={isConfirming}
onClick={onConfirm}
>
{isConfirming ? "Opening..." : "Continue"}
</button>
</div>
</div>
<div className={styles.actions}>
<button
type="button"
className={`${styles.button} ${styles.secondary}`}
disabled={isConfirming}
onClick={onCancel}
>
Cancel
</button>
<button
type="button"
data-analytics-key={externalCheckoutAnalyticsKey}
data-analytics-label="Continue to external checkout"
className={`${styles.button} ${styles.primary}`}
disabled={isConfirming}
onClick={onConfirm}
>
{isConfirming ? "Opening..." : "Continue"}
</button>
</div>
</ModalPortal>
</div>
);
}
@@ -44,24 +44,13 @@ export function PaymentMethodSelector({
}: PaymentMethodSelectorProps) {
if (!config.showPaymentMethodSelector) return null;
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 =
config.initialPayChannel === "ezpay"
? [...configuredPaymentMethods].sort((a, b) =>
? [...PAYMENT_METHODS].sort((a, b) =>
a.channel === "ezpay" ? -1 : b.channel === "ezpay" ? 1 : 0,
)
: configuredPaymentMethods;
: PAYMENT_METHODS;
return (
<section
@@ -2,7 +2,7 @@ export const stripePaymentDialogStyles = {
overlay:
"fixed inset-0 z-70 flex items-center justify-center bg-[rgba(0,0,0,0.5)] pb-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-bottom,0))] pl-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-left,0))] pr-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-right,0))] pt-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-top,0))]",
dialog:
"max-h-[calc(var(--app-visible-height,100dvh)-calc(var(--dialog-safe-margin,20px)*2))] w-full max-w-(--dialog-wide-max-width,420px) overflow-y-auto overscroll-contain rounded-(--responsive-card-radius,32px) bg-(--color-page-background,#ffffff) px-(--responsive-card-padding,18px) pb-(--responsive-card-padding,18px) pt-(--responsive-card-padding-lg,24px) shadow-[0_18px_40px_rgba(0,0,0,0.16)]",
"max-h-[calc(var(--app-visible-height,100dvh)-calc(var(--dialog-safe-margin,20px)*2))] w-full max-w-(--dialog-wide-max-width,420px) overflow-y-auto rounded-(--responsive-card-radius,32px) bg-(--color-page-background,#ffffff) px-(--responsive-card-padding,18px) pb-(--responsive-card-padding,18px) pt-(--responsive-card-padding-lg,24px) shadow-[0_18px_40px_rgba(0,0,0,0.16)]",
header: "mb-(--page-section-gap,18px) text-left",
title:
"m-0 mb-[clamp(7px,1.481vw,8px)] text-(length:--responsive-page-title,22px) font-bold leading-[1.2] text-text-foreground",
@@ -4,7 +4,7 @@
*
* 后端当前返回 PaymentIntent clientSecret,因此这里直接用它完成前端确认。
*/
import { useId, useState, type FormEvent } from "react";
import { useState, type FormEvent } from "react";
import {
Elements,
PaymentElement,
@@ -13,7 +13,6 @@ import {
} from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import { ModalPortal } from "@/app/_components/core/modal-portal";
import { ExceptionHandler } from "@/core/errors";
import { ROUTES } from "@/router/routes";
import { Logger } from "@/utils/logger";
@@ -39,84 +38,69 @@ export function StripePaymentDialog({
onClose,
onConfirmed,
}: StripePaymentDialogProps) {
const titleId = useId();
const descriptionId = useId();
if (!stripePromise) {
return (
<ModalPortal
open
persistent
onClose={onClose}
scrimClassName={styles.overlay}
panelClassName={styles.dialog}
scrimOpacity={0.5}
role="alertdialog"
ariaLabelledBy={titleId}
ariaDescribedBy={descriptionId}
>
<div className={styles.header}>
<h2 id={titleId} className={styles.title}>
Payment unavailable
</h2>
<p id={descriptionId} className={styles.content}>
Stripe publishable key is not configured for this build.
</p>
<div className={styles.overlay} role="alertdialog" aria-modal="true">
<div className={styles.dialog}>
<div className={styles.header}>
<h2 className={styles.title}>Payment unavailable</h2>
<p className={styles.content}>
Stripe publishable key is not configured for this build.
</p>
</div>
<div className={styles.actions}>
<button
type="button"
className={`${styles.button} ${styles.primary}`}
onClick={onClose}
>
OK
</button>
</div>
</div>
<div className={styles.actions}>
<button
type="button"
className={`${styles.button} ${styles.primary}`}
onClick={onClose}
>
OK
</button>
</div>
</ModalPortal>
</div>
);
}
return (
<ModalPortal
open
persistent
onClose={onClose}
scrimClassName={styles.overlay}
panelClassName={styles.dialog}
scrimOpacity={0.5}
ariaLabelledBy={titleId}
ariaDescribedBy={descriptionId}
<div
className={styles.overlay}
role="dialog"
aria-modal="true"
aria-labelledby="stripe-payment-title"
>
<div className={styles.header}>
<h2 id={titleId} className={styles.title}>
Complete payment
</h2>
<p id={descriptionId} className={styles.content}>
Enter your payment details securely through Stripe.
</p>
</div>
<Elements
key={clientSecret}
stripe={stripePromise}
options={{
clientSecret,
appearance: {
theme: "stripe",
variables: {
borderRadius: "14px",
colorPrimary: "#ff52a2",
colorText: "#171717",
<div className={styles.dialog}>
<div className={styles.header}>
<h2 id="stripe-payment-title" className={styles.title}>
Complete payment
</h2>
<p className={styles.content}>
Enter your payment details securely through Stripe.
</p>
</div>
<Elements
key={clientSecret}
stripe={stripePromise}
options={{
clientSecret,
appearance: {
theme: "stripe",
variables: {
borderRadius: "14px",
colorPrimary: "#ff52a2",
colorText: "#171717",
},
},
},
}}
>
<StripePaymentForm
returnPath={returnPath}
onClose={onClose}
onConfirmed={onConfirmed}
/>
</Elements>
</ModalPortal>
}}
>
<StripePaymentForm
returnPath={returnPath}
onClose={onClose}
onConfirmed={onConfirmed}
/>
</Elements>
</div>
</div>
);
}
+26 -179
View File
@@ -4,11 +4,9 @@ import { type Dispatch, useEffect, useRef, useState } from "react";
import {
getPaymentUrl,
getPaymentUrlHostname,
getStripeClientSecret,
isEzpayPayment,
launchEzpayRedirect,
resolveEzpayLaunchTarget,
} from "@/lib/payment/payment_launch";
import { behaviorAnalytics } from "@/lib/analytics";
import type {
@@ -42,63 +40,21 @@ export interface UsePaymentLaunchFlowInput {
subscriptionType: PendingPaymentSubscriptionType;
giftCategory?: string | null;
giftPlanId?: string | null;
countryCode?: string | null;
}
export interface PaymentLaunchFlow {
ezpayPaymentUrl: string | null;
handleEzpayCancel: () => void;
handleEzpayConfirm: () => void;
handleRegionalQrClose: () => void;
handleStripeClose: () => void;
handleStripeConfirmed: () => void;
isConfirmingEzpay: boolean;
regionalQrErrorMessage: string | null;
regionalQrPayment: RegionalQrPaymentDetails | null;
regionalQrStatus: PaymentContextState["orderStatus"];
resetLaunchState: () => void;
shouldShowEzpayConfirmDialog: boolean;
shouldShowRegionalQrDialog: boolean;
shouldShowStripeDialog: boolean;
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(
payment: PaymentContextState,
checkoutUrl: string,
@@ -156,7 +112,6 @@ export function usePaymentLaunchFlow({
subscriptionType,
giftCategory,
giftPlanId,
countryCode,
}: UsePaymentLaunchFlowInput): PaymentLaunchFlow {
const launchedNonceRef = useRef(0);
const [hiddenStripeClientSecret, setHiddenStripeClientSecret] = useState<
@@ -166,42 +121,9 @@ export function usePaymentLaunchFlow({
const stripeClientSecret = payment.payParams
? getStripeClientSecret(payment.payParams)
: null;
const selectedPlan = payment.plans.find(
(item) => item.planId === payment.selectedPlanId,
);
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;
const ezpayPaymentUrl = payment.payParams
? getPaymentUrl(payment.payParams)
: null;
useEffect(() => {
if (!payment.payParams || payment.launchNonce <= launchedNonceRef.current) {
return;
@@ -214,95 +136,39 @@ export function usePaymentLaunchFlow({
return;
}
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;
}
const paymentUrl = getPaymentUrl(payment.payParams);
if (paymentUrl) {
const isEzpay = isEzpayPayment(payment.payParams);
if (target.kind === "qr") {
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()) {
if (!AppEnvUtil.isProduction() && isEzpay) {
log.debug(`[${logScope}] ezpay confirmation required`, {
orderId: payment.currentOrderId,
paymentUrlHost: getPaymentUrlHostname(paymentUrl),
paymentUrl,
subscriptionType,
});
return;
}
void launchEzpayRedirect({
orderId: payment.currentOrderId,
paymentUrl,
subscriptionType,
giftCategory,
giftPlanId,
...(returnTo ? { returnTo } : {}),
...(characterSlug ? { characterSlug } : {}),
onOpened: () => trackPaymentCheckoutOpened(payment, paymentUrl),
onFailed: (errorMessage) => {
trackPaymentCheckoutFailed(payment, "payment_redirect_failed");
paymentDispatch({ type: "PaymentLaunchFailed", errorMessage });
},
});
return;
}
if (isEzpay) {
void launchEzpayRedirect({
orderId: payment.currentOrderId,
paymentUrl,
subscriptionType,
giftCategory,
giftPlanId,
...(returnTo ? { returnTo } : {}),
...(characterSlug ? { characterSlug } : {}),
onOpened: () => trackPaymentCheckoutOpened(payment, paymentUrl),
onFailed: (errorMessage) => {
trackPaymentCheckoutFailed(payment, "payment_redirect_failed");
paymentDispatch({ type: "PaymentLaunchFailed", errorMessage });
},
});
return;
}
const paymentUrl = getPaymentUrl(payment.payParams);
if (paymentUrl) {
try {
window.location.assign(paymentUrl);
window.location.href = paymentUrl;
trackPaymentCheckoutOpened(payment, paymentUrl);
} catch {
trackPaymentCheckoutFailed(payment, "payment_redirect_failed");
@@ -323,7 +189,6 @@ export function usePaymentLaunchFlow({
log,
logScope,
characterSlug,
countryCode,
payment.currentOrderId,
payment,
payment.launchNonce,
@@ -332,7 +197,6 @@ export function usePaymentLaunchFlow({
payment.plans,
payment.selectedPlanId,
paymentDispatch,
paymentCurrency,
returnTo,
subscriptionType,
giftCategory,
@@ -349,9 +213,6 @@ export function usePaymentLaunchFlow({
payParams: payment.payParams,
paymentUrl: ezpayPaymentUrl,
});
const shouldShowRegionalQrDialog = Boolean(
regionalQrPayment && !payment.isPaid,
);
function resetLaunchState(): void {
setIsConfirmingEzpay(false);
@@ -402,29 +263,15 @@ export function usePaymentLaunchFlow({
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 {
ezpayPaymentUrl,
handleEzpayCancel,
handleEzpayConfirm,
handleRegionalQrClose,
handleStripeClose,
handleStripeConfirmed,
isConfirmingEzpay,
regionalQrErrorMessage: payment.errorMessage,
regionalQrPayment,
regionalQrStatus: payment.orderStatus,
resetLaunchState,
shouldShowEzpayConfirmDialog,
shouldShowRegionalQrDialog,
shouldShowStripeDialog,
stripeClientSecret,
};
-19
View File
@@ -22,9 +22,6 @@ export interface UsePaymentRouteFlowInput {
characterId?: string;
initialCategory?: string | null;
initialPlanId?: string | null;
commercialOfferId?: string | null;
resumeOrderId?: string | null;
chatActionId?: string | null;
}
export interface PaymentRouteFlow {
@@ -44,21 +41,15 @@ export function usePaymentRouteFlow({
characterId,
initialCategory = null,
initialPlanId = null,
commercialOfferId = null,
resumeOrderId = null,
chatActionId = null,
}: UsePaymentRouteFlowInput): PaymentRouteFlow {
const payment = usePaymentState();
const paymentDispatch = usePaymentDispatch();
const initializedCatalogKeyRef = useRef<string | null>(null);
const resumedOrderIdRef = useRef<string | null>(null);
const catalogKey = [
catalog,
characterId ?? "",
initialCategory ?? "",
initialPlanId ?? "",
commercialOfferId ?? "",
chatActionId ?? "",
].join(":");
usePendingPaymentOrderLifecycle({
@@ -78,26 +69,16 @@ export function usePaymentRouteFlow({
...(characterId ? { characterId } : {}),
...(initialCategory ? { category: initialCategory } : {}),
...(initialPlanId ? { planId: initialPlanId } : {}),
...(commercialOfferId ? { commercialOfferId } : {}),
...(chatActionId ? { chatActionId } : {}),
});
}, [
catalog,
catalogKey,
characterId,
commercialOfferId,
chatActionId,
initialCategory,
initialPlanId,
initialPayChannel,
paymentDispatch,
]);
useEffect(() => {
if (!resumeOrderId || resumedOrderIdRef.current === resumeOrderId) return;
resumedOrderIdRef.current = resumeOrderId;
paymentDispatch({ type: "PaymentReturned", orderId: resumeOrderId });
}, [paymentDispatch, resumeOrderId]);
return { payment, paymentDispatch };
}
@@ -1,57 +0,0 @@
import { afterEach, describe, expect, it, vi } from "vitest";
import { VoiceCallPlayer } from "@/app/call/voice-call-player";
describe("VoiceCallPlayer", () => {
afterEach(() => {
vi.unstubAllGlobals();
});
it("schedules decoded sentence audio on one continuous Web Audio timeline", async () => {
const starts: number[] = [];
const sources: Array<{ onended: (() => void) | null }> = [];
const context = {
state: "running",
currentTime: 0,
destination: {},
resume: vi.fn(async () => undefined),
close: vi.fn(async () => undefined),
decodeAudioData: vi.fn(async () => ({ duration: 1 })),
createBufferSource: vi.fn(() => {
const source = {
buffer: null,
onended: null as (() => void) | null,
connect: vi.fn(),
disconnect: vi.fn(),
stop: vi.fn(),
start: vi.fn((at: number) => starts.push(at)),
};
sources.push(source);
return source;
}),
};
vi.stubGlobal("AudioContext", function AudioContextMock() {
return context;
});
const player = new VoiceCallPlayer();
const gaps: number[] = [];
player.onGap = (milliseconds) => gaps.push(milliseconds);
const meta = {
callId: "call-1",
turnId: "turn-1",
index: 0,
mimeType: "audio/mpeg",
byteLength: 3,
};
player.enqueue(meta, new Uint8Array([1, 2, 3]).buffer);
player.enqueue({ ...meta, index: 1 }, new Uint8Array([4, 5, 6]).buffer);
await vi.waitFor(() => expect(starts).toHaveLength(2));
expect(starts).toEqual([0.025, 1.025]);
expect(gaps).toEqual([0]);
expect(sources).toHaveLength(2);
player.dispose();
});
});
-8
View File
@@ -1,8 +0,0 @@
import { redirect } from "next/navigation";
import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
import { getCharacterRoutes } from "@/router/routes";
export default function LegacyCallPage() {
redirect(getCharacterRoutes(DEFAULT_CHARACTER_SLUG).call);
}
-101
View File
@@ -1,101 +0,0 @@
import type { CallAudioChunkMeta } from "@/core/net/voice-call-transport";
export class VoiceCallPlayer {
private context: AudioContext | null = null;
private sources = new Set<AudioBufferSourceNode>();
private decodeChain: Promise<void> = Promise.resolve();
private scheduledUntil = 0;
private pendingDecodes = 0;
private generation = 0;
onPlaying: (() => void) | null = null;
onIdle: (() => void) | null = null;
onGap: ((milliseconds: number) => void) | null = null;
onError: ((error: Error) => void) | null = null;
get isPlaying(): boolean {
return this.sources.size > 0 || this.pendingDecodes > 0;
}
async prepare(): Promise<void> {
const context = this.getContext();
if (context.state === "suspended") await context.resume();
}
enqueue(_meta: CallAudioChunkMeta, bytes: ArrayBuffer): void {
const generation = this.generation;
this.pendingDecodes += 1;
this.decodeChain = this.decodeChain
.then(async () => {
const context = this.getContext();
if (context.state === "suspended") await context.resume();
const audioBuffer = await context.decodeAudioData(bytes.slice(0));
if (generation !== this.generation) return;
this.schedule(context, audioBuffer);
})
.catch((error: unknown) => {
this.onError?.(error instanceof Error ? error : new Error(String(error)));
})
.finally(() => {
this.pendingDecodes = Math.max(0, this.pendingDecodes - 1);
this.notifyIdleIfNeeded();
});
}
stop(): void {
this.generation += 1;
for (const source of this.sources) {
source.onended = null;
try {
source.stop();
} catch {
// 已自然结束的 source 无需重复停止。
}
source.disconnect();
}
this.sources.clear();
this.scheduledUntil = 0;
this.onIdle?.();
}
dispose(): void {
this.stop();
const context = this.context;
this.context = null;
if (context && context.state !== "closed") void context.close();
}
private getContext(): AudioContext {
if (!this.context || this.context.state === "closed") {
this.context = new AudioContext({ latencyHint: "interactive" });
}
return this.context;
}
private schedule(context: AudioContext, buffer: AudioBuffer): void {
const leadSeconds = 0.025;
const earliestStart = context.currentTime + leadSeconds;
const hadPreviousSegment = this.scheduledUntil > 0;
const startAt = Math.max(earliestStart, this.scheduledUntil);
if (hadPreviousSegment) {
this.onGap?.(Math.max(0, (startAt - this.scheduledUntil) * 1000));
}
const source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
this.sources.add(source);
this.scheduledUntil = startAt + buffer.duration;
source.onended = () => {
source.disconnect();
this.sources.delete(source);
this.notifyIdleIfNeeded();
};
source.start(startAt);
this.onPlaying?.();
}
private notifyIdleIfNeeded(): void {
if (this.sources.size || this.pendingDecodes) return;
this.scheduledUntil = 0;
this.onIdle?.();
}
}
-47
View File
@@ -1,47 +0,0 @@
.screen {
position: relative;
display: flex;
min-height: var(--app-viewport-height, 100dvh);
overflow: hidden;
flex-direction: column;
color: #fff;
background: #090810;
}
.background { object-fit: cover; opacity: .48; }
.scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 32%, rgba(239,83,155,.18), transparent 36%), linear-gradient(180deg, rgba(9,8,16,.28), rgba(9,8,16,.94)); }
.header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: calc(18px + var(--app-safe-top, 0px)) 20px 12px; }
.iconButton { display: inline-flex; width: 42px; height: 42px; cursor: pointer; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #fff; background: rgba(10,9,18,.55); backdrop-filter: blur(14px); }
.balances { display: flex; gap: 8px; font-size: 12px; font-weight: 650; }
.balances span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(10,9,18,.58); backdrop-filter: blur(14px); }
.content { position: relative; z-index: 1; display: flex; min-height: 0; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 24px 28px; text-align: center; }
.avatarRing { position: relative; display: grid; width: 174px; height: 174px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(239,83,155,.42)); box-shadow: 0 28px 72px rgba(0,0,0,.42); transition: transform .25s ease, box-shadow .25s ease; }
.avatarRing::after { position: absolute; inset: -10px; border: 1px solid rgba(255,255,255,.16); border-radius: inherit; content: ""; }
.avatarRing.listening, .avatarRing.speaking { animation: callPulse 1.8s ease-in-out infinite; box-shadow: 0 0 0 12px rgba(239,83,155,.08), 0 28px 72px rgba(0,0,0,.42); }
.avatar { width: 158px; height: 158px; border: 4px solid rgba(9,8,16,.8); border-radius: 50%; object-fit: cover; }
.content h1 { margin: 30px 0 8px; font-size: clamp(27px, 7vw, 36px); letter-spacing: -.025em; }
.state { display: flex; min-height: 28px; align-items: center; gap: 7px; color: rgba(255,255,255,.78); font-size: 15px; }
.lowBalance { margin: 12px 0 0; padding: 7px 11px; border-radius: 999px; color: #ffd6e8; background: rgba(210,48,121,.2); font-size: 12px; }
.transcript { width: min(100%, 440px); min-height: 105px; margin-top: 24px; text-align: left; }
.transcript p { margin: 0 0 10px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; color: rgba(255,255,255,.9); background: rgba(14,12,24,.48); font-size: 14px; line-height: 1.45; backdrop-filter: blur(12px); }
.transcript span { display: block; margin-bottom: 4px; color: #f3a3c8; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.error { max-width: 360px; margin: 8px 0 0; color: #ffc2ca; font-size: 13px; }
.footer { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 24px calc(24px + var(--app-safe-bottom, 0px)); }
.footer p { margin: 12px 0 0; color: rgba(255,255,255,.52); font-size: 12px; }
.startButton { display: inline-flex; min-width: 170px; cursor: pointer; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 999px; padding: 15px 24px; color: #fff; background: linear-gradient(135deg, #ee579d, #ce357c); box-shadow: 0 16px 36px rgba(212,54,127,.32); font-size: 15px; font-weight: 750; }
.endButton { display: inline-flex; width: 66px; height: 66px; cursor: pointer; align-items: center; justify-content: center; border: 0; border-radius: 50%; color: #fff; background: #e24456; box-shadow: 0 15px 34px rgba(226,68,86,.34); }
.topUpBackdrop { position: absolute; z-index: 10; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 18px; background: rgba(5,4,9,.68); backdrop-filter: blur(8px); }
.topUpDialog { width: min(100%, 460px); padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: #17131f; box-shadow: 0 24px 70px rgba(0,0,0,.5); text-align: center; }
.topUpDialog h2 { margin: 0; font-size: 21px; }
.topUpDialog p { margin: 10px 0 20px; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.5; }
.topUpDialog button { width: 100%; cursor: pointer; border: 0; border-radius: 999px; padding: 13px 18px; color: #fff; background: #df478d; font-weight: 750; }
.topUpDialog .secondaryButton { margin-top: 8px; color: rgba(255,255,255,.72); background: transparent; }
@keyframes callPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@media (max-height: 700px) {
.avatarRing { width: 138px; height: 138px; }
.avatar { width: 124px; height: 124px; }
.content h1 { margin-top: 20px; }
.transcript { min-height: 72px; margin-top: 16px; }
}
-280
View File
@@ -1,280 +0,0 @@
"use client";
import Image from "next/image";
import { useCallback, useEffect, useRef, useState } from "react";
import { Mic, PhoneOff, RotateCcw, Volume2, X } from "lucide-react";
import { MobileShell } from "@/app/_components/core";
import { getApiConfig } from "@/core/net/config/api_config";
import {
VoiceCallTransport,
type CallBillingStatusPayload,
} from "@/core/net/voice-call-transport";
import { VoiceCallAudioCapture } from "@/integrations/voice-call-audio";
import { getSessionAccessToken } from "@/lib/auth/auth_session";
import { useActiveCharacter, useActiveCharacterRoutes } from "@/providers/character-provider";
import { useAppNavigator } from "@/router/use-app-navigator";
import { VoiceCallPlayer } from "./voice-call-player";
import styles from "./voice-call-screen.module.css";
type CallUiState = "idle" | "connecting" | "listening" | "thinking" | "speaking" | "ended" | "error";
const STATE_COPY: Record<CallUiState, string> = {
idle: "Ready to call",
connecting: "Connecting…",
listening: "Listening…",
thinking: "Thinking…",
speaking: "Speaking…",
ended: "Call ended",
error: "Call unavailable",
};
async function getSessionToken(): Promise<string> {
const token = await getSessionAccessToken();
if (token) return token;
throw new Error("Please sign in before starting a call");
}
export function VoiceCallScreen() {
const character = useActiveCharacter();
const routes = useActiveCharacterRoutes();
const navigator = useAppNavigator();
const [uiState, setUiState] = useState<CallUiState>("idle");
const [userTranscript, setUserTranscript] = useState("");
const [aiTranscript, setAiTranscript] = useState("");
const [freeTurns, setFreeTurns] = useState(0);
const [balance, setBalance] = useState(0);
const [cost, setCost] = useState(2);
const [error, setError] = useState<string | null>(null);
const [showTopUp, setShowTopUp] = useState(false);
const transportRef = useRef<VoiceCallTransport | null>(null);
const captureRef = useRef<VoiceCallAudioCapture | null>(null);
const playerRef = useRef<VoiceCallPlayer | null>(null);
const callIdRef = useRef("");
const activeTurnRef = useRef("");
const reconnectTurnRef = useRef("");
const resumeVersionRef = useRef(0);
const endingRef = useRef(false);
const pendingTopUpRef = useRef(false);
const finishCall = useCallback((navigate = true) => {
if (endingRef.current) return;
endingRef.current = true;
captureRef.current?.dispose();
playerRef.current?.dispose();
if (callIdRef.current) transportRef.current?.endCall(callIdRef.current);
transportRef.current?.disconnect();
reconnectTurnRef.current = "";
resumeVersionRef.current = 0;
setUiState("ended");
if (navigate) navigator.push(routes.chat);
}, [navigator, routes.chat]);
const beginListening = useCallback((turnId: string) => {
const capture = captureRef.current;
const transport = transportRef.current;
const callId = callIdRef.current;
if (!capture || !transport || !callId || !turnId) return;
activeTurnRef.current = turnId;
reconnectTurnRef.current = turnId;
setUiState(playerRef.current?.isPlaying ? "speaking" : "listening");
const preRoll: ArrayBuffer[] = [];
let streamOpened = false;
capture.startTurn({
onChunk: (chunk) => {
if (streamOpened) {
transport.sendAudioChunk(chunk);
return;
}
preRoll.push(chunk);
if (preRoll.length > 5) preRoll.shift();
},
onSpeechStart: () => {
setError(null);
if (playerRef.current?.isPlaying) {
playerRef.current.stop();
transport.interrupt(callId);
}
streamOpened = transport.startAudio(
callId,
turnId,
capture.mimeType,
capture.sampleRate,
);
if (streamOpened) {
for (const chunk of preRoll) transport.sendAudioChunk(chunk);
preRoll.length = 0;
setUserTranscript("");
setAiTranscript("");
setUiState("listening");
}
},
onTurnEnd: (vadLatencyMs) => {
if (streamOpened) {
transport.endAudio(callId, turnId, vadLatencyMs);
setUiState("thinking");
}
},
onError: (captureError) => {
setError(captureError.message);
setUiState("error");
},
});
}, []);
const applyBilling = useCallback((status: CallBillingStatusPayload) => {
setBalance(status.creditBalance);
setFreeTurns(status.freeTurnsRemaining);
setCost(status.requiredCredits || 2);
if (status.canContinue && status.nextTurnId) {
beginListening(status.nextTurnId);
return;
}
captureRef.current?.stopTurn();
pendingTopUpRef.current = true;
if (!playerRef.current?.isPlaying) setShowTopUp(true);
}, [beginListening]);
const startCall = useCallback(async () => {
if (uiState !== "idle" && uiState !== "error") return;
endingRef.current = false;
pendingTopUpRef.current = false;
setError(null);
setUiState("connecting");
try {
const player = new VoiceCallPlayer();
playerRef.current = player;
const playerReady = player.prepare();
const capture = new VoiceCallAudioCapture();
await Promise.all([capture.prepare(), playerReady]);
captureRef.current = capture;
const token = await getSessionToken();
const transport = new VoiceCallTransport(getApiConfig().wsUrl, token);
transportRef.current = transport;
player.onPlaying = () => setUiState("speaking");
player.onIdle = () => {
if (pendingTopUpRef.current) setShowTopUp(true);
else if (activeTurnRef.current) setUiState("listening");
};
player.onError = (playbackError) => setError(playbackError.message);
player.onGap = (milliseconds) => {
transport.sendClientMetric("audioChunkGap", milliseconds);
};
transport.onOpen = () => {
if (!reconnectTurnRef.current) reconnectTurnRef.current = crypto.randomUUID();
transport.startCall(
character.id,
reconnectTurnRef.current,
resumeVersionRef.current || undefined,
);
};
transport.onReconnecting = () => {
capture.stopTurn();
player.stop();
callIdRef.current = "";
setUiState("connecting");
};
transport.onStarted = (started) => {
callIdRef.current = started.callId;
activeTurnRef.current = started.turnId;
reconnectTurnRef.current = started.turnId;
resumeVersionRef.current = started.resumeVersion;
setFreeTurns(started.freeTurnsRemaining);
setBalance(started.creditBalance);
setCost(started.costPerPaidTurn || 2);
beginListening(started.turnId);
};
transport.onState = setUiState;
transport.onTranscript = (text) => setUserTranscript(text);
transport.onAiSentence = (text) => {
setAiTranscript((current) => `${current}${current ? " " : ""}${text}`);
};
transport.onAudioChunk = (meta, bytes) => player.enqueue(meta, bytes);
transport.onBillingStatus = applyBilling;
transport.onEnded = () => setUiState("ended");
transport.onError = (code, message) => {
setError(message);
if (
activeTurnRef.current
&& (code === "CALL_TURN_FAILED" || code === "CALL_STT_FAILED")
) {
setUiState("listening");
} else {
setUiState("error");
}
};
transport.connect();
} catch (startError) {
captureRef.current?.dispose();
playerRef.current?.dispose();
setError(startError instanceof Error ? startError.message : String(startError));
setUiState("error");
}
}, [applyBilling, beginListening, character.id, uiState]);
useEffect(() => () => finishCall(false), [finishCall]);
const lowBalance = freeTurns === 0 && balance < cost * 2 && balance >= cost;
return (
<MobileShell background="#090810">
<main className={styles.screen}>
<Image src={character.assets.chatBackground} alt="" fill priority className={styles.background} />
<div className={styles.scrim} />
<header className={styles.header}>
<button type="button" className={styles.iconButton} onClick={() => finishCall()} aria-label="Close call">
<X size={22} aria-hidden="true" />
</button>
<div className={styles.balances}>
<span>{freeTurns} free</span>
<span>{balance} credits</span>
</div>
</header>
<section className={styles.content} aria-live="polite">
<div className={`${styles.avatarRing} ${styles[uiState]}`}>
<Image src={character.assets.avatar} alt={character.displayName} width={148} height={148} className={styles.avatar} priority />
</div>
<h1>{character.displayName}</h1>
<div className={styles.state}>
{uiState === "listening" ? <Mic size={18} aria-hidden="true" /> : null}
{uiState === "speaking" ? <Volume2 size={18} aria-hidden="true" /> : null}
<span>{STATE_COPY[uiState]}</span>
</div>
{lowBalance ? <p className={styles.lowBalance}>Your balance covers fewer than two paid turns.</p> : null}
<div className={styles.transcript}>
{userTranscript ? <p><span>You</span>{userTranscript}</p> : null}
{aiTranscript ? <p><span>{character.shortName}</span>{aiTranscript}</p> : null}
</div>
{error ? <p className={styles.error}>{error}</p> : null}
</section>
<footer className={styles.footer}>
{uiState === "idle" || uiState === "error" ? (
<button type="button" className={styles.startButton} onClick={() => void startCall()}>
{uiState === "error" ? <RotateCcw size={20} aria-hidden="true" /> : <Mic size={20} aria-hidden="true" />}
{uiState === "error" ? "Try again" : "Start call"}
</button>
) : (
<button type="button" className={styles.endButton} onClick={() => finishCall()} aria-label="End call">
<PhoneOff size={27} aria-hidden="true" />
</button>
)}
<p>Speak naturally you can interrupt at any time.</p>
</footer>
{showTopUp ? (
<div className={styles.topUpBackdrop} role="presentation">
<section className={styles.topUpDialog} role="dialog" aria-modal="true" aria-labelledby="call-topup-title">
<h2 id="call-topup-title">Not enough credits for another turn</h2>
<p>Your current reply has finished. Top up to keep the conversation going.</p>
<button type="button" onClick={() => navigator.openSubscription({ type: "topup", returnTo: "chat" })}>Top up credits</button>
<button type="button" className={styles.secondaryButton} onClick={() => finishCall()}>End call</button>
</section>
</div>
) : null}
</main>
</MobileShell>
);
}
@@ -1,5 +0,0 @@
import { VoiceCallScreen } from "@/app/call/voice-call-screen";
export default function CharacterCallPage() {
return <VoiceCallScreen />;
}
@@ -23,7 +23,6 @@ export default async function CharacterTipPage({
const initialPlanId = normalizeTipGiftParam(
getFirstPaymentSearchParam(query[TIP_GIFT_PLAN_ID_PARAM]),
);
const chatActionId = getFirstPaymentSearchParam(query.chatActionId);
return (
<TipScreen
@@ -31,7 +30,6 @@ export default async function CharacterTipPage({
initialPlanId={initialPlanId}
shouldResumePendingOrder={paymentReturn.shouldResumePendingOrder}
initialPayChannel={paymentReturn.initialPayChannel}
chatActionId={chatActionId}
/>
);
}
@@ -1,110 +0,0 @@
import { describe, expect, it, vi } from "vitest";
import type { ChatAction } from "@/data/schemas/chat";
import type { PaymentOrderStatusResponse } from "@/data/schemas/payment";
import {
resolveChatActionTarget,
type ChatActionNavigationContext,
} from "../chat-action-navigation";
const baseAction: ChatAction = {
actionId: "action-1",
kind: "support",
type: "openProfile",
copy: "Open it here.",
ctaLabel: "Open",
ruleId: null,
orderId: null,
};
function createContext(
order: Partial<PaymentOrderStatusResponse> = {},
): ChatActionNavigationContext {
const orderResponse: PaymentOrderStatusResponse = {
orderId: "order-1",
status: "pending",
orderType: "dol",
planId: "topup-100",
creditsAdded: 0,
...order,
};
return {
characterRoutes: {
splash: "/characters/elio/splash",
chat: "/characters/elio/chat",
call: "/characters/elio/call",
privateZone: "/characters/elio/private-zone",
tip: "/characters/elio/tip",
},
characterSlug: "elio",
profileUrl: "/profile?returnTo=chat",
feedbackUrl: "/feedback?returnTo=chat",
coinsRulesUrl: "/coins-rules?returnTo=chat",
getOrderStatus: vi.fn(async () => orderResponse),
};
}
describe("resolveChatActionTarget", () => {
it.each([
["giftOffer", "/characters/elio/tip?chatActionId=action-1"],
["privateAlbumOffer", "/characters/elio/private-zone"],
["openProfile", "/profile?returnTo=chat"],
["openWallet", "/profile?returnTo=chat"],
["openCoinsRules", "/coins-rules?returnTo=chat"],
["openFeedback", "/feedback?returnTo=chat"],
] as const)("maps %s to an allowlisted internal page", async (type, expected) => {
await expect(
resolveChatActionTarget({ ...baseAction, type }, createContext()),
).resolves.toBe(expected);
});
it("maps VIP and top-up actions to typed subscription routes", async () => {
await expect(
resolveChatActionTarget(
{ ...baseAction, kind: "commercial", type: "activateVip" },
createContext(),
),
).resolves.toBe(
"/subscription?type=vip&returnTo=chat&character=elio&chatActionId=action-1",
);
await expect(
resolveChatActionTarget(
{ ...baseAction, kind: "commercial", type: "topUp" },
createContext(),
),
).resolves.toBe(
"/subscription?type=topup&returnTo=chat&character=elio&chatActionId=action-1",
);
});
it("resumes a pending VIP order using its owned order id", async () => {
const action: ChatAction = {
...baseAction,
type: "resumePayment",
orderId: "order-1",
};
await expect(
resolveChatActionTarget(
action,
createContext({ orderType: "vip_monthly" }),
),
).resolves.toBe(
"/subscription?type=vip&returnTo=chat&character=elio&resumeOrderId=order-1",
);
});
it("does not resume an order that is no longer pending", async () => {
const action: ChatAction = {
...baseAction,
type: "resumePayment",
orderId: "order-1",
};
await expect(
resolveChatActionTarget(action, createContext({ status: "paid" })),
).resolves.toBe("/profile?returnTo=chat");
await expect(
resolveChatActionTarget(action, createContext({ status: "expired" })),
).resolves.toBe("/feedback?returnTo=chat");
});
});
@@ -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");
});
});
-64
View File
@@ -1,64 +0,0 @@
import type { ChatAction } from "@/data/schemas/chat";
import type { PaymentOrderStatusResponse } from "@/data/schemas/payment";
import type { CharacterRoutes } from "@/router/routes";
import { appendRouteSearchParams, ROUTE_BUILDERS } from "@/router/routes";
export interface ChatActionNavigationContext {
characterRoutes: CharacterRoutes;
characterSlug: string;
profileUrl: string;
feedbackUrl: string;
coinsRulesUrl: string;
getOrderStatus: (orderId: string) => Promise<PaymentOrderStatusResponse>;
}
/** Resolve only application-owned, allowlisted destinations for a chat action. */
export async function resolveChatActionTarget(
action: ChatAction,
context: ChatActionNavigationContext,
): Promise<string> {
switch (action.type) {
case "giftOffer":
return appendRouteSearchParams(context.characterRoutes.tip, {
chatActionId: action.actionId,
});
case "privateAlbumOffer":
return context.characterRoutes.privateZone;
case "openProfile":
case "openWallet":
return context.profileUrl;
case "openCoinsRules":
return context.coinsRulesUrl;
case "activateVip":
return ROUTE_BUILDERS.subscription("vip", {
sourceCharacterSlug: context.characterSlug,
returnTo: "chat",
chatActionId: action.actionId,
});
case "topUp":
return ROUTE_BUILDERS.subscription("topup", {
sourceCharacterSlug: context.characterSlug,
returnTo: "chat",
chatActionId: action.actionId,
});
case "openFeedback":
return context.feedbackUrl;
case "resumePayment": {
if (!action.orderId) return context.feedbackUrl;
const order = await context.getOrderStatus(action.orderId);
if (order.status === "paid") return context.profileUrl;
if (order.status !== "pending") return context.feedbackUrl;
if (order.orderType === "tip") return context.characterRoutes.tip;
return ROUTE_BUILDERS.subscription(
order.orderType === "vip" || order.orderType.startsWith("vip_")
? "vip"
: "topup",
{
sourceCharacterSlug: context.characterSlug,
returnTo: "chat",
resumeOrderId: action.orderId,
},
);
}
}
}
+14 -142
View File
@@ -1,6 +1,6 @@
"use client";
import { useEffect, useMemo, useRef, type CSSProperties } from "react";
import { useEffect, useMemo, type CSSProperties } from "react";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
@@ -17,14 +17,9 @@ import { useCharacterCatalog } from "@/providers/character-catalog-provider";
import { clearPendingChatNavigation } from "@/lib/navigation/chat_unlock_session";
import { buildGlobalPageUrl } from "@/router/global-route-context";
import { resolveAuthenticatedNavigation } from "@/router/navigation-resolver";
import { getCharacterRoutes, ROUTE_BUILDERS, ROUTES } from "@/router/routes";
import type { ChatAction, CommercialAction } from "@/data/schemas/chat";
import { paymentApi } from "@/data/services/api";
import { getCharacterRoutes, ROUTES } from "@/router/routes";
import type { CommercialAction } from "@/data/schemas/chat";
import { behaviorAnalytics } from "@/lib/analytics";
import {
recordChatActionEvent,
rememberChatActionArrival,
} from "@/lib/chat/chat_action_events";
import { MobileShell } from "@/app/_components/core";
@@ -33,8 +28,8 @@ import {
ChatHeader,
ChatInputBar,
ChatInsufficientCreditsBanner,
ChatSupportButton,
ChatUnlockDialogs,
FirstRechargeOfferBanner,
FullscreenImageViewer,
PwaInstallOverlay,
} from "./components";
@@ -46,14 +41,12 @@ import {
import {
deriveIsGuest,
} from "./chat-screen.helpers";
import { useChatSupportCta } from "./hooks/use-chat-support-cta";
import { useChatCommercialMessages } from "./hooks/use-chat-commercial-messages";
import { useFirstRechargeOfferBanner } from "./hooks/use-first-recharge-offer-banner";
import { useChatUnlockCoordinator } from "./hooks/use-chat-unlock-coordinator";
import { useChatGuestLogin } from "./hooks/use-chat-guest-login";
import { useChatMessageLimitBanner } from "./hooks/use-chat-message-limit-banner";
import { useChatPromotionBootstrap } from "./hooks/use-chat-promotion-bootstrap";
import { useSplashLatestMessageSync } from "./hooks/use-splash-latest-message-sync";
import { resolveChatActionTarget } from "./chat-action-navigation";
const chatShellStyle = {
"--chat-message-font-size": "clamp(16px, 3.333vw, 18px)",
@@ -71,21 +64,11 @@ export function ChatScreen() {
ROUTES.profile,
characterRoutes.chat,
);
const feedbackUrl = buildGlobalPageUrl(
ROUTES.feedback,
characterRoutes.chat,
);
const coinsRulesUrl = buildGlobalPageUrl(
ROUTES.coinsRules,
characterRoutes.chat,
);
const searchParams = useSearchParams();
const state = useChatState();
const chatDispatch = useChatDispatch();
const authState = useAuthState();
const authDispatch = useAuthDispatch();
const imageOpenedFromChatRef = useRef(false);
const imageViewerClosingRef = useRef(false);
useSplashLatestMessageSync({
characterId: state.characterId,
historyLoaded: state.historyLoaded,
@@ -129,17 +112,11 @@ export function ChatScreen() {
const messageLimitBanner = useChatMessageLimitBanner({
upgradePromptVisible: state.upgradePromptVisible,
upgradeReason: state.upgradeReason,
paymentGuidance: state.paymentGuidance,
});
const supportCta = useChatSupportCta({
characterId: character.id,
const firstRechargeOfferBanner = useFirstRechargeOfferBanner({
historyLoaded: state.historyLoaded,
loginStatus: authState.loginStatus,
});
useChatCommercialMessages({
characterId: character.id,
loginStatus: authState.loginStatus,
});
const shouldShowPwaInstall =
state.historyLoaded && state.historyMessages.length >= 10;
useChatGuestLogin({
@@ -149,13 +126,6 @@ export function ChatScreen() {
loginStatus: authState.loginStatus,
});
useEffect(() => {
if (!imageMessageId) {
imageOpenedFromChatRef.current = false;
imageViewerClosingRef.current = false;
}
}, [imageMessageId]);
useEffect(() => {
if (
!imageMessageId ||
@@ -247,7 +217,6 @@ export function ChatScreen() {
}
function handleOpenImage(displayMessageId: string): void {
imageOpenedFromChatRef.current = true;
router.push(
buildChatImageOverlayUrl(displayMessageId, characterRoutes.chat),
{ scroll: false },
@@ -255,13 +224,6 @@ export function ChatScreen() {
}
function handleCloseImageViewer(): void {
if (imageViewerClosingRef.current) return;
imageViewerClosingRef.current = true;
if (imageOpenedFromChatRef.current) {
imageOpenedFromChatRef.current = false;
router.back();
return;
}
router.replace(
buildChatWithoutImageOverlayUrl(searchParams, characterRoutes.chat),
{ scroll: false },
@@ -290,7 +252,7 @@ export function ChatScreen() {
router.push(characterRoutes.privateZone);
}
async function handleCommercialAction(action: CommercialAction): Promise<void> {
function handleCommercialAction(action: CommercialAction): void {
behaviorAnalytics.elementClick(
"chat.commercial_action.open",
action.ctaLabel,
@@ -302,29 +264,6 @@ export function ChatScreen() {
target: action.target,
},
);
if (action.target === "discountConsent") {
const offer = await paymentApi.acceptCommercialOffer(action.actionId);
behaviorAnalytics.elementClick(
"chat.commercial_action.accepted",
action.ctaLabel,
{
actionId: action.actionId,
actionType: action.type,
characterId: state.characterId,
planId: offer.planId,
discountPercent: offer.discountPercent,
},
);
router.push(
ROUTE_BUILDERS.subscription(offer.subscriptionType, {
sourceCharacterSlug: character.slug,
returnTo: "chat",
planId: offer.planId,
commercialOfferId: offer.commercialOfferId,
}),
);
return;
}
router.push(
action.target === "giftCatalog"
? characterRoutes.tip
@@ -345,69 +284,6 @@ export function ChatScreen() {
);
}
function handleChatActionViewed(action: ChatAction): void {
void recordChatActionEvent(action, state.characterId, "viewed").catch(
() => undefined,
);
}
async function handleChatAction(action: ChatAction): Promise<void> {
behaviorAnalytics.elementClick(
"chat.action.open",
action.ctaLabel,
{
actionId: action.actionId,
actionKind: action.kind,
actionType: action.type,
characterId: state.characterId,
ruleId: action.ruleId,
},
);
await recordChatActionEvent(
action,
state.characterId,
"opened",
).catch(() => undefined);
const targetUrl = await resolveChatActionTarget(action, {
characterRoutes,
characterSlug: character.slug,
profileUrl,
feedbackUrl,
coinsRulesUrl,
getOrderStatus: (orderId) => paymentApi.getOrderStatus(orderId),
});
const authenticatedTarget = resolveAuthenticatedNavigation({
loginStatus: authState.loginStatus,
targetUrl,
});
rememberChatActionArrival(
action,
state.characterId,
targetUrl,
);
router.push(authenticatedTarget);
}
function handleChatActionDismiss(action: ChatAction): void {
behaviorAnalytics.elementClick(
"chat.action.dismiss",
"Dismiss chat action",
{
actionId: action.actionId,
actionKind: action.kind,
actionType: action.type,
characterId: state.characterId,
ruleId: action.ruleId,
},
);
void recordChatActionEvent(
action,
state.characterId,
"dismissed",
).catch(() => undefined);
}
return (
<MobileShell>
<div
@@ -428,13 +304,13 @@ export function ChatScreen() {
<ChatHeader
isGuest={isGuest}
offerBanner={
supportCta.visible ? (
<ChatSupportButton
kind={supportCta.kind}
label={supportCta.label}
onClick={supportCta.open}
/>
) : null
<FirstRechargeOfferBanner
visible={firstRechargeOfferBanner.visible}
discountPercent={firstRechargeOfferBanner.discountPercent}
onClick={firstRechargeOfferBanner.claim}
onClose={firstRechargeOfferBanner.close}
variant="compact"
/>
}
/>
@@ -458,9 +334,6 @@ export function ChatScreen() {
onCharacterAvatarClick={handleOpenCharacterPrivateZone}
onCommercialAction={handleCommercialAction}
onCommercialActionDismiss={handleCommercialActionDismiss}
onChatActionViewed={handleChatActionViewed}
onChatAction={handleChatAction}
onChatActionDismiss={handleChatActionDismiss}
onLoadMoreHistory={() => {
chatDispatch({ type: "ChatLoadMoreHistoryRequested" });
}}
@@ -471,7 +344,6 @@ export function ChatScreen() {
title={messageLimitBanner.title}
description={messageLimitBanner.description}
ctaLabel={messageLimitBanner.ctaLabel}
guidance={messageLimitBanner.guidance}
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(":");
}
@@ -1,67 +0,0 @@
/* @vitest-environment jsdom */
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { ChatActionCard } from "../chat-action-card";
describe("ChatActionCard", () => {
let container: HTMLDivElement;
let root: Root;
beforeEach(() => {
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
.IS_REACT_ACT_ENVIRONMENT = true;
container = document.createElement("div");
document.body.append(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
});
it("reports one view, opens the action and can be dismissed", async () => {
const onViewed = vi.fn();
const onActivate = vi.fn(async () => undefined);
const onDismiss = vi.fn();
const action = {
actionId: "action-1",
kind: "support" as const,
type: "openFeedback" as const,
copy: "Share the screenshot and approximate payment time here.",
ctaLabel: "Open Feedback",
ruleId: null,
orderId: null,
};
await act(async () => {
root.render(
<ChatActionCard
action={action}
onViewed={onViewed}
onActivate={onActivate}
onDismiss={onDismiss}
/>,
);
});
expect(onViewed).toHaveBeenCalledTimes(1);
expect(container.querySelector("[data-chat-action='openFeedback']"))
.not.toBeNull();
const openButton = Array.from(container.querySelectorAll("button")).find(
(button) => button.textContent?.includes("Open Feedback"),
);
await act(async () => openButton?.click());
expect(onActivate).toHaveBeenCalledWith(action);
const dismissButton = container.querySelector<HTMLButtonElement>(
'button[aria-label="Dismiss"]',
);
act(() => dismissButton?.click());
expect(onDismiss).toHaveBeenCalledWith(action);
expect(container.innerHTML).toBe("");
});
});
@@ -124,36 +124,6 @@ describe("ChatInputBar", () => {
expect(getButton("Open chat actions")).not.toBeNull();
});
it("suppresses the Facebook WebView click that follows a pointer send for 300ms", () => {
const now = vi.spyOn(Date, "now").mockReturnValue(1_000);
renderBar();
setTextareaValue(getTextarea(), "Hello Maya");
const sendButton = getButton("Send message");
const pointerDown = new Event("pointerdown", {
bubbles: true,
cancelable: true,
});
Object.defineProperty(pointerDown, "pointerType", { value: "touch" });
act(() => sendButton.dispatchEvent(pointerDown));
expect(mocks.dispatch).toHaveBeenCalledTimes(1);
expect(mocks.dispatch).toHaveBeenCalledWith({
type: "ChatSendMessage",
content: "Hello Maya",
});
expect(getTextarea().value).toBe("");
expect(getButton("Open chat actions")).toBe(sendButton);
now.mockReturnValue(1_299);
act(() => sendButton.click());
expect(container.querySelector('[aria-label="Chat actions"]')).toBeNull();
now.mockReturnValue(1_300);
act(() => sendButton.click());
expect(container.querySelector('[aria-label="Chat actions"]')).not.toBeNull();
});
it("closes the menu on outside interaction and when disabled", () => {
renderBar();
act(() => getButton("Open chat actions").click());
@@ -23,23 +23,4 @@ describe("CommercialActionCard", () => {
expect(html).toContain("Open private zone");
expect(html).toContain('aria-label="Dismiss offer"');
});
it("renders a consent-first discount action without a checkout URL", () => {
const html = renderToStaticMarkup(
<CommercialActionCard
action={{
actionId: "offer-1",
type: "discountOffer",
copy: "Want me to ask for my best private offer?",
ctaLabel: "Yes, ask for me",
target: "discountConsent",
ruleId: "discount_after_price_objection",
}}
/>,
);
expect(html).toContain('data-commercial-action="discountOffer"');
expect(html).toContain("Yes, ask for me");
expect(html).not.toContain("/subscription");
});
});
@@ -1,80 +0,0 @@
/* @vitest-environment jsdom */
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import {
afterEach,
beforeEach,
describe,
expect,
it,
type Mock,
vi,
} from "vitest";
import { FullscreenImageViewer } from "../fullscreen-image-viewer";
describe("FullscreenImageViewer", () => {
let container: HTMLDivElement;
let root: Root;
let onClose: Mock<() => void>;
beforeEach(() => {
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
.IS_REACT_ACT_ENVIRONMENT = true;
container = document.createElement("div");
document.body.append(container);
root = createRoot(container);
onClose = vi.fn<() => void>();
act(() => {
root.render(
<FullscreenImageViewer
characterId="elio-silvestri"
remoteMessageId="message-1"
imageUrl="/chat-image.png"
onClose={onClose}
/>,
);
});
});
afterEach(() => {
act(() => root.unmount());
container.remove();
});
it("closes exactly once when the fullscreen image is tapped", () => {
const image = container.querySelector("img");
expect(image).not.toBeNull();
act(() => image?.click());
expect(onClose).toHaveBeenCalledTimes(1);
});
it("closes exactly once from the visible back button", () => {
const backButton = container.querySelector<HTMLButtonElement>(
'button[aria-label="Back"]',
);
expect(backButton).not.toBeNull();
act(() => backButton?.click());
expect(onClose).toHaveBeenCalledTimes(1);
});
it("closes from the backdrop and Escape key", () => {
const viewer = container.querySelector<HTMLDivElement>(
'[aria-label="Fullscreen image"]',
);
expect(viewer).not.toBeNull();
act(() => viewer?.click());
act(() =>
document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" })),
);
expect(onClose).toHaveBeenCalledTimes(2);
});
});
@@ -15,7 +15,6 @@ import { ImageBubble } from "../image-bubble";
import { InsufficientCreditsDialog } from "../insufficient-credits-dialog";
import { MessageAvatar } from "../message-avatar";
import { PrivateMessageCard } from "../private-message-card";
import { PaymentGuidanceCard } from "../payment-guidance-card";
import { PwaInstallDialog } from "../pwa-install-dialog";
import { TextBubble } from "../text-bubble";
@@ -224,19 +223,6 @@ describe("chat Tailwind components", () => {
description="Credits keep the conversation going."
ctaLabel="Top up"
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("Top up now");
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("bg-[linear-gradient(135deg,#f96ade_0%,#f657a0_100%)]");
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", () => {
const guestHtml = renderWithCharacter(<ChatHeader isGuest={true} />);
const memberHtml = renderWithCharacter(
@@ -1,118 +0,0 @@
"use client";
import { useEffect, useRef, useState } from "react";
import {
ArrowRight,
CircleDollarSign,
CircleHelp,
Gift,
Images,
LoaderCircle,
MessageSquareWarning,
UserRound,
WalletCards,
X,
type LucideIcon,
} from "lucide-react";
import type { ChatAction } from "@/data/schemas/chat";
import styles from "./chat-area.module.css";
const ACTION_ICONS: Record<ChatAction["type"], LucideIcon> = {
giftOffer: Gift,
privateAlbumOffer: Images,
openProfile: UserRound,
openWallet: WalletCards,
openCoinsRules: WalletCards,
activateVip: CircleDollarSign,
topUp: CircleDollarSign,
openFeedback: MessageSquareWarning,
resumePayment: CircleHelp,
};
export interface ChatActionCardProps {
action: ChatAction;
onViewed?: (action: ChatAction) => void;
onActivate?: (action: ChatAction) => void | Promise<void>;
onDismiss?: (action: ChatAction) => void;
}
export function ChatActionCard({
action,
onViewed,
onActivate,
onDismiss,
}: ChatActionCardProps) {
const [dismissed, setDismissed] = useState(false);
const [activating, setActivating] = useState(false);
const [activationError, setActivationError] = useState<string | null>(null);
const viewedActionIdRef = useRef<string | null>(null);
useEffect(() => {
if (viewedActionIdRef.current === action.actionId) return;
viewedActionIdRef.current = action.actionId;
onViewed?.(action);
}, [action, onViewed]);
if (dismissed) return null;
const Icon = ACTION_ICONS[action.type];
return (
<aside
className={styles.commercialAction}
aria-label={action.ctaLabel}
data-chat-action={action.type}
data-chat-action-kind={action.kind}
>
<div className={styles.commercialActionHeader}>
<Icon size={18} aria-hidden="true" />
<button
type="button"
className={styles.commercialActionDismiss}
title="Dismiss"
aria-label="Dismiss"
onClick={() => {
setDismissed(true);
onDismiss?.(action);
}}
>
<X size={16} aria-hidden="true" />
</button>
</div>
<p className={styles.commercialActionCopy}>{action.copy}</p>
{activationError ? (
<p className={styles.commercialActionError} role="alert">
{activationError}
</p>
) : null}
<button
type="button"
className={styles.commercialActionButton}
disabled={activating}
onClick={() => {
setActivating(true);
setActivationError(null);
void Promise.resolve(onActivate?.(action))
.catch(() =>
setActivationError(
"This option is unavailable right now. Please try again.",
),
)
.finally(() => setActivating(false));
}}
>
<span>{action.ctaLabel}</span>
{activating ? (
<LoaderCircle
className={styles.commercialActionSpinner}
size={17}
aria-hidden="true"
/>
) : (
<ArrowRight size={17} aria-hidden="true" />
)}
</button>
</aside>
);
}
@@ -189,26 +189,6 @@
overflow-wrap: anywhere;
}
.commercialActionButton:disabled {
cursor: wait;
opacity: 0.72;
}
.commercialActionError {
margin: -4px 0 10px;
color: #ffb4ab;
font-size: 12px;
line-height: 1.4;
}
.commercialActionSpinner {
animation: commercial-action-spin 0.8s linear infinite;
}
@keyframes commercial-action-spin {
to { transform: rotate(360deg); }
}
.bubbleAi {
max-width: var(--chat-bubble-max-width, 75%);
background: var(--color-bubble-ai, rgba(255, 255, 255, 0.08));
+1 -18
View File
@@ -24,7 +24,7 @@ import {
import { LoaderCircle } from "lucide-react";
import type { UiMessage } from "@/stores/chat/ui-message";
import type { ChatAction, CommercialAction } from "@/data/schemas/chat";
import type { CommercialAction } from "@/data/schemas/chat";
import { usePullToRefresh } from "@/hooks/use-pull-to-refresh";
import {
@@ -64,9 +64,6 @@ export interface ChatAreaProps {
onCharacterAvatarClick?: () => void;
onCommercialAction?: (action: CommercialAction) => void;
onCommercialActionDismiss?: (action: CommercialAction) => void;
onChatActionViewed?: (action: ChatAction) => void;
onChatAction?: (action: ChatAction) => void | Promise<void>;
onChatActionDismiss?: (action: ChatAction) => void;
}
type ChatMessageAction = (
@@ -93,9 +90,6 @@ export function ChatArea({
onCharacterAvatarClick,
onCommercialAction,
onCommercialActionDismiss,
onChatActionViewed,
onChatAction,
onChatActionDismiss,
}: ChatAreaProps) {
const scrollRef = useRef<HTMLDivElement>(null);
const contentRef = useRef<HTMLDivElement>(null);
@@ -270,9 +264,6 @@ export function ChatArea({
onCharacterAvatarClick,
onCommercialAction,
onCommercialActionDismiss,
onChatActionViewed,
onChatAction,
onChatActionDismiss,
)}
{isReplyingAI ? (
@@ -313,9 +304,6 @@ function renderMessagesWithDateHeaders(
onCharacterAvatarClick?: () => void,
onCommercialAction?: (action: CommercialAction) => void,
onCommercialActionDismiss?: (action: CommercialAction) => void,
onChatActionViewed?: (action: ChatAction) => void,
onChatAction?: (action: ChatAction) => void | Promise<void>,
onChatActionDismiss?: (action: ChatAction) => void,
) {
return buildChatRenderItems(messages, getMessageKey).map((item) =>
item.type === "date" ? (
@@ -336,8 +324,6 @@ function renderMessagesWithDateHeaders(
lockedPrivate={item.message.lockedPrivate}
privateMessageHint={item.message.privateMessageHint}
commercialAction={item.message.commercialAction}
chatAction={item.message.chatAction}
paymentGuidance={item.message.paymentGuidance}
isUnlockingMessage={
isUnlockingMessage === true &&
item.message.displayId === unlockingMessageId
@@ -350,9 +336,6 @@ function renderMessagesWithDateHeaders(
onCharacterAvatarClick={onCharacterAvatarClick}
onCommercialAction={onCommercialAction}
onCommercialActionDismiss={onCommercialActionDismiss}
onChatActionViewed={onChatActionViewed}
onChatAction={onChatAction}
onChatActionDismiss={onChatActionDismiss}
/>
),
);
+5 -20
View File
@@ -5,7 +5,7 @@
* 顶部保持返回、首充优惠、收藏入口三段结构。
*/
import type { ReactNode } from "react";
import { Lock, Phone } from "lucide-react";
import { Lock } from "lucide-react";
import { BackButton } from "@/app/_components";
import { FavoriteEntryButton } from "@/app/_components/core";
@@ -27,7 +27,6 @@ export function ChatHeader({
const navigator = useAppNavigator();
const character = useActiveCharacter();
const characterRoutes = useActiveCharacterRoutes();
const voiceCallEnabled = process.env.NEXT_PUBLIC_ENABLE_VOICE_CALL === "true";
return (
<header className="flex shrink-0 flex-col items-stretch bg-transparent p-0">
@@ -59,24 +58,10 @@ export function ChatHeader({
<div className="flex min-w-0 justify-center">{offerBanner}</div>
<div className="flex items-center gap-2">
{voiceCallEnabled ? (
<button
type="button"
className="inline-flex size-(--responsive-icon-button-size,42px) cursor-pointer items-center justify-center rounded-full border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-white shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md transition hover:bg-[rgba(28,24,39,0.82)] active:scale-96"
aria-label={`Call ${character.shortName}`}
data-analytics-key="chat.start_voice_call"
data-analytics-label="Start voice call"
onClick={() => navigator.push(characterRoutes.call)}
>
<Phone size={19} strokeWidth={2.3} aria-hidden="true" />
</button>
) : null}
<FavoriteEntryButton
characterSlug={character.slug}
tone="dark"
/>
</div>
<FavoriteEntryButton
characterSlug={character.slug}
tone="dark"
/>
</div>
</header>
);
+2 -11
View File
@@ -17,7 +17,7 @@ import { ChatSendButton } from "./chat-send-button";
import styles from "./chat-input-bar.module.css";
const log = new Logger("AppChatComponentsChatInputBar");
const POINTER_SEND_DEBOUNCE_MS = 300;
const POINTER_SEND_CLICK_DEDUPE_MS = 500;
const CHAT_ACTION_MENU_ID = "chat-composer-action-menu";
export interface ChatInputBarProps {
@@ -82,7 +82,7 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
const handleSend = (source: "click" | "keyboard" | "pointerdown") => {
if (source === "click") {
const elapsed = Date.now() - lastPointerSendAtRef.current;
if (elapsed >= 0 && elapsed < POINTER_SEND_DEBOUNCE_MS) {
if (elapsed >= 0 && elapsed < POINTER_SEND_CLICK_DEDUPE_MS) {
log.debug("[chat-input-bar] suppress duplicate click", {
elapsed,
contentLength: input.length,
@@ -115,15 +115,6 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
const handleMenuToggle = () => {
if (disabled || hasContent) return;
const elapsed = Date.now() - lastPointerSendAtRef.current;
if (elapsed >= 0 && elapsed < POINTER_SEND_DEBOUNCE_MS) {
log.debug("[chat-input-bar] suppress post-send menu toggle", {
elapsed,
disabled,
isFocused,
});
return;
}
if (!isActionMenuOpen) textareaRef.current?.blur();
setIsActionMenuOpen((open) => !open);
};
@@ -17,13 +17,11 @@
* - 不直接管理 state machinechat 机器不感知 UI 层)
*/
import { useAppNavigator } from "@/router/use-app-navigator";
import type { PaymentGuidance } from "@/data/schemas/chat";
export interface ChatInsufficientCreditsBannerProps {
title?: string;
description?: string;
ctaLabel?: string | null;
guidance?: PaymentGuidance | null;
ctaLabel?: string;
/**
* 自定义点击回调(不传则默认走统一订阅导航)
* - 测试时可传 mock
@@ -36,11 +34,9 @@ export function ChatInsufficientCreditsBanner({
title = "Insufficient credits\nTop up to continue chatting",
description,
ctaLabel = "Top up credits to continue",
guidance = null,
onUnlock,
}: ChatInsufficientCreditsBannerProps) {
const navigator = useAppNavigator();
const activeGuidance = guidance;
const titleLines = title.split("\n");
const handleClick = () => {
@@ -57,7 +53,6 @@ export function ChatInsufficientCreditsBanner({
role="status"
aria-live="polite"
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">
{titleLines.map((line, index) => (
@@ -72,12 +67,7 @@ export function ChatInsufficientCreditsBanner({
{description}
</p>
) : null}
{activeGuidance?.copy ? (
<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
<button
type="button"
data-analytics-key="chat.topup"
data-analytics-label="Top up chat credits"
@@ -86,7 +76,7 @@ export function ChatInsufficientCreditsBanner({
aria-label={ctaLabel}
>
{ctaLabel}
</button> : null}
</button>
</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}
isLoading={model.historyUnlock.isLoading}
errorMessage={model.historyUnlock.errorMessage}
guidance={model.historyUnlock.guidance}
onClose={model.closeHistoryUnlock}
onConfirm={model.confirmHistoryUnlock}
/>
@@ -28,7 +27,6 @@ export function ChatUnlockDialogs({
creditBalance={model.unlockPaywallRequest?.creditBalance ?? 0}
requiredCredits={model.unlockPaywallRequest?.requiredCredits ?? 0}
shortfallCredits={model.unlockPaywallRequest?.shortfallCredits ?? 0}
guidance={model.unlockPaywallRequest?.paymentGuidance ?? null}
onClose={model.closePaywall}
onConfirm={model.confirmPaywall}
/>
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
import { ArrowRight, BadgePercent, Gift, Images, LoaderCircle, X } from "lucide-react";
import { ArrowRight, Gift, Images, X } from "lucide-react";
import type { CommercialAction } from "@/data/schemas/chat";
@@ -9,7 +9,7 @@ import styles from "./chat-area.module.css";
export interface CommercialActionCardProps {
action: CommercialAction;
onActivate?: (action: CommercialAction) => void | Promise<void>;
onActivate?: (action: CommercialAction) => void;
onDismiss?: (action: CommercialAction) => void;
}
@@ -19,16 +19,9 @@ export function CommercialActionCard({
onDismiss,
}: CommercialActionCardProps) {
const [dismissed, setDismissed] = useState(false);
const [activating, setActivating] = useState(false);
const [activationError, setActivationError] = useState<string | null>(null);
if (dismissed) return null;
const Icon =
action.type === "giftOffer"
? Gift
: action.type === "discountOffer"
? BadgePercent
: Images;
const Icon = action.type === "giftOffer" ? Gift : Images;
return (
<aside
@@ -52,29 +45,13 @@ export function CommercialActionCard({
</button>
</div>
<p className={styles.commercialActionCopy}>{action.copy}</p>
{activationError ? (
<p className={styles.commercialActionError} role="alert">
{activationError}
</p>
) : null}
<button
type="button"
className={styles.commercialActionButton}
disabled={activating}
onClick={() => {
setActivating(true);
setActivationError(null);
void Promise.resolve(onActivate?.(action))
.catch(() => setActivationError("This private offer is unavailable right now. Please try again."))
.finally(() => setActivating(false));
}}
onClick={() => onActivate?.(action)}
>
<span>{action.ctaLabel}</span>
{activating ? (
<LoaderCircle className={styles.commercialActionSpinner} size={17} aria-hidden="true" />
) : (
<ArrowRight size={17} aria-hidden="true" />
)}
<ArrowRight size={17} aria-hidden="true" />
</button>
</aside>
);
@@ -123,14 +123,13 @@
.compactButton {
display: grid;
width: min(100%, 240px);
min-width: 0;
max-width: 240px;
min-height: 50px;
max-width: 224px;
min-height: 44px;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 7px 10px;
gap: 7px;
padding: 5px 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.42);
border-radius: 16px;
@@ -147,8 +146,8 @@
.compactIcon {
display: inline-flex;
width: 32px;
height: 32px;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
border-radius: 10px;
@@ -161,7 +160,7 @@
min-width: 0;
flex-direction: column;
gap: 2px;
font-size: 11px;
font-size: 10px;
font-weight: 800;
line-height: 1.05;
text-transform: uppercase;
@@ -181,7 +180,7 @@
.compactCopy strong {
color: #ec006d;
font-size: 17px;
font-size: 15px;
font-weight: 950;
letter-spacing: -0.02em;
}
@@ -10,7 +10,7 @@
* - 双指缩放(CSS `touch-action: pinch-zoom`
*/
import { ChevronLeft } from "lucide-react";
import { useEffect, type MouseEvent } from "react";
import { useEffect } from "react";
import { BackButton } from "@/app/_components";
@@ -44,10 +44,6 @@ export function FullscreenImageViewer({
return () => document.removeEventListener("keydown", handleKey);
}, [onClose]);
const handleBackdropClick = (event: MouseEvent<HTMLDivElement>) => {
if (event.target === event.currentTarget) onClose();
};
if (imagePaywalled) {
return (
<div
@@ -94,7 +90,7 @@ export function FullscreenImageViewer({
return (
<div
className={styles.viewer}
onClick={handleBackdropClick}
onClick={onClose}
role="dialog"
aria-modal="true"
aria-label="Fullscreen image"
@@ -114,7 +110,7 @@ export function FullscreenImageViewer({
errorClassName="error"
width={800}
height={800}
onClick={onClose}
onClick={(event) => event.stopPropagation()}
/>
</div>
);
@@ -1,13 +1,10 @@
"use client";
import type { PaymentGuidance } from "@/data/schemas/chat";
export interface HistoryUnlockDialogProps {
open: boolean;
lockedCount: number;
isLoading?: boolean;
errorMessage?: string | null;
guidance?: PaymentGuidance | null;
onClose: () => void;
onConfirm: () => void;
}
@@ -17,15 +14,10 @@ export function HistoryUnlockDialog({
lockedCount,
isLoading = false,
errorMessage,
guidance = null,
onClose,
onConfirm,
}: HistoryUnlockDialogProps) {
if (!open) return null;
const activeGuidance = guidance;
const showAction =
!activeGuidance ||
(activeGuidance.mode === "guide" && activeGuidance.ctaLabel !== null);
return (
<div
@@ -39,16 +31,11 @@ export function HistoryUnlockDialog({
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"
>
{activeGuidance?.title ?? "Unlock previous messages?"}
Unlock previous messages?
</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]">
{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>
{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]">
@@ -64,7 +51,7 @@ export function HistoryUnlockDialog({
>
Later
</button>
{showAction ? <button
<button
type="button"
data-analytics-key="chat.unlock_history"
data-analytics-label="Unlock chat history"
@@ -72,10 +59,8 @@ export function HistoryUnlockDialog({
onClick={onConfirm}
disabled={isLoading}
>
{isLoading
? "Unlocking..."
: activeGuidance?.ctaLabel ?? "Unlock now"}
</button> : null}
{isLoading ? "Unlocking..." : "Unlock now"}
</button>
</div>
</div>
</div>
-3
View File
@@ -6,13 +6,11 @@ export * from "./ai-disclosure-banner";
export * from "./browser-hint-overlay";
export * from "./chat-area";
export * from "./commercial-action-card";
export * from "./chat-action-card";
export * from "./chat-header";
export * from "./chat-insufficient-credits-banner";
export * from "./chat-input-bar";
export * from "./chat-input-text-field";
export * from "./chat-send-button";
export * from "./chat-support-button";
export * from "./chat-unlock-dialogs";
export * from "./date-header";
export * from "./first-recharge-offer-banner";
@@ -23,7 +21,6 @@ export * from "./insufficient-credits-dialog";
export * from "./message-avatar";
export * from "./message-bubble";
export * from "./message-content";
export * from "./payment-guidance-card";
export * from "./private-message-card";
export * from "./pwa-install-dialog";
export * from "./pwa-install-overlay";
@@ -1,13 +1,10 @@
"use client";
import type { PaymentGuidance } from "@/data/schemas/chat";
export interface InsufficientCreditsDialogProps {
open: boolean;
creditBalance: number;
requiredCredits: number;
shortfallCredits: number;
guidance?: PaymentGuidance | null;
onClose: () => void;
onConfirm: () => void;
}
@@ -17,17 +14,12 @@ export function InsufficientCreditsDialog({
creditBalance,
requiredCredits,
shortfallCredits,
guidance = null,
onClose,
onConfirm,
}: InsufficientCreditsDialogProps) {
if (!open) return null;
const showCreditDetail = requiredCredits > 0 || shortfallCredits > 0;
const activeGuidance = guidance;
const showPurchaseAction =
!activeGuidance ||
(activeGuidance.mode === "guide" && activeGuidance.ctaLabel !== null);
return (
<div
@@ -41,11 +33,10 @@ export function InsufficientCreditsDialog({
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"
>
{activeGuidance?.title ?? "Not enough credits"}
Not enough credits
</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]">
{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>
{showCreditDetail ? (
@@ -79,15 +70,15 @@ export function InsufficientCreditsDialog({
>
Later
</button>
{showPurchaseAction ? <button
<button
type="button"
data-analytics-key="chat.topup"
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]"
onClick={onConfirm}
>
{activeGuidance?.ctaLabel ?? "Top up now"}
</button> : null}
Top up now
</button>
</div>
</div>
</div>
+1 -16
View File
@@ -9,7 +9,7 @@
* - 用户:[占位 spacer] [Content] [Avatar]
*/
import { useUserSelector } from "@/stores/user/user-context";
import type { ChatAction, CommercialAction, PaymentGuidance } from "@/data/schemas/chat";
import type { CommercialAction } from "@/data/schemas/chat";
import { MessageAvatar } from "./message-avatar";
import { MessageContent } from "./message-content";
@@ -29,8 +29,6 @@ export interface MessageBubbleProps {
lockedPrivate?: boolean | null;
privateMessageHint?: string | null;
commercialAction?: CommercialAction | null;
chatAction?: ChatAction | null;
paymentGuidance?: PaymentGuidance | null;
isUnlockingMessage?: boolean;
onUnlockPrivateMessage?: ChatMessageAction;
onUnlockVoiceMessage?: ChatMessageAction;
@@ -40,9 +38,6 @@ export interface MessageBubbleProps {
onCharacterAvatarClick?: () => void;
onCommercialAction?: (action: CommercialAction) => void;
onCommercialActionDismiss?: (action: CommercialAction) => void;
onChatActionViewed?: (action: ChatAction) => void;
onChatAction?: (action: ChatAction) => void | Promise<void>;
onChatActionDismiss?: (action: ChatAction) => void;
}
type ChatMessageAction = (
@@ -64,8 +59,6 @@ export function MessageBubble({
lockedPrivate,
privateMessageHint,
commercialAction,
chatAction,
paymentGuidance,
isUnlockingMessage,
onUnlockPrivateMessage,
onUnlockVoiceMessage,
@@ -75,9 +68,6 @@ export function MessageBubble({
onCharacterAvatarClick,
onCommercialAction,
onCommercialActionDismiss,
onChatActionViewed,
onChatAction,
onChatActionDismiss,
}: MessageBubbleProps) {
const avatarUrl = useUserSelector((state) => state.context.avatarUrl);
@@ -107,8 +97,6 @@ export function MessageBubble({
lockedPrivate={lockedPrivate}
privateMessageHint={privateMessageHint}
commercialAction={commercialAction}
chatAction={chatAction}
paymentGuidance={paymentGuidance}
isUnlockingMessage={isUnlockingMessage}
onUnlockPrivateMessage={onUnlockPrivateMessage}
onUnlockVoiceMessage={onUnlockVoiceMessage}
@@ -116,9 +104,6 @@ export function MessageBubble({
onOpenImage={onOpenImage}
onCommercialAction={onCommercialAction}
onCommercialActionDismiss={onCommercialActionDismiss}
onChatActionViewed={onChatActionViewed}
onChatAction={onChatAction}
onChatActionDismiss={onChatActionDismiss}
/>
<div className={styles.bubbleAvatarSpacer} aria-hidden="true" />
</div>
+2 -27
View File
@@ -1,16 +1,10 @@
"use client";
import type {
ChatAction,
CommercialAction,
PaymentGuidance,
} from "@/data/schemas/chat";
import type { CommercialAction } from "@/data/schemas/chat";
import { ChatActionCard } from "./chat-action-card";
import { CommercialActionCard } from "./commercial-action-card";
import { ImageBubble } from "./image-bubble";
import { LockedImageMessageCard } from "./locked-image-message-card";
import { PrivateMessageCard } from "./private-message-card";
import { PaymentGuidanceCard } from "./payment-guidance-card";
import { TextBubble } from "./text-bubble";
import { VoiceBubble } from "./voice-bubble";
import styles from "./chat-area.module.css";
@@ -29,8 +23,6 @@ export interface MessageContentProps {
lockedPrivate?: boolean | null;
privateMessageHint?: string | null;
commercialAction?: CommercialAction | null;
chatAction?: ChatAction | null;
paymentGuidance?: PaymentGuidance | null;
isUnlockingMessage?: boolean;
onUnlockPrivateMessage?: ChatMessageAction;
onUnlockVoiceMessage?: ChatMessageAction;
@@ -38,9 +30,6 @@ export interface MessageContentProps {
onOpenImage?: (displayMessageId: string) => void;
onCommercialAction?: (action: CommercialAction) => void;
onCommercialActionDismiss?: (action: CommercialAction) => void;
onChatActionViewed?: (action: ChatAction) => void;
onChatAction?: (action: ChatAction) => void | Promise<void>;
onChatActionDismiss?: (action: ChatAction) => void;
}
type ChatMessageAction = (
@@ -64,8 +53,6 @@ export function MessageContent({
lockedPrivate,
privateMessageHint,
commercialAction,
chatAction,
paymentGuidance,
isUnlockingMessage,
onUnlockPrivateMessage,
onUnlockVoiceMessage,
@@ -73,9 +60,6 @@ export function MessageContent({
onOpenImage,
onCommercialAction,
onCommercialActionDismiss,
onChatActionViewed,
onChatAction,
onChatActionDismiss,
}: MessageContentProps) {
const hasImage = imageUrl != null && imageUrl.length > 0;
const hasAudio = audioUrl != null && audioUrl.length > 0;
@@ -150,16 +134,7 @@ export function MessageContent({
) : null}
</>
)}
{isFromAI && paymentGuidance ? (
<PaymentGuidanceCard guidance={paymentGuidance} />
) : isFromAI && chatAction ? (
<ChatActionCard
action={chatAction}
onViewed={onChatActionViewed}
onActivate={onChatAction}
onDismiss={onChatActionDismiss}
/>
) : isFromAI && commercialAction ? (
{isFromAI && commercialAction ? (
<CommercialActionCard
action={commercialAction}
onActivate={onCommercialAction}
@@ -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 { useAppNavigator } from "@/router/use-app-navigator";
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 {
@@ -20,14 +17,10 @@ import {
export interface UseChatMessageLimitBannerInput {
upgradePromptVisible: boolean;
upgradeReason: ChatUpgradeReason | null;
paymentGuidance: PaymentGuidance | null;
}
export interface ChatMessageLimitBannerView {
title: string;
description: string;
ctaLabel: string | null;
guidance: PaymentGuidance | null;
export interface ChatMessageLimitBannerView
extends InsufficientCreditsMessageLimitView {
visible: boolean;
unlock: () => void;
}
@@ -35,19 +28,10 @@ export interface ChatMessageLimitBannerView {
export function useChatMessageLimitBanner({
upgradePromptVisible,
upgradeReason,
paymentGuidance,
}: UseChatMessageLimitBannerInput): ChatMessageLimitBannerView {
const navigator = useAppNavigator();
const character = useActiveCharacter();
const isVip = useUserSelector((state) => state.context.isVip);
const fallbackView = 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 view = getInsufficientCreditsMessageLimitView();
const visible = shouldShowMessageLimitBanner({
upgradePromptVisible,
upgradeReason,
@@ -68,31 +52,12 @@ export function useChatMessageLimitBanner({
},
{ isVip },
);
if (guidance) {
void recordChatActionEventById(
guidance.guidanceId,
character.id,
"viewed",
).catch(() => undefined);
}
}, [character.id, guidance, isVip, visible]);
}, [isVip, visible]);
function unlock(): void {
if (guidance?.mode !== "guide" && guidance !== null) return;
if (guidance) {
void recordChatActionEventById(
guidance.guidanceId,
character.id,
"opened",
).catch(() => undefined);
}
navigator.openSubscription({
type:
isVip || (guidance && !guidance.purchaseOptions.includes("vip"))
? "topup"
: getInsufficientCreditsSubscriptionType(isVip),
type: getInsufficientCreditsSubscriptionType(isVip),
returnTo: "chat",
...(guidance ? { chatActionId: guidance.guidanceId } : {}),
analytics: {
entryPoint: "chat_input",
triggerReason: "insufficient_credits",
@@ -102,9 +67,6 @@ export function useChatMessageLimitBanner({
return {
...view,
ctaLabel:
guidance && guidance.mode !== "guide" ? null : view.ctaLabel,
guidance,
visible,
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 { ChatUnlockPaywallRequest } from "@/stores/chat/chat-state";
import type { UiMessage } from "@/stores/chat/ui-message";
import { recordChatActionEventById } from "@/lib/chat/chat_action_events";
import { useUserSelector } from "@/stores/user/user-context";
import { getInsufficientCreditsSubscriptionType } from "../chat-screen.helpers";
@@ -49,7 +48,6 @@ export interface ChatUnlockDialogModel {
lockedCount: number;
isLoading: boolean;
errorMessage: string | null;
guidance: import("@/data/schemas/chat").PaymentGuidance | null;
};
closeHistoryUnlock: () => void;
confirmHistoryUnlock: () => void;
@@ -89,8 +87,6 @@ export function useChatUnlockCoordinator({
isUnlockingHistory: state.matches({ userSession: "unlockingHistory" }),
lockedHistoryCount: state.context.lockedHistoryCount,
unlockHistoryError: state.context.unlockHistoryError,
unlockHistoryPaymentGuidance:
state.context.unlockHistoryPaymentGuidance,
unlockHistoryPromptVisible: state.context.unlockHistoryPromptVisible,
unlockPaywallRequest: state.context.unlockPaywallRequest,
}),
@@ -101,20 +97,6 @@ export function useChatUnlockCoordinator({
? chatState.unlockPaywallRequest
: 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(() => {
if (!unlockPaywallRequest) {
trackedPaywallRef.current = null;
@@ -138,15 +120,7 @@ export function useChatUnlockCoordinator({
},
{ isVip },
);
const guidance = unlockPaywallRequest.paymentGuidance;
if (guidance?.characterId === chatState.characterId) {
void recordChatActionEventById(
guidance.guidanceId,
chatState.characterId,
"viewed",
).catch(() => undefined);
}
}, [chatState.characterId, isVip, unlockPaywallRequest]);
}, [isVip, unlockPaywallRequest]);
useEffect(() => {
if (!enabled) return;
@@ -238,32 +212,6 @@ export function useChatUnlockCoordinator({
}
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" });
}
@@ -273,12 +221,6 @@ export function useChatUnlockCoordinator({
function confirmPaywall(): void {
if (!unlockPaywallRequest) return;
const guidance =
unlockPaywallRequest.paymentGuidance?.characterId ===
chatState.characterId
? unlockPaywallRequest.paymentGuidance
: null;
if (guidance && guidance.mode !== "guide") return;
const returnUrl = resolveChatUnlockReturnUrl(
unlockPaywallRequest,
@@ -289,13 +231,6 @@ export function useChatUnlockCoordinator({
},
);
chatDispatch({ type: "ChatUnlockPaywallNavigationConsumed" });
if (guidance) {
void recordChatActionEventById(
guidance.guidanceId,
chatState.characterId,
"opened",
).catch(() => undefined);
}
navigator.openSubscriptionForPendingUnlock({
displayMessageId: unlockPaywallRequest.displayMessageId,
messageId: unlockPaywallRequest.messageId,
@@ -304,17 +239,13 @@ export function useChatUnlockCoordinator({
clientLockId: unlockPaywallRequest.clientLockId,
promotion: unlockPaywallRequest.promotion,
returnUrl,
type:
isVip || (guidance && !guidance.purchaseOptions.includes("vip"))
? "topup"
: getInsufficientCreditsSubscriptionType(isVip),
type: getInsufficientCreditsSubscriptionType(isVip),
analytics: {
entryPoint: "chat_unlock",
triggerReason: unlockPaywallRequest.promotion
? "ad_landing"
: "insufficient_credits",
},
...(guidance ? { chatActionId: guidance.guidanceId } : {}),
});
}
@@ -327,7 +258,6 @@ export function useChatUnlockCoordinator({
lockedCount: chatState.lockedHistoryCount,
isLoading: chatState.isUnlockingHistory,
errorMessage: chatState.unlockHistoryError,
guidance: chatState.unlockHistoryPaymentGuidance,
},
closeHistoryUnlock,
confirmHistoryUnlock,
@@ -14,20 +14,9 @@ vi.mock("@/stores/auth/auth-context", () => ({
vi.mock("@/stores/user/user-context", () => ({
useUserDispatch: () => vi.fn(),
useUserState: () => ({
currentUser: null,
entitlements: {
quotas: {
normalChatFreeDaily: 47,
privateUnlockFreeDaily: 5,
},
costs: {
normal_message: 3,
private_message: 9,
voice_message: 11,
photo: 13,
private_album_10: 101,
private_album_20: 181,
},
currentUser: {
dailyFreeChatLimit: 30,
dailyFreePrivateLimit: 2,
},
}),
}));
@@ -42,11 +31,5 @@ describe("CoinsRulesScreen", () => {
expect(html).toContain(
'href="/profile?returnTo=%2Fcharacters%2Fmaya%2Fchat"',
);
expect(html).toContain("47 free messages daily");
expect(html).toContain("5 free private messages daily");
expect(html).toContain("3 coins / message");
expect(html).toContain("10 photos / 101 coins");
expect(html).not.toContain("30 free messages daily");
expect(html).not.toContain("2 free private messages daily");
});
});
+23 -59
View File
@@ -19,6 +19,10 @@ import {
import { useAuthState } from "@/stores/auth/auth-context";
import { useUserDispatch, useUserState } from "@/stores/user/user-context";
import {
FREE_PRIVATE_MESSAGE_DAILY_COUNT,
FREE_STANDARD_CHAT_DAILY_COUNT,
} from "./coins-rules.constants";
import styles from "./coins-rules-screen.module.css";
interface CoinRuleItem {
@@ -31,44 +35,25 @@ interface CoinRuleItem {
const formatDailyFreeMessages = (count: number, label: string): string =>
`${Math.max(0, Math.trunc(count))} free ${label} daily`;
const formatCoinCost = (cost: number | null, unit: string): string =>
cost === null
? "Current rate shown at unlock"
: `${Math.max(0, Math.trunc(cost))} coins / ${unit}`;
const createCoinRules = (
dailyFreeChatLimit: number | null,
dailyFreePrivateLimit: number | null,
costs: {
normalMessage: number | null;
privateMessage: number | null;
voiceMessage: number | null;
photo: number | null;
privateAlbum10: number | null;
privateAlbum20: number | null;
},
dailyFreeChatLimit: number,
dailyFreePrivateLimit: number,
): readonly CoinRuleItem[] => [
{
title: "Standard Chat",
cost: formatCoinCost(costs.normalMessage, "message"),
free:
dailyFreeChatLimit === null
? "Current daily allowance loads from your account"
: formatDailyFreeMessages(dailyFreeChatLimit, "messages"),
cost: "2 coins / message",
free: formatDailyFreeMessages(dailyFreeChatLimit, "messages"),
icon: MessageCircle,
},
{
title: "Private Chat",
cost: formatCoinCost(costs.privateMessage, "message"),
free:
dailyFreePrivateLimit === null
? "Current daily allowance loads from your account"
: formatDailyFreeMessages(dailyFreePrivateLimit, "private messages"),
cost: "10 coins / message",
free: formatDailyFreeMessages(dailyFreePrivateLimit, "private messages"),
icon: Sparkles,
},
{
title: "Voice Message",
cost: formatCoinCost(costs.voiceMessage, "message"),
cost: "20 coins / message",
icon: Mic2,
},
// {
@@ -78,23 +63,17 @@ const createCoinRules = (
// },
{
title: "Photo",
cost: formatCoinCost(costs.photo, "photo"),
cost: "40 coins / photo",
icon: ImageIcon,
},
{
title: "Private Album",
cost:
costs.privateAlbum10 === null
? "Current price shown in Private Zone"
: `10 photos / ${Math.max(0, Math.trunc(costs.privateAlbum10))} coins`,
cost: "10 photos / 300 coins",
icon: ImageIcon,
},
{
title: "Private Album",
cost:
costs.privateAlbum20 === null
? "Current price shown in Private Zone"
: `20 photos / ${Math.max(0, Math.trunc(costs.privateAlbum20))} coins`,
cost: "20 photos / 600 coins",
icon: ImageIcon,
},
] as const;
@@ -108,35 +87,20 @@ export function CoinsRulesScreen({ returnTo }: CoinsRulesScreenProps) {
const authState = useAuthState();
const userState = useUserState();
const userDispatch = useUserDispatch();
const entitlements = userState.entitlements;
const dailyFreeChatLimit =
entitlements?.quotas.normalChatFreeDaily ??
userState.currentUser?.dailyFreeChatLimit ??
null;
userState.currentUser?.dailyFreeChatLimit ?? FREE_STANDARD_CHAT_DAILY_COUNT;
const dailyFreePrivateLimit =
entitlements?.quotas.privateUnlockFreeDaily ??
userState.currentUser?.dailyFreePrivateLimit ??
null;
const standardChatLabel =
dailyFreeChatLimit === null
? "the current daily allowance shown for your account"
: formatDailyFreeMessages(dailyFreeChatLimit, "messages");
const privateChatLabel =
dailyFreePrivateLimit === null
? "the current private allowance shown for your account"
: formatDailyFreeMessages(dailyFreePrivateLimit, "private messages");
const coinRules = createCoinRules(
FREE_PRIVATE_MESSAGE_DAILY_COUNT;
const standardChatLabel = formatDailyFreeMessages(
dailyFreeChatLimit,
dailyFreePrivateLimit,
{
normalMessage: entitlements?.costs.normal_message ?? null,
privateMessage: entitlements?.costs.private_message ?? null,
voiceMessage: entitlements?.costs.voice_message ?? null,
photo: entitlements?.costs.photo ?? null,
privateAlbum10: entitlements?.costs.private_album_10 ?? null,
privateAlbum20: entitlements?.costs.private_album_20 ?? null,
},
"messages",
);
const privateChatLabel = formatDailyFreeMessages(
dailyFreePrivateLimit,
"private messages",
);
const coinRules = createCoinRules(dailyFreeChatLimit, dailyFreePrivateLimit);
useEffect(() => {
if (!authState.hasInitialized || authState.isLoading) return;
@@ -0,0 +1,2 @@
export const FREE_STANDARD_CHAT_DAILY_COUNT = 30;
export const FREE_PRIVATE_MESSAGE_DAILY_COUNT = 2;
@@ -21,8 +21,6 @@ import {
} from "@/data/constants/character";
import { Logger } from "@/utils/logger";
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
import { consumeTopUpHandoff } from "@/lib/auth/top_up_handoff";
import { Result } from "@/utils/result";
import {
isFavoriteEntryRequest,
persistFavoriteEntryIntent,
@@ -40,7 +38,6 @@ interface ExternalEntryPersistProps {
mode: string | null;
promotionType: string | null;
favorite: string | null;
handoffToken: string | null;
}
export default function ExternalEntryPersist({
@@ -53,16 +50,13 @@ export default function ExternalEntryPersist({
mode,
promotionType,
favorite,
handoffToken,
}: ExternalEntryPersistProps) {
const router = useRouter();
const authState = useAuthState();
const authDispatch = useAuthDispatch();
const [hasPersisted, setHasPersisted] = useState(false);
const [handoffError, setHandoffError] = useState<string | null>(null);
const [handoffCompleted, setHandoffCompleted] = useState(false);
const hasNavigatedRef = useRef(false);
const handoffStartedRef = useRef(false);
const hasReinitializedForPsidRef = useRef(false);
const targetRoute = resolveExternalEntryTarget({ target });
const destination = resolveExternalEntryDestination({ target, character });
const characterId =
@@ -71,12 +65,6 @@ export default function ExternalEntryPersist({
mode,
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(() => {
let cancelled = false;
@@ -128,39 +116,12 @@ export default function ExternalEntryPersist({
useEffect(() => {
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 (handoffCompleted) {
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" });
})();
hasReinitializedForPsidRef.current = true;
authDispatch({ type: "AuthInit" });
return;
}
@@ -189,12 +150,8 @@ export default function ExternalEntryPersist({
authState.hasInitialized,
authState.isLoading,
authState.loginStatus,
character,
destination,
hasPersisted,
handoffCompleted,
handoffToken,
isTopUpHandoff,
psid,
router,
]);
@@ -204,26 +161,11 @@ export default function ExternalEntryPersist({
className="flex flex-1 items-center justify-center"
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
aria-label="Redirecting"
className="size-10 animate-spin rounded-full border-4 border-t-transparent"
style={{ borderColor: "var(--color-accent)" }}
/>
)}
<div
aria-label="Redirecting"
className="size-10 animate-spin rounded-full border-4 border-t-transparent"
style={{ borderColor: "var(--color-accent)" }}
/>
</div>
);
}
-3
View File
@@ -6,8 +6,6 @@
* `/external-entry?target=chat&mode=promotion&promotion_type=voice`
* `/external-entry?target=chat&character=maya`
* `/external-entry?target=tip`
* `/external-entry?target=private-zone&character=nayeli`
* `/external-entry?target=topup&handoffToken=<opaque-token>`
*
* 页面不直接 `redirect()`,而是把数据交给 Client 组件先写入本地存储,
* 再通过 `router.replace()` 清理 URL 并跳转到最终页面。
@@ -37,7 +35,6 @@ export default async function ExternalEntryPage({
mode={pickParam(params.mode)}
promotionType={pickParam(params.promotion_type)}
favorite={pickParam(params.favorite)}
handoffToken={pickParam(params.handoffToken)}
/>
);
}
+2 -2
View File
@@ -22,8 +22,8 @@ export const metadata: Metadata = {
},
// iOS 触屏图标
icons: {
icon: "/favicon.ico?v=20260724",
apple: "/images/icons/Icon-192.png?v=20260724",
icon: "/favicon.ico",
apple: "/favicon.ico",
},
};
@@ -58,13 +58,13 @@ describe("Private Zone paywall navigation", () => {
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>>();
renderHarness(root, "email", roomDispatch);
expect(mocks.openSubscription).toHaveBeenCalledWith({
type: "vip",
type: "topup",
returnTo: "private-zone",
analytics: {
entryPoint: "private_album_unlock",
@@ -115,7 +115,6 @@ function Harness({
loginStatus,
roomDispatch,
unlockPaywallRequest,
isVip: false,
});
return null;
}
@@ -1,67 +0,0 @@
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
import { PrivateZoneVideoPostCard } from "../private-zone-video-post-card";
const basePost = {
postId: "11111111-1111-1111-1111-111111111111",
characterId: "maya-tan",
caption: "Only for you.",
posterUrl: "https://storage.example/poster.jpg?token=short",
mediaType: "video" as const,
videoUrl: null,
videoMimeType: "video/mp4",
videoSizeBytes: 1024,
durationSeconds: 18,
unlockCostCredits: 100,
currency: "credits" as const,
locked: true,
unlocked: false,
availableForNewUnlock: true,
publishedAt: "2026-07-24T10:00:00+00:00",
};
describe("PrivateZoneVideoPostCard", () => {
it("shows caption and poster but no video source while locked", () => {
const html = renderToStaticMarkup(
<PrivateZoneVideoPostCard
post={basePost}
displayName="Maya"
avatarUrl="/images/avatar.png"
index={0}
isUnlocking={false}
onUnlock={() => undefined}
onPlaybackError={() => undefined}
/>,
);
expect(html).toContain("Only for you.");
expect(html).toContain("poster.jpg");
expect(html).toContain("Unlock for 100 credits");
expect(html).not.toContain("<video");
});
it("renders an inline controlled video only after unlock", () => {
const html = renderToStaticMarkup(
<PrivateZoneVideoPostCard
post={{
...basePost,
locked: false,
unlocked: true,
videoUrl: "https://storage.example/video.mp4?token=short",
}}
displayName="Maya"
avatarUrl="/images/avatar.png"
index={0}
isUnlocking={false}
onUnlock={() => undefined}
onPlaybackError={() => undefined}
/>,
);
expect(html).toContain("<video");
expect(html).toContain("controls");
expect(html).toContain("playsInline");
expect(html).not.toContain("autoplay");
});
});
-2
View File
@@ -1,6 +1,4 @@
export * from "./private-album-card";
export * from "./private-album-gallery";
export * from "./private-zone-video-post-card";
export * from "./status-card";
export * from "./unlock-confirm-dialog";
export * from "./video-post-unlock-dialog";
@@ -1,125 +0,0 @@
import type { CSSProperties } from "react";
import { LockKeyhole, Play } from "lucide-react";
import { CharacterAvatar } from "@/app/_components";
import type { PrivateZoneVideoPost } from "@/data/schemas/private-zone";
import styles from "../private-zone-screen.module.css";
export interface PrivateZoneVideoPostCardProps {
post: PrivateZoneVideoPost;
displayName: string;
avatarUrl: string;
index: number;
isUnlocking: boolean;
onUnlock: () => void;
onPlaybackError: () => void;
}
export function PrivateZoneVideoPostCard({
post,
displayName,
avatarUrl,
index,
isUnlocking,
onUnlock,
onPlaybackError,
}: PrivateZoneVideoPostCardProps) {
return (
<article
className={styles.postCard}
style={{ "--reveal-index": index } as CSSProperties}
>
<header className={styles.postHeader}>
<div className={styles.postAuthor}>
<CharacterAvatar
src={avatarUrl}
alt=""
size={38}
imageSize={38}
className={styles.postAvatar}
/>
<div>
<p className={styles.authorName}>{displayName}</p>
<p className={styles.authorSubline}>Private moment</p>
</div>
</div>
<time className={styles.postTime}>{formatMomentTime(post.publishedAt)}</time>
</header>
{post.caption ? <p className={styles.postText}>{post.caption}</p> : null}
{post.unlocked && post.videoUrl ? (
<video
className={styles.momentVideo}
controls
playsInline
preload="metadata"
poster={post.posterUrl ?? undefined}
onError={onPlaybackError}
>
<source src={post.videoUrl} type={post.videoMimeType || "video/mp4"} />
Your browser cannot play this video.
</video>
) : (
<div className={styles.momentLockedMedia}>
{post.posterUrl ? (
// Signed private media URLs intentionally bypass Next image optimization.
// eslint-disable-next-line @next/next/no-img-element
<img
className={styles.momentPoster}
src={post.posterUrl}
alt="Private video cover"
/>
) : (
<div className={styles.momentPosterFallback}>
<Play size={34} aria-hidden="true" />
</div>
)}
<div className={styles.momentLockPanel}>
<span className={styles.momentLockIcon} aria-hidden="true">
<LockKeyhole size={18} />
</span>
<strong>Private video</strong>
<span>
{post.durationSeconds == null
? "Unlock to watch"
: `${formatDuration(post.durationSeconds)} · Unlock to watch`}
</span>
<button
type="button"
data-analytics-key="private_zone_video.unlock"
data-analytics-label="Unlock Private Zone video moment"
disabled={isUnlocking || !post.availableForNewUnlock}
onClick={onUnlock}
>
{isUnlocking
? "Unlocking..."
: post.availableForNewUnlock
? `Unlock for ${post.unlockCostCredits} credits`
: "No longer available"}
</button>
</div>
</div>
)}
</article>
);
}
function formatDuration(seconds: number): string {
const safe = Math.max(0, Math.round(seconds));
const minutes = Math.floor(safe / 60);
const remainder = String(safe % 60).padStart(2, "0");
return `${minutes}:${remainder}`;
}
function formatMomentTime(value: string): string {
const parsed = new Date(value);
if (Number.isNaN(parsed.getTime())) return "Just now";
const seconds = Math.max(0, Math.floor((Date.now() - parsed.getTime()) / 1000));
if (seconds < 60) return "Just now";
if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`;
if (seconds < 604800) return `${Math.floor(seconds / 86400)}d`;
return parsed.toLocaleDateString(undefined, { month: "short", day: "numeric" });
}
@@ -1,54 +0,0 @@
import type { PrivateZoneVideoPost } from "@/data/schemas/private-zone";
import styles from "../private-zone-screen.module.css";
export interface VideoPostUnlockDialogProps {
post: PrivateZoneVideoPost;
isUnlocking: boolean;
errorMessage: string | null;
onCancel: () => void;
onConfirm: () => void;
}
export function VideoPostUnlockDialog({
post,
isUnlocking,
errorMessage,
onCancel,
onConfirm,
}: VideoPostUnlockDialogProps) {
return (
<div className={styles.dialogOverlay} role="alertdialog" aria-modal="true">
<div className={styles.dialog}>
<h2 className={styles.dialogTitle}>Unlock this private video?</h2>
<p className={styles.dialogCopy}>
You&apos;ll use {post.unlockCostCredits} credits. The video stays in your
Private Zone after unlocking.
</p>
{errorMessage ? (
<p className={styles.dialogError}>{errorMessage}</p>
) : null}
<div className={styles.dialogActions}>
<button
type="button"
className={styles.dialogSecondary}
disabled={isUnlocking}
onClick={onCancel}
>
Cancel
</button>
<button
type="button"
data-analytics-key="private_zone_video.unlock_confirm"
data-analytics-label="Confirm Private Zone video unlock"
className={styles.dialogPrimary}
disabled={isUnlocking}
onClick={onConfirm}
>
{isUnlocking ? "Unlocking..." : "Unlock"}
</button>
</div>
</div>
</div>
);
}

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