feat(notifications): improve Zalo Bot linking flow with 2-step guide and dynamic URL support (!50) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(notifications): improve Zalo Bot linking flow with 2-step guide and dynamic URL support

Feature: Enhanced Zalo Bot Account Linking Workflow (2-Step Guide)

Overview

This PR improves the Zalo Bot account linking experience within the Notification Settings page. Instead of triggering an in-app external redirect (which previously caused unexpected redirects to app store / CH Play within the Zalo Mini App webview), this update introduces an intuitive, clear 2-step copy & link workflow.

Key Changes

2-Step Linking Flow UI:
- Step 1: Dedicated box with one-click copy button for the /link <CODE> command.
- Step 2: Dedicated box with one-click copy button for the official Bot URL (https://bot.zaloplatforms.com/bots/...), allowing users to easily paste and open the bot in the Zalo browser.
Dynamic URL & Bot ID Support:
- Updated ZaloLinkCodeData interface in zalo-bot.service.ts to include optional botId.
- Added dynamic fallback for deep link URLs using backend configuration (deepLinkUrl / botId).
i18n Localization:
- Added new localized strings in both vi.json and en.json for Step 1, Step 2, copy command, copy URL, and status indicators.
UX & Visual Polish:
- Maintained FinWise's claymorphism design tokens (shadow-clay-pressed, rounded borders).
- Added real-time polling indicator (animate-ping) showing that the app is listening for Zalo confirmation.

## Feature: Enhanced Zalo Bot Account Linking Workflow (2-Step Guide)

### Overview
This PR improves the Zalo Bot account linking experience within the Notification Settings page. Instead of triggering an in-app external redirect (which previously caused unexpected redirects to app store / CH Play within the Zalo Mini App webview), this update introduces an intuitive, clear 2-step copy & link workflow.

---

### Key Changes
- **2-Step Linking Flow UI**:
  - **Step 1**: Dedicated box with one-click copy button for the `/link <CODE>` command.
  - **Step 2**: Dedicated box with one-click copy button for the official Bot URL (`https://bot.zaloplatforms.com/bots/...`), allowing users to easily paste and open the bot in the Zalo browser.
- **Dynamic URL & Bot ID Support**:
  - Updated `ZaloLinkCodeData` interface in `zalo-bot.service.ts` to include optional `botId`.
  - Added dynamic fallback for deep link URLs using backend configuration (`deepLinkUrl` / `botId`).
- **i18n Localization**:
  - Added new localized strings in both `vi.json` and `en.json` for Step 1, Step 2, copy command, copy URL, and status indicators.
- **UX & Visual Polish**:
  - Maintained FinWise's claymorphism design tokens (`shadow-clay-pressed`, rounded borders).
  - Added real-time polling indicator (`animate-ping`) showing that the app is listening for Zalo confirmation.