feat(mobile): improve image viewer and install entry

(cherry picked from commit 556bfd2919)

.gitea/workflows/docker-image.yml

@@ -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" \
+          ssh $SSH_OPTS "$SSH_TARGET" "mkdir -p '$DEPLOY_DIR'"
-            "mkdir -p '$DEPLOY_DIR' '$DEPLOY_SHARED_DIR' '$DEPLOY_ROOT/releases' '$DEPLOY_ROOT/backups' '$DEPLOY_ROOT/tmp' && chmod 700 '$DEPLOY_SHARED_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"
+          scp $SCP_OPTS "$NEXT_ENV_FILE" "$SSH_TARGET:$DEPLOY_DIR/$NEXT_ENV_FILE"
-          ssh $SSH_OPTS "$SSH_TARGET" "chmod 600 '$REMOTE_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:

.gitea/workflows/domestic-test.yml

@@ -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"

docs/external-entry/README.md

@@ -1,11 +1,11 @@
 # 外部入口接入说明
 
-Facebook 等外部应用统一通过 `/external-entry` 进入本应用。入口先保存外部身份和短期业务意图，再跳转到对应角色页面并清理地址栏中的入口查询参数。
+外部应用通过 `/external-entry` 进入本应用。
 
 | 环境 | APP HOST |
 | --- | --- |
