feat: add sold out registration status functionality

Author: LiliGC

src/components/FeatureManagement/FeatureGuard.js

@@ -5,13 +5,18 @@ export const FeatureGuard = ({ children, featureName, cityData }) => {
     registration: {
       enabled: process.env.NEXT_PUBLIC_FEATURE_REGISTRATION === "true",
       title: `Registro PyDay ${cityData?.name || "2025"}`,
-      subtitle: cityData?.registrationLink 
-        ? "¡Regístrate ahora para asegurar tu lugar en el PyDay 2025!" 
-        : "El registro abrirá próximamente. Mantente atento a nuestras redes sociales",
-      showCTA: !!cityData?.registrationLink,
-      buttonText: "Registrarme ahora",
-      href: cityData?.registrationLink || "",
-    },
+      subtitle:
+          cityData?.registrationStatus === "soldout"
+          ? "Los cupos se han agotado. ¡Gracias por tu interés!"
+            : cityData?.registrationLink
+            ? "¡Regístrate ahora para asegurar tu lugar en el PyDay 2025!"
+            : "El registro abrirá próximamente. Mantente atento a nuestras redes sociales",
+      showCTA:
+        cityData?.registrationStatus !== "soldout" &&
+        !!cityData?.registrationLink,
+          buttonText: "Registrarme ahora",
+          href: cityData?.registrationLink || "",
+        },
     sponsors: {
       enabled: process.env.NEXT_PUBLIC_FEATURE_SPONSORS === "true",
       title: "Patrocinadores PyDay",

src/components/RegistrationState.js

@@ -2,16 +2,26 @@ import Link from "next/link";
 import cityData from "@/data/cities";
 
 export default function RegistrationState({ cityId }) {
-  const citiesWithRegistration = Object.values(cityData)
-    .filter((city) => !!city.registrationLink)
-    .map((city) => ({
+  // Filtramos solo ciudades con registro disponible y que NO estén agotadas
+  const citiesWithRegistration = Object.entries(cityData)
+    .filter(([_, city]) => city.registrationLink && city.registrationStatus !== "soldout")
+    .map(([_, city]) => ({
       name: city.name,
       link: city.registrationLink,
     }));
 
   const getContent = () => {
     if (cityId) {
       const city = cityData[cityId];
+
+      if (city.registrationStatus === "soldout") {
+        return {
+          title: "Cupos agotados",
+          message: `Los cupos para PyDay ${city.name} ya se han agotado.`,
+          links: [], // Sin links ni botones
+        };
+      }
+
       return {
         title: city.registrationLink ? "Registro disponible" : "Registro cerrado",
         message: city.registrationLink
@@ -36,38 +46,38 @@ export default function RegistrationState({ cityId }) {
 
   const { title, message, links } = getContent();
 
-  if (links.length === 0) return null;
-
+  // Si no hay links, no mostramos botones, solo el texto
   return (
     <div className="backdrop-blur-sm rounded-lg p-6 md:p-8 text-center">
       <h3 className="text-lg md:text-xl font-bold mb-2 text-py-text">{title}</h3>
       <p className="text-py-text/80 mb-6">{message}</p>
 
-      <div className="flex flex-wrap justify-center gap-3 md:gap-4 w-full px-4">
-        {links.map((city, index) => (
-          <Link
-            key={index}
-            href={city.link}
-            target="_blank"
-            className="btn-secondary inline-flex items-center flex-shrink-0 px-4 py-2 text-sm md:text-base"
-          >
-             <span className="whitespace-nowrap">{city.name}</span>
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-4 w-4 md:h-5 md:w-5 ml-1.5"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                >
-                    <path
-                    fillRule="evenodd"
-                    d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
-                    clipRule="evenodd"
-                    />
-                </svg>
-          </Link>
-        ))}
-      </div>
+      {links.length > 0 && (
+        <div className="flex flex-wrap justify-center gap-3 md:gap-4 w-full px-4">
+          {links.map((city, index) => (
+            <Link
+              key={index}
+              href={city.link}
+              target="_blank"
+              className="btn-secondary inline-flex items-center flex-shrink-0 px-4 py-2 text-sm md:text-base"
+            >
+              <span className="whitespace-nowrap">{city.name}</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4 md:h-5 md:w-5 ml-1.5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </Link>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
-