Banner donation december

public/locales/en/donationBanner.json

@@ -0,0 +1,8 @@
+{
+  "title": "AletheiaFact {{date}} Donation Campaign",
+  "paragraph": "AletheiaFact.org works to combat misinformation and strengthen fact-checking. With your donation, you support the movement against FAKE NEWS, ensuring reliable information reaches you.",
+  "donateButton": "Donate to aletheia",
+  "showButton": "Show",
+  "hideButton": "Hide"
+
+}

public/locales/pt/donationBanner.json

@@ -0,0 +1,8 @@
+{
+  "title": "Campanha doação AletheiaFact {{date}}",
+  "paragraph": "A AletheiaFact.org trabalha para combater a desinformação e fortalecer a checagem de fatos. Com sua doação, você apoia o movimento contra FAKE NEWS e informações confiáveis cheguem a você.",
+  "donateButton": "Doe para aletheia",
+  "showButton": "Mostrar",
+  "hideButton": "Ocultar"
+
+}

server/feature-flag/feature-flag.service.ts

@@ -23,6 +23,12 @@ export class FeatureFlagService {
         return config ? this.unleash.isEnabled("copilot_chat_bot") : false;
     }
 
+    isEnableDonationBanner() {
+        const config = this.configService.get<string>("feature_flag");
+
+        return config ? this.unleash.isEnabled("donation_banner") : false;
+    }
+
     isEnableEditorAnnotations() {
         const config = this.configService.get<string>("feature_flag");
 

server/home/home.controller.ts

@@ -11,6 +11,7 @@ import { ClaimRevisionService } from "../claim/claim-revision/claim-revision.ser
 import { ApiTags } from "@nestjs/swagger";
 import { ClaimReviewService } from "../claim-review/claim-review.service";
 import { NameSpaceEnum } from "../auth/name-space/schemas/name-space.schema";
+import { FeatureFlagService } from "../feature-flag/feature-flag.service";
 
 @Controller("/")
 export class HomeController {
@@ -20,6 +21,7 @@ export class HomeController {
         private statsService: StatsService,
         private debateService: DebateService,
         private claimRevisionService: ClaimRevisionService,
+        private featureFlagService: FeatureFlagService,
         private claimReviewService: ClaimReviewService
     ) {}
 
@@ -35,6 +37,7 @@ export class HomeController {
     @Get("/:namespace?")
     @Header("Cache-Control", "max-age=60, must-revalidate")
     public async showHome(@Req() req: BaseRequest, @Res() res: Response) {
+        const enableDonationBanner = this.featureFlagService.isEnableDonationBanner();
         const parsedUrl = parse(req.url, true);
         const reviews = await this.claimReviewService.listAll({
             page: 0,
@@ -95,6 +98,7 @@ export class HomeController {
                 claims,
                 reviews,
                 nameSpace: req.params.namespace,
+                enableDonationBanner
             })
         );
     }

server/home/home.module.ts

@@ -6,6 +6,7 @@ import { ViewModule } from "../view/view.module";
 import { DebateModule } from "../claim/types/debate/debate.module";
 import { ClaimRevisionModule } from "../claim/claim-revision/claim-revision.module";
 import { ClaimReviewModule } from "../claim-review/claim-review.module";
+import { FeatureFlagModule } from "../feature-flag/feature-flag.module";
 
 @Module({
     imports: [
@@ -15,6 +16,7 @@ import { ClaimReviewModule } from "../claim-review/claim-review.module";
         DebateModule,
         ClaimRevisionModule,
         ClaimReviewModule,
+        FeatureFlagModule,
     ],
     providers: [],
     controllers: [HomeController],

src/components/Home/DonationBanner.style.tsx

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+import colors from "../../styles/colors";
+import { Col } from "antd";
+
+const DonationBannerStyle = styled(Col)`
+        background-color: ${colors.blueQuartiary};
+
+    .show-banner { 
+        color: ${colors.white};
+        font-size: 13px;
+        border: none;
+        background-color: ${colors.blackTertiary};
+        font-weight: 600;
+        cursor: pointer;
+        align-self: flex-end;
+        position: absolute;
+        right: 10px;
+        bottom: -25px;
+        z-index: 1;
+    }
+
+    .banner-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 20px 0px;
+
+    }
+
+    .banner-content > h1 {
+        width: 100%;
+        color: ${colors.blackPrimary};
+        font-size: 26px;
+        line-height: 34px;
+        font-weight: 800;
+        text-align: center;
+    }
+
+    .banner-content > p {
+        color: ${colors.blackTertiary};
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+        text-align: center;
+    }
+
+    .banner-button {
+        font-weight: 600;
+    }
+`;
+
+export default DonationBannerStyle;

src/components/Home/DonationBanner.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import DonationBannerContent from "./DonationBanner/DonationBannerContent";
+import DonationBannerStyle from "./DonationBanner.style";
+import { Col } from "antd";
+import { useTranslation } from "next-i18next";
+
+const DonationBanner = () => {
+  const { t } = useTranslation();
+  const [isBannerVisible, setIsBannerVisible] = useState(true);
+  const handleToggleBanner = () => {
+    setIsBannerVisible((prev) => !prev);
+  }
+
+  return (
+    <DonationBannerStyle>
+      <Col className="banner-container">
+        {isBannerVisible && <DonationBannerContent />}
+        <button
+          className="show-banner"
+          onClick={handleToggleBanner}>
+          {isBannerVisible ? t("donationBanner:hideButton") : t("donationBanner:showButton")}
+        </button>
+      </Col>
+    </DonationBannerStyle >
+  );
+};
+
+export default DonationBanner;

src/components/Home/DonationBanner/DonationBannerButton.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from "next-i18next";
+import Button from "../../Button";
+
+const DonationBannerButton = ({ type }) => {
+    const { t } = useTranslation();
+    return (
+        <Button
+            type={type}
+            href={t("home:donateUrlButton")}
+            className="banner-button"
+        >
+            {t("donationBanner:donateButton")}
+        </Button>
+    );
+};
+
+export default DonationBannerButton;

src/components/Home/DonationBanner/DonationBannerContent.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import BannerButton from "./DonationBannerButton";
+import { ButtonType } from "../../Button";
+import { Col } from "antd";
+import { useTranslation } from "next-i18next";
+import DonationBannerStyle from "../DonationBanner.style";
+
+function DonationBannerContent() {
+    const { t } = useTranslation();
+    return (
+        <DonationBannerStyle >
+            <Col
+                className="banner-content"
+            >
+                <h1>
+                    {t("donationBanner:title", {
+                        date: new Date().getFullYear(),
+                    })}
+                </h1>
+                <p>
+                    {t("donationBanner:paragraph")}
+                </p>
+                <BannerButton type={ButtonType.blue} />
+            </Col>
+        </DonationBannerStyle >
+
+    );
+}
+
+export default DonationBannerContent;

src/components/MainApp.tsx

@@ -12,6 +12,7 @@ import OverlaySearchResults from "./Search/OverlaySearchResults";
 import Sidebar from "./Sidebar";
 import AffixCTAButton from "./AffixButton/AffixCTAButton";
 import localConfig from "../../config/localConfig.example";
+import DonationBanner from "./Home/DonationBanner";
 
 const copilotDrawerWidth = 350;
 
@@ -43,6 +44,7 @@ const MainApp = ({ children }) => {
             <Sidebar />
             <Layout style={{ background: colors.white }}>
                 <Header />
+                <DonationBanner />
                 {localConfig.home.affixCTA ? <AffixCTAButton copilotDrawerWidth={copilotDrawerWidth} /> : null}
                 <ContentWrapper>{children}</ContentWrapper>
                 <Footer />

src/pages/home-page.tsx

@@ -17,6 +17,7 @@ const HomePage: NextPage<{
     claims;
     nameSpace;
     reviews;
+    enableDonationBanner;
 }> = (props) => {
     const { t } = useTranslation();
     const setCurrentNameSpace = useSetAtom(currentNameSpace);
@@ -41,6 +42,7 @@ export async function getServerSideProps({ query, locale, locales, req }) {
             claims: JSON.parse(JSON.stringify(query.claims)),
             stats: JSON.parse(JSON.stringify(query.stats)),
             nameSpace: query.nameSpace ? query.nameSpace : NameSpaceEnum.Main,
+            enableDonationBanner: query?.enableDonationBanner,
         },
     };
 }