29 Commits

Author SHA1 Message Date
Codex ed822c159f chore(release): promote pre changes to production main
Docker Image / Build and Push Docker Image (push) Successful in 2m20s
2026-07-28 10:57:09 +08:00
Codex d5b7a1f36c feat(private-zone): default to albums tab
Docker Image / Build and Push Docker Image (push) Successful in 2m17s
(cherry picked from commit a2cf62f78b)
2026-07-27 19:31:03 +08:00
Codex 9f829bbc0e fix(payment): portal checkout dialogs to viewport
(cherry picked from commit 67f292353e)
2026-07-27 19:29:36 +08:00
Codex d01441b8c7 fix(ci): deploy frontend production as lzf
Docker Image / Build and Push Docker Image (push) Successful in 2m45s
2026-07-27 16:54:17 +08:00
Codex ddacd03601 test(release): align selected production e2e assertions 2026-07-27 16:40:52 +08:00
Codex 1b121a8ef8 test(chat): enforce locked image URL masking 2026-07-27 16:12:12 +08:00
Codex b7221f2f70 feat(subscription): separate selection from payment and add issue feedback
(cherry picked from commit fe9d31146b)
2026-07-27 16:12:12 +08:00
Codex 30f88d3a20 fix(external-entry): preserve legacy private room links 2026-07-27 16:11:24 +08:00
Codex 7b09a7f850 feat(chat): send idempotent client message ids 2026-07-27 16:11:24 +08:00
Codex 38a4645b9c feat(private-zone): add paid video moments 2026-07-27 16:11:24 +08:00
Codex 76bffc1a0d feat(chat): add support action cards and live entitlements 2026-07-27 16:11:23 +08:00
Codex 19b8fc51d6 feat(call): add streaming voice call experience 2026-07-27 16:11:23 +08:00
Codex 9fbf180df6 fix(ci): scope frontend image cleanup 2026-07-27 16:11:23 +08:00
Codex 6721b6eb43 feat(payment): support user-bound seven-discount offers 2026-07-27 16:11:22 +08:00
Codex 64ba720121 feat(mobile): improve image viewer and install entry
Docker Image / Build and Push Docker Image (push) Successful in 1m58s
(cherry picked from commit 556bfd2919)
2026-07-24 14:54:57 +08:00
Codex b04ef58855 fix(pwa): 统一桌面安装图标
Docker Image / Build and Push Docker Image (push) Successful in 2m1s
(cherry picked from commit 29abd746da)
(cherry picked from commit 8660fe7b7e)
2026-07-24 14:16:56 +08:00
Codex 606e6d60ff fix(chat): debounce post-send action menu
Docker Image / Build and Push Docker Image (push) Successful in 1m56s
2026-07-23 20:03:26 +08:00
Codex c659c5fc3f test(e2e): align simplified splash expectations
Docker Image / Build and Push Docker Image (push) Successful in 3m4s
2026-07-23 19:33:08 +08:00
Codex 537a0a2c36 feat(chat): render commercial actions and persist greetings 2026-07-23 19:19:05 +08:00
Codex b1f52c68e8 feat(splash): simplify multi-character home layout 2026-07-23 19:19:05 +08:00
Codex 3c7b0c30e0 refactor(private-zone): use canonical product name 2026-07-23 19:19:05 +08:00
Codex 469512df18 feat(navigation): add favorite entry and Menu tab 2026-07-23 19:18:42 +08:00
Codex 318e4991be fix(ci): install pnpm from configured registry 2026-07-23 19:17:58 +08:00
Codex 2d432e5367 fix(ci): use reachable pnpm registry for Docker builds 2026-07-23 19:17:58 +08:00
Codex d6f104ee3f fix(private-zone): hide incomplete albums and refresh Maya cover
Docker Image / Build and Push Docker Image (push) Successful in 2m12s
2026-07-23 12:31:44 +08:00
Codex 9ca56c2a04 refactor(private-zone): use canonical product name 2026-07-23 12:31:44 +08:00
Codex 4639acf232 fix(multi-role): enable Maya and Nayeli commercial flows 2026-07-23 12:29:22 +08:00
Codex bdd53a6ea1 docs(private-zoom): remove legacy literal [skip ci] 2026-07-22 19:34:28 +08:00
Codex fb9e30cfd1 docs(private-zoom): record verified rollout [skip ci] 2026-07-22 19:32:16 +08:00
71 changed files with 1070 additions and 2421 deletions
-138
View File
@@ -1,138 +0,0 @@
name: Deploy frontend to domestic test
on:
workflow_dispatch:
jobs:
deploy:
name: Build and deploy isolated domestic test
runs-on: gitea-label
container:
image: cozsweet-act-runner-node24-docker:latest
env:
NEXT_TELEMETRY_DISABLED: "1"
SENTRY_UPLOAD_SOURCEMAPS: "0"
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Validate domestic SSH configuration
env:
SSH_HOST: ${{ secrets.DOMESTIC_TEST_SSH_HOST }}
SSH_PORT: ${{ secrets.DOMESTIC_TEST_SSH_PORT }}
SSH_PRIVATE_KEY_B64: ${{ secrets.DOMESTIC_TEST_SSH_PRIVATE_KEY_B64 }}
SSH_KNOWN_HOSTS: ${{ secrets.DOMESTIC_TEST_SSH_KNOWN_HOSTS }}
run: |
set -eu
if [ -z "$SSH_HOST" ] || [ -z "$SSH_PRIVATE_KEY_B64" ] || [ -z "$SSH_KNOWN_HOSTS" ]; then
echo "Missing domestic test SSH secrets" >&2
exit 1
fi
mkdir -p "$HOME/.ssh"
chmod 700 "$HOME/.ssh"
printf '%s' "$SSH_PRIVATE_KEY_B64" | base64 -d > "$HOME/.ssh/domestic_test_deploy_key"
printf '%s\n' "$SSH_KNOWN_HOSTS" > "$HOME/.ssh/known_hosts"
chmod 600 "$HOME/.ssh/domestic_test_deploy_key" "$HOME/.ssh/known_hosts"
- name: Prepare domestic test environment
env:
TEST_ENV_FILE_CONTENT: ${{ secrets.TEST_ENV_FILE }}
run: |
set -eu
if [ -z "$TEST_ENV_FILE_CONTENT" ]; then
echo "Missing existing secret: TEST_ENV_FILE" >&2
exit 1
fi
umask 077
printf '%s\n' "$TEST_ENV_FILE_CONTENT" > .env.domestic-test
replace_env() {
key="$1"
value="$2"
awk -v key="$key" -v value="$value" '
BEGIN { replaced = 0 }
$0 ~ "^" key "=" { print key "=" value; replaced = 1; next }
{ print }
END { if (!replaced) print key "=" value }
' .env.domestic-test > .env.domestic-test.next
mv .env.domestic-test.next .env.domestic-test
}
replace_env NEXT_PUBLIC_APP_ENV test
replace_env NEXT_PUBLIC_API_BASE_URL https://testapi.banlv-ai.com
replace_env NEXT_PUBLIC_WS_BASE_URL wss://testapi.banlv-ai.com/ws
replace_env NEXTAUTH_URL http://127.0.0.1:9135
replace_env NEXTAUTH_URL_INTERNAL http://127.0.0.1:3000
grep -Eq '^AUTH_SECRET=.+$' .env.domestic-test
grep -Eq '^NEXT_PUBLIC_API_BASE_URL=https://testapi\.banlv-ai\.com/?$' .env.domestic-test
grep -Eq '^NEXT_PUBLIC_WS_BASE_URL=wss://testapi\.banlv-ai\.com/ws/?$' .env.domestic-test
- name: Prepare image metadata
run: |
set -eu
SHORT_SHA="$(git rev-parse --short HEAD)"
IMAGE="cozsweet-frontend-domestic-test:test-$SHORT_SHA"
ARCHIVE="cozsweet-frontend-domestic-test-$SHORT_SHA.tar.gz"
{
echo "SHORT_SHA=$SHORT_SHA"
echo "IMAGE=$IMAGE"
echo "ARCHIVE=$ARCHIVE"
} >> "$GITHUB_ENV"
- name: Run frontend quality checks
run: |
set -eu
pnpm install --frozen-lockfile
pnpm lint
pnpm typecheck
pnpm test:contracts
- name: Build and archive runtime image
run: |
set -eu
DOCKER_BUILDKIT=1 docker build \
--secret id=next_env,src=.env.domestic-test \
--build-arg NEXT_ENV_FILE=.env.domestic-test \
-t "$IMAGE" \
.
docker save "$IMAGE" | gzip -1 > "$ARCHIVE"
test -s "$ARCHIVE"
- name: Deploy isolated domestic test container
env:
SSH_HOST: ${{ secrets.DOMESTIC_TEST_SSH_HOST }}
SSH_PORT: ${{ secrets.DOMESTIC_TEST_SSH_PORT }}
run: |
set -eu
DEPLOY_PORT="${SSH_PORT:-22}"
KEY_FILE="$HOME/.ssh/domestic_test_deploy_key"
SSH_TARGET="lzf@$SSH_HOST"
RUN_TOKEN="${GITHUB_RUN_ID:-manual}-${GITHUB_RUN_ATTEMPT:-1}"
DEPLOY_ROOT="/home/lzf/apps/cozsweet-web-test"
REMOTE_TMP="$DEPLOY_ROOT/tmp/actions-$RUN_TOKEN"
REMOTE_ARCHIVE="$REMOTE_TMP/$ARCHIVE"
REMOTE_ENV_FILE="$DEPLOY_ROOT/shared/test.env"
SSH_OPTS="-i $KEY_FILE -p $DEPLOY_PORT -o BatchMode=yes -o IdentitiesOnly=yes"
SCP_OPTS="-i $KEY_FILE -P $DEPLOY_PORT -o BatchMode=yes -o IdentitiesOnly=yes"
cleanup_remote() {
ssh $SSH_OPTS "$SSH_TARGET" \
"rm -f '$REMOTE_ARCHIVE' && rmdir '$REMOTE_TMP' 2>/dev/null || true"
}
trap cleanup_remote EXIT
ssh $SSH_OPTS "$SSH_TARGET" \
"mkdir -p '$DEPLOY_ROOT/current' '$DEPLOY_ROOT/releases/docker' '$DEPLOY_ROOT/shared' '$REMOTE_TMP' && chmod 700 '$DEPLOY_ROOT/shared'"
scp $SCP_OPTS scripts/server/deploy-domestic-test-archive.sh \
"$SSH_TARGET:$DEPLOY_ROOT/current/deploy-domestic-test-archive.sh"
scp $SCP_OPTS .env.domestic-test "$SSH_TARGET:$REMOTE_ENV_FILE"
scp $SCP_OPTS "$ARCHIVE" "$SSH_TARGET:$REMOTE_ARCHIVE"
ssh $SSH_OPTS "$SSH_TARGET" \
"chmod 600 '$REMOTE_ENV_FILE' && chmod 700 '$DEPLOY_ROOT/current/deploy-domestic-test-archive.sh' && '$DEPLOY_ROOT/current/deploy-domestic-test-archive.sh' '$REMOTE_ARCHIVE' '$IMAGE' '$REMOTE_ENV_FILE' 9135"
- name: Cleanup runner artifacts
if: always()
run: |
rm -f .env.domestic-test .env.domestic-test.next "${ARCHIVE:-}" "$HOME/.ssh/domestic_test_deploy_key"
+68 -61
View File
@@ -1,11 +1,11 @@
# 外部入口接入说明 # 外部入口接入说明
Facebook 等外部应用统一通过 `/external-entry` 进入本应用。入口先保存外部身份和短期业务意图,再跳转到对应角色页面并清理地址栏中的入口查询参数。 外部应用通过 `/external-entry` 进入本应用。
| 环境 | APP HOST | | 环境 | APP HOST |
| --- | --- | | --- | --- |
| 预发环境 `pre` | `frontend-test.banlv-ai.com` | | 测试环境 | `frontend-test.banlv-ai.com` |
| 正式环境 `production` | `cozsweet.com` | | 正式环境 | `cozsweet.com` |
入口格式: 入口格式:
@@ -13,78 +13,85 @@ Facebook 等外部应用统一通过 `/external-entry` 进入本应用。入口
https://<APP_HOST>/external-entry?<参数> https://<APP_HOST>/external-entry?<参数>
``` ```
## 当前 Facebook 业务入口 ## 可选参数
当前正式投放固定为 4 类入口乘以 3 个角色,共 12 条链接。Facebook 业务名称与应用页面的对应关系如下: 所有参数均为可选参数。
| Facebook 入口 | 参数组合 | 落地行为 |
| --- | --- | --- |
| 私密空间 | `target=chat` | 进入普通聊天页,不插入任何锁定内容。 |
| 语音 | `target=chat&mode=promotion&promotion_type=voice` | 进入聊天页,并插入一条待解锁语音。 |
| 图片包 | `target=private-zone` | 进入角色的 `private-zone` 图片空间。 |
| 帮忙买咖啡 | `target=tip` | 进入角色的咖啡打赏页。 |
每条正式链接还必须显式传入:
- `character=elio``character=maya``character=nayeli`
- `psid=<PSID>`,其中 `<PSID>` 必须由 Facebook 发送端替换为当前用户经过 URL 编码的 Page-scoped User ID。
完整的 12 条正式发送模板见 [Facebook 12 条外部入口链接清单](./links.md)。
## 参数说明
| 参数 | 可选值或格式 | 用途 | | 参数 | 可选值或格式 | 用途 |
| --- | --- | --- | | --- | --- | --- |
| `target` | `chat``tip``private-zone` | 指定进入的页面;不传或值无效时进入聊天页。 | | `target` | `chat``tip``private-zone` | 指定进入的页面;不传或值无效时进入聊天页。历史值 `private-room` 兼容进入 `private-zone`,新链接不得继续使用。 |
| `character` | `elio``maya``nayeli` | 指定角色;不传或值无效时使用 Elio。正式投放链接必须显式传入。 | | `character` | `elio``maya``nayeli` | 指定角色;不传或值无效时使用 Elio。 |
| `psid` | string | Facebook Page-scoped User ID。Facebook 正式投放链接必须动态传入。 | | `psid` | string | 传入 Facebook Page-scoped User ID。 |
| `mode` | `promotion` | 开启聊天促销模式。 | | `mode` | `promotion` | 开启聊天促销模式。 |
| `promotion_type` | `voice``image``private` | 指定促销消息类型,仅与 `mode=promotion` 一起使用。 | | `promotion_type` | `voice``image``private` | 指定促销消息类型,仅与 `mode=promotion` 一起使用。 |
`mode=promotion` 只有在 `target=chat` 且同时提供有效的 `promotion_type` 时生效。当前 12 条正式投放链接只使用 `promotion_type=voice``image``private` 保留为兼容能力,不属于本次业务清单。 `mode=promotion` 只有在 `target=chat` 且同时提供有效的 `promotion_type` 时生效。
## 四类发送模板 标准私密空间参数是 `target=private-zone`。前端仅为已经发布的旧链接保留 `target=private-room` 兼容;`private_zone` 等其他拼写仍按无效目标处理并回退聊天页。
发送前必须把 `<CHARACTER>` 替换为角色值,把 `<PSID>` 替换为当前 Facebook 用户的真实 PSID;不得把占位符原样发送给用户。
私密空间(普通聊天):
```text
https://<APP_HOST>/external-entry?target=chat&character=<CHARACTER>&psid=<PSID>
```
语音:
```text
https://<APP_HOST>/external-entry?target=chat&character=<CHARACTER>&mode=promotion&promotion_type=voice&psid=<PSID>
```
图片包:
```text
https://<APP_HOST>/external-entry?target=private-zone&character=<CHARACTER>&psid=<PSID>
```
帮忙买咖啡:
```text
https://<APP_HOST>/external-entry?target=tip&character=<CHARACTER>&psid=<PSID>
```
## PSID 与登录状态流程 ## PSID 与登录状态流程
`psid` 可以和任意有效入口参数组合使用。应用会先保存 PSID,再执行登录状态判断和 Facebook Identity 绑定。详细流程见 [PSID 与登录状态流程图](./psid-login-flow.md)。 PSID 保存、登录状态判断和 Facebook Identity 绑定逻辑见 [PSID 与登录状态流程图](./psid-login-flow.md)。
所有参数值都必须进行 URL 编码。入口中禁止传递登录 Token、Page Access Token、App Secret 或其他秘密。 ## 使用示例
## 兼容说明 普通聊天:
- 历史参数 `target=private-room` 继续兼容进入 `private-zone`,但不得用于新投放链接。 ```text
- `private_zone` 等其他拼写仍按无效目标处理并回退聊天页。 https://<APP_HOST>/external-entry?target=chat
- `promotion_type=image``promotion_type=private` 继续由现有代码支持,但不计入当前 12 条 Facebook 业务链接。 ```
- 无效或缺失的 `character` 继续回退 Elio;正式投放模板始终显式传入角色,不能依赖回退。
## 调试与正式清单 进入 Maya 聊天:
```text
https://<APP_HOST>/external-entry?target=chat&character=maya
```
携带 PSID 进入聊天,示例 PSID 为 `27511427698460020`
```text
https://<APP_HOST>/external-entry?target=chat&psid=27511427698460020
```
语音促销聊天:
```text
https://<APP_HOST>/external-entry?target=chat&mode=promotion&promotion_type=voice
```
图片促销聊天:
```text
https://<APP_HOST>/external-entry?target=chat&mode=promotion&promotion_type=image
```
私密文本促销聊天:
```text
https://<APP_HOST>/external-entry?target=chat&mode=promotion&promotion_type=private
```
咖啡打赏:
```text
https://<APP_HOST>/external-entry?target=tip
```
私密空间:
```text
https://<APP_HOST>/external-entry?target=private-zone
```
进入 Nayeli 私密空间:
```text
https://<APP_HOST>/external-entry?target=private-zone&character=nayeli
```
`psid` 可以与任意 `target` 或聊天促销参数组合使用。参数值需要进行 URL 编码,不要在入口中传递登录 Token、Page Access Token 或 App Secret。
完整可点击示例:
- [本地调试链接清单](./debug-links.md) - [本地调试链接清单](./debug-links.md)
- [Facebook 12 条外部入口链接清单](./links.md) - [测试环境和正式环境链接清单](./links.md)
+53 -39
View File
@@ -1,52 +1,66 @@
# Facebook 12 条外部入口链接清单 # 外部入口链接清单
本清单是 Facebook 正式投放的唯一业务链接清单,共 4 类入口乘以 3 个角色,合计 12 条模板 这份清单可以独立发送和直接点击。所有新链接统一使用标准参数 `target=private-zone`;历史参数 `target=private-room` 仅用于兼容已经发出的旧链接
## 发送规则 ## 使用规则
- 发送前必须把每条模板中的 `<PSID>` 替换为当前用户经过 URL 编码的 Facebook Page-scoped User ID;不得把占位符原样发送 - `target=chat`:进入聊天页
- 每条链接都显式传入 `character`,不得依赖缺省角色回退 - `target=tip`:进入对应角色的打赏页
- Facebook 业务名称“私密空间”进入普通聊天页;业务名称“图片包”才进入应用的 `private-zone` - `target=private-zone`:进入对应角色的私密空间
- 不要在入口中传递登录 Token、Page Access Token、App Secret 或其他秘密 - `character` 可使用 `elio``maya``nayeli`;不传或值无效时使用 Elio
- 以下模板包含占位符,替换真实 PSID 后才能直接发送或点击 - `mode=promotion` 只在 `target=chat``promotion_type``voice``image``private` 时生效
- PSID 示例统一使用 `27511427698460020`;不要在入口中放登录 Token、Page Access Token 或 App Secret。
## 正式投放模板 ## 测试环境
| 编号 | Facebook 入口 | 角色 | 发送模板 | 预期落地页面状态 | | 入口 | 可点击链接 | 预期落地页面 |
| --- | --- | --- | --- | --- | | --- | --- | --- |
| 1 | 私密空间 | Elio | `https://cozsweet.com/external-entry?target=chat&character=elio&psid=<PSID>` | `/characters/elio/chat`,不显示促销锁卡 | | 普通聊天(Elio | [打开普通聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat) | `/characters/elio/chat` |
| 2 | 私密空间 | Maya | `https://cozsweet.com/external-entry?target=chat&character=maya&psid=<PSID>` | `/characters/maya/chat`,不显示促销锁卡 | | Maya 聊天 | [打开 Maya 聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat&character=maya) | `/characters/maya/chat` |
| 3 | 私密空间 | Nayeli | `https://cozsweet.com/external-entry?target=chat&character=nayeli&psid=<PSID>` | `/characters/nayeli/chat`,不显示促销锁卡 | | Nayeli 聊天 | [打开 Nayeli 聊天](https://frontend-test.banlv-ai.com/external-entry?target=chat&character=nayeli) | `/characters/nayeli/chat` |
| 4 | 语音 | Elio | `https://cozsweet.com/external-entry?target=chat&character=elio&mode=promotion&promotion_type=voice&psid=<PSID>` | `/characters/elio/chat`,显示一条锁定语音 | | 携带 PSID 的 Elio 聊天 | [打开 PSID 聊天示例](https://frontend-test.banlv-ai.com/external-entry?target=chat&psid=27511427698460020) | `/characters/elio/chat` |
| 5 | 语音 | Maya | `https://cozsweet.com/external-entry?target=chat&character=maya&mode=promotion&promotion_type=voice&psid=<PSID>` | `/characters/maya/chat`显示一条锁定语音 | | 语音促销 | [打开语音促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=voice) | `/characters/elio/chat`保存语音促销意图 |
| 6 | 语音 | Nayeli | `https://cozsweet.com/external-entry?target=chat&character=nayeli&mode=promotion&promotion_type=voice&psid=<PSID>` | `/characters/nayeli/chat`显示一条锁定语音 | | 图片促销 | [打开图片促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=image) | `/characters/elio/chat`保存图片促销意图 |
| 7 | 图片包 | Elio | `https://cozsweet.com/external-entry?target=private-zone&character=elio&psid=<PSID>` | `/characters/elio/private-zone` | | 私密文本促销 | [打开私密文本促销](https://frontend-test.banlv-ai.com/external-entry?target=chat&mode=promotion&promotion_type=private) | `/characters/elio/chat`,保存私密文本促销意图 |
| 8 | 图片包 | Maya | `https://cozsweet.com/external-entry?target=private-zone&character=maya&psid=<PSID>` | `/characters/maya/private-zone` | | Elio 咖啡打赏 | [打开 Elio 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=elio) | `/characters/elio/tip` |
| 9 | 图片包 | Nayeli | `https://cozsweet.com/external-entry?target=private-zone&character=nayeli&psid=<PSID>` | `/characters/nayeli/private-zone` | | Maya 咖啡打赏 | [打开 Maya 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=maya) | `/characters/maya/tip` |
| 10 | 帮忙买咖啡 | Elio | `https://cozsweet.com/external-entry?target=tip&character=elio&psid=<PSID>` | `/characters/elio/tip` | | Nayeli 咖啡打赏 | [打开 Nayeli 咖啡打赏](https://frontend-test.banlv-ai.com/external-entry?target=tip&character=nayeli) | `/characters/nayeli/tip` |
| 11 | 帮忙买咖啡 | Maya | `https://cozsweet.com/external-entry?target=tip&character=maya&psid=<PSID>` | `/characters/maya/tip` | | Elio 私密空间 | [打开 Elio 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=elio) | `/characters/elio/private-zone` |
| 12 | 帮忙买咖啡 | Nayeli | `https://cozsweet.com/external-entry?target=tip&character=nayeli&psid=<PSID>` | `/characters/nayeli/tip` | | Maya 私密空间 | [打开 Maya 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=maya) | `/characters/maya/private-zone` |
| Nayeli 私密空间 | [打开 Nayeli 私密空间](https://frontend-test.banlv-ai.com/external-entry?target=private-zone&character=nayeli) | `/characters/nayeli/private-zone` |
## 预发验证 ## 旧链接兼容验证
预发验证不维护第二套业务清单。将上述 12 条模板的主机统一替换为 `frontend-test.banlv-ai.com`,其余路径和参数保持不变: 以下链接仅用于验证已经发出的 `private-room` 旧链接仍能正确进入私密空间。新投放链接不要再使用这些地址。
```text | 旧入口 | 可点击链接 | 预期落地页面 |
https://frontend-test.banlv-ai.com/external-entry?<与正式模板相同的查询参数> | --- | --- | --- |
``` | Elio 旧私密空间 | [验证 Elio 旧链接](https://frontend-test.banlv-ai.com/external-entry?target=private-room&character=elio) | `/characters/elio/private-zone` |
| Maya 旧私密空间 | [验证 Maya 旧链接](https://frontend-test.banlv-ai.com/external-entry?target=private-room&character=maya) | `/characters/maya/private-zone` |
| Nayeli 旧私密空间 | [验证 Nayeli 旧链接](https://frontend-test.banlv-ai.com/external-entry?target=private-room&character=nayeli) | `/characters/nayeli/private-zone` |
预发环境是 `pre`,不是正式环境。预发验证通过不代表已经更新 `cozsweet.com` 或获得生产发布批准。 ## 正式环境
正式环境仅列标准链接,不再传播 `private-room` 旧参数。
| 入口 | 可点击链接 | 预期落地页面 |
| --- | --- | --- |
| 普通聊天(Elio | [打开普通聊天](https://cozsweet.com/external-entry?target=chat) | `/characters/elio/chat` |
| Maya 聊天 | [打开 Maya 聊天](https://cozsweet.com/external-entry?target=chat&character=maya) | `/characters/maya/chat` |
| Nayeli 聊天 | [打开 Nayeli 聊天](https://cozsweet.com/external-entry?target=chat&character=nayeli) | `/characters/nayeli/chat` |
| 携带 PSID 的 Elio 聊天 | [打开 PSID 聊天示例](https://cozsweet.com/external-entry?target=chat&psid=27511427698460020) | `/characters/elio/chat` |
| 语音促销 | [打开语音促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=voice) | `/characters/elio/chat`,保存语音促销意图 |
| 图片促销 | [打开图片促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=image) | `/characters/elio/chat`,保存图片促销意图 |
| 私密文本促销 | [打开私密文本促销](https://cozsweet.com/external-entry?target=chat&mode=promotion&promotion_type=private) | `/characters/elio/chat`,保存私密文本促销意图 |
| Elio 咖啡打赏 | [打开 Elio 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=elio) | `/characters/elio/tip` |
| Maya 咖啡打赏 | [打开 Maya 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=maya) | `/characters/maya/tip` |
| Nayeli 咖啡打赏 | [打开 Nayeli 咖啡打赏](https://cozsweet.com/external-entry?target=tip&character=nayeli) | `/characters/nayeli/tip` |
| Elio 私密空间 | [打开 Elio 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=elio) | `/characters/elio/private-zone` |
| Maya 私密空间 | [打开 Maya 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=maya) | `/characters/maya/private-zone` |
| Nayeli 私密空间 | [打开 Nayeli 私密空间](https://cozsweet.com/external-entry?target=private-zone&character=nayeli) | `/characters/nayeli/private-zone` |
## 验收判断 ## 验收判断
- 最终浏览器地址必须是表格中的预期页面,且不再保留 `/external-entry` 的查询参数 打开入口后,浏览器地址最终应与“预期落地页面”一致。普通聊天和私密空间必须分别落在 `/chat``/private-zone`,不能再进入同一个页面
- `<PSID>` 替换后的真实值必须由应用保存。
- “私密空间”只进入普通聊天,不得出现锁定语音、锁定图片或私密文本促销卡。
- “语音”进入聊天后必须只注入一条锁定语音。
- “图片包”和“帮忙买咖啡”必须分别进入对应角色的 `private-zone``tip`,不能串到其他角色。
## 不属于当前 12 条清单的兼容能力 如需在其他入口携带 PSID,在已有查询参数的链接末尾追加 `&psid=27511427698460020`
- 历史 `target=private-room` 继续兼容,但不得创建新的投放链接。
- `promotion_type=image``promotion_type=private` 和独立 PSID 示例不属于当前正式业务清单。
- 兼容能力的保留不改变本页“只有 12 条正式投放模板”的口径。
@@ -1,201 +0,0 @@
import { expect, test, type Page } from "@playwright/test";
import { mockCoreApis } from "@e2e/fixtures/api-mocks";
import { apiEnvelope } from "@e2e/fixtures/data/common";
import { clearBrowserState } from "@e2e/fixtures/test-helpers";
const testPsid = "e2e-facebook-psid-27511427698460020";
const characters = [
{
id: "elio",
slug: "elio",
displayName: "Elio Silvestri",
shortName: "Elio",
},
{
id: "maya-tan",
slug: "maya",
displayName: "Maya Tan",
shortName: "Maya",
},
{
id: "nayeli-cervantes",
slug: "nayeli",
displayName: "Nayeli Cervantes",
shortName: "Nayeli",
},
] as const;
type Character = (typeof characters)[number];
type EntryKind = "private-space" | "voice" | "image-pack" | "coffee";
interface FacebookEntryCase {
character: Character;
kind: EntryKind;
target: "chat" | "private-zone" | "tip";
expectedPath: string;
promotionType?: "voice";
}
const entryCases: FacebookEntryCase[] = characters.flatMap((character) => [
{
character,
kind: "private-space",
target: "chat",
expectedPath: `/characters/${character.slug}/chat`,
},
{
character,
kind: "voice",
target: "chat",
expectedPath: `/characters/${character.slug}/chat`,
promotionType: "voice",
},
{
character,
kind: "image-pack",
target: "private-zone",
expectedPath: `/characters/${character.slug}/private-zone`,
},
{
character,
kind: "coffee",
target: "tip",
expectedPath: `/characters/${character.slug}/tip`,
},
]);
test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page);
await registerEntryPageMocks(page);
});
for (const entryCase of entryCases) {
test(`${entryCase.character.displayName} opens Facebook ${entryCase.kind} entry`, async ({
page,
}) => {
await page.goto(buildEntryUrl(entryCase));
await expect(page).toHaveURL(entryCase.expectedPath, { timeout: 20_000 });
await expect
.poll(() =>
page.evaluate(() => localStorage.getItem("cozsweet:psid")),
)
.toBe(testPsid);
if (entryCase.kind === "private-space") {
await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
await expect(
page.getByRole("button", { name: "Unlock voice message" }),
).toHaveCount(0);
return;
}
if (entryCase.kind === "voice") {
await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
await expect(
page.getByRole("button", { name: "Unlock voice message" }),
).toHaveCount(1);
return;
}
if (entryCase.kind === "image-pack") {
await expect(
page.getByRole("heading", { name: "Private albums" }),
).toBeVisible();
await expect(
page.getByText(entryCase.character.displayName).last(),
).toBeVisible();
return;
}
await expect(
page.getByRole("heading", {
name: `Buy ${entryCase.character.shortName} a coffee`,
}),
).toBeVisible();
});
}
function buildEntryUrl(entryCase: FacebookEntryCase): string {
const params = new URLSearchParams({
target: entryCase.target,
character: entryCase.character.slug,
psid: testPsid,
});
if (entryCase.promotionType) {
params.set("mode", "promotion");
params.set("promotion_type", entryCase.promotionType);
}
return `/external-entry?${params.toString()}`;
}
async function registerEntryPageMocks(page: Page): Promise<void> {
await page.route("**/api/private-zone/posts**", async (route) => {
const url = new URL(route.request().url());
const characterId = url.searchParams.get("characterId") ?? "elio";
await route.fulfill({
json: apiEnvelope({
characterId,
items: [],
nextCursor: null,
hasMore: false,
creditBalance: 1000,
currency: "credits",
}),
});
});
await page.route("**/api/private-zone/albums**", async (route) => {
await route.fulfill({
json: apiEnvelope({
creditBalance: 1000,
pendingImageCount: 0,
hasIncompleteContent: false,
items: [],
}),
});
});
await page.route("**/api/payment/gift-products**", async (route) => {
const url = new URL(route.request().url());
const characterId = url.searchParams.get("characterId") ?? "elio";
const planPrefix =
characterId === "elio"
? "tip"
: `tip_${characterId.replaceAll("-", "_")}`;
await route.fulfill({
json: apiEnvelope({
characterId,
categories: [
{
category: "coffee",
name: "Coffee",
productCount: 1,
imageUrl: null,
},
],
plans: [
{
planId: `${planPrefix}_coffee_usd_4_99`,
planName: "Small Coffee",
orderType: "tip",
tipType: "coffee_small",
category: "coffee",
characterId,
description: "A character-scoped coffee gift",
imageUrl: null,
amountCents: 499,
currency: "USD",
autoRenew: false,
isFirstRechargeOffer: false,
firstRechargeDiscountPercent: 0,
promotionType: null,
},
],
}),
});
});
}
@@ -26,7 +26,10 @@ test("guest unlocks a promoted image through email login and top-up", async ({
); );
await expect(page).toHaveURL(defaultCharacterChatUrl); await expect(page).toHaveURL(defaultCharacterChatUrl);
const unlockButton = page.getByRole("button", { const promotedImageCard = page
.getByRole("group", { name: "Locked private image" })
.last();
const unlockButton = promotedImageCard.getByRole("button", {
name: "Unlock private image", name: "Unlock private image",
}); });
await expect(unlockButton).toBeVisible({ timeout: 10_000 }); await expect(unlockButton).toBeVisible({ timeout: 10_000 });
+13 -102
View File
@@ -85,14 +85,11 @@ async function registerIndonesiaPaymentMocks(page: Page) {
}); });
await page.route("**/api/payment/create-order", async (route) => { await page.route("**/api/payment/create-order", async (route) => {
createOrderCount += 1; createOrderCount += 1;
const body = route.request().postDataJSON() as { const body = route.request().postDataJSON() as { planId: string };
planId: string;
payChannel: "ezpay" | "stripe";
};
const plan = const plan =
idrPlans.plans.find((item) => item.planId === body.planId) ?? idrPlans.plans.find((item) => item.planId === body.planId) ??
idrGiftCatalog.plans.find((item) => item.planId === body.planId); idrGiftCatalog.plans.find((item) => item.planId === body.planId);
const orderId = `order_${body.payChannel}_${body.planId}`; const orderId = `order_qris_${body.planId}`;
orderStatuses.set(orderId, "pending"); orderStatuses.set(orderId, "pending");
orderPlans.set(orderId, { orderPlans.set(orderId, {
planId: body.planId, planId: body.planId,
@@ -101,13 +98,7 @@ async function registerIndonesiaPaymentMocks(page: Page) {
await route.fulfill({ await route.fulfill({
json: apiEnvelope({ json: apiEnvelope({
orderId, orderId,
payParams: payParams: {
body.payChannel === "stripe"
? {
provider: "stripe",
clientSecret: "pi_e2e_secret_mock",
}
: {
provider: "ezpay", provider: "ezpay",
countryCode: "ID", countryCode: "ID",
channelCode: "ID_QRIS_DYNAMIC_QR", channelCode: "ID_QRIS_DYNAMIC_QR",
@@ -182,7 +173,6 @@ async function expectQrisOrder(
expect(request.postDataJSON()).toMatchObject({ expect(request.postDataJSON()).toMatchObject({
planId, planId,
payChannel: "ezpay", payChannel: "ezpay",
recipientCharacterId: "elio",
}); });
const dialog = page.getByRole("dialog", { name: "Scan to pay with QRIS" }); const dialog = page.getByRole("dialog", { name: "Scan to pay with QRIS" });
@@ -192,7 +182,7 @@ async function expectQrisOrder(
await expect( await expect(
dialog.getByRole("img", { name: "QRIS payment QR code" }), dialog.getByRole("img", { name: "QRIS payment QR code" }),
).toBeVisible(); ).toBeVisible();
return `order_ezpay_${planId}`; return `order_qris_${planId}`;
} }
async function expectCheckoutButtonLayout(page: Page) { async function expectCheckoutButtonLayout(page: Page) {
@@ -219,13 +209,7 @@ test("Indonesia VIP defaults to QRIS and completes after status polling", async
}) => { }) => {
const payment = await registerIndonesiaPaymentMocks(page); const payment = await registerIndonesiaPaymentMocks(page);
await prepareIndonesiaUser(page); await prepareIndonesiaUser(page);
await page.goto("/subscription?type=vip&character=elio"); await page.goto("/subscription?type=vip");
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( await expect(page.getByRole("button", { name: "QRIS" })).toHaveAttribute(
"aria-pressed", "aria-pressed",
@@ -266,8 +250,7 @@ test("Indonesia VIP defaults to QRIS and completes after status polling", async
test("Indonesia credit top-up uses QRIS display cents", async ({ page }) => { test("Indonesia credit top-up uses QRIS display cents", async ({ page }) => {
const payment = await registerIndonesiaPaymentMocks(page); const payment = await registerIndonesiaPaymentMocks(page);
await prepareIndonesiaUser(page); await prepareIndonesiaUser(page);
await page.goto("/subscription?type=topup&character=elio"); await page.goto("/subscription?type=topup");
await expect(page.getByText("Supporting Elio")).toHaveCount(0);
await expectCheckoutButtonLayout(page); await expectCheckoutButtonLayout(page);
const orderId = await expectQrisOrder( const orderId = await expectQrisOrder(
@@ -283,74 +266,6 @@ test("Indonesia credit top-up uses QRIS display cents", async ({ page }) => {
).toBeVisible({ timeout: 10_000 }); ).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 ({ test("payment issue submits Other to the feedback API without creating an order", async ({
page, page,
}) => { }) => {
@@ -402,21 +317,17 @@ test("Indonesia gift checkout keeps IDR price through QRIS and thank-you flow",
await page.goto("/characters/elio/tip"); await page.goto("/characters/elio/tip");
await expect(page.getByText(/IDR\s*89[.,]299/)).toBeVisible(); await expect(page.getByText(/IDR\s*89[.,]299/)).toBeVisible();
await expectQrisOrder( const orderId = await expectQrisOrder(
page, page,
/Order and Buy/i, /Order and Buy/i,
"tip_coffee_usd_4_99", "tip_coffee_usd_4_99",
/Rp\s*89[.,]299/, /Rp\s*89[.,]299/,
); );
const dialog = page.getByRole("dialog", { name: "Scan to pay with QRIS" }); payment.markPaid(orderId);
await dialog.getByRole("button", { name: "Close" }).click();
await expect(dialog).toBeHidden();
await expect(page.getByRole("button", { name: "Stripe" })).toBeEnabled(); await expect(page.getByText("Gift received")).toBeVisible({ timeout: 10_000 });
await page.getByRole("button", { name: "Stripe" }).click(); await expect(page.getByRole("button", { name: "Send another gift" })).toBeVisible();
await expect(page.getByRole("button", { name: "Stripe" })).toHaveAttribute( await expect(
"aria-pressed", page.getByRole("dialog", { name: "Scan to pay with QRIS" }),
"true", ).toBeHidden();
);
expect(payment.getCreateOrderCount()).toBe(1);
}); });
@@ -1,153 +0,0 @@
import { expect, test, type Page } from "@playwright/test";
import { mockCoreApis } from "@e2e/fixtures/api-mocks";
import { apiEnvelope } from "@e2e/fixtures/data/common";
import { e2eEmailUser } from "@e2e/fixtures/data/user";
import {
clearBrowserState,
seedEmailSession,
} from "@e2e/fixtures/test-helpers";
const phpPlans = {
plans: [
{
planId: "dol_1000",
planName: "1,000 Credits",
orderType: "dol",
amountCents: 49_990,
originalAmountCents: 74_990,
dailyPriceCents: null,
currency: "PHP",
vipDays: null,
dolAmount: 1_000,
creditBalance: 1_000,
},
],
};
async function registerPhilippinesPaymentMocks(
page: Page,
response: "hosted" | "qr",
) {
let createOrderCount = 0;
await page.route("**/api/user/profile", async (route) => {
await route.fulfill({
json: apiEnvelope({ ...e2eEmailUser, countryCode: "PH" }),
});
});
await page.route("**/api/payment/plans**", async (route) => {
await route.fulfill({ json: apiEnvelope(phpPlans) });
});
await page.route("**/api/payment/create-order", async (route) => {
createOrderCount += 1;
await route.fulfill({
json: apiEnvelope({
orderId: `order_gcash_${response}`,
payParams: {
provider: "ezpay",
countryCode: "PH",
channelCode: "PH_QRPH_DYNAMIC",
channelType: "QR",
payData: "000201010212ph-qr-payload",
...(response === "hosted"
? { cashierUrl: "https://pay.example/gcash-hosted" }
: {}),
firstChargeAmountCents: 49_990,
currency: "PHP",
},
}),
});
});
await page.route("**/api/payment/order-status**", async (route) => {
await route.fulfill({
json: apiEnvelope({
orderId: `order_gcash_${response}`,
status: "pending",
orderType: "dol",
planId: "dol_1000",
creditsAdded: 0,
}),
});
});
return {
getCreateOrderCount: () => createOrderCount,
};
}
async function preparePhilippinesUser(page: Page) {
await seedEmailSession(page);
await page.evaluate(() => {
const rawUser = localStorage.getItem("cozsweet:user");
const user = rawUser ? JSON.parse(rawUser) : {};
localStorage.setItem(
"cozsweet:user",
JSON.stringify({ ...user, countryCode: "PH" }),
);
});
}
test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page);
});
test("Philippines checkout prefers the hosted GCash URL even for a QR response", async ({
page,
}) => {
const payment = await registerPhilippinesPaymentMocks(page, "hosted");
await preparePhilippinesUser(page);
await page.goto("/subscription?type=topup&character=elio");
await expect(page.getByRole("button", { name: "GCash" })).toHaveAttribute(
"aria-pressed",
"true",
);
await page.getByRole("button", { name: "Pay and Top Up" }).click();
await expect(
page.getByRole("alertdialog", { name: "Continue to payment?" }),
).toBeVisible();
await expect(
page.getByRole("dialog", { name: "Pay with GCash / QR Ph" }),
).toHaveCount(0);
await expect(
page.getByRole("dialog", { name: "Scan to pay with QRIS" }),
).toHaveCount(0);
expect(payment.getCreateOrderCount()).toBe(1);
await page.getByRole("button", { name: "Cancel" }).click();
await expect(page.getByRole("button", { name: "Stripe" })).toBeEnabled();
expect(payment.getCreateOrderCount()).toBe(1);
});
test("Philippines QR-only fallback is labeled GCash / QR Ph and can switch to Stripe", async ({
page,
}) => {
await page.setViewportSize({ width: 390, height: 844 });
const payment = await registerPhilippinesPaymentMocks(page, "qr");
await preparePhilippinesUser(page);
await page.goto("/subscription?type=topup&character=elio");
await page.getByRole("button", { name: "Pay and Top Up" }).click();
const dialog = page.getByRole("dialog", {
name: "Pay with GCash / QR Ph",
});
await expect(dialog).toBeVisible();
await expect(dialog).toContainText(/₱\s*499\.90/);
await expect(dialog).not.toContainText("QRIS");
await expect(
dialog.getByRole("img", { name: "GCash / QR Ph payment QR code" }),
).toBeVisible();
await dialog.getByRole("button", { name: "Close" }).click();
await expect(dialog).toBeHidden();
await expect(page.getByRole("button", { name: "Stripe" })).toBeEnabled();
await page.getByRole("button", { name: "Stripe" }).click();
await expect(page.getByRole("button", { name: "Stripe" })).toHaveAttribute(
"aria-pressed",
"true",
);
expect(payment.getCreateOrderCount()).toBe(1);
});
@@ -1,34 +0,0 @@
import assert from "node:assert/strict";
import { readFile } from "node:fs/promises";
import test from "node:test";
const workflowUrl = new URL(
"../../../.gitea/workflows/domestic-test.yml",
import.meta.url,
);
const deployScriptUrl = new URL(
"../../server/deploy-domestic-test-archive.sh",
import.meta.url,
);
test("domestic frontend workflow is manual and registry-free", async () => {
const workflow = await readFile(workflowUrl, "utf8");
assert.match(workflow, /workflow_dispatch:/);
assert.doesNotMatch(workflow, /\bpush:/);
assert.doesNotMatch(workflow, /REGISTRY_IMAGE/);
assert.match(workflow, /docker save/);
assert.match(workflow, /DOMESTIC_TEST_SSH_PRIVATE_KEY_B64/);
assert.match(workflow, /base64 -d/);
});
test("domestic frontend workflow pins the China test API and isolated port", async () => {
const workflow = await readFile(workflowUrl, "utf8");
const deployScript = await readFile(deployScriptUrl, "utf8");
assert.match(workflow, /https:\/\/testapi\.banlv-ai\.com/);
assert.match(workflow, /wss:\/\/testapi\.banlv-ai\.com\/ws/);
assert.match(workflow, /9135/);
assert.match(deployScript, /127\.0\.0\.1:\$HOST_PORT/);
assert.match(deployScript, /cozsweet-frontend-domestic-test/);
});
@@ -1,110 +0,0 @@
#!/usr/bin/env bash
set -euo pipefail
ARCHIVE="${1:-}"
IMAGE="${2:-}"
ENV_FILE="${3:-}"
HOST_PORT="${4:-9135}"
CONTAINER_NAME="cozsweet-frontend-domestic-test"
INTERNAL_PORT="3000"
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
SERVICE_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
SHARED_ROOT="$SERVICE_ROOT/shared"
RELEASE_ROOT="$SERVICE_ROOT/releases/docker"
if [ -z "$ARCHIVE" ] || [ -z "$IMAGE" ] || [ -z "$ENV_FILE" ]; then
echo "Usage: $0 <image-archive> <image> <env-file> [host-port]" >&2
exit 64
fi
if [ "$HOST_PORT" != "9135" ]; then
echo "Domestic frontend test must use isolated host port 9135" >&2
exit 64
fi
case "$ENV_FILE" in
"$SHARED_ROOT"/*) ;;
*)
echo "Environment file must be stored under $SHARED_ROOT" >&2
exit 64
;;
esac
if [ ! -s "$ARCHIVE" ] || [ ! -s "$ENV_FILE" ]; then
echo "Image archive or environment file is missing" >&2
exit 66
fi
mkdir -p "$RELEASE_ROOT"
chmod 700 "$SHARED_ROOT"
gzip -dc "$ARCHIVE" | docker load >/dev/null
docker image inspect "$IMAGE" >/dev/null
old_image_id=""
old_image_ref=""
if docker container inspect "$CONTAINER_NAME" >/dev/null 2>&1; then
old_image_id="$(docker inspect -f '{{.Image}}' "$CONTAINER_NAME")"
old_image_ref="$(docker inspect -f '{{.Config.Image}}' "$CONTAINER_NAME")"
elif ss -ltnH "sport = :$HOST_PORT" 2>/dev/null | grep -q .; then
echo "Host port $HOST_PORT is already used by another service" >&2
exit 69
fi
run_container() {
local image_ref="$1"
docker run -d \
--name "$CONTAINER_NAME" \
--restart unless-stopped \
-p "127.0.0.1:$HOST_PORT:$INTERNAL_PORT" \
--env-file "$ENV_FILE" \
-e "PORT=$INTERNAL_PORT" \
"$image_ref" >/dev/null
}
wait_healthy() {
local deadline=$((SECONDS + 180))
while [ "$SECONDS" -le "$deadline" ]; do
state="$(docker inspect -f '{{if .State.Health}}{{.State.Health.Status}}{{else}}{{.State.Status}}{{end}}' "$CONTAINER_NAME" 2>/dev/null || true)"
status="$(curl -sS -o /dev/null -w '%{http_code}' "http://127.0.0.1:$HOST_PORT/" 2>/dev/null || true)"
if [[ "$status" =~ ^(200|204|301|302|303|307|308)$ ]] && { [ "$state" = "healthy" ] || [ "$state" = "running" ]; }; then
return 0
fi
sleep 2
done
return 1
}
docker rm -f "$CONTAINER_NAME" >/dev/null 2>&1 || true
deployment_ok="1"
if ! run_container "$IMAGE"; then
deployment_ok="0"
elif ! wait_healthy; then
deployment_ok="0"
fi
if [ "$deployment_ok" != "1" ]; then
docker logs --tail 120 "$CONTAINER_NAME" >&2 || true
docker rm -f "$CONTAINER_NAME" >/dev/null 2>&1 || true
if [ -n "$old_image_id" ] && docker image inspect "$old_image_id" >/dev/null 2>&1; then
echo "New container failed health checks; restoring previous image" >&2
run_container "$old_image_id"
wait_healthy || true
fi
exit 1
fi
created_at="$(date -u +%Y-%m-%dT%H:%M:%SZ)"
image_id="$(docker image inspect "$IMAGE" -f '{{.Id}}')"
record="{\"createdAt\":\"$created_at\",\"environment\":\"domestic-test\",\"image\":\"$IMAGE\",\"imageId\":\"$image_id\",\"container\":\"$CONTAINER_NAME\",\"hostPort\":$HOST_PORT}"
if [ -f "$RELEASE_ROOT/current.json" ]; then
cp "$RELEASE_ROOT/current.json" "$RELEASE_ROOT/previous.json"
fi
printf '%s\n' "$record" > "$RELEASE_ROOT/current.json"
printf '%s\n' "$record" >> "$RELEASE_ROOT/releases.jsonl"
echo "Domestic frontend test is healthy"
echo "container=$CONTAINER_NAME"
echo "host_port=$HOST_PORT"
echo "image=$IMAGE"
if [ -n "$old_image_ref" ]; then
echo "previous_image=$old_image_ref"
fi
@@ -7,15 +7,15 @@ import { PaymentLaunchDialogs } from "../payment-launch-dialogs";
const hiddenLaunch = { const hiddenLaunch = {
handleEzpayCancel: vi.fn(), handleEzpayCancel: vi.fn(),
handleEzpayConfirm: vi.fn(), handleEzpayConfirm: vi.fn(),
handleRegionalQrClose: vi.fn(), handleQrisClose: vi.fn(),
handleStripeClose: vi.fn(), handleStripeClose: vi.fn(),
handleStripeConfirmed: vi.fn(), handleStripeConfirmed: vi.fn(),
isConfirmingEzpay: false, isConfirmingEzpay: false,
regionalQrErrorMessage: null, qrisErrorMessage: null,
regionalQrPayment: null, qrisPayment: null,
regionalQrStatus: null, qrisStatus: null,
shouldShowEzpayConfirmDialog: false, shouldShowEzpayConfirmDialog: false,
shouldShowRegionalQrDialog: false, shouldShowQrisDialog: false,
shouldShowStripeDialog: false, shouldShowStripeDialog: false,
stripeClientSecret: null, stripeClientSecret: null,
}; };
@@ -96,15 +96,14 @@ describe("PaymentLaunchDialogs", () => {
ezpayDescription="Scan QRIS to finish the payment." ezpayDescription="Scan QRIS to finish the payment."
launch={{ launch={{
...hiddenLaunch, ...hiddenLaunch,
regionalQrPayment: { qrisPayment: {
qrData: "00020101021226670016COM.NOBUBANK.WWW", qrData: "00020101021226670016COM.NOBUBANK.WWW",
orderId: "order-id-qris", orderId: "order-id-qris",
amountCents: 5_000_000, amountCents: 5_000_000,
currency: "IDR", currency: "IDR",
experience: "qris",
}, },
regionalQrStatus: "pending", qrisStatus: "pending",
shouldShowRegionalQrDialog: true, shouldShowQrisDialog: true,
}} }}
/>, />,
), ),
@@ -123,44 +122,6 @@ describe("PaymentLaunchDialogs", () => {
expect(dialog?.textContent).toContain("Waiting for payment"); 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", () => { it("shows QRIS failure state and handles empty QR data safely", () => {
act(() => act(() =>
root.render( root.render(
@@ -170,16 +131,15 @@ describe("PaymentLaunchDialogs", () => {
ezpayDescription="Scan QRIS to finish the payment." ezpayDescription="Scan QRIS to finish the payment."
launch={{ launch={{
...hiddenLaunch, ...hiddenLaunch,
regionalQrErrorMessage: "Payment failed or was cancelled.", qrisErrorMessage: "Payment failed or was cancelled.",
regionalQrPayment: { qrisPayment: {
qrData: "", qrData: "",
orderId: "order-id-qris", orderId: "order-id-qris",
amountCents: 5_000_000, amountCents: 5_000_000,
currency: "IDR", currency: "IDR",
experience: "qris",
}, },
regionalQrStatus: "failed", qrisStatus: "failed",
shouldShowRegionalQrDialog: true, shouldShowQrisDialog: true,
}} }}
/>, />,
), ),
@@ -13,15 +13,15 @@ type PaymentLaunchDialogFlow = Pick<
PaymentLaunchFlow, PaymentLaunchFlow,
| "handleEzpayCancel" | "handleEzpayCancel"
| "handleEzpayConfirm" | "handleEzpayConfirm"
| "handleRegionalQrClose" | "handleQrisClose"
| "handleStripeClose" | "handleStripeClose"
| "handleStripeConfirmed" | "handleStripeConfirmed"
| "isConfirmingEzpay" | "isConfirmingEzpay"
| "regionalQrErrorMessage" | "qrisErrorMessage"
| "regionalQrPayment" | "qrisPayment"
| "regionalQrStatus" | "qrisStatus"
| "shouldShowEzpayConfirmDialog" | "shouldShowEzpayConfirmDialog"
| "shouldShowRegionalQrDialog" | "shouldShowQrisDialog"
| "shouldShowStripeDialog" | "shouldShowStripeDialog"
| "stripeClientSecret" | "stripeClientSecret"
>; >;
@@ -53,12 +53,12 @@ export function PaymentLaunchDialogs({
onConfirm={launch.handleEzpayConfirm} onConfirm={launch.handleEzpayConfirm}
/> />
) : null} ) : null}
{launch.shouldShowRegionalQrDialog && launch.regionalQrPayment ? ( {launch.shouldShowQrisDialog && launch.qrisPayment ? (
<RegionalQrPaymentDialog <QrisPaymentDialog
payment={launch.regionalQrPayment} payment={launch.qrisPayment}
status={launch.regionalQrStatus} status={launch.qrisStatus}
errorMessage={launch.regionalQrErrorMessage} errorMessage={launch.qrisErrorMessage}
onClose={launch.handleRegionalQrClose} onClose={launch.handleQrisClose}
/> />
) : null} ) : null}
{launch.shouldShowStripeDialog && launch.stripeClientSecret ? ( {launch.shouldShowStripeDialog && launch.stripeClientSecret ? (
@@ -73,56 +73,43 @@ export function PaymentLaunchDialogs({
); );
} }
interface RegionalQrPaymentDialogProps { interface QrisPaymentDialogProps {
errorMessage: string | null; errorMessage: string | null;
onClose: () => void; onClose: () => void;
payment: NonNullable<PaymentLaunchFlow["regionalQrPayment"]>; payment: NonNullable<PaymentLaunchFlow["qrisPayment"]>;
status: PaymentLaunchFlow["regionalQrStatus"]; status: PaymentLaunchFlow["qrisStatus"];
} }
function formatRegionalQrAmount(amountCents: number, currency: string): string { function formatQrisAmount(amountCents: number, currency: string): string {
const normalizedCurrency = currency.trim().toUpperCase() || "IDR"; const normalizedCurrency = currency.trim().toUpperCase() || "IDR";
try { try {
return new Intl.NumberFormat( return new Intl.NumberFormat("id-ID", {
normalizedCurrency === "PHP" ? "en-PH" : "id-ID",
{
style: "currency", style: "currency",
currency: normalizedCurrency, currency: normalizedCurrency,
maximumFractionDigits: normalizedCurrency === "IDR" ? 0 : 2, maximumFractionDigits: normalizedCurrency === "IDR" ? 0 : 2,
}, }).format(amountCents / 100);
).format(amountCents / 100);
} catch { } catch {
return `${normalizedCurrency} ${(amountCents / 100).toFixed(2)}`; return `${normalizedCurrency} ${(amountCents / 100).toFixed(2)}`;
} }
} }
function regionalQrStatusMessage( function qrisStatusMessage(
status: PaymentLaunchFlow["regionalQrStatus"], status: PaymentLaunchFlow["qrisStatus"],
errorMessage: string | null, errorMessage: string | null,
paymentName: string,
): string { ): string {
if (status === "failed") { if (status === "failed") return errorMessage || "Payment failed. Please try again.";
return errorMessage || "Payment failed. Please try again."; if (status === "expired") return errorMessage || "This QRIS order has expired.";
}
if (status === "expired") {
return errorMessage || `This ${paymentName} order has expired.`;
}
return "Waiting for payment"; return "Waiting for payment";
} }
function RegionalQrPaymentDialog({ function QrisPaymentDialog({
errorMessage, errorMessage,
onClose, onClose,
payment, payment,
status, status,
}: RegionalQrPaymentDialogProps) { }: QrisPaymentDialogProps) {
const titleId = useId(); const titleId = useId();
const copy = regionalQrCopy(payment.experience); const statusMessage = qrisStatusMessage(status, errorMessage);
const statusMessage = regionalQrStatusMessage(
status,
errorMessage,
copy.paymentName,
);
return ( return (
<ModalPortal <ModalPortal
@@ -136,17 +123,17 @@ function RegionalQrPaymentDialog({
> >
<div className={`${styles.header} text-center`}> <div className={`${styles.header} text-center`}>
<h2 id={titleId} className={styles.title}> <h2 id={titleId} className={styles.title}>
{copy.title} Scan to pay with QRIS
</h2> </h2>
<p className={styles.content}> <p className={styles.content}>
{copy.description} Open a QRIS-compatible banking or wallet app and scan this code.
</p> </p>
</div> </div>
<div className="mb-4 flex min-h-64 items-center justify-center rounded-2xl bg-white p-4"> <div className="mb-4 flex min-h-64 items-center justify-center rounded-2xl bg-white p-4">
{payment.qrData ? ( {payment.qrData ? (
<QRCodeSVG <QRCodeSVG
value={payment.qrData} value={payment.qrData}
title={copy.qrTitle} title="QRIS payment QR code"
size={256} size={256}
level="M" level="M"
marginSize={2} marginSize={2}
@@ -154,14 +141,14 @@ function RegionalQrPaymentDialog({
/> />
) : ( ) : (
<p className={styles.error} role="alert"> <p className={styles.error} role="alert">
{copy.unavailableMessage} QRIS data is unavailable. Please close this dialog and try again.
</p> </p>
)} )}
</div> </div>
<div className="mb-4 flex flex-col gap-2 text-center"> <div className="mb-4 flex flex-col gap-2 text-center">
<p className={styles.content}>Order No. {payment.orderId}</p> <p className={styles.content}>Order No. {payment.orderId}</p>
<p className="m-0 text-xl font-bold text-text-foreground"> <p className="m-0 text-xl font-bold text-text-foreground">
{formatRegionalQrAmount(payment.amountCents, payment.currency)} {formatQrisAmount(payment.amountCents, payment.currency)}
</p> </p>
<p <p
className={status === "failed" || status === "expired" ? styles.error : styles.content} className={status === "failed" || status === "expired" ? styles.error : styles.content}
@@ -183,41 +170,6 @@ function RegionalQrPaymentDialog({
); );
} }
function regionalQrCopy(
experience: NonNullable<PaymentLaunchFlow["regionalQrPayment"]>["experience"],
) {
if (experience === "gcashQrPh") {
return {
paymentName: "GCash / QR Ph",
title: "Pay with GCash / QR Ph",
description:
"Open GCash or another QR Ph-compatible app and scan this code.",
qrTitle: "GCash / QR Ph payment QR code",
unavailableMessage:
"GCash / QR Ph data is unavailable. Please close this dialog and try again.",
};
}
if (experience === "qris") {
return {
paymentName: "QRIS",
title: "Scan to pay with QRIS",
description:
"Open a QRIS-compatible banking or wallet app and scan this code.",
qrTitle: "QRIS payment QR code",
unavailableMessage:
"QRIS data is unavailable. Please close this dialog and try again.",
};
}
return {
paymentName: "payment QR",
title: "Scan to pay",
description: "Open a compatible banking or wallet app and scan this code.",
qrTitle: "Payment QR code",
unavailableMessage:
"Payment QR data is unavailable. Please close this dialog and try again.",
};
}
interface EzpayRedirectConfirmDialogProps { interface EzpayRedirectConfirmDialogProps {
description: ReactNode; description: ReactNode;
externalCheckoutAnalyticsKey: string; externalCheckoutAnalyticsKey: string;
+36 -78
View File
@@ -4,7 +4,6 @@ import { type Dispatch, useEffect, useRef, useState } from "react";
import { import {
getPaymentUrl, getPaymentUrl,
getPaymentUrlHostname,
getStripeClientSecret, getStripeClientSecret,
isEzpayPayment, isEzpayPayment,
launchEzpayRedirect, launchEzpayRedirect,
@@ -42,31 +41,29 @@ export interface UsePaymentLaunchFlowInput {
subscriptionType: PendingPaymentSubscriptionType; subscriptionType: PendingPaymentSubscriptionType;
giftCategory?: string | null; giftCategory?: string | null;
giftPlanId?: string | null; giftPlanId?: string | null;
countryCode?: string | null;
} }
export interface PaymentLaunchFlow { export interface PaymentLaunchFlow {
ezpayPaymentUrl: string | null; ezpayPaymentUrl: string | null;
handleEzpayCancel: () => void; handleEzpayCancel: () => void;
handleEzpayConfirm: () => void; handleEzpayConfirm: () => void;
handleRegionalQrClose: () => void; handleQrisClose: () => void;
handleStripeClose: () => void; handleStripeClose: () => void;
handleStripeConfirmed: () => void; handleStripeConfirmed: () => void;
isConfirmingEzpay: boolean; isConfirmingEzpay: boolean;
regionalQrErrorMessage: string | null; qrisErrorMessage: string | null;
regionalQrPayment: RegionalQrPaymentDetails | null; qrisPayment: QrisPaymentDetails | null;
regionalQrStatus: PaymentContextState["orderStatus"]; qrisStatus: PaymentContextState["orderStatus"];
resetLaunchState: () => void; resetLaunchState: () => void;
shouldShowEzpayConfirmDialog: boolean; shouldShowEzpayConfirmDialog: boolean;
shouldShowRegionalQrDialog: boolean; shouldShowQrisDialog: boolean;
shouldShowStripeDialog: boolean; shouldShowStripeDialog: boolean;
stripeClientSecret: string | null; stripeClientSecret: string | null;
} }
export interface RegionalQrPaymentDetails { export interface QrisPaymentDetails {
amountCents: number; amountCents: number;
currency: string; currency: string;
experience: "gcashQrPh" | "qris" | "paymentQr";
orderId: string; orderId: string;
qrData: string; qrData: string;
} }
@@ -156,36 +153,30 @@ export function usePaymentLaunchFlow({
subscriptionType, subscriptionType,
giftCategory, giftCategory,
giftPlanId, giftPlanId,
countryCode,
}: UsePaymentLaunchFlowInput): PaymentLaunchFlow { }: UsePaymentLaunchFlowInput): PaymentLaunchFlow {
const launchedNonceRef = useRef(0); const launchedNonceRef = useRef(0);
const [hiddenStripeClientSecret, setHiddenStripeClientSecret] = useState< const [hiddenStripeClientSecret, setHiddenStripeClientSecret] = useState<
string | null string | null
>(null); >(null);
const [isConfirmingEzpay, setIsConfirmingEzpay] = useState(false); const [isConfirmingEzpay, setIsConfirmingEzpay] = useState(false);
const [hiddenQrisOrderId, setHiddenQrisOrderId] = useState<string | null>(
null,
);
const stripeClientSecret = payment.payParams const stripeClientSecret = payment.payParams
? getStripeClientSecret(payment.payParams) ? getStripeClientSecret(payment.payParams)
: null; : 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 = const ezpayLaunchTarget =
payment.payParams && isEzpayPayment(payment.payParams) payment.payParams && isEzpayPayment(payment.payParams)
? resolveEzpayLaunchTarget(payment.payParams, { ? resolveEzpayLaunchTarget(payment.payParams)
countryCode,
currency: paymentCurrency,
})
: null; : null;
const ezpayPaymentUrl = const ezpayPaymentUrl =
ezpayLaunchTarget?.kind === "url" ezpayLaunchTarget?.kind === "url"
? ezpayLaunchTarget.paymentUrl ? ezpayLaunchTarget.paymentUrl
: null; : null;
const regionalQrPayment: RegionalQrPaymentDetails | null = const selectedPlan = payment.plans.find(
(item) => item.planId === payment.selectedPlanId,
);
const qrisPayment: QrisPaymentDetails | null =
payment.payParams && payment.payParams &&
payment.currentOrderId && payment.currentOrderId &&
ezpayLaunchTarget?.kind === "qr" ezpayLaunchTarget?.kind === "qr"
@@ -195,9 +186,9 @@ export function usePaymentLaunchFlow({
selectedPlan?.amountCents ?? selectedPlan?.amountCents ??
0, 0,
currency: currency:
paymentCurrency ?? paymentParamString(payment.payParams, "currency") ??
(ezpayLaunchTarget.experience === "gcashQrPh" ? "PHP" : "IDR"), selectedPlan?.currency ??
experience: ezpayLaunchTarget.experience, "IDR",
orderId: payment.currentOrderId, orderId: payment.currentOrderId,
qrData: ezpayLaunchTarget.qrData, qrData: ezpayLaunchTarget.qrData,
} }
@@ -216,33 +207,7 @@ export function usePaymentLaunchFlow({
const isEzpay = isEzpayPayment(payment.payParams); const isEzpay = isEzpayPayment(payment.payParams);
if (isEzpay) { 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") { if (target.kind === "error") {
trackPaymentCheckoutFailed(payment, "missing_checkout_url"); trackPaymentCheckoutFailed(payment, "missing_checkout_url");
paymentDispatch({ paymentDispatch({
@@ -257,18 +222,11 @@ export function usePaymentLaunchFlow({
trackPaymentCheckoutFailed(payment, "missing_checkout_url"); trackPaymentCheckoutFailed(payment, "missing_checkout_url");
paymentDispatch({ paymentDispatch({
type: "PaymentLaunchFailed", type: "PaymentLaunchFailed",
errorMessage: "Missing order id before showing payment QR code.", errorMessage: "Missing order id before showing QRIS.",
}); });
return; return;
} }
trackPaymentCheckoutOpened( trackPaymentCheckoutOpened(payment, "qris_embedded");
payment,
target.experience === "qris"
? "qris_embedded"
: target.experience === "gcashQrPh"
? "gcash_qrph_embedded"
: "payment_qr_embedded",
);
return; return;
} }
@@ -276,7 +234,7 @@ export function usePaymentLaunchFlow({
if (!AppEnvUtil.isProduction()) { if (!AppEnvUtil.isProduction()) {
log.debug(`[${logScope}] ezpay confirmation required`, { log.debug(`[${logScope}] ezpay confirmation required`, {
orderId: payment.currentOrderId, orderId: payment.currentOrderId,
paymentUrlHost: getPaymentUrlHostname(paymentUrl), paymentUrl,
subscriptionType, subscriptionType,
}); });
return; return;
@@ -302,7 +260,7 @@ export function usePaymentLaunchFlow({
const paymentUrl = getPaymentUrl(payment.payParams); const paymentUrl = getPaymentUrl(payment.payParams);
if (paymentUrl) { if (paymentUrl) {
try { try {
window.location.assign(paymentUrl); window.location.href = paymentUrl;
trackPaymentCheckoutOpened(payment, paymentUrl); trackPaymentCheckoutOpened(payment, paymentUrl);
} catch { } catch {
trackPaymentCheckoutFailed(payment, "payment_redirect_failed"); trackPaymentCheckoutFailed(payment, "payment_redirect_failed");
@@ -323,7 +281,6 @@ export function usePaymentLaunchFlow({
log, log,
logScope, logScope,
characterSlug, characterSlug,
countryCode,
payment.currentOrderId, payment.currentOrderId,
payment, payment,
payment.launchNonce, payment.launchNonce,
@@ -332,7 +289,6 @@ export function usePaymentLaunchFlow({
payment.plans, payment.plans,
payment.selectedPlanId, payment.selectedPlanId,
paymentDispatch, paymentDispatch,
paymentCurrency,
returnTo, returnTo,
subscriptionType, subscriptionType,
giftCategory, giftCategory,
@@ -349,13 +305,16 @@ export function usePaymentLaunchFlow({
payParams: payment.payParams, payParams: payment.payParams,
paymentUrl: ezpayPaymentUrl, paymentUrl: ezpayPaymentUrl,
}); });
const shouldShowRegionalQrDialog = Boolean( const shouldShowQrisDialog = Boolean(
regionalQrPayment && !payment.isPaid, qrisPayment &&
qrisPayment.orderId !== hiddenQrisOrderId &&
!payment.isPaid,
); );
function resetLaunchState(): void { function resetLaunchState(): void {
setIsConfirmingEzpay(false); setIsConfirmingEzpay(false);
setHiddenStripeClientSecret(null); setHiddenStripeClientSecret(null);
setHiddenQrisOrderId(null);
} }
function handleStripeClose(): void { function handleStripeClose(): void {
@@ -402,29 +361,28 @@ export function usePaymentLaunchFlow({
paymentDispatch({ type: "PaymentReset" }); paymentDispatch({ type: "PaymentReset" });
} }
function handleRegionalQrClose(): void { function handleQrisClose(): void {
log.debug(`[${logScope}] regional payment QR dialog closed`, { log.debug(`[${logScope}] qris dialog closed`, {
orderId: regionalQrPayment?.orderId ?? payment.currentOrderId, orderId: qrisPayment?.orderId ?? payment.currentOrderId,
experience: regionalQrPayment?.experience ?? null,
subscriptionType, subscriptionType,
}); });
paymentDispatch({ type: "PaymentReset" }); setHiddenQrisOrderId(qrisPayment?.orderId ?? payment.currentOrderId);
} }
return { return {
ezpayPaymentUrl, ezpayPaymentUrl,
handleEzpayCancel, handleEzpayCancel,
handleEzpayConfirm, handleEzpayConfirm,
handleRegionalQrClose, handleQrisClose,
handleStripeClose, handleStripeClose,
handleStripeConfirmed, handleStripeConfirmed,
isConfirmingEzpay, isConfirmingEzpay,
regionalQrErrorMessage: payment.errorMessage, qrisErrorMessage: payment.errorMessage,
regionalQrPayment, qrisPayment,
regionalQrStatus: payment.orderStatus, qrisStatus: payment.orderStatus,
resetLaunchState, resetLaunchState,
shouldShowEzpayConfirmDialog, shouldShowEzpayConfirmDialog,
shouldShowRegionalQrDialog, shouldShowQrisDialog,
shouldShowStripeDialog, shouldShowStripeDialog,
stripeClientSecret, stripeClientSecret,
}; };
@@ -1,118 +0,0 @@
import { describe, expect, it } from "vitest";
import { deriveChatSupportCta } from "../chat-support-cta";
describe("deriveChatSupportCta", () => {
const now = Date.parse("2026-07-28T00:00:00.000Z");
it("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",
});
});
});
+9 -15
View File
@@ -33,8 +33,8 @@ import {
ChatHeader, ChatHeader,
ChatInputBar, ChatInputBar,
ChatInsufficientCreditsBanner, ChatInsufficientCreditsBanner,
ChatSupportButton,
ChatUnlockDialogs, ChatUnlockDialogs,
FirstRechargeOfferBanner,
FullscreenImageViewer, FullscreenImageViewer,
PwaInstallOverlay, PwaInstallOverlay,
} from "./components"; } from "./components";
@@ -46,8 +46,7 @@ import {
import { import {
deriveIsGuest, deriveIsGuest,
} from "./chat-screen.helpers"; } from "./chat-screen.helpers";
import { useChatSupportCta } from "./hooks/use-chat-support-cta"; import { useFirstRechargeOfferBanner } from "./hooks/use-first-recharge-offer-banner";
import { useChatCommercialMessages } from "./hooks/use-chat-commercial-messages";
import { useChatUnlockCoordinator } from "./hooks/use-chat-unlock-coordinator"; import { useChatUnlockCoordinator } from "./hooks/use-chat-unlock-coordinator";
import { useChatGuestLogin } from "./hooks/use-chat-guest-login"; import { useChatGuestLogin } from "./hooks/use-chat-guest-login";
import { useChatMessageLimitBanner } from "./hooks/use-chat-message-limit-banner"; import { useChatMessageLimitBanner } from "./hooks/use-chat-message-limit-banner";
@@ -131,15 +130,10 @@ export function ChatScreen() {
upgradeReason: state.upgradeReason, upgradeReason: state.upgradeReason,
paymentGuidance: state.paymentGuidance, paymentGuidance: state.paymentGuidance,
}); });
const supportCta = useChatSupportCta({ const firstRechargeOfferBanner = useFirstRechargeOfferBanner({
characterId: character.id,
historyLoaded: state.historyLoaded, historyLoaded: state.historyLoaded,
loginStatus: authState.loginStatus, loginStatus: authState.loginStatus,
}); });
useChatCommercialMessages({
characterId: character.id,
loginStatus: authState.loginStatus,
});
const shouldShowPwaInstall = const shouldShowPwaInstall =
state.historyLoaded && state.historyMessages.length >= 10; state.historyLoaded && state.historyMessages.length >= 10;
useChatGuestLogin({ useChatGuestLogin({
@@ -428,13 +422,13 @@ export function ChatScreen() {
<ChatHeader <ChatHeader
isGuest={isGuest} isGuest={isGuest}
offerBanner={ offerBanner={
supportCta.visible ? ( <FirstRechargeOfferBanner
<ChatSupportButton visible={firstRechargeOfferBanner.visible}
kind={supportCta.kind} discountPercent={firstRechargeOfferBanner.discountPercent}
label={supportCta.label} onClick={firstRechargeOfferBanner.claim}
onClick={supportCta.open} onClose={firstRechargeOfferBanner.close}
variant="compact"
/> />
) : null
} }
/> />
-52
View File
@@ -1,52 +0,0 @@
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(":");
}
@@ -1,32 +0,0 @@
"use client";
import { Heart, Sparkles } from "lucide-react";
import type { ChatSupportCtaKind } from "../chat-support-cta";
export interface ChatSupportButtonProps {
kind: ChatSupportCtaKind;
label: string;
onClick: () => void;
}
export function ChatSupportButton({
kind,
label,
onClick,
}: ChatSupportButtonProps) {
const Icon = kind === "support" ? Heart : Sparkles;
return (
<button
type="button"
data-analytics-key="chat.support_character"
data-support-state={kind}
className="inline-flex min-h-9 max-w-full items-center justify-center gap-1.5 rounded-full border border-[rgba(255,255,255,0.22)] bg-[linear-gradient(135deg,rgba(246,87,160,0.96),rgba(255,119,84,0.94))] px-3 py-1.5 text-center text-[12px] font-extrabold leading-tight text-white shadow-[0_8px_24px_rgba(246,87,160,0.3)] backdrop-blur-md transition active:scale-95"
aria-label={label}
onClick={onClick}
>
<Icon className="shrink-0" size={14} strokeWidth={2.5} aria-hidden="true" />
<span className="whitespace-normal text-balance">{label}</span>
</button>
);
}
@@ -0,0 +1,223 @@
.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;
}
}
@@ -0,0 +1,78 @@
"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>
);
}
+1 -1
View File
@@ -12,9 +12,9 @@ export * from "./chat-insufficient-credits-banner";
export * from "./chat-input-bar"; export * from "./chat-input-bar";
export * from "./chat-input-text-field"; export * from "./chat-input-text-field";
export * from "./chat-send-button"; export * from "./chat-send-button";
export * from "./chat-support-button";
export * from "./chat-unlock-dialogs"; export * from "./chat-unlock-dialogs";
export * from "./date-header"; export * from "./date-header";
export * from "./first-recharge-offer-banner";
export * from "./fullscreen-image-viewer"; export * from "./fullscreen-image-viewer";
export * from "./history-unlock-dialog"; export * from "./history-unlock-dialog";
export * from "./image-bubble"; export * from "./image-bubble";
@@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from "react";
import { ArrowRight, CircleDollarSign, X } from "lucide-react"; import { ArrowRight, CircleDollarSign, X } from "lucide-react";
import type { PaymentGuidance } from "@/data/schemas/chat"; 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 { recordChatActionEventById } from "@/lib/chat/chat_action_events";
import { useActiveCharacter } from "@/providers/character-provider"; import { useActiveCharacter } from "@/providers/character-provider";
import { useAppNavigator } from "@/router/use-app-navigator"; import { useAppNavigator } from "@/router/use-app-navigator";
@@ -16,18 +15,6 @@ export interface PaymentGuidanceCardProps {
guidance: PaymentGuidance; 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) { export function PaymentGuidanceCard({ guidance }: PaymentGuidanceCardProps) {
const character = useActiveCharacter(); const character = useActiveCharacter();
const navigator = useAppNavigator(); const navigator = useAppNavigator();
@@ -104,7 +91,7 @@ export function PaymentGuidanceCard({ guidance }: PaymentGuidanceCardProps) {
chatActionId: guidance.guidanceId, chatActionId: guidance.guidanceId,
analytics: { analytics: {
entryPoint: "chat_input", entryPoint: "chat_input",
triggerReason: triggerReasonForGuidance(guidance.scene), triggerReason: "insufficient_credits",
}, },
}); });
}} }}
@@ -0,0 +1,60 @@
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);
});
});
@@ -1,44 +0,0 @@
"use client";
import { useEffect } from "react";
import { createChatWebSocket } from "@/core/net/chat-websocket";
import type { LoginStatus } from "@/data/schemas/auth";
import { getSessionAccessToken } from "@/lib/auth/auth_session";
import { useChatDispatch } from "@/stores/chat/chat-context";
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]);
}
-124
View File
@@ -1,124 +0,0 @@
"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 };
}
@@ -0,0 +1,161 @@
"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,7 +189,6 @@ export default function ExternalEntryPersist({
authState.hasInitialized, authState.hasInitialized,
authState.isLoading, authState.isLoading,
authState.loginStatus, authState.loginStatus,
character,
destination, destination,
hasPersisted, hasPersisted,
handoffCompleted, handoffCompleted,
@@ -34,14 +34,14 @@ describe("SubscriptionPage", () => {
); );
}); });
it("keeps the recipient empty when source navigation has no character", async () => { it("uses Elio for missing source navigation context", async () => {
const page = await SubscriptionPage({ const page = await SubscriptionPage({
searchParams: Promise.resolve({}), searchParams: Promise.resolve({}),
}); });
renderToStaticMarkup(page); renderToStaticMarkup(page);
expect(mocks.screenProps).toHaveBeenLastCalledWith( expect(mocks.screenProps).toHaveBeenLastCalledWith(
expect.objectContaining({ sourceCharacterSlug: null }), expect.objectContaining({ sourceCharacterSlug: "elio" }),
); );
}); });
}); });
@@ -1,19 +1,8 @@
import { act } from "react"; import { act } from "react";
import { createRoot, type Root } from "react-dom/client"; import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import type { CommercialOfferSummary } from "@/data/schemas/payment";
const mocks = vi.hoisted(() => { const mocks = vi.hoisted(() => {
const characters = [
{ id: "elio", slug: "elio", displayName: "Elio Silvestri", shortName: "Elio" },
{ id: "maya-tan", slug: "maya", displayName: "Maya Tan", shortName: "Maya" },
{
id: "nayeli-cervantes",
slug: "nayeli",
displayName: "Nayeli Cervantes",
shortName: "Nayeli",
},
];
const payment = { const payment = {
status: "ready", status: "ready",
plans: [ plans: [
@@ -49,7 +38,7 @@ const mocks = vi.hoisted(() => {
}, },
], ],
isFirstRecharge: false, isFirstRecharge: false,
commercialOffer: null as CommercialOfferSummary | null, commercialOffer: null,
selectedPlanId: "vip_monthly", selectedPlanId: "vip_monthly",
payChannel: "stripe" as const, payChannel: "stripe" as const,
agreed: true, agreed: true,
@@ -63,17 +52,7 @@ const mocks = vi.hoisted(() => {
payment.selectedPlanId = event.planId; payment.selectedPlanId = event.planId;
} }
}); });
return { return { payment, paymentDispatch, planClick: vi.fn() };
characterCatalog: {
characters,
getBySlug: (slug: string | null) =>
characters.find((character) => character.slug === slug) ?? null,
},
payment,
paymentDispatch,
paymentFlowInput: vi.fn(),
planClick: vi.fn(),
};
}); });
vi.mock("@/app/_components", () => ({ vi.mock("@/app/_components", () => ({
@@ -104,10 +83,6 @@ vi.mock("@/stores/user/user-context", () => ({
useUserState: () => ({ currentUser: { countryCode: "ID" } }), useUserState: () => ({ currentUser: { countryCode: "ID" } }),
})); }));
vi.mock("@/providers/character-catalog-provider", () => ({
useCharacterCatalog: () => mocks.characterCatalog,
}));
vi.mock("@/lib/payment/payment_method", () => ({ vi.mock("@/lib/payment/payment_method", () => ({
getPaymentMethodConfig: () => ({ getPaymentMethodConfig: () => ({
initialPayChannel: "stripe", initialPayChannel: "stripe",
@@ -122,16 +97,13 @@ vi.mock("@/lib/analytics", () => ({
})); }));
vi.mock("../use-subscription-payment-flow", () => ({ vi.mock("../use-subscription-payment-flow", () => ({
useSubscriptionPaymentFlow: (input: unknown) => { useSubscriptionPaymentFlow: () => ({
mocks.paymentFlowInput(input);
return {
payment: mocks.payment, payment: mocks.payment,
paymentDispatch: mocks.paymentDispatch, paymentDispatch: mocks.paymentDispatch,
showPaymentSuccessDialog: false, showPaymentSuccessDialog: false,
handleBackClick: vi.fn(), handleBackClick: vi.fn(),
handlePaymentSuccessClose: vi.fn(), handlePaymentSuccessClose: vi.fn(),
}; }),
},
})); }));
vi.mock("../components", () => ({ vi.mock("../components", () => ({
@@ -198,16 +170,8 @@ describe("SubscriptionScreen payment selection flow", () => {
beforeEach(() => { beforeEach(() => {
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }) (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
.IS_REACT_ACT_ENVIRONMENT = true; .IS_REACT_ACT_ENVIRONMENT = true;
mocks.payment.isFirstRecharge = false;
mocks.payment.commercialOffer = null;
for (const plan of mocks.payment.plans) {
delete (plan as Record<string, unknown>).isFirstRechargeOffer;
delete (plan as Record<string, unknown>).firstRechargeDiscountPercent;
delete (plan as Record<string, unknown>).promotionType;
}
mocks.payment.selectedPlanId = "vip_monthly"; mocks.payment.selectedPlanId = "vip_monthly";
mocks.paymentDispatch.mockClear(); mocks.paymentDispatch.mockClear();
mocks.paymentFlowInput.mockClear();
mocks.planClick.mockClear(); mocks.planClick.mockClear();
container = document.createElement("div"); container = document.createElement("div");
document.body.appendChild(container); document.body.appendChild(container);
@@ -217,11 +181,10 @@ describe("SubscriptionScreen payment selection flow", () => {
afterEach(() => { afterEach(() => {
act(() => root.unmount()); act(() => root.unmount());
container.remove(); container.remove();
vi.useRealTimers();
}); });
it("confirms VIP selection before enabling the separate checkout button", () => { it("confirms VIP selection before enabling the separate checkout button", () => {
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />)); act(() => root.render(<SubscriptionScreen />));
const checkout = container.querySelector<HTMLButtonElement>( const checkout = container.querySelector<HTMLButtonElement>(
'[data-testid="checkout"]', '[data-testid="checkout"]',
); );
@@ -252,7 +215,7 @@ describe("SubscriptionScreen payment selection flow", () => {
}); });
it("keeps the original selection when VIP confirmation is cancelled", () => { it("keeps the original selection when VIP confirmation is cancelled", () => {
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />)); act(() => root.render(<SubscriptionScreen />));
act(() => clickButton(container, "vip_quarterly")); act(() => clickButton(container, "vip_quarterly"));
expect(container.querySelector('[role="dialog"]')).not.toBeNull(); expect(container.querySelector('[role="dialog"]')).not.toBeNull();
@@ -267,21 +230,21 @@ describe("SubscriptionScreen payment selection flow", () => {
}); });
it("requires VIP confirmation again after the page is remounted", () => { it("requires VIP confirmation again after the page is remounted", () => {
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />)); act(() => root.render(<SubscriptionScreen />));
act(() => clickButton(container, "vip_monthly")); act(() => clickButton(container, "vip_monthly"));
act(() => clickButton(container, "Confirm")); act(() => clickButton(container, "Confirm"));
expect(container.querySelector('[role="dialog"]')).toBeNull(); expect(container.querySelector('[role="dialog"]')).toBeNull();
act(() => root.unmount()); act(() => root.unmount());
root = createRoot(container); root = createRoot(container);
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />)); act(() => root.render(<SubscriptionScreen />));
act(() => clickButton(container, "vip_monthly")); act(() => clickButton(container, "vip_monthly"));
expect(container.querySelector('[role="dialog"]')).not.toBeNull(); expect(container.querySelector('[role="dialog"]')).not.toBeNull();
}); });
it("selects a coin package without showing the renewal dialog", () => { it("selects a coin package without showing the renewal dialog", () => {
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />)); act(() => root.render(<SubscriptionScreen />));
act(() => clickButton(container, "coin_1000")); act(() => clickButton(container, "coin_1000"));
expect(container.querySelector('[role="dialog"]')).toBeNull(); expect(container.querySelector('[role="dialog"]')).toBeNull();
@@ -312,149 +275,6 @@ describe("SubscriptionScreen payment selection flow", () => {
expect(guidance?.textContent).toContain("cannot continue"); expect(guidance?.textContent).toContain("cannot continue");
expect(guidance?.textContent).not.toContain("Elio"); 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 { function clickButton(root: ParentNode, label: string): void {
@@ -10,6 +10,7 @@ import {
canCheckoutSubscriptionPlan, canCheckoutSubscriptionPlan,
findSelectedSubscriptionPlan, findSelectedSubscriptionPlan,
getDefaultSubscriptionPlanId, getDefaultSubscriptionPlanId,
getFirstRechargeOfferView,
requiresVipPlanConfirmation, requiresVipPlanConfirmation,
toCoinsOfferPlanViews, toCoinsOfferPlanViews,
toVipOfferPlanViews, toVipOfferPlanViews,
@@ -100,7 +101,7 @@ describe("subscription screen helpers", () => {
]); ]);
}); });
it("ignores legacy first-recharge flags while retaining quoted and original prices", () => { it("maps first recharge offer fields to plan views", () => {
const vipViews = toVipOfferPlanViews([ const vipViews = toVipOfferPlanViews([
makePlan({ makePlan({
planId: "vip_monthly", planId: "vip_monthly",
@@ -125,18 +126,51 @@ describe("subscription screen helpers", () => {
}), }),
]); ]);
expect(vipViews[0]).toEqual(expect.objectContaining({ expect(vipViews[0]).toMatchObject({
price: "9.95", price: "9.95",
originalPrice: "19.9", originalPrice: "19.9",
})); isFirstRechargeOffer: true,
expect(vipViews[0]).not.toHaveProperty("isFirstRechargeOffer"); firstRechargeDiscountPercent: 50,
expect(vipViews[0]).not.toHaveProperty("firstRechargeDiscountPercent"); });
expect(coinViews[0]).toEqual(expect.objectContaining({ expect(coinViews[0]).toMatchObject({
price: "4.95", price: "4.95",
originalPrice: "9.9", originalPrice: "9.9",
})); isFirstRechargeOffer: true,
expect(coinViews[0]).not.toHaveProperty("isFirstRechargeOffer"); firstRechargeDiscountPercent: 50,
expect(coinViews[0]).not.toHaveProperty("firstRechargeDiscountPercent"); });
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();
}); });
it("maps the backend most popular flag to VIP and coin views", () => { it("maps the backend most popular flag to VIP and coin views", () => {
@@ -157,7 +191,7 @@ describe("subscription screen helpers", () => {
expect(popularCoins[0]?.mostPopular).toBe(true); expect(popularCoins[0]?.mostPopular).toBe(true);
}); });
it("maps regular VIP original price without exposing legacy first-recharge state", () => { it("maps normal VIP original price outside first recharge activity", () => {
expect( expect(
toVipOfferPlanViews([ toVipOfferPlanViews([
makePlan({ makePlan({
@@ -172,6 +206,7 @@ describe("subscription screen helpers", () => {
id: "vip_monthly", id: "vip_monthly",
price: "19.9", price: "19.9",
originalPrice: "24.99", originalPrice: "24.99",
isFirstRechargeOffer: false,
}, },
]); ]);
}); });
@@ -3,12 +3,8 @@ import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { Result } from "@/utils/result"; import { Result } from "@/utils/result";
import { ApiError } from "@/data/services/api/api_result";
import { import { SubscriptionPaymentIssueDialog } from "../subscription-payment-issue-dialog";
getPaymentIssueSubmitErrorLogDetails,
SubscriptionPaymentIssueDialog,
} from "../subscription-payment-issue-dialog";
import { SubscriptionRenewalConfirmationDialog } from "../subscription-renewal-confirmation-dialog"; import { SubscriptionRenewalConfirmationDialog } from "../subscription-renewal-confirmation-dialog";
const mocks = vi.hoisted(() => ({ const mocks = vi.hoisted(() => ({
@@ -204,28 +200,6 @@ describe("subscription payment dialogs", () => {
); );
expect(onClose).toHaveBeenCalledOnce(); expect(onClose).toHaveBeenCalledOnce();
}); });
it("keeps HTTP status and backend error code in payment issue failure diagnostics", () => {
const failure = Result.err(
new ApiError("HTTP_ERROR", "Invalid feedback context", 400, {
detail: {
message: "Invalid feedback context",
errorCode: "INVALID_FEEDBACK_CONTEXT",
},
}),
);
if (failure.success) throw new Error("Expected failure result");
expect(getPaymentIssueSubmitErrorLogDetails(failure.error)).toMatchObject({
code: "UNKNOWN",
message: "Invalid feedback context",
causeName: "ApiError",
causeMessage: "Invalid feedback context",
httpStatus: 400,
apiCode: "HTTP_ERROR",
serverErrorCode: "INVALID_FEEDBACK_CONTEXT",
});
});
}); });
function clickButton(root: ParentNode | null, label: string): void { function clickButton(root: ParentNode | null, label: string): void {
@@ -71,6 +71,8 @@ describe("subscription Tailwind components", () => {
currency: "usd", currency: "usd",
originalPrice: "19.99", originalPrice: "19.99",
mostPopular: true, mostPopular: true,
isFirstRechargeOffer: true,
firstRechargeDiscountPercent: 50,
}, },
]} ]}
selectedPlanId="vip_monthly" selectedPlanId="vip_monthly"
@@ -94,7 +96,7 @@ describe("subscription Tailwind components", () => {
); );
expect(vipHtml).toContain("Most Popular"); expect(vipHtml).toContain("Most Popular");
expect(vipHtml).not.toContain("First Recharge"); expect(vipHtml).toContain("50% OFF");
expect(coinsHtml).toContain("Most Popular"); expect(coinsHtml).toContain("Most Popular");
}); });
}); });
@@ -24,7 +24,6 @@ export interface SubscriptionCheckoutButtonProps {
subscriptionType: "vip" | "topup"; subscriptionType: "vip" | "topup";
returnTo?: SubscriptionReturnTo; returnTo?: SubscriptionReturnTo;
sourceCharacterSlug?: string; sourceCharacterSlug?: string;
countryCode?: string | null;
} }
export function SubscriptionCheckoutButton({ export function SubscriptionCheckoutButton({
@@ -32,7 +31,6 @@ export function SubscriptionCheckoutButton({
subscriptionType, subscriptionType,
returnTo = null, returnTo = null,
sourceCharacterSlug = DEFAULT_CHARACTER_SLUG, sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
countryCode = null,
}: SubscriptionCheckoutButtonProps) { }: SubscriptionCheckoutButtonProps) {
const payment = usePaymentState(); const payment = usePaymentState();
const paymentDispatch = usePaymentDispatch(); const paymentDispatch = usePaymentDispatch();
@@ -44,7 +42,6 @@ export function SubscriptionCheckoutButton({
returnTo: returnTo ?? undefined, returnTo: returnTo ?? undefined,
characterSlug: sourceCharacterSlug, characterSlug: sourceCharacterSlug,
subscriptionType, subscriptionType,
countryCode,
}); });
const isLoading = payment.isCreatingOrder || payment.isPollingOrder; const isLoading = payment.isCreatingOrder || payment.isPollingOrder;
@@ -60,6 +57,7 @@ export function SubscriptionCheckoutButton({
paymentLaunch.resetLaunchState(); paymentLaunch.resetLaunchState();
paymentDispatch({ type: "PaymentCreateOrderSubmitted" }); paymentDispatch({ type: "PaymentCreateOrderSubmitted" });
}; };
return ( return (
<> <>
<SubscriptionCtaButton <SubscriptionCtaButton
@@ -10,7 +10,9 @@ export interface CoinsOfferPlanView {
price: string; price: string;
currency: string; currency: string;
originalPrice?: string; originalPrice?: string;
isFirstRechargeOffer?: boolean;
mostPopular?: boolean; mostPopular?: boolean;
firstRechargeDiscountPercent?: number | null;
promotionType?: string | null; promotionType?: string | null;
} }
@@ -54,6 +56,11 @@ export function SubscriptionCoinsOfferSection({
{plan.mostPopular ? ( {plan.mostPopular ? (
<span className={styles.popularBadge}>Most Popular</span> <span className={styles.popularBadge}>Most Popular</span>
) : null} ) : null}
{plan.isFirstRechargeOffer ? (
<span className={styles.offerBadge}>
{plan.firstRechargeDiscountPercent ?? 50}% OFF
</span>
) : null}
</span> </span>
<span className={styles.priceGroup}> <span className={styles.priceGroup}>
<span className={styles.price}> <span className={styles.price}>
@@ -6,7 +6,6 @@ import { ModalPortal } from "@/app/_components/core/modal-portal";
import { createFeedbackContext } from "@/app/feedback/feedback-context"; import { createFeedbackContext } from "@/app/feedback/feedback-context";
import type { PayChannel } from "@/data/schemas/payment"; import type { PayChannel } from "@/data/schemas/payment";
import { submitFeedback } from "@/lib/feedback"; import { submitFeedback } from "@/lib/feedback";
import { Logger } from "@/utils/logger";
import type { SubscriptionType } from "../subscription-screen.helpers"; import type { SubscriptionType } from "../subscription-screen.helpers";
import styles from "./subscription-dialog.module.css"; import styles from "./subscription-dialog.module.css";
@@ -34,21 +33,6 @@ const OTHER_DETAILS_MIN_LENGTH = 10;
const OTHER_DETAILS_MAX_LENGTH = 2000; const OTHER_DETAILS_MAX_LENGTH = 2000;
const SUCCESS_MESSAGE = "Thanks. Your payment issue has been submitted."; const SUCCESS_MESSAGE = "Thanks. Your payment issue has been submitted.";
const FAILURE_MESSAGE = "Unable to submit. Please try again."; const FAILURE_MESSAGE = "Unable to submit. Please try again.";
const log = new Logger("SubscriptionPaymentIssueDialog");
interface ErrorRecord {
readonly [key: string]: unknown;
}
export interface PaymentIssueSubmitErrorLogDetails {
code: string;
message: string;
causeName?: string;
causeMessage?: string;
httpStatus?: number;
apiCode?: string;
serverErrorCode?: string;
}
export interface SubscriptionPaymentIssueDialogProps { export interface SubscriptionPaymentIssueDialogProps {
open: boolean; open: boolean;
@@ -135,19 +119,6 @@ export function SubscriptionPaymentIssueDialog({
}); });
if (!result.success) { if (!result.success) {
log.error(
{
...getPaymentIssueSubmitErrorLogDetails(result.error),
paymentIssueReason: reason,
subscriptionType,
planId,
orderId,
payChannel,
countryCode,
characterId,
},
"Payment issue feedback submit failed",
);
setErrorMessage(FAILURE_MESSAGE); setErrorMessage(FAILURE_MESSAGE);
setIsSubmitting(false); setIsSubmitting(false);
return; return;
@@ -235,32 +206,6 @@ export function SubscriptionPaymentIssueDialog({
); );
} }
export function getPaymentIssueSubmitErrorLogDetails(
error: Error,
): PaymentIssueSubmitErrorLogDetails {
const errorRecord = toErrorRecord(error);
const cause = toErrorRecord(errorRecord?.cause);
const responseDetails = toErrorRecord(cause?.details);
const detail = toErrorRecord(responseDetails?.detail);
const causeName = stringValue(cause?.name);
const causeMessage = stringValue(cause?.message);
const httpStatus = numberValue(cause?.status);
const apiCode = stringValue(cause?.code);
const serverErrorCode =
stringValue(detail?.errorCode) ??
stringValue(responseDetails?.errorCode);
return {
code: stringValue(errorRecord?.code) ?? "UNKNOWN",
message: error.message,
...(causeName ? { causeName } : {}),
...(causeMessage ? { causeMessage } : {}),
...(httpStatus !== undefined ? { httpStatus } : {}),
...(apiCode ? { apiCode } : {}),
...(serverErrorCode ? { serverErrorCode } : {}),
};
}
function createIdempotencyKey(): string { function createIdempotencyKey(): string {
const token = const token =
typeof crypto !== "undefined" && "randomUUID" in crypto typeof crypto !== "undefined" && "randomUUID" in crypto
@@ -268,18 +213,3 @@ function createIdempotencyKey(): string {
: `${Date.now()}_${Math.random().toString(36).slice(2)}`; : `${Date.now()}_${Math.random().toString(36).slice(2)}`;
return `payment_feedback_${token}`; return `payment_feedback_${token}`;
} }
function toErrorRecord(value: unknown): ErrorRecord | null {
if (typeof value !== "object" || value === null) return null;
return value as ErrorRecord;
}
function stringValue(value: unknown): string | undefined {
return typeof value === "string" && value.length > 0 ? value : undefined;
}
function numberValue(value: unknown): number | undefined {
return typeof value === "number" && Number.isFinite(value)
? value
: undefined;
}
@@ -1,24 +1,14 @@
.shell { .shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: var(--app-viewport-height, 100dvh);
min-height: var(--app-viewport-height, 100dvh); min-height: var(--app-viewport-height, 100dvh);
overflow: hidden;
background: background:
radial-gradient(circle at 8% 4%, rgba(255, 255, 255, 0.95) 0 90px, transparent 160px), radial-gradient(circle at 8% 4%, rgba(255, 255, 255, 0.95) 0 90px, transparent 160px),
linear-gradient(180deg, #fff9fb 0%, #fcf3f4 52%, #fffefe 100%); linear-gradient(180deg, #fff9fb 0%, #fcf3f4 52%, #fffefe 100%);
}
.scrollArea {
min-height: 0;
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: padding:
calc(var(--page-padding-y, 18px) + var(--app-safe-top, 0px)) calc(var(--page-padding-y, 18px) + var(--app-safe-top, 0px))
calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px)) calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
var(--page-section-gap-lg, 22px) calc(104px + var(--app-safe-bottom, 0px))
calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px)); calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
} }
@@ -201,12 +191,11 @@
} }
.ctaSlot { .ctaSlot {
position: relative; position: fixed;
z-index: 40; z-index: 40;
flex: 0 0 auto; right: 50%;
width: 100%; bottom: 0;
max-height: min(50dvh, 360px); width: min(100%, var(--app-max-width, 540px));
overflow-y: auto;
padding: padding:
12px 12px
calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px)) calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
@@ -220,4 +209,5 @@
); );
box-shadow: 0 -12px 30px rgba(87, 35, 59, 0.1); box-shadow: 0 -12px 30px rgba(87, 35, 59, 0.1);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
transform: translateX(50%);
} }
@@ -8,7 +8,9 @@ export interface VipOfferPlanView {
price: string; price: string;
currency: string; currency: string;
originalPrice: string; originalPrice: string;
isFirstRechargeOffer?: boolean;
mostPopular?: boolean; mostPopular?: boolean;
firstRechargeDiscountPercent?: number | null;
promotionType?: string | null; promotionType?: string | null;
} }
@@ -41,7 +43,9 @@ export function SubscriptionVipOfferSection({
<div className={styles.planGrid}> <div className={styles.planGrid}>
{plans.map((plan) => { {plans.map((plan) => {
const selected = selectedPlanId === plan.id; const selected = selectedPlanId === plan.id;
const badgeCount = Number(plan.mostPopular === true); const badgeCount =
Number(plan.mostPopular === true) +
Number(plan.isFirstRechargeOffer === true);
return ( return (
<button <button
key={plan.id} key={plan.id}
@@ -58,6 +62,11 @@ export function SubscriptionVipOfferSection({
{plan.mostPopular ? ( {plan.mostPopular ? (
<span className={styles.popularBadge}>Most Popular</span> <span className={styles.popularBadge}>Most Popular</span>
) : null} ) : null}
{plan.isFirstRechargeOffer ? (
<span className={styles.offerBadge}>
{plan.firstRechargeDiscountPercent ?? 50}% OFF
</span>
) : null}
</span> </span>
) : null} ) : null}
<span className={styles.planTitle}>{plan.title}</span> <span className={styles.planTitle}>{plan.title}</span>
+3 -1
View File
@@ -10,6 +10,7 @@ import {
type PaymentSearchParams, type PaymentSearchParams,
} from "@/lib/payment/payment_search_params"; } from "@/lib/payment/payment_search_params";
import { import {
DEFAULT_CHARACTER_SLUG,
getCharacterBySlug, getCharacterBySlug,
} from "@/data/constants/character"; } from "@/data/constants/character";
@@ -29,7 +30,8 @@ export default async function SubscriptionPage({
getFirstPaymentSearchParam(query.type), getFirstPaymentSearchParam(query.type),
); );
const sourceCharacterSlug = const sourceCharacterSlug =
getCharacterBySlug(getFirstPaymentSearchParam(query.character))?.slug ?? null; getCharacterBySlug(getFirstPaymentSearchParam(query.character))?.slug ??
DEFAULT_CHARACTER_SLUG;
const initialPlanId = getFirstPaymentSearchParam(query.planId); const initialPlanId = getFirstPaymentSearchParam(query.planId);
const commercialOfferId = getFirstPaymentSearchParam( const commercialOfferId = getFirstPaymentSearchParam(
query.commercialOfferId, query.commercialOfferId,
@@ -5,9 +5,17 @@ import type { VipOfferPlanView } from "./components/subscription-vip-offer-secti
export type SubscriptionType = "vip" | "topup"; export type SubscriptionType = "vip" | "topup";
export interface FirstRechargeOfferView {
badgeText: string;
title: string;
subtitle: string;
renewalNotice: string | null;
}
export function isVipPlan(plan: PaymentPlan): boolean { export function isVipPlan(plan: PaymentPlan): boolean {
return plan.vipDays !== null; return plan.vipDays !== null;
} }
export function isCreditPlan(plan: PaymentPlan): boolean { export function isCreditPlan(plan: PaymentPlan): boolean {
return plan.dolAmount !== null; return plan.dolAmount !== null;
} }
@@ -52,7 +60,9 @@ export function toVipOfferPlanView(plan: PaymentPlan): VipOfferPlanView {
price: formatOfferAmount(plan.amountCents), price: formatOfferAmount(plan.amountCents),
currency: formatOfferCurrency(plan.currency), currency: formatOfferCurrency(plan.currency),
originalPrice: formatOfferAmount(plan.originalAmountCents), originalPrice: formatOfferAmount(plan.originalAmountCents),
isFirstRechargeOffer: plan.isFirstRechargeOffer,
mostPopular: plan.mostPopular, mostPopular: plan.mostPopular,
firstRechargeDiscountPercent: plan.firstRechargeDiscountPercent,
promotionType: plan.promotionType, promotionType: plan.promotionType,
}; };
} }
@@ -64,7 +74,9 @@ export function toCoinsOfferPlanView(plan: PaymentPlan): CoinsOfferPlanView {
price: formatOfferAmount(plan.amountCents), price: formatOfferAmount(plan.amountCents),
currency: formatCoinCurrency(plan.currency), currency: formatCoinCurrency(plan.currency),
originalPrice: formatOfferAmount(plan.originalAmountCents), originalPrice: formatOfferAmount(plan.originalAmountCents),
isFirstRechargeOffer: plan.isFirstRechargeOffer,
mostPopular: plan.mostPopular, mostPopular: plan.mostPopular,
firstRechargeDiscountPercent: plan.firstRechargeDiscountPercent,
promotionType: plan.promotionType, promotionType: plan.promotionType,
}; };
} }
@@ -150,3 +162,30 @@ export function getDefaultSubscriptionPlanId(input: {
if (input.selectedPlan !== null) return null; if (input.selectedPlan !== null) return null;
return input.coinPlans[0]?.id ?? 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,
};
}
+58 -60
View File
@@ -8,8 +8,11 @@ import { usePaymentMethodSelection } from "@/app/_hooks/use-payment-method-selec
import { usePaymentPlanAnalytics } from "@/app/_hooks/use-payment-plan-analytics"; import { usePaymentPlanAnalytics } from "@/app/_hooks/use-payment-plan-analytics";
import type { PayChannel } from "@/data/schemas/payment"; import type { PayChannel } from "@/data/schemas/payment";
import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit"; import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit";
import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character"; import {
import { useCharacterCatalog } from "@/providers/character-catalog-provider"; DEFAULT_CHARACTER,
DEFAULT_CHARACTER_SLUG,
getCharacterBySlug,
} from "@/data/constants/character";
import { import {
behaviorAnalytics, behaviorAnalytics,
getDefaultPaymentAnalyticsContext, getDefaultPaymentAnalyticsContext,
@@ -31,6 +34,7 @@ import styles from "./components/subscription-screen.module.css";
import { import {
canCheckoutSubscriptionPlan, canCheckoutSubscriptionPlan,
findSelectedSubscriptionPlan, findSelectedSubscriptionPlan,
getFirstRechargeOfferView,
getDefaultSubscriptionPlanId, getDefaultSubscriptionPlanId,
requiresVipPlanConfirmation, requiresVipPlanConfirmation,
toCoinsOfferPlanViews, toCoinsOfferPlanViews,
@@ -47,7 +51,7 @@ export interface SubscriptionScreenProps {
returnTo?: SubscriptionReturnTo; returnTo?: SubscriptionReturnTo;
initialPayChannel?: PayChannel | null; initialPayChannel?: PayChannel | null;
analyticsContext?: PaymentAnalyticsContext; analyticsContext?: PaymentAnalyticsContext;
sourceCharacterSlug?: string | null; sourceCharacterSlug?: string;
initialPlanId?: string | null; initialPlanId?: string | null;
commercialOfferId?: string | null; commercialOfferId?: string | null;
resumeOrderId?: string | null; resumeOrderId?: string | null;
@@ -60,7 +64,7 @@ export function SubscriptionScreen({
returnTo = null, returnTo = null,
initialPayChannel = null, initialPayChannel = null,
analyticsContext: providedAnalyticsContext, analyticsContext: providedAnalyticsContext,
sourceCharacterSlug = null, sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
initialPlanId = null, initialPlanId = null,
commercialOfferId = null, commercialOfferId = null,
resumeOrderId = null, resumeOrderId = null,
@@ -74,9 +78,9 @@ export function SubscriptionScreen({
const [paymentIssueNotice, setPaymentIssueNotice] = useState<string | null>( const [paymentIssueNotice, setPaymentIssueNotice] = useState<string | null>(
null, null,
); );
const characterCatalog = useCharacterCatalog();
const userState = useUserState(); const userState = useUserState();
const sourceCharacter = characterCatalog.getBySlug(sourceCharacterSlug); const sourceCharacter =
getCharacterBySlug(sourceCharacterSlug) ?? DEFAULT_CHARACTER;
const hasHydrated = useHasHydrated(); const hasHydrated = useHasHydrated();
const countryCode = userState.currentUser?.countryCode; const countryCode = userState.currentUser?.countryCode;
const paymentMethodConfig = getPaymentMethodConfig({ const paymentMethodConfig = getPaymentMethodConfig({
@@ -96,51 +100,13 @@ export function SubscriptionScreen({
subscriptionType, subscriptionType,
shouldResumePendingOrder, shouldResumePendingOrder,
returnTo, returnTo,
sourceCharacterSlug: sourceCharacter?.slug ?? null, sourceCharacterSlug,
initialPayChannel: paymentMethodConfig.initialPayChannel, initialPayChannel: paymentMethodConfig.initialPayChannel,
initialPlanId, initialPlanId,
commercialOfferId, commercialOfferId,
resumeOrderId, resumeOrderId,
chatActionId, 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 canSubscribeVip = subscriptionType === "vip";
const analyticsContext = const analyticsContext =
providedAnalyticsContext ?? providedAnalyticsContext ??
@@ -165,6 +131,22 @@ export function SubscriptionScreen({
}); });
}, [canSubscribeVip, directCoinsPlans, payment.plans, vipOfferPlans]); }, [canSubscribeVip, directCoinsPlans, payment.plans, vipOfferPlans]);
usePaymentPlanAnalytics(displayedPlans, analyticsContext); usePaymentPlanAnalytics(displayedPlans, analyticsContext);
const firstRechargeOffer = useMemo(
() =>
getFirstRechargeOfferView({
isFirstRecharge: payment.isFirstRecharge,
subscriptionType,
vipPlans: vipOfferPlans,
coinPlans: directCoinsPlans,
}),
[
directCoinsPlans,
payment.isFirstRecharge,
subscriptionType,
vipOfferPlans,
],
);
const selectedPlan = findSelectedSubscriptionPlan({ const selectedPlan = findSelectedSubscriptionPlan({
canSubscribeVip, canSubscribeVip,
selectedPlanId: payment.selectedPlanId, selectedPlanId: payment.selectedPlanId,
@@ -178,7 +160,6 @@ export function SubscriptionScreen({
(plan) => plan.id === payment.selectedPlanId, (plan) => plan.id === payment.selectedPlanId,
); );
const canActivate = const canActivate =
sourceCharacter !== null &&
selectedPlan !== null && selectedPlan !== null &&
canCheckoutSubscriptionPlan({ canCheckoutSubscriptionPlan({
selectedPlanId: payment.selectedPlanId, selectedPlanId: payment.selectedPlanId,
@@ -262,7 +243,6 @@ export function SubscriptionScreen({
return ( return (
<MobileShell> <MobileShell>
<div className={styles.shell}> <div className={styles.shell}>
<div className={styles.scrollArea}>
<header className={styles.header}> <header className={styles.header}>
<BackButton <BackButton
className={styles.backSlot} className={styles.backSlot}
@@ -288,7 +268,7 @@ export function SubscriptionScreen({
</p> </p>
) : null} ) : null}
{chatActionId && sourceCharacter ? ( {chatActionId ? (
<section <section
className={styles.characterSupportBanner} className={styles.characterSupportBanner}
aria-label={`Support ${sourceCharacter.displayName}`} aria-label={`Support ${sourceCharacter.displayName}`}
@@ -304,19 +284,39 @@ export function SubscriptionScreen({
</section> </section>
) : null} ) : null}
{payment.commercialOffer && sourceCharacter ? ( {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 ? (
<section <section
className={styles.firstRechargeBanner} className={styles.firstRechargeBanner}
aria-label={`${sourceCharacter.shortName} private offer`} aria-label={`${sourceCharacter.shortName} private offer`}
> >
<span className={styles.firstRechargeBadge}> <span className={styles.firstRechargeBadge}>Private offer</span>
Private offer · {payment.commercialOffer.discountPercent}% OFF
</span>
<div className={styles.firstRechargeCopy}> <div className={styles.firstRechargeCopy}>
<h2 className={styles.firstRechargeTitle}> <h2 className={styles.firstRechargeTitle}>
{payment.commercialOffer.scope === "account" {sourceCharacter.shortName} got this price for you
? "Your private price is active"
: `${sourceCharacter.shortName} got this price for you`}
</h2> </h2>
<p className={styles.firstRechargeSubtitle}> <p className={styles.firstRechargeSubtitle}>
{payment.commercialOffer.message || {payment.commercialOffer.message ||
@@ -344,7 +344,7 @@ export function SubscriptionScreen({
<PaymentMethodSelector <PaymentMethodSelector
config={renderedPaymentMethodConfig} config={renderedPaymentMethodConfig}
value={payment.payChannel} value={payment.payChannel}
disabled={payment.isCreatingOrder} disabled={isPaymentBusy}
caption={ caption={
paymentMethodConfig.ezpayDisplayName === "QRIS" paymentMethodConfig.ezpayDisplayName === "QRIS"
? "QRIS by default in Indonesia" ? "QRIS by default in Indonesia"
@@ -354,15 +354,13 @@ export function SubscriptionScreen({
analyticsKey="subscription.payment_method" analyticsKey="subscription.payment_method"
onChange={handlePaymentMethodChange} onChange={handlePaymentMethodChange}
/> />
</div>
<div className={styles.ctaSlot}> <div className={styles.ctaSlot}>
<SubscriptionCheckoutButton <SubscriptionCheckoutButton
disabled={!canActivate} disabled={!canActivate}
subscriptionType={subscriptionType} subscriptionType={subscriptionType}
returnTo={returnTo} returnTo={returnTo}
sourceCharacterSlug={sourceCharacter?.slug ?? DEFAULT_CHARACTER_SLUG} sourceCharacterSlug={sourceCharacterSlug}
countryCode={countryCode}
/> />
</div> </div>
@@ -387,7 +385,7 @@ export function SubscriptionScreen({
orderId={payment.currentOrderId} orderId={payment.currentOrderId}
payChannel={payment.payChannel} payChannel={payment.payChannel}
countryCode={countryCode} countryCode={countryCode}
characterId={sourceCharacter?.id ?? ""} characterId={sourceCharacterSlug}
onClose={() => setShowPaymentIssueDialog(false)} onClose={() => setShowPaymentIssueDialog(false)}
onSubmitted={setPaymentIssueNotice} onSubmitted={setPaymentIssueNotice}
/> />
@@ -5,10 +5,7 @@ import { useRouter } from "next/navigation";
import { usePaymentRouteFlow } from "@/app/_hooks/use-payment-route-flow"; import { usePaymentRouteFlow } from "@/app/_hooks/use-payment-route-flow";
import type { PayChannel } from "@/data/schemas/payment"; import type { PayChannel } from "@/data/schemas/payment";
import { import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
DEFAULT_CHARACTER,
getCharacterBySlug,
} from "@/data/constants/character";
import { import {
consumeSubscriptionExitUrl, consumeSubscriptionExitUrl,
resolveSubscriptionSuccessExitUrl, resolveSubscriptionSuccessExitUrl,
@@ -22,7 +19,7 @@ export interface UseSubscriptionPaymentFlowInput {
shouldResumePendingOrder: boolean; shouldResumePendingOrder: boolean;
returnTo: SubscriptionReturnTo; returnTo: SubscriptionReturnTo;
initialPayChannel: PayChannel; initialPayChannel: PayChannel;
sourceCharacterSlug?: string | null; sourceCharacterSlug?: string;
initialPlanId?: string | null; initialPlanId?: string | null;
commercialOfferId?: string | null; commercialOfferId?: string | null;
resumeOrderId?: string | null; resumeOrderId?: string | null;
@@ -34,20 +31,17 @@ export function useSubscriptionPaymentFlow({
shouldResumePendingOrder, shouldResumePendingOrder,
returnTo, returnTo,
initialPayChannel, initialPayChannel,
sourceCharacterSlug = null, sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
initialPlanId = null, initialPlanId = null,
commercialOfferId = null, commercialOfferId = null,
resumeOrderId = null, resumeOrderId = null,
chatActionId = null, chatActionId = null,
}: UseSubscriptionPaymentFlowInput) { }: UseSubscriptionPaymentFlowInput) {
const router = useRouter(); const router = useRouter();
const supportCharacter = getCharacterBySlug(sourceCharacterSlug);
const exitCharacterSlug = supportCharacter?.slug ?? DEFAULT_CHARACTER.slug;
const { payment, paymentDispatch } = usePaymentRouteFlow({ const { payment, paymentDispatch } = usePaymentRouteFlow({
initialPayChannel, initialPayChannel,
paymentType: subscriptionType, paymentType: subscriptionType,
shouldResumePendingOrder, shouldResumePendingOrder,
characterId: supportCharacter?.id,
initialPlanId, initialPlanId,
commercialOfferId, commercialOfferId,
resumeOrderId, resumeOrderId,
@@ -68,7 +62,7 @@ export function useSubscriptionPaymentFlow({
const handleBackClick = () => { const handleBackClick = () => {
void (async () => { void (async () => {
router.replace( router.replace(
await consumeSubscriptionExitUrl(returnTo, exitCharacterSlug), await consumeSubscriptionExitUrl(returnTo, sourceCharacterSlug),
); );
})(); })();
}; };
@@ -80,7 +74,7 @@ export function useSubscriptionPaymentFlow({
router.replace( router.replace(
await resolveSubscriptionSuccessExitUrl( await resolveSubscriptionSuccessExitUrl(
returnTo, returnTo,
exitCharacterSlug, sourceCharacterSlug,
), ),
); );
})(); })();
-3
View File
@@ -19,7 +19,6 @@ export interface TipCheckoutButtonProps {
disabled?: boolean; disabled?: boolean;
onOrder: () => void; onOrder: () => void;
returnPath: string; returnPath: string;
countryCode?: string | null;
} }
export function TipCheckoutButton({ export function TipCheckoutButton({
@@ -28,7 +27,6 @@ export function TipCheckoutButton({
disabled = false, disabled = false,
onOrder, onOrder,
returnPath, returnPath,
countryCode = null,
}: TipCheckoutButtonProps) { }: TipCheckoutButtonProps) {
const character = useActiveCharacter(); const character = useActiveCharacter();
const payment = usePaymentState(); const payment = usePaymentState();
@@ -42,7 +40,6 @@ export function TipCheckoutButton({
giftCategory, giftCategory,
giftPlanId, giftPlanId,
characterSlug: character.slug, characterSlug: character.slug,
countryCode,
}); });
const isLoading = payment.isCreatingOrder || payment.isPollingOrder; const isLoading = payment.isCreatingOrder || payment.isPollingOrder;
+1 -2
View File
@@ -292,7 +292,7 @@ export function TipScreen({
config={renderedPaymentMethodConfig} config={renderedPaymentMethodConfig}
value={payment.payChannel} value={payment.payChannel}
density="compact" density="compact"
disabled={payment.isCreatingOrder} disabled={isPaymentBusy}
className={styles.paymentMethodSlot} className={styles.paymentMethodSlot}
analyticsKey="tip.payment_method" analyticsKey="tip.payment_method"
onChange={handlePaymentMethodChange} onChange={handlePaymentMethodChange}
@@ -305,7 +305,6 @@ export function TipScreen({
disabled={!canCreateOrder} disabled={!canCreateOrder}
onOrder={handleOrder} onOrder={handleOrder}
returnPath={returnPath} returnPath={returnPath}
countryCode={userState.currentUser?.countryCode}
/> />
</div> </div>
</> </>
@@ -45,27 +45,6 @@ describe("ChatWebSocket payment guidance", () => {
expect(onPaymentGuidance).not.toHaveBeenCalled(); 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 { function receive(socket: ChatWebSocket, payload: unknown): void {
-35
View File
@@ -37,13 +37,6 @@ export interface PaywallStatusPayload {
reason: string | null; reason: string | null;
} }
export interface CommercialMessagePayload {
messageId: string;
message: string;
characterId: string;
createdAt: string;
}
export class ChatWebSocket { export class ChatWebSocket {
private ws: WebSocket | null = null; private ws: WebSocket | null = null;
private reconnectTimer: ReturnType<typeof setTimeout> | null = null; private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
@@ -59,7 +52,6 @@ export class ChatWebSocket {
onCommercialAction: ((action: CommercialAction) => void) | null = null; onCommercialAction: ((action: CommercialAction) => void) | null = null;
onChatAction: ((action: ChatAction) => void) | null = null; onChatAction: ((action: ChatAction) => void) | null = null;
onPaymentGuidance: ((guidance: PaymentGuidance) => void) | null = null; onPaymentGuidance: ((guidance: PaymentGuidance) => void) | null = null;
onCommercialMessage: ((message: CommercialMessagePayload) => void) | null = null;
onError: ((errorMessage: string) => void) | null = null; onError: ((errorMessage: string) => void) | null = null;
constructor( constructor(
@@ -157,10 +149,6 @@ export class ChatWebSocket {
done?: boolean; done?: boolean;
audioUrl?: string; audioUrl?: string;
error?: string; error?: string;
messageId?: string;
message?: string;
characterId?: string;
createdAt?: string;
data?: Record<string, unknown> & { data?: Record<string, unknown> & {
image?: { image?: {
type?: string | null; type?: string | null;
@@ -175,10 +163,6 @@ export class ChatWebSocket {
ruleId?: string; ruleId?: string;
kind?: string; kind?: string;
orderId?: string | null; orderId?: string | null;
messageId?: string;
message?: string;
characterId?: string;
createdAt?: string;
}; };
}; };
try { try {
@@ -233,25 +217,6 @@ export class ChatWebSocket {
if (guidance.success) this.onPaymentGuidance?.(guidance.data); if (guidance.success) this.onPaymentGuidance?.(guidance.data);
break; break;
} }
case "commercial_message": {
const commercialMessage = payload.data?.messageId
? payload.data
: payload;
if (
commercialMessage?.messageId &&
commercialMessage.message &&
commercialMessage.characterId &&
commercialMessage.createdAt
) {
this.onCommercialMessage?.({
messageId: commercialMessage.messageId,
message: commercialMessage.message,
characterId: commercialMessage.characterId,
createdAt: commercialMessage.createdAt,
});
}
break;
}
case "error": case "error":
this.onError?.(payload.error ?? "Unknown error"); this.onError?.(payload.error ?? "Unknown error");
break; break;
@@ -13,10 +13,7 @@ import type { Result } from "@/utils/result";
export interface IPaymentRepository { export interface IPaymentRepository {
/** 获取套餐列表。 */ /** 获取套餐列表。 */
getPlans( getPlans(commercialOfferId?: string): Promise<Result<PaymentPlansResponse>>;
commercialOfferId?: string,
supportCharacterId?: string,
): Promise<Result<PaymentPlansResponse>>;
/** 获取本地缓存套餐列表。 */ /** 获取本地缓存套餐列表。 */
getCachedPlans(): Promise<Result<PaymentPlansResponse | null>>; getCachedPlans(): Promise<Result<PaymentPlansResponse | null>>;
+3 -11
View File
@@ -24,18 +24,10 @@ export class PaymentRepository implements IPaymentRepository {
constructor(private readonly api: PaymentApi) {} constructor(private readonly api: PaymentApi) {}
/** 获取套餐列表。 */ /** 获取套餐列表。 */
async getPlans( async getPlans(commercialOfferId?: string): Promise<Result<PaymentPlansResponse>> {
commercialOfferId?: string,
supportCharacterId?: string,
): Promise<Result<PaymentPlansResponse>> {
return Result.wrap(async () => { return Result.wrap(async () => {
const response = await this.api.getPlans( const response = await this.api.getPlans(commercialOfferId);
commercialOfferId, if (!commercialOfferId) await PaymentPlansStorage.setPlans(response);
supportCharacterId,
);
if (!commercialOfferId && !supportCharacterId) {
await PaymentPlansStorage.setPlans(response);
}
return response; return response;
}); });
} }
@@ -27,16 +27,6 @@ describe("payment guidance wire contract", () => {
expect(PaymentGuidanceSchema.parse(guidance)).toEqual(guidance); 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", () => { it("keeps all backend lock facts instead of dropping hint and CTA", () => {
expect( expect(
ChatLockDetailSchema.parse({ ChatLockDetailSchema.parse({
@@ -24,7 +24,6 @@ export const PaymentGuidanceSceneSchema = z.enum([
"privateZoneLocked", "privateZoneLocked",
"unknownLock", "unknownLock",
"whyPay", "whyPay",
"supportCharacter",
"leavingAfterCredits", "leavingAfterCredits",
"paymentIssue", "paymentIssue",
"externalRisk", "externalRisk",
@@ -195,19 +195,15 @@ describe("PaymentPlansResponse", () => {
it("parses one user-bound commercial offer and its discounted plan", () => { it("parses one user-bound commercial offer and its discounted plan", () => {
const response = PaymentPlansResponseSchema.parse({ const response = PaymentPlansResponseSchema.parse({
supportCharacterId: "maya-tan",
commercialOffer: { commercialOffer: {
enabled: true, enabled: true,
commercialOfferId: "offer-1", commercialOfferId: "offer-1",
characterId: "maya-tan",
planId: "vip_annual", planId: "vip_annual",
discountPercent: 30, discountPercent: 30,
pricePercent: 70, pricePercent: 70,
expiresAt: "2026-07-24T08:00:00+00:00", expiresAt: "2026-07-24T08:00:00+00:00",
triggerReason: "price_objection", triggerReason: "price_objection",
message: "I got this private price for you.", message: "I got this private price for you.",
scope: "account",
stage: "sevenDiscount",
}, },
plans: [ plans: [
{ {
@@ -229,10 +225,6 @@ describe("PaymentPlansResponse", () => {
}); });
expect(response.commercialOffer?.commercialOfferId).toBe("offer-1"); expect(response.commercialOffer?.commercialOfferId).toBe("offer-1");
expect(response.supportCharacterId).toBe("maya-tan");
expect(response.commercialOffer?.characterId).toBe("maya-tan");
expect(response.commercialOffer?.scope).toBe("account");
expect(response.commercialOffer?.stage).toBe("sevenDiscount");
expect(response.plans[0]).toMatchObject({ expect(response.plans[0]).toMatchObject({
planId: "vip_annual", planId: "vip_annual",
commercialOfferId: "offer-1", commercialOfferId: "offer-1",
@@ -24,22 +24,18 @@ export const CommercialOfferSummarySchema = z
.object({ .object({
enabled: booleanOrFalse, enabled: booleanOrFalse,
commercialOfferId: z.string().min(1), commercialOfferId: z.string().min(1),
characterId: stringOrEmpty,
planId: z.string().min(1), planId: z.string().min(1),
discountPercent: numberOrZero, discountPercent: numberOrZero,
pricePercent: numberOrZero, pricePercent: numberOrZero,
expiresAt: z.string().min(1), expiresAt: z.string().min(1),
triggerReason: stringOrEmpty, triggerReason: stringOrEmpty,
message: stringOrEmpty, message: stringOrEmpty,
scope: z.enum(["account", "character"]).optional(),
stage: z.enum(["sevenDiscount", "halfDiscount"]).optional(),
}) })
.readonly(); .readonly();
export const PaymentPlansResponseSchema = z export const PaymentPlansResponseSchema = z
.object({ .object({
isFirstRecharge: booleanOrFalse, isFirstRecharge: booleanOrFalse,
supportCharacterId: stringOrEmpty,
firstRechargeOffer: schemaOrNull(FirstRechargeOfferSchema), firstRechargeOffer: schemaOrNull(FirstRechargeOfferSchema),
commercialOffer: schemaOrNull(CommercialOfferSummarySchema), commercialOffer: schemaOrNull(CommercialOfferSummarySchema),
plans: arrayOrEmpty(PaymentPlanSchema), plans: arrayOrEmpty(PaymentPlanSchema),
+2 -12
View File
@@ -26,19 +26,9 @@ import { ApiEnvelope, unwrap } from "./response_helper";
export class PaymentApi { export class PaymentApi {
/** 获取 VIP 与 Top-up 套餐列表。 */ /** 获取 VIP 与 Top-up 套餐列表。 */
async getPlans( async getPlans(commercialOfferId?: string): Promise<PaymentPlansResponse> {
commercialOfferId?: string,
supportCharacterId?: string,
): Promise<PaymentPlansResponse> {
const env = await httpClient<ApiEnvelope<unknown>>(ApiPath.paymentPlans, { const env = await httpClient<ApiEnvelope<unknown>>(ApiPath.paymentPlans, {
...(commercialOfferId || supportCharacterId ...(commercialOfferId ? { query: { commercialOfferId } } : {}),
? {
query: {
...(commercialOfferId ? { commercialOfferId } : {}),
...(supportCharacterId ? { supportCharacterId } : {}),
},
}
: {}),
}); });
return PaymentPlansResponseSchema.parse( return PaymentPlansResponseSchema.parse(
unwrap(env) as Record<string, unknown>, unwrap(env) as Record<string, unknown>,
+28
View File
@@ -50,6 +50,27 @@ export class AppStorage {
return SpAsyncUtil.setString(StorageKeys.lastAppInfoReported, todayString); 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 ---- // ---- internal helpers ----
/** /**
@@ -68,4 +89,11 @@ export class AppStorage {
return Result.ok(r.data === null || r.data !== todayString); return Result.ok(r.data === null || r.data !== todayString);
} }
private static firstRechargeOfferBannerDismissedKey(
userId: string | null | undefined,
): string {
return `${StorageKeys.firstRechargeOfferBannerDismissed}:${
userId || "anonymous"
}`;
}
} }
+1
View File
@@ -33,6 +33,7 @@ export const StorageKeys = {
pwaDialogShown: "pwa_dialog_shown", pwaDialogShown: "pwa_dialog_shown",
lastPwaEventReported: "last_pwa_event_reported", lastPwaEventReported: "last_pwa_event_reported",
lastAppInfoReported: "last_app_info_reported", lastAppInfoReported: "last_app_info_reported",
firstRechargeOfferBannerDismissed: "first_recharge_offer_banner_dismissed",
// payment // payment
pendingPaymentOrder: "pending_payment_order", pendingPaymentOrder: "pending_payment_order",
@@ -17,17 +17,6 @@ describe("payment analytics context", () => {
entryPoint: "chat_unlock", entryPoint: "chat_unlock",
triggerReason: "ad_landing", triggerReason: "ad_landing",
}); });
expect(
parsePaymentAnalyticsContext({
entryPoint: "chat_offer_banner",
triggerReason: "commercial_offer",
subscriptionType: "vip",
}),
).toEqual({
entryPoint: "chat_offer_banner",
triggerReason: "commercial_offer",
});
}); });
it("falls back independently for invalid query values", () => { it("falls back independently for invalid query values", () => {
@@ -7,7 +7,6 @@ export type PaymentAnalyticsTriggerReason =
| "insufficient_credits" | "insufficient_credits"
| "profile_recharge" | "profile_recharge"
| "vip_cta" | "vip_cta"
| "commercial_offer"
| "ad_landing" | "ad_landing"
| "manual_recharge" | "manual_recharge"
| "unknown"; | "unknown";
@@ -48,7 +47,6 @@ const TRIGGER_REASONS = new Set<PaymentAnalyticsTriggerReason>([
"insufficient_credits", "insufficient_credits",
"profile_recharge", "profile_recharge",
"vip_cta", "vip_cta",
"commercial_offer",
"ad_landing", "ad_landing",
"manual_recharge", "manual_recharge",
"unknown", "unknown",
@@ -0,0 +1,16 @@
"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,21 +9,6 @@ import {
shouldBindExternalFacebookIdentity, shouldBindExternalFacebookIdentity,
} from "../external_entry"; } from "../external_entry";
const facebookBusinessEntryCases = [
["private-space", "elio", "chat", null, null, getCharacterRoutes("elio").chat, null],
["private-space", "maya", "chat", null, null, getCharacterRoutes("maya").chat, null],
["private-space", "nayeli", "chat", null, null, getCharacterRoutes("nayeli").chat, null],
["voice", "elio", "chat", "promotion", "voice", getCharacterRoutes("elio").chat, "voice"],
["voice", "maya", "chat", "promotion", "voice", getCharacterRoutes("maya").chat, "voice"],
["voice", "nayeli", "chat", "promotion", "voice", getCharacterRoutes("nayeli").chat, "voice"],
["image-pack", "elio", "private-zone", null, null, getCharacterRoutes("elio").privateZone, null],
["image-pack", "maya", "private-zone", null, null, getCharacterRoutes("maya").privateZone, null],
["image-pack", "nayeli", "private-zone", null, null, getCharacterRoutes("nayeli").privateZone, null],
["coffee", "elio", "tip", null, null, getCharacterRoutes("elio").tip, null],
["coffee", "maya", "tip", null, null, getCharacterRoutes("maya").tip, null],
["coffee", "nayeli", "tip", null, null, getCharacterRoutes("nayeli").tip, null],
] as const;
describe("external entry navigation", () => { describe("external entry navigation", () => {
it("defaults to chat", () => { it("defaults to chat", () => {
expect(resolveExternalEntryTarget({})).toBe(ROUTES.chat); expect(resolveExternalEntryTarget({})).toBe(ROUTES.chat);
@@ -77,26 +62,6 @@ describe("external entry navigation", () => {
).toBe(getCharacterRoutes("elio").privateZone); ).toBe(getCharacterRoutes("elio").privateZone);
}); });
it.each(facebookBusinessEntryCases)(
"routes Facebook business entry %s for %s",
(
_entry,
character,
target,
mode,
promotionType,
expectedDestination,
expectedPromotionType,
) => {
expect(resolveExternalEntryDestination({ target, character })).toBe(
expectedDestination,
);
expect(
resolveExternalEntryPromotionType({ mode, promotionType }),
).toBe(expectedPromotionType);
},
);
it.each([ it.each([
["chat", "elio", getCharacterRoutes("elio").chat], ["chat", "elio", getCharacterRoutes("elio").chat],
["chat", "maya", getCharacterRoutes("maya").chat], ["chat", "maya", getCharacterRoutes("maya").chat],
@@ -2,7 +2,6 @@ import { describe, expect, it, vi } from "vitest";
import { import {
getPaymentUrl, getPaymentUrl,
getPaymentUrlHostname,
getStripeClientSecret, getStripeClientSecret,
isEzpayPayment, isEzpayPayment,
launchEzpayRedirect, launchEzpayRedirect,
@@ -44,103 +43,36 @@ describe("payment launch helpers", () => {
).toBeNull(); ).toBeNull();
}); });
it("prioritizes a hosted GCash URL for Philippine checkout", () => { it("resolves Ezpay URL and QR launch parameters without treating QR data as a URL", () => {
expect( expect(
resolveEzpayLaunchTarget({ resolveEzpayLaunchTarget({
provider: "ezpay", provider: "ezpay",
channelType: "URL", channelType: "URL",
payData: "https://pay.example/gcash", payData: "https://pay.example/qris",
}, { countryCode: "PH", currency: "PHP" }), }),
).toEqual({ kind: "url", paymentUrl: "https://pay.example/gcash" }); ).toEqual({ kind: "url", paymentUrl: "https://pay.example/qris" });
expect( expect(
resolveEzpayLaunchTarget({ resolveEzpayLaunchTarget({
provider: "ezpay",
channelType: "QR",
payData: "000201010212ph-qr-payload",
cashierUrl: "https://pay.example/gcash-hosted",
}, { countryCode: "PH" }),
).toEqual({
kind: "url",
paymentUrl: "https://pay.example/gcash-hosted",
});
});
it("keeps a usable QR Ph fallback without calling it QRIS", () => {
expect(
resolveEzpayLaunchTarget(
{
provider: "ezpay",
channelType: "QR",
payData: "000201010212ph-qr-payload",
},
{ currency: "PHP" },
),
).toEqual({
kind: "qr",
experience: "gcashQrPh",
qrData: "000201010212ph-qr-payload",
});
expect(
resolveEzpayLaunchTarget(
{
provider: "ezpay",
payData: "000201010212ph-qr-payload",
},
{ countryCode: "PH" },
),
).toEqual({
kind: "qr",
experience: "gcashQrPh",
qrData: "000201010212ph-qr-payload",
});
});
it("keeps Indonesian QRIS ahead of an optional hosted URL", () => {
expect(
resolveEzpayLaunchTarget(
{
provider: "ezpay", provider: "ezpay",
channelType: "QR", channelType: "QR",
payData: "00020101021226670016COM.NOBUBANK.WWW", payData: "00020101021226670016COM.NOBUBANK.WWW",
cashierUrl: "https://pay.example/indonesia", }),
},
{ countryCode: "ID", currency: "IDR" },
),
).toEqual({ ).toEqual({
kind: "qr", kind: "qr",
experience: "qris",
qrData: "00020101021226670016COM.NOBUBANK.WWW", qrData: "00020101021226670016COM.NOBUBANK.WWW",
}); });
});
it("reports a regional error only when both URL and QR data are absent", () => {
expect( expect(
resolveEzpayLaunchTarget( resolveEzpayLaunchTarget({
{
provider: "ezpay", provider: "ezpay",
channelType: "QR", channelType: "QR",
payData: "", payData: "",
}, }),
{ countryCode: "PH" },
),
).toEqual({ ).toEqual({
kind: "error", kind: "error",
errorMessage: errorMessage: "QRIS payment data is missing. Please try again.",
"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", () => { it("rejects VA and unknown Ezpay channel types with explicit errors", () => {
expect( expect(
resolveEzpayLaunchTarget({ provider: "ezpay", channelType: "VA" }), resolveEzpayLaunchTarget({ provider: "ezpay", channelType: "VA" }),
+13 -102
View File
@@ -13,20 +13,9 @@ const log = new Logger("LibPaymentPaymentLaunch");
export type EzpayLaunchTarget = export type EzpayLaunchTarget =
| { kind: "url"; paymentUrl: string } | { kind: "url"; paymentUrl: string }
| { | { kind: "qr"; qrData: string }
kind: "qr";
experience: EzpayQrExperience;
qrData: string;
}
| { kind: "error"; errorMessage: string }; | { kind: "error"; errorMessage: string };
export type EzpayQrExperience = "gcashQrPh" | "qris" | "paymentQr";
export interface ResolveEzpayLaunchContext {
countryCode?: string | null;
currency?: string | null;
}
function getNonEmptyString( function getNonEmptyString(
payParams: Record<string, unknown>, payParams: Record<string, unknown>,
...keys: string[] ...keys: string[]
@@ -52,12 +41,6 @@ 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 { export function getPaymentUrl(payParams: Record<string, unknown>): string | null {
const keys = [ const keys = [
"cashierUrl", "cashierUrl",
@@ -88,7 +71,6 @@ export function isEzpayPayment(payParams: Record<string, unknown>): boolean {
export function resolveEzpayLaunchTarget( export function resolveEzpayLaunchTarget(
payParams: Record<string, unknown>, payParams: Record<string, unknown>,
context: ResolveEzpayLaunchContext = {},
): EzpayLaunchTarget { ): EzpayLaunchTarget {
const rawChannelType = getNonEmptyString( const rawChannelType = getNonEmptyString(
payParams, payParams,
@@ -97,33 +79,13 @@ export function resolveEzpayLaunchTarget(
); );
const channelType = rawChannelType?.toUpperCase() ?? null; const channelType = rawChannelType?.toUpperCase() ?? null;
const payData = getNonEmptyString(payParams, "payData", "pay_data"); const payData = getNonEmptyString(payParams, "payData", "pay_data");
const payDataUrl = getHttpPaymentUrl(payData);
const namedPaymentUrl = getHttpPaymentUrl(getPaymentUrl(payParams));
const paymentUrl = payDataUrl ?? namedPaymentUrl;
const qrData = payData && !payDataUrl ? payData : null;
const region = resolveEzpayRegion(payParams, context);
if (
region === "ph" &&
paymentUrl &&
(channelType === "QR" || channelType === "URL" || channelType === null)
) {
return { kind: "url", paymentUrl };
}
if (channelType === "QR") { if (channelType === "QR") {
if (qrData) { return payData
return { ? { kind: "qr", qrData: payData }
kind: "qr",
experience: resolveEzpayQrExperience(region),
qrData,
};
}
return paymentUrl
? { kind: "url", paymentUrl }
: { : {
kind: "error", kind: "error",
errorMessage: regionalQrMissingMessage(region), errorMessage: "QRIS payment data is missing. Please try again.",
}; };
} }
@@ -135,6 +97,8 @@ export function resolveEzpayLaunchTarget(
} }
if (channelType === "URL") { if (channelType === "URL") {
const paymentUrl =
getHttpPaymentUrl(payData) ?? getHttpPaymentUrl(getPaymentUrl(payParams));
return paymentUrl return paymentUrl
? { kind: "url", paymentUrl } ? { kind: "url", paymentUrl }
: { : {
@@ -150,68 +114,16 @@ export function resolveEzpayLaunchTarget(
}; };
} }
if (paymentUrl) return { kind: "url", paymentUrl }; const legacyPaymentUrl = getHttpPaymentUrl(getPaymentUrl(payParams));
if (qrData && region !== null) { return legacyPaymentUrl
return { ? { kind: "url", paymentUrl: legacyPaymentUrl }
kind: "qr", : {
experience: resolveEzpayQrExperience(region),
qrData,
};
}
return {
kind: "error", kind: "error",
errorMessage: errorMessage:
"Ezpay payment parameters did not include a supported URL or payment QR code.", "Ezpay payment parameters did not include a supported URL or QRIS code.",
}; };
} }
function resolveEzpayRegion(
payParams: Record<string, unknown>,
context: ResolveEzpayLaunchContext,
): "ph" | "id" | null {
const currency = (
context.currency ?? getNonEmptyString(payParams, "currency")
)
?.trim()
.toUpperCase();
if (currency === "PHP") return "ph";
if (currency === "IDR") return "id";
const countryCode = (
context.countryCode ??
getNonEmptyString(
payParams,
"purchaseCountryCode",
"purchase_country_code",
"countryCode",
"country_code",
)
)
?.trim()
.toUpperCase();
if (countryCode === "PH") return "ph";
if (countryCode === "ID") return "id";
return null;
}
function resolveEzpayQrExperience(
region: "ph" | "id" | null,
): EzpayQrExperience {
if (region === "ph") return "gcashQrPh";
if (region === "id") return "qris";
return "paymentQr";
}
function regionalQrMissingMessage(region: "ph" | "id" | null): string {
if (region === "ph") {
return "GCash / QR Ph payment data is missing. Please try again.";
}
if (region === "id") {
return "QRIS payment data is missing. Please try again.";
}
return "Payment QR data is missing. Please try again.";
}
export function getStripeClientSecret( export function getStripeClientSecret(
payParams: Record<string, unknown>, payParams: Record<string, unknown>,
): string | null { ): string | null {
@@ -254,19 +166,18 @@ export async function launchEzpayRedirect({
onOpened, onOpened,
onFailed, onFailed,
}: LaunchEzpayRedirectInput): Promise<void> { }: LaunchEzpayRedirectInput): Promise<void> {
const paymentUrlHost = getPaymentUrlHostname(paymentUrl);
log.debug("[payment-launch] launchEzpayRedirect START", { log.debug("[payment-launch] launchEzpayRedirect START", {
hasOrderId: Boolean(orderId), hasOrderId: Boolean(orderId),
orderId, orderId,
subscriptionType, subscriptionType,
paymentUrlHost, paymentUrl,
}); });
if (!orderId) { if (!orderId) {
const errorMessage = "Missing order id before opening Ezpay."; const errorMessage = "Missing order id before opening Ezpay.";
log.error("[payment-launch] pending ezpay order save skipped", { log.error("[payment-launch] pending ezpay order save skipped", {
subscriptionType, subscriptionType,
paymentUrlHost, paymentUrl,
errorMessage, errorMessage,
}); });
onFailed(errorMessage); onFailed(errorMessage);
-2
View File
@@ -20,8 +20,6 @@ export interface OpenSubscriptionInput {
replace?: boolean; replace?: boolean;
analytics?: PaymentAnalyticsContext; analytics?: PaymentAnalyticsContext;
chatActionId?: string; chatActionId?: string;
planId?: string;
commercialOfferId?: string;
} }
export interface StartMessageUnlockInput { export interface StartMessageUnlockInput {
-4
View File
@@ -80,8 +80,6 @@ export function useGlobalAppNavigator(): GlobalAppNavigator {
replace: shouldReplace = false, replace: shouldReplace = false,
analytics = getDefaultPaymentAnalyticsContext(type), analytics = getDefaultPaymentAnalyticsContext(type),
chatActionId, chatActionId,
planId,
commercialOfferId,
}: OpenGlobalSubscriptionInput): void => { }: OpenGlobalSubscriptionInput): void => {
const target = ROUTE_BUILDERS.subscription(type, { const target = ROUTE_BUILDERS.subscription(type, {
payChannel, payChannel,
@@ -89,8 +87,6 @@ export function useGlobalAppNavigator(): GlobalAppNavigator {
sourceCharacterSlug, sourceCharacterSlug,
analytics, analytics,
chatActionId, chatActionId,
planId,
commercialOfferId,
}); });
behaviorAnalytics.rechargeModalOpen(analytics); behaviorAnalytics.rechargeModalOpen(analytics);
@@ -1,34 +0,0 @@
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?", copy: "Buy me a coffee?",
ctaLabel: "View gifts", ctaLabel: "View gifts",
target: "giftCatalog", target: "giftCatalog",
ruleId: "coffee_after_thanks", ruleId: "coffee_support_question",
}, },
}), }),
); );
@@ -127,7 +127,7 @@ describe("sendResponseToUiMessage", () => {
copy: "Buy me a coffee?", copy: "Buy me a coffee?",
ctaLabel: "View gifts", ctaLabel: "View gifts",
target: "giftCatalog", target: "giftCatalog",
ruleId: "coffee_after_thanks", ruleId: "coffee_support_question",
}); });
}); });
-9
View File
@@ -28,15 +28,6 @@ export type ChatEvent =
} }
| { type: "ChatOlderHistoryLoadFailed"; error: unknown } | { type: "ChatOlderHistoryLoadFailed"; error: unknown }
| { type: "ChatHistoryRefreshRequested" } | { type: "ChatHistoryRefreshRequested" }
| {
type: "ChatCommercialMessageReceived";
message: {
messageId: string;
message: string;
characterId: string;
createdAt: string;
};
}
// Chat domain events. // Chat domain events.
| { type: "ChatSendMessage"; content: string } | { type: "ChatSendMessage"; content: string }
| { type: "ChatSendImage"; imageBase64: string } | { type: "ChatSendImage"; imageBase64: string }
@@ -1,30 +0,0 @@
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),
},
];
}
-16
View File
@@ -1,5 +1,4 @@
import { createChatPromotionState } from "../helper/promotion"; import { createChatPromotionState } from "../helper/promotion";
import { appendCommercialMessage } from "../helper/commercial-message";
import { shouldPromptUnlockHistory } from "../helper/unlock"; import { shouldPromptUnlockHistory } from "../helper/unlock";
import { createInitialChatState } from "../chat-state"; import { createInitialChatState } from "../chat-state";
import { import {
@@ -54,19 +53,6 @@ const injectPromotionAction = unlockMachineSetup.assign(({ event }) => {
const clearPromotionAction = unlockMachineSetup.assign({ promotion: null }); 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({ export const chatMachineSetup = unlockMachineSetup.extend({
actions: { actions: {
startGuestSession: startGuestSessionAction, startGuestSession: startGuestSessionAction,
@@ -74,7 +60,6 @@ export const chatMachineSetup = unlockMachineSetup.extend({
clearChatSession: clearChatSessionAction, clearChatSession: clearChatSessionAction,
injectPromotion: injectPromotionAction, injectPromotion: injectPromotionAction,
clearPromotion: clearPromotionAction, clearPromotion: clearPromotionAction,
appendCommercialMessage: appendCommercialMessageAction,
}, },
}); });
@@ -273,7 +258,6 @@ export const chatRootStateConfig = chatMachineSetup.createStateConfig({
on: { on: {
ChatPromotionInjected: { actions: "injectPromotion" }, ChatPromotionInjected: { actions: "injectPromotion" },
ChatPromotionCleared: { actions: "clearPromotion" }, ChatPromotionCleared: { actions: "clearPromotion" },
ChatCommercialMessageReceived: { actions: "appendCommercialMessage" },
}, },
states: { states: {
idle: idleState, idle: idleState,
@@ -105,29 +105,6 @@ describe("payment order flow", () => {
actor.stop(); 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 () => { it("carries the originating chat action into order creation", async () => {
const createOrderSpy = vi.fn<CreateOrderSpy>(); const createOrderSpy = vi.fn<CreateOrderSpy>();
const actor = createActor( const actor = createActor(
@@ -301,37 +278,6 @@ describe("payment order flow", () => {
actor.stop(); 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 () => { it("moves to failed when polling reports failure", async () => {
const actor = createActor( const actor = createActor(
createTestPaymentMachine({ orderStatus: "failed" }), createTestPaymentMachine({ orderStatus: "failed" }),
+1 -9
View File
@@ -136,20 +136,12 @@ export function consumeFirstRechargeState(
context: PaymentState, context: PaymentState,
): Pick< ): Pick<
PaymentState, PaymentState,
| "plans" "plans" | "isFirstRecharge" | "selectedPlanId" | "autoRenew" | "errorMessage"
| "isFirstRecharge"
| "commercialOffer"
| "commercialOfferId"
| "selectedPlanId"
| "autoRenew"
| "errorMessage"
> { > {
const plans = context.plans.map(consumeFirstRechargePlan); const plans = context.plans.map(consumeFirstRechargePlan);
return { return {
...refreshPlansState(plans, context.selectedPlanId), ...refreshPlansState(plans, context.selectedPlanId),
isFirstRecharge: false, isFirstRecharge: false,
commercialOffer: null,
commercialOfferId: null,
}; };
} }
+4 -7
View File
@@ -8,9 +8,9 @@ import type { PaymentPlanCatalog } from "../../payment-state";
export const loadCachedPaymentPlansActor = fromPromise< export const loadCachedPaymentPlansActor = fromPromise<
PaymentPlansResponse | null, PaymentPlansResponse | null,
{ catalog: PaymentPlanCatalog; commercialOfferId?: string | null; supportCharacterId?: string | null } { catalog: PaymentPlanCatalog; commercialOfferId?: string | null }
>(async ({ input }) => { >(async ({ input }) => {
if (input.catalog === "tip" || input.commercialOfferId || input.supportCharacterId) return null; if (input.catalog === "tip" || input.commercialOfferId) return null;
const result = await getPaymentRepository().getCachedPlans(); const result = await getPaymentRepository().getCachedPlans();
if (Result.isErr(result)) throw result.error; if (Result.isErr(result)) throw result.error;
return result.data; return result.data;
@@ -18,16 +18,13 @@ export const loadCachedPaymentPlansActor = fromPromise<
export const refreshPaymentPlansActor = fromPromise< export const refreshPaymentPlansActor = fromPromise<
PaymentPlansResponse, PaymentPlansResponse,
{ catalog: PaymentPlanCatalog; commercialOfferId?: string | null; supportCharacterId?: string | null } { catalog: PaymentPlanCatalog; commercialOfferId?: string | null }
>(async ({ input }) => { >(async ({ input }) => {
const paymentRepo = getPaymentRepository(); const paymentRepo = getPaymentRepository();
if (input.catalog === "tip") { if (input.catalog === "tip") {
throw new Error("Gift catalogs must use the gift products actor."); throw new Error("Gift catalogs must use the gift products actor.");
} }
const result = await paymentRepo.getPlans( const result = await paymentRepo.getPlans(input.commercialOfferId ?? undefined);
input.commercialOfferId ?? undefined,
input.supportCharacterId ?? undefined,
);
if (Result.isErr(result)) throw result.error; if (Result.isErr(result)) throw result.error;
return result.data; return result.data;
}); });
+1 -11
View File
@@ -29,14 +29,8 @@ function initializeCatalogState(
planCatalog === "tip" planCatalog === "tip"
? (event.characterId ?? context.giftCharacterId) ? (event.characterId ?? context.giftCharacterId)
: null; : null;
const supportCharacterId =
planCatalog === "default"
? (event.characterId ?? context.supportCharacterId)
: null;
const catalogChanged = planCatalog !== context.planCatalog; const catalogChanged = planCatalog !== context.planCatalog;
const characterChanged = const characterChanged = giftCharacterId !== context.giftCharacterId;
giftCharacterId !== context.giftCharacterId ||
supportCharacterId !== context.supportCharacterId;
const selectionChanged = const selectionChanged =
planCatalog === "tip" && planCatalog === "tip" &&
((event.category ?? null) !== context.selectedGiftCategory || ((event.category ?? null) !== context.selectedGiftCategory ||
@@ -51,7 +45,6 @@ function initializeCatalogState(
planCatalog, planCatalog,
...(event.payChannel ? { payChannel: event.payChannel } : {}), ...(event.payChannel ? { payChannel: event.payChannel } : {}),
giftCharacterId, giftCharacterId,
supportCharacterId,
commercialOfferId, commercialOfferId,
chatActionId, chatActionId,
requestedGiftCategory: requestedGiftCategory:
@@ -226,7 +219,6 @@ export const loadingCachedPlansState =
input: ({ context }) => ({ input: ({ context }) => ({
catalog: context.planCatalog, catalog: context.planCatalog,
commercialOfferId: context.commercialOfferId, commercialOfferId: context.commercialOfferId,
supportCharacterId: context.supportCharacterId,
}), }),
onDone: [ onDone: [
{ {
@@ -246,7 +238,6 @@ export const loadingPlansState = catalogMachineSetup.createStateConfig({
input: ({ context }) => ({ input: ({ context }) => ({
catalog: context.planCatalog, catalog: context.planCatalog,
commercialOfferId: context.commercialOfferId, commercialOfferId: context.commercialOfferId,
supportCharacterId: context.supportCharacterId,
}), }),
onDone: { onDone: {
target: "ready", target: "ready",
@@ -265,7 +256,6 @@ export const refreshingPlansState = catalogMachineSetup.createStateConfig({
input: ({ context }) => ({ input: ({ context }) => ({
catalog: context.planCatalog, catalog: context.planCatalog,
commercialOfferId: context.commercialOfferId, commercialOfferId: context.commercialOfferId,
supportCharacterId: context.supportCharacterId,
}), }),
onDone: { onDone: {
target: "ready", target: "ready",
+2 -16
View File
@@ -192,14 +192,8 @@ const creatingOrderState = paymentMachineSetup.createStateConfig({
payChannel: context.payChannel, payChannel: context.payChannel,
autoRenew: context.autoRenew, autoRenew: context.autoRenew,
...(event.type === "PaymentCreateOrderSubmitted" && ...(event.type === "PaymentCreateOrderSubmitted" &&
(event.recipientCharacterId || context.supportCharacterId || context.giftCharacterId) event.recipientCharacterId
? { ? { recipientCharacterId: event.recipientCharacterId }
recipientCharacterId:
event.recipientCharacterId ||
context.supportCharacterId ||
context.giftCharacterId ||
undefined,
}
: {}), : {}),
...(context.commercialOfferId ...(context.commercialOfferId
? { commercialOfferId: context.commercialOfferId } ? { commercialOfferId: context.commercialOfferId }
@@ -265,10 +259,6 @@ const pollingOrderState = paymentMachineSetup.createStateConfig({
}, },
}, },
on: { on: {
PaymentPayChannelChanged: {
target: "ready",
actions: "changePayChannel",
},
PaymentReset: { PaymentReset: {
target: "ready", target: "ready",
actions: "resetOrder", actions: "resetOrder",
@@ -281,10 +271,6 @@ const waitingForPaymentState = paymentMachineSetup.createStateConfig({
[POLL_DELAY_MS]: "pollingOrder", [POLL_DELAY_MS]: "pollingOrder",
}, },
on: { on: {
PaymentPayChannelChanged: {
target: "ready",
actions: "changePayChannel",
},
PaymentReset: { PaymentReset: {
target: "ready", target: "ready",
actions: "resetOrder", actions: "resetOrder",
-2
View File
@@ -17,7 +17,6 @@ export interface PaymentState {
giftCategories: readonly GiftCategory[]; giftCategories: readonly GiftCategory[];
giftProducts: readonly GiftProduct[]; giftProducts: readonly GiftProduct[];
giftCharacterId: string | null; giftCharacterId: string | null;
supportCharacterId: string | null;
selectedGiftCategory: string | null; selectedGiftCategory: string | null;
requestedGiftCategory: string | null; requestedGiftCategory: string | null;
requestedGiftPlanId: string | null; requestedGiftPlanId: string | null;
@@ -46,7 +45,6 @@ export const initialState: PaymentState = {
giftCategories: [], giftCategories: [],
giftProducts: [], giftProducts: [],
giftCharacterId: null, giftCharacterId: null,
supportCharacterId: null,
selectedGiftCategory: null, selectedGiftCategory: null,
requestedGiftCategory: null, requestedGiftCategory: null,
requestedGiftPlanId: null, requestedGiftPlanId: null,