Merge pull request #1474 from AletheiaFact/Latest-changes-donation-ba…

…nner-December

Latest changes to donation banner december

public/locales/en/donationBanner.json

@@ -1,8 +1,6 @@
 {
-  "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"
-
+  "title": "AletheiaFact.org needs you to survive",
+  "paragraph": "AletheiaFact.org is unique and relies on the community. No ads, no subscriptions, we are driven by the passion to ensure free and reliable access to information. With your help, we continue to be a trusted reference. <strong>Our strength lies in the community – and that includes you.</strong> Today, we ask you to support us in this commitment to the truth. Show Brazil that reliable and impartial information is essential and that you stand with us in this mission. <strong>Donate now and help strengthen the fight against misinformation.</strong> Even a small donation makes a big difference. This is the time to act so that together, we can promote more democratic journalism and fight misinformation. <strong>Thank you for believing in AletheiaFact.org.</strong>",
+  "yesDonateButton": "I want to contribute!",
+  "noDonateButton": "I don't want to donate"
 }

public/locales/pt/donationBanner.json

@@ -1,8 +1,6 @@
 {
-  "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"
-
+  "title": "A AletheiaFact.org precisa de você para sobreviver",
+  "paragraph": "A AletheiaFact.org é única e depende da comunidade. Sem anúncios, sem assinaturas, somos movidos pela paixão de garantir acesso livre e confiável à informação. Com sua ajuda, continuamos sendo um referencial de confiança. <strong>Nossa força está na comunidade – e isso inclui você.</strong> Hoje, pedimos que nos apoie nesse compromisso com a verdade. Mostre ao Brasil que informações confiáveis e imparciais são essenciais e que você está ao nosso lado nessa missão. <strong>Doe agora e ajude a fortalecer o combate à desinformação.</strong> Mesmo uma doação pequena faz uma grande diferença. Este é o momento de agir para que, juntos, possamos promover um jornalismo mais democrático e combater a desinformação. <strong>Obrigado por acreditar na AletheiaFact.org.</strong>",
+  "yesDonateButton": "Quero contribuir!",
+  "noDonateButton": "Não quero doar"
 }

src/components/Home/DonationBanner.style.tsx

@@ -1,51 +1,69 @@
 import styled from "styled-components";
 import colors from "../../styles/colors";
 import { Col } from "antd";
+import { queries } from "../../styles/mediaQueries";
 
 const DonationBannerStyle = styled(Col)`
-        background-color: ${colors.quartiary};
+        background-color: ${colors.inactive};
 
-    .show-banner { 
-        color: ${colors.white};
-        font-size: 13px;
-        border: none;
-        background-color: ${colors.blackTertiary};
-        font-weight: 600;
-        cursor: pointer;
+    .close-banner { 
+        color: ${colors.primary};
+        font-size: 25px;
         align-self: flex-end;
         position: absolute;
         right: 10px;
-        bottom: -25px;
+        top: -10px;
         z-index: 1;
     }
 
     .banner-content {
         display: flex;
+        margin: 25px auto;
         flex-direction: column;
         align-items: center;
-        padding: 20px 0px;
+        max-width: 60%;
+        gap: 20px;
+    }
 
+    .banner-buttons {
+        display: flex;
+        gap: 30px;   
     }
 
     .banner-content > h1 {
         width: 100%;
-        color: ${colors.black};
+        color: ${colors.primary};
         font-size: 26px;
-        line-height: 34px;
         font-weight: 800;
         text-align: center;
     }
 
     .banner-content > p {
-        color: ${colors.blackTertiary};
+        color: ${colors.black};
         font-size: 16px;
         font-weight: 600;
         line-height: 24px;
         text-align: center;
     }
 
     .banner-button {
-        font-weight: 600;
+        font-weight: 700;
+    }
+
+    @media ${queries.md} {
+        .banner-content {
+            max-width: 80%;
+        }
+    }
+
+    @media ${queries.xs} {
+        .banner-content > h1 {
+            font-size: 20px;
+        }
+
+        .banner-content > p {
+            font-size: 12px;
+        }
     }
 `;
 

src/components/Home/DonationBanner.tsx

@@ -1,33 +1,44 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import DonationBannerContent from "./DonationBanner/DonationBannerContent";
 import DonationBannerStyle from "./DonationBanner.style";
 import { Col } from "antd";
