Getting started · severity 10/12
Two ways to create a brand, explained side by side
Problem
Không có onboarding; không hiểu hai lựa chọn tạo workspace (từ website hoặc tạo trống)
Only the selected tab's explanation was visible, so the two options could not be compared. "Bắt đầu từ trống" (start from blank) did not say what you give up.
Fix
Each option keeps a one-line hint under its own pill, and the labels say what they do: "Tự động từ website" / "Tự thiết lập".
Codeproblem fix
src/config/env.ts
line 80
// Face Hub and ONNX Runtime from jsDelivr. Off, neither is requested.
smartSelect: isOn(process.env.FEATURE_SMART_SELECT),
// Frontend-only: the "From website" tab of brand creation. Off, only
// "Start from blank" is offered.
// Frontend-only: the "From your website" tab of brand creation. Off, only
// "Set up manually" is offered.
brandWebsiteExtract: isOn(process.env.FEATURE_BRAND_WEBSITE_EXTRACT),
},
src/features/onboarding/components/BrandCreateFlow.tsx
line 80
// No brand role to consult: the brand does not exist yet and its creator becomes its owner.
const [step, setStep] = useState<Step>("source");
// Off, "Start from blank" is the only source and the tabs are hidden.
// Off, "Set up manually" is the only source and the tabs are hidden.
const websiteExtractEnabled = isEnabled("brandWebsiteExtract");
const [mode, setMode] = useState<SourceMode>(
src/features/onboarding/components/SourceStep.tsx
line 36
heading: string;
mode: SourceMode;
/** False hides the From website / Start from blank switch (`FEATURE_BRAND_WEBSITE_EXTRACT` off). */
/** False hides the From your website / Set up manually switch (`FEATURE_BRAND_WEBSITE_EXTRACT` off). */
showModeTabs?: boolean;
onModeChange: (mode: SourceMode) => void;
line 92
</Heading>
<Text tone="muted" size="body-sm" className="mt-0.5">
{mode === "url" ? t("source.urlBlurb") : t("source.blankBlurb")}
{showModeTabs ? t("source.chooseBlurb") : t("source.blankBlurb")}
</Text>
</div>
{/* Each option keeps its one-line explanation under its own pill, so the two
can be compared before picking (RISE G11: users didn't tell them apart). */}
{showModeTabs && (
<SegmentedControl<SourceMode>
options={sourceModeTabs}
value={mode}
onChange={onModeChange}
size="sm"
fullWidth
/>
<div className="flex flex-col gap-2">
<SegmentedControl<SourceMode>
options={sourceModeTabs}
value={mode}
onChange={onModeChange}
size="sm"
fullWidth
/>
<div className="grid grid-cols-2 gap-3 px-1">
{sourceModeTabs.map((option) => (
<Text
key={option.id}
size="body-xs"
tone={option.id === mode ? "muted" : "subtle"}
>
{option.id === "url"
? t("source.urlHint")
: t("source.blankHint")}
</Text>
))}
</div>
</div>
)}
src/i18n/locales/vi.json
line 3822
},
"source": {
"fromWebsite": "Từ website",
"startBlank": "Bắt đầu từ trống",
"urlBlurb": "Nhập website thương hiệu của bạn, chúng tôi sẽ tự động trích xuất nhận diện.",
"fromWebsite": "Tự động từ website",
"startBlank": "Tự thiết lập",
"chooseBlurb": "Chọn cách bắt đầu. Bạn có thể sửa mọi thứ sau.",
"urlHint": "Chúng tôi đọc website và tự điền logo, màu, font, giọng văn giúp bạn (khoảng 1 phút).",
"blankHint": "Không có website? Đặt tên thương hiệu, rồi tự thêm logo và màu sau.",
"blankBlurb": "Đặt tên thương hiệu và bắt đầu với không gian trống — bạn có thể bổ sung nhận diện sau.",
"websiteUrl": "URL website",