fix(ux): show Stripe setup link on event form when community has no payout configured (#1040)

## Problem

On the event creation/edit form, price inputs stay disabled after
selecting a community that has not configured Stripe payout. The helper
text "Select a community to set a price." never updates, leaving users
confused about why inputs are still grayed out even after selecting a
community.

## Solution

Added a third state to the price helper text:

| State | Message |
|---|---|
| No community selected | "Select a community to set a price." |
| Community selected, Stripe **not configured** | "This community has
not configured Stripe yet. [Set up payouts →]" |
| Community selected, Stripe **verified** | *(no message, price inputs
enabled)* |

The "Set up payouts →" link redirects to
`/dashboard/community/{id}/payouts`.

## Changes

- **`lib/pricing.ts`** — `useCurrencyOptionsForCommunity` now returns `{
options, isLoading }` instead of the raw array, so callers can avoid
flashing the "not configured" message during the payout status fetch.
- **`components/features/event/event-form.tsx`** — updated
`FormDescription` to 3-state display with the Stripe setup link.
-
**`components/features/dashboard/event/_components/dashboard-form-prices.tsx`**
— same update (second caller of the hook).
- **`app/i18n/messages/{en,fr,es}.json`** — added
`price-stripe-not-configured` and `price-stripe-setup-link` translation
keys.

## How to test

1. Go to `/dashboard/event/create`
2. **Before** selecting a community: see "Select a community to set a
price."
3. Select a community **without** Stripe payout configured: message
becomes "This community has not configured Stripe yet. Set up payouts →"
(price inputs still disabled)
4. Click "Set up payouts →": lands on
`/dashboard/community/{id}/payouts`
5. Select a community **with** Stripe verified: price inputs become
enabled, no helper message

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

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { UseFormReturn, useFieldArray } from "react-hook-form";
 import { useTranslations } from "next-intl";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -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 };
 };