diff --git a/Frontend/index.html b/Frontend/index.html index 304e2d9..d7f4280 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -7,7 +7,9 @@ Inpact - AI-Powered Creator Collaboration Platform +
- + + \ No newline at end of file diff --git a/Frontend/src/components/Onboarding.tsx b/Frontend/src/components/Onboarding.tsx index 950b09e..48e3147 100644 --- a/Frontend/src/components/Onboarding.tsx +++ b/Frontend/src/components/Onboarding.tsx @@ -11,6 +11,11 @@ const platforms = [ { name: "TikTok", icon: "/tiktok.png" }, ]; +type Readonlyfield = { + value: string; + label: string; +} + const steps = [ "Role Selection", "Personal Details", @@ -987,69 +992,120 @@ export default function Onboarding() { setBrandSubmitting(false); } }; - const renderBrandReviewStep = () => ( + + // custom inputs for the displayed details + const ReadOnlyField: React.FC = ({ label, value }) => ( +
+ +
+ {value && value.length > 0 ? value : —} +
+
+); + +const renderBrandReviewStep = () => ( +
+

Review & Submit

+ + {/* Logo */}
-

Review & Submit

-
- - {(brandLogoPreview || brandData.logo) ? ( - Logo Preview - ) : ( -
No Logo
- )} + + {(brandLogoPreview || brandData.logo) ? ( + Logo Preview + ) : ( +
+ No Logo +
+ )} +
+ + {/* Brand Details */} +
+

Brand Details

+
+ + + + + +
-
-

Brand Details

-
    -
  • Name: {brandData.brand_name}
    • -
  • Website: {brandData.website_url}
    • -
  • Industry: {brandData.industry}
    • -
  • Company Size: {brandData.company_size}
    • -
  • Location: {brandData.location}
    • -
  • Description: {brandData.description}
    • -
+
+ + {/* Contact Info */} +
+

Contact Information

+
+ + + +
-
-

Contact Information

-
    -
  • Contact Person: {brandData.contact_person}
    • -
  • Email: {brandData.contact_email}
    • -
  • Phone: {brandData.contact_phone}
    • -
  • Role: {brandData.role}
    • -
+
+ + {/* Platforms */} +
+

Platforms & Social Links

+
+ {brandData.platforms.map(platform => { + const key = allBrandPlatforms.find(p => p.name === platform)?.key; + return ( + + ); + })}
-
-

Platforms & Social Links

-
    - {brandData.platforms.map(platform => { - const key = allBrandPlatforms.find(p => p.name === platform)?.key; - return ( -
  • {platform}: {key ? brandData.social_links[key] : ""}
    • - ); - })} -
+
+ + {/* Collaboration Preferences */} +
+

Collaboration Preferences

+
+ + + +
-
-

Collaboration Preferences

-
    -
  • Collaboration Types: {brandData.collaboration_types.join(", ")}
    • -
  • Preferred Creator Categories: {brandData.preferred_creator_categories.join(", ")}
    • -
  • Brand Values: {brandData.brand_values.join(", ")}
    • -
  • Preferred Tone: {brandData.preferred_tone.join(", ")}
    • -
+
+ + {/* Status + Button */} + {brandSubmitError && ( +
+ {brandSubmitError}
- {brandSubmitError &&
{brandSubmitError}
} - {brandSubmitSuccess &&
{brandSubmitSuccess}
} + )} + {brandSubmitSuccess && ( +
+ {brandSubmitSuccess} +
+ )} + +
- ); +
+); + // Persist and restore brand onboarding state useEffect(() => { diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..2658aed --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "InPactAI", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}