Skip to content
My Docs

Supplier Profile Edit Page

The SupplierProfileEdit component is a critical part of the Rifbid platform, allowing suppliers to edit and manage their profile information seamlessly. This page includes a comprehensive form with fields tailored for business-related details, data validation, and integration with Firebase.

Features

  • Dynamic Form Management:
    • Uses react-hook-form for efficient form state handling.
    • Leverages Zod for schema validation to ensure data integrity.
  • Business Profile Details:
    • Captures information such as organization name, company type, contact details, certifications, and business descriptions.
  • User Authentication:
    • Ensures only authenticated users can access and edit their profiles.
    • Redirects unauthenticated users to an email verification page (VerifyEmail component).
  • MongoDB Integration:
    • Fetches existing profile data from Firestore and MongoDB and pre-populates the form.
    • Updates profile data securely using Firebase tokens.
  • Responsive Design:
    • Adapts to different screen sizes, ensuring usability across devices.
  • Free Trial Navigation:
    • Redirects users to a free trial pricing page if applicable.

Usage

This component is part of the supplier dashboard, where users can edit their business details. It includes fields relevant to business operations and ensures data accuracy through validation and Firebase integration.

Component Breakdown

Schema Definition

The form schema is defined using Zod to validate user input before submission. This ensures all required fields are populated with valid data.

const FormSchema = z.object({
  organizationName: z.string(),
  companyType: z.enum(["Sole Proprietorship", "Partnership", ...]),
  industry: 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(),
  website: z.string(),
  linkedIn: z.string(),
  business_role: z.string(),
});

Free Trial Logic

Upon form submission, if the freeTrial query parameter is present and truthy, the user is navigated to a specific route that offers them a free trial of Rifbid Pro.

const freeTrial = searchParams.get("freeTrial");


if (freeTrial) {
  router.push("/pricing?freeTrial=true");
} else {
  router.push("/pricing");
}

Authentication Check

The component checks if the user is logged in and email-verified. If the user’s email is not verified, the VerifyEmail component is displayed.

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

Authentication Check

The component checks if the user is logged in and email-verified. If the user’s email is not verified, the VerifyEmail component is displayed.

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

The component includes a modal that displays a demo video for new users. The modal is shown based on the user’s local storage state and screen size.

const isFirstTime = localStorage.getItem("hasSeenDemo");
if (isFirstTime === null && !isMobile) {
  setModalVisible(true);
}