Skip to content
My Docs

Supplier Profile Edit Component

SupplierProfileEdit Component Documentation

Overview

The SupplierProfileEdit component enables suppliers to set up or update their profiles on the Rifbid platform. It collects detailed business information, validates the data, and securely updates it in the Firebase database. This component is central to maintaining accurate supplier profiles and supports features like form validation, data persistence, and interactive UI elements.

Key Features

  1. Form Validation:
    • Utilizes zod for schema validation.
    • Employs react-hook-form for efficient form management.
  2. Interactive Form Fields:
    • Collects essential business details, including contact information, industry, certifications, and website links.
  3. Data Submission:
    • Updates supplier profile data using Firebase Firestore integration.
    • Handles real-time validation and feedback via toast notifications.
  4. User Authentication:
    • Ensures only authenticated and verified users can access and update profiles.
    • Redirects unverified users to an email verification page (VerifyEmail component).
  5. Responsive Design:
    • Adapts seamlessly across various device sizes for optimal usability.
  6. Free Trial Navigation:
    • Redirects users to the pricing page if a free trial is active.

Dependencies

  • React: For building the user interface.
  • Zod: For schema validation.
  • react-hook-form: For form state and validation.
  • Firebase: For authentication and Firestore database operations.
  • Custom UI Components: Used for form elements, modals, and interactive UI elements.
  • Sonner: For toast notifications.
  • Tailwind CSS: For responsive styling.

Form Schema

The form schema is defined using zod for robust validation.

const FormSchema = z.object({
  organizationName: z.string(),
  companyType: z.enum([
    "Sole Proprietorship",
    "Partnership",
    "Limited Liability Company",
    "S-Corporation",
    "C-Corporation",
    "Public Company",
    "Non Profit",
  ]),
  industry: z.string(),
  website: z.string(),
  linkedIn: z.string(),
  business_role: z.string(),
  contactPerson: z.string(),
  contactEmail: z.string().email(),
  contactPhone: z.string(),
  contactTitle: z.string(),
  address: z.string(),
  city: z.string(),
  country: z.string().min(1),
  certifications: z.string(),
  businessDescription: z.string(),
});

Component Structure

State Management: The component uses useState for managing UI states and react-hook-form for form handling.

Authentication Check: Ensures users are logged in and email-verified before accessing the profile edit form.

if (!currentUser?.emailVerified) {
  return <VerifyEmail />;
}

Data Pre-Fill: Fetches existing supplier profile data from Firebase Firestore and populates the form fields.

**Form Submission:**Handles form submission, validates the data, and updates the supplier profile in Firebase Firestore. On successful submission, users are redirected to the pricing page or shown a success modal.

The component includes a modal that displays a demo video for new users. The modal state is managed via localStorage to ensure it is shown only once.

Conclusion

This documentation provides an overview of the SupplierProfileEdit component, its key features, state management, and critical functions. For further details, refer to the component’s source code in the project directory.