Có bản sửa trong proposal
Mời thành viên: giữ lại email bị lỗi
Khôi phục khi mời thành công một phần đã có trong proposal; source sản phẩm vẫn đóng modal khi có ít nhất một lời mời thành công. Lỗi khác domain chưa xác nhận nguyên nhân.
Vấn đề
Báo cáo ghi nhận lỗi mời email khác công ty. Trong luồng hiện tại, modal đóng khi chỉ thành công một phần, khiến người dùng mất thông tin địa chỉ lỗi để thử lại.
Giải pháp
Giữ modal khi chỉ thành công một phần; giữ địa chỉ lỗi để thử lại, không gửi lại địa chỉ đã thành công.
Vị trí cập nhật: Cài đặt → Đội ngũ → modal Mời thành viên
Trạng thái và giới hạn
FE đã có bản sửa cô lập. Chưa xác nhận nguyên nhân lỗi email khác công ty; video không chứng minh thư được giao.
Hai video dùng cùng dữ liệu mẫu
Code diff
InviteMemberModal.tsx
--- a/src/features/brand/components/settings/InviteMemberModal.tsx
+++ b/src/features/brand/components/settings/InviteMemberModal.tsx
@@ -2,9 +2,9 @@
// access-gate-exempt: a child modal whose only entry point is `TeamPanel`'s "Add member"
// button, already gated on `members.manage`. `canGrantOwner` arrives as a prop for the
// same reason: calling `useAccess()` here would duplicate a decision the parent owns.
-import { useId, useMemo, useState } from "react";
+import { useId, useMemo, useRef, useState } from "react";
import { useTranslations } from "next-intl";
import { Mail, Send } from "@/components/icons";
import { Button } from "@/components/ui/button";
@@ -21,9 +21,9 @@
/**
* Invite-members modal. Accepts a pasted list of emails and POSTs one invite per email
* in a loop, not batched. Partial failure is reported: it continues through every email,
- * shows the last error, and only closes when at least one succeeded.
+ * retains failed addresses for retry, and closes only when every address succeeded.
*/
export function InviteMemberModal({
brandId,
canGrantOwner,
@@ -40,35 +40,61 @@
const [emails, setEmails] = useState("");
const [role, setRole] = useState("editor");
const [inviting, setInviting] = useState(false);
const [error, setError] = useState<string | null>(null);
+ const [partial, setPartial] = useState<{
+ created: number;
+ failed: number;
+ } | null>(null);
+ const sendingRef = useRef(false);
const errorId = useId();
const { valid, invalid } = useMemo(() => parseEmails(emails), [emails]);
const formatError = invalid.length
? t("invalidEmail", { emails: invalid.join(", ") })
: null;
async function send() {
+ if (sendingRef.current) {
+ return;
+ }
if (invalid.length) {
setError(t("invalidEmail", { emails: invalid.join(", ") }));
return;
}
if (!valid.length) {
return;
}
setInviting(true);
+ sendingRef.current = true;
setError(null);
+ setPartial(null);
let ok = 0;
+ const failed: { email: string; message: string }[] = [];
for (const email of valid) {
try {
await inviteMember(brandId, email, role);
ok++;
} catch (err) {
- setError(describeError(err, t("inviteFailed", { email })));
+ failed.push({
+ email,
+ message: describeError(err, t("inviteFailed", { email })),
+ });
}
}
setInviting(false);
+ sendingRef.current = false;
+ if (failed.length) {
+ setEmails(failed.map(({ email }) => email).join(", "));
+ setError(
+ failed.map(({ email, message }) => `${email}: ${message}`).join("; ")
+ );
+ setPartial({ created: ok, failed: failed.length });
+ if (ok > 0) {
+ onInvited();
+ }
+ return;
+ }
if (ok > 0) {
toast.success(t("sent", { count: ok }));
onInvited();
onClose();
@@ -106,9 +132,13 @@
aria-label={t("emails")}
aria-invalid={!!formatError}
aria-describedby={formatError || error ? errorId : undefined}
value={emails}
- onChange={(e) => setEmails(e.target.value)}
+ onChange={(e) => {
+ setEmails(e.target.value);
+ setError(null);
+ setPartial(null);
+ }}
onKeyDown={(e) => {
if (e.key === "Enter") {
void send();
}
@@ -124,14 +154,24 @@
</p>
<Select
size="sm"
value={role}
- onChange={setRole}
+ onChange={(next) => {
+ setRole(next);
+ setError(null);
+ setPartial(null);
+ }}
options={roleOptions(canGrantOwner, (r) => tRoles(roleLabelKey(r)))}
/>
{/* The invitee is emailed once, but access comes from signing in with the invited
address, and nothing else on this screen tells the inviter that. */}
<p className="mt-2 text-[11px] text-ink/40">{t("accessHint")}</p>
+
+ {partial && (
+ <p role="status" className="mt-3 text-xs text-ink/70">
+ {t("partialResult", partial)}
+ </p>
+ )}
{(formatError ?? error) && (
// The format check reruns on every keystroke, so it is not a live alert; the
// input points here instead. A failed send still interrupts.
Nhãn giao diện en
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -2006,10 +2006,11 @@
"accessHint": "We'll email them an invite. They'll get access when they sign in with this address.",
"invalidEmail": "Not a valid email: {emails}",
"inviteFailed": "Failed to invite {email}",
- "sent": "{count, plural, =1 {Invitation sent} other {# invitations sent}}",
+ "sent": "{count, plural, one {# invitation created} other {# invitations created}}",
"cancel": "Cancel",
"sending": "Sending…",
- "send": "Send invites"
+ "send": "Send invites",
+ "partialResult": "Created {created} invitation(s); {failed} address(es) still need attention. Only failed addresses remain for retry."
},
"pending": {
"anOwner": "An owner",
Nhãn giao diện vi
--- a/src/i18n/locales/vi.json
+++ b/src/i18n/locales/vi.json
@@ -2006,10 +2006,11 @@
"accessHint": "Chúng tôi sẽ gửi lời mời qua email. Họ sẽ có quyền truy cập khi đăng nhập bằng địa chỉ này.",
"invalidEmail": "Email không hợp lệ: {emails}",
"inviteFailed": "Không mời được {email}",
- "sent": "{count, plural, =1 {Đã gửi lời mời} other {Đã gửi # lời mời}}",
+ "sent": "Đã tạo {count} lời mời",
"cancel": "Hủy",
"sending": "Đang gửi…",
- "send": "Gửi lời mời"
+ "send": "Gửi lời mời",
+ "partialResult": "Đã tạo {created} lời mời; còn {failed} địa chỉ chưa thành công. Chỉ giữ lại địa chỉ lỗi để thử lại."
},
"pending": {
"anOwner": "Một chủ sở hữu",