-import { useTranslation } from "next-i18next";
+import Cookies from "js-cookie";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+
+const closeBanner = (onClose) => {
+  onClose();
+  Cookies.set("cta_donation_banner_show", "false");
+};
 
 const DonationBanner = () => {
-  const { t } = useTranslation();
-  const [isBannerVisible, setIsBannerVisible] = useState(true);
   const enableDonationBanner = process.env.NEXT_PUBLIC_ENABLE_BANNER_DONATION === "true";
-  const handleToggleBanner = () => {
-    setIsBannerVisible((prev) => !prev);
-  }
+  const [showDonationBanner, setDonationBanner] = useState<boolean>(true);
+
+  useEffect(() => {
+    const BannerCookies = Cookies.get("cta_donation_banner_show") || true;
+    if (BannerCookies === true || BannerCookies === "true") {
+      return setDonationBanner(true);
+    }
+    setDonationBanner(false);
+  }, []);
 
-  if (!enableDonationBanner){
+  if (!enableDonationBanner) {
     return null
   };
 
-  return (
+  return showDonationBanner && (
     <DonationBannerStyle>
       <Col className="banner-container">
-        {isBannerVisible && <DonationBannerContent />}
-        <button
-          className="show-banner"
-          onClick={handleToggleBanner}>
-          {isBannerVisible ? t("donationBanner:hideButton") : t("donationBanner:showButton")}
-        </button>
+        <CloseOutlined
+          className="close-banner"
+          onClick={() => closeBanner(() => setDonationBanner(false))}
+        />
+        <DonationBannerContent
+          closeClick={() => closeBanner(() => setDonationBanner(false))}
+        />
       </Col>
-    </DonationBannerStyle >
-  );
+    </DonationBannerStyle>
+  )
 };
 
 export default DonationBanner;

src/components/Home/DonationBanner/DonationBannerButton.tsx

@@ -1,21 +1,34 @@
-import { useTranslation } from "next-i18next";
 import Button from "../../Button";
 import { trackUmamiEvent } from "../../../lib/umami";
 
-const DonationBannerButton = ({ type }) => {
-    const { t } = useTranslation();
+interface DonationBannerButtonProps {
+    type: any;
+    closeClick: () => void;
+    href?: string;
+    text: string;
+    trackEvent: string;
+}
+
+const DonationBannerButton = ({
+    type,
+    closeClick,
+    href,
+    text,
+    trackEvent,
+}: DonationBannerButtonProps) => {
     return (
         <Button
             type={type}
-            href={t("home:donateUrlButton")}
+            href={href}
             target="_blank"
             rel="noreferrer"
             onClick={() => {
-                trackUmamiEvent("header-banner-donate-button", "Donate");
+                if (closeClick) closeClick();
+                trackUmamiEvent(trackEvent, text);
             }}
             className="banner-button"
         >
-            {t("donationBanner:donateButton")}
+            {text}
         </Button>
     );
 };

src/components/Home/DonationBanner/DonationBannerContent.tsx

@@ -2,25 +2,37 @@ import React from "react";
 import DonationBannerButton from "./DonationBannerButton";
 import { ButtonType } from "../../Button";
 import { Col } from "antd";
-import { useTranslation } from "next-i18next";
+import { Trans, useTranslation } from "next-i18next";
 import DonationBannerStyle from "../DonationBanner.style";
 
-function DonationBannerContent() {
+function DonationBannerContent({ closeClick }) {
     const { t } = useTranslation();
     return (
         <DonationBannerStyle >
             <Col
                 className="banner-content"
             >
                 <h1>
-                    {t("donationBanner:title", {
-                        date: new Date().getFullYear(),
-                    })}
+                    {t("donationBanner:title")}
                 </h1>
                 <p>
-                    {t("donationBanner:paragraph")}
+                    <Trans i18nKey="donationBanner:paragraph" />
                 </p>
-                <DonationBannerButton type={ButtonType.blue} />
+                <div className="banner-buttons">
+                    <DonationBannerButton
+                        type={ButtonType.white}
+                        text={t("donationBanner:noDonateButton")}
+                        closeClick={closeClick}
+                        trackEvent={"banner-donate-button-no"}
+                    />
+                    <DonationBannerButton
+                        type={ButtonType.blue}
+                        href={t("home:donateUrlButton")}
+                        text={t("donationBanner:yesDonateButton")}
+                        closeClick={closeClick}
+                        trackEvent={"banner-donate-button-yes"}
+                    />
+                </div>
             </Col>
         </DonationBannerStyle >