{campaign.title}
- {campaign.summary &&{campaign.summary}
} ++ {campaign.title} +
+ {campaign.summary &&{campaign.summary}
}
+
+ {isGive ? "đã nhận" : "đã cam kết"} trên mục tiêu{" "} + {formatVnd(campaign.goal_amount)} +
+-
+ {options.backers_count !== false && totals && (
+
Cần đăng nhập để cam kết ủng hộ.
} + ) : ( -+ {ownProject ? "Đây là dự án của bạn nên bạn không cam kết ủng hộ được." : closedNote} +
+ + )} + {!isGive && ( ++ Dự án theo hình thức “đạt mục tiêu mới thanh toán”: bạn cam kết trước, chỉ trả tiền khi dự án đạt mục + tiêu, trong vòng {campaign.payment_window_days} ngày. +
)}+ {organizer.kind === "organization" ? "Tổ chức gây quỹ" : "Người gây quỹ"} +
+{organizer.display_name}
+Người thụ hưởng
+{campaign.beneficiary_name}
+ {campaign.beneficiary_relation && ( +Quan hệ: {campaign.beneficiary_relation}
+ )} +Câu chuyện
++ Câu chuyện +
{campaign.story ? ( -Chưa có nội dung.
+Các mốc mục tiêu
++ Các mốc mục tiêu +
-
{milestones.map((milestone) => (
-
- +
-
- {milestone.description &&
{milestone.title}
- {formatVnd(milestone.target_amount)} + {formatVnd(milestone.target_amount)}{milestone.description}
} + {milestone.description &&{milestone.description}
}
))}
Cập nhật
++ Cập nhật + {updates.length > 0 && ({updates.length})} +
{updates.length > 0 ? ( --
+
-
-
{formatDate(update.published_at)}
-{update.title}
-+-- +
))} ) : ( -{formatDate(update.published_at)}
+{update.title}
+{update.body} Chưa có cập nhật nào.
+Chưa có cập nhật nào.
)} - +
-
{updates.map((update) => (
-
Ủng hộ dự án
- + {campaign.title}
@@ -89,7 +89,7 @@ export default async function PledgePage({Sao kê chiến dịch
-+
+ + {campaign.title} + +
+Sao kê chiến dịch
+Đây là bản sao sao kê tài khoản nhận của chiến dịch. Give không giữ tiền và không sửa số liệu: mỗi khoản chi do người tổ chức tự giải trình, kèm ảnh chứng từ. Tiền vào hiện tên hiển thị người ủng hộ đã chọn, hoặc "Ẩn danh"; tên chủ tài khoản ngân hàng, số tài khoản của người ủng hộ và nội dung chuyển khoản không được công @@ -106,32 +122,24 @@ export default async function StatementPage({
Giao dịch
- ++
{filter === "unexplained" ? "Không có khoản chi nào chưa giải trình." : "Chưa có giao dịch nào trong sao kê."}
) : ( --
+
-
{rows.map((row) => (
Bạn chưa có tài khoản nhận tiền nào.{" "} - + Khai báo tài khoản {" "} rồi chuyển khoản xác minh; khi tài khoản đã được xác minh, quay lại đây để gắn. @@ -766,7 +766,7 @@ function AccountSwapBlock({
Bạn chưa có tài khoản nào khác dùng được (đã xác minh, chưa gắn với chiến dịch nào). Khai báo và xác minh tài khoản mới tại trang{" "} - + Tài khoản nhận tiền , rồi quay lại đây. diff --git a/apps/web/src/app/me/campaigns/page.tsx b/apps/web/src/app/me/campaigns/page.tsx index 36dcdfec..abde2937 100644 --- a/apps/web/src/app/me/campaigns/page.tsx +++ b/apps/web/src/app/me/campaigns/page.tsx @@ -25,7 +25,7 @@ export default async function MyCampaignsPage() { {campaigns.length === 0 ? (
Cam kết ủng hộ dự án
- + {campaign.title}
diff --git a/apps/web/src/app/me/statements/UploadForm.tsx b/apps/web/src/app/me/statements/UploadForm.tsx index 842d2cb2..34766797 100644 --- a/apps/web/src/app/me/statements/UploadForm.tsx +++ b/apps/web/src/app/me/statements/UploadForm.tsx @@ -114,7 +114,7 @@ export function UploadForm({ >{state.message}
{state.batchId && ( - + Xem từng dòng của sao kê → )} diff --git a/apps/web/src/app/me/statements/[batchId]/page.tsx b/apps/web/src/app/me/statements/[batchId]/page.tsx index 7f6fa5c6..01878ecc 100644 --- a/apps/web/src/app/me/statements/[batchId]/page.tsx +++ b/apps/web/src/app/me/statements/[batchId]/page.tsx @@ -89,7 +89,7 @@ export default async function BatchPage({ params }: { params: Promise<{ batchId: {staff && ( <> {" "} - + Mở hàng chờ xử lý → diff --git a/apps/web/src/app/me/statements/page.tsx b/apps/web/src/app/me/statements/page.tsx index 2dde606c..f59a4931 100644 --- a/apps/web/src/app/me/statements/page.tsx +++ b/apps/web/src/app/me/statements/page.tsx @@ -68,7 +68,7 @@ export default async function StatementsPage() { {choices.length === 0 ? (Bạn chưa có tài khoản nhận nào nhận tiền qua sao kê.{" "} - + Khai báo tài khoản
@@ -100,7 +100,7 @@ export default async function StatementsPage() { return (- Gây quỹ minh bạch cho điều tốt đẹp và ý tưởng mới -
-- Ủng hộ chiến dịch từ thiện, hoặc đồng hành cùng dự án sáng tạo. Tiền đi thẳng vào tài khoản nhận của từng - chiến dịch, Give chỉ ghi nhận và công khai. -
-+ Gây quỹ minh bạch, từng đồng đều có sao kê +
++ Ủng hộ chiến dịch từ thiện hoặc đồng hành cùng dự án sáng tạo. Tiền đi thẳng vào tài khoản nhận của chiến + dịch; Give đối chiếu sao kê của tài khoản đó và công khai từng khoản vào, ra. +
+Chiến dịch mới
- - Xem tất cả → - -- Chưa có chiến dịch nào đang gây quỹ.{" "} - - Tạo chiến dịch đầu tiên - -
- )} +{type === "give" ? "❤️ Từ thiện" : "🚀 Dự án sáng tạo"}
--
+
Bạn có một việc tốt hay một ý tưởng cần gây quỹ?
++ Viết câu chuyện, đăng ký tài khoản nhận của bạn và bắt đầu nhận ủng hộ khi chiến dịch được duyệt. +
+{title}
+-
+ {points.map((point) => (
+
- + + {point} + + ))} +
-
+ {links.map((link) => (
+
- + + {link.label} + + + ))} +
{title}
+{children}
+
+
+
Chiến dịch đã đổi tài khoản nhận
-
+
{changes.map((change) => (
-
{describeAccountChange(change)}
- {change.public_note && Ghi chú của Give: {change.public_note}
}
+ {change.public_note && Ghi chú của Give: {change.public_note}
}
))}
diff --git a/apps/web/src/components/CampaignCard.tsx b/apps/web/src/components/CampaignCard.tsx
index ed26e9e4..2816f9ed 100644
--- a/apps/web/src/components/CampaignCard.tsx
+++ b/apps/web/src/components/CampaignCard.tsx
@@ -1,63 +1,87 @@
+import clsx from "clsx"
import Image from "next/image"
import Link from "next/link"
import { TypeBadge } from "@/components/badges"
import { ProgressBar } from "@/components/ProgressBar"
+import { CoverPlaceholder } from "@/components/ui/CoverPlaceholder"
import type { PublicCampaign } from "@/lib/campaigns"
-import { daysLeft, formatVnd, progressPercent } from "@/lib/format"
import { publicCoverUrl } from "@/lib/cover-urls"
+import { daysLeft, formatVnd, progressPercent } from "@/lib/format"
/**
- * Campaign card for discovery (public campaigns only: the cover goes through
- * the public media route), ported from the old ProjectCard. `raised` comes
- * from give.public_campaigns (lib/statement.ts raisedAmount).
+ * Campaign card for discovery and the home page (public campaigns only: the
+ * cover goes through the public media route). `raised` comes from
+ * give.public_campaigns (lib/statement.ts raisedAmount). The whole card is
+ * one link named by the title.
*/
-export function CampaignCard({ campaign, raised = 0 }: { campaign: PublicCampaign; raised?: number }) {
+export function CampaignCard({
+ campaign,
+ raised = 0,
+ priority,
+ headingLevel = 3,
+}: {
+ campaign: PublicCampaign
+ raised?: number
+ /** Loads the cover eagerly (above the fold). */
+ priority?: boolean
+ headingLevel?: 2 | 3
+}) {
const percent = progressPercent(raised, campaign.goal_amount)
const days = daysLeft(campaign.ends_at)
const options = campaign.display_options
+ const isGive = campaign.type === "give"
+ const Heading = headingLevel === 2 ? "h2" : "h3"
return (
-
-
-
- {campaign.cover?.storage_path ? (
-
+
+ {campaign.cover?.storage_path ? (
+ {campaign.title}
- {campaign.summary && {campaign.summary}
}
- {options.progress_bar !== false &&
+
+ {campaign.title}
+
+
+ {campaign.summary && {campaign.summary}
}
+
+ {options.progress_bar !== false &&
- {formatVnd(raised)}
- / {formatVnd(campaign.goal_amount)}
+ {formatVnd(raised)}{" "}
+ {isGive ? "đã nhận" : "đã cam kết"}
+
+ = 100 ? "font-semibold text-brand-700" : "text-muted")}>
+ {percent}%
+
+
+ Mục tiêu {formatVnd(campaign.goal_amount)}
{options.time_remaining !== false && days !== null && (
- {days > 0 ? `Còn ${days} ngày` : "Đã hết hạn"}
+ {days > 0 ? `Còn ${days} ngày` : "Đã hết hạn"}
)}
-
+
-
-
+
+
)
}
diff --git a/apps/web/src/components/DonationStatus.tsx b/apps/web/src/components/DonationStatus.tsx
index 918800f2..d2c8c64f 100644
--- a/apps/web/src/components/DonationStatus.tsx
+++ b/apps/web/src/components/DonationStatus.tsx
@@ -132,7 +132,7 @@ export function DonationStatus({
Phiên đăng nhập đã hết.{" "}
Đăng nhập lại
{" "}
diff --git a/apps/web/src/components/Markdown.tsx b/apps/web/src/components/Markdown.tsx
index 52fa1570..e68ce8fe 100644
--- a/apps/web/src/components/Markdown.tsx
+++ b/apps/web/src/components/Markdown.tsx
@@ -8,7 +8,7 @@ import ReactMarkdown from "react-markdown"
*/
export function Markdown({ children }: { children: string }) {
return (
-
+
0
return (
-
-
-
- Minh bạch tài chính
-
-
- Give không giữ tiền: mọi khoản đi thẳng vào tài khoản nhận của chiến dịch. Số liệu dưới đây lấy từ sao kê của
- tài khoản đó.
-
-
-
- - Tổng đã nhận vào tài khoản
- -
- {formatVnd(totals.paid_amount)}
-
-
-
- Trong đó {formatVnd(totals.other_in_amount)} không phải tiền ủng hộ
- (người tổ chức nạp thêm, ngân hàng hoàn phí hoặc trả lãi), đã được Give giải trình trên sao kê.
+
+
+
+
+ Minh bạch tài chính
+
+
+ Give không giữ tiền: mọi khoản đi thẳng vào tài khoản nhận của chiến dịch. Số liệu dưới đây lấy từ sao kê
+ của tài khoản đó.
- )}
+
+
+
+
-
- {isBack && 0 && (
+
+ Trong đó {formatVnd(totals.other_in_amount)} không phải tiền ủng hộ (người
+ tổ chức nạp thêm, ngân hàng hoàn phí hoặc trả lãi), đã được Give giải trình trên sao kê.
+
+ )}
+
+ {isBack &&
- Còn lại = đã nhận − đã chi − đã hoàn lại, theo sao kê đã ghi nhận.
+ Còn lại = đã nhận − đã chi − đã hoàn lại, theo sao kê đã ghi nhận.
{totals.disbursed_amount > 0 && (
-
+
Trong số đã chi, {formatVnd(explainedOutAmount(totals))} đã được người tổ chức giải trình.
)}
{statementHref && (
-
- Xem sao kê và giải trình chi →
+
+ Xem sao kê và giải trình chi
)}
)
}
-
-function Figure({
- label,
- value,
- testId,
- note,
- warn,
-}: {
- label: string
- value: number
- testId: string
- note?: string
- warn?: boolean
-}) {
- return (
-
- - {label}
- -
- {formatVnd(value)}
-
- {note && - {note}
}
-
- )
-}
diff --git a/apps/web/src/components/PledgeTotals.tsx b/apps/web/src/components/PledgeTotals.tsx
index 345d6e87..267f7376 100644
--- a/apps/web/src/components/PledgeTotals.tsx
+++ b/apps/web/src/components/PledgeTotals.tsx
@@ -1,3 +1,4 @@
+import { MoneyRow } from "@/components/ui/Money"
import { formatDateTime, formatVnd } from "@/lib/format"
import type { MoneyTotals } from "@/lib/statement"
@@ -15,7 +16,11 @@ export function PledgeTotals({ totals }: { totals: MoneyTotals }) {
return (
{totals.payments_stopped_at && (
-
+
Give đã tạm dừng yêu cầu thanh toán của dự án này từ {formatDateTime(totals.payments_stopped_at)}.
@@ -23,28 +28,17 @@ export function PledgeTotals({ totals }: { totals: MoneyTotals }) {
Người ủng hộ đừng chuyển thêm tiền cho tới khi Give thông báo tiếp.
)}
-
-
- - Cam kết
- -
- {formatVnd(totals.pledged_amount)}
-
-
-
- - Đã thanh toán
- -
- {formatVnd(Math.max(0, totals.paid_amount - totals.other_in_amount))}
-
-
-
- - Mục tiêu
- -
- {formatVnd(totals.goal_amount)}
-
-
+
+
{totals.refund_owed_amount > 0 && (
-
+
Hoàn tiền còn nợ người ủng hộ: {formatVnd(totals.refund_owed_amount)}.
Người tạo dự án phải hoàn lại tiền đã nhận của những cam kết không còn hiệu lực (chưa thanh toán đủ trước hạn)
và phần chuyển thừa.
diff --git a/apps/web/src/components/ProgressBar.tsx b/apps/web/src/components/ProgressBar.tsx
index 720ead41..fcd6cb5e 100644
--- a/apps/web/src/components/ProgressBar.tsx
+++ b/apps/web/src/components/ProgressBar.tsx
@@ -1,14 +1,32 @@
-export function ProgressBar({ percent, className }: { percent: number; className?: string }) {
+import clsx from "clsx"
+
+/**
+ * Funding progress: a green bar on a light track, low radius. `label` names
+ * it for screen readers (the visible figures sit next to it).
+ */
+export function ProgressBar({
+ percent,
+ className,
+ label = "Tiến độ gây quỹ",
+ size = "md",
+}: {
+ percent: number
+ className?: string
+ label?: string
+ size?: "sm" | "md"
+}) {
const value = Math.max(0, Math.min(100, percent))
return (
-
+
)
}
diff --git a/apps/web/src/components/PublicEvidence.tsx b/apps/web/src/components/PublicEvidence.tsx
index 4f7eb13f..52667953 100644
--- a/apps/web/src/components/PublicEvidence.tsx
+++ b/apps/web/src/components/PublicEvidence.tsx
@@ -51,7 +51,7 @@ export function PublicEvidenceList({
Gửi báo cáo
) : (
-
+
Đăng nhập để báo cáo
)}
diff --git a/apps/web/src/components/RewardTiers.tsx b/apps/web/src/components/RewardTiers.tsx
index 1dedfa51..46f54d41 100644
--- a/apps/web/src/components/RewardTiers.tsx
+++ b/apps/web/src/components/RewardTiers.tsx
@@ -1,5 +1,9 @@
+import clsx from "clsx"
import Link from "next/link"
+import { Badge } from "@/components/ui/Badge"
+import { buttonClass } from "@/components/ui/Button"
+import { GiftIcon } from "@/components/ui/icons"
import { deliveryMonth, isSoldOut, type PublicRewardTier } from "@/lib/pledges"
import { minAmountLabel, pledgeHref, quantityLabel } from "@/lib/reward-tiers"
@@ -24,57 +28,62 @@ export function RewardTiers({
}) {
if (tiers.length === 0) return null
return (
-
-
- Các mức ủng hộ
-
- {!open && {closedNote}
}
-
+
+
+
+
+ {!open && {closedNote}
}
+
+
{tiers.map((tier) => {
const soldOut = isSoldOut(tier)
const delivery = deliveryMonth(tier.estimated_delivery)
return (
- -
-
-
{minAmountLabel(tier.min_amount)}
- {tier.title}
+ -
+
+
{tier.title}
+ {minAmountLabel(tier.min_amount)}
- {tier.description && (
- {tier.description}
- )}
-
+ {tier.description && {tier.description}
}
+
{delivery && (
-
- - Dự kiến giao:
- - {delivery}
+
+ - Dự kiến giao
+ - {delivery}
)}
-
- - Nhận quà:
- -
+
+
- Nhận quà
+ -
{tier.requires_shipping ? "Giao tận nơi (cần địa chỉ nhận)" : "Không cần giao hàng"}
{tier.requires_shipping && tier.shipping_note && (
-
+
- Ghi chú giao hàng
- - {tier.shipping_note}
+ - {tier.shipping_note}
)}
-
+
- Số suất
- -
- {quantityLabel(tier)}
+
-
+ {soldOut ? (
+
{quantityLabel(tier)}
+ ) : (
+ {quantityLabel(tier)}
+ )}
- {tier.quantity_claimed > 0 && - {tier.quantity_claimed} người đã chọn
}
+ {tier.quantity_claimed > 0 && - {tier.quantity_claimed} người đã chọn
}
{open && !soldOut ? (
-
+
Chọn mức này
) : (
-
Chiến dịch đã đổi tài khoản nhận
--
+
-
{describeAccountChange(change)}
- {change.public_note &&Ghi chú của Give: {change.public_note}
} + {change.public_note &&Ghi chú của Give: {change.public_note}
}
))}
- Tổng đã nhận vào tài khoản -
- - {formatVnd(totals.paid_amount)} - -
- {label} -
- - {formatVnd(value)} - - {note &&
- {note} } -
- Cam kết -
- - {formatVnd(totals.pledged_amount)} - -
- Đã thanh toán -
- - {formatVnd(Math.max(0, totals.paid_amount - totals.other_in_amount))} - -
- Mục tiêu -
- - {formatVnd(totals.goal_amount)} - -
-
- -
{minAmountLabel(tier.min_amount)}
-{tier.title}
+- +
+- {tier.description && ( -{tier.title}
+{minAmountLabel(tier.min_amount)}
{tier.description}
- )} --
+ {tier.description &&
- Dự kiến giao: -
- {delivery} +
- Dự kiến giao +
- {delivery}
- Nhận quà: -
-
+ +{tier.requires_shipping && tier.shipping_note && ( -
- Nhận quà
+- {tier.requires_shipping ? "Giao tận nơi (cần địa chỉ nhận)" : "Không cần giao hàng"}
+)} -- Ghi chú giao hàng
-- {tier.shipping_note}
+- {tier.shipping_note}
+{open && !soldOut ? ( - + Chọn mức này ) : ( -- Số suất
-- - {quantityLabel(tier)} +
- + {soldOut ? ( +
- {tier.quantity_claimed > 0 &&{quantityLabel(tier)} + ) : ( + {quantityLabel(tier)} + )}- {tier.quantity_claimed} người đã chọn
} + {tier.quantity_claimed > 0 &&- {tier.quantity_claimed} người đã chọn
}
{tier.description}
} +-
{delivery && (
-
-+)} -- - +
-
{changes.map((change) => (
{campaign.title}
- {campaign.summary &&{campaign.summary}
} - {options.progress_bar !== false &&{campaign.summary}
} +- {formatVnd(raised)} - / {formatVnd(campaign.goal_amount)} + {formatVnd(raised)}{" "} + {isGive ? "đã nhận" : "đã cam kết"} + + = 100 ? "font-semibold text-brand-700" : "text-muted")}> + {percent}% +
++ Mục tiêu {formatVnd(campaign.goal_amount)} {options.time_remaining !== false && days !== null && ( - {days > 0 ? `Còn ${days} ngày` : "Đã hết hạn"} + {days > 0 ? `Còn ${days} ngày` : "Đã hết hạn"} )} -
- Minh bạch tài chính -
-- Give không giữ tiền: mọi khoản đi thẳng vào tài khoản nhận của chiến dịch. Số liệu dưới đây lấy từ sao kê của - tài khoản đó. -
--
-
- Trong đó {formatVnd(totals.other_in_amount)} không phải tiền ủng hộ
- (người tổ chức nạp thêm, ngân hàng hoàn phí hoặc trả lãi), đã được Give giải trình trên sao kê.
+
+ Give không giữ tiền: mọi khoản đi thẳng vào tài khoản nhận của chiến dịch. Số liệu dưới đây lấy từ sao kê
+ của tài khoản đó.
+ Trong đó {formatVnd(totals.other_in_amount)} không phải tiền ủng hộ (người
+ tổ chức nạp thêm, ngân hàng hoàn phí hoặc trả lãi), đã được Give giải trình trên sao kê.
+ Còn lại = đã nhận − đã chi − đã hoàn lại, theo sao kê đã ghi nhận. Còn lại = đã nhận − đã chi − đã hoàn lại, theo sao kê đã ghi nhận.
+
Trong số đã chi, {formatVnd(explainedOutAmount(totals))} đã được người tổ chức giải trình.
+ Minh bạch tài chính
+
+
+
-
- {isBack &&
+ {isBack &&
-
Give đã tạm dừng yêu cầu thanh toán của dự án này từ {formatDateTime(totals.payments_stopped_at)}.
@@ -23,28 +28,17 @@ export function PledgeTotals({ totals }: { totals: MoneyTotals }) {Người ủng hộ đừng chuyển thêm tiền cho tới khi Give thông báo tiếp.
-
-
-
+
+
Hoàn tiền còn nợ người ủng hộ: {formatVnd(totals.refund_owed_amount)}. Người tạo dự án phải hoàn lại tiền đã nhận của những cam kết không còn hiệu lực (chưa thanh toán đủ trước hạn) và phần chuyển thừa. diff --git a/apps/web/src/components/ProgressBar.tsx b/apps/web/src/components/ProgressBar.tsx index 720ead41..fcd6cb5e 100644 --- a/apps/web/src/components/ProgressBar.tsx +++ b/apps/web/src/components/ProgressBar.tsx @@ -1,14 +1,32 @@ -export function ProgressBar({ percent, className }: { percent: number; className?: string }) { +import clsx from "clsx" + +/** + * Funding progress: a green bar on a light track, low radius. `label` names + * it for screen readers (the visible figures sit next to it). + */ +export function ProgressBar({ + percent, + className, + label = "Tiến độ gây quỹ", + size = "md", +}: { + percent: number + className?: string + label?: string + size?: "sm" | "md" +}) { const value = Math.max(0, Math.min(100, percent)) return (
- Các mức ủng hộ -
- {!open &&{closedNote}
} --
+
+
+ {!open && {closedNote}
} +-
{tiers.map((tier) => {
const soldOut = isSoldOut(tier)
const delivery = deliveryMonth(tier.estimated_delivery)
return (
-