-| 预发环境 `pre` | `frontend-test.banlv-ai.com` |
+| 测试环境 | `frontend-test.banlv-ai.com` |
-| 正式环境 `production` | `cozsweet.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。正式投放链接必须显式传入。 |
+| `character` | `elio`、`maya`、`nayeli` | 指定角色；不传或值无效时使用 Elio。 |
-| `psid` | string | Facebook Page-scoped User ID。Facebook 正式投放链接必须动态传入。 |
+| `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` 保留为兼容能力，不属于本次业务清单。
+`mode=promotion` 只有在 `target=chat` 且同时提供有效的 `promotion_type` 时生效。
-
-## 四类发送模板
-
-发送前必须把 `<CHARACTER>` 替换为角色值，把 `<PSID>` 替换为当前 Facebook 用户的真实 PSID；不得把占位符原样发送给用户。
-
-私密空间（普通聊天）：
-
-```text
-https://<APP_HOST>/external-entry?target=chat&character=<CHARACTER>&psid=<PSID>
-```
-
-语音：
-
-```text
-https://<APP_HOST>/external-entry?target=chat&character=<CHARACTER>&mode=promotion&promotion_type=voice&psid=<PSID>
-```
-
-图片包：
-
-```text
-https://<APP_HOST>/external-entry?target=private-zone&character=<CHARACTER>&psid=<PSID>
-```
-
-帮忙买咖啡：
-
-```text
-https://<APP_HOST>/external-entry?target=tip&character=<CHARACTER>&psid=<PSID>
-```
 
 ## PSID 与登录状态流程
 
-`psid` 可以和任意有效入口参数组合使用。应用会先保存 PSID，再执行登录状态判断和 Facebook Identity 绑定。详细流程见 [PSID 与登录状态流程图](./psid-login-flow.md)。
+PSID 保存、登录状态判断和 Facebook Identity 绑定逻辑见 [PSID 与登录状态流程图](./psid-login-flow.md)。
 
-所有参数值都必须进行 URL 编码。入口中禁止传递登录 Token、Page Access Token、App Secret 或其他秘密。
+## 使用示例
 
-## 兼容说明
+普通聊天：
 
-- 历史参数 `target=private-room` 继续兼容进入 `private-zone`，但不得用于新投放链接。
+```text
-- `private_zone` 等其他拼写仍按无效目标处理并回退聊天页。
+https://<APP_HOST>/external-entry?target=chat
-- `promotion_type=image` 和 `promotion_type=private` 继续由现有代码支持，但不计入当前 12 条 Facebook 业务链接。
+```
-- 无效或缺失的 `character` 继续回退 Elio；正式投放模板始终显式传入角色，不能依赖回退。
 
-## 调试与正式清单
+进入 Maya 聊天：
+
+```text
+https://<APP_HOST>/external-entry?target=chat&character=maya
+```
+
+携带 PSID 进入聊天，示例 PSID 为 `27511427698460020`：
+
+```text
+https://<APP_HOST>/external-entry?target=chat&psid=27511427698460020
+```
+
+语音促销聊天：
+
+```text
+https://<APP_HOST>/external-entry?target=chat&mode=promotion&promotion_type=voice
+```
+
+图片促销聊天：
+
+```text
+https://<APP_HOST>/external-entry?target=chat&mode=promotion&promotion_type=image
+```
+
+私密文本促销聊天：
+
+```text
+https://<APP_HOST>/external-entry?target=chat&mode=promotion&promotion_type=private
+```
+
+咖啡打赏：
+
+```text
+https://<APP_HOST>/external-entry?target=tip
+```
+
+私密空间：
+
+```text
+https://<APP_HOST>/external-entry?target=private-zone
+```
+
+进入 Nayeli 私密空间：
+
+```text
+https://<APP_HOST>/external-entry?target=private-zone&character=nayeli
+```
+
+`psid` 可以与任意 `target` 或聊天促销参数组合使用。参数值需要进行 URL 编码，不要在入口中传递登录 Token、Page Access Token 或 App Secret。
+
+完整可点击示例：
 
 - [本地调试链接清单](./debug-links.md)
-- [Facebook 12 条外部入口链接清单](./links.md)
+- [测试环境和正式环境链接清单](./links.md)

docs/external-entry/links.md

@@ -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`，其余路径和参数保持不变：
+如需在其他入口携带 PSID，在链接末尾追加 `&psid=27511427698460020`。
-
-```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 条正式投放模板”的口径。

e2e/fixtures/api-mocks.ts

@@ -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);

e2e/fixtures/api/auth.ts

@@ -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) => {
+  await page.route("**/api/auth/login/facebook/psid", async (route) => {
-    if (!state.topUpHandoffFlow) {
+    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) => {

e2e/fixtures/api/chat.ts

@@ -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")
+    const response = message.includes("private album 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")
       ? {
           ...chatSendResponse,
           reply: "You always know how to make me smile.",

e2e/fixtures/api/payment.ts

@@ -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) }));

e2e/fixtures/data/auth.ts

@@ -50,16 +50,14 @@ export const refreshedEmailLoginResponse = {
   refreshToken: "e2e-refreshed-email-refresh-token",
 };
 
-export const topUpHandoffResponse = {
+export const psidLoginResponse = {
-  token: "e2e-messenger-token",
+  token: "e2e-psid-guest-token",
-  refreshToken: "e2e-messenger-refresh-token",
+  refreshToken: "",
-  loginStatus: "facebookMessenger",
+  matchedBy: "psid",
-  merged: false,
+  fbAsid: "",
-  user: {
+  fbPsid: "e2e-facebook-psid",
-    ...e2eEmailUser,
+  hasCompleteFacebookIdentity: false,
-    id: "user_e2e_messenger",
+  isGuest: true,
-    username: "E2E Messenger User",
+  user: e2eUser,
-    email: "messenger_hash@messenger.cozsweet.invalid",
+  userId: e2eUser.id,
-    loginProvider: "facebook_messenger",
-  },
 };

e2e/fixtures/data/chat.ts

@@ -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,
   };
 }

e2e/fixtures/helpers/payment.ts

@@ -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;

e2e/specs/mock/auth/psid-login-from-external-entry.spec.ts

@@ -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(
+  const psidLoginRequestPromise = page.waitForRequest(
-    "**/api/auth/handoff/topup/consume",
+    "**/api/auth/login/facebook/psid",
   );
 
-  await page.goto(
+  await page.goto(`/external-entry?target=chat&psid=${psid}`);
-    `/external-entry?target=topup&handoffToken=${encodeURIComponent(handoffToken)}`,
-  );
 
-  const handoffRequest = await handoffRequestPromise;
+  const psidLoginRequest = await psidLoginRequestPromise;
-  expect(handoffRequest.method()).toBe("POST");
+  expect(psidLoginRequest.method()).toBe("POST");
-  expect(handoffRequest.postDataJSON()).toEqual({ handoffToken });
+  expect(psidLoginRequest.postDataJSON()).toMatchObject({
+    psid,
+    bindToGuest: true,
+  });
+  expect(psidLoginRequest.postDataJSON().deviceId).toEqual(expect.any(String));
 
-  await expect(page).toHaveURL("/subscription?type=topup");
+  await expect(page).toHaveURL(defaultCharacterChatUrl);
-  await expect(
+  await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
-    page.getByRole("button", { name: /Pay and Top Up/i }),
-  ).toBeVisible();
 
   await expect
     .poll(() =>
       page.evaluate(() => ({
         loginProvider: localStorage.getItem("cozsweet:login_provider"),
-        loginToken: localStorage.getItem("cozsweet:login_token"),
+        guestToken: localStorage.getItem("cozsweet:guest_token"),
-        refreshToken: localStorage.getItem("cozsweet:refresh_token"),
+        psid: localStorage.getItem("cozsweet:psid"),
       })),
     )
     .toMatchObject({
-      loginProvider: "facebookMessenger",
+      loginProvider: "guest",
-      loginToken: "e2e-messenger-token",
+      guestToken: "e2e-psid-guest-token",
-      refreshToken: "e2e-messenger-refresh-token",
+      psid,
     });
 });
-
-test("invalid top-up handoff does not log in and is removed from the URL", async ({
-  page,
-}) => {
-  await page.route("**/api/auth/handoff/topup/consume", async (route) => {
-    await route.fulfill({
-      status: 410,
-      json: {
-        detail: {
-          code: "HANDOFF_EXPIRED",
-          message: "充值链接已过期",
-        },
-      },
-    });
-  });
-
-  await page.goto(
-    `/external-entry?target=topup&handoffToken=${encodeURIComponent(handoffToken)}`,
-  );
-
-  await expect(page).toHaveURL("/external-entry?target=topup");
-  await expect(
-    page.getByText(/invalid or has expired/i),
-  ).toBeVisible();
-  await expect
-    .poll(() => page.evaluate(() => localStorage.getItem("cozsweet:login_provider")))
-    .not.toBe("facebookMessenger");
-});

e2e/specs/mock/chat/commercial-action-navigation.spec.ts

@@ -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/,
-  );
-});

e2e/specs/mock/chat/facebook-external-entry-links.spec.ts

@@ -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,
-          },
-        ],
-      }),
-    });
-  });
-}

e2e/specs/mock/multi-role-commercial.spec.ts

@@ -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";

e2e/specs/mock/paid-image.spec.ts

@@ -19,6 +19,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 +48,26 @@ test("guest can unlock a paid image after email login and subscription payment",
     message: "给我发图片",
   });
 
-  const lockedImageCard = page.getByRole("group", {
+  const paidImageButton = page.getByRole("button", {
-    name: "Locked private image",
+    name: "Open image in fullscreen",
   }).last();
-  await expect(lockedImageCard).toBeVisible();
+  await expect(paidImageButton).toBeVisible();
-  await expect(lockedImageCard.locator("img")).toHaveCount(0);
+
-  await lockedImageCard
+  await paidImageButton.click();
-    .getByRole("button", { name: "Unlock private image" })
+  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 +75,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;

e2e/specs/mock/payment-dialog-layout.spec.ts

@@ -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);
-}

e2e/specs/mock/payment/indonesia-qris.spec.ts

@@ -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);
-});

e2e/specs/mock/payment/philippines-gcash.spec.ts

@@ -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);
-});

e2e/specs/mock/private-zone-video.spec.ts

@@ -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",
-  };
-}

e2e/specs/mock/unlock-message/image-unlock-insufficient-credits.spec.ts

@@ -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", {
+  const paidImageButton = page.getByRole("button", {
-    name: "Locked private image",
+    name: "Open image in fullscreen",
   }).last();
-  await expect(lockedImageCard).toBeVisible({ timeout: 10_000 });
+  await expect(paidImageButton).toBeVisible({ timeout: 10_000 });
-  await expect(lockedImageCard.locator("img")).toHaveCount(0);
+
+  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
+  await lockedImageDialog
-    .getByRole("button", { name: "Unlock private image" })
+    .getByRole("button", { name: "Unlock high-definition large image" })
     .click();
 
   const unlockRequest = await unlockRequestPromise;

env-example/.env.local.example

@@ -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

env-example/.env.production.example

@@ -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

package.json

@@ -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",

pnpm-lock.yaml

@@ -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: {}

scripts/contracts/__tests__/domestic-test-workflow.test.mjs

@@ -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/);
-});

scripts/server/deploy-docker-image.sh

@@ -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

scripts/server/deploy-domestic-test-archive.sh

@@ -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

src/app/_components/core/__tests__/modal-portal.test.tsx

@@ -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();
-  });
-});

src/app/_components/core/modal-portal.tsx

@@ -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()}

src/app/_components/payment/__tests__/payment-launch-dialogs.test.tsx

@@ -1,47 +1,23 @@
-import { act } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
-import { createRoot, type Root } from "react-dom/client";
+import { describe, expect, it, vi } from "vitest";
-import { afterEach, beforeEach, 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(() =>
+    expect(
-      root.render(
+      renderToStaticMarkup(
         <PaymentLaunchDialogs
           currentOrderId={null}
           externalCheckoutAnalyticsKey="payment.external_checkout"
@@ -49,145 +25,28 @@ describe("PaymentLaunchDialogs", () => {
           launch={hiddenLaunch}
         />,
       ),
-    );
+    ).toBe("");
-
-    expect(document.body.querySelector('[role="dialog"]')).toBeNull();
-    expect(document.body.querySelector('[role="alertdialog"]')).toBeNull();
   });
 
-  it("portals the shared Ezpay confirmation outside transformed checkout UI", () => {
+  it("renders the shared Ezpay confirmation content", () => {
-    act(() =>
+    const html = renderToStaticMarkup(
-      root.render(
+      <PaymentLaunchDialogs
-        <PaymentLaunchDialogs
+        currentOrderId="order-123"
-          currentOrderId="order-123"
+        externalCheckoutAnalyticsKey="tip.external_checkout"
-          externalCheckoutAnalyticsKey="tip.external_checkout"
+        ezpayDescription="Your coffee order is ready."
-          ezpayDescription="Your coffee order is ready."
+        launch={{
-          launch={{
+          ...hiddenLaunch,
-            ...hiddenLaunch,
+          isConfirmingEzpay: true,
-            isConfirmingEzpay: true,
+          shouldShowEzpayConfirmDialog: true,
-            shouldShowEzpayConfirmDialog: true,
+        }}
-          }}
+      />,
-        />,
-      ),
     );
 
-    const dialog = document.body.querySelector('[role="alertdialog"]');
+    expect(html).toContain('role="alertdialog"');
-    expect(dialog).not.toBeNull();
+    expect(html).toContain("Continue to GCash?");
-    expect(container.contains(dialog)).toBe(false);
+    expect(html).toContain("Your coffee order is ready.");
-    expect(dialog?.parentElement?.parentElement).toBe(document.body);
+    expect(html).toContain("Order No. order-123");
-    expect(dialog?.textContent).toContain("Continue to payment?");
+    expect(html).toContain('data-analytics-key="tip.external_checkout"');
-    expect(dialog?.textContent).toContain("Your coffee order is ready.");
+    expect(html).toContain("Opening...");
-    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");
   });
 });

src/app/_components/payment/__tests__/payment-method-selector.test.tsx

@@ -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

src/app/_components/payment/__tests__/stripe-payment-dialog.test.tsx

@@ -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();
-  });
-});

src/app/_components/payment/lazy-stripe-payment-dialog.tsx

@@ -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
+    <div
-      open
+      className={styles.overlay}
-      persistent
+      role="dialog"
-      onClose={() => undefined}
+      aria-modal="true"
-      scrimClassName={styles.overlay}
+      aria-labelledby="stripe-payment-loading-title"
-      panelClassName={styles.dialog}
-      scrimOpacity={0.5}
-      ariaLabelledBy="stripe-payment-loading-title"
-      ariaDescribedBy="stripe-payment-loading-description"
     >
-      <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}>
+          <p className={styles.content}>Loading payment methods...</p>
-            Loading payment methods...
-          </p>
         </div>
       </div>
-    </ModalPortal>
+    </div>
   );
 }

src/app/_components/payment/payment-launch-dialogs.tsx

@@ -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
+    <div
-      open
+      className={styles.overlay}
-      persistent
-      onClose={onCancel}
-      scrimClassName={styles.overlay}
-      panelClassName={styles.dialog}
-      scrimOpacity={0.5}
       role="alertdialog"
-      ariaLabelledBy={titleId}
+      aria-modal="true"
+      aria-labelledby={titleId}
     >
-      <div className={styles.header}>
+      <div className={styles.dialog}>
-        <h2 id={titleId} className={styles.title}>
+        <div className={styles.header}>
-          Continue to payment?
+          <h2 id={titleId} className={styles.title}>
-        </h2>
+            Continue to GCash?
-        <p className={styles.content}>{description}</p>
+          </h2>
-        <p className={styles.content}>Order No. {orderId}</p>
+          <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}>
+    </div>
-        <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>
   );
 }

src/app/_components/payment/payment-method-selector.tsx

@@ -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

src/app/_components/payment/stripe-payment-dialog.styles.ts

@@ -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",

src/app/_components/payment/stripe-payment-dialog.tsx

@@ -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
+      <div className={styles.overlay} role="alertdialog" aria-modal="true">
-        open
+        <div className={styles.dialog}>
-        persistent
+          <div className={styles.header}>
-        onClose={onClose}
+            <h2 className={styles.title}>Payment unavailable</h2>
-        scrimClassName={styles.overlay}
+            <p className={styles.content}>
-        panelClassName={styles.dialog}
+              Stripe publishable key is not configured for this build.
-        scrimOpacity={0.5}
+            </p>
-        role="alertdialog"
+          </div>
-        ariaLabelledBy={titleId}
+          <div className={styles.actions}>
-        ariaDescribedBy={descriptionId}
+            <button
-      >
+              type="button"
-        <div className={styles.header}>
+              className={`${styles.button} ${styles.primary}`}
-          <h2 id={titleId} className={styles.title}>
+              onClick={onClose}
-            Payment unavailable
+            >
-          </h2>
+              OK
-          <p id={descriptionId} className={styles.content}>
+            </button>
-            Stripe publishable key is not configured for this build.
+          </div>
-          </p>
         </div>
-        <div className={styles.actions}>
+      </div>
-          <button
-            type="button"
-            className={`${styles.button} ${styles.primary}`}
-            onClick={onClose}
-          >
-            OK
-          </button>
-        </div>
-      </ModalPortal>
     );
   }
 
   return (
-    <ModalPortal
+    <div
-      open
+      className={styles.overlay}
-      persistent
+      role="dialog"
-      onClose={onClose}
+      aria-modal="true"
-      scrimClassName={styles.overlay}
+      aria-labelledby="stripe-payment-title"
-      panelClassName={styles.dialog}
-      scrimOpacity={0.5}
-      ariaLabelledBy={titleId}
-      ariaDescribedBy={descriptionId}
     >
-      <div className={styles.header}>
+      <div className={styles.dialog}>
-        <h2 id={titleId} className={styles.title}>
+        <div className={styles.header}>
-          Complete payment
+          <h2 id="stripe-payment-title" className={styles.title}>
-        </h2>
+            Complete payment
-        <p id={descriptionId} className={styles.content}>
+          </h2>
-          Enter your payment details securely through Stripe.
+          <p className={styles.content}>
-        </p>
+            Enter your payment details securely through Stripe.
-      </div>
+          </p>
-      <Elements
+        </div>
-        key={clientSecret}
+        <Elements
-        stripe={stripePromise}
+          key={clientSecret}
-        options={{
+          stripe={stripePromise}
-          clientSecret,
+          options={{
-          appearance: {
+            clientSecret,
-            theme: "stripe",
+            appearance: {
-            variables: {
+              theme: "stripe",
-              borderRadius: "14px",
+              variables: {
-              colorPrimary: "#ff52a2",
+                borderRadius: "14px",
-              colorText: "#171717",
+                colorPrimary: "#ff52a2",
+                colorText: "#171717",
+              },
             },
-          },
+          }}
-        }}
+        >
-      >
+          <StripePaymentForm
-        <StripePaymentForm
+            returnPath={returnPath}
-          returnPath={returnPath}
+            onClose={onClose}
-          onClose={onClose}
+            onConfirmed={onConfirmed}
-          onConfirmed={onConfirmed}
+          />
-        />
+        </Elements>
-      </Elements>
+      </div>
-    </ModalPortal>
+    </div>
   );
 }
 

src/app/_hooks/use-payment-launch-flow.ts

@@ -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(
+  const ezpayPaymentUrl = payment.payParams
-    (item) => item.planId === payment.selectedPlanId,
+    ? getPaymentUrl(payment.payParams)
-  );
+    : null;
-  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;
   useEffect(() => {
     if (!payment.payParams || payment.launchNonce <= launchedNonceRef.current) {
       return;
@@ -214,95 +136,39 @@ export function usePaymentLaunchFlow({
       return;
     }
 
-    const isEzpay = isEzpayPayment(payment.payParams);
+    const paymentUrl = getPaymentUrl(payment.payParams);
-    if (isEzpay) {
+    if (paymentUrl) {
-      const target = resolveEzpayLaunchTarget(payment.payParams, {
+      const isEzpay = isEzpayPayment(payment.payParams);
-        countryCode,
-        currency: paymentCurrency,
-      });
-      const channelType = paymentParamString(
-        payment.payParams,
-        "channelType",
-        "channel_type",
-      );
-      const channelCode = paymentParamString(
-        payment.payParams,
-        "channelCode",
-        "channel_code",
-      );
-      const namedPaymentUrl = getPaymentUrl(payment.payParams);
-      log.debug(`[${logScope}] ezpay launch target resolved`, {
-        countryCode: countryCode?.trim().toUpperCase() ?? null,
-        currency: paymentCurrency?.trim().toUpperCase() ?? null,
-        channelType: channelType?.toUpperCase() ?? null,
-        channelCode,
-        hasCashierUrl: getPaymentUrlHostname(namedPaymentUrl) !== null,
-        hasQrData: target.kind === "qr",
-        paymentUrlHost:
-          target.kind === "url"
-            ? getPaymentUrlHostname(target.paymentUrl)
-            : null,
-      });
-      if (target.kind === "error") {
-        trackPaymentCheckoutFailed(payment, "missing_checkout_url");
-        paymentDispatch({
-          type: "PaymentLaunchFailed",
-          errorMessage: target.errorMessage,
-        });
-        return;
-      }
 
-      if (target.kind === "qr") {
+      if (!AppEnvUtil.isProduction() && isEzpay) {
-        if (!payment.currentOrderId) {
-          trackPaymentCheckoutFailed(payment, "missing_checkout_url");
-          paymentDispatch({
-            type: "PaymentLaunchFailed",
-            errorMessage: "Missing order id before showing payment QR code.",
-          });
-          return;
-        }
-        trackPaymentCheckoutOpened(
-          payment,
-          target.experience === "qris"
-            ? "qris_embedded"
-            : target.experience === "gcashQrPh"
-              ? "gcash_qrph_embedded"
-              : "payment_qr_embedded",
-        );
-        return;
-      }
-
-      const paymentUrl = target.paymentUrl;
-      if (!AppEnvUtil.isProduction()) {
         log.debug(`[${logScope}] ezpay confirmation required`, {
           orderId: payment.currentOrderId,
-          paymentUrlHost: getPaymentUrlHostname(paymentUrl),
+          paymentUrl,
           subscriptionType,
         });
         return;
       }
 
-      void launchEzpayRedirect({
+      if (isEzpay) {
-        orderId: payment.currentOrderId,
+        void launchEzpayRedirect({
-        paymentUrl,
+          orderId: payment.currentOrderId,
-        subscriptionType,
+          paymentUrl,
-        giftCategory,
+          subscriptionType,
-        giftPlanId,
+          giftCategory,
-        ...(returnTo ? { returnTo } : {}),
+          giftPlanId,
-        ...(characterSlug ? { characterSlug } : {}),
+          ...(returnTo ? { returnTo } : {}),
-        onOpened: () => trackPaymentCheckoutOpened(payment, paymentUrl),
+          ...(characterSlug ? { characterSlug } : {}),
-        onFailed: (errorMessage) => {
+          onOpened: () => trackPaymentCheckoutOpened(payment, paymentUrl),
-          trackPaymentCheckoutFailed(payment, "payment_redirect_failed");
+          onFailed: (errorMessage) => {
-          paymentDispatch({ type: "PaymentLaunchFailed", errorMessage });
+            trackPaymentCheckoutFailed(payment, "payment_redirect_failed");
-        },
+            paymentDispatch({ type: "PaymentLaunchFailed", errorMessage });
-      });
+          },
-      return;
+        });
-    }
+        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,
   };

src/app/_hooks/use-payment-route-flow.ts

@@ -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 };
 }

src/app/call/__tests__/voice-call-player.test.ts

@@ -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();
-  });
-});

src/app/call/page.tsx

@@ -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);
-}

src/app/call/voice-call-player.ts

@@ -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?.();
-  }
-}

src/app/call/voice-call-screen.module.css

@@ -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; }
-}

src/app/call/voice-call-screen.tsx

@@ -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>
-  );
-}

src/app/characters/[characterSlug]/call/page.tsx

@@ -1,5 +0,0 @@
-import { VoiceCallScreen } from "@/app/call/voice-call-screen";
-
-export default function CharacterCallPage() {
-  return <VoiceCallScreen />;
-}

src/app/characters/[characterSlug]/tip/page.tsx

@@ -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}
     />
   );
 }

src/app/chat/__tests__/chat-action-navigation.test.ts

@@ -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");
-  });
-});

src/app/chat/__tests__/chat-support-cta.test.ts

@@ -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");
-  });
-});

src/app/chat/chat-action-navigation.ts

@@ -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,
-        },
-      );
-    }
-  }
-}

src/app/chat/chat-screen.tsx

@@ -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 { getCharacterRoutes, ROUTES } from "@/router/routes";
-import type { ChatAction, CommercialAction } from "@/data/schemas/chat";
+import type { CommercialAction } from "@/data/schemas/chat";
-import { paymentApi } from "@/data/services/api";
 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 { useFirstRechargeOfferBanner } from "./hooks/use-first-recharge-offer-banner";
-import { useChatCommercialMessages } from "./hooks/use-chat-commercial-messages";
 import { useChatUnlockCoordinator } from "./hooks/use-chat-unlock-coordinator";
 import { 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,14 +64,6 @@ 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();
@@ -129,17 +114,11 @@ export function ChatScreen() {
   const messageLimitBanner = useChatMessageLimitBanner({
     upgradePromptVisible: state.upgradePromptVisible,
     upgradeReason: state.upgradeReason,
-    paymentGuidance: state.paymentGuidance,
   });
-  const supportCta = useChatSupportCta({
+  const firstRechargeOfferBanner = useFirstRechargeOfferBanner({
-    characterId: character.id,
     historyLoaded: state.historyLoaded,
     loginStatus: authState.loginStatus,
   });
-  useChatCommercialMessages({
-    characterId: character.id,
-    loginStatus: authState.loginStatus,
-  });
   const shouldShowPwaInstall =
     state.historyLoaded && state.historyMessages.length >= 10;
   useChatGuestLogin({
@@ -290,7 +269,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 +281,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 +301,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 +321,13 @@ export function ChatScreen() {
           <ChatHeader
             isGuest={isGuest}
             offerBanner={
-              supportCta.visible ? (
+              <FirstRechargeOfferBanner
-                <ChatSupportButton
+                visible={firstRechargeOfferBanner.visible}
-                  kind={supportCta.kind}
+                discountPercent={firstRechargeOfferBanner.discountPercent}
-                  label={supportCta.label}
+                onClick={firstRechargeOfferBanner.claim}
-                  onClick={supportCta.open}
+                onClose={firstRechargeOfferBanner.close}
-                />
+                variant="compact"
-              ) : null
+              />
             }
           />
 
@@ -458,9 +351,6 @@ export function ChatScreen() {
             onCharacterAvatarClick={handleOpenCharacterPrivateZone}
             onCommercialAction={handleCommercialAction}
             onCommercialActionDismiss={handleCommercialActionDismiss}
-            onChatActionViewed={handleChatActionViewed}
-            onChatAction={handleChatAction}
-            onChatActionDismiss={handleChatActionDismiss}
             onLoadMoreHistory={() => {
               chatDispatch({ type: "ChatLoadMoreHistoryRequested" });
             }}
@@ -471,7 +361,6 @@ export function ChatScreen() {
               title={messageLimitBanner.title}
               description={messageLimitBanner.description}
               ctaLabel={messageLimitBanner.ctaLabel}
-              guidance={messageLimitBanner.guidance}
               onUnlock={messageLimitBanner.unlock}
             />
           ) : (

src/app/chat/chat-support-cta.ts

@@ -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(":");
-}

src/app/chat/components/__tests__/chat-action-card.test.tsx

@@ -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("");
-  });
-});

src/app/chat/components/__tests__/commercial-action-card.test.tsx

@@ -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");
-  });
 });

src/app/chat/components/__tests__/tailwind-components.test.tsx

@@ -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(

src/app/chat/components/chat-action-card.tsx

@@ -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>
-  );
-}

src/app/chat/components/chat-area.module.css

@@ -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));

src/app/chat/components/chat-area.tsx

@@ -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}
       />
     ),
   );

src/app/chat/components/chat-header.tsx

@@ -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">
+        <FavoriteEntryButton
-          {voiceCallEnabled ? (
+          characterSlug={character.slug}
-            <button
+          tone="dark"
-              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>
       </div>
     </header>
   );

src/app/chat/components/chat-insufficient-credits-banner.tsx

@@ -17,13 +17,11 @@
  *   - 不直接管理 state machine（chat 机器不感知 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;
+  ctaLabel?: string;
-  guidance?: PaymentGuidance | null;
   /**
    * 自定义点击回调（不传则默认走统一订阅导航）
    * - 测试时可传 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 ? (
+      <button
-        <p className="mx-auto mb-(--spacing-lg,16px) mt-0 max-w-[min(100%,360px)] text-(length:--responsive-caption,14px) font-semibold leading-[1.4] text-white">
-          {activeGuidance.copy}
-        </p>
-      ) : null}
-      {ctaLabel ? <button
         type="button"
         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>
   );
 }

src/app/chat/components/chat-support-button.tsx

@@ -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>
-  );
-}

src/app/chat/components/chat-unlock-dialogs.tsx

@@ -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}
       />

src/app/chat/components/commercial-action-card.tsx

@@ -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 =
+  const Icon = action.type === "giftOffer" ? Gift : Images;
-    action.type === "giftOffer"
-      ? Gift
-      : action.type === "discountOffer"
-        ? BadgePercent
-        : 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={() => onActivate?.(action)}
-        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));
-        }}
       >
         <span>{action.ctaLabel}</span>
-        {activating ? (
+        <ArrowRight size={17} aria-hidden="true" />
-          <LoaderCircle className={styles.commercialActionSpinner} size={17} aria-hidden="true" />
-        ) : (
-          <ArrowRight size={17} aria-hidden="true" />
-        )}
       </button>
     </aside>
   );

src/app/chat/components/history-unlock-dialog.tsx

@@ -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
+            {isLoading ? "Unlocking..." : "Unlock now"}
-              ? "Unlocking..."
+          </button>
-              : activeGuidance?.ctaLabel ?? "Unlock now"}
-          </button> : null}
         </div>
       </div>
     </div>

src/app/chat/components/index.ts

@@ -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";

src/app/chat/components/insufficient-credits-dialog.tsx

@@ -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"}
+            Top up now
-          </button> : null}
+          </button>
         </div>
       </div>
     </div>

src/app/chat/components/message-bubble.tsx

@@ -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>

src/app/chat/components/message-content.tsx

@@ -1,16 +1,10 @@
 "use client";
-import type {
+import type { CommercialAction } from "@/data/schemas/chat";
-  ChatAction,
-  CommercialAction,
-  PaymentGuidance,
-} 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 ? (
+      {isFromAI && commercialAction ? (
-        <PaymentGuidanceCard guidance={paymentGuidance} />
-      ) : isFromAI && chatAction ? (
-        <ChatActionCard
-          action={chatAction}
-          onViewed={onChatActionViewed}
-          onActivate={onChatAction}
-          onDismiss={onChatActionDismiss}
-        />
-      ) : isFromAI && commercialAction ? (
         <CommercialActionCard
           action={commercialAction}
           onActivate={onCommercialAction}

src/app/chat/components/payment-guidance-card.tsx

@@ -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>
-  );
-}

src/app/chat/hooks/use-chat-commercial-messages.ts

@@ -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]);
-}

src/app/chat/hooks/use-chat-message-limit-banner.ts

@@ -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 {
+export interface ChatMessageLimitBannerView
-  title: string;
+  extends InsufficientCreditsMessageLimitView {
-  description: string;
-  ctaLabel: string | null;
-  guidance: PaymentGuidance | null;
   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 view = getInsufficientCreditsMessageLimitView();
-  const guidance =
-    paymentGuidance?.characterId === character.id ? paymentGuidance : null;
-  const view: InsufficientCreditsMessageLimitView = {
-    title: guidance?.title ?? fallbackView.title,
-    description: guidance?.copy ?? fallbackView.description,
-    ctaLabel: guidance?.ctaLabel ?? fallbackView.ctaLabel,
-  };
   const visible = shouldShowMessageLimitBanner({
     upgradePromptVisible,
     upgradeReason,
@@ -68,31 +52,12 @@ export function useChatMessageLimitBanner({
       },
       { isVip },
     );
-    if (guidance) {
+  }, [isVip, visible]);
-      void recordChatActionEventById(
-        guidance.guidanceId,
-        character.id,
-        "viewed",
-      ).catch(() => undefined);
-    }
-  }, [character.id, guidance, 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:
+      type: getInsufficientCreditsSubscriptionType(isVip),
-        isVip || (guidance && !guidance.purchaseOptions.includes("vip"))
-          ? "topup"
-          : 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,
   };

src/app/chat/hooks/use-chat-support-cta.ts

@@ -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 };
-}

src/app/chat/hooks/use-chat-unlock-coordinator.ts

@@ -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;
+  }, [isVip, unlockPaywallRequest]);
-    if (guidance?.characterId === chatState.characterId) {
-      void recordChatActionEventById(
-        guidance.guidanceId,
-        chatState.characterId,
-        "viewed",
-      ).catch(() => undefined);
-    }
-  }, [chatState.characterId, 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:
+      type: getInsufficientCreditsSubscriptionType(isVip),
-        isVip || (guidance && !guidance.purchaseOptions.includes("vip"))
-          ? "topup"
-          : 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,

src/app/coins-rules/__tests__/coins-rules-screen.test.tsx

@@ -14,20 +14,9 @@ vi.mock("@/stores/auth/auth-context", () => ({
 vi.mock("@/stores/user/user-context", () => ({
   useUserDispatch: () => vi.fn(),
   useUserState: () => ({
-    currentUser: null,
+    currentUser: {
-    entitlements: {
+      dailyFreeChatLimit: 30,
-      quotas: {
+      dailyFreePrivateLimit: 2,
-        normalChatFreeDaily: 47,
-        privateUnlockFreeDaily: 5,
-      },
-      costs: {
-        normal_message: 3,
-        private_message: 9,
-        voice_message: 11,
-        photo: 13,
-        private_album_10: 101,
-        private_album_20: 181,
-      },
     },
   }),
 }));
@@ -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");
   });
 });

src/app/coins-rules/coins-rules-screen.tsx

@@ -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,
+  dailyFreeChatLimit: number,
-  dailyFreePrivateLimit: number | null,
+  dailyFreePrivateLimit: number,
-  costs: {
-    normalMessage: number | null;
-    privateMessage: number | null;
-    voiceMessage: number | null;
-    photo: number | null;
-    privateAlbum10: number | null;
-    privateAlbum20: number | null;
-  },
 ): readonly CoinRuleItem[] => [
   {
     title: "Standard Chat",
-    cost: formatCoinCost(costs.normalMessage, "message"),
+    cost: "2 coins / message",
-    free:
+    free: formatDailyFreeMessages(dailyFreeChatLimit, "messages"),
-      dailyFreeChatLimit === null
-        ? "Current daily allowance loads from your account"
-        : formatDailyFreeMessages(dailyFreeChatLimit, "messages"),
     icon: MessageCircle,
   },
   {
     title: "Private Chat",
-    cost: formatCoinCost(costs.privateMessage, "message"),
+    cost: "10 coins / message",
-    free:
+    free: formatDailyFreeMessages(dailyFreePrivateLimit, "private messages"),
-      dailyFreePrivateLimit === null
-        ? "Current daily allowance loads from your account"
-        : 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:
+    cost: "10 photos / 300 coins",
-      costs.privateAlbum10 === null
-        ? "Current price shown in Private Zone"
-        : `10 photos / ${Math.max(0, Math.trunc(costs.privateAlbum10))} coins`,
     icon: ImageIcon,
   },
   {
     title: "Private Album",
-    cost:
+    cost: "20 photos / 600 coins",
-      costs.privateAlbum20 === null
-        ? "Current price shown in Private Zone"
-        : `20 photos / ${Math.max(0, Math.trunc(costs.privateAlbum20))} 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 ?? FREE_STANDARD_CHAT_DAILY_COUNT;
-    userState.currentUser?.dailyFreeChatLimit ??
-    null;
   const dailyFreePrivateLimit =
