fix(ux): show Stripe setup link when community has no payout configured

On the event form, price inputs were disabled after selecting a community
without Stripe payout verification, with no feedback explaining why.

- useCurrencyOptionsForCommunity now returns { options, isLoading } so
  callers can distinguish loading from "not configured"
- FormDescription in event-form.tsx and dashboard-form-prices.tsx now
  shows three states: no community / community without Stripe / verified
- The "not configured" state shows a link to /dashboard/community/{id}/payouts
- Added translation keys price-stripe-not-configured and price-stripe-setup-link
  to en/fr/es locale files

Closes #1038

Author: WaDadidou

app/i18n/messages/en.json

@@ -92,6 +92,8 @@
     "price-free": "Free",
     "price-helper": "Leave 0 for a free event.",
     "price-community-required": "Select a community to set a price.",
+    "price-stripe-not-configured": "This community has not configured Stripe yet.",
+    "price-stripe-setup-link": "Set up payouts",
     "discoverable-label": "Make event discoverable (Visible in Discover)",
     "exclusive-label": "Exclusive",
     "pick-a-start-date-placeholder": "Pick a start date...",
@@ -962,4 +964,4 @@
       "description": "Discover the latest articles, news, and updates about Zenao in our blog."
     }
   }
-}
+}

app/i18n/messages/es.json

@@ -92,6 +92,8 @@
     "price-free": "Gratis",
     "price-helper": "Deja 0 para un evento gratuito.",
     "price-community-required": "Selecciona una comunidad para establecer un precio.",
+    "price-stripe-not-configured": "Esta comunidad aún no ha configurado Stripe.",
+    "price-stripe-setup-link": "Configurar pagos",
     "discoverable-label": "Hacer evento descubrible (Visible en Descubrir)",
     "exclusive-label": "Exclusivo",
     "pick-a-start-date-placeholder": "Elige una fecha de inicio...",
@@ -962,4 +964,4 @@
       "description": "Descubre los últimos artículos, noticias y actualizaciones sobre Zenao en nuestro blog."
     }
   }
-}
+}

app/i18n/messages/fr.json

@@ -92,6 +92,8 @@
     "price-free": "Gratuit",
     "price-helper": "Laissez 0 pour un événement gratuit.",
     "price-community-required": "Sélectionnez une communauté pour définir un prix.",
+    "price-stripe-not-configured": "Cette communauté n'a pas encore configuré Stripe.",
+    "price-stripe-setup-link": "Configurer les paiements",
     "discoverable-label": "Rendre l'événement visible publiquement (Visible dans Découvrir)",
     "exclusive-label": "Exclusif",
     "pick-a-start-date-placeholder": "Choisir une date de début...",
@@ -962,4 +964,4 @@
       "description": "Découvrez les derniers articles, nouvelles et mises à jour de Zenao sur notre blog."
     }
   }
-}
+}

components/features/dashboard/event/_components/dashboard-form-prices.tsx

@@ -1,5 +1,6 @@
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslations } from "next-intl";
+import Link from "next/link";
 import { EventFormSchemaType } from "@/types/schemas";
 import { PriceGroupFieldSet } from "@/components/features/event/price-group-field-set";
 import { FormDescription } from "@/components/shadcn/form";
@@ -10,7 +11,8 @@ export default function DashboardFormPrices() {
   const form = useFormContext<EventFormSchemaType>();
   const communityID = form.watch("communityId");
 
-  const currencyOptions = useCurrencyOptionsForCommunity(communityID);
+  const { options: currencyOptions, isLoading: payoutLoading } =
+    useCurrencyOptionsForCommunity(communityID);
 
   const { fields: priceGroupFields } = useFieldArray({
     control: form.control,
@@ -32,7 +34,20 @@ export default function DashboardFormPrices() {
       )}
       <FormDescription>
         {t("price-helper")}
-        {!communityID ? ` ${t("price-community-required")}` : ""}
+        {!communityID ? (
+          ` ${t("price-community-required")}`
+        ) : !payoutLoading && currencyOptions.length < 2 ? (
+          <>
+            {" "}
+            {t("price-stripe-not-configured")}{" "}
+            <Link
+              href={`/dashboard/community/${communityID}/payouts`}
+              className="text-main hover:underline"
+            >
+              {t("price-stripe-setup-link")}
+            </Link>
+          </>
+        ) : null}
       </FormDescription>
     </>
   );

components/features/event/event-form.tsx

@@ -47,6 +47,7 @@ import {
   IMAGE_FILE_SIZE_LIMIT_MB,
 } from "@/components/features/event/constants";
 import { useCurrencyOptionsForCommunity } from "@/lib/pricing";
+import Link from "next/link";
 
 interface EventFormProps {
   form: UseFormReturn<EventFormSchemaType>;
@@ -91,7 +92,8 @@ export const EventForm: React.FC<EventFormProps> = ({
   const isCustom = useMemo(() => !isVirtual && !marker, [isVirtual, marker]);
   const eventTimezone = locationTimezone(location);
   const timeZone = useLayoutTimezone(eventTimezone);
-  const currencyOptions = useCurrencyOptionsForCommunity(communityId);
+  const { options: currencyOptions, isLoading: payoutLoading } =
+    useCurrencyOptionsForCommunity(communityId);
 
   // Upload
   const descriptionRef = useRef<HTMLTextAreaElement>(null);
@@ -422,7 +424,20 @@ export const EventForm: React.FC<EventFormProps> = ({
           ))}
           <FormDescription>
             {t("price-helper")}
-            {!communityId ? ` ${t("price-community-required")}` : ""}
+            {!communityId ? (
+              ` ${t("price-community-required")}`
+            ) : !payoutLoading && currencyOptions.length < 2 ? (
+              <>
+                {" "}
+                {t("price-stripe-not-configured")}{" "}
+                <Link
+                  href={`/dashboard/community/${communityId}/payouts`}
+                  className="text-main hover:underline"
+                >
+                  {t("price-stripe-setup-link")}
+                </Link>
+              </>
+            ) : null}
           </FormDescription>
           <FormFieldDatePicker
             name="startDate"

lib/pricing.ts

@@ -99,22 +99,24 @@ export const formatPrice = (
 
 export const useCurrencyOptionsForCommunity = (communityId: string | null) => {
   const { getToken } = useAuth();
-  const { data: payoutStatus } = useQuery({
+  const { data: payoutStatus, isLoading } = useQuery({
     ...communityPayoutStatus(communityId ?? "", getToken),
     enabled: !!communityId,
   });
 
   const t = useTranslations("eventForm");
 
-  return useMemo(() => {
+  const options = useMemo(() => {
     const currencies =
       payoutStatus?.verificationState == VerificationState.verified
         ? payoutStatus?.currencies
         : [];
-    const options = currencies.map((currency) => ({
+    const mapped = currencies.map((currency) => ({
       value: currency.toUpperCase(),
       label: currency.toUpperCase(),
     }));
-    return [{ value: "", label: t("currency-free-option") }, ...options];
+    return [{ value: "", label: t("currency-free-option") }, ...mapped];
   }, [payoutStatus?.currencies, payoutStatus?.verificationState, t]);
+
+  return { options, isLoading: !!communityId && isLoading };
 };