Initial implementation of localization

app/components/AskOrganizer/AskOrganizer.container.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { memo } from "react";
+import { useTranslation } from "../../contexts/MessagesContext";
 import { useAnalytics } from "../../hooks";
 import AskOrganizerView from "./AskOrganizer.view";
 import type {
@@ -35,12 +36,15 @@ const AskOrganizerContainer = memo<AskOrganizerProps>(
     title,
     subtitle,
     description,
-    buttonText = "Ask an organizer",
-    buttonHref = "#",
+    buttonText,
+    buttonHref,
     className = "",
     variant = "centered",
     onContactClick,
   }) => {
+    const t = useTranslation();
+    const defaultButtonText = buttonText ?? t("askOrganizer.buttonText");
+    const defaultButtonHref = buttonHref ?? t("askOrganizer.buttonHref");
     const { trackEvent, trackCustomEvent } = useAnalytics();
 
     const resolvedVariant: AskOrganizerVariant = variant ?? "centered";
@@ -74,8 +78,8 @@ const AskOrganizerContainer = memo<AskOrganizerProps>(
         {
           component: "AskOrganizer",
           variant: resolvedVariant,
-          buttonText,
-          buttonHref,
+          buttonText: defaultButtonText,
+          buttonHref: defaultButtonHref,
         },
         onContactClick as
           | ((_data: Record<string, unknown>) => void)
@@ -92,8 +96,8 @@ const AskOrganizerContainer = memo<AskOrganizerProps>(
         title={title}
         subtitle={subtitle}
         description={description}
-        buttonText={buttonText}
-        buttonHref={buttonHref}
+        buttonText={defaultButtonText}
+        buttonHref={defaultButtonHref}
         className={className}
         sectionPadding={sectionPadding}
         contentGap={`${contentGap} ${styles.container}`}

app/components/AskOrganizer/AskOrganizer.view.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useTranslation } from "../../contexts/MessagesContext";
 import ContentLockup from "../ContentLockup";
 import Button from "../Button";
 import type { AskOrganizerViewProps } from "./AskOrganizer.types";
@@ -16,11 +19,14 @@ function AskOrganizerView({
   labelledBy,
   onContactClick,
 }: AskOrganizerViewProps) {
+  const t = useTranslation();
+  const ariaLabel = t("askOrganizer.ariaLabel");
+
   return (
     <section
       className={`${sectionPadding} ${className}`}
       aria-labelledby={labelledBy}
-      aria-label={labelledBy ? undefined : "Ask an organizer"}
+      aria-label={labelledBy ? undefined : ariaLabel}
       tabIndex={-1}
     >
       <div className={`flex flex-col ${contentGap}`}>
@@ -42,7 +48,7 @@ function AskOrganizerView({
             variant={variant === "inverse" ? "primary" : "default"}
             className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
             onClick={onContactClick}
-            ariaLabel={`${buttonText} - Contact an organizer for help`}
+            ariaLabel={ariaLabel}
           >
             {buttonText}
           </Button>