feat(payment): show account conversion discounts

fix(payment): route Philippine GCash separately from QRIS
revert(payment): remove unsupported Stripe and EzPay upgrade
2026-07-30 12:43:37 +08:00 · 2026-07-29 19:21:07 +08:00 · 2026-07-29 18:15:20 +08:00 · 2026-07-29 18:15:20 +08:00 · 2026-07-29 18:15:20 +08:00 · 2026-07-29 18:15:20 +08:00
70 changed files with 2420 additions and 1066 deletions
@@ -0,0 +1,138 @@
+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"
@@ -1,11 +1,11 @@
 # 外部入口接入说明

-外部应用通过 `/external-entry` 进入本应用。
+Facebook 等外部应用统一通过 `/external-entry` 进入本应用。入口先保存外部身份和短期业务意图，再跳转到对应角色页面并清理地址栏中的入口查询参数。

 | 环境 | APP HOST |
 | --- | --- |
-| 测试环境 | `frontend-test.banlv-ai.com` |
-| 正式环境 | `cozsweet.com` |
+| 预发环境 `pre` | `frontend-test.banlv-ai.com` |
+| 正式环境 `production` | `cozsweet.com` |

 入口格式：

@@ -13,85 +13,78 @@
 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` | 指定进入的页面；不传或值无效时进入聊天页。历史值 `private-room` 兼容进入 `private-zone`，新链接不得继续使用。 |
-| `character` | `elio`、`maya`、`nayeli` | 指定角色；不传或值无效时使用 Elio。 |
-| `psid` | string | 传入 Facebook Page-scoped User ID。 |
+| `target` | `chat`、`tip`、`private-zone` | 指定进入的页面；不传或值无效时进入聊天页。 |
+| `character` | `elio`、`maya`、`nayeli` | 指定角色；不传或值无效时使用 Elio。正式投放链接必须显式传入。 |
+| `psid` | string | Facebook Page-scoped User ID。Facebook 正式投放链接必须动态传入。 |
 | `mode` | `promotion` | 开启聊天促销模式。 |
 | `promotion_type` | `voice`、`image`、`private` | 指定促销消息类型，仅与 `mode=promotion` 一起使用。 |

-`mode=promotion` 只有在 `target=chat` 且同时提供有效的 `promotion_type` 时生效。
+`mode=promotion` 只有在 `target=chat` 且同时提供有效的 `promotion_type` 时生效。当前 12 条正式投放链接只使用 `promotion_type=voice`；`image` 和 `private` 保留为兼容能力，不属于本次业务清单。

-标准私密空间参数是 `target=private-zone`。前端仅为已经发布的旧链接保留 `target=private-room` 兼容；`private_zone` 等其他拼写仍按无效目标处理并回退聊天页。
+## 四类发送模板
+
+发送前必须把 `<CHARACTER>` 替换为角色值，把 `<PSID>` 替换为当前 Facebook 用户的真实 PSID；不得把占位符原样发送给用户。
+
+私密空间（普通聊天）：
+
+```text
+https://<APP_HOST>/external-entry?target=chat&character=<CHARACTER>&psid=<PSID>
+```
+
+语音：
+
+```text
+https://<APP_HOST>/external-entry?target=chat&character=<CHARACTER>&mode=promotion&promotion_type=voice&psid=<PSID>
+```
+
+图片包：
+
+```text
+https://<APP_HOST>/external-entry?target=private-zone&character=<CHARACTER>&psid=<PSID>
+```
+
+帮忙买咖啡：
+
+```text
+https://<APP_HOST>/external-entry?target=tip&character=<CHARACTER>&psid=<PSID>
+```

 ## PSID 与登录状态流程

-PSID 保存、登录状态判断和 Facebook Identity 绑定逻辑见 [PSID 与登录状态流程图](./psid-login-flow.md)。
+`psid` 可以和任意有效入口参数组合使用。应用会先保存 PSID，再执行登录状态判断和 Facebook Identity 绑定。详细流程见 [PSID 与登录状态流程图](./psid-login-flow.md)。

-## 使用示例
+所有参数值都必须进行 URL 编码。入口中禁止传递登录 Token、Page Access Token、App Secret 或其他秘密。

-普通聊天：
+## 兼容说明

-```text
-https://<APP_HOST>/external-entry?target=chat
-```
+- 历史参数 `target=private-room` 继续兼容进入 `private-zone`，但不得用于新投放链接。
+- `private_zone` 等其他拼写仍按无效目标处理并回退聊天页。
+- `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)
- [测试环境和正式环境链接清单](./links.md)
+- [Facebook 12 条外部入口链接清单](./links.md)
@@ -1,66 +1,52 @@
-# 外部入口链接清单
+# Facebook 12 条外部入口链接清单

-这份清单可以独立发送和直接点击。所有新链接统一使用标准参数 `target=private-zone`；历史参数 `target=private-room` 仅用于兼容已经发出的旧链接。
+本清单是 Facebook 正式投放的唯一业务链接清单，共 4 类入口乘以 3 个角色，合计 12 条模板。

-## 使用规则
+## 发送规则

- `target=chat`：进入聊天页。
- `target=tip`：进入对应角色的打赏页。
- `target=private-zone`：进入对应角色的私密空间。
- `character` 可使用 `elio`、`maya`、`nayeli`；不传或值无效时使用 Elio。
- `mode=promotion` 只在 `target=chat` 且 `promotion_type` 为 `voice`、`image` 或 `private` 时生效。
- PSID 示例统一使用 `27511427698460020`；不要在入口中放登录 Token、Page Access Token 或 App Secret。
+- 发送前必须把每条模板中的 `<PSID>` 替换为当前用户经过 URL 编码的 Facebook Page-scoped User ID；不得把占位符原样发送。
+- 每条链接都显式传入 `character`，不得依赖缺省角色回退。
+- Facebook 业务名称“私密空间”进入普通聊天页；业务名称“图片包”才进入应用的 `private-zone`。
+- 不要在入口中传递登录 Token、Page Access Token、App Secret 或其他秘密。
+- 以下模板包含占位符，替换真实 PSID 后才能直接发送或点击。

-## 测试环境
+## 正式投放模板

