Skip to content

[PROFILE-005] Reuse profile card for onboarding preview #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chev0004 merged 1 commit into from
Jun 21, 2026
Merged

[PROFILE-005] Reuse profile card for onboarding preview #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 39 additions & 72 deletions src/features/Onboarding/OnboardingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import {
languageOptions,
proficiencyOptions,
} from '@/constants';
import { availabilityPresetToPattern } from '@/constants/availability';
import { type DiscoveryProfile, ProfileCard } from '@/features/Discovery';
import { Navbar } from '@/features/Navbar';
import { useRouteProgressRouter } from '@/features/Navigation/RouteProgress';
import {
Expand Down Expand Up @@ -119,32 +121,46 @@ export const OnboardingPage = ({

const completion = useMemo(() => getOnboardingCompletion(values), [values]);

const preview = useMemo(() => {
const getLabel = (
options: { label: string; value: string }[],
value?: string,
) => options.find((option) => option.value === value)?.label ?? '';
const previewProfile = useMemo<DiscoveryProfile>(() => {
const countryLabel =
localizedCountryOptions.find((option) => option.value === values.country)
?.label ?? '';

return {
primaryLanguage: getLabel(
localizedLanguageOptions,
values.primaryLanguage,
),
targetLanguage: getLabel(localizedLanguageOptions, values.targetLanguage),
proficiencyLevel: getLabel(
localizedProficiencyOptions,
values.proficiencyLevel,
),
country: getLabel(localizedCountryOptions, values.country),
id: 'onboarding-preview',
displayName: userDisplayName,
discordUsername: userDisplayName,
avatarUrl: userAvatarUrl,
primaryLanguage: values.primaryLanguage || t('previewPrimaryFallback'),
targetLanguages: values.targetLanguage
? [
{
language: values.targetLanguage,
level: values.proficiencyLevel || undefined,
},
]
: [],
about: values.bio,
interests: tags,
country: countryLabel,
timezone: values.timezone,
availability: values.availability
? availabilityPresetToPattern(values.availability)
: undefined,
};
}, [
localizedCountryOptions,
localizedLanguageOptions,
localizedProficiencyOptions,
t,
tags,
userAvatarUrl,
userDisplayName,
values.availability,
values.bio,
values.country,
values.primaryLanguage,
values.proficiencyLevel,
values.targetLanguage,
values.timezone,
]);

const addTag = () => {
Expand Down Expand Up @@ -499,61 +515,12 @@ export const OnboardingPage = ({
<p className="mb-3 font-semibold text-gray-500 text-xs uppercase tracking-wide">
{t('previewTitle')}
</p>
<div className="rounded-lg bg-background-darker p-4">
<div className="flex items-center gap-3">
<Avatar avatarUrl={userAvatarUrl} size="md" />
<div>
<h2 className="font-semibold text-white">
{userDisplayName}
</h2>
<p className="text-gray-500 text-xs">{t('previewPublic')}</p>
</div>
</div>

<div className="mt-4 flex flex-wrap gap-2">
{preview.primaryLanguage ? (
<span className="rounded-md bg-primary-darker px-2 py-1 text-primary-light text-xs">
{preview.primaryLanguage}
</span>
) : null}
{preview.targetLanguage ? (
<span className="rounded-md bg-background-main px-2 py-1 text-gray-300 text-xs">
{preview.targetLanguage}
{preview.proficiencyLevel
? ` / ${preview.proficiencyLevel}`
: ''}
</span>
) : null}
</div>

<p className="mt-4 line-clamp-5 text-gray-400 text-sm leading-relaxed">
{values.bio || t('previewBioFallback')}
</p>

<p className="mt-4 text-gray-500 text-xs">
{values.availability
? t(availabilityLabelKeys[values.availability])
: t('previewAvailabilityFallback')}
{values.timezone ? ` / ${values.timezone}` : ''}
</p>

{tags.length > 0 ? (
<div className="mt-4 flex flex-wrap gap-2">
{tags.slice(0, 6).map((tag) => (
<span
key={tag}
className="rounded-md bg-primary-darker px-2 py-1 text-primary-light text-xs"
>
{tag}
</span>
))}
</div>
) : null}

{preview.country ? (
<p className="mt-4 text-gray-500 text-xs">{preview.country}</p>
) : null}
</div>
<ProfileCard
profile={previewProfile}
variant="preview"
bioFallback={t('previewBioFallback')}
emptyTagsLabel={t('previewNoTags')}
/>
</div>
</aside>
</main>
Expand Down
4 changes: 2 additions & 2 deletions src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,9 +449,9 @@
"publishButton": "Publish profile",
"publishing": "Publishing...",
"previewTitle": "Public card preview",
"previewPublic": "Public",
"previewBioFallback": "Your bio will appear here.",
"previewAvailabilityFallback": "Availability"
"previewPrimaryFallback": "Primary",
"previewNoTags": "No tags yet"
},
"DiscoveryStories": {
"gridTitle": "Find your next language partner",
Expand Down
4 changes: 2 additions & 2 deletions src/locales/ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,9 +449,9 @@
"publishButton": "プロフィールを公開",
"publishing": "公開中...",
"previewTitle": "公開カードプレビュー",
"previewPublic": "公開",
"previewBioFallback": "自己紹介がここに表示されます。",
"previewAvailabilityFallback": "利用可能な時間"
"previewPrimaryFallback": "主要言語",
"previewNoTags": "タグはまだありません"
},
"DiscoveryStories": {
"gridTitle": "次の言語パートナーを見つけよう",
Expand Down
Loading