Fix: show community name instead of token name on the rewards card

public/locales/bg/common.json

@@ -119,7 +119,7 @@
   "communities.overview.challenge.take.challenge": "Вземете предизвикателството",
   "communities.overview.challenge.see.challenge": "Вижте предизвикателството",
   "communities.overview.challenge.unlock.certificate": "Отключване с сертификат",
-  "communities.overview.challenge.participate": "Участвайте в хакатони {{token}}",
+  "communities.overview.challenge.participate": "Участвайте в хакатони {{community}}",
   "communities.overview.challenge.for.certificate": "за сертификата",
   "communities.overview.challenge.for.feedback": "за всеки отзив",
   "communities.overview.challenge.learning.modules.included": "Включени образователни модули",

public/locales/en/common.json

@@ -126,7 +126,7 @@
   "communities.overview.challenge.for.certificate": "for the certificate",
   "communities.overview.challenge.for.feedback": "for every feedback",
   "communities.overview.challenge.unlock.certificate": "Unlock with Certificate",
-  "communities.overview.challenge.participate": "Participate in {{token}} hackathons",
+  "communities.overview.challenge.participate": "Participate in {{community}} hackathons",
   "communities.overview.challenge.learning.modules.included": "Learning modules included",
   "communities.overview.challenge.no.learning.modules": "No learning modules included",
   "communities.overview.challenge.learning.title": "The following learning materials will equip you with the technical expertise required to successfully address the challenge.",

public/locales/es/common.json

@@ -123,7 +123,7 @@
   "communities.overview.challenge.take.challenge": "Toma el desafío",
   "communities.overview.challenge.see.challenge": "Ver el desafío",
   "communities.overview.challenge.unlock.certificate": "Desbloquear con certificado",
-  "communities.overview.challenge.participate": "Participa en hackatones {{token}}",
+  "communities.overview.challenge.participate": "Participa en hackatones {{community}}",
   "communities.overview.challenge.for.certificate": "para el certificado",
   "communities.overview.challenge.for.feedback": "para cada retroalimentación",
   "communities.overview.challenge.learning.modules.included": "Módulos de aprendizaje incluidos",

public/locales/hr/common.json

@@ -174,7 +174,7 @@
   "communities.overview.challenge.take.challenges": "Prihvati izazov",
   "communities.overview.challenge.see.challenge": "Pogledaj izazov",
   "communities.overview.challenge.unlock.certificate": "Otključajte s certifikatom",
-  "communities.overview.challenge.participate": "Sudjelujte na ${token} hakatonima",
+  "communities.overview.challenge.participate": "Sudjelujte na {{community}} hakatonima",
   "communities.overview.challenge.for.certificate": "za certifikat",
   "communities.overview.challenge.for.feedback": "za svaki povratni odgovor",
   "communities.overview.challenge.learning.modules.included": "Uključeni moduli učenja",

src/components/cards/challenge/Challenge.tsx

@@ -26,7 +26,6 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
   const { t } = useTranslation();
   const link = `/communities/${community.slug}/challenges/${data.id}`;
   const expiresAt = useMemo(() => (data.expiresAt ? new Date(data.expiresAt).toLocaleDateString() : null), [data.expiresAt]);
-  const reward = isCourseEnd ? data?.rewards?.find((reward) => reward.type === "SUBMISSION") : data?.reward;
 
   const { learningModules = [], courses = [] } = data || {};
   const learningMaterialsCount = learningModules.length + courses.length;
@@ -49,9 +48,8 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
           </div>
           <div className="divide-y-2 divide-gray-200 divide-dotted flex flex-col mt-8">
             {learningMaterialsCount && (
-              <p className="pb-3 md:pb-4 text-sm font-medium text-tertiary">{`${learningMaterialsCount}  Learning ${
-                learningMaterialsCount === 1 ? "material" : "materials"
-              } included`}</p>
+              <p className="pb-3 md:pb-4 text-sm font-medium text-tertiary">{`${learningMaterialsCount}  Learning ${learningMaterialsCount === 1 ? "material" : "materials"
+                } included`}</p>
             )}
             <div className="lg:flex lg:flex-row flex-col justify-between pt-3 md:pt-4 items-center">
               <Link href={link}>
@@ -71,7 +69,7 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
           <h1 className="font-bold text-tertiary text-xs uppercase pb-3 leading-3.3 tracking-3">{t("communities.overview.challenge.unlock.certificate")}</h1>
           <RewardCertificate rewards={data?.rewards} />
         </div>
-        {data?.isHackathon && <p className="py-1.5 border-t border-primary text-sm">{t("communities.overview.challenge.participate", { token: reward?.token })}</p>}
+        {data?.isHackathon && <p className="py-1.5 border-t border-primary text-sm">{t("communities.overview.challenge.participate", { community: community.name })}</p>}
       </div>
     </div>
   );

src/components/sections/challenges/Rewards.tsx

@@ -1,10 +1,13 @@
 import Section from "@/components/sections/communities/_partials/Section";
-import { useSelector } from "@/hooks/useTypedSelector";
+import { useMultiSelector } from "@/hooks/useTypedSelector";
 import { useTranslation } from "next-i18next";
 import { ReactElement } from "react";
 import Certificate from "@/components/ui/Certificate";
 import { useRouter } from "next/router";
 import RewardCertificate from "@/components/cards/challenge/RewardCertificate";
+import { IRootState } from "@/store";
+import { Challenge } from "@/types/course";
+import { Community } from "@/types/community";
 
 /**
  * Overview reward section component
@@ -15,9 +18,11 @@ import RewardCertificate from "@/components/cards/challenge/RewardCertificate";
  */
 export function OverviewRewards(): ReactElement {
   const { t } = useTranslation();
-  const challenge = useSelector((state) => state.challenges.current);
+  const { challenge, community } = useMultiSelector<unknown, { challenge: Challenge, community: Community }>({
+    challenge: (state: IRootState) => state.challenges.current,
+    community: (state: IRootState) => state.communities.current,
+  })
   const router = useRouter();
-  const token = challenge?.reward?.token || challenge?.rewards[0]?.token || "";
 
   return (
     <Section title={`${t("communities.overview.reward.title")}`}>
@@ -29,7 +34,7 @@ export function OverviewRewards(): ReactElement {
         <div className="flex flex-col lg:flex-row justify-between gap-2 items-start w-full">
           <div className="flex flex-col text-primary w-full lg:w-1/2">{challenge?.rewards && <RewardCertificate rewards={challenge?.rewards} isReward />}</div>
           {!challenge?.isHackathon && (
-            <div className="pb-1.5 border-b border-primary text-primary w-full lg:w-1/2 text-base">{t("communities.overview.challenge.participate", { token: token })}</div>
+            <div className="pb-1.5 border-b border-primary text-primary w-full lg:w-1/2 text-base">{t("communities.overview.challenge.participate", { community: community.name })}</div>
           )}
         </div>
       </div>