-    entitlements?.quotas.privateUnlockFreeDaily ??
     userState.currentUser?.dailyFreePrivateLimit ??
-    null;
+    FREE_PRIVATE_MESSAGE_DAILY_COUNT;
-  const standardChatLabel =
+  const standardChatLabel = formatDailyFreeMessages(
-    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(
     dailyFreeChatLimit,
-    dailyFreePrivateLimit,
+    "messages",
-    {
-      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,
-    },
   );
+  const privateChatLabel = formatDailyFreeMessages(
+    dailyFreePrivateLimit,
+    "private messages",
+  );
+  const coinRules = createCoinRules(dailyFreeChatLimit, dailyFreePrivateLimit);
 
   useEffect(() => {
     if (!authState.hasInitialized || authState.isLoading) return;

src/app/coins-rules/coins-rules.constants.ts

@@ -0,0 +1,2 @@
+export const FREE_STANDARD_CHAT_DAILY_COUNT = 30;
+export const FREE_PRIVATE_MESSAGE_DAILY_COUNT = 2;

src/app/external-entry/external-entry-persist.tsx

@@ -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) {
+      hasReinitializedForPsidRef.current = true;
-        if (
+      authDispatch({ type: "AuthInit" });
-          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" });
-      })();
       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
-        <div className="mx-6 max-w-sm text-center">
+        aria-label="Redirecting"
-          <p className="text-sm text-[var(--color-text-secondary)]">
+        className="size-10 animate-spin rounded-full border-4 border-t-transparent"
-            {displayedHandoffError}
+        style={{ borderColor: "var(--color-accent)" }}
-          </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>
   );
 }

src/app/external-entry/page.tsx

@@ -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)}
     />
   );
 }

src/app/private-zone/__tests__/use-private-zone-flow-navigation.test.tsx

@@ -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;
 }

src/app/private-zone/components/__tests__/private-zone-video-post-card.test.tsx

@@ -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");
-  });
-});

src/app/private-zone/components/index.ts

@@ -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";

src/app/private-zone/components/private-zone-video-post-card.tsx

@@ -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" });
-}

src/app/private-zone/components/video-post-unlock-dialog.tsx

@@ -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>
-  );
-}

src/app/private-zone/private-zone-screen.module.css

@@ -215,38 +215,6 @@
   box-shadow: 0 8px 18px rgba(131, 72, 85, 0.08);
 }
 
