Use user store data in ProfileCard

[a676840815-sys]

Summary

• Replace hardcoded buyer profile name and email with values from useUser()
• Add fallback values when profile data is empty
• Keep the existing ProfileCard layout and styling

Closes #261

Validation

• Ran git diff --check locally
• Not run: full lint/type-check because this local environment has no pnpm/npm install available

Summary by CodeRabbit

• Bug Fixes

  • Profile card now displays the actual user's name and email address instead of placeholder information, with fallback text when data is unavailable.

• Accessibility

  • Enhanced contact button with improved screen reader support.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6a41b3c2-4657-4755-a4f8-180e8d79d831

📥 Commits

Reviewing files that changed from the base of the PR and between caf26b1 and 2223486.

📒 Files selected for processing (1)

• src/features/buyer/profile/components/ProfileCard.tsx

---

📝 Walkthrough

Walkthrough

ProfileCard is now a client component that integrates the useUser() hook to display dynamic user name and email with fallback strings, replacing hardcoded values. The contact button gains an aria-label for accessibility and uses the Mail component icon from lucide-react instead of an inline SVG.

Changes

Client Component and User Data Integration

Layer / File(s)	Summary
Client directive, hook integration, and UI updates src/features/buyer/profile/components/ProfileCard.tsx	ProfileCard is marked as a client component and now imports the Mail icon component and the useUser hook. User name and email are pulled from the hook with fallback strings displayed when those fields are absent. The contact button includes an aria-label and renders the Mail component instead of an inline SVG.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• StarShopCr/StarShop-Frontend#252: Refactors profile UI components to remove hard-coded user data and integrate shared user hooks/stores with fallback strings.
• StarShopCr/StarShop-Frontend#224: Introduces or refactors the userStore.ts and its useUser() hook that this PR now integrates into ProfileCard.

Poem

🐰 A card once carved in stone so gray,
Now springs to life with user data's way—
With useUser() and a mailbox bright,
The ProfileCard takes dynamic flight!
Mail icon hops, fallbacks appear,
Accessibility whispers—we're here! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers the key changes and links to issue #261, but does not follow the required template structure with checkboxes and sections.	Update the description to match the repository template with checkboxes for validation steps and the required 'Type of Change' and 'Evidence' sections.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: using user store data instead of hardcoded values in the ProfileCard component.
Linked Issues check	✅ Passed	The pull request successfully addresses all coding requirements from issue #261: imports useUser hook, replaces hardcoded name/email with dynamic values, adds fallback strings, maintains styling, and ensures the component is now client-side reactive.
Out of Scope Changes check	✅ Passed	All changes are directly related to the objectives in issue #261. The replacement of the SVG icon with the Mail component from lucide-react and adding aria-label are reasonable enhancements aligned with improving the component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}