brand review layout update #130
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
WalkthroughThe pull request refactors the Brand onboarding review section with a new ReadOnlyField component for presenting structured, sectioned details (Brand Details, Contact Information, Platforms, Collaboration Preferences) in a read-only format. It adds enhanced styling, status messaging for submission states, and UI refinements to the Brand review flow. Changes
Sequence DiagramsequenceDiagram
actor User
participant BrandForm as Brand Form
participant ReviewUI as Review & Submit Section
participant ReadOnlyField as ReadOnlyField Component
participant Submission as Submit Handler
User->>BrandForm: Enter brand details
BrandForm->>ReviewUI: Trigger review phase
ReviewUI->>ReadOnlyField: Render Brand Details section
ReadOnlyField-->>ReviewUI: Display labeled read-only fields
ReviewUI->>ReadOnlyField: Render Contact Information section
ReviewUI->>ReadOnlyField: Render Platforms section
ReviewUI->>ReadOnlyField: Render Collaboration Preferences section
User->>ReviewUI: Click Submit button
ReviewUI->>Submission: Submit brand data
alt Submission Success
Submission-->>ReviewUI: brandSubmitSuccess = true
ReviewUI-->>User: Show green success message
else Submission Error
Submission-->>ReviewUI: brandSubmitError set
ReviewUI-->>User: Show red error message
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
Frontend/index.html(1 hunks)Frontend/src/components/Onboarding.tsx(2 hunks)
Comment on lines
+1013
to
+1083
| {(brandLogoPreview || brandData.logo) ? ( | ||
| <img | ||
| src={brandLogoPreview || (brandData.logo ? URL.createObjectURL(brandData.logo) : undefined)} | ||
| alt="Logo Preview" | ||
| className="h-20 w-20 rounded-full object-cover border" | ||
| /> | ||
| ) : ( | ||
| <div className="h-20 w-20 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 border border-purple-600"> | ||
| No Logo | ||
| </div> | ||
| )} | ||
| </div> | ||
|
|
||
| {/* Brand Details */} | ||
| <section> | ||
| <h3 className="text-lg font-semibold text-purple-500 mb-3">Brand Details</h3> | ||
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> | ||
| <ReadOnlyField label="Name" value={brandData.brand_name} /> | ||
| <ReadOnlyField label="Website" value={brandData.website_url} /> | ||
| <ReadOnlyField label="Industry" value={brandData.industry} /> | ||
| <ReadOnlyField label="Company Size" value={brandData.company_size} /> | ||
| <ReadOnlyField label="Location" value={brandData.location} /> | ||
| <ReadOnlyField label="Description" value={brandData.description} /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <h3 className="font-semibold">Brand Details</h3> | ||
| <ul className="text-sm"> | ||
| <li><b>Name:</b> {brandData.brand_name}</li> | ||
| <li><b>Website:</b> {brandData.website_url}</li> | ||
| <li><b>Industry:</b> {brandData.industry}</li> | ||
| <li><b>Company Size:</b> {brandData.company_size}</li> | ||
| <li><b>Location:</b> {brandData.location}</li> | ||
| <li><b>Description:</b> {brandData.description}</li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| {/* Contact Info */} | ||
| <section> | ||
| <h3 className="text-lg font-semibold text-purple-500 mb-3">Contact Information</h3> | ||
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> | ||
| <ReadOnlyField label="Contact Person" value={brandData.contact_person} /> | ||
| <ReadOnlyField label="Email" value={brandData.contact_email} /> | ||
| <ReadOnlyField label="Phone" value={brandData.contact_phone} /> | ||
| <ReadOnlyField label="Role" value={brandData.role} /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <h3 className="font-semibold">Contact Information</h3> | ||
| <ul className="text-sm"> | ||
| <li><b>Contact Person:</b> {brandData.contact_person}</li> | ||
| <li><b>Email:</b> {brandData.contact_email}</li> | ||
| <li><b>Phone:</b> {brandData.contact_phone}</li> | ||
| <li><b>Role:</b> {brandData.role}</li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| {/* Platforms */} | ||
| <section> | ||
| <h3 className="text-lg font-semibold text-purple-500 mb-3">Platforms & Social Links</h3> | ||
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> | ||
| {brandData.platforms.map(platform => { | ||
| const key = allBrandPlatforms.find(p => p.name === platform)?.key; | ||
| return ( | ||
| <ReadOnlyField | ||
| key={platform} | ||
| label={platform} | ||
| value={key ? brandData.social_links[key] : ""} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
| <div className="mb-4"> | ||
| <h3 className="font-semibold">Platforms & Social Links</h3> | ||
| <ul className="text-sm"> | ||
| {brandData.platforms.map(platform => { | ||
| const key = allBrandPlatforms.find(p => p.name === platform)?.key; | ||
| return ( | ||
| <li key={platform}><b>{platform}:</b> {key ? brandData.social_links[key] : ""}</li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </section> | ||
|
|
||
| {/* Collaboration Preferences */} | ||
| <section> | ||
| <h3 className="text-lg font-semibold text-purple-500 mb-3">Collaboration Preferences</h3> | ||
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> | ||
| <ReadOnlyField | ||
| label="Collaboration Types" | ||
| value={brandData.collaboration_types.join(", ")} | ||
| /> | ||
| <ReadOnlyField | ||
| label="Preferred Creator Categories" | ||
| value={brandData.preferred_creator_categories.join(", ")} | ||
| /> | ||
| <ReadOnlyField label="Brand Values" value={brandData.brand_values.join(", ")} /> | ||
| <ReadOnlyField label="Preferred Tone" value={brandData.preferred_tone.join(", ")} /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <h3 className="font-semibold">Collaboration Preferences</h3> | ||
| <ul className="text-sm"> | ||
| <li><b>Collaboration Types:</b> {brandData.collaboration_types.join(", ")}</li> | ||
| <li><b>Preferred Creator Categories:</b> {brandData.preferred_creator_categories.join(", ")}</li> | ||
| <li><b>Brand Values:</b> {brandData.brand_values.join(", ")}</li> | ||
| <li><b>Preferred Tone:</b> {brandData.preferred_tone.join(", ")}</li> | ||
| </ul> | ||
| </section> | ||
|
|
Contributor
There was a problem hiding this comment.
Fix logo preview crash when onboarding resumes
Restoring brandData from localStorage gives you a plain object for logo (Files aren’t JSON‑serializable). After this change the review step now does URL.createObjectURL(brandData.logo) and later brandData.logo.name.split(...), so if the user reloads mid-onboarding the first render throws a TypeError and handleBrandSubmit will also explode when it hits .name. Please guard every File-specific operation with instanceof File, and don’t persist the raw File in brandData (omit it or store a serializable preview URL before calling localStorage.setItem). Without those changes brand onboarding becomes unrecoverable after a page refresh.
Collaborator
|
@gamersprogrammer Great work...but as communicated, kindly create an issue first. |
Author
I will next time |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #
📝 Description
The UI for rendering brand review was too basic and looked nothing like an AI powered web application, so, I decided to update the UI.
🔧 Changes Made
I added a custom input-like Ui with better flex layouts
I added a hover effect on the inputs with a purple color to match AI vibes
I added a purple border to the empty logo
I changed the color of the heading texts to purple too
🤝 Collaboratiom
No. All by myself
✅ Checklist
Summary by CodeRabbit
New Features
Style