-| 入口 | 可点击链接 | 预期落地页面 |
-| --- | --- | --- |
-| 普通聊天（Elio） | [打开普通聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat) | `/characters/elio/chat` |
-| Maya 聊天 | [打开 Maya 聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat&character=maya) | `/characters/maya/chat` |
-| Nayeli 聊天 | [打开 Nayeli 聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat&character=nayeli) | `/characters/nayeli/chat` |
-| 携带 PSID 的 Elio 聊天 | [打开 PSID 聊天示例](https://frontend-test.banlv-ai.com/external-entry?target=chat&psid=27511427698460020) | `/characters/elio/chat` |
-| 语音促销 | [打开语音促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=voice) | `/characters/elio/chat`，保存语音促销意图 |
-| 图片促销 | [打开图片促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=image) | `/characters/elio/chat`，保存图片促销意图 |
-| 私密文本促销 | [打开私密文本促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=private) | `/characters/elio/chat`，保存私密文本促销意图 |
-| Elio 咖啡打赏 | [打开 Elio 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=elio) | `/characters/elio/tip` |
-| Maya 咖啡打赏 | [打开 Maya 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=maya) | `/characters/maya/tip` |
-| Nayeli 咖啡打赏 | [打开 Nayeli 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=nayeli) | `/characters/nayeli/tip` |
-| Elio 私密空间 | [打开 Elio 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=elio) | `/characters/elio/private-zone` |
-| Maya 私密空间 | [打开 Maya 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=maya) | `/characters/maya/private-zone` |
-| Nayeli 私密空间 | [打开 Nayeli 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=nayeli) | `/characters/nayeli/private-zone` |
+| 编号 | 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` |

-## 旧链接兼容验证
+## 预发验证

-以下链接仅用于验证已经发出的 `private-room` 旧链接仍能正确进入私密空间。新投放链接不要再使用这些地址。
+预发验证不维护第二套业务清单。将上述 12 条模板的主机统一替换为 `frontend-test.banlv-ai.com`，其余路径和参数保持不变：

-| 旧入口 | 可点击链接 | 预期落地页面 |
-| --- | --- | --- |
-| Elio 旧私密空间 | [验证 Elio 旧链接](https://frontend-test.banlv-ai.com/external-entry?target=private-room&character=elio) | `/characters/elio/private-zone` |
-| Maya 旧私密空间 | [验证 Maya 旧链接](https://frontend-test.banlv-ai.com/external-entry?target=private-room&character=maya) | `/characters/maya/private-zone` |
-| Nayeli 旧私密空间 | [验证 Nayeli 旧链接](https://frontend-test.banlv-ai.com/external-entry?target=private-room&character=nayeli) | `/characters/nayeli/private-zone` |
+```text
+https://frontend-test.banlv-ai.com/external-entry?<与正式模板相同的查询参数>
+```

-## 正式环境
-
-正式环境仅列标准链接，不再传播 `private-room` 旧参数。
-
-| 入口 | 可点击链接 | 预期落地页面 |
-| --- | --- | --- |
-| 普通聊天（Elio） | [打开普通聊天](https://cozsweet.com/external-entry?target=chat) | `/characters/elio/chat` |
-| Maya 聊天 | [打开 Maya 聊天](https://cozsweet.com/external-entry?target=chat&character=maya) | `/characters/maya/chat` |
-| Nayeli 聊天 | [打开 Nayeli 聊天](https://cozsweet.com/external-entry?target=chat&character=nayeli) | `/characters/nayeli/chat` |
-| 携带 PSID 的 Elio 聊天 | [打开 PSID 聊天示例](https://cozsweet.com/external-entry?target=chat&psid=27511427698460020) | `/characters/elio/chat` |
-| 语音促销 | [打开语音促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=voice) | `/characters/elio/chat`，保存语音促销意图 |
-| 图片促销 | [打开图片促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=image) | `/characters/elio/chat`，保存图片促销意图 |
-| 私密文本促销 | [打开私密文本促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=private) | `/characters/elio/chat`，保存私密文本促销意图 |
-| Elio 咖啡打赏 | [打开 Elio 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=elio) | `/characters/elio/tip` |
-| Maya 咖啡打赏 | [打开 Maya 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=maya) | `/characters/maya/tip` |
-| Nayeli 咖啡打赏 | [打开 Nayeli 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=nayeli) | `/characters/nayeli/tip` |
-| Elio 私密空间 | [打开 Elio 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=elio) | `/characters/elio/private-zone` |
-| Maya 私密空间 | [打开 Maya 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=maya) | `/characters/maya/private-zone` |
-| Nayeli 私密空间 | [打开 Nayeli 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=nayeli) | `/characters/nayeli/private-zone` |
+预发环境是 `pre`，不是正式环境。预发验证通过不代表已经更新 `cozsweet.com` 或获得生产发布批准。

 ## 验收判断

-打开入口后，浏览器地址最终应与“预期落地页面”一致。普通聊天和私密空间必须分别落在 `/chat` 与 `/private-zone`，不能再进入同一个页面。
+- 最终浏览器地址必须是表格中的预期页面，且不再保留 `/external-entry` 的查询参数。
+- `<PSID>` 替换后的真实值必须由应用保存。
+- “私密空间”只进入普通聊天，不得出现锁定语音、锁定图片或私密文本促销卡。
+- “语音”进入聊天后必须只注入一条锁定语音。
+- “图片包”和“帮忙买咖啡”必须分别进入对应角色的 `private-zone` 与 `tip`，不能串到其他角色。

-如需在其他入口携带 PSID，在已有查询参数的链接末尾追加 `&psid=27511427698460020`。
+## 不属于当前 12 条清单的兼容能力
+
+- 历史 `target=private-room` 继续兼容，但不得创建新的投放链接。
+- `promotion_type=image`、`promotion_type=private` 和独立 PSID 示例不属于当前正式业务清单。
+- 兼容能力的保留不改变本页“只有 12 条正式投放模板”的口径。
@@ -0,0 +1,201 @@
+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,
+          },
+        ],
+      }),
+    });
+  });
+}
@@ -85,11 +85,14 @@ async function registerIndonesiaPaymentMocks(page: Page) {
  });
  await page.route("**/api/payment/create-order", async (route) => {
    createOrderCount += 1;
-    const body = route.request().postDataJSON() as { planId: string };
+    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_qris_${body.planId}`;
+    const orderId = `order_${body.payChannel}_${body.planId}`;
    orderStatuses.set(orderId, "pending");
    orderPlans.set(orderId, {
      planId: body.planId,
@@ -98,15 +101,21 @@ async function registerIndonesiaPaymentMocks(page: Page) {
    await route.fulfill({
      json: apiEnvelope({
        orderId,
-        payParams: {
-          provider: "ezpay",
-          countryCode: "ID",
-          channelCode: "ID_QRIS_DYNAMIC_QR",
-          channelType: "QR",
-          payData: "00020101021226670016COM.NOBUBANK.WWW",
-          firstChargeAmountCents: plan?.amountCents ?? 0,
-          currency: "IDR",
-        },
+        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",
+              },
      }),
    });
  });
@@ -173,6 +182,7 @@ async function expectQrisOrder(
  expect(request.postDataJSON()).toMatchObject({
    planId,
    payChannel: "ezpay",
+    recipientCharacterId: "elio",
  });

  const dialog = page.getByRole("dialog", { name: "Scan to pay with QRIS" });
@@ -182,7 +192,7 @@ async function expectQrisOrder(
  await expect(
    dialog.getByRole("img", { name: "QRIS payment QR code" }),
  ).toBeVisible();
-  return `order_qris_${planId}`;
+  return `order_ezpay_${planId}`;
 }

 async function expectCheckoutButtonLayout(page: Page) {
@@ -209,7 +219,13 @@ test("Indonesia VIP defaults to QRIS and completes after status polling", async
 }) => {
  const payment = await registerIndonesiaPaymentMocks(page);
  await prepareIndonesiaUser(page);
-  await page.goto("/subscription?type=vip");
+  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",
@@ -250,7 +266,8 @@ test("Indonesia VIP defaults to QRIS and completes after status polling", async
 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");
+  await page.goto("/subscription?type=topup&character=elio");
+  await expect(page.getByText("Supporting Elio")).toHaveCount(0);
  await expectCheckoutButtonLayout(page);

  const orderId = await expectQrisOrder(
@@ -266,6 +283,74 @@ test("Indonesia credit top-up uses QRIS display cents", async ({ page }) => {
  ).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,
 }) => {
@@ -317,17 +402,21 @@ test("Indonesia gift checkout keeps IDR price through QRIS and thank-you flow",
  await page.goto("/characters/elio/tip");

  await expect(page.getByText(/IDR\s*89[.,]299/)).toBeVisible();
-  const orderId = await expectQrisOrder(
+  await expectQrisOrder(
    page,
    /Order and Buy/i,
    "tip_coffee_usd_4_99",
    /Rp\s*89[.,]299/,
  );
-  payment.markPaid(orderId);
+  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.getByText("Gift received")).toBeVisible({ timeout: 10_000 });
-  await expect(page.getByRole("button", { name: "Send another gift" })).toBeVisible();
-  await expect(
-    page.getByRole("dialog", { name: "Scan to pay with QRIS" }),
-  ).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);
 });
@@ -0,0 +1,153 @@
+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);
+});
@@ -0,0 +1,34 @@
+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/);
+});
@@ -0,0 +1,110 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+ARCHIVE="${1:-}"
+IMAGE="${2:-}"
+ENV_FILE="${3:-}"
+HOST_PORT="${4:-9135}"
+CONTAINER_NAME="cozsweet-frontend-domestic-test"
+INTERNAL_PORT="3000"
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+SERVICE_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+SHARED_ROOT="$SERVICE_ROOT/shared"
+RELEASE_ROOT="$SERVICE_ROOT/releases/docker"
+
+if [ -z "$ARCHIVE" ] || [ -z "$IMAGE" ] || [ -z "$ENV_FILE" ]; then
+  echo "Usage: $0 <image-archive> <image> <env-file> [host-port]" >&2
+  exit 64
+fi
+if [ "$HOST_PORT" != "9135" ]; then
+  echo "Domestic frontend test must use isolated host port 9135" >&2
+  exit 64
+fi
+case "$ENV_FILE" in
+  "$SHARED_ROOT"/*) ;;
+  *)
+    echo "Environment file must be stored under $SHARED_ROOT" >&2
+    exit 64
+    ;;
+esac
+if [ ! -s "$ARCHIVE" ] || [ ! -s "$ENV_FILE" ]; then
+  echo "Image archive or environment file is missing" >&2
+  exit 66
+fi
+
+mkdir -p "$RELEASE_ROOT"
+chmod 700 "$SHARED_ROOT"
+gzip -dc "$ARCHIVE" | docker load >/dev/null
+docker image inspect "$IMAGE" >/dev/null
+
+old_image_id=""
+old_image_ref=""
+if docker container inspect "$CONTAINER_NAME" >/dev/null 2>&1; then
+  old_image_id="$(docker inspect -f '{{.Image}}' "$CONTAINER_NAME")"
+  old_image_ref="$(docker inspect -f '{{.Config.Image}}' "$CONTAINER_NAME")"
+elif ss -ltnH "sport = :$HOST_PORT" 2>/dev/null | grep -q .; then
+  echo "Host port $HOST_PORT is already used by another service" >&2
+  exit 69
+fi
+
+run_container() {
+  local image_ref="$1"
+  docker run -d \
+    --name "$CONTAINER_NAME" \
+    --restart unless-stopped \
+    -p "127.0.0.1:$HOST_PORT:$INTERNAL_PORT" \
+    --env-file "$ENV_FILE" \
+    -e "PORT=$INTERNAL_PORT" \
+    "$image_ref" >/dev/null
+}
+
+wait_healthy() {
+  local deadline=$((SECONDS + 180))
+  while [ "$SECONDS" -le "$deadline" ]; do
+    state="$(docker inspect -f '{{if .State.Health}}{{.State.Health.Status}}{{else}}{{.State.Status}}{{end}}' "$CONTAINER_NAME" 2>/dev/null || true)"
+    status="$(curl -sS -o /dev/null -w '%{http_code}' "http://127.0.0.1:$HOST_PORT/" 2>/dev/null || true)"
+    if [[ "$status" =~ ^(200|204|301|302|303|307|308)$ ]] && { [ "$state" = "healthy" ] || [ "$state" = "running" ]; }; then
+      return 0
+    fi
+    sleep 2
+  done
+  return 1
+}
+
+docker rm -f "$CONTAINER_NAME" >/dev/null 2>&1 || true
+deployment_ok="1"
+if ! run_container "$IMAGE"; then
+  deployment_ok="0"
+elif ! wait_healthy; then
+  deployment_ok="0"
+fi
+
+if [ "$deployment_ok" != "1" ]; then
+  docker logs --tail 120 "$CONTAINER_NAME" >&2 || true
+  docker rm -f "$CONTAINER_NAME" >/dev/null 2>&1 || true
+  if [ -n "$old_image_id" ] && docker image inspect "$old_image_id" >/dev/null 2>&1; then
+    echo "New container failed health checks; restoring previous image" >&2
+    run_container "$old_image_id"
+    wait_healthy || true
+  fi
+  exit 1
+fi
+
+created_at="$(date -u +%Y-%m-%dT%H:%M:%SZ)"
+image_id="$(docker image inspect "$IMAGE" -f '{{.Id}}')"
+record="{\"createdAt\":\"$created_at\",\"environment\":\"domestic-test\",\"image\":\"$IMAGE\",\"imageId\":\"$image_id\",\"container\":\"$CONTAINER_NAME\",\"hostPort\":$HOST_PORT}"
+if [ -f "$RELEASE_ROOT/current.json" ]; then
+  cp "$RELEASE_ROOT/current.json" "$RELEASE_ROOT/previous.json"
+fi
+printf '%s\n' "$record" > "$RELEASE_ROOT/current.json"
+printf '%s\n' "$record" >> "$RELEASE_ROOT/releases.jsonl"
+
+echo "Domestic frontend test is healthy"
+echo "container=$CONTAINER_NAME"
+echo "host_port=$HOST_PORT"
+echo "image=$IMAGE"
+if [ -n "$old_image_ref" ]; then
+  echo "previous_image=$old_image_ref"
+fi
@@ -7,15 +7,15 @@ import { PaymentLaunchDialogs } from "../payment-launch-dialogs";
 const hiddenLaunch = {
  handleEzpayCancel: vi.fn(),
  handleEzpayConfirm: vi.fn(),
-  handleQrisClose: vi.fn(),
+  handleRegionalQrClose: vi.fn(),
  handleStripeClose: vi.fn(),
  handleStripeConfirmed: vi.fn(),
  isConfirmingEzpay: false,
-  qrisErrorMessage: null,
-  qrisPayment: null,
-  qrisStatus: null,
+  regionalQrErrorMessage: null,
+  regionalQrPayment: null,
+  regionalQrStatus: null,
  shouldShowEzpayConfirmDialog: false,
-  shouldShowQrisDialog: false,
+  shouldShowRegionalQrDialog: false,
  shouldShowStripeDialog: false,
  stripeClientSecret: null,
 };
@@ -96,14 +96,15 @@ describe("PaymentLaunchDialogs", () => {
          ezpayDescription="Scan QRIS to finish the payment."
          launch={{
            ...hiddenLaunch,
-            qrisPayment: {
+            regionalQrPayment: {
              qrData: "00020101021226670016COM.NOBUBANK.WWW",
              orderId: "order-id-qris",
              amountCents: 5_000_000,
              currency: "IDR",
+              experience: "qris",
            },
-            qrisStatus: "pending",
-            shouldShowQrisDialog: true,
+            regionalQrStatus: "pending",
+            shouldShowRegionalQrDialog: true,
          }}
        />,
      ),
@@ -122,6 +123,44 @@ describe("PaymentLaunchDialogs", () => {
    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(
@@ -131,15 +170,16 @@ describe("PaymentLaunchDialogs", () => {
          ezpayDescription="Scan QRIS to finish the payment."
          launch={{
            ...hiddenLaunch,
-            qrisErrorMessage: "Payment failed or was cancelled.",
-            qrisPayment: {
+            regionalQrErrorMessage: "Payment failed or was cancelled.",
+            regionalQrPayment: {
              qrData: "",
              orderId: "order-id-qris",
              amountCents: 5_000_000,
              currency: "IDR",
+              experience: "qris",
            },
-            qrisStatus: "failed",
-            shouldShowQrisDialog: true,
+            regionalQrStatus: "failed",
+            shouldShowRegionalQrDialog: true,
          }}
        />,
      ),
@@ -13,15 +13,15 @@ type PaymentLaunchDialogFlow = Pick<
  PaymentLaunchFlow,
  | "handleEzpayCancel"
  | "handleEzpayConfirm"
-  | "handleQrisClose"
+  | "handleRegionalQrClose"
  | "handleStripeClose"
  | "handleStripeConfirmed"
  | "isConfirmingEzpay"
-  | "qrisErrorMessage"
-  | "qrisPayment"
-  | "qrisStatus"
+  | "regionalQrErrorMessage"
+  | "regionalQrPayment"
+  | "regionalQrStatus"
  | "shouldShowEzpayConfirmDialog"
-  | "shouldShowQrisDialog"
+  | "shouldShowRegionalQrDialog"
  | "shouldShowStripeDialog"
  | "stripeClientSecret"
 >;
@@ -53,12 +53,12 @@ export function PaymentLaunchDialogs({
          onConfirm={launch.handleEzpayConfirm}
        />
      ) : null}
-      {launch.shouldShowQrisDialog && launch.qrisPayment ? (
-        <QrisPaymentDialog
-          payment={launch.qrisPayment}
-          status={launch.qrisStatus}
-          errorMessage={launch.qrisErrorMessage}
-          onClose={launch.handleQrisClose}
+      {launch.shouldShowRegionalQrDialog && launch.regionalQrPayment ? (
+        <RegionalQrPaymentDialog
+          payment={launch.regionalQrPayment}
+          status={launch.regionalQrStatus}
+          errorMessage={launch.regionalQrErrorMessage}
+          onClose={launch.handleRegionalQrClose}
        />
      ) : null}
      {launch.shouldShowStripeDialog && launch.stripeClientSecret ? (
@@ -73,43 +73,56 @@ export function PaymentLaunchDialogs({
  );
 }

-interface QrisPaymentDialogProps {
+interface RegionalQrPaymentDialogProps {
  errorMessage: string | null;
  onClose: () => void;
-  payment: NonNullable<PaymentLaunchFlow["qrisPayment"]>;
-  status: PaymentLaunchFlow["qrisStatus"];
+  payment: NonNullable<PaymentLaunchFlow["regionalQrPayment"]>;
+  status: PaymentLaunchFlow["regionalQrStatus"];
 }

-function formatQrisAmount(amountCents: number, currency: string): string {
+function formatRegionalQrAmount(amountCents: number, currency: string): string {
  const normalizedCurrency = currency.trim().toUpperCase() || "IDR";
  try {
-    return new Intl.NumberFormat("id-ID", {
-      style: "currency",
-      currency: normalizedCurrency,
-      maximumFractionDigits: normalizedCurrency === "IDR" ? 0 : 2,
-    }).format(amountCents / 100);
+    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 qrisStatusMessage(
-  status: PaymentLaunchFlow["qrisStatus"],
+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 QRIS order has expired.";
+  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 QrisPaymentDialog({
+function RegionalQrPaymentDialog({
  errorMessage,
  onClose,
  payment,
  status,
-}: QrisPaymentDialogProps) {
+}: RegionalQrPaymentDialogProps) {
  const titleId = useId();
-  const statusMessage = qrisStatusMessage(status, errorMessage);
+  const copy = regionalQrCopy(payment.experience);
+  const statusMessage = regionalQrStatusMessage(
+    status,
+    errorMessage,
+    copy.paymentName,
+  );

  return (
    <ModalPortal
@@ -123,17 +136,17 @@ function QrisPaymentDialog({
    >
      <div className={`${styles.header} text-center`}>
        <h2 id={titleId} className={styles.title}>
-          Scan to pay with QRIS
+          {copy.title}
        </h2>
        <p className={styles.content}>
-          Open a QRIS-compatible banking or wallet app and scan this code.
+          {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="QRIS payment QR code"
+            title={copy.qrTitle}
            size={256}
            level="M"
            marginSize={2}
@@ -141,14 +154,14 @@ function QrisPaymentDialog({
          />
        ) : (
          <p className={styles.error} role="alert">
-            QRIS data is unavailable. Please close this dialog and try again.
+            {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">
-          {formatQrisAmount(payment.amountCents, payment.currency)}
+          {formatRegionalQrAmount(payment.amountCents, payment.currency)}
        </p>
        <p
          className={status === "failed" || status === "expired" ? styles.error : styles.content}
@@ -170,6 +183,41 @@ function QrisPaymentDialog({
  );
 }

+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;
@@ -4,6 +4,7 @@ import { type Dispatch, useEffect, useRef, useState } from "react";

 import {
  getPaymentUrl,
+  getPaymentUrlHostname,
  getStripeClientSecret,
  isEzpayPayment,
  launchEzpayRedirect,
@@ -41,29 +42,31 @@ export interface UsePaymentLaunchFlowInput {
  subscriptionType: PendingPaymentSubscriptionType;
  giftCategory?: string | null;
  giftPlanId?: string | null;
+  countryCode?: string | null;
 }

 export interface PaymentLaunchFlow {
  ezpayPaymentUrl: string | null;
  handleEzpayCancel: () => void;
  handleEzpayConfirm: () => void;
-  handleQrisClose: () => void;
+  handleRegionalQrClose: () => void;
  handleStripeClose: () => void;
  handleStripeConfirmed: () => void;
  isConfirmingEzpay: boolean;
-  qrisErrorMessage: string | null;
-  qrisPayment: QrisPaymentDetails | null;
-  qrisStatus: PaymentContextState["orderStatus"];
+  regionalQrErrorMessage: string | null;
+  regionalQrPayment: RegionalQrPaymentDetails | null;
+  regionalQrStatus: PaymentContextState["orderStatus"];
  resetLaunchState: () => void;
  shouldShowEzpayConfirmDialog: boolean;
-  shouldShowQrisDialog: boolean;
+  shouldShowRegionalQrDialog: boolean;
  shouldShowStripeDialog: boolean;
  stripeClientSecret: string | null;
 }

-export interface QrisPaymentDetails {
+export interface RegionalQrPaymentDetails {
  amountCents: number;
  currency: string;
+  experience: "gcashQrPh" | "qris" | "paymentQr";
  orderId: string;
  qrData: string;
 }
@@ -153,30 +156,36 @@ export function usePaymentLaunchFlow({
  subscriptionType,
  giftCategory,
  giftPlanId,
+  countryCode,
 }: UsePaymentLaunchFlowInput): PaymentLaunchFlow {
  const launchedNonceRef = useRef(0);
  const [hiddenStripeClientSecret, setHiddenStripeClientSecret] = useState<
    string | null
  >(null);
  const [isConfirmingEzpay, setIsConfirmingEzpay] = useState(false);
-  const [hiddenQrisOrderId, setHiddenQrisOrderId] = useState<string | null>(
-    null,
-  );
  const stripeClientSecret = payment.payParams
    ? getStripeClientSecret(payment.payParams)
    : null;
+  const selectedPlan = payment.plans.find(
+    (item) => item.planId === payment.selectedPlanId,
+  );
+  const paymentCurrency = payment.payParams
+    ? paymentParamString(payment.payParams, "currency") ??
+      selectedPlan?.currency ??
+      null
+    : selectedPlan?.currency ?? null;
  const ezpayLaunchTarget =
    payment.payParams && isEzpayPayment(payment.payParams)
-      ? resolveEzpayLaunchTarget(payment.payParams)
+      ? resolveEzpayLaunchTarget(payment.payParams, {
+          countryCode,
+          currency: paymentCurrency,
+        })
      : null;
  const ezpayPaymentUrl =
    ezpayLaunchTarget?.kind === "url"
      ? ezpayLaunchTarget.paymentUrl
      : null;
-  const selectedPlan = payment.plans.find(
-    (item) => item.planId === payment.selectedPlanId,
-  );
-  const qrisPayment: QrisPaymentDetails | null =
+  const regionalQrPayment: RegionalQrPaymentDetails | null =
    payment.payParams &&
    payment.currentOrderId &&
    ezpayLaunchTarget?.kind === "qr"
@@ -186,9 +195,9 @@ export function usePaymentLaunchFlow({
            selectedPlan?.amountCents ??
            0,
          currency:
-            paymentParamString(payment.payParams, "currency") ??
-            selectedPlan?.currency ??
-            "IDR",
+            paymentCurrency ??
+            (ezpayLaunchTarget.experience === "gcashQrPh" ? "PHP" : "IDR"),
+          experience: ezpayLaunchTarget.experience,
          orderId: payment.currentOrderId,
          qrData: ezpayLaunchTarget.qrData,
        }
@@ -207,7 +216,33 @@ export function usePaymentLaunchFlow({

    const isEzpay = isEzpayPayment(payment.payParams);
    if (isEzpay) {
-      const target = resolveEzpayLaunchTarget(payment.payParams);
+      const target = resolveEzpayLaunchTarget(payment.payParams, {
+        countryCode,
+        currency: paymentCurrency,
+      });
+      const channelType = paymentParamString(
+        payment.payParams,
+        "channelType",
+        "channel_type",
+      );
+      const channelCode = paymentParamString(
+        payment.payParams,
+        "channelCode",
+        "channel_code",
+      );
+      const namedPaymentUrl = getPaymentUrl(payment.payParams);
+      log.debug(`[${logScope}] ezpay launch target resolved`, {
+        countryCode: countryCode?.trim().toUpperCase() ?? null,
+        currency: paymentCurrency?.trim().toUpperCase() ?? null,
+        channelType: channelType?.toUpperCase() ?? null,
+        channelCode,
+        hasCashierUrl: getPaymentUrlHostname(namedPaymentUrl) !== null,
+        hasQrData: target.kind === "qr",
+        paymentUrlHost:
+          target.kind === "url"
+            ? getPaymentUrlHostname(target.paymentUrl)
+            : null,
+      });
      if (target.kind === "error") {
        trackPaymentCheckoutFailed(payment, "missing_checkout_url");
        paymentDispatch({
@@ -222,11 +257,18 @@ export function usePaymentLaunchFlow({
          trackPaymentCheckoutFailed(payment, "missing_checkout_url");
          paymentDispatch({
            type: "PaymentLaunchFailed",
-            errorMessage: "Missing order id before showing QRIS.",
+            errorMessage: "Missing order id before showing payment QR code.",
          });
          return;
        }
-        trackPaymentCheckoutOpened(payment, "qris_embedded");
+        trackPaymentCheckoutOpened(
+          payment,
+          target.experience === "qris"
+            ? "qris_embedded"
+            : target.experience === "gcashQrPh"
+              ? "gcash_qrph_embedded"
+              : "payment_qr_embedded",
+        );
        return;
      }

@@ -234,7 +276,7 @@ export function usePaymentLaunchFlow({
      if (!AppEnvUtil.isProduction()) {
        log.debug(`[${logScope}] ezpay confirmation required`, {
          orderId: payment.currentOrderId,
-          paymentUrl,
+          paymentUrlHost: getPaymentUrlHostname(paymentUrl),
          subscriptionType,
        });
        return;
@@ -260,7 +302,7 @@ export function usePaymentLaunchFlow({
    const paymentUrl = getPaymentUrl(payment.payParams);
    if (paymentUrl) {
      try {
-        window.location.href = paymentUrl;
+        window.location.assign(paymentUrl);
        trackPaymentCheckoutOpened(payment, paymentUrl);
      } catch {
        trackPaymentCheckoutFailed(payment, "payment_redirect_failed");
@@ -281,6 +323,7 @@ export function usePaymentLaunchFlow({
    log,
    logScope,
    characterSlug,
+    countryCode,
    payment.currentOrderId,
    payment,
    payment.launchNonce,
@@ -289,6 +332,7 @@ export function usePaymentLaunchFlow({
    payment.plans,
    payment.selectedPlanId,
    paymentDispatch,
+    paymentCurrency,
    returnTo,
    subscriptionType,
    giftCategory,
@@ -305,16 +349,13 @@ export function usePaymentLaunchFlow({
    payParams: payment.payParams,
    paymentUrl: ezpayPaymentUrl,
  });
-  const shouldShowQrisDialog = Boolean(
-    qrisPayment &&
-      qrisPayment.orderId !== hiddenQrisOrderId &&
-      !payment.isPaid,
+  const shouldShowRegionalQrDialog = Boolean(
+    regionalQrPayment && !payment.isPaid,
  );

  function resetLaunchState(): void {
    setIsConfirmingEzpay(false);
    setHiddenStripeClientSecret(null);
-    setHiddenQrisOrderId(null);
  }

  function handleStripeClose(): void {
@@ -361,28 +402,29 @@ export function usePaymentLaunchFlow({
    paymentDispatch({ type: "PaymentReset" });
  }

-  function handleQrisClose(): void {
-    log.debug(`[${logScope}] qris dialog closed`, {
-      orderId: qrisPayment?.orderId ?? payment.currentOrderId,
+  function handleRegionalQrClose(): void {
+    log.debug(`[${logScope}] regional payment QR dialog closed`, {
+      orderId: regionalQrPayment?.orderId ?? payment.currentOrderId,
+      experience: regionalQrPayment?.experience ?? null,
      subscriptionType,
    });
-    setHiddenQrisOrderId(qrisPayment?.orderId ?? payment.currentOrderId);
+    paymentDispatch({ type: "PaymentReset" });
  }

  return {
    ezpayPaymentUrl,
    handleEzpayCancel,
    handleEzpayConfirm,
-    handleQrisClose,
+    handleRegionalQrClose,
    handleStripeClose,
    handleStripeConfirmed,
    isConfirmingEzpay,
-    qrisErrorMessage: payment.errorMessage,
-    qrisPayment,
-    qrisStatus: payment.orderStatus,
+    regionalQrErrorMessage: payment.errorMessage,
+    regionalQrPayment,
+    regionalQrStatus: payment.orderStatus,
    resetLaunchState,
    shouldShowEzpayConfirmDialog,
-    shouldShowQrisDialog,
+    shouldShowRegionalQrDialog,
    shouldShowStripeDialog,
    stripeClientSecret,
  };
@@ -0,0 +1,118 @@
+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("never invents a first-recharge discount and shows the active account offer", () => {
+    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: "commercialOffer",
+      label: "Support me · 30% OFF · 23:59:59",
+      commercialOfferId: "offer-1",
+      expiresAt: "2026-07-29T00:00:00.000Z",
+    });
+  });
+
+  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: true,
+        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");
+  });
+
+  it("shows the final 50% account offer with the same countdown", () => {
+    expect(
+      deriveChatSupportCta({
+        isFirstRecharge: false,
+        commercialOffer: {
+          enabled: true,
+          commercialOfferId: "offer-2",
+          characterId: "elio",
+          planId: "dol_2500_t3",
+          discountPercent: 50,
+          pricePercent: 50,
+          expiresAt: "2026-07-29T00:00:00.000Z",
+          triggerReason: "expired_order",
+          message: "This is the last offer.",
+          scope: "account",
+          stage: "halfDiscount",
+        },
+        nowMs: now,
+      }),
+    ).toMatchObject({
+      kind: "commercialOffer",
+      label: "Support me · 50% OFF · 23:59:59",
+      commercialOfferId: "offer-2",
+    });
+  });
+});
@@ -33,8 +33,8 @@ import {
  ChatHeader,
  ChatInputBar,
  ChatInsufficientCreditsBanner,
+  ChatSupportButton,
  ChatUnlockDialogs,
-  FirstRechargeOfferBanner,
  FullscreenImageViewer,
  PwaInstallOverlay,
 } from "./components";
@@ -46,7 +46,8 @@ import {
 import {
  deriveIsGuest,
 } from "./chat-screen.helpers";
-import { useFirstRechargeOfferBanner } from "./hooks/use-first-recharge-offer-banner";
+import { useChatSupportCta } from "./hooks/use-chat-support-cta";
+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";
@@ -130,10 +131,15 @@ export function ChatScreen() {
    upgradeReason: state.upgradeReason,
    paymentGuidance: state.paymentGuidance,
  });
-  const firstRechargeOfferBanner = useFirstRechargeOfferBanner({
+  const supportCta = useChatSupportCta({
+    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({
@@ -422,13 +428,13 @@ export function ChatScreen() {
          <ChatHeader
            isGuest={isGuest}
            offerBanner={
-              <FirstRechargeOfferBanner
-                visible={firstRechargeOfferBanner.visible}
-                discountPercent={firstRechargeOfferBanner.discountPercent}
-                onClick={firstRechargeOfferBanner.claim}
-                onClose={firstRechargeOfferBanner.close}
-                variant="compact"
-              />
+              supportCta.visible ? (
+                <ChatSupportButton
+                  kind={supportCta.kind}
+                  label={supportCta.label}
+                  onClick={supportCta.open}
+                />
+              ) : null
            }
          />

@@ -0,0 +1,52 @@
+import type { CommercialOfferSummary } from "@/data/schemas/payment";
+
+export type ChatSupportCtaKind =
+  | "support"
+  | "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 {
+  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(":");
+}
@@ -0,0 +1,32 @@
+"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>
+  );
+}
@@ -1,223 +0,0 @@
-.banner {
-  position: relative;
-  flex: 0 0 auto;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: stretch;
-  margin:
-    clamp(5px, 1.111vw, 6px)
-    var(--chat-inline-padding, 16px)
-    clamp(8px, 1.852vw, 10px);
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.34);
-  border-radius: var(--responsive-card-radius-sm, 22px);
-  background:
-    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
-    linear-gradient(135deg, #fff0b8 0%, #ffd1df 45%, #ff61a7 100%);
-  box-shadow: 0 14px 34px rgba(114, 21, 63, 0.22);
-  color: #2c111d;
-  animation: firstRechargeBannerIn 260ms ease-out both;
-}
-
-.banner::after {
-  position: absolute;
-  right: clamp(-34px, -6.296vw, -28px);
-  bottom: clamp(-52px, -9.63vw, -42px);
-  width: clamp(104px, 23.333vw, 126px);
-  height: clamp(104px, 23.333vw, 126px);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.22);
-  content: "";
-  pointer-events: none;
-}
-
-.contentButton {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  gap: clamp(8px, 1.852vw, 10px);
-  align-items: center;
-  min-width: 0;
-  padding:
-    clamp(10px, 2.222vw, 12px)
-    clamp(7px, 1.481vw, 8px)
-    clamp(10px, 2.222vw, 12px)
-    clamp(12px, 2.593vw, 14px);
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-
-.iconWrap {
-  display: inline-flex;
-  width: clamp(30px, 6.296vw, 34px);
-  height: clamp(30px, 6.296vw, 34px);
-  align-items: center;
-  justify-content: center;
-  border-radius: clamp(12px, 2.593vw, 14px);
-  background: rgba(255, 255, 255, 0.52);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
-}
-
-.icon {
-  color: #fb2f89;
-}
-
-.copy {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.eyebrow {
-  color: rgba(44, 17, 29, 0.74);
-  font-size: var(--responsive-micro, 11px);
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.title {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  gap: var(--responsive-inline-gap-xs, 5px);
-  align-items: baseline;
-  color: #241019;
-  font-size: var(--responsive-caption, 13px);
-  font-weight: 750;
-  line-height: 1.18;
-}
-
-.title strong {
-  color: #f90073;
-  font-size: var(--responsive-section-title, 20px);
-  font-weight: 950;
-  letter-spacing: -0.04em;
-  line-height: 1;
-}
-
-.arrow {
-  color: rgba(44, 17, 29, 0.58);
-}
-
-.closeButton {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  width: var(--responsive-icon-button-size, 42px);
-  min-height: 100%;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-left: 1px solid rgba(255, 255, 255, 0.26);
-  background: rgba(255, 255, 255, 0.16);
-  color: rgba(44, 17, 29, 0.68);
-  cursor: pointer;
-}
-
-.compactButton {
-  display: grid;
-  width: min(100%, 240px);
-  min-width: 0;
-  max-width: 240px;
-  min-height: 50px;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 10px;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.42);
-  border-radius: 16px;
-  background:
-    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.68), transparent 38%),
-    linear-gradient(135deg, #fff0b8 0%, #ffd0df 50%, #ff6cab 100%);
-  color: #2c111d;
-  cursor: pointer;
-  font: inherit;
-  text-align: left;
-  box-shadow: 0 9px 24px rgba(114, 21, 63, 0.2);
-  animation: firstRechargeBannerIn 260ms ease-out both;
-}
-
-.compactIcon {
-  display: inline-flex;
-  width: 32px;
-  height: 32px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.55);
-  color: #f90073;
-}
-
-.compactCopy {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 2px;
-  font-size: 11px;
-  font-weight: 800;
-  line-height: 1.05;
-  text-transform: uppercase;
-}
-
-.compactCopy span,
-.compactCopy strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.compactCopy span {
-  color: rgba(44, 17, 29, 0.68);
-  letter-spacing: 0.03em;
-}
-
-.compactCopy strong {
-  color: #ec006d;
-  font-size: 17px;
-  font-weight: 950;
-  letter-spacing: -0.02em;
-}
-
-.contentButton:focus-visible,
-.closeButton:focus-visible,
-.compactButton:focus-visible {
-  outline: 2px solid rgba(255, 255, 255, 0.94);
-  outline-offset: -3px;
-}
-
-@keyframes firstRechargeBannerIn {
-  from {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.98);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@media (max-width: 360px) {
-  .title {
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .compactButton {
-    gap: 5px;
-    padding-inline: 6px;
-  }
-
-  .compactIcon {
-    width: 26px;
-    height: 26px;
-  }
-}
@@ -1,78 +0,0 @@
-"use client";
-
-import { ChevronRight, Sparkles, X } from "lucide-react";
-
-import styles from "./first-recharge-offer-banner.module.css";
-
-export interface FirstRechargeOfferBannerProps {
-  visible: boolean;
-  discountPercent: number;
-  onClick: () => void;
-  onClose: () => void;
-  variant?: "banner" | "compact";
-}
-
-export function FirstRechargeOfferBanner({
-  visible,
-  discountPercent,
-  onClick,
-  onClose,
-  variant = "banner",
-}: FirstRechargeOfferBannerProps) {
-  if (!visible) return null;
-
-  if (variant === "compact") {
-    return (
-      <button
-        type="button"
-        data-analytics-key="chat.first_recharge_offer"
-        data-analytics-label="Open first recharge offer"
-        className={styles.compactButton}
-        aria-label={`First recharge offer, ${discountPercent}% off`}
-        onClick={onClick}
-      >
-        <span className={styles.compactIcon} aria-hidden="true">
-          <Sparkles size={14} strokeWidth={2.4} />
-        </span>
-        <span className={styles.compactCopy}>
-          <span>First recharge</span>
-          <strong>{discountPercent}% OFF</strong>
-        </span>
-        <ChevronRight size={14} strokeWidth={2.4} aria-hidden="true" />
-      </button>
-    );
-  }
-
-  return (
-    <section className={styles.banner} aria-label="First recharge offer">
-      <button
-        type="button"
-        data-analytics-key="chat.first_recharge_offer"
-        data-analytics-label="Open first recharge offer"
-        className={styles.contentButton}
-        onClick={onClick}
-      >
-        <span className={styles.iconWrap} aria-hidden="true">
-          <Sparkles className={styles.icon} size={18} />
-        </span>
-        <span className={styles.copy}>
-          <span className={styles.eyebrow}>First Recharge Offer</span>
-          <span className={styles.title}>
-            <strong>{discountPercent}% OFF</strong>
-            <span>Claim your discount now</span>
-          </span>
-        </span>
-        <ChevronRight className={styles.arrow} size={18} aria-hidden="true" />
-      </button>
-
-      <button
-        type="button"
-        className={styles.closeButton}
-        onClick={onClose}
-        aria-label="Hide first recharge offer"
-      >
-        <X size={16} aria-hidden="true" />
-      </button>
-    </section>
-  );
-}
@@ -12,9 +12,9 @@ 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";
 export * from "./fullscreen-image-viewer";
 export * from "./history-unlock-dialog";
 export * from "./image-bubble";
@@ -4,6 +4,7 @@ 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";
@@ -15,6 +16,18 @@ 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();
@@ -91,7 +104,7 @@ export function PaymentGuidanceCard({ guidance }: PaymentGuidanceCardProps) {
              chatActionId: guidance.guidanceId,
              analytics: {
                entryPoint: "chat_input",
-                triggerReason: "insufficient_credits",
+                triggerReason: triggerReasonForGuidance(guidance.scene),
              },
            });
          }}
@@ -1,60 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { shouldShowFirstRechargeOfferBanner } from "../use-first-recharge-offer-banner";
-
-describe("shouldShowFirstRechargeOfferBanner", () => {
-  it("shows for authenticated users when first recharge offer is available", () => {
-    expect(
-      shouldShowFirstRechargeOfferBanner({
-        historyLoaded: true,
-        loginStatus: "facebook",
-        isFirstRecharge: true,
-        dismissed: false,
-      }),
-    ).toBe(true);
-  });
-
-  it("does not show for guest users", () => {
-    expect(
-      shouldShowFirstRechargeOfferBanner({
-        historyLoaded: true,
-        loginStatus: "guest",
-        isFirstRecharge: true,
-        dismissed: false,
-      }),
-    ).toBe(false);
-  });
-
-  it("does not show unless isFirstRecharge is true", () => {
-    expect(
-      shouldShowFirstRechargeOfferBanner({
-        historyLoaded: true,
-        loginStatus: "google",
-        isFirstRecharge: false,
-        dismissed: false,
-      }),
-    ).toBe(false);
-  });
-
-  it("does not show after the user dismisses it", () => {
-    expect(
-      shouldShowFirstRechargeOfferBanner({
-        historyLoaded: true,
-        loginStatus: "email",
-        isFirstRecharge: true,
-        dismissed: true,
-      }),
-    ).toBe(false);
-  });
-
-  it("waits until chat history has loaded", () => {
-    expect(
-      shouldShowFirstRechargeOfferBanner({
-        historyLoaded: false,
-        loginStatus: "email",
-        isFirstRecharge: true,
-        dismissed: false,
-      }),
-    ).toBe(false);
-  });
-});
@@ -0,0 +1,44 @@
+"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";
+import { usePaymentDispatch } from "@/stores/payment/payment-context";
+
+export function useChatCommercialMessages(input: {
+  characterId: string;
+  loginStatus: LoginStatus;
+}) {
+  const chatDispatch = useChatDispatch();
+  const paymentDispatch = usePaymentDispatch();
+
+  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) => {
+        paymentDispatch({
+          type: "PaymentInit",
+          characterId: input.characterId,
+        });
+        if (message.characterId !== input.characterId) return;
+        chatDispatch({ type: "ChatCommercialMessageReceived", message });
+      };
+      socket.connect();
+    });
+
+    return () => {
+      disposed = true;
+      socket?.disconnect();
+    };
+  }, [chatDispatch, input.characterId, input.loginStatus, paymentDispatch]);
+}
@@ -0,0 +1,124 @@
+"use client";
+
+import { useCallback, 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";
+  const refreshCatalog = useCallback(() => {
+    paymentDispatch({
+      type: "PaymentInit",
+      characterId: input.characterId,
+      payChannel: getDefaultPayChannelForCountryCode(countryCode),
+    });
+  }, [countryCode, input.characterId, paymentDispatch]);
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    if (initializedCharacterRef.current === input.characterId) return;
+    initializedCharacterRef.current = input.characterId;
+    refreshCatalog();
+  }, [input.characterId, isAuthenticated, refreshCatalog]);
+
+  useEffect(() => {
+    if (!payment.commercialOffer) return;
+    const timer = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, [payment.commercialOffer]);
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") refreshCatalog();
+    };
+    window.addEventListener("focus", refreshCatalog);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      window.removeEventListener("focus", refreshCatalog);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [isAuthenticated, refreshCatalog]);
+
+  useEffect(() => {
+    if (!isAuthenticated || !payment.commercialOffer) return;
+    const expiresAtMs = Date.parse(payment.commercialOffer.expiresAt);
+    if (!Number.isFinite(expiresAtMs)) return;
+    const timer = window.setTimeout(() => {
+      setNowMs(Date.now());
+      refreshCatalog();
+    }, Math.max(0, expiresAtMs - Date.now()) + 250);
+    return () => window.clearTimeout(timer);
+  }, [isAuthenticated, payment.commercialOffer, refreshCatalog]);
+
+  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 };
+}
@@ -1,161 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { shallowEqual } from "@xstate/react";
-
-import type { LoginStatus } from "@/data/schemas/auth";
-import { useAppNavigator } from "@/router/use-app-navigator";
-import {
-  usePaymentDispatch,
-  usePaymentSelector,
-} from "@/stores/payment/payment-context";
-import { useUserSelector } from "@/stores/user/user-context";
-import { getDefaultPayChannelForCountryCode } from "@/lib/payment/default_pay_channel";
-import {
-  getFirstRechargeOfferBannerDismissed,
-  recordFirstRechargeOfferBannerDismissed,
-} from "@/lib/chat/first_recharge_offer_banner";
-
-export interface FirstRechargeOfferBannerEligibility {
-  historyLoaded: boolean;
-  loginStatus: LoginStatus;
-  isFirstRecharge: boolean;
-  dismissed: boolean;
-}
-
-export interface UseFirstRechargeOfferBannerInput {
-  historyLoaded: boolean;
-  loginStatus: LoginStatus;
-}
-
-export interface UseFirstRechargeOfferBannerOutput {
-  visible: boolean;
-  discountPercent: number;
-  close: () => void;
-  claim: () => void;
-}
-
-interface DismissalState {
-  userId: string | null;
-  loaded: boolean;
-  dismissed: boolean;
-}
-
-const FIRST_RECHARGE_DEFAULT_DISCOUNT_PERCENT = 50;
-
-export function shouldShowFirstRechargeOfferBanner(
-  input: FirstRechargeOfferBannerEligibility,
-): boolean {
-  if (!input.historyLoaded) return false;
-  if (input.loginStatus === "notLoggedIn" || input.loginStatus === "guest") {
-    return false;
-  }
-  if (!input.isFirstRecharge) return false;
-  return !input.dismissed;
-}
-
-export function useFirstRechargeOfferBanner({
-  historyLoaded,
-  loginStatus,
-}: UseFirstRechargeOfferBannerInput): UseFirstRechargeOfferBannerOutput {
-  const navigator = useAppNavigator();
-  const payment = usePaymentSelector(
-    (state) => ({
-      isFirstRecharge: state.context.isFirstRecharge,
-      status: String(state.value),
-    }),
-    shallowEqual,
-  );
-  const paymentDispatch = usePaymentDispatch();
-  const user = useUserSelector(
-    (state) => ({
-      countryCode: state.context.currentUser?.countryCode,
-      id: state.context.currentUser?.id ?? null,
-    }),
-    shallowEqual,
-  );
-  const isAuthenticatedUser =
-    loginStatus !== "notLoggedIn" && loginStatus !== "guest";
-  const userId = user.id;
-  const hasUserIdentity = !isAuthenticatedUser || Boolean(userId);
-  const [dismissalState, setDismissalState] = useState<DismissalState>(() => ({
-    userId,
-    loaded: false,
-    dismissed: false,
-  }));
-  const discountPercent = FIRST_RECHARGE_DEFAULT_DISCOUNT_PERCENT;
-
-  useEffect(() => {
-    if (!isAuthenticatedUser) return;
-    if (payment.status !== "idle") return;
-    const defaultPayChannel = getDefaultPayChannelForCountryCode(
-      user.countryCode,
-    );
-    paymentDispatch({ type: "PaymentInit", payChannel: defaultPayChannel });
-  }, [
-    payment.status,
-    paymentDispatch,
-    isAuthenticatedUser,
-    user.countryCode,
-  ]);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const loadDismissal = async () => {
-      const dismissed = await getFirstRechargeOfferBannerDismissed(userId);
-      if (cancelled) return;
-
-      setDismissalState({
-        userId,
-        loaded: true,
-        dismissed,
-      });
-    };
-
-    void loadDismissal();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [userId]);
-
-  const dismissalLoaded =
-    dismissalState.userId === userId && dismissalState.loaded;
-  const visible =
-    hasUserIdentity &&
-    dismissalLoaded &&
-    shouldShowFirstRechargeOfferBanner({
-      historyLoaded,
-      loginStatus,
-      isFirstRecharge: payment.isFirstRecharge,
-      dismissed: dismissalState.dismissed,
-    });
-
-  function close(): void {
-    setDismissalState({
-      userId,
-      loaded: true,
-      dismissed: true,
-    });
-    void recordFirstRechargeOfferBannerDismissed(userId);
-  }
-
-  function claim(): void {
-    navigator.openSubscription({
-      type: "vip",
-      returnTo: "chat",
-      analytics: {
-        entryPoint: "chat_offer_banner",
-        triggerReason: "vip_cta",
-      },
-    });
-  }
-
-  return {
-    visible,
-    discountPercent,
-    close,
-    claim,
-  };
-}
@@ -189,6 +189,7 @@ export default function ExternalEntryPersist({
    authState.hasInitialized,
    authState.isLoading,
    authState.loginStatus,
+    character,
    destination,
    hasPersisted,
    handoffCompleted,
@@ -34,14 +34,14 @@ describe("SubscriptionPage", () => {
    );
  });

-  it("uses Elio for missing source navigation context", async () => {
+  it("keeps the recipient empty when source navigation has no character", async () => {
    const page = await SubscriptionPage({
      searchParams: Promise.resolve({}),
    });

    renderToStaticMarkup(page);
    expect(mocks.screenProps).toHaveBeenLastCalledWith(
-      expect.objectContaining({ sourceCharacterSlug: "elio" }),
+      expect.objectContaining({ sourceCharacterSlug: null }),
    );
  });
 });
@@ -1,8 +1,19 @@
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { CommercialOfferSummary } from "@/data/schemas/payment";

 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: [
@@ -38,7 +49,7 @@ const mocks = vi.hoisted(() => {
      },
    ],
    isFirstRecharge: false,
-    commercialOffer: null,
+    commercialOffer: null as CommercialOfferSummary | null,
    selectedPlanId: "vip_monthly",
    payChannel: "stripe" as const,
    agreed: true,
@@ -52,7 +63,17 @@ const mocks = vi.hoisted(() => {
      payment.selectedPlanId = event.planId;
    }
  });
-  return { payment, paymentDispatch, planClick: vi.fn() };
+  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", () => ({
@@ -83,6 +104,10 @@ 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",
@@ -97,13 +122,16 @@ vi.mock("@/lib/analytics", () => ({
 }));

 vi.mock("../use-subscription-payment-flow", () => ({
-  useSubscriptionPaymentFlow: () => ({
-    payment: mocks.payment,
-    paymentDispatch: mocks.paymentDispatch,
-    showPaymentSuccessDialog: false,
-    handleBackClick: vi.fn(),
-    handlePaymentSuccessClose: vi.fn(),
-  }),
+  useSubscriptionPaymentFlow: (input: unknown) => {
+    mocks.paymentFlowInput(input);
+    return {
+      payment: mocks.payment,
+      paymentDispatch: mocks.paymentDispatch,
+      showPaymentSuccessDialog: false,
+      handleBackClick: vi.fn(),
+      handlePaymentSuccessClose: vi.fn(),
+    };
+  },
 }));

 vi.mock("../components", () => ({
@@ -170,8 +198,16 @@ describe("SubscriptionScreen payment selection flow", () => {
  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);
@@ -181,10 +217,11 @@ describe("SubscriptionScreen payment selection flow", () => {
  afterEach(() => {
    act(() => root.unmount());
    container.remove();
+    vi.useRealTimers();
  });

  it("confirms VIP selection before enabling the separate checkout button", () => {
-    act(() => root.render(<SubscriptionScreen />));
+    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
    const checkout = container.querySelector<HTMLButtonElement>(
      '[data-testid="checkout"]',
    );
@@ -215,7 +252,7 @@ describe("SubscriptionScreen payment selection flow", () => {
  });

  it("keeps the original selection when VIP confirmation is cancelled", () => {
-    act(() => root.render(<SubscriptionScreen />));
+    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
    act(() => clickButton(container, "vip_quarterly"));
    expect(container.querySelector('[role="dialog"]')).not.toBeNull();

@@ -230,21 +267,21 @@ describe("SubscriptionScreen payment selection flow", () => {
  });

  it("requires VIP confirmation again after the page is remounted", () => {
-    act(() => root.render(<SubscriptionScreen />));
+    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 />));
+    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 />));
+    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
    act(() => clickButton(container, "coin_1000"));

    expect(container.querySelector('[role="dialog"]')).toBeNull();
@@ -275,6 +312,149 @@ describe("SubscriptionScreen payment selection flow", () => {
    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",
+    );
+    expect(container.textContent).not.toContain("50% OFF");
+  });
+
+  it("refreshes the catalog without a stale offer id when the page regains focus", () => {
+    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
+    mocks.paymentDispatch.mockClear();
+
+    act(() => window.dispatchEvent(new Event("focus")));
+
+    expect(mocks.paymentDispatch).toHaveBeenCalledWith({
+      type: "PaymentInit",
+      characterId: "elio",
+      payChannel: "stripe",
+      planId: "vip_monthly",
+      commercialOfferId: null,
+    });
+  });
+
+  it("describes an account offer without attributing it to the current role", () => {
+    mocks.payment.commercialOffer = {
+      enabled: true,
+      commercialOfferId: "offer-account-1",
+      characterId: "elio",
+      planId: "vip_monthly",
+      discountPercent: 50,
+      pricePercent: 50,
+      expiresAt: new Date(Date.now() + 60_000).toISOString(),
+      triggerReason: "expired_order",
+      message: "Everything in top-up and VIP is 50% OFF.",
+      scope: "account",
+      stage: "halfDiscount",
+    };
+
+    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="maya" />));
+
+    expect(container.textContent).toContain("Private offer · 50% OFF");
+    expect(container.textContent).toContain("Your private price is active");
+    expect(container.textContent).not.toContain("Maya got this price for you");
+  });
+
+  it("refreshes the catalog when the active offer expires", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-07-30T08:00:00Z"));
+    mocks.payment.commercialOffer = {
+      enabled: true,
+      commercialOfferId: "offer-expiring-1",
+      characterId: "elio",
+      planId: "vip_monthly",
+      discountPercent: 30,
+      pricePercent: 70,
+      expiresAt: "2026-07-30T08:00:01Z",
+      triggerReason: "expired_order",
+      message: "30% OFF",
+      scope: "account",
+      stage: "sevenDiscount",
+    };
+    act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
+    mocks.paymentDispatch.mockClear();
+
+    act(() => vi.advanceTimersByTime(1_250));
+
+    expect(mocks.paymentDispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "PaymentInit",
+        characterId: "elio",
+        commercialOfferId: null,
+      }),
+    );
+  });
+
+  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 {
@@ -10,7 +10,6 @@ import {
  canCheckoutSubscriptionPlan,
  findSelectedSubscriptionPlan,
  getDefaultSubscriptionPlanId,
-  getFirstRechargeOfferView,
  requiresVipPlanConfirmation,
  toCoinsOfferPlanViews,
  toVipOfferPlanViews,
@@ -101,7 +100,7 @@ describe("subscription screen helpers", () => {
    ]);
  });

-  it("maps first recharge offer fields to plan views", () => {
+  it("ignores legacy first-recharge flags while retaining quoted and original prices", () => {
    const vipViews = toVipOfferPlanViews([
      makePlan({
        planId: "vip_monthly",
@@ -126,51 +125,18 @@ describe("subscription screen helpers", () => {
      }),
    ]);

-    expect(vipViews[0]).toMatchObject({
+    expect(vipViews[0]).toEqual(expect.objectContaining({
      price: "9.95",
      originalPrice: "19.9",
-      isFirstRechargeOffer: true,
-      firstRechargeDiscountPercent: 50,
-    });
-    expect(coinViews[0]).toMatchObject({
+    }));
+    expect(vipViews[0]).not.toHaveProperty("isFirstRechargeOffer");
+    expect(vipViews[0]).not.toHaveProperty("firstRechargeDiscountPercent");
+    expect(coinViews[0]).toEqual(expect.objectContaining({
      price: "4.95",
      originalPrice: "9.9",
-      isFirstRechargeOffer: true,
-      firstRechargeDiscountPercent: 50,
-    });
-    expect(
-      getFirstRechargeOfferView({
-        isFirstRecharge: true,
-        subscriptionType: "vip",
-        vipPlans: vipViews,
-        coinPlans: coinViews,
-      }),
-    ).toMatchObject({
-      badgeText: "50% OFF",
-      title: "First Recharge Offer",
-      renewalNotice:
-        "First month 50% off. Renews at the regular price from the second month.",
-    });
-    expect(
-      getFirstRechargeOfferView({
-        isFirstRecharge: true,
-        subscriptionType: "topup",
-        vipPlans: vipViews,
-        coinPlans: coinViews,
-      }),
-    ).toMatchObject({
-      badgeText: "50% OFF",
-      title: "First Recharge Offer",
-      renewalNotice: null,
-    });
-    expect(
-      getFirstRechargeOfferView({
-        isFirstRecharge: false,
-        subscriptionType: "vip",
-        vipPlans: vipViews,
-        coinPlans: coinViews,
-      }),
-    ).toBeNull();
+    }));
+    expect(coinViews[0]).not.toHaveProperty("isFirstRechargeOffer");
+    expect(coinViews[0]).not.toHaveProperty("firstRechargeDiscountPercent");
  });

  it("maps the backend most popular flag to VIP and coin views", () => {
@@ -191,7 +157,7 @@ describe("subscription screen helpers", () => {
    expect(popularCoins[0]?.mostPopular).toBe(true);
  });

-  it("maps normal VIP original price outside first recharge activity", () => {
+  it("maps regular VIP original price without exposing legacy first-recharge state", () => {
    expect(
      toVipOfferPlanViews([
        makePlan({
@@ -206,7 +172,6 @@ describe("subscription screen helpers", () => {
        id: "vip_monthly",
        price: "19.9",
        originalPrice: "24.99",
-        isFirstRechargeOffer: false,
      },
    ]);
  });
@@ -3,8 +3,12 @@ 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 { SubscriptionPaymentIssueDialog } from "../subscription-payment-issue-dialog";
+import {
+  getPaymentIssueSubmitErrorLogDetails,
+  SubscriptionPaymentIssueDialog,
+} from "../subscription-payment-issue-dialog";
 import { SubscriptionRenewalConfirmationDialog } from "../subscription-renewal-confirmation-dialog";

 const mocks = vi.hoisted(() => ({
@@ -200,6 +204,28 @@ describe("subscription payment dialogs", () => {
    );
    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 {
@@ -71,8 +71,6 @@ describe("subscription Tailwind components", () => {
            currency: "usd",
            originalPrice: "19.99",
            mostPopular: true,
-            isFirstRechargeOffer: true,
-            firstRechargeDiscountPercent: 50,
          },
        ]}
        selectedPlanId="vip_monthly"
@@ -96,7 +94,7 @@ describe("subscription Tailwind components", () => {
    );

    expect(vipHtml).toContain("Most Popular");
-    expect(vipHtml).toContain("50% OFF");
+    expect(vipHtml).not.toContain("First Recharge");
    expect(coinsHtml).toContain("Most Popular");
  });
 });
@@ -24,6 +24,7 @@ export interface SubscriptionCheckoutButtonProps {
  subscriptionType: "vip" | "topup";
  returnTo?: SubscriptionReturnTo;
  sourceCharacterSlug?: string;
+  countryCode?: string | null;
 }

 export function SubscriptionCheckoutButton({
@@ -31,6 +32,7 @@ export function SubscriptionCheckoutButton({
  subscriptionType,
  returnTo = null,
  sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
+  countryCode = null,
 }: SubscriptionCheckoutButtonProps) {
  const payment = usePaymentState();
  const paymentDispatch = usePaymentDispatch();
@@ -42,6 +44,7 @@ export function SubscriptionCheckoutButton({
    returnTo: returnTo ?? undefined,
    characterSlug: sourceCharacterSlug,
    subscriptionType,
+    countryCode,
  });

  const isLoading = payment.isCreatingOrder || payment.isPollingOrder;
@@ -57,7 +60,6 @@ export function SubscriptionCheckoutButton({
    paymentLaunch.resetLaunchState();
    paymentDispatch({ type: "PaymentCreateOrderSubmitted" });
  };
-
  return (
    <>
      <SubscriptionCtaButton
@@ -10,9 +10,7 @@ export interface CoinsOfferPlanView {
  price: string;
  currency: string;
  originalPrice?: string;
-  isFirstRechargeOffer?: boolean;
  mostPopular?: boolean;
-  firstRechargeDiscountPercent?: number | null;
  promotionType?: string | null;
 }

@@ -56,11 +54,6 @@ export function SubscriptionCoinsOfferSection({
                {plan.mostPopular ? (
                  <span className={styles.popularBadge}>Most Popular</span>
                ) : null}
-                {plan.isFirstRechargeOffer ? (
-                  <span className={styles.offerBadge}>
-                    {plan.firstRechargeDiscountPercent ?? 50}% OFF
-                  </span>
-                ) : null}
              </span>
              <span className={styles.priceGroup}>
                <span className={styles.price}>
@@ -6,6 +6,7 @@ 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";
@@ -33,6 +34,21 @@ 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;
@@ -119,6 +135,19 @@ export function SubscriptionPaymentIssueDialog({
    });

    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;
@@ -206,6 +235,32 @@ export function SubscriptionPaymentIssueDialog({
  );
 }

+export function getPaymentIssueSubmitErrorLogDetails(
+  error: Error,
+): PaymentIssueSubmitErrorLogDetails {
+  const errorRecord = toErrorRecord(error);
+  const cause = toErrorRecord(errorRecord?.cause);
+  const responseDetails = toErrorRecord(cause?.details);
+  const detail = toErrorRecord(responseDetails?.detail);
+  const causeName = stringValue(cause?.name);
+  const causeMessage = stringValue(cause?.message);
+  const httpStatus = numberValue(cause?.status);
+  const apiCode = stringValue(cause?.code);
+  const serverErrorCode =
+    stringValue(detail?.errorCode) ??
+    stringValue(responseDetails?.errorCode);
+
+  return {
+    code: stringValue(errorRecord?.code) ?? "UNKNOWN",
+    message: error.message,
+    ...(causeName ? { causeName } : {}),
+    ...(causeMessage ? { causeMessage } : {}),
+    ...(httpStatus !== undefined ? { httpStatus } : {}),
+    ...(apiCode ? { apiCode } : {}),
+    ...(serverErrorCode ? { serverErrorCode } : {}),
+  };
+}
+
 function createIdempotencyKey(): string {
  const token =
    typeof crypto !== "undefined" && "randomUUID" in crypto
@@ -213,3 +268,18 @@ function createIdempotencyKey(): string {
      : `${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;
+}
@@ -1,14 +1,24 @@
 .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))
-    calc(104px + var(--app-safe-bottom, 0px))
+    var(--page-section-gap-lg, 22px)
    calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
 }

@@ -191,11 +201,12 @@
 }

 .ctaSlot {
-  position: fixed;
+  position: relative;
  z-index: 40;
-  right: 50%;
-  bottom: 0;
-  width: min(100%, var(--app-max-width, 540px));
+  flex: 0 0 auto;
+  width: 100%;
+  max-height: min(50dvh, 360px);
+  overflow-y: auto;
  padding:
    12px
    calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
@@ -209,5 +220,4 @@
  );
  box-shadow: 0 -12px 30px rgba(87, 35, 59, 0.1);
  backdrop-filter: blur(16px);
-  transform: translateX(50%);
 }
@@ -8,9 +8,7 @@ export interface VipOfferPlanView {
  price: string;
  currency: string;
  originalPrice: string;
-  isFirstRechargeOffer?: boolean;
  mostPopular?: boolean;
-  firstRechargeDiscountPercent?: number | null;
  promotionType?: string | null;
 }

@@ -43,9 +41,7 @@ export function SubscriptionVipOfferSection({
      <div className={styles.planGrid}>
        {plans.map((plan) => {
          const selected = selectedPlanId === plan.id;
-          const badgeCount =
-            Number(plan.mostPopular === true) +
-            Number(plan.isFirstRechargeOffer === true);
+          const badgeCount = Number(plan.mostPopular === true);
          return (
            <button
              key={plan.id}
@@ -62,11 +58,6 @@ export function SubscriptionVipOfferSection({
                  {plan.mostPopular ? (
                    <span className={styles.popularBadge}>Most Popular</span>
                  ) : null}
-                  {plan.isFirstRechargeOffer ? (
-                    <span className={styles.offerBadge}>
-                      {plan.firstRechargeDiscountPercent ?? 50}% OFF
-                    </span>
-                  ) : null}
                </span>
              ) : null}
              <span className={styles.planTitle}>{plan.title}</span>
@@ -10,7 +10,6 @@ import {
  type PaymentSearchParams,
 } from "@/lib/payment/payment_search_params";
 import {
-  DEFAULT_CHARACTER_SLUG,
  getCharacterBySlug,
 } from "@/data/constants/character";

@@ -30,8 +29,7 @@ export default async function SubscriptionPage({
    getFirstPaymentSearchParam(query.type),
  );
  const sourceCharacterSlug =
-    getCharacterBySlug(getFirstPaymentSearchParam(query.character))?.slug ??
-    DEFAULT_CHARACTER_SLUG;
+    getCharacterBySlug(getFirstPaymentSearchParam(query.character))?.slug ?? null;
  const initialPlanId = getFirstPaymentSearchParam(query.planId);
  const commercialOfferId = getFirstPaymentSearchParam(
    query.commercialOfferId,
@@ -5,17 +5,9 @@ import type { VipOfferPlanView } from "./components/subscription-vip-offer-secti

 export type SubscriptionType = "vip" | "topup";

-export interface FirstRechargeOfferView {
-  badgeText: string;
-  title: string;
-  subtitle: string;
-  renewalNotice: string | null;
-}
-
 export function isVipPlan(plan: PaymentPlan): boolean {
  return plan.vipDays !== null;
 }
-
 export function isCreditPlan(plan: PaymentPlan): boolean {
  return plan.dolAmount !== null;
 }
@@ -60,9 +52,7 @@ export function toVipOfferPlanView(plan: PaymentPlan): VipOfferPlanView {
    price: formatOfferAmount(plan.amountCents),
    currency: formatOfferCurrency(plan.currency),
    originalPrice: formatOfferAmount(plan.originalAmountCents),
-    isFirstRechargeOffer: plan.isFirstRechargeOffer,
    mostPopular: plan.mostPopular,
-    firstRechargeDiscountPercent: plan.firstRechargeDiscountPercent,
    promotionType: plan.promotionType,
  };
 }
@@ -74,9 +64,7 @@ export function toCoinsOfferPlanView(plan: PaymentPlan): CoinsOfferPlanView {
    price: formatOfferAmount(plan.amountCents),
    currency: formatCoinCurrency(plan.currency),
    originalPrice: formatOfferAmount(plan.originalAmountCents),
-    isFirstRechargeOffer: plan.isFirstRechargeOffer,
    mostPopular: plan.mostPopular,
-    firstRechargeDiscountPercent: plan.firstRechargeDiscountPercent,
    promotionType: plan.promotionType,
  };
 }
@@ -162,30 +150,3 @@ export function getDefaultSubscriptionPlanId(input: {
  if (input.selectedPlan !== null) return null;
  return input.coinPlans[0]?.id ?? null;
 }
-
-export function getFirstRechargeOfferView(input: {
-  isFirstRecharge: boolean;
-  subscriptionType: SubscriptionType;
-  vipPlans: readonly VipOfferPlanView[];
-  coinPlans: readonly CoinsOfferPlanView[];
-}): FirstRechargeOfferView | null {
-  if (!input.isFirstRecharge) return null;
-
-  const promotedPlan = [...input.vipPlans, ...input.coinPlans].find(
-    (plan) => plan.isFirstRechargeOffer,
-  );
-
-  const discountPercent =
-    promotedPlan?.firstRechargeDiscountPercent ?? 50;
-  const badgeText = `${discountPercent}% OFF`;
-  return {
-    badgeText,
-    title: "First Recharge Offer",
-    subtitle:
-      "Your first recharge price is already applied. No code needed.",
-    renewalNotice:
-      input.subscriptionType === "vip"
-        ? "First month 50% off. Renews at the regular price from the second month."
-        : null,
-  };
-}
@@ -8,11 +8,8 @@ import { usePaymentMethodSelection } from "@/app/_hooks/use-payment-method-selec
 import { usePaymentPlanAnalytics } from "@/app/_hooks/use-payment-plan-analytics";
 import type { PayChannel } from "@/data/schemas/payment";
 import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit";
-import {
-  DEFAULT_CHARACTER,
-  DEFAULT_CHARACTER_SLUG,
-  getCharacterBySlug,
-} from "@/data/constants/character";
+import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
+import { useCharacterCatalog } from "@/providers/character-catalog-provider";
 import {
  behaviorAnalytics,
  getDefaultPaymentAnalyticsContext,
@@ -34,7 +31,6 @@ import styles from "./components/subscription-screen.module.css";
 import {
  canCheckoutSubscriptionPlan,
  findSelectedSubscriptionPlan,
-  getFirstRechargeOfferView,
  getDefaultSubscriptionPlanId,
  requiresVipPlanConfirmation,
  toCoinsOfferPlanViews,
@@ -51,7 +47,7 @@ export interface SubscriptionScreenProps {
  returnTo?: SubscriptionReturnTo;
  initialPayChannel?: PayChannel | null;
  analyticsContext?: PaymentAnalyticsContext;
-  sourceCharacterSlug?: string;
+  sourceCharacterSlug?: string | null;
  initialPlanId?: string | null;
  commercialOfferId?: string | null;
  resumeOrderId?: string | null;
@@ -64,7 +60,7 @@ export function SubscriptionScreen({
  returnTo = null,
  initialPayChannel = null,
  analyticsContext: providedAnalyticsContext,
-  sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
+  sourceCharacterSlug = null,
  initialPlanId = null,
  commercialOfferId = null,
  resumeOrderId = null,
@@ -78,9 +74,9 @@ export function SubscriptionScreen({
  const [paymentIssueNotice, setPaymentIssueNotice] = useState<string | null>(
    null,
  );
+  const characterCatalog = useCharacterCatalog();
  const userState = useUserState();
-  const sourceCharacter =
-    getCharacterBySlug(sourceCharacterSlug) ?? DEFAULT_CHARACTER;
+  const sourceCharacter = characterCatalog.getBySlug(sourceCharacterSlug);
  const hasHydrated = useHasHydrated();
  const countryCode = userState.currentUser?.countryCode;
  const paymentMethodConfig = getPaymentMethodConfig({
@@ -100,13 +96,51 @@ export function SubscriptionScreen({
    subscriptionType,
    shouldResumePendingOrder,
    returnTo,
-    sourceCharacterSlug,
+    sourceCharacterSlug: sourceCharacter?.slug ?? null,
    initialPayChannel: paymentMethodConfig.initialPayChannel,
    initialPlanId,
    commercialOfferId,
    resumeOrderId,
    chatActionId,
  });
+  useEffect(() => {
+    if (!sourceCharacter) return;
+    const refreshCatalog = () => {
+      paymentDispatch({
+        type: "PaymentInit",
+        characterId: sourceCharacter.id,
+        payChannel: payment.payChannel,
+        planId: payment.selectedPlanId || null,
+        commercialOfferId: null,
+      });
+    };
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") refreshCatalog();
+    };
+    window.addEventListener("focus", refreshCatalog);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    const expiresAtMs = payment.commercialOffer
+      ? Date.parse(payment.commercialOffer.expiresAt)
+      : Number.NaN;
+    const expiryTimer = Number.isFinite(expiresAtMs)
+      ? window.setTimeout(
+          refreshCatalog,
+          Math.max(0, expiresAtMs - Date.now()) + 250,
+        )
+      : null;
+    return () => {
+      window.removeEventListener("focus", refreshCatalog);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      if (expiryTimer !== null) window.clearTimeout(expiryTimer);
+    };
+  }, [
+    payment.commercialOffer,
+    payment.payChannel,
+    payment.selectedPlanId,
+    paymentDispatch,
+    sourceCharacter,
+  ]);
  const canSubscribeVip = subscriptionType === "vip";
  const analyticsContext =
    providedAnalyticsContext ??
@@ -131,22 +165,6 @@ export function SubscriptionScreen({
    });
  }, [canSubscribeVip, directCoinsPlans, payment.plans, vipOfferPlans]);
  usePaymentPlanAnalytics(displayedPlans, analyticsContext);
-  const firstRechargeOffer = useMemo(
-    () =>
-      getFirstRechargeOfferView({
-        isFirstRecharge: payment.isFirstRecharge,
-        subscriptionType,
-        vipPlans: vipOfferPlans,
-        coinPlans: directCoinsPlans,
-      }),
-    [
-      directCoinsPlans,
-      payment.isFirstRecharge,
-      subscriptionType,
-      vipOfferPlans,
-    ],
-  );
-
  const selectedPlan = findSelectedSubscriptionPlan({
    canSubscribeVip,
    selectedPlanId: payment.selectedPlanId,
@@ -160,6 +178,7 @@ export function SubscriptionScreen({
    (plan) => plan.id === payment.selectedPlanId,
  );
  const canActivate =
+    sourceCharacter !== null &&
    selectedPlan !== null &&
    canCheckoutSubscriptionPlan({
      selectedPlanId: payment.selectedPlanId,
@@ -243,7 +262,8 @@ export function SubscriptionScreen({
  return (
    <MobileShell>
      <div className={styles.shell}>
-        <header className={styles.header}>
+        <div className={styles.scrollArea}>
+          <header className={styles.header}>
          <BackButton
            className={styles.backSlot}
            onClick={handleBackClick}
@@ -260,7 +280,7 @@ export function SubscriptionScreen({
          >
            Payment issue?
          </button>
-        </header>
+          </header>

        {paymentIssueNotice ? (
          <p className={styles.paymentIssueNotice} role="status">
@@ -268,7 +288,7 @@ export function SubscriptionScreen({
          </p>
        ) : null}

-        {chatActionId ? (
+        {chatActionId && sourceCharacter ? (
          <section
            className={styles.characterSupportBanner}
            aria-label={`Support ${sourceCharacter.displayName}`}
@@ -284,39 +304,19 @@ export function SubscriptionScreen({
          </section>
        ) : null}

-        {firstRechargeOffer ? (
-          <section
-            className={styles.firstRechargeBanner}
-            aria-label="First recharge offer"
-          >
-            <span className={styles.firstRechargeBadge}>
-              {firstRechargeOffer.badgeText}
-            </span>
-            <div className={styles.firstRechargeCopy}>
-              <h2 className={styles.firstRechargeTitle}>
-                {firstRechargeOffer.title}
-              </h2>
-              <p className={styles.firstRechargeSubtitle}>
-                {firstRechargeOffer.subtitle}
-              </p>
-              {firstRechargeOffer.renewalNotice ? (
-                <p className={styles.firstRechargeRenewalNotice}>
-                  {firstRechargeOffer.renewalNotice}
-                </p>
-              ) : null}
-            </div>
-          </section>
-        ) : null}
-
-        {payment.commercialOffer && !firstRechargeOffer ? (
+        {payment.commercialOffer && sourceCharacter ? (
          <section
            className={styles.firstRechargeBanner}
            aria-label={`${sourceCharacter.shortName} private offer`}
          >
-            <span className={styles.firstRechargeBadge}>Private offer</span>
+            <span className={styles.firstRechargeBadge}>
+              Private offer · {payment.commercialOffer.discountPercent}% OFF
+            </span>
            <div className={styles.firstRechargeCopy}>
              <h2 className={styles.firstRechargeTitle}>
-                {sourceCharacter.shortName} got this price for you
+                {payment.commercialOffer.scope === "account"
+                  ? "Your private price is active"
+                  : `${sourceCharacter.shortName} got this price for you`}
              </h2>
              <p className={styles.firstRechargeSubtitle}>
                {payment.commercialOffer.message ||
@@ -341,26 +341,28 @@ export function SubscriptionScreen({
          />
        </div>

-        <PaymentMethodSelector
-          config={renderedPaymentMethodConfig}
-          value={payment.payChannel}
-          disabled={isPaymentBusy}
-          caption={
-            paymentMethodConfig.ezpayDisplayName === "QRIS"
-              ? "QRIS by default in Indonesia"
-              : "GCash by default in the Philippines"
-          }
-          className={styles.paymentMethodSlot}
-          analyticsKey="subscription.payment_method"
-          onChange={handlePaymentMethodChange}
-        />
+          <PaymentMethodSelector
+            config={renderedPaymentMethodConfig}
+            value={payment.payChannel}
+            disabled={payment.isCreatingOrder}
+            caption={
+              paymentMethodConfig.ezpayDisplayName === "QRIS"
+                ? "QRIS by default in Indonesia"
+                : "GCash by default in the Philippines"
+            }
+            className={styles.paymentMethodSlot}
+            analyticsKey="subscription.payment_method"
+            onChange={handlePaymentMethodChange}
+          />
+        </div>

        <div className={styles.ctaSlot}>
          <SubscriptionCheckoutButton
            disabled={!canActivate}
            subscriptionType={subscriptionType}
            returnTo={returnTo}
-            sourceCharacterSlug={sourceCharacterSlug}
+            sourceCharacterSlug={sourceCharacter?.slug ?? DEFAULT_CHARACTER_SLUG}
+            countryCode={countryCode}
          />
        </div>

@@ -385,7 +387,7 @@ export function SubscriptionScreen({
            orderId={payment.currentOrderId}
            payChannel={payment.payChannel}
            countryCode={countryCode}
-            characterId={sourceCharacterSlug}
+            characterId={sourceCharacter?.id ?? ""}
            onClose={() => setShowPaymentIssueDialog(false)}
            onSubmitted={setPaymentIssueNotice}
          />
@@ -5,7 +5,10 @@ import { useRouter } from "next/navigation";

 import { usePaymentRouteFlow } from "@/app/_hooks/use-payment-route-flow";
 import type { PayChannel } from "@/data/schemas/payment";
-import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
+import {
+  DEFAULT_CHARACTER,
+  getCharacterBySlug,
+} from "@/data/constants/character";
 import {
  consumeSubscriptionExitUrl,
  resolveSubscriptionSuccessExitUrl,
@@ -19,7 +22,7 @@ export interface UseSubscriptionPaymentFlowInput {
  shouldResumePendingOrder: boolean;
  returnTo: SubscriptionReturnTo;
  initialPayChannel: PayChannel;
-  sourceCharacterSlug?: string;
+  sourceCharacterSlug?: string | null;
  initialPlanId?: string | null;
  commercialOfferId?: string | null;
  resumeOrderId?: string | null;
@@ -31,17 +34,20 @@ export function useSubscriptionPaymentFlow({
  shouldResumePendingOrder,
  returnTo,
  initialPayChannel,
-  sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
+  sourceCharacterSlug = null,
  initialPlanId = null,
  commercialOfferId = null,
  resumeOrderId = null,
  chatActionId = null,
 }: UseSubscriptionPaymentFlowInput) {
  const router = useRouter();
+  const supportCharacter = getCharacterBySlug(sourceCharacterSlug);
+  const exitCharacterSlug = supportCharacter?.slug ?? DEFAULT_CHARACTER.slug;
  const { payment, paymentDispatch } = usePaymentRouteFlow({
    initialPayChannel,
    paymentType: subscriptionType,
    shouldResumePendingOrder,
+    characterId: supportCharacter?.id,
    initialPlanId,
    commercialOfferId,
    resumeOrderId,
@@ -62,7 +68,7 @@ export function useSubscriptionPaymentFlow({
  const handleBackClick = () => {
    void (async () => {
      router.replace(
-        await consumeSubscriptionExitUrl(returnTo, sourceCharacterSlug),
+        await consumeSubscriptionExitUrl(returnTo, exitCharacterSlug),
      );
    })();
  };
@@ -74,7 +80,7 @@ export function useSubscriptionPaymentFlow({
      router.replace(
        await resolveSubscriptionSuccessExitUrl(
          returnTo,
-          sourceCharacterSlug,
+          exitCharacterSlug,
        ),
      );
    })();
@@ -19,6 +19,7 @@ export interface TipCheckoutButtonProps {
  disabled?: boolean;
  onOrder: () => void;
  returnPath: string;
+  countryCode?: string | null;
 }

 export function TipCheckoutButton({
@@ -27,6 +28,7 @@ export function TipCheckoutButton({
  disabled = false,
  onOrder,
  returnPath,
+  countryCode = null,
 }: TipCheckoutButtonProps) {
  const character = useActiveCharacter();
  const payment = usePaymentState();
@@ -40,16 +42,17 @@ export function TipCheckoutButton({
    giftCategory,
    giftPlanId,
    characterSlug: character.slug,
+    countryCode,
  });

  const isLoading = payment.isCreatingOrder || payment.isPollingOrder;
  const label = payment.isPollingOrder
-    ? "Processing payment..."
-    : payment.isCreatingOrder
-      ? "Creating order..."
-      : payment.isPaid
-        ? "Thanks for the coffee"
-        : "Order and Buy";
+      ? "Processing payment..."
+      : payment.isCreatingOrder
+        ? "Creating order..."
+        : payment.isPaid
+          ? "Thanks for the coffee"
+          : "Order and Buy";

  return (
    <>
@@ -292,7 +292,7 @@ export function TipScreen({
                  config={renderedPaymentMethodConfig}
                  value={payment.payChannel}
                  density="compact"
-                  disabled={isPaymentBusy}
+                  disabled={payment.isCreatingOrder}
                  className={styles.paymentMethodSlot}
                  analyticsKey="tip.payment_method"
                  onChange={handlePaymentMethodChange}
@@ -305,6 +305,7 @@ export function TipScreen({
                    disabled={!canCreateOrder}
                    onOrder={handleOrder}
                    returnPath={returnPath}
+                    countryCode={userState.currentUser?.countryCode}
                  />
                </div>
              </>
@@ -45,6 +45,27 @@ describe("ChatWebSocket payment guidance", () => {

    expect(onPaymentGuidance).not.toHaveBeenCalled();
  });
+
+  it("delivers a persisted commercial thank-you as a live role message", () => {
+    const socket = new ChatWebSocket("ws://example.test/chat", "token");
+    const onCommercialMessage = vi.fn();
+    socket.onCommercialMessage = onCommercialMessage;
+
+    receive(socket, {
+      type: "commercial_message",
+      messageId: "message-1",
+      message: "Thank you for supporting me.",
+      characterId: "maya-tan",
+      createdAt: "2026-07-28T00:00:00.000Z",
+    });
+
+    expect(onCommercialMessage).toHaveBeenCalledWith({
+      messageId: "message-1",
+      message: "Thank you for supporting me.",
+      characterId: "maya-tan",
+      createdAt: "2026-07-28T00:00:00.000Z",
+    });
+  });
 });

 function receive(socket: ChatWebSocket, payload: unknown): void {
@@ -37,6 +37,13 @@ export interface PaywallStatusPayload {
  reason: string | null;
 }

+export interface CommercialMessagePayload {
+  messageId: string;
+  message: string;
+  characterId: string;
+  createdAt: string;
+}
+
 export class ChatWebSocket {
  private ws: WebSocket | null = null;
  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
@@ -52,6 +59,7 @@ export class ChatWebSocket {
  onCommercialAction: ((action: CommercialAction) => void) | null = null;
  onChatAction: ((action: ChatAction) => void) | null = null;
  onPaymentGuidance: ((guidance: PaymentGuidance) => void) | null = null;
+  onCommercialMessage: ((message: CommercialMessagePayload) => void) | null = null;
  onError: ((errorMessage: string) => void) | null = null;

  constructor(
@@ -149,6 +157,10 @@ export class ChatWebSocket {
      done?: boolean;
      audioUrl?: string;
      error?: string;
+      messageId?: string;
+      message?: string;
+      characterId?: string;
+      createdAt?: string;
      data?: Record<string, unknown> & {
        image?: {
          type?: string | null;
@@ -163,6 +175,10 @@ export class ChatWebSocket {
        ruleId?: string;
        kind?: string;
        orderId?: string | null;
+        messageId?: string;
+        message?: string;
+        characterId?: string;
+        createdAt?: string;
      };
    };
    try {
@@ -217,6 +233,25 @@ export class ChatWebSocket {
        if (guidance.success) this.onPaymentGuidance?.(guidance.data);
        break;
      }
+      case "commercial_message": {
+        const commercialMessage = payload.data?.messageId
+          ? payload.data
+          : payload;
+        if (
+          commercialMessage?.messageId &&
+          commercialMessage.message &&
+          commercialMessage.characterId &&
+          commercialMessage.createdAt
+        ) {
+          this.onCommercialMessage?.({
+            messageId: commercialMessage.messageId,
+            message: commercialMessage.message,
+            characterId: commercialMessage.characterId,
+            createdAt: commercialMessage.createdAt,
+          });
+        }
+        break;
+      }
      case "error":
        this.onError?.(payload.error ?? "Unknown error");
        break;
@@ -13,7 +13,10 @@ import type { Result } from "@/utils/result";

 export interface IPaymentRepository {
  /** 获取套餐列表。 */
