Merge pull request #119 from nr2f1/support-us-banner-localised

Localised support banner

website/src/components/support-banner/index.tsx

@@ -1,29 +1,56 @@
 import styles from './index.module.scss';
 
+import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
+import { getClient } from '@graphql/client';
+import {
+  GetBannerDocument,
+  type GetBannerQuery,
+} from '@graphql/queries/banner/index.generated';
 import type { AvailableLocale } from '@i18n/locales';
+import { supportUsBannerId } from '@models/banners/banner';
 
 interface SupportBannerProps {
   lang: AvailableLocale;
 }
 
-const SupportBanner: React.FC<SupportBannerProps> = ({ lang }) => {
+const SupportBanner: React.FC<SupportBannerProps> = async ({ lang }) => {
+  const { query } = getClient();
+
+  const {
+    data: { banner },
+    error,
+  } = await query<GetBannerQuery>({
+    query: GetBannerDocument,
+    variables: {
+      id: supportUsBannerId,
+      locale: lang,
+    },
+  });
+
+  if (error || !banner) {
+    return null;
+  }
+
+  const { heading, content, cta, image } = banner;
+
+  const headingContent = heading?.content ?? '';
+  const textContent = documentToReactComponents(content?.content?.json);
+  const ctaContent = cta?.content ?? '';
+  const ctaUrl = cta?.href ?? '/';
+  const imageUrl = image?.url ?? '';
+
   return (
     <div className={styles['support-banner']}>
       <div className="content-wrapper">
         <section
           style={{
-            backgroundImage:
-              'url(https://pataruco.s3.amazonaws.com/public/support-us-image.png), linear-gradient(90deg, rgba(0, 0, 0, 0.60) 36.61%, rgba(0, 0, 0, 0.00) 100%)',
+            backgroundImage: `url(${imageUrl}), linear-gradient(90deg, rgba(0, 0, 0, 0.60) 36.61%, rgba(0, 0, 0, 0.00) 100%)`,
           }}
         >
-          <h2>Support our work</h2>
-          <p>
-            There are plenty of ways to help. You can support us by donating,
-            volunteering a few hours a month or helping us fundraise. Help us
-            fulfill our mission!
-          </p>
-          <a href="/" className="button button--accent-on-dark">
-            Support us
+          <h2>{headingContent}</h2>
+          {textContent}
+          <a href={ctaUrl} className="button button--accent-on-dark">
+            {ctaContent}
           </a>
         </section>
       </div>

website/src/models/banners/banner.ts

@@ -1 +1,2 @@
 export const homePageBannerId = '3q7tOCfyVIeSMPS9kZchMu';
+export const supportUsBannerId = '1fsH8gLkk90N92o6Fv0ajd';