Skip to content

Commit

Permalink
Merge pull request #1444 from AletheiaFact/Create-banner-donnation-de…
Browse files Browse the repository at this point in the history
…cember

Banner donnation december
  • Loading branch information
thesocialdev authored Nov 18, 2024
2 parents 90e8de3 + bd3724e commit 46b49a2
Show file tree
Hide file tree
Showing 11 changed files with 165 additions and 0 deletions.
1 change: 1 addition & 0 deletions .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ DATA_PATH=../
DEVELOPMENT_PASSWORD=123456
ENVIRONMENT=watch-dev
FROM_EMAIL=[email protected]
NEXT_PUBLIC_ENABLE_BANNER_DONATION=

MONGODB_NAME=Aletheia
MONGODB_PORT=27017
Expand Down
2 changes: 2 additions & 0 deletions .github/workflows/aws.yml
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ jobs:
ORY_SDK_URL: ${{ secrets.ORY_SDK_URL }}
ORY_ACCESS_TOKEN: ${{ secrets.ORY_ACCESS_TOKEN }}
ORYCLOUD: "enabled"
ENABLE_BANNER_DONATION: ${{ vars.NEXT_PUBLIC_ENABLE_BANNER_DONATION }}
ALETHEIA_SCHEMA_ID: ${{ secrets.ALETHEIA_SCHEMA_ID }}
RECAPTCHA_SITEKEY: ${{ secrets.RECAPTCHA_SITEKEY }}
NOVU_API_KEY: ${{ secrets.NOVU_API_KEY }}
Expand Down Expand Up @@ -113,6 +114,7 @@ jobs:
RECAPTCHA_SITEKEY: ${{ secrets.RECAPTCHA_SITEKEY }}
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
ORYCLOUD: "enabled"
ENABLE_BANNER_DONATION: ${{ vars.NEXT_PUBLIC_ENABLE_BANNER_DONATION }}
TAG: ${{ github.sha}}
steps:
- name: Checkout
Expand Down
2 changes: 2 additions & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ ARG NEXT_PUBLIC_ENVIRONMENT
ARG NEXT_PUBLIC_ORY_SDK_URL
ARG NEXT_PUBLIC_ORYCLOUD
ARG ENVIRONMENT
ARG NEXT_PUBLIC_ENABLE_BANNER_DONATION
ENV PARCEL_WORKERS=1
ENV NEW_RELIC_NO_CONFIG_FILE=true
ENV NEW_RELIC_DISTRIBUTED_TRACING_ENABLED=true
Expand Down Expand Up @@ -42,6 +43,7 @@ RUN NEXT_PUBLIC_UMAMI_SITE_ID=$NEXT_PUBLIC_UMAMI_SITE_ID \
NEXT_PUBLIC_ENVIRONMENT=$NEXT_PUBLIC_ENVIRONMENT \
NEXT_PUBLIC_ORY_SDK_URL=$NEXT_PUBLIC_ORY_SDK_URL \
NEXT_PUBLIC_ORYCLOUD=$NEXT_PUBLIC_ORYCLOUD \
NEXT_PUBLIC_ENABLE_BANNER_DONATION=$NEXT_PUBLIC_ENABLE_BANNER_DONATION \
yarn build

FROM node:18.19.1-alpine
Expand Down
4 changes: 4 additions & 0 deletions deployment/k8s/modules/container.pkl
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ container: PodSpec.Container = new {
name = "NEXT_PUBLIC_ORYCLOUD"
value = read("env:ORYCLOUD")
}
new {
name = "NEXT_PUBLIC_ENABLE_BANNER_DONATION"
value = read("env:ENABLE_BANNER_DONATION")
}
}

readinessProbe {
Expand Down
8 changes: 8 additions & 0 deletions public/locales/en/donationBanner.json
Original file line number Diff line number Diff line change
@@ -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"

}
8 changes: 8 additions & 0 deletions public/locales/pt/donationBanner.json
Original file line number Diff line number Diff line change
@@ -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"

}
52 changes: 52 additions & 0 deletions src/components/Home/DonationBanner.style.tsx
Original file line number Diff line number Diff line change
@@ -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;
33 changes: 33 additions & 0 deletions src/components/Home/DonationBanner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
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 enableDonationBanner = process.env.NEXT_PUBLIC_ENABLE_BANNER_DONATION === "true";
const handleToggleBanner = () => {
setIsBannerVisible((prev) => !prev);
}

if (!enableDonationBanner){
return null
};

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;
23 changes: 23 additions & 0 deletions src/components/Home/DonationBanner/DonationBannerButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { useTranslation } from "next-i18next";
import Button from "../../Button";
import { trackUmamiEvent } from "../../../lib/umami";

const DonationBannerButton = ({ type }) => {
const { t } = useTranslation();
return (
<Button
type={type}
href={t("home:donateUrlButton")}
target="_blank"
rel="noreferrer"
onClick={() => {
trackUmamiEvent("header-banner-donate-button", "Donate");
}}
className="banner-button"
>
{t("donationBanner:donateButton")}
</Button>
);
};

export default DonationBannerButton;
30 changes: 30 additions & 0 deletions src/components/Home/DonationBanner/DonationBannerContent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from "react";
import DonationBannerButton 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>
<DonationBannerButton type={ButtonType.blue} />
</Col>
</DonationBannerStyle >

);
}

export default DonationBannerContent;
2 changes: 2 additions & 0 deletions src/components/MainApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Header from "./Header/Header";
import OverlaySearchResults from "./Search/OverlaySearchResults";
import Sidebar from "./Sidebar";
import AffixCTAButton from "./AffixButton/AffixCTAButton";
import DonationBanner from "./Home/DonationBanner";
import localConfig from "../../config/localConfig";

const copilotDrawerWidth = 350;
Expand Down Expand Up @@ -43,6 +44,7 @@ const MainApp = ({ children }) => {
<Sidebar />
<Layout style={{ background: colors.white }}>
<Header />
<DonationBanner />
{localConfig.home.affixCTA ? (
<AffixCTAButton copilotDrawerWidth={copilotDrawerWidth} />
) : null}
Expand Down

0 comments on commit 46b49a2

Please sign in to comment.