-.contentTabs {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
-  margin-bottom: 18px;
-  padding: 5px;
-  border: 1px solid rgba(255, 116, 159, 0.14);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.72);
-  box-shadow: 0 10px 24px rgba(131, 72, 85, 0.07);
-}
-
-.contentTab {
-  min-height: 42px;
-  padding: 0 16px;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
-  color: #8a7078;
-  cursor: pointer;
-  font: inherit;
-  font-size: 14px;
-  font-weight: 850;
-  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
-}
-
-.contentTabActive {
-  background: linear-gradient(135deg, #ff7aa9, #ffad79);
-  color: #ffffff;
-  box-shadow: 0 8px 18px rgba(248, 77, 150, 0.2);
-}
-
 .timeline {
   display: flex;
   flex-direction: column;
@@ -295,118 +263,6 @@
   margin: 0;
 }
 
-.momentVideo,
-.momentLockedMedia {
-  width: 100%;
-  margin-top: 14px;
-  border-radius: clamp(18px, 4.815vw, 26px);
-  background: #161316;
-  box-shadow: 0 16px 34px rgba(34, 25, 29, 0.16);
-}
-
-.momentVideo {
-  display: block;
-  max-height: 68vh;
-  aspect-ratio: 9 / 12;
-  object-fit: contain;
-}
-
-.momentLockedMedia {
-  position: relative;
-  aspect-ratio: 9 / 12;
-  overflow: hidden;
-}
-
-.momentPoster,
-.momentPosterFallback {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.momentPoster {
-  object-fit: cover;
-}
-
-.momentPosterFallback {
-  display: grid;
-  place-items: center;
-  background:
-    radial-gradient(circle at 70% 15%, rgba(255, 179, 109, 0.34), transparent 42%),
-    linear-gradient(145deg, #4f4249, #211b20);
-  color: rgba(255, 255, 255, 0.78);
-}
-
-.momentLockPanel {
-  position: absolute;
-  right: 14px;
-  bottom: 14px;
-  left: 14px;
-  display: flex;
-  min-height: 164px;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 7px;
-  padding: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 22px;
-  background: rgba(23, 19, 23, 0.7);
-  color: #ffffff;
-  text-align: center;
-  backdrop-filter: blur(14px);
-}
-
-.momentLockIcon {
-  display: grid;
-  width: 38px;
-  height: 38px;
-  place-items: center;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.16);
-}
-
-.momentLockPanel strong {
-  font-size: 20px;
-  font-weight: 900;
-}
-
-.momentLockPanel span:not(.momentLockIcon) {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 13px;
-  font-weight: 650;
-}
-
-.momentLockPanel button,
-.loadMoreButton {
-  min-height: 44px;
-  padding: 0 22px;
-  border: 0;
-  border-radius: 999px;
-  cursor: pointer;
-  font: inherit;
-  font-size: 14px;
-  font-weight: 850;
-}
-
-.momentLockPanel button {
-  margin-top: 9px;
-  background: #ffffff;
-  color: #2c2227;
-}
-
-.momentLockPanel button:disabled {
-  cursor: wait;
-  opacity: 0.7;
-}
-
-.loadMoreButton {
-  display: block;
-  margin: 16px auto 0;
-  background: rgba(255, 93, 149, 0.12);
-  color: #a94c64;
-}
-
 .authorName {
   color: #26191d;
   font-size: clamp(14px, 3.333vw, 17px);
@@ -920,9 +776,6 @@
 }
 
 .primaryCta:focus-visible,
-.contentTab:focus-visible,
-.momentLockPanel button:focus-visible,
-.loadMoreButton:focus-visible,
 .lockedPreviewCta:focus-visible,
 .mediaGridItem:focus-visible,
 .galleryClose:focus-visible,

src/app/private-zone/private-zone-screen.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
 
@@ -18,26 +18,17 @@ import {
   useActiveCharacterRoutes,
 } from "@/providers/character-provider";
 import { isPrivateAlbumLocked } from "@/lib/private-zone/private_album";
-import { behaviorAnalytics } from "@/lib/analytics";
-import { recordChatActionEventById } from "@/lib/chat/chat_action_events";
-import { useUserSelector } from "@/stores/user/user-context";
 import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
 import {
   usePrivateZoneDispatch,
   usePrivateZoneState,
 } from "@/stores/private-zone";
-import {
-  usePrivateZonePostDispatch,
-  usePrivateZonePostState,
-} from "@/stores/private-zone-posts";
 
 import {
   PrivateAlbumCard,
   PrivateAlbumGallery,
-  PrivateZoneVideoPostCard,
   StatusCard,
   UnlockConfirmDialog,
-  VideoPostUnlockDialog,
 } from "./components";
 import styles from "./private-zone-screen.module.css";
 import {
@@ -63,17 +54,11 @@ export function PrivateZoneScreen() {
   const authDispatch = useAuthDispatch();
   const state = usePrivateZoneState();
   const dispatch = usePrivateZoneDispatch();
-  const postState = usePrivateZonePostState();
-  const postDispatch = usePrivateZonePostDispatch();
-  const isVip = useUserSelector((user) => user.context.isVip);
-  const [activeTab, setActiveTab] = useState<"moments" | "albums">("albums");
   const openedGalleryInPageRef = useRef(false);
-  const previousPostLoginStatusRef = useRef(authState.loginStatus);
   const galleryState = useMemo(
     () => getPrivateAlbumGalleryState(searchParams),
     [searchParams],
   );
-  const visibleTab = galleryState ? "albums" : activeTab;
 
   usePrivateZoneBootstrapFlow({
     authDispatch,
@@ -87,76 +72,8 @@ export function PrivateZoneScreen() {
     loginStatus: authState.loginStatus,
     roomDispatch: dispatch,
     unlockPaywallRequest: state.unlockPaywallRequest,
-    isVip,
   });
   usePrivateZoneUnlockSuccessRefresh(state.unlockSuccessNonce);
-  usePrivateZoneUnlockSuccessRefresh(postState.unlockSuccessNonce);
-
-  useEffect(() => {
-    if (!authState.hasInitialized || authState.isLoading) return;
-    if (authState.loginStatus === "notLoggedIn") return;
-
-    const previous = previousPostLoginStatusRef.current;
-    previousPostLoginStatusRef.current = authState.loginStatus;
-    if (postState.status === "idle") {
-      postDispatch({ type: "PrivateZonePostInit" });
-      return;
-    }
-    if (previous !== authState.loginStatus && postState.status !== "loading") {
-      postDispatch({ type: "PrivateZonePostRefresh" });
-    }
-  }, [
-    authState.hasInitialized,
-    authState.isLoading,
-    authState.loginStatus,
-    postDispatch,
-    postState.status,
-  ]);
-
-  useEffect(() => {
-    const request = postState.unlockPaywallRequest;
-    if (!request) return;
-    if (isPrivateZoneAuthRequired(authState.loginStatus)) {
-      navigator.openAuth(characterRoutes.privateZone);
-    } else {
-      behaviorAnalytics.paywallShown({
-        entryPoint: "private_zone",
-        triggerReason: "insufficient_credits",
-      });
-      const guidance =
-        request.paymentGuidance?.characterId === character.id
-          ? request.paymentGuidance
-          : null;
-      if (guidance) {
-        void recordChatActionEventById(
-          guidance.guidanceId,
-          character.id,
-          "opened",
-        ).catch(() => undefined);
-      }
-      navigator.openSubscription({
-        type:
-          isVip || (guidance && !guidance.purchaseOptions.includes("vip"))
-            ? "topup"
-            : "vip",
-        returnTo: "private-zone",
-        ...(guidance ? { chatActionId: guidance.guidanceId } : {}),
-        analytics: {
-          entryPoint: "private_zone",
-          triggerReason: "insufficient_credits",
-        },
-      });
-    }
-    postDispatch({ type: "PrivateZonePostUnlockPaywallConsumed" });
-  }, [
-    authState.loginStatus,
-    characterRoutes.privateZone,
-    character.id,
-    isVip,
-    navigator,
-    postDispatch,
-    postState.unlockPaywallRequest,
-  ]);
 
   const displayName = character.displayName;
   const avatarUrl = character.assets.avatar;
@@ -169,13 +86,6 @@ export function PrivateZoneScreen() {
       ) ?? null,
     [state.items, state.pendingConfirmAlbumId],
   );
-  const pendingPost = useMemo(
-    () =>
-      postState.items.find(
-        (post) => post.postId === postState.pendingConfirmPostId,
-      ) ?? null,
-    [postState.items, postState.pendingConfirmPostId],
-  );
   const galleryAlbum = useMemo(
     () =>
       galleryState
@@ -226,7 +136,7 @@ export function PrivateZoneScreen() {
       return;
     }
     navigator.openSubscription({
-      type: isVip ? "topup" : "vip",
+      type: "topup",
       returnTo: "private-zone",
       analytics: {
         entryPoint: "private_zone",
@@ -247,14 +157,6 @@ export function PrivateZoneScreen() {
     );
   };
 
-  const handlePostUnlock = (postId: string) => {
-    if (isPrivateZoneAuthRequired(authState.loginStatus)) {
-      navigator.openAuth(characterRoutes.privateZone);
-      return;
-    }
-    postDispatch({ type: "PrivateZonePostUnlockRequested", postId });
-  };
-
   const handleCloseGallery = () => {
     if (openedGalleryInPageRef.current) {
       openedGalleryInPageRef.current = false;
@@ -333,116 +235,49 @@ export function PrivateZoneScreen() {
         </section>
 
         <section className={styles.postsSection} aria-labelledby="posts-title">
-          <div className={styles.contentTabs} role="tablist" aria-label="Private Zone content">
-            <button
-              type="button"
-              role="tab"
-              aria-selected={visibleTab === "albums"}
-              className={`${styles.contentTab} ${visibleTab === "albums" ? styles.contentTabActive : ""}`}
-              onClick={() => setActiveTab("albums")}
-            >
-              Albums
-            </button>
-            <button
-              type="button"
-              role="tab"
-              aria-selected={visibleTab === "moments"}
-              className={`${styles.contentTab} ${visibleTab === "moments" ? styles.contentTabActive : ""}`}
-              onClick={() => setActiveTab("moments")}
-            >
-              Moments
-            </button>
-          </div>
-
           <div className={styles.sectionHeader}>
             <div>
-              <p className={styles.kicker}>{visibleTab === "moments" ? "Moments" : "Albums"}</p>
+              <p className={styles.kicker}>Albums</p>
               <h2 id="posts-title" className={styles.sectionTitle}>
-                {visibleTab === "moments" ? "Private moments" : "Private albums"}
+                Private albums
               </h2>
             </div>
-            <span className={styles.postCount}>
+            <span className={styles.postCount}>{state.items.length}</span>
-              {visibleTab === "moments" ? postState.items.length : state.items.length}
-            </span>
           </div>
 
-          {visibleTab === "moments" ? (
+          {state.errorMessage ? (
-            <>
+            <StatusCard
-              {postState.errorMessage ? (
+              message={state.errorMessage}
-                <StatusCard
+              actionLabel="Retry"
-                  message={postState.errorMessage}
+              onAction={() => dispatch({ type: "PrivateZoneRefresh" })}
-                  actionLabel="Retry"
+            />
-                  onAction={() => postDispatch({ type: "PrivateZonePostRefresh" })}
+          ) : null}
-                />
+
-              ) : null}
+          {state.isLoading && state.items.length === 0 ? (
-              {postState.isLoading && postState.items.length === 0 ? (
+            <StatusCard message="Loading private albums..." />
-                <StatusCard message="Loading private moments..." />
+          ) : null}
-              ) : null}
+
-              {!postState.isLoading && !postState.errorMessage && postState.items.length === 0 ? (
+          <div className={styles.timeline}>
-                <StatusCard message="No private moments yet." />
+            {state.items.map((album, index) => (
-              ) : null}
+              <PrivateAlbumCard
-              <div className={styles.timeline}>
+                key={album.albumId}
-                {postState.items.map((post, index) => (
+                album={album}
-                  <PrivateZoneVideoPostCard
+                displayName={displayName}
-                    key={post.postId}
+                avatarUrl={avatarUrl}
-                    post={post}
+                index={index}
-                    displayName={displayName}
+                isUnlocking={state.unlockingAlbumId === album.albumId}
-                    avatarUrl={avatarUrl}
+                onOpenGallery={(imageIndex) =>
-                    index={index}
+                  handleOpenGallery(album.albumId, imageIndex)
-                    isUnlocking={postState.unlockingPostId === post.postId}
+                }
-                    onUnlock={() => handlePostUnlock(post.postId)}
+                onUnlock={() =>
-                    onPlaybackError={() =>
+                  dispatch({
-                      postDispatch({ type: "PrivateZonePostRefresh" })
+                    type: "PrivateZoneUnlockRequested",
-                    }
+                    albumId: album.albumId,
-                  />
+                  })
-                ))}
+                }
-              </div>
+              />
-              {postState.hasMore ? (
+            ))}
-                <button
+          </div>
-                  type="button"
-                  className={styles.loadMoreButton}
-                  disabled={postState.isLoadingMore}
-                  onClick={() => postDispatch({ type: "PrivateZonePostLoadMore" })}
-                >
-                  {postState.isLoadingMore ? "Loading..." : "Load more"}
-                </button>
-              ) : null}
-            </>
-          ) : (
-            <>
-              {state.errorMessage ? (
-                <StatusCard
-                  message={state.errorMessage}
-                  actionLabel="Retry"
-                  onAction={() => dispatch({ type: "PrivateZoneRefresh" })}
-                />
-              ) : null}
-              {state.isLoading && state.items.length === 0 ? (
-                <StatusCard message="Loading private albums..." />
-              ) : null}
-              <div className={styles.timeline}>
-                {state.items.map((album, index) => (
-                  <PrivateAlbumCard
-                    key={album.albumId}
-                    album={album}
-                    displayName={displayName}
-                    avatarUrl={avatarUrl}
-                    index={index}
-                    isUnlocking={state.unlockingAlbumId === album.albumId}
-                    onOpenGallery={(imageIndex) =>
-                      handleOpenGallery(album.albumId, imageIndex)
-                    }
-                    onUnlock={() =>
-                      dispatch({
-                        type: "PrivateZoneUnlockRequested",
-                        albumId: album.albumId,
-                      })
-                    }
-                  />
-                ))}
-              </div>
-            </>
-          )}
         </section>
 
         <AppBottomNav
@@ -474,24 +309,6 @@ export function PrivateZoneScreen() {
           </div>
         ) : null}
 
-        {pendingPost ? (
-          <VideoPostUnlockDialog
-            post={pendingPost}
-            isUnlocking={postState.isUnlocking}
-            errorMessage={postState.unlockErrorMessage}
-            onCancel={() =>
-              postDispatch({ type: "PrivateZonePostUnlockCancelled" })
-            }
-            onConfirm={() =>
-              postDispatch({ type: "PrivateZonePostUnlockConfirmed" })
-            }
-          />
-        ) : postState.unlockErrorMessage ? (
-          <div className={styles.toast} role="status">
-            {postState.unlockErrorMessage}
-          </div>
-        ) : null}
-
         {galleryAlbum &&
         galleryState &&
         !isPrivateAlbumLocked(galleryAlbum) &&

src/app/private-zone/use-private-zone-flow.ts

@@ -5,16 +5,12 @@ import { type Dispatch, useEffect, useRef } from "react";
 import type { LoginStatus } from "@/data/schemas/auth";
 import { useGuestLoginBootstrap } from "@/hooks/use-guest-login-bootstrap";
 import { behaviorAnalytics } from "@/lib/analytics";
-import {
+import { useActiveCharacterRoutes } from "@/providers/character-provider";
-  useActiveCharacter,
-  useActiveCharacterRoutes,
-} from "@/providers/character-provider";
 import { useAppNavigator } from "@/router/use-app-navigator";
 import type { AuthEvent } from "@/stores/auth/auth-events";
 import type { PrivateZoneEvent } from "@/stores/private-zone";
 import type { PrivateZoneUnlockPaywallRequest } from "@/stores/private-zone/private-zone-state";
 import { useUserDispatch } from "@/stores/user/user-context";
-import { recordChatActionEventById } from "@/lib/chat/chat_action_events";
 
 export interface UsePrivateZoneBootstrapFlowInput {
   authDispatch: Dispatch<AuthEvent>;
@@ -29,7 +25,6 @@ export interface UsePrivateZoneUnlockPaywallNavigationInput {
   loginStatus: LoginStatus;
   roomDispatch: Dispatch<PrivateZoneEvent>;
   unlockPaywallRequest: PrivateZoneUnlockPaywallRequest | null;
-  isVip: boolean;
 }
 
 export function isPrivateZoneAuthRequired(loginStatus: LoginStatus): boolean {
@@ -81,10 +76,8 @@ export function usePrivateZoneUnlockPaywallNavigation({
   loginStatus,
   roomDispatch,
   unlockPaywallRequest,
-  isVip,
 }: UsePrivateZoneUnlockPaywallNavigationInput): void {
   const navigator = useAppNavigator();
-  const character = useActiveCharacter();
   const characterRoutes = useActiveCharacterRoutes();
 
   useEffect(() => {
@@ -97,26 +90,9 @@ export function usePrivateZoneUnlockPaywallNavigation({
         entryPoint: "private_album_unlock",
         triggerReason: "insufficient_credits",
       });
-      const guidance = unlockPaywallRequest.paymentGuidance;
-      const activeGuidance =
-        guidance?.characterId === character.id ? guidance : null;
-      if (activeGuidance) {
-        void recordChatActionEventById(
-          activeGuidance.guidanceId,
-          activeGuidance.characterId,
-          "opened",
-        ).catch(() => undefined);
-      }
       navigator.openSubscription({
-        type:
+        type: "topup",
-          isVip ||
-          (activeGuidance && !activeGuidance.purchaseOptions.includes("vip"))
-            ? "topup"
-            : "vip",
         returnTo: "private-zone",
-        ...(activeGuidance
-          ? { chatActionId: activeGuidance.guidanceId }
-          : {}),
         analytics: {
           entryPoint: "private_album_unlock",
           triggerReason: "insufficient_credits",
@@ -126,9 +102,7 @@ export function usePrivateZoneUnlockPaywallNavigation({
     roomDispatch({ type: "PrivateZoneUnlockPaywallConsumed" });
   }, [
     characterRoutes.privateZone,
-    character.id,
     loginStatus,
-    isVip,
     navigator,
     roomDispatch,
     unlockPaywallRequest,

src/app/subscription/__tests__/subscription-page.test.tsx

@@ -34,14 +34,14 @@ describe("SubscriptionPage", () => {
     );
   });
 
-  it("keeps the recipient empty when source navigation has no character", async () => {
+  it("uses Elio for missing source navigation context", async () => {
     const page = await SubscriptionPage({
       searchParams: Promise.resolve({}),
     });
 
     renderToStaticMarkup(page);
     expect(mocks.screenProps).toHaveBeenLastCalledWith(
-      expect.objectContaining({ sourceCharacterSlug: null }),
+      expect.objectContaining({ sourceCharacterSlug: "elio" }),
     );
   });
 });

src/app/subscription/__tests__/subscription-screen-flow.test.tsx

@@ -1,396 +0,0 @@
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const mocks = vi.hoisted(() => {
-  const characters = [
-    { id: "elio", slug: "elio", displayName: "Elio Silvestri", shortName: "Elio" },
-    { id: "maya-tan", slug: "maya", displayName: "Maya Tan", shortName: "Maya" },
-    {
-      id: "nayeli-cervantes",
-      slug: "nayeli",
-      displayName: "Nayeli Cervantes",
-      shortName: "Nayeli",
-    },
-  ];
-  const payment = {
-    status: "ready",
-    plans: [
-      {
-        planId: "vip_monthly",
-        planName: "Monthly",
-        orderType: "vip_monthly",
-        vipDays: 30,
-        dolAmount: null,
-        amountCents: 1990,
-        originalAmountCents: 3990,
-        currency: "USD",
-      },
-      {
-        planId: "vip_quarterly",
-        planName: "Quarterly",
-        orderType: "vip_quarterly",
-        vipDays: 90,
-        dolAmount: null,
-        amountCents: 4990,
-        originalAmountCents: 6990,
-        currency: "USD",
-      },
-      {
-        planId: "coin_1000",
-        planName: "1000 Coins",
-        orderType: "coins_1000",
-        vipDays: null,
-        dolAmount: 1000,
-        amountCents: 990,
-        originalAmountCents: null,
-        currency: "USD",
-      },
-    ],
-    isFirstRecharge: false,
-    commercialOffer: null,
-    selectedPlanId: "vip_monthly",
-    payChannel: "stripe" as const,
-    agreed: true,
-    currentOrderId: null,
-    isCreatingOrder: false,
-    isPollingOrder: false,
-    isLoadingPlans: false,
-  };
-  const paymentDispatch = vi.fn((event: { type: string; planId?: string }) => {
-    if (event.type === "PaymentPlanSelected" && event.planId) {
-      payment.selectedPlanId = event.planId;
-    }
-  });
-  return {
-    characterCatalog: {
-      characters,
-      getBySlug: (slug: string | null) =>
-        characters.find((character) => character.slug === slug) ?? null,
-    },
-    payment,
-    paymentDispatch,
-    paymentFlowInput: vi.fn(),
-    planClick: vi.fn(),
-  };
-});
-
-vi.mock("@/app/_components", () => ({
-  BackButton: () => <button type="button">Back</button>,
-}));
-
-vi.mock("@/app/_components/core", () => ({
-  MobileShell: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
-
-vi.mock("@/app/_components/payment/payment-method-selector", () => ({
-  PaymentMethodSelector: () => <div>Payment methods</div>,
-}));
-
-vi.mock("@/app/_hooks/use-payment-method-selection", () => ({
-  usePaymentMethodSelection: () => undefined,
-}));
-
-vi.mock("@/app/_hooks/use-payment-plan-analytics", () => ({
-  usePaymentPlanAnalytics: () => undefined,
-}));
-
-vi.mock("@/hooks/use-has-hydrated", () => ({
-  useHasHydrated: () => true,
-}));
-
-vi.mock("@/stores/user/user-context", () => ({
-  useUserState: () => ({ currentUser: { countryCode: "ID" } }),
-}));
-
-vi.mock("@/providers/character-catalog-provider", () => ({
-  useCharacterCatalog: () => mocks.characterCatalog,
-}));
-
-vi.mock("@/lib/payment/payment_method", () => ({
-  getPaymentMethodConfig: () => ({
-    initialPayChannel: "stripe",
-    showPaymentMethodSelector: true,
-    ezpayDisplayName: "QRIS",
-  }),
-}));
-
-vi.mock("@/lib/analytics", () => ({
-  behaviorAnalytics: { planClick: mocks.planClick },
-  getDefaultPaymentAnalyticsContext: () => ({}),
-}));
-
-vi.mock("../use-subscription-payment-flow", () => ({
-  useSubscriptionPaymentFlow: (input: unknown) => {
-    mocks.paymentFlowInput(input);
-    return {
-      payment: mocks.payment,
-      paymentDispatch: mocks.paymentDispatch,
-      showPaymentSuccessDialog: false,
-      handleBackClick: vi.fn(),
-      handlePaymentSuccessClose: vi.fn(),
-    };
-  },
-}));
-
-vi.mock("../components", () => ({
-  SubscriptionVipOfferSection: ({
-    plans,
-    onSelectPlan,
-  }: {
-    plans: Array<{ id: string }>;
-    onSelectPlan: (id: string) => void;
-  }) => (
-    <div>
-      {plans.map((plan) => (
-        <button key={plan.id} type="button" onClick={() => onSelectPlan(plan.id)}>
-          {plan.id}
-        </button>
-      ))}
-    </div>
-  ),
-  SubscriptionCoinsOfferSection: ({
-    plans,
-    onSelectPlan,
-  }: {
-    plans: Array<{ id: string }>;
-    onSelectPlan: (id: string) => void;
-  }) => (
-    <div>
-      {plans.map((plan) => (
-        <button key={plan.id} type="button" onClick={() => onSelectPlan(plan.id)}>
-          {plan.id}
-        </button>
-      ))}
-    </div>
-  ),
-  SubscriptionCheckoutButton: ({ disabled }: { disabled: boolean }) => (
-    <button type="button" data-testid="checkout" disabled={disabled}>
-      Pay and Top Up
-    </button>
-  ),
-  SubscriptionRenewalConfirmationDialog: ({
-    open,
-    onCancel,
-    onConfirm,
-  }: {
-    open: boolean;
-    onCancel: () => void;
-    onConfirm: () => void;
-  }) =>
-    open ? (
-      <div role="dialog">
-        <button type="button" onClick={onCancel}>Cancel</button>
-        <button type="button" onClick={onConfirm}>Confirm</button>
-      </div>
-    ) : null,
-  SubscriptionPaymentIssueDialog: () => null,
-  SubscriptionPaymentSuccessDialog: () => null,
-}));
-
-import { SubscriptionScreen } from "../subscription-screen";
-
-describe("SubscriptionScreen payment selection flow", () => {
-  let container: HTMLDivElement;
-  let root: Root;
-
-  beforeEach(() => {
-    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
-      .IS_REACT_ACT_ENVIRONMENT = true;
-    mocks.payment.isFirstRecharge = false;
-    mocks.payment.commercialOffer = null;
-    for (const plan of mocks.payment.plans) {
-      delete (plan as Record<string, unknown>).isFirstRechargeOffer;
-      delete (plan as Record<string, unknown>).firstRechargeDiscountPercent;
-      delete (plan as Record<string, unknown>).promotionType;
-    }
-    mocks.payment.selectedPlanId = "vip_monthly";
-    mocks.paymentDispatch.mockClear();
-    mocks.paymentFlowInput.mockClear();
-    mocks.planClick.mockClear();
-    container = document.createElement("div");
-    document.body.appendChild(container);
-    root = createRoot(container);
-  });
-
-  afterEach(() => {
-    act(() => root.unmount());
-    container.remove();
-  });
-
-  it("confirms VIP selection before enabling the separate checkout button", () => {
-    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
-    const checkout = container.querySelector<HTMLButtonElement>(
-      '[data-testid="checkout"]',
-    );
-    expect(checkout?.disabled).toBe(true);
-
-    act(() => clickButton(container, "vip_monthly"));
-    expect(container.querySelector('[role="dialog"]')).not.toBeNull();
-    expect(mocks.paymentDispatch).not.toHaveBeenCalledWith(
-      expect.objectContaining({ type: "PaymentCreateOrderSubmitted" }),
-    );
-
-    act(() => clickButton(container, "Confirm"));
-    expect(mocks.paymentDispatch).toHaveBeenCalledWith({
-      type: "PaymentPlanSelected",
-      planId: "vip_monthly",
-    });
-    expect(mocks.paymentDispatch).not.toHaveBeenCalledWith(
-      expect.objectContaining({ type: "PaymentCreateOrderSubmitted" }),
-    );
-    expect(checkout?.disabled).toBe(false);
-
-    act(() => clickButton(container, "vip_monthly"));
-    expect(container.querySelector('[role="dialog"]')).toBeNull();
-
-    act(() => clickButton(container, "vip_quarterly"));
-    expect(container.querySelector('[role="dialog"]')).not.toBeNull();
-    expect(mocks.payment.selectedPlanId).toBe("vip_monthly");
-  });
-
-  it("keeps the original selection when VIP confirmation is cancelled", () => {
-    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
-    act(() => clickButton(container, "vip_quarterly"));
-    expect(container.querySelector('[role="dialog"]')).not.toBeNull();
-
-    act(() => clickButton(container, "Cancel"));
-
-    expect(container.querySelector('[role="dialog"]')).toBeNull();
-    expect(mocks.payment.selectedPlanId).toBe("vip_monthly");
-    expect(mocks.paymentDispatch).not.toHaveBeenCalledWith({
-      type: "PaymentPlanSelected",
-      planId: "vip_quarterly",
-    });
-  });
-
-  it("requires VIP confirmation again after the page is remounted", () => {
-    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
-    act(() => clickButton(container, "vip_monthly"));
-    act(() => clickButton(container, "Confirm"));
-    expect(container.querySelector('[role="dialog"]')).toBeNull();
-
-    act(() => root.unmount());
-    root = createRoot(container);
-    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
-    act(() => clickButton(container, "vip_monthly"));
-
-    expect(container.querySelector('[role="dialog"]')).not.toBeNull();
-  });
-
-  it("selects a coin package without showing the renewal dialog", () => {
-    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
-    act(() => clickButton(container, "coin_1000"));
-
-    expect(container.querySelector('[role="dialog"]')).toBeNull();
-    expect(mocks.paymentDispatch).toHaveBeenCalledWith({
-      type: "PaymentPlanSelected",
-      planId: "coin_1000",
-    });
-    expect(mocks.paymentDispatch).not.toHaveBeenCalledWith(
-      expect.objectContaining({ type: "PaymentCreateOrderSubmitted" }),
-    );
-  });
-
-  it("keeps payment guidance bound to the source character", () => {
-    act(() =>
-      root.render(
-        <SubscriptionScreen
-          sourceCharacterSlug="maya"
-          chatActionId="019c8f8d-17d3-7a42-b1cc-b6927b1927d5"
-        />,
-      ),
-    );
-
-    const guidance = container.querySelector(
-      '[data-payment-guidance-character="maya-tan"]',
-    );
-    expect(guidance?.textContent).toContain("Keep talking with Maya");
-    expect(guidance?.textContent).toContain("support Maya");
-    expect(guidance?.textContent).toContain("cannot continue");
-    expect(guidance?.textContent).not.toContain("Elio");
-  });
-
-  it("does not render the first recharge banner on the subscription page", () => {
-    mocks.payment.isFirstRecharge = true;
-    Object.assign(mocks.payment.plans[0] as Record<string, unknown>, {
-      isFirstRechargeOffer: true,
-      firstRechargeDiscountPercent: 50,
-      promotionType: "first_recharge_half_price",
-    });
-
-    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
-
-    expect(container.textContent).not.toContain("First Recharge Offer");
-    expect(container.textContent).not.toContain(
-      "Your first recharge price is already applied",
-    );
-  });
-
-  it.each(["elio", "maya", "nayeli"])(
-    "inherits the %s chat character without rendering a recipient selector",
-    (sourceCharacterSlug) => {
-      mocks.payment.selectedPlanId = "coin_1000";
-
-      act(() =>
-        root.render(
-          <SubscriptionScreen
-            subscriptionType="topup"
-            sourceCharacterSlug={sourceCharacterSlug}
-          />,
-        ),
-      );
-
-      const checkout = container.querySelector<HTMLButtonElement>(
-        '[data-testid="checkout"]',
-      );
-      expect(container.textContent).not.toContain("Supporting ");
-      expect(container.textContent).not.toContain(
-        "Choose who you want to support",
-      );
-      expect(container.textContent).not.toContain(
-        "Your VIP or credit purchase supports the character you choose",
-      );
-      expect(checkout?.disabled).toBe(false);
-      expect(mocks.paymentFlowInput).toHaveBeenLastCalledWith(
-        expect.objectContaining({ sourceCharacterSlug }),
-      );
-    },
-  );
-
-  it("does not invent a recipient when opened without a source character", () => {
-    mocks.payment.selectedPlanId = "coin_1000";
-
-    act(() =>
-      root.render(
-        <SubscriptionScreen
-          subscriptionType="topup"
-          sourceCharacterSlug={null}
-        />,
-      ),
-    );
-
-    const checkout = container.querySelector<HTMLButtonElement>(
-      '[data-testid="checkout"]',
-    );
-    expect(container.textContent).not.toContain("Supporting ");
-    expect(container.textContent).not.toContain(
-      "Choose who you want to support",
-    );
-    expect(container.textContent).not.toContain(
-      "Your VIP or credit purchase supports the character you choose",
-    );
-    expect(checkout?.disabled).toBe(true);
-    expect(mocks.paymentFlowInput).toHaveBeenLastCalledWith(
-      expect.objectContaining({ sourceCharacterSlug: null }),
-    );
-  });
-});
-
-function clickButton(root: ParentNode, label: string): void {
-  const button = Array.from(root.querySelectorAll("button")).find(
-    (item) => item.textContent?.trim() === label,
-  );
-  if (!button) throw new Error(`Expected ${label} button`);
-  button.click();
-}

src/app/subscription/__tests__/subscription-screen.helpers.test.ts

@@ -7,11 +7,9 @@ import {
 } from "@/data/schemas/payment";
 
 import {
-  canCheckoutSubscriptionPlan,
   findSelectedSubscriptionPlan,
   getDefaultSubscriptionPlanId,
   getFirstRechargeOfferView,
-  requiresVipPlanConfirmation,
   toCoinsOfferPlanViews,
   toVipOfferPlanViews,
 } from "../subscription-screen.helpers";
@@ -279,86 +277,4 @@ describe("subscription screen helpers", () => {
       }),
     ).toBeNull();
   });
-
-  it("requires confirmation for each unconfirmed VIP plan", () => {
-    const vipPlans = [
-      {
-        id: "vip_monthly",
-        title: "Monthly",
-        price: "19.90",
-        currency: "usd",
-        originalPrice: "",
-      },
-      {
-        id: "vip_quarterly",
-        title: "Quarterly",
-        price: "49.90",
-        currency: "usd",
-        originalPrice: "",
-      },
-    ];
-
-    expect(
-      requiresVipPlanConfirmation({
-        planId: "vip_monthly",
-        vipPlans,
-        confirmedVipPlanIds: new Set(),
-      }),
-    ).toBe(true);
-    expect(
-      requiresVipPlanConfirmation({
-        planId: "vip_monthly",
-        vipPlans,
-        confirmedVipPlanIds: new Set(["vip_monthly"]),
-      }),
-    ).toBe(false);
-    expect(
-      requiresVipPlanConfirmation({
-        planId: "coin_1000",
-        vipPlans,
-        confirmedVipPlanIds: new Set(),
-      }),
-    ).toBe(false);
-  });
-
-  it("allows checkout only after the selected VIP plan is confirmed", () => {
-    const vipPlans = [
-      {
-        id: "vip_monthly",
-        title: "Monthly",
-        price: "19.90",
-        currency: "usd",
-        originalPrice: "",
-      },
-    ];
-
-    expect(
-      canCheckoutSubscriptionPlan({
-        selectedPlanId: "vip_monthly",
-        vipPlans,
-        confirmedVipPlanIds: new Set(),
-      }),
-    ).toBe(false);
-    expect(
-      canCheckoutSubscriptionPlan({
-        selectedPlanId: "vip_monthly",
-        vipPlans,
-        confirmedVipPlanIds: new Set(["vip_monthly"]),
-      }),
-    ).toBe(true);
-    expect(
-      canCheckoutSubscriptionPlan({
-        selectedPlanId: "coin_1000",
-        vipPlans,
-        confirmedVipPlanIds: new Set(),
-      }),
-    ).toBe(true);
-    expect(
-      canCheckoutSubscriptionPlan({
-        selectedPlanId: "",
-        vipPlans,
-        confirmedVipPlanIds: new Set(),
-      }),
-    ).toBe(false);
-  });
 });

src/app/subscription/components/__tests__/subscription-payment-dialogs.test.tsx

@@ -1,250 +0,0 @@
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-import { Result } from "@/utils/result";
-import { ApiError } from "@/data/services/api/api_result";
-
-import {
-  getPaymentIssueSubmitErrorLogDetails,
-  SubscriptionPaymentIssueDialog,
-} from "../subscription-payment-issue-dialog";
-import { SubscriptionRenewalConfirmationDialog } from "../subscription-renewal-confirmation-dialog";
-
-const mocks = vi.hoisted(() => ({
-  submitFeedback: vi.fn(),
-}));
-
-vi.mock("@/lib/feedback", () => ({
-  submitFeedback: mocks.submitFeedback,
-}));
-
-vi.mock("@/app/feedback/feedback-context", () => ({
-  createFeedbackContext: () => ({
-    appVersion: "test",
-    platform: "web",
-    browser: "Chrome",
-    viewport: "390x844@3",
-  }),
-}));
-
-describe("subscription payment dialogs", () => {
-  let container: HTMLDivElement;
-  let root: Root;
-
-  beforeEach(() => {
-    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
-      .IS_REACT_ACT_ENVIRONMENT = true;
-    mocks.submitFeedback.mockReset();
-    container = document.createElement("div");
-    document.body.appendChild(container);
-    root = createRoot(container);
-  });
-
-  afterEach(() => {
-    act(() => root.unmount());
-    container.remove();
-    document.body.querySelectorAll('[role="dialog"]').forEach((node) => node.remove());
-  });
-
-  it("confirms a VIP plan without submitting payment", () => {
-    const onConfirm = vi.fn();
-    const onCancel = vi.fn();
-    act(() =>
-      root.render(
-        <SubscriptionRenewalConfirmationDialog
-          open
-          plan={{
-            id: "vip_monthly",
-            title: "Monthly",
-            price: "19.90",
-            currency: "usd",
-            originalPrice: "39.90",
-          }}
-          onCancel={onCancel}
-          onConfirm={onConfirm}
-        />,
-      ),
-    );
-
-    const dialog = document.body.querySelector('[role="dialog"]');
-    expect(dialog?.textContent).toContain("Automatic Renewal Confirmation");
-    expect(dialog?.textContent).toContain("Monthly");
-    expect(dialog?.textContent).toContain("19.90 usd");
-    expect(dialog?.querySelectorAll("a")).toHaveLength(2);
-
-    act(() => clickButton(dialog, "Confirm"));
-    expect(onConfirm).toHaveBeenCalledOnce();
-    expect(onCancel).not.toHaveBeenCalled();
-  });
-
-  it("submits Other as a Manager payment issue with one description field", async () => {
-    mocks.submitFeedback.mockResolvedValue(
-      Result.ok({ feedbackId: "feedback-payment-1" }),
-    );
-    const onClose = vi.fn();
-    const onSubmitted = vi.fn();
-
-    act(() =>
-      root.render(
-        <SubscriptionPaymentIssueDialog
-          open
-          subscriptionType="vip"
-          planId="vip_monthly"
-          orderId={null}
-          payChannel="ezpay"
-          countryCode="ID"
-          characterId="maya"
-          onClose={onClose}
-          onSubmitted={onSubmitted}
-        />,
-      ),
-    );
-
-    const other = document.body.querySelector<HTMLInputElement>(
-      'input[value="other"]',
-    );
-    expect(
-      Array.from(document.body.querySelectorAll<HTMLInputElement>('input[type="radio"]')).map(
-        (input) => input.parentElement?.textContent?.trim(),
-      ),
-    ).toEqual([
-      "Concerned about card information security",
-      "Insufficient card or wallet balance",
-      "No supported payment method available",
-      "Too expensive",
-      "Other",
-    ]);
-    act(() => {
-      other?.click();
-    });
-    const textarea = document.body.querySelector("textarea");
-    expect(textarea?.getAttribute("placeholder")).toBe(
-      "Please describe the payment problem you encountered.",
-    );
-    act(() => setTextareaValue(textarea, "QRIS did not open correctly."));
-
-    await act(async () => {
-      clickButton(document.body, "Submit");
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(mocks.submitFeedback).toHaveBeenCalledWith({
-      category: "payment",
-      content: "Payment issue: Other\nDetails: QRIS did not open correctly.",
-      context: {
-        appVersion: "test",
-        platform: "web",
-        browser: "Chrome",
-        viewport: "390x844@3",
-        sourcePage: "subscription",
-        paymentIssueReason: "other",
-        subscriptionType: "vip",
-        planId: "vip_monthly",
-        payChannel: "ezpay",
-        countryCode: "ID",
-        characterId: "maya",
-      },
-      images: [],
-      idempotencyKey: expect.stringMatching(/^payment_feedback_[A-Za-z0-9_-]+$/),
-    });
-    expect(onSubmitted).toHaveBeenCalledWith(
-      "Thanks. Your payment issue has been submitted.",
-    );
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it("keeps a failed payment issue open and reuses its idempotency key for retry", async () => {
-    mocks.submitFeedback
-      .mockResolvedValueOnce(Result.err(new Error("backend unavailable")))
-      .mockResolvedValueOnce(Result.ok({ feedbackId: "feedback-payment-2" }));
-    const onClose = vi.fn();
-
-    act(() =>
-      root.render(
-        <SubscriptionPaymentIssueDialog
-          open
-          subscriptionType="topup"
-          planId="coin_1000"
-          orderId="pay_pending_1"
-          payChannel="stripe"
-          countryCode="US"
-          characterId="elio"
-          onClose={onClose}
-          onSubmitted={() => undefined}
-        />,
-      ),
-    );
-
-    const reason = document.body.querySelector<HTMLInputElement>(
-      'input[value="tooExpensive"]',
-    );
-    act(() => reason?.click());
-    await act(async () => {
-      clickButton(document.body, "Submit");
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(document.body.textContent).toContain(
-      "Unable to submit. Please try again.",
-    );
-    expect(onClose).not.toHaveBeenCalled();
-
-    await act(async () => {
-      clickButton(document.body, "Submit");
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(mocks.submitFeedback).toHaveBeenCalledTimes(2);
-    expect(mocks.submitFeedback.mock.calls[0]?.[0].idempotencyKey).toBe(
-      mocks.submitFeedback.mock.calls[1]?.[0].idempotencyKey,
-    );
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it("keeps HTTP status and backend error code in payment issue failure diagnostics", () => {
-    const failure = Result.err(
-      new ApiError("HTTP_ERROR", "Invalid feedback context", 400, {
-        detail: {
-          message: "Invalid feedback context",
-          errorCode: "INVALID_FEEDBACK_CONTEXT",
-        },
-      }),
-    );
-
-    if (failure.success) throw new Error("Expected failure result");
-    expect(getPaymentIssueSubmitErrorLogDetails(failure.error)).toMatchObject({
-      code: "UNKNOWN",
-      message: "Invalid feedback context",
-      causeName: "ApiError",
-      causeMessage: "Invalid feedback context",
-      httpStatus: 400,
-      apiCode: "HTTP_ERROR",
-      serverErrorCode: "INVALID_FEEDBACK_CONTEXT",
-    });
-  });
-});
-
-function clickButton(root: ParentNode | null, label: string): void {
-  const button = Array.from(root?.querySelectorAll("button") ?? []).find(
-    (item) => item.textContent?.trim() === label,
-  );
-  if (!button) throw new Error(`Expected ${label} button`);
-  button.click();
-}
-
-function setTextareaValue(
-  element: HTMLTextAreaElement | null,
-  value: string,
-): void {
-  if (!element) throw new Error("Expected textarea");
-  const setter = Object.getOwnPropertyDescriptor(
-    HTMLTextAreaElement.prototype,
-    "value",
-  )?.set;
-  setter?.call(element, value);
-  element.dispatchEvent(new Event("input", { bubbles: true }));
-}

src/app/subscription/components/__tests__/tailwind-components.test.tsx

@@ -1,7 +1,7 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
-import { stripePaymentDialogStyles } from "@/app/_components/payment/stripe-payment-dialog.styles";
+import { StripePaymentDialog } from "@/app/_components/payment/stripe-payment-dialog";
 
 import { SubscriptionCtaButton } from "../subscription-cta-button";
 import { SubscriptionPaymentSuccessDialog } from "../subscription-payment-success-dialog";
@@ -48,16 +48,19 @@ describe("subscription Tailwind components", () => {
     expect(html).toContain("OK");
   });
 
-  it("keeps Stripe dialog viewport and panel utilities", () => {
+  it("renders StripePaymentDialog fallback with Tailwind dialog utilities", () => {
-    expect(stripePaymentDialogStyles.overlay).toContain("fixed inset-0");
+    const html = renderToStaticMarkup(
-    expect(stripePaymentDialogStyles.dialog).toContain(
+      <StripePaymentDialog
-      "max-w-(--dialog-wide-max-width,420px)",
+        clientSecret="client-secret"
-    );
+        onClose={() => undefined}
-    expect(stripePaymentDialogStyles.dialog).toContain("overflow-y-auto");
+      />,
-    expect(stripePaymentDialogStyles.dialog).toContain("overscroll-contain");
-    expect(stripePaymentDialogStyles.primary).toContain(
-      "bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0)",
     );
+
+    expect(html).toContain('role="alertdialog"');
+    expect(html).toContain("fixed inset-0");
+    expect(html).toContain("max-w-(--dialog-wide-max-width,420px)");
+    expect(html).toContain("Payment unavailable");
+    expect(html).toContain("bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0)");
   });
 
   it("renders most popular badges for VIP and coin plans", () => {

src/app/subscription/components/index.ts

@@ -6,6 +6,4 @@ export * from "./subscription-checkout-button";
 export * from "./subscription-coins-offer-section";
 export * from "./subscription-cta-button";
 export * from "./subscription-payment-success-dialog";
-export * from "./subscription-payment-issue-dialog";
-export * from "./subscription-renewal-confirmation-dialog";
 export * from "./subscription-vip-offer-section";

src/app/subscription/components/subscription-checkout-button.tsx

@@ -19,12 +19,11 @@ import { SubscriptionCtaButton } from "./subscription-cta-button";
 const log = new Logger("SubscriptionCheckoutButton");
 
 export interface SubscriptionCheckoutButtonProps {
-  /** 是否可用（未选套餐或 VIP 套餐尚未确认自动续费时为 false） */
+  /** 是否可用（未选套餐 / 未勾选协议 → false） */
   disabled?: boolean;
   subscriptionType: "vip" | "topup";
   returnTo?: SubscriptionReturnTo;
   sourceCharacterSlug?: string;
-  countryCode?: string | null;
 }
 
 export function SubscriptionCheckoutButton({
@@ -32,7 +31,6 @@ export function SubscriptionCheckoutButton({
   subscriptionType,
   returnTo = null,
   sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
-  countryCode = null,
 }: SubscriptionCheckoutButtonProps) {
   const payment = usePaymentState();
   const paymentDispatch = usePaymentDispatch();
@@ -44,22 +42,31 @@ export function SubscriptionCheckoutButton({
     returnTo: returnTo ?? undefined,
     characterSlug: sourceCharacterSlug,
     subscriptionType,
-    countryCode,
   });
 
-  const isLoading = payment.isCreatingOrder || payment.isPollingOrder;
+  const isLoading =
-  const readyLabel = "Pay and Top Up";
+    payment.isCreatingOrder ||
+    payment.isPollingOrder;
+  const readyLabel =
+    subscriptionType === "topup" ? "Pay and Top Up" : "Pay and Activiate";
+  const agreementLabel =
+    subscriptionType === "topup"
+      ? "Confirm the agreement and Top Up"
+      : "Confirm the agreement and Activate";
   const label = payment.isPollingOrder
-    ? "Processing payment..."
+      ? "Processing payment..."
-    : payment.isCreatingOrder
+      : payment.isCreatingOrder
-      ? "Creating order..."
+        ? "Creating order..."
-      : readyLabel;
+        : payment.agreed
+          ? readyLabel
+          : agreementLabel;
 
   const handleClick = () => {
     if (disabled || isLoading) return;
     paymentLaunch.resetLaunchState();
     paymentDispatch({ type: "PaymentCreateOrderSubmitted" });
   };
+
   return (
     <>
       <SubscriptionCtaButton
@@ -88,7 +95,7 @@ export function SubscriptionCheckoutButton({
       <PaymentLaunchDialogs
         currentOrderId={payment.currentOrderId}
         externalCheckoutAnalyticsKey="subscription.external_checkout"
-        ezpayDescription="Your order has been created. Continue to the secure payment page to finish."
+        ezpayDescription="Your order has been created. Continue to GCash to finish the payment."
         launch={paymentLaunch}
       />
     </>

src/app/subscription/components/subscription-dialog.module.css

@@ -1,187 +0,0 @@
-.scrim {
-  position: fixed;
-  inset: 0;
-  z-index: 90;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding:
-    calc(20px + var(--app-safe-top, 0px))
-    calc(16px + var(--app-safe-right, 0px))
-    calc(20px + var(--app-safe-bottom, 0px))
-    calc(16px + var(--app-safe-left, 0px));
-}
-
-.panel {
-  width: min(100%, 420px);
-  max-height: min(86dvh, 720px);
-  overflow-y: auto;
-  border: 1px solid rgba(255, 95, 174, 0.24);
-  border-radius: 24px;
-  background: #ffffff;
-  color: #23171d;
-  box-shadow: 0 28px 80px rgba(42, 20, 31, 0.3);
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: clamp(20px, 5vw, 28px);
-}
-
-.title {
-  margin: 0;
-  color: #23171d;
-  font-size: clamp(20px, 5vw, 24px);
-  font-weight: 900;
-  line-height: 1.2;
-}
-
-.description {
-  margin: 0;
-  color: #65545d;
-  font-size: 14px;
-  line-height: 1.65;
-}
-
-.link {
-  color: #db327f;
-  font-weight: 800;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.reasonList {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.reasonOption {
-  display: flex;
-  min-height: 48px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 11px 13px;
-  border: 1px solid #eadce3;
-  border-radius: 14px;
-  background: #fffafb;
-  color: #403139;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1.35;
-}
-
-.reasonOption:has(input:checked) {
-  border-color: #f657a0;
-  background: #fff0f7;
-  box-shadow: 0 0 0 2px rgba(246, 87, 160, 0.12);
-}
-
-.reasonOption input {
-  flex: 0 0 auto;
-  width: 20px;
-  height: 20px;
-  accent-color: #f657a0;
-}
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  color: #403139;
-  font-size: 14px;
-  font-weight: 800;
-}
-
-.field textarea {
-  width: 100%;
-  min-height: 112px;
-  resize: vertical;
-  border: 1px solid #dccbd4;
-  border-radius: 14px;
-  background: #ffffff;
-  color: #23171d;
-  padding: 12px;
-  font: inherit;
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.field textarea:focus-visible {
-  border-color: #f657a0;
-  outline: 2px solid rgba(246, 87, 160, 0.18);
-}
-
-.error {
-  margin: 0;
-  color: #b42318;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.4;
-}
-
-.actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin-top: 2px;
-}
-
-.secondaryButton,
-.primaryButton {
-  min-height: 46px;
-  border-radius: 999px;
-  padding: 10px 18px;
-  cursor: pointer;
-  font: inherit;
-  font-size: 15px;
-  font-weight: 900;
-}
-
-.secondaryButton {
-  border: 1px solid #d9c7d0;
-  background: #f7f1f4;
-  color: #55434c;
-}
-
-.primaryButton {
-  border: 0;
-  background: linear-gradient(135deg, #ff67b3 0%, #f657a0 100%);
-  color: #ffffff;
-  box-shadow: 0 8px 20px rgba(246, 87, 160, 0.26);
-}
-
-.secondaryButton:disabled,
-.primaryButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@media (max-width: 360px) {
-  .content {
-    padding: 18px;
-  }
-
-  .reasonOption {
-    font-size: 13px;
-  }
-}

src/app/subscription/components/subscription-payment-issue-dialog.tsx

@@ -1,285 +0,0 @@
-"use client";
-
-import { type FormEvent, useMemo, useState } from "react";
-
-import { ModalPortal } from "@/app/_components/core/modal-portal";
-import { createFeedbackContext } from "@/app/feedback/feedback-context";
-import type { PayChannel } from "@/data/schemas/payment";
-import { submitFeedback } from "@/lib/feedback";
-import { Logger } from "@/utils/logger";
-
-import type { SubscriptionType } from "../subscription-screen.helpers";
-import styles from "./subscription-dialog.module.css";
-
-const PAYMENT_ISSUE_REASONS = [
-  {
-    value: "cardSecurityConcern",
-    label: "Concerned about card information security",
-  },
-  {
-    value: "insufficientBalance",
-    label: "Insufficient card or wallet balance",
-  },
-  {
-    value: "unsupportedPaymentMethod",
-    label: "No supported payment method available",
-  },
-  { value: "tooExpensive", label: "Too expensive" },
-  { value: "other", label: "Other" },
-] as const;
-
-type PaymentIssueReason = (typeof PAYMENT_ISSUE_REASONS)[number]["value"];
-
-const OTHER_DETAILS_MIN_LENGTH = 10;
-const OTHER_DETAILS_MAX_LENGTH = 2000;
-const SUCCESS_MESSAGE = "Thanks. Your payment issue has been submitted.";
-const FAILURE_MESSAGE = "Unable to submit. Please try again.";
-const log = new Logger("SubscriptionPaymentIssueDialog");
-
-interface ErrorRecord {
-  readonly [key: string]: unknown;
-}
-
-export interface PaymentIssueSubmitErrorLogDetails {
-  code: string;
-  message: string;
-  causeName?: string;
-  causeMessage?: string;
-  httpStatus?: number;
-  apiCode?: string;
-  serverErrorCode?: string;
-}
-
-export interface SubscriptionPaymentIssueDialogProps {
-  open: boolean;
-  subscriptionType: SubscriptionType;
-  planId: string | null;
-  orderId: string | null;
-  payChannel: PayChannel;
-  countryCode?: string | null;
-  characterId: string;
-  onClose: () => void;
-  onSubmitted: (message: string) => void;
-}
-
-export function SubscriptionPaymentIssueDialog({
-  open,
-  subscriptionType,
-  planId,
-  orderId,
-  payChannel,
-  countryCode,
-  characterId,
-  onClose,
-  onSubmitted,
-}: SubscriptionPaymentIssueDialogProps) {
-  const [reason, setReason] = useState<PaymentIssueReason | null>(null);
-  const [details, setDetails] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [idempotencyKey] = useState(createIdempotencyKey);
-
-  const normalizedDetails = details.trim();
-  const detailsError = useMemo(() => {
-    if (reason !== "other") return null;
-    if (normalizedDetails.length < OTHER_DETAILS_MIN_LENGTH) {
-      return `Please describe the issue in at least ${OTHER_DETAILS_MIN_LENGTH} characters.`;
-    }
-    if (normalizedDetails.length > OTHER_DETAILS_MAX_LENGTH) {
-      return `Your description cannot exceed ${OTHER_DETAILS_MAX_LENGTH} characters.`;
-    }
-    return null;
-  }, [normalizedDetails, reason]);
-  const canSubmit = reason !== null && detailsError === null && !isSubmitting;
-
-  const handleClose = () => {
-    if (isSubmitting) return;
-    onClose();
-  };
-
-  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!reason || !canSubmit) {
-      setErrorMessage(
-        detailsError ?? "Please select the payment problem you encountered.",
-      );
-      return;
-    }
-
-    const reasonLabel = PAYMENT_ISSUE_REASONS.find(
-      (item) => item.value === reason,
-    )?.label;
-    if (!reasonLabel) return;
-
-    setIsSubmitting(true);
-    setErrorMessage(null);
-    const result = await submitFeedback({
-      category: "payment",
-      content:
-        reason === "other"
-          ? `Payment issue: Other\nDetails: ${normalizedDetails}`
-          : `Payment issue: ${reasonLabel}`,
-      context: {
-        ...createFeedbackContext(),
-        sourcePage: "subscription",
-        paymentIssueReason: reason,
-        subscriptionType,
-        ...(planId ? { planId } : {}),
-        ...(orderId ? { orderId } : {}),
-        payChannel,
-        ...(countryCode ? { countryCode } : {}),
-        characterId,
-      },
-      images: [],
-      idempotencyKey,
-    });
-
-    if (!result.success) {
-      log.error(
-        {
-          ...getPaymentIssueSubmitErrorLogDetails(result.error),
-          paymentIssueReason: reason,
-          subscriptionType,
-          planId,
-          orderId,
-          payChannel,
-          countryCode,
-          characterId,
-        },
-        "Payment issue feedback submit failed",
-      );
-      setErrorMessage(FAILURE_MESSAGE);
-      setIsSubmitting(false);
-      return;
-    }
-
-    setIsSubmitting(false);
-    onSubmitted(SUCCESS_MESSAGE);
-    onClose();
-  };
-
-  return (
-    <ModalPortal
-      open={open}
-      onClose={handleClose}
-      scrimClassName={styles.scrim}
-      panelClassName={styles.panel}
-      scrimOpacity={0.56}
-      persistent={isSubmitting}
-      ariaLabel="What problem did you encounter?"
-    >
-      <form className={styles.content} onSubmit={handleSubmit}>
-        <h2 className={styles.title}>What problem did you encounter?</h2>
-        <fieldset className={styles.reasonList} disabled={isSubmitting}>
-          <legend className={styles.srOnly}>Payment problem</legend>
-          {PAYMENT_ISSUE_REASONS.map((item) => (
-            <label key={item.value} className={styles.reasonOption}>
-              <span>{item.label}</span>
-              <input
-                type="radio"
-                name="paymentIssueReason"
-                value={item.value}
-                checked={reason === item.value}
-                onChange={() => {
-                  setReason(item.value);
-                  setErrorMessage(null);
-                }}
-              />
-            </label>
-          ))}
-        </fieldset>
-
-        {reason === "other" ? (
-          <label className={styles.field}>
-            <span>Please describe the issue</span>
-            <textarea
-              value={details}
-              minLength={OTHER_DETAILS_MIN_LENGTH}
-              maxLength={OTHER_DETAILS_MAX_LENGTH}
-              rows={4}
-              disabled={isSubmitting}
-              placeholder="Please describe the payment problem you encountered."
-              onChange={(event) => {
-                setDetails(event.target.value);
-                setErrorMessage(null);
-              }}
-            />
-          </label>
-        ) : null}
-
-        {errorMessage ? (
-          <p className={styles.error} role="alert">
-            {errorMessage}
-          </p>
-        ) : null}
-
-        <div className={styles.actions}>
-          <button
-            type="button"
-            className={styles.secondaryButton}
-            disabled={isSubmitting}
-            onClick={handleClose}
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            className={styles.primaryButton}
-            disabled={!canSubmit}
-          >
-            {isSubmitting ? "Submitting..." : "Submit"}
-          </button>
-        </div>
-      </form>
-    </ModalPortal>
-  );
-}
-
-export function getPaymentIssueSubmitErrorLogDetails(
-  error: Error,
-): PaymentIssueSubmitErrorLogDetails {
-  const errorRecord = toErrorRecord(error);
-  const cause = toErrorRecord(errorRecord?.cause);
-  const responseDetails = toErrorRecord(cause?.details);
-  const detail = toErrorRecord(responseDetails?.detail);
-  const causeName = stringValue(cause?.name);
-  const causeMessage = stringValue(cause?.message);
-  const httpStatus = numberValue(cause?.status);
-  const apiCode = stringValue(cause?.code);
-  const serverErrorCode =
-    stringValue(detail?.errorCode) ??
-    stringValue(responseDetails?.errorCode);
-
-  return {
-    code: stringValue(errorRecord?.code) ?? "UNKNOWN",
-    message: error.message,
-    ...(causeName ? { causeName } : {}),
-    ...(causeMessage ? { causeMessage } : {}),
-    ...(httpStatus !== undefined ? { httpStatus } : {}),
-    ...(apiCode ? { apiCode } : {}),
-    ...(serverErrorCode ? { serverErrorCode } : {}),
-  };
-}
-
-function createIdempotencyKey(): string {
-  const token =
-    typeof crypto !== "undefined" && "randomUUID" in crypto
-      ? crypto.randomUUID()
-      : `${Date.now()}_${Math.random().toString(36).slice(2)}`;
-  return `payment_feedback_${token}`;
-}
-
-function toErrorRecord(value: unknown): ErrorRecord | null {
-  if (typeof value !== "object" || value === null) return null;
-  return value as ErrorRecord;
-}
-
-function stringValue(value: unknown): string | undefined {
-  return typeof value === "string" && value.length > 0 ? value : undefined;
-}
-
-function numberValue(value: unknown): number | undefined {
-  return typeof value === "number" && Number.isFinite(value)
-    ? value
-    : undefined;
-}

src/app/subscription/components/subscription-renewal-confirmation-dialog.tsx

@@ -1,83 +0,0 @@
-"use client";
-
-import { ModalPortal } from "@/app/_components/core/modal-portal";
-import { AppConstants } from "@/core/app_constants";
-
-import type { VipOfferPlanView } from "./subscription-vip-offer-section";
-import styles from "./subscription-dialog.module.css";
-
-export interface SubscriptionRenewalConfirmationDialogProps {
-  open: boolean;
-  plan: VipOfferPlanView | null;
-  onCancel: () => void;
-  onConfirm: () => void;
-}
-
-export function SubscriptionRenewalConfirmationDialog({
-  open,
-  plan,
-  onCancel,
-  onConfirm,
-}: SubscriptionRenewalConfirmationDialogProps) {
-  return (
-    <ModalPortal
-      open={open && plan !== null}
-      onClose={onCancel}
-      scrimClassName={styles.scrim}
-      panelClassName={styles.panel}
-      scrimOpacity={0.56}
-      ariaLabel="Automatic Renewal Confirmation"
-    >
-      {plan ? (
-        <div className={styles.content}>
-          <h2 className={styles.title}>Automatic Renewal Confirmation</h2>
-          <p className={styles.description}>
-            You selected the <strong>{plan.title}</strong> plan for{" "}
-            <strong>
-              {plan.price} {plan.currency}
-            </strong>
-            . It will renew automatically at the applicable renewal price until
-            you cancel.
-          </p>
-          <p className={styles.description}>
-            By confirming, you agree to the{" "}
-            <a
-              href={AppConstants.membershipAgreementUrl}
-              target="_blank"
-              rel="noreferrer"
-              className={styles.link}
-            >
-              VIP Membership Benefits Agreement
-            </a>{" "}
-            and{" "}
-            <a
-              href={AppConstants.autoRenewalAgreementUrl}
-              target="_blank"
-              rel="noreferrer"
-              className={styles.link}
-            >
-              Automatic Renewal Agreement
-            </a>
-            .
-          </p>
-          <div className={styles.actions}>
-            <button
-              type="button"
-              className={styles.secondaryButton}
-              onClick={onCancel}
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              className={styles.primaryButton}
-              onClick={onConfirm}
-            >
-              Confirm
-            </button>
-          </div>
-        </div>
-      ) : null}
-    </ModalPortal>
-  );
-}

src/app/subscription/components/subscription-screen.module.css

@@ -1,32 +1,20 @@
 .shell {
   display: flex;
   flex-direction: column;
-  height: var(--app-viewport-height, 100dvh);
   min-height: var(--app-viewport-height, 100dvh);
-  overflow: hidden;
   background:
     radial-gradient(circle at 8% 4%, rgba(255, 255, 255, 0.95) 0 90px, transparent 160px),
     linear-gradient(180deg, #fff9fb 0%, #fcf3f4 52%, #fffefe 100%);
-}
-
-.scrollArea {
-  min-height: 0;
-  flex: 1 1 auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
   padding:
     calc(var(--page-padding-y, 18px) + var(--app-safe-top, 0px))
     calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
-    var(--page-section-gap-lg, 22px)
+    calc(10px + var(--app-safe-bottom, 0px))
     calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
 }
 
 .header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
   height: 40px;
 }
 
@@ -34,66 +22,6 @@
   display: inline-flex;
 }
 
-.paymentIssueButton {
-  border: 0;
-  background: transparent;
-  color: #b72f70;
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--responsive-caption, 13px);
-  font-weight: 800;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.paymentIssueButton:focus-visible {
-  border-radius: 6px;
-  outline: 2px solid #f657a0;
-  outline-offset: 3px;
-}
-
-.paymentIssueNotice {
-  position: fixed;
-  z-index: 80;
-  top: calc(68px + var(--app-safe-top, 0px));
-  left: 50%;
-  width: min(calc(100% - 40px), 500px);
-  margin: 0;
-  padding: 10px 12px;
-  border: 1px solid rgba(39, 174, 96, 0.3);
-  border-radius: 14px;
-  background: rgba(236, 253, 245, 0.96);
-  color: #166534;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.4;
-  transform: translateX(-50%);
-  box-shadow: 0 12px 30px rgba(22, 101, 52, 0.12);
-}
-
-.characterSupportBanner {
-  margin-top: var(--page-section-gap, 14px);
-  padding: 14px 16px;
-  border: 1px solid rgba(246, 87, 160, 0.2);
-  border-radius: var(--responsive-card-radius-sm, 22px);
-  background: rgba(255, 255, 255, 0.9);
-  color: #4a3340;
-  box-shadow: 0 10px 24px rgba(246, 87, 160, 0.1);
-}
-
-.characterSupportBanner h2 {
-  margin: 0;
-  color: #24151d;
-  font-size: var(--responsive-card-title, 17px);
-  line-height: 1.25;
-}
-
-.characterSupportBanner p {
-  margin: 6px 0 0;
-  font-size: var(--responsive-caption, 14px);
-  line-height: 1.45;
-}
-
 .firstRechargeBanner {
   display: flex;
   align-items: center;
@@ -201,23 +129,24 @@
 }
 
 .ctaSlot {
-  position: relative;
+  margin-top: var(--page-section-gap-lg, 22px);
-  z-index: 40;
+}
-  flex: 0 0 auto;
+
-  width: 100%;
+.agreementSlot {
-  max-height: min(50dvh, 360px);
+  margin-top: var(--spacing-md);
-  overflow-y: auto;
+  padding: 0 var(--spacing-xs);
-  padding:
+}
-    12px
+
-    calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
+.agreementLabel {
-    calc(12px + var(--app-safe-bottom, 0px))
+  font-size: var(--responsive-micro, 12px);
-    calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
+}
-  border-top: 1px solid rgba(246, 87, 160, 0.14);
+
-  background: linear-gradient(
+.agreementLink {
-    180deg,
+  color: var(--color-auth-text-primary);
-    rgba(255, 255, 255, 0.72) 0%,
+  font-weight: 700;
-    rgba(255, 249, 252, 0.98) 35%
+  text-decoration: none;
-  );
+}
-  box-shadow: 0 -12px 30px rgba(87, 35, 59, 0.1);
+
-  backdrop-filter: blur(16px);
+.agreementLink:hover {
+  text-decoration: underline;
 }

src/app/subscription/page.tsx

@@ -10,6 +10,7 @@ import {
   type PaymentSearchParams,
 } from "@/lib/payment/payment_search_params";
 import {
+  DEFAULT_CHARACTER_SLUG,
   getCharacterBySlug,
 } from "@/data/constants/character";
 
@@ -29,13 +30,8 @@ export default async function SubscriptionPage({
     getFirstPaymentSearchParam(query.type),
   );
   const sourceCharacterSlug =
-    getCharacterBySlug(getFirstPaymentSearchParam(query.character))?.slug ?? null;
+    getCharacterBySlug(getFirstPaymentSearchParam(query.character))?.slug ??
-  const initialPlanId = getFirstPaymentSearchParam(query.planId);
+    DEFAULT_CHARACTER_SLUG;
-  const commercialOfferId = getFirstPaymentSearchParam(
-    query.commercialOfferId,
-  );
-  const resumeOrderId = getFirstPaymentSearchParam(query.resumeOrderId);
-  const chatActionId = getFirstPaymentSearchParam(query.chatActionId);
   const analyticsContext = parsePaymentAnalyticsContext({
     entryPoint: getFirstPaymentSearchParam(
       query[PAYMENT_ANALYTICS_ENTRY_PARAM],
@@ -54,10 +50,6 @@ export default async function SubscriptionPage({
       initialPayChannel={paymentReturn.initialPayChannel}
       analyticsContext={analyticsContext}
       sourceCharacterSlug={sourceCharacterSlug}
-      initialPlanId={initialPlanId}
-      commercialOfferId={commercialOfferId}
-      resumeOrderId={resumeOrderId}
-      chatActionId={chatActionId}
     />
   );
 }

src/app/subscription/subscription-screen.helpers.ts

@@ -105,30 +105,6 @@ export function findSelectedSubscriptionPlan(input: {
   return plans.find((plan) => plan.id === input.selectedPlanId) ?? null;
 }
 
-export function requiresVipPlanConfirmation(input: {
-  planId: string;
-  vipPlans: readonly VipOfferPlanView[];
-  confirmedVipPlanIds: ReadonlySet<string>;
-}): boolean {
-  return (
-    input.vipPlans.some((plan) => plan.id === input.planId) &&
-    !input.confirmedVipPlanIds.has(input.planId)
-  );
-}
-
-export function canCheckoutSubscriptionPlan(input: {
-  selectedPlanId: string;
-  vipPlans: readonly VipOfferPlanView[];
-  confirmedVipPlanIds: ReadonlySet<string>;
-}): boolean {
-  if (!input.selectedPlanId) return false;
-  return !requiresVipPlanConfirmation({
-    planId: input.selectedPlanId,
-    vipPlans: input.vipPlans,
-    confirmedVipPlanIds: input.confirmedVipPlanIds,
-  });
-}
-
 export function getDefaultSubscriptionPlanId(input: {
   canSubscribeVip: boolean;
   selectedPlanId: string;

src/app/subscription/subscription-screen.tsx

@@ -1,39 +1,34 @@
 "use client";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 
 import { BackButton } from "@/app/_components";
-import { MobileShell } from "@/app/_components/core";
+import { Checkbox, MobileShell } from "@/app/_components/core";
 import { PaymentMethodSelector } from "@/app/_components/payment/payment-method-selector";
 import { usePaymentMethodSelection } from "@/app/_hooks/use-payment-method-selection";
 import { usePaymentPlanAnalytics } from "@/app/_hooks/use-payment-plan-analytics";
+import { AppConstants } from "@/core/app_constants";
 import type { PayChannel } from "@/data/schemas/payment";
 import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit";
 import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
-import { useCharacterCatalog } from "@/providers/character-catalog-provider";
 import {
   behaviorAnalytics,
   getDefaultPaymentAnalyticsContext,
   type PaymentAnalyticsContext,
 } from "@/lib/analytics";
 import { getPaymentMethodConfig } from "@/lib/payment/payment_method";
-import { useHasHydrated } from "@/hooks/use-has-hydrated";
 import { useUserState } from "@/stores/user/user-context";
 
 import {
   SubscriptionCheckoutButton,
   SubscriptionCoinsOfferSection,
-  SubscriptionPaymentIssueDialog,
   SubscriptionPaymentSuccessDialog,
-  SubscriptionRenewalConfirmationDialog,
   SubscriptionVipOfferSection,
 } from "./components";
 import styles from "./components/subscription-screen.module.css";
 import {
-  canCheckoutSubscriptionPlan,
   findSelectedSubscriptionPlan,
   getFirstRechargeOfferView,
   getDefaultSubscriptionPlanId,
-  requiresVipPlanConfirmation,
   toCoinsOfferPlanViews,
   toVipOfferPlanViews,
   type SubscriptionType,
@@ -48,11 +43,7 @@ export interface SubscriptionScreenProps {
   returnTo?: SubscriptionReturnTo;
   initialPayChannel?: PayChannel | null;
   analyticsContext?: PaymentAnalyticsContext;
-  sourceCharacterSlug?: string | null;
+  sourceCharacterSlug?: string;
-  initialPlanId?: string | null;
-  commercialOfferId?: string | null;
-  resumeOrderId?: string | null;
-  chatActionId?: string | null;
 }
 
 export function SubscriptionScreen({
@@ -61,32 +52,14 @@ export function SubscriptionScreen({
   returnTo = null,
   initialPayChannel = null,
   analyticsContext: providedAnalyticsContext,
-  sourceCharacterSlug = null,
+  sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
-  initialPlanId = null,
-  commercialOfferId = null,
-  resumeOrderId = null,
-  chatActionId = null,
 }: SubscriptionScreenProps) {
-  const [confirmedVipPlanIds, setConfirmedVipPlanIds] = useState<
-    ReadonlySet<string>
-  >(() => new Set());
-  const [pendingVipPlanId, setPendingVipPlanId] = useState<string | null>(null);
-  const [showPaymentIssueDialog, setShowPaymentIssueDialog] = useState(false);
-  const [paymentIssueNotice, setPaymentIssueNotice] = useState<string | null>(
-    null,
-  );
-  const characterCatalog = useCharacterCatalog();
   const userState = useUserState();
-  const sourceCharacter = characterCatalog.getBySlug(sourceCharacterSlug);
-  const hasHydrated = useHasHydrated();
   const countryCode = userState.currentUser?.countryCode;
   const paymentMethodConfig = getPaymentMethodConfig({
     countryCode,
     requestedPayChannel: initialPayChannel,
   });
-  const renderedPaymentMethodConfig = hasHydrated
-    ? paymentMethodConfig
-    : { ...paymentMethodConfig, showPaymentMethodSelector: false };
   const {
     payment,
     paymentDispatch,
@@ -97,12 +70,8 @@ export function SubscriptionScreen({
     subscriptionType,
     shouldResumePendingOrder,
     returnTo,
-    sourceCharacterSlug: sourceCharacter?.slug ?? null,
+    sourceCharacterSlug,
     initialPayChannel: paymentMethodConfig.initialPayChannel,
-    initialPlanId,
-    commercialOfferId,
-    resumeOrderId,
-    chatActionId,
   });
   const canSubscribeVip = subscriptionType === "vip";
   const analyticsContext =
@@ -128,14 +97,14 @@ export function SubscriptionScreen({
     });
   }, [canSubscribeVip, directCoinsPlans, payment.plans, vipOfferPlans]);
   usePaymentPlanAnalytics(displayedPlans, analyticsContext);
-  const hasFirstRechargeOffer = useMemo(
+  const firstRechargeOffer = useMemo(
     () =>
       getFirstRechargeOfferView({
         isFirstRecharge: payment.isFirstRecharge,
         subscriptionType,
         vipPlans: vipOfferPlans,
         coinPlans: directCoinsPlans,
-      }) !== null,
+      }),
     [
       directCoinsPlans,
       payment.isFirstRecharge,
@@ -153,49 +122,15 @@ export function SubscriptionScreen({
   const isPaymentBusy =
     payment.isCreatingOrder ||
     payment.isPollingOrder;
-  const selectedPlanIsVip = vipOfferPlans.some(
-    (plan) => plan.id === payment.selectedPlanId,
-  );
   const canActivate =
-    sourceCharacter !== null &&
+    selectedPlan !== null && payment.agreed && !isPaymentBusy;
-    selectedPlan !== null &&
-    canCheckoutSubscriptionPlan({
-      selectedPlanId: payment.selectedPlanId,
-      vipPlans: vipOfferPlans,
-      confirmedVipPlanIds,
-    }) &&
-    !isPaymentBusy;
-  const pendingVipPlan =
-    vipOfferPlans.find((plan) => plan.id === pendingVipPlanId) ?? null;
 
   const handleSelectPlan = (planId: string) => {
     const plan = payment.plans.find((item) => item.planId === planId);
     if (plan) behaviorAnalytics.planClick(plan, analyticsContext);
-    if (
-      requiresVipPlanConfirmation({
-        planId,
-        vipPlans: vipOfferPlans,
-        confirmedVipPlanIds,
-      })
-    ) {
-      setPendingVipPlanId(planId);
-      return;
-    }
     paymentDispatch({ type: "PaymentPlanSelected", planId });
   };
 
-  const handleConfirmVipPlan = () => {
-    if (!pendingVipPlanId) return;
-    const planId = pendingVipPlanId;
-    setConfirmedVipPlanIds((current) => {
-      const next = new Set(current);
-      next.add(planId);
-      return next;
-    });
-    paymentDispatch({ type: "PaymentPlanSelected", planId });
-    setPendingVipPlanId(null);
-  };
-
   const handlePaymentMethodChange = (payChannel: PayChannel) => {
     paymentDispatch({
       type: "PaymentPayChannelChanged",
@@ -241,62 +176,35 @@ export function SubscriptionScreen({
   return (
     <MobileShell>
       <div className={styles.shell}>
-        <div className={styles.scrollArea}>
+        <header className={styles.header}>
-          <header className={styles.header}>
           <BackButton
             className={styles.backSlot}
             onClick={handleBackClick}
             variant="soft"
             analyticsKey="subscription.back"
           />
-          <button
+        </header>
-            type="button"
-            className={styles.paymentIssueButton}
-            onClick={() => {
-              setPaymentIssueNotice(null);
-              setShowPaymentIssueDialog(true);
-            }}
-          >
-            Payment issue?
-          </button>
-          </header>
 
-        {paymentIssueNotice ? (
+        {firstRechargeOffer ? (
-          <p className={styles.paymentIssueNotice} role="status">
-            {paymentIssueNotice}
-          </p>
-        ) : null}
-
-        {chatActionId && sourceCharacter ? (
-          <section
-            className={styles.characterSupportBanner}
-            aria-label={`Support ${sourceCharacter.displayName}`}
-            data-payment-guidance-character={sourceCharacter.id}
-          >
-            <h2>Keep talking with {sourceCharacter.shortName}</h2>
-            <p>
-              Without the required VIP access or credits, paid chat and locked
-              content cannot continue. Choosing an option here is a voluntary
-              way to support{" "}
-              {sourceCharacter.shortName}; it is never a test of your feelings.
-            </p>
-          </section>
-        ) : null}
-
-        {payment.commercialOffer && !hasFirstRechargeOffer && sourceCharacter ? (
           <section
             className={styles.firstRechargeBanner}
-            aria-label={`${sourceCharacter.shortName} private offer`}
+            aria-label="First recharge offer"
           >
-            <span className={styles.firstRechargeBadge}>Private offer</span>
+            <span className={styles.firstRechargeBadge}>
+              {firstRechargeOffer.badgeText}
+            </span>
             <div className={styles.firstRechargeCopy}>
               <h2 className={styles.firstRechargeTitle}>
-                {sourceCharacter.shortName} got this price for you
+                {firstRechargeOffer.title}
               </h2>
               <p className={styles.firstRechargeSubtitle}>
-                {payment.commercialOffer.message ||
+                {firstRechargeOffer.subtitle}
-                  `Your ${payment.commercialOffer.discountPercent}% discount is already applied below.`}
               </p>
+              {firstRechargeOffer.renewalNotice ? (
+                <p className={styles.firstRechargeRenewalNotice}>
+                  {firstRechargeOffer.renewalNotice}
+                </p>
+              ) : null}
             </div>
           </section>
         ) : null}
@@ -316,57 +224,58 @@ export function SubscriptionScreen({
           />
         </div>
 
-          <PaymentMethodSelector
+        <PaymentMethodSelector
-            config={renderedPaymentMethodConfig}
+          config={paymentMethodConfig}
-            value={payment.payChannel}
+          value={payment.payChannel}
-            disabled={payment.isCreatingOrder}
+          disabled={isPaymentBusy}
-            caption={
+          caption="GCash by default in the Philippines"
-              paymentMethodConfig.ezpayDisplayName === "QRIS"
+          className={styles.paymentMethodSlot}
-                ? "QRIS by default in Indonesia"
+          analyticsKey="subscription.payment_method"
-                : "GCash by default in the Philippines"
+          onChange={handlePaymentMethodChange}
-            }
+        />
-            className={styles.paymentMethodSlot}
-            analyticsKey="subscription.payment_method"
-            onChange={handlePaymentMethodChange}
-          />
-        </div>
 
         <div className={styles.ctaSlot}>
           <SubscriptionCheckoutButton
             disabled={!canActivate}
             subscriptionType={subscriptionType}
             returnTo={returnTo}
-            sourceCharacterSlug={sourceCharacter?.slug ?? DEFAULT_CHARACTER_SLUG}
+            sourceCharacterSlug={sourceCharacterSlug}
-            countryCode={countryCode}
           />
         </div>
 
-        <SubscriptionRenewalConfirmationDialog
+        <div className={styles.agreementSlot}>
-          open={pendingVipPlan !== null}
+          <Checkbox
-          plan={pendingVipPlan}
+            checked={payment.agreed}
-          onCancel={() => setPendingVipPlanId(null)}
+            onChange={(agreed) =>
-          onConfirm={handleConfirmVipPlan}
+              paymentDispatch({
-        />
+                type: "PaymentAgreementChanged",
-
+                agreed,
-        {showPaymentIssueDialog ? (
+              })
-          <SubscriptionPaymentIssueDialog
+            }
-            open
+            label={
-            subscriptionType={
+              <span className={styles.agreementLabel}>
-              selectedPlan
+                I agree to the{" "}
-                ? selectedPlanIsVip
+                <a
-                  ? "vip"
+                  href={AppConstants.membershipAgreementUrl}
-                  : "topup"
+                  target="_blank"
-                : subscriptionType
+                  rel="noreferrer"
+                  className={styles.agreementLink}
+                >
+                  VIP Membership Benefits Agreement
+                </a>{" "}
+                and{" "}
+                <a
+                  href={AppConstants.autoRenewalAgreementUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={styles.agreementLink}
+                >
+                  Automatic renewal Agreement
+                </a>
+              </span>
             }
-            planId={selectedPlan?.id ?? null}
-            orderId={payment.currentOrderId}
-            payChannel={payment.payChannel}
-            countryCode={countryCode}
-            characterId={sourceCharacter?.id ?? ""}
-            onClose={() => setShowPaymentIssueDialog(false)}
-            onSubmitted={setPaymentIssueNotice}
           />
-        ) : null}
+        </div>
 
         <SubscriptionPaymentSuccessDialog
           open={showPaymentSuccessDialog}