From 73df83b959ae627300bbe01a1773c05c53c7aec9 Mon Sep 17 00:00:00 2001 From: LuizFNJ Date: Wed, 6 Nov 2024 17:01:08 +0100 Subject: [PATCH] Banner donation december --- public/locales/en/donationBanner.json | 8 +++ public/locales/pt/donationBanner.json | 8 +++ server/feature-flag/feature-flag.service.ts | 6 +++ server/home/home.controller.ts | 4 ++ server/home/home.module.ts | 2 + src/components/Home/DonationBanner.style.tsx | 52 +++++++++++++++++++ src/components/Home/DonationBanner.tsx | 28 ++++++++++ .../DonationBanner/DonationBannerButton.tsx | 17 ++++++ .../DonationBanner/DonationBannerContent.tsx | 30 +++++++++++ src/components/MainApp.tsx | 2 + src/pages/home-page.tsx | 2 + 11 files changed, 159 insertions(+) create mode 100644 public/locales/en/donationBanner.json create mode 100644 public/locales/pt/donationBanner.json create mode 100644 src/components/Home/DonationBanner.style.tsx create mode 100644 src/components/Home/DonationBanner.tsx create mode 100644 src/components/Home/DonationBanner/DonationBannerButton.tsx create mode 100644 src/components/Home/DonationBanner/DonationBannerContent.tsx diff --git a/public/locales/en/donationBanner.json b/public/locales/en/donationBanner.json new file mode 100644 index 000000000..f83dfb94d --- /dev/null +++ b/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" + +} diff --git a/public/locales/pt/donationBanner.json b/public/locales/pt/donationBanner.json new file mode 100644 index 000000000..0922aaeda --- /dev/null +++ b/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" + +} diff --git a/server/feature-flag/feature-flag.service.ts b/server/feature-flag/feature-flag.service.ts index b864062ad..b3a41482b 100644 --- a/server/feature-flag/feature-flag.service.ts +++ b/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("feature_flag"); + + return config ? this.unleash.isEnabled("donation_banner") : false; + } + isEnableEditorAnnotations() { const config = this.configService.get("feature_flag"); diff --git a/server/home/home.controller.ts b/server/home/home.controller.ts index 38dfaf739..848b4097e 100644 --- a/server/home/home.controller.ts +++ b/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 }) ); } diff --git a/server/home/home.module.ts b/server/home/home.module.ts index 6117323d4..e56e16fa8 100644 --- a/server/home/home.module.ts +++ b/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], diff --git a/src/components/Home/DonationBanner.style.tsx b/src/components/Home/DonationBanner.style.tsx new file mode 100644 index 000000000..99d91d288 --- /dev/null +++ b/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; diff --git a/src/components/Home/DonationBanner.tsx b/src/components/Home/DonationBanner.tsx new file mode 100644 index 000000000..8e917c8bb --- /dev/null +++ b/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 ( + + + {isBannerVisible && } + + + + ); +}; + +export default DonationBanner; diff --git a/src/components/Home/DonationBanner/DonationBannerButton.tsx b/src/components/Home/DonationBanner/DonationBannerButton.tsx new file mode 100644 index 000000000..343bbfd4e --- /dev/null +++ b/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 ( + + ); +}; + +export default DonationBannerButton; diff --git a/src/components/Home/DonationBanner/DonationBannerContent.tsx b/src/components/Home/DonationBanner/DonationBannerContent.tsx new file mode 100644 index 000000000..b1e9a4ae0 --- /dev/null +++ b/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 ( + + +

+ {t("donationBanner:title", { + date: new Date().getFullYear(), + })} +

+

+ {t("donationBanner:paragraph")} +

+ + + + + ); +} + +export default DonationBannerContent; diff --git a/src/components/MainApp.tsx b/src/components/MainApp.tsx index 328a59f76..ab8ee4ff3 100644 --- a/src/components/MainApp.tsx +++ b/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 }) => {
+ {localConfig.home.affixCTA ? : null} {children}