Skip to content

F
finwise-miniapp-fe
Commit bea1021a authored by ThinhNC's avatar ThinhNC
Browse files
Options

Merge branch 'refactor/zalo-bot-fast-entry-ui' into 'develop' 

refactor(zalo-bot): replace emojis with svg icons and category badges in fast-entry guidance

See merge request !57
parents 2c023cf4 b6e40be2
Show whitespace changes
Inline Side-by-side
Showing with 69 additions and 12 deletions
src/i18n/locales/en.json
View file @ bea1021a
......@@ -1296,7 +1296,7 @@
"title": "Link Bot Zalo",
"hint": "Send a message to Bot FinWise on Zalo to automatically connect alerts.",
"placeholder": "e.g. dbcb8889dbdc32826bcd",
"linked": "Bot Zalo linked",
"linked": "Linked",
"unlink": "Unlink",
"saveChat": "Save Chat ID",
"oneClickBtn": "Link via Bot Zalo",
......
src/i18n/locales/vi.json
View file @ bea1021a
......@@ -1360,7 +1360,7 @@
"title": "Liên kết Bot Zalo",
"hint": "Gửi tin nhắn cho Bot FinWise để kết nối nhận thông báo tự động.",
"placeholder": "Ví dụ: dbcb8889dbdc32826bcd",
"linked": "Đã liên kết Bot Zalo",
"linked": "Đã liên kết",
"unlink": "Hủy liên kết",
"saveChat": "Lưu Chat ID",
"oneClickBtn": "Kết nối với Bot Zalo",
......
src/pages/notifications/components/NotificationSettings.tsx
View file @ bea1021a
......@@ -324,7 +324,9 @@ export const NotificationSettings: React.FC<NotificationSettingsProps> = ({ sett
{/* Panel hướng dẫn Fast-Entry */}
<div className="rounded-clay-md border border-emerald-200 bg-emerald-50/60 p-4 shadow-clay-pressed">
<div className="flex items-center gap-2 mb-2">
<span className="text-emerald-600 text-base">⚡</span>
<svg className="w-4 h-4 text-emerald-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" fill="currentColor" fillOpacity="0.2" />
</svg>
<span className="font-nunito text-sm font-bold text-emerald-800">
{t("notification.fastEntry.title")}
</span>
......@@ -334,18 +336,73 @@ export const NotificationSettings: React.FC<NotificationSettingsProps> = ({ sett
</p>
<div className="flex flex-col gap-1.5">
{[
{ icon: "☕", msg: "Cà phê sáng 35k ví tiền mặt" },
{ icon: "🍜", msg: "Ăn trưa 50k" },
{ icon: "💰", msg: "Vừa nhận lương 20tr ví VCB" },
{ icon: "↩️", msg: "hoàn tác" },
{ icon: "✏️", msg: "sửa thành 40k" },
].map(({ icon, msg }) => (
{
label: "Chi tiêu",
badgeColor: "bg-rose-50 text-rose-700 border-rose-200/80",
msg: "Cà phê sáng 35k ví tiền mặt",
icon: (
<svg className="w-3.5 h-3.5 text-rose-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<line x1="12" y1="5" x2="12" y2="19" />
<polyline points="19 12 12 19 5 12" />
</svg>
),
},
{
label: "Chi tiêu",
badgeColor: "bg-rose-50 text-rose-700 border-rose-200/80",
msg: "Ăn trưa 50k",
icon: (
<svg className="w-3.5 h-3.5 text-rose-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<line x1="12" y1="5" x2="12" y2="19" />
<polyline points="19 12 12 19 5 12" />
</svg>
),
},
{
label: "Thu nhập",
badgeColor: "bg-emerald-50 text-emerald-700 border-emerald-200/80",
msg: "Vừa nhận lương 20tr ví VCB",
icon: (
<svg className="w-3.5 h-3.5 text-emerald-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<line x1="12" y1="19" x2="12" y2="5" />
<polyline points="5 12 12 5 19 12" />
</svg>
),
},
{
label: "Hoàn tác",
badgeColor: "bg-amber-50 text-amber-700 border-amber-200/80",
msg: "hoàn tác",
icon: (
<svg className="w-3.5 h-3.5 text-amber-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="1 4 1 10 7 10" />
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
</svg>
),
},
{
label: "Sửa vi sai",
badgeColor: "bg-blue-50 text-blue-700 border-blue-200/80",
msg: "sửa thành 40k",
icon: (
<svg className="w-3.5 h-3.5 text-blue-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 20h9" />
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
</svg>
),
},
].map(({ label, badgeColor, msg, icon }) => (
<div
key={msg}
className="flex items-start gap-2 rounded-clay-sm bg-white/70 px-2.5 py-1.5 border border-emerald-100"
className="flex items-center gap-2 rounded-clay-sm bg-white/80 px-2.5 py-1.5 border border-emerald-100/80 shadow-sm"
>
<span className="text-sm">{icon}</span>
<code className="font-mono text-xs text-emerald-900 select-all break-all">{msg}</code>
<div className="flex items-center gap-1.5 shrink-0">
{icon}
<span className={`text-[10px] font-bold px-1.5 py-0.5 rounded border ${badgeColor}`}>
{label}
</span>
</div>
<code className="font-mono text-xs text-emerald-950 select-all break-all flex-1">{msg}</code>
</div>
))}
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment