diff --git a/src/components/SupportUsButton.tsx b/src/components/SupportUsButton.tsx index c9b7278..fe4b907 100644 --- a/src/components/SupportUsButton.tsx +++ b/src/components/SupportUsButton.tsx @@ -49,7 +49,9 @@ function getButtonClasses(buttonVariant: ButtonVariant): string { } // Main component function that renders the support us button, taking in various props for customization and rendering different sections such as hero, organization information, sponsors, and call-to-action based on the provided data and selected theme and button variant -function SupportUsButton({ +function SupportUsButton( + + { Theme = "AOSSIE", pattern = "AOSSIE", hero = { @@ -70,11 +72,29 @@ function SupportUsButton({ }, buttonVariant = "AOSSIE", }: supportUsButtonProps): React.JSX.Element { + // Ensure required props are provided to prevent runtime crashes + + if (!organizationInformation) { + console.warn( + "SupportUsButton: 'organizationInformation' is required." + ); + } + + if (!ctaSection) { + console.warn( + "SupportUsButton: 'ctaSection' is required." + ); + } + + // Defensive fallback to handle unexpected missing props at runtime + const org = organizationInformation ?? null; + const cta = ctaSection ?? null; return ( // Container for the support us button, with dynamic classes based on the selected theme and custom class names
+ {/* Hero section with optional background image*/}
{hero.Image && ( @@ -128,7 +148,9 @@ function SupportUsButton({
{/* Organization information section */} -
+ {/* Avoid rendering empty organization section when data is not provided */} +{org && ( +
- {typeof organizationInformation.logo === "string" ? ( + {typeof org.logo === "string" ? ( - {organizationInformation.logo} + {org.logo} ) : ( {organizationInformation.logo?.alt} )} @@ -185,15 +207,15 @@ function SupportUsButton({ {/* Organization name and description */}

- {organizationInformation.name} + {org.name}

- {organizationInformation.description} + {org.description}

{/* Line */} - {organizationInformation.projectInformation && ( + {org.projectInformation && (

ABOUT PROJECT:{" "} - {organizationInformation.projectInformation.name} + {org.projectInformation.name}

- "{organizationInformation.projectInformation.description}" + "{org.projectInformation.description}"

)} @@ -236,6 +258,8 @@ function SupportUsButton({
+)} + {/* Sponsors section */}
{/* Call-to-action section with title, description, and sponsor links */} + {cta && ( +

- {ctaSection.title} + {cta.title}

- {ctaSection.description} + {cta.description}

- {ctaSection.sponsorLink.map((link, index) => ( + {cta.sponsorLink.map((link, index) => (
-
+
)}
); }