-  getPlans(commercialOfferId?: string): Promise<Result<PaymentPlansResponse>>;
+  getPlans(
+    commercialOfferId?: string,
+    supportCharacterId?: string,
+  ): Promise<Result<PaymentPlansResponse>>;

  /** 获取本地缓存套餐列表。 */
  getCachedPlans(): Promise<Result<PaymentPlansResponse | null>>;
@@ -24,10 +24,18 @@ export class PaymentRepository implements IPaymentRepository {
  constructor(private readonly api: PaymentApi) {}

  /** 获取套餐列表。 */
-  async getPlans(commercialOfferId?: string): Promise<Result<PaymentPlansResponse>> {
+  async getPlans(
+    commercialOfferId?: string,
+    supportCharacterId?: string,
+  ): Promise<Result<PaymentPlansResponse>> {
    return Result.wrap(async () => {
-      const response = await this.api.getPlans(commercialOfferId);
-      if (!commercialOfferId) await PaymentPlansStorage.setPlans(response);
+      const response = await this.api.getPlans(
+        commercialOfferId,
+        supportCharacterId,
+      );
+      if (!commercialOfferId && !supportCharacterId) {
+        await PaymentPlansStorage.setPlans(response);
+      }
      return response;
    });
  }
@@ -27,6 +27,16 @@ describe("payment guidance wire contract", () => {
    expect(PaymentGuidanceSchema.parse(guidance)).toEqual(guidance);
  });

+  it("accepts the supportCharacter guidance scene", () => {
+    expect(
+      PaymentGuidanceSchema.parse({
+        ...guidance,
+        scene: "supportCharacter",
+        ruleId: "payment_guidance_supportCharacter",
+      }).scene,
+    ).toBe("supportCharacter");
+  });
+
  it("keeps all backend lock facts instead of dropping hint and CTA", () => {
    expect(
      ChatLockDetailSchema.parse({
@@ -24,6 +24,7 @@ export const PaymentGuidanceSceneSchema = z.enum([
  "privateZoneLocked",
  "unknownLock",
  "whyPay",
+  "supportCharacter",
  "leavingAfterCredits",
  "paymentIssue",
  "externalRisk",
@@ -195,15 +195,19 @@ describe("PaymentPlansResponse", () => {

  it("parses one user-bound commercial offer and its discounted plan", () => {
    const response = PaymentPlansResponseSchema.parse({
-      commercialOffer: {
-        enabled: true,
-        commercialOfferId: "offer-1",
+        supportCharacterId: "maya-tan",
+        commercialOffer: {
+          enabled: true,
+          commercialOfferId: "offer-1",
+          characterId: "maya-tan",
        planId: "vip_annual",
        discountPercent: 30,
        pricePercent: 70,
        expiresAt: "2026-07-24T08:00:00+00:00",
        triggerReason: "price_objection",
        message: "I got this private price for you.",
+        scope: "account",
+        stage: "sevenDiscount",
      },
      plans: [
        {
@@ -225,6 +229,10 @@ describe("PaymentPlansResponse", () => {
    });

    expect(response.commercialOffer?.commercialOfferId).toBe("offer-1");
+    expect(response.supportCharacterId).toBe("maya-tan");
+    expect(response.commercialOffer?.characterId).toBe("maya-tan");
+    expect(response.commercialOffer?.scope).toBe("account");
+    expect(response.commercialOffer?.stage).toBe("sevenDiscount");
    expect(response.plans[0]).toMatchObject({
      planId: "vip_annual",
      commercialOfferId: "offer-1",
@@ -24,18 +24,22 @@ export const CommercialOfferSummarySchema = z
  .object({
    enabled: booleanOrFalse,
    commercialOfferId: z.string().min(1),
+    characterId: stringOrEmpty,
    planId: z.string().min(1),
    discountPercent: numberOrZero,
    pricePercent: numberOrZero,
    expiresAt: z.string().min(1),
    triggerReason: stringOrEmpty,
    message: stringOrEmpty,
+    scope: z.enum(["account", "character"]).optional(),
+    stage: z.enum(["sevenDiscount", "halfDiscount"]).optional(),
  })
  .readonly();

 export const PaymentPlansResponseSchema = z
  .object({
    isFirstRecharge: booleanOrFalse,
+    supportCharacterId: stringOrEmpty,
    firstRechargeOffer: schemaOrNull(FirstRechargeOfferSchema),
    commercialOffer: schemaOrNull(CommercialOfferSummarySchema),
    plans: arrayOrEmpty(PaymentPlanSchema),
@@ -26,9 +26,19 @@ import { ApiEnvelope, unwrap } from "./response_helper";

 export class PaymentApi {
  /** 获取 VIP 与 Top-up 套餐列表。 */
-  async getPlans(commercialOfferId?: string): Promise<PaymentPlansResponse> {
+  async getPlans(
+    commercialOfferId?: string,
+    supportCharacterId?: string,
+  ): Promise<PaymentPlansResponse> {
    const env = await httpClient<ApiEnvelope<unknown>>(ApiPath.paymentPlans, {
-      ...(commercialOfferId ? { query: { commercialOfferId } } : {}),
+      ...(commercialOfferId || supportCharacterId
+        ? {
+            query: {
+              ...(commercialOfferId ? { commercialOfferId } : {}),
+              ...(supportCharacterId ? { supportCharacterId } : {}),
+            },
+          }
+        : {}),
    });
    return PaymentPlansResponseSchema.parse(
      unwrap(env) as Record<string, unknown>,
@@ -50,27 +50,6 @@ export class AppStorage {
    return SpAsyncUtil.setString(StorageKeys.lastAppInfoReported, todayString);
  }

-  // ---- first recharge offer banner ----
-
-  static async getFirstRechargeOfferBannerDismissed(
-    userId: string | null | undefined,
-  ): Promise<ResultT<boolean>> {
-    const r = await SpAsyncUtil.getBool(
-      AppStorage.firstRechargeOfferBannerDismissedKey(userId),
-    );
-    if (!r.success) return r;
-    return Result.ok(r.data === true);
-  }
-
-  static recordFirstRechargeOfferBannerDismissed(
-    userId: string | null | undefined,
-  ): Promise<ResultT<void>> {
-    return SpAsyncUtil.setBool(
-      AppStorage.firstRechargeOfferBannerDismissedKey(userId),
-      true,
-    );
-  }
-
  // ---- internal helpers ----

  /**
@@ -89,11 +68,4 @@ export class AppStorage {
    return Result.ok(r.data === null || r.data !== todayString);
  }

-  private static firstRechargeOfferBannerDismissedKey(
-    userId: string | null | undefined,
-  ): string {
-    return `${StorageKeys.firstRechargeOfferBannerDismissed}:${
-      userId || "anonymous"
-    }`;
-  }
 }
@@ -33,7 +33,6 @@ export const StorageKeys = {
  pwaDialogShown: "pwa_dialog_shown",
  lastPwaEventReported: "last_pwa_event_reported",
  lastAppInfoReported: "last_app_info_reported",
-  firstRechargeOfferBannerDismissed: "first_recharge_offer_banner_dismissed",

  // payment
  pendingPaymentOrder: "pending_payment_order",
@@ -17,6 +17,17 @@ describe("payment analytics context", () => {
      entryPoint: "chat_unlock",
      triggerReason: "ad_landing",
    });
+
+    expect(
+      parsePaymentAnalyticsContext({
+        entryPoint: "chat_offer_banner",
+        triggerReason: "commercial_offer",
+        subscriptionType: "vip",
+      }),
+    ).toEqual({
+      entryPoint: "chat_offer_banner",
+      triggerReason: "commercial_offer",
+    });
  });

  it("falls back independently for invalid query values", () => {
@@ -7,6 +7,7 @@ export type PaymentAnalyticsTriggerReason =
  | "insufficient_credits"
  | "profile_recharge"
  | "vip_cta"
+  | "commercial_offer"
  | "ad_landing"
  | "manual_recharge"
  | "unknown";
@@ -47,6 +48,7 @@ const TRIGGER_REASONS = new Set<PaymentAnalyticsTriggerReason>([
  "insufficient_credits",
  "profile_recharge",
  "vip_cta",
+  "commercial_offer",
  "ad_landing",
  "manual_recharge",
  "unknown",
@@ -1,16 +0,0 @@
-"use client";
-
-import { AppStorage } from "@/data/storage/app/app_storage";
-
-export async function getFirstRechargeOfferBannerDismissed(
-  userId: string | null | undefined,
-): Promise<boolean> {
-  const result = await AppStorage.getFirstRechargeOfferBannerDismissed(userId);
-  return result.success ? result.data : false;
-}
-
-export function recordFirstRechargeOfferBannerDismissed(
-  userId: string | null | undefined,
-): Promise<unknown> {
-  return AppStorage.recordFirstRechargeOfferBannerDismissed(userId);
-}
@@ -9,6 +9,21 @@ import {
  shouldBindExternalFacebookIdentity,
 } from "../external_entry";

+const facebookBusinessEntryCases = [
+  ["private-space", "elio", "chat", null, null, getCharacterRoutes("elio").chat, null],
+  ["private-space", "maya", "chat", null, null, getCharacterRoutes("maya").chat, null],
+  ["private-space", "nayeli", "chat", null, null, getCharacterRoutes("nayeli").chat, null],
+  ["voice", "elio", "chat", "promotion", "voice", getCharacterRoutes("elio").chat, "voice"],
+  ["voice", "maya", "chat", "promotion", "voice", getCharacterRoutes("maya").chat, "voice"],
+  ["voice", "nayeli", "chat", "promotion", "voice", getCharacterRoutes("nayeli").chat, "voice"],
+  ["image-pack", "elio", "private-zone", null, null, getCharacterRoutes("elio").privateZone, null],
+  ["image-pack", "maya", "private-zone", null, null, getCharacterRoutes("maya").privateZone, null],
+  ["image-pack", "nayeli", "private-zone", null, null, getCharacterRoutes("nayeli").privateZone, null],
+  ["coffee", "elio", "tip", null, null, getCharacterRoutes("elio").tip, null],
+  ["coffee", "maya", "tip", null, null, getCharacterRoutes("maya").tip, null],
+  ["coffee", "nayeli", "tip", null, null, getCharacterRoutes("nayeli").tip, null],
+] as const;
+
 describe("external entry navigation", () => {
  it("defaults to chat", () => {
    expect(resolveExternalEntryTarget({})).toBe(ROUTES.chat);
@@ -62,6 +77,26 @@ describe("external entry navigation", () => {
    ).toBe(getCharacterRoutes("elio").privateZone);
  });

+  it.each(facebookBusinessEntryCases)(
+    "routes Facebook business entry %s for %s",
+    (
+      _entry,
+      character,
+      target,
+      mode,
+      promotionType,
+      expectedDestination,
+      expectedPromotionType,
+    ) => {
+      expect(resolveExternalEntryDestination({ target, character })).toBe(
+        expectedDestination,
+      );
+      expect(
+        resolveExternalEntryPromotionType({ mode, promotionType }),
+      ).toBe(expectedPromotionType);
+    },
+  );
+
  it.each([
    ["chat", "elio", getCharacterRoutes("elio").chat],
    ["chat", "maya", getCharacterRoutes("maya").chat],
@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from "vitest";

 import {
  getPaymentUrl,
+  getPaymentUrlHostname,
  getStripeClientSecret,
  isEzpayPayment,
  launchEzpayRedirect,
@@ -43,36 +44,103 @@ describe("payment launch helpers", () => {
    ).toBeNull();
  });

-  it("resolves Ezpay URL and QR launch parameters without treating QR data as a URL", () => {
+  it("prioritizes a hosted GCash URL for Philippine checkout", () => {
    expect(
      resolveEzpayLaunchTarget({
        provider: "ezpay",
        channelType: "URL",
-        payData: "https://pay.example/qris",
-      }),
-    ).toEqual({ kind: "url", paymentUrl: "https://pay.example/qris" });
+        payData: "https://pay.example/gcash",
+      }, { countryCode: "PH", currency: "PHP" }),
+    ).toEqual({ kind: "url", paymentUrl: "https://pay.example/gcash" });
+
    expect(
      resolveEzpayLaunchTarget({
        provider: "ezpay",
        channelType: "QR",
-        payData: "00020101021226670016COM.NOBUBANK.WWW",
-      }),
+        payData: "000201010212ph-qr-payload",
+        cashierUrl: "https://pay.example/gcash-hosted",
+      }, { countryCode: "PH" }),
+    ).toEqual({
+      kind: "url",
+      paymentUrl: "https://pay.example/gcash-hosted",
+    });
+  });
+
+  it("keeps a usable QR Ph fallback without calling it QRIS", () => {
+    expect(
+      resolveEzpayLaunchTarget(
+        {
+          provider: "ezpay",
+          channelType: "QR",
+          payData: "000201010212ph-qr-payload",
+        },
+        { currency: "PHP" },
+      ),
    ).toEqual({
      kind: "qr",
+      experience: "gcashQrPh",
+      qrData: "000201010212ph-qr-payload",
+    });
+
+    expect(
+      resolveEzpayLaunchTarget(
+        {
+          provider: "ezpay",
+          payData: "000201010212ph-qr-payload",
+        },
+        { countryCode: "PH" },
+      ),
+    ).toEqual({
+      kind: "qr",
+      experience: "gcashQrPh",
+      qrData: "000201010212ph-qr-payload",
+    });
+  });
+
+  it("keeps Indonesian QRIS ahead of an optional hosted URL", () => {
+    expect(
+      resolveEzpayLaunchTarget(
+        {
+          provider: "ezpay",
+          channelType: "QR",
+          payData: "00020101021226670016COM.NOBUBANK.WWW",
+          cashierUrl: "https://pay.example/indonesia",
+        },
+        { countryCode: "ID", currency: "IDR" },
+      ),
+    ).toEqual({
+      kind: "qr",
+      experience: "qris",
      qrData: "00020101021226670016COM.NOBUBANK.WWW",
    });
+  });
+
+  it("reports a regional error only when both URL and QR data are absent", () => {
    expect(
-      resolveEzpayLaunchTarget({
-        provider: "ezpay",
-        channelType: "QR",
-        payData: "",
-      }),
+      resolveEzpayLaunchTarget(
+        {
+          provider: "ezpay",
+          channelType: "QR",
+          payData: "",
+        },
+        { countryCode: "PH" },
+      ),
    ).toEqual({
      kind: "error",
-      errorMessage: "QRIS payment data is missing. Please try again.",
+      errorMessage:
+        "GCash / QR Ph payment data is missing. Please try again.",
    });
  });

+  it("keeps diagnostics to the payment URL hostname", () => {
+    expect(
+      getPaymentUrlHostname(
+        "https://pay.example/gcash?token=must-not-appear-in-logs",
+      ),
+    ).toBe("pay.example");
+    expect(getPaymentUrlHostname("not-a-url")).toBeNull();
+  });
+
  it("rejects VA and unknown Ezpay channel types with explicit errors", () => {
    expect(
      resolveEzpayLaunchTarget({ provider: "ezpay", channelType: "VA" }),
@@ -13,9 +13,20 @@ const log = new Logger("LibPaymentPaymentLaunch");

 export type EzpayLaunchTarget =
  | { kind: "url"; paymentUrl: string }
-  | { kind: "qr"; qrData: string }
+  | {
+      kind: "qr";
+      experience: EzpayQrExperience;
+      qrData: string;
+    }
  | { kind: "error"; errorMessage: string };

+export type EzpayQrExperience = "gcashQrPh" | "qris" | "paymentQr";
+
+export interface ResolveEzpayLaunchContext {
+  countryCode?: string | null;
+  currency?: string | null;
+}
+
 function getNonEmptyString(
  payParams: Record<string, unknown>,
  ...keys: string[]
@@ -41,6 +52,12 @@ function getHttpPaymentUrl(value: string | null): string | null {
  }
 }

+export function getPaymentUrlHostname(value: string | null): string | null {
+  const paymentUrl = getHttpPaymentUrl(value);
+  if (!paymentUrl) return null;
+  return new URL(paymentUrl).hostname;
+}
+
 export function getPaymentUrl(payParams: Record<string, unknown>): string | null {
  const keys = [
    "cashierUrl",
@@ -71,6 +88,7 @@ export function isEzpayPayment(payParams: Record<string, unknown>): boolean {

 export function resolveEzpayLaunchTarget(
  payParams: Record<string, unknown>,
+  context: ResolveEzpayLaunchContext = {},
 ): EzpayLaunchTarget {
  const rawChannelType = getNonEmptyString(
    payParams,
@@ -79,13 +97,33 @@ export function resolveEzpayLaunchTarget(
  );
  const channelType = rawChannelType?.toUpperCase() ?? null;
  const payData = getNonEmptyString(payParams, "payData", "pay_data");
+  const payDataUrl = getHttpPaymentUrl(payData);
+  const namedPaymentUrl = getHttpPaymentUrl(getPaymentUrl(payParams));
+  const paymentUrl = payDataUrl ?? namedPaymentUrl;
+  const qrData = payData && !payDataUrl ? payData : null;
+  const region = resolveEzpayRegion(payParams, context);
+
+  if (
+    region === "ph" &&
+    paymentUrl &&
+    (channelType === "QR" || channelType === "URL" || channelType === null)
+  ) {
+    return { kind: "url", paymentUrl };
+  }

  if (channelType === "QR") {
-    return payData
-      ? { kind: "qr", qrData: payData }
+    if (qrData) {
+      return {
+        kind: "qr",
+        experience: resolveEzpayQrExperience(region),
+        qrData,
+      };
+    }
+    return paymentUrl
+      ? { kind: "url", paymentUrl }
      : {
          kind: "error",
-          errorMessage: "QRIS payment data is missing. Please try again.",
+          errorMessage: regionalQrMissingMessage(region),
        };
  }

@@ -97,8 +135,6 @@ export function resolveEzpayLaunchTarget(
  }

  if (channelType === "URL") {
-    const paymentUrl =
-      getHttpPaymentUrl(payData) ?? getHttpPaymentUrl(getPaymentUrl(payParams));
    return paymentUrl
      ? { kind: "url", paymentUrl }
      : {
@@ -114,14 +150,66 @@ export function resolveEzpayLaunchTarget(
    };
  }

-  const legacyPaymentUrl = getHttpPaymentUrl(getPaymentUrl(payParams));
-  return legacyPaymentUrl
-    ? { kind: "url", paymentUrl: legacyPaymentUrl }
-    : {
-        kind: "error",
-        errorMessage:
-          "Ezpay payment parameters did not include a supported URL or QRIS code.",
-      };
+  if (paymentUrl) return { kind: "url", paymentUrl };
+  if (qrData && region !== null) {
+    return {
+      kind: "qr",
+      experience: resolveEzpayQrExperience(region),
+      qrData,
+    };
+  }
+  return {
+    kind: "error",
+    errorMessage:
+      "Ezpay payment parameters did not include a supported URL or payment QR code.",
+  };
+}
+
+function resolveEzpayRegion(
+  payParams: Record<string, unknown>,
+  context: ResolveEzpayLaunchContext,
+): "ph" | "id" | null {
+  const currency = (
+    context.currency ?? getNonEmptyString(payParams, "currency")
+  )
+    ?.trim()
+    .toUpperCase();
+  if (currency === "PHP") return "ph";
+  if (currency === "IDR") return "id";
+
+  const countryCode = (
+    context.countryCode ??
+    getNonEmptyString(
+      payParams,
+      "purchaseCountryCode",
+      "purchase_country_code",
+      "countryCode",
+      "country_code",
+    )
+  )
+    ?.trim()
+    .toUpperCase();
+  if (countryCode === "PH") return "ph";
+  if (countryCode === "ID") return "id";
+  return null;
+}
+
+function resolveEzpayQrExperience(
+  region: "ph" | "id" | null,
+): EzpayQrExperience {
+  if (region === "ph") return "gcashQrPh";
+  if (region === "id") return "qris";
+  return "paymentQr";
+}
+
+function regionalQrMissingMessage(region: "ph" | "id" | null): string {
+  if (region === "ph") {
+    return "GCash / QR Ph payment data is missing. Please try again.";
+  }
+  if (region === "id") {
+    return "QRIS payment data is missing. Please try again.";
+  }
+  return "Payment QR data is missing. Please try again.";
 }

 export function getStripeClientSecret(
@@ -166,18 +254,19 @@ export async function launchEzpayRedirect({
  onOpened,
  onFailed,
 }: LaunchEzpayRedirectInput): Promise<void> {
+  const paymentUrlHost = getPaymentUrlHostname(paymentUrl);
  log.debug("[payment-launch] launchEzpayRedirect START", {
    hasOrderId: Boolean(orderId),
    orderId,
    subscriptionType,
-    paymentUrl,
+    paymentUrlHost,
  });

  if (!orderId) {
    const errorMessage = "Missing order id before opening Ezpay.";
    log.error("[payment-launch] pending ezpay order save skipped", {
      subscriptionType,
-      paymentUrl,
+      paymentUrlHost,
      errorMessage,
    });
    onFailed(errorMessage);
@@ -20,6 +20,8 @@ export interface OpenSubscriptionInput {
  replace?: boolean;
  analytics?: PaymentAnalyticsContext;
  chatActionId?: string;
+  planId?: string;
+  commercialOfferId?: string;
 }

 export interface StartMessageUnlockInput {
@@ -80,6 +80,8 @@ export function useGlobalAppNavigator(): GlobalAppNavigator {
      replace: shouldReplace = false,
      analytics = getDefaultPaymentAnalyticsContext(type),
      chatActionId,
+      planId,
+      commercialOfferId,
    }: OpenGlobalSubscriptionInput): void => {
      const target = ROUTE_BUILDERS.subscription(type, {
        payChannel,
@@ -87,6 +89,8 @@ export function useGlobalAppNavigator(): GlobalAppNavigator {
        sourceCharacterSlug,
        analytics,
        chatActionId,
+        planId,
+        commercialOfferId,
      });

      behaviorAnalytics.rechargeModalOpen(analytics);
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+
+import { appendCommercialMessage } from "../helper/commercial-message";
+
+describe("chat commercial message", () => {
+  const incoming = {
+    messageId: "payment-thanks-1",
+    message: "Thank you for supporting me.",
+    characterId: "maya-tan",
+    createdAt: "2026-07-28T08:30:00.000Z",
+  };
+
+  it("appends one persisted payment thank-you to the matching character chat", () => {
+    const messages = appendCommercialMessage([], "maya-tan", incoming);
+
+    expect(messages).toHaveLength(1);
+    expect(messages[0]).toMatchObject({
+      remoteId: "payment-thanks-1",
+      content: "Thank you for supporting me.",
+      isFromAI: true,
+    });
+  });
+
+  it("ignores duplicate delivery and a message for another character", () => {
+    const messages = appendCommercialMessage([], "maya-tan", incoming);
+
+    expect(appendCommercialMessage(messages, "maya-tan", incoming)).toEqual(
+      messages,
+    );
+    expect(appendCommercialMessage(messages, "elio", incoming)).toEqual(
+      messages,
+    );
+  });
+});
@@ -116,7 +116,7 @@ describe("sendResponseToUiMessage", () => {
          copy: "Buy me a coffee?",
          ctaLabel: "View gifts",
          target: "giftCatalog",
-          ruleId: "coffee_support_question",
+          ruleId: "coffee_after_thanks",
        },
      }),
    );
@@ -127,7 +127,7 @@ describe("sendResponseToUiMessage", () => {
      copy: "Buy me a coffee?",
      ctaLabel: "View gifts",
      target: "giftCatalog",
-      ruleId: "coffee_support_question",
+      ruleId: "coffee_after_thanks",
    });
  });

@@ -28,6 +28,15 @@ export type ChatEvent =
    }
  | { type: "ChatOlderHistoryLoadFailed"; error: unknown }
  | { type: "ChatHistoryRefreshRequested" }
+  | {
+      type: "ChatCommercialMessageReceived";
+      message: {
+        messageId: string;
+        message: string;
+        characterId: string;
+        createdAt: string;
+      };
+    }
  // Chat domain events.
  | { type: "ChatSendMessage"; content: string }
  | { type: "ChatSendImage"; imageBase64: string }
@@ -0,0 +1,30 @@
+import { createRemoteUiMessageIdentity, type UiMessage } from "../ui-message";
+import { todayString } from "@/utils/date";
+
+export interface IncomingCommercialMessage {
+  messageId: string;
+  message: string;
+  characterId: string;
+  createdAt: string;
+}
+
+export function appendCommercialMessage(
+  messages: readonly UiMessage[],
+  activeCharacterId: string,
+  incoming: IncomingCommercialMessage,
+): UiMessage[] {
+  if (incoming.characterId !== activeCharacterId) return [...messages];
+  if (messages.some((message) => message.remoteId === incoming.messageId)) {
+    return [...messages];
+  }
+  const createdAt = new Date(incoming.createdAt);
+  return [
+    ...messages,
+    {
+      ...createRemoteUiMessageIdentity(incoming.messageId, true),
+      content: incoming.message,
+      isFromAI: true,
+      date: todayString(Number.isNaN(createdAt.getTime()) ? new Date() : createdAt),
+    },
+  ];
+}
@@ -1,4 +1,5 @@
 import { createChatPromotionState } from "../helper/promotion";
+import { appendCommercialMessage } from "../helper/commercial-message";
 import { shouldPromptUnlockHistory } from "../helper/unlock";
 import { createInitialChatState } from "../chat-state";
 import {
@@ -53,6 +54,19 @@ const injectPromotionAction = unlockMachineSetup.assign(({ event }) => {

 const clearPromotionAction = unlockMachineSetup.assign({ promotion: null });

+const appendCommercialMessageAction = unlockMachineSetup.assign(
+  ({ context, event }) => {
+    if (event.type !== "ChatCommercialMessageReceived") return {};
+    return {
+      messages: appendCommercialMessage(
+        context.messages,
+        context.characterId,
+        event.message,
+      ),
+    };
+  },
+);
+
 export const chatMachineSetup = unlockMachineSetup.extend({
  actions: {
    startGuestSession: startGuestSessionAction,
@@ -60,6 +74,7 @@ export const chatMachineSetup = unlockMachineSetup.extend({
    clearChatSession: clearChatSessionAction,
    injectPromotion: injectPromotionAction,
    clearPromotion: clearPromotionAction,
+    appendCommercialMessage: appendCommercialMessageAction,
  },
 });

@@ -258,6 +273,7 @@ export const chatRootStateConfig = chatMachineSetup.createStateConfig({
  on: {
    ChatPromotionInjected: { actions: "injectPromotion" },
    ChatPromotionCleared: { actions: "clearPromotion" },
+    ChatCommercialMessageReceived: { actions: "appendCommercialMessage" },
  },
  states: {
    idle: idleState,
@@ -105,6 +105,29 @@ describe("payment order flow", () => {
    actor.stop();
  });

+  it.each(["elio", "maya-tan", "nayeli-cervantes"])(
+    "binds a default VIP or credit order to the source chat character %s",
+    async (characterId) => {
+      const createOrderSpy = vi.fn<CreateOrderSpy>();
+      const actor = createActor(
+        createTestPaymentMachine({ createOrderSpy }),
+      ).start();
+      actor.send({ type: "PaymentInit", characterId });
+      await waitFor(actor, (snapshot) => snapshot.matches("ready"));
+
+      actor.send({ type: "PaymentCreateOrderSubmitted" });
+      await waitFor(actor, (snapshot) => snapshot.matches("paid"));
+
+      expect(createOrderSpy).toHaveBeenCalledWith({
+        planId: "vip_monthly",
+        payChannel: "stripe",
+        autoRenew: true,
+        recipientCharacterId: characterId,
+      });
+      actor.stop();
+    },
+  );
+
  it("carries the originating chat action into order creation", async () => {
    const createOrderSpy = vi.fn<CreateOrderSpy>();
    const actor = createActor(
@@ -278,6 +301,37 @@ describe("payment order flow", () => {
    actor.stop();
  });

+  it("can abandon a pending QRIS order and switch to Stripe", async () => {
+    const createOrderSpy = vi.fn<CreateOrderSpy>();
+    const actor = createActor(
+      createTestPaymentMachine({ createOrderSpy, orderStatus: "pending" }),
+    ).start();
+    await initialize(actor);
+    actor.send({ type: "PaymentPayChannelChanged", payChannel: "ezpay" });
+    actor.send({ type: "PaymentCreateOrderSubmitted" });
+    await waitFor(actor, (snapshot) => snapshot.matches("waitingForPayment"));
+
+    actor.send({ type: "PaymentPayChannelChanged", payChannel: "stripe" });
+    await waitFor(actor, (snapshot) => snapshot.matches("ready"));
+
+    expect(actor.getSnapshot().context).toMatchObject({
+      payChannel: "stripe",
+      currentOrderId: null,
+      payParams: null,
+      orderStatus: null,
+      orderPollingStartedAt: null,
+    });
+
+    actor.send({ type: "PaymentCreateOrderSubmitted" });
+    await waitFor(actor, (snapshot) => snapshot.matches("waitingForPayment"));
+    expect(createOrderSpy).toHaveBeenNthCalledWith(2, {
+      planId: "vip_monthly",
+      payChannel: "stripe",
+      autoRenew: true,
+    });
+    actor.stop();
+  });
+
  it("moves to failed when polling reports failure", async () => {
    const actor = createActor(
      createTestPaymentMachine({ orderStatus: "failed" }),
@@ -136,12 +136,20 @@ export function consumeFirstRechargeState(
  context: PaymentState,
 ): Pick<
  PaymentState,
-  "plans" | "isFirstRecharge" | "selectedPlanId" | "autoRenew" | "errorMessage"
+  | "plans"
+  | "isFirstRecharge"
+  | "commercialOffer"
+  | "commercialOfferId"
+  | "selectedPlanId"
+  | "autoRenew"
+  | "errorMessage"
 > {
  const plans = context.plans.map(consumeFirstRechargePlan);
  return {
    ...refreshPlansState(plans, context.selectedPlanId),
    isFirstRecharge: false,
+    commercialOffer: null,
+    commercialOfferId: null,
  };
 }

@@ -8,9 +8,9 @@ import type { PaymentPlanCatalog } from "../../payment-state";

 export const loadCachedPaymentPlansActor = fromPromise<
  PaymentPlansResponse | null,
-  { catalog: PaymentPlanCatalog; commercialOfferId?: string | null }
+  { catalog: PaymentPlanCatalog; commercialOfferId?: string | null; supportCharacterId?: string | null }
 >(async ({ input }) => {
-  if (input.catalog === "tip" || input.commercialOfferId) return null;
+  if (input.catalog === "tip" || input.commercialOfferId || input.supportCharacterId) return null;
  const result = await getPaymentRepository().getCachedPlans();
  if (Result.isErr(result)) throw result.error;
  return result.data;
@@ -18,13 +18,16 @@ export const loadCachedPaymentPlansActor = fromPromise<

 export const refreshPaymentPlansActor = fromPromise<
  PaymentPlansResponse,
-  { catalog: PaymentPlanCatalog; commercialOfferId?: string | null }
+  { catalog: PaymentPlanCatalog; commercialOfferId?: string | null; supportCharacterId?: string | null }
 >(async ({ input }) => {
  const paymentRepo = getPaymentRepository();
  if (input.catalog === "tip") {
    throw new Error("Gift catalogs must use the gift products actor.");
  }
-  const result = await paymentRepo.getPlans(input.commercialOfferId ?? undefined);
+  const result = await paymentRepo.getPlans(
+    input.commercialOfferId ?? undefined,
+    input.supportCharacterId ?? undefined,
+  );
  if (Result.isErr(result)) throw result.error;
  return result.data;
 });
@@ -29,8 +29,14 @@ function initializeCatalogState(
    planCatalog === "tip"
      ? (event.characterId ?? context.giftCharacterId)
      : null;
+  const supportCharacterId =
+    planCatalog === "default"
+      ? (event.characterId ?? context.supportCharacterId)
+      : null;
  const catalogChanged = planCatalog !== context.planCatalog;
-  const characterChanged = giftCharacterId !== context.giftCharacterId;
+  const characterChanged =
+    giftCharacterId !== context.giftCharacterId ||
+    supportCharacterId !== context.supportCharacterId;
  const selectionChanged =
    planCatalog === "tip" &&
    ((event.category ?? null) !== context.selectedGiftCategory ||
@@ -45,6 +51,7 @@ function initializeCatalogState(
    planCatalog,
    ...(event.payChannel ? { payChannel: event.payChannel } : {}),
    giftCharacterId,
+    supportCharacterId,
    commercialOfferId,
    chatActionId,
    requestedGiftCategory:
@@ -219,6 +226,7 @@ export const loadingCachedPlansState =
      input: ({ context }) => ({
        catalog: context.planCatalog,
        commercialOfferId: context.commercialOfferId,
+        supportCharacterId: context.supportCharacterId,
      }),
      onDone: [
        {
@@ -235,9 +243,10 @@ export const loadingCachedPlansState =
 export const loadingPlansState = catalogMachineSetup.createStateConfig({
  invoke: {
    src: "refreshPlans",
-    input: ({ context }) => ({
-      catalog: context.planCatalog,
-      commercialOfferId: context.commercialOfferId,
+      input: ({ context }) => ({
+        catalog: context.planCatalog,
+        commercialOfferId: context.commercialOfferId,
+        supportCharacterId: context.supportCharacterId,
    }),
    onDone: {
      target: "ready",
@@ -256,6 +265,7 @@ export const refreshingPlansState = catalogMachineSetup.createStateConfig({
    input: ({ context }) => ({
      catalog: context.planCatalog,
      commercialOfferId: context.commercialOfferId,
+      supportCharacterId: context.supportCharacterId,
    }),
    onDone: {
      target: "ready",
@@ -192,8 +192,14 @@ const creatingOrderState = paymentMachineSetup.createStateConfig({
      payChannel: context.payChannel,
      autoRenew: context.autoRenew,
      ...(event.type === "PaymentCreateOrderSubmitted" &&
-      event.recipientCharacterId
-        ? { recipientCharacterId: event.recipientCharacterId }
+      (event.recipientCharacterId || context.supportCharacterId || context.giftCharacterId)
+        ? {
+            recipientCharacterId:
+              event.recipientCharacterId ||
+              context.supportCharacterId ||
+              context.giftCharacterId ||
+              undefined,
+          }
        : {}),
      ...(context.commercialOfferId
        ? { commercialOfferId: context.commercialOfferId }
@@ -259,6 +265,10 @@ const pollingOrderState = paymentMachineSetup.createStateConfig({
    },
  },
  on: {
+    PaymentPayChannelChanged: {
+      target: "ready",
+      actions: "changePayChannel",
+    },
    PaymentReset: {
      target: "ready",
      actions: "resetOrder",
@@ -271,6 +281,10 @@ const waitingForPaymentState = paymentMachineSetup.createStateConfig({
    [POLL_DELAY_MS]: "pollingOrder",
  },
  on: {
+    PaymentPayChannelChanged: {
+      target: "ready",
+      actions: "changePayChannel",
+    },
    PaymentReset: {
      target: "ready",
      actions: "resetOrder",
@@ -17,6 +17,7 @@ export interface PaymentState {
  giftCategories: readonly GiftCategory[];
  giftProducts: readonly GiftProduct[];
  giftCharacterId: string | null;
+  supportCharacterId: string | null;
  selectedGiftCategory: string | null;
  requestedGiftCategory: string | null;
  requestedGiftPlanId: string | null;
@@ -45,6 +46,7 @@ export const initialState: PaymentState = {
  giftCategories: [],
  giftProducts: [],
  giftCharacterId: null,
+  supportCharacterId: null,
  selectedGiftCategory: null,
  requestedGiftCategory: null,
  requestedGiftPlanId: null,
Author	SHA1	Message	Date
Codex	cdf225bfab	feat(payment): show account conversion discounts Docker Image / Build and Push Docker Image (push) Successful in 3m2s Details	2026-07-30 12:43:37 +08:00
Codex	599f3e3d26	fix(payment): route Philippine GCash separately from QRIS Docker Image / Build and Push Docker Image (push) Successful in 2m12s Details	2026-07-29 19:21:07 +08:00
Codex	2e04260ebd	revert(payment): remove unsupported Stripe and EzPay upgrade Docker Image / Build and Push Docker Image (push) Successful in 2m15s Details	2026-07-29 18:15:20 +08:00
Codex	ba6d3605b7	ci: encode domestic SSH key secret	2026-07-29 18:15:20 +08:00
Codex	17fad9ecc0	ci: add isolated domestic frontend deployment	2026-07-29 18:15:20 +08:00
Codex	fbcd5abe22	feat(external-entry): define Facebook business links	2026-07-29 18:15:20 +08:00
Codex	dae04f75dc	fix(payment): restore wallet order and English labels Docker Image / Build and Push Docker Image (push) Successful in 2m1s Details	2026-07-29 15:29:22 +08:00
Codex	8f8e067d82	fix(payment): allow Stripe after closing QRIS Docker Image / Build and Push Docker Image (push) Successful in 2m4s Details	2026-07-29 14:33:53 +08:00
Codex	3c74d30189	fix(payment): keep character and mobile actions visible Docker Image / Build and Push Docker Image (push) Successful in 2m3s Details	2026-07-29 13:11:33 +08:00
Codex	4cbdd0da7c	fix(payment): resume QRIS after closing dialog Docker Image / Build and Push Docker Image (push) Successful in 2m5s Details	2026-07-29 12:27:56 +08:00
Codex	e071f83474	feat(payment): confirm renewal only at checkout Docker Image / Build and Push Docker Image (push) Successful in 2m9s Details	2026-07-29 11:32:23 +08:00
Codex	3536045794	fix(payment): inherit chat recipient without selector Docker Image / Build and Push Docker Image (push) Successful in 2m42s Details	2026-07-28 19:37:58 +08:00
Codex	74b7eae18b	feat(payment): add chat support discounts and gratitude Docker Image / Build and Push Docker Image (push) Successful in 2m14s Details (cherry picked from commit `ef9b79bc83`)	2026-07-28 17:54:36 +08:00
Codex	59e4eac736	feat(payment): expand Stripe methods and checkout handoff Docker Image / Build and Push Docker Image (push) Successful in 2m10s Details	2026-07-28 16:48:11 +08:00
Codex	2e402de15b	feat(payment): accept support character guidance scene Docker Image / Build and Push Docker Image (push) Successful in 2m5s Details	2026-07-28 12:16:28 +08:00
Codex	a530850039	fix(payment): hide first recharge banner Docker Image / Build and Push Docker Image (push) Successful in 2m11s Details	2026-07-28 11:15:21 +08:00