From 1ee02cdf3aee86c48f41d47c0bd8f8c3594435c3 Mon Sep 17 00:00:00 2001
From: Em_Dev <Chifez1@gmail.com>
Date: Sat, 5 Oct 2024 23:33:09 +0100
Subject: [PATCH] feat: set org landing page background (#471)

* landing page background settings

* translations

* worrked on the reviews

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
---
 .../components/Org/LandingPage/index.svelte   | 35 ++++++++++++------
 .../Org/Settings/LandingpageSettings.svelte   | 37 +++++++++++++++++++
 .../src/lib/components/Org/Settings/store.ts  |  8 ++++
 .../src/lib/utils/translations/de.json        |  5 +++
 .../src/lib/utils/translations/en.json        |  6 +++
 .../src/lib/utils/translations/es.json        |  5 +++
 .../src/lib/utils/translations/fr.json        |  5 +++
 .../src/lib/utils/translations/hi.json        |  5 +++
 .../src/lib/utils/translations/pt.json        |  5 +++
 .../src/lib/utils/translations/ru.json        |  5 +++
 .../src/lib/utils/translations/vi.json        |  5 +++
 11 files changed, 110 insertions(+), 11 deletions(-)

diff --git a/apps/dashboard/src/lib/components/Org/LandingPage/index.svelte b/apps/dashboard/src/lib/components/Org/LandingPage/index.svelte
index 1bc144f0..4372c867 100644
--- a/apps/dashboard/src/lib/components/Org/LandingPage/index.svelte
+++ b/apps/dashboard/src/lib/components/Org/LandingPage/index.svelte
@@ -147,6 +147,21 @@
     }
   }
 
+  function getBgImage(settings) {
+    const { show, image } = settings.header.background || {
+      show: true,
+      image: '/images/org-landingpage-banner.jpeg'
+    };
+
+    if (!show) {
+      return undefined;
+    }
+
+    if (image) {
+      return `url('${image}')`;
+    }
+  }
+
   $: initPlyr(player, $landingPageSettings.header?.banner?.video);
   $: setDefault(org?.landingpage);
 </script>
@@ -165,7 +180,15 @@
   <main>
     <!-- Header Section -->
     {#if $landingPageSettings.header.show}
-      <header id="header" class="banner w-full h-[100vh] md:h-[90vh] mb-10 relative">
+      <header
+        id="header"
+        class={`w-full h-[100vh] md:h-[90vh] mb-10 relative ${
+          $landingPageSettings.header.background.show
+            ? 'bg-cover bg-center'
+            : 'border-b border-gray-300'
+        }`}
+        style="background-image: {getBgImage($landingPageSettings)}"
+      >
         <Navigation
           logo={org.avatar_url}
           orgName={org.name}
@@ -585,13 +608,3 @@
     {/if}
   </main>
 {/if}
-
-<style>
-  .banner {
-    background: url('/images/org-landingpage-banner.jpeg') no-repeat center center fixed;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-  }
-</style>
diff --git a/apps/dashboard/src/lib/components/Org/Settings/LandingpageSettings.svelte b/apps/dashboard/src/lib/components/Org/Settings/LandingpageSettings.svelte
index 508c8ae0..548daa07 100644
--- a/apps/dashboard/src/lib/components/Org/Settings/LandingpageSettings.svelte
+++ b/apps/dashboard/src/lib/components/Org/Settings/LandingpageSettings.svelte
@@ -109,6 +109,10 @@
         landingpage.header.banner = $landingPageSettings.header.banner;
       }
 
+      if (!landingpage?.header?.background) {
+        landingpage.header.background = $landingPageSettings.header.background;
+      }
+
       $landingPageSettings = {
         ...landingpage
       };
@@ -218,6 +222,39 @@
       {#if $handleOpenWidget.open && widgetKey === 'banner'}
         <UploadWidget bind:imageURL={$landingPageSettings.header.banner.image} />
       {/if}
+
+      <!-- background -->
+
+      <div class="mt-4">
+        <p class="font-bold mb-4">{$t('settings.landing_page.background.title')}</p>
+        <PrimaryButton
+          variant={VARIANTS.OUTLINED}
+          label={$t('settings.landing_page.about.select_image')}
+          className="mt-3"
+          onClick={() => widgetControl('background')}
+        />
+
+        {#if $landingPageSettings.header.background?.image}
+          <img
+            alt="backgroundImage"
+            src={$landingPageSettings.header.background.image}
+            class="mt-2 rounded-md w-full"
+          />
+        {/if}
+
+        <Toggle bind:toggled={$landingPageSettings.header.background.show} size="sm">
+          <span slot="labelA" style="color: gray"
+            >{$t('settings.landing_page.background.hide_background')}</span
+          >
+          <span slot="labelB" style="color: gray"
+            >{$t('settings.landing_page.background.show_background')}</span
+          >
+        </Toggle>
+
+        {#if $handleOpenWidget.open && widgetKey === 'background'}
+          <UploadWidget bind:imageURL={$landingPageSettings.header.background.image} />
+        {/if}
+      </div>
     </Column>
   </Row>
 
diff --git a/apps/dashboard/src/lib/components/Org/Settings/store.ts b/apps/dashboard/src/lib/components/Org/Settings/store.ts
index b16de80a..248bf6e1 100644
--- a/apps/dashboard/src/lib/components/Org/Settings/store.ts
+++ b/apps/dashboard/src/lib/components/Org/Settings/store.ts
@@ -17,6 +17,10 @@ export interface OrgLandingPageJson {
       type: string;
       show: boolean;
     };
+    background?: {
+      image: string;
+      show: boolean;
+    };
     show: boolean;
   };
   aboutUs: {
@@ -81,6 +85,10 @@ export const landingPageSettings: Writable<OrgLandingPageJson> = writable({
       type: 'video',
       show: true
     },
+    background: {
+      image: '',
+      show: true
+    },
     show: true
   },
   aboutUs: {
diff --git a/apps/dashboard/src/lib/utils/translations/de.json b/apps/dashboard/src/lib/utils/translations/de.json
index d3c82d27..d80389f0 100644
--- a/apps/dashboard/src/lib/utils/translations/de.json
+++ b/apps/dashboard/src/lib/utils/translations/de.json
@@ -1218,6 +1218,11 @@
           "video": "Video",
           "image": "Bild"
         }
+      },
+      "background": {
+        "title": "Hintergrundbild",
+        "show_background": "Hintergrund anzeigen",
+        "hide_background": "Hintergrund ausblenden"
       }
     },
     "organization": {
diff --git a/apps/dashboard/src/lib/utils/translations/en.json b/apps/dashboard/src/lib/utils/translations/en.json
index 5c65813e..db9d4d44 100644
--- a/apps/dashboard/src/lib/utils/translations/en.json
+++ b/apps/dashboard/src/lib/utils/translations/en.json
@@ -128,6 +128,11 @@
       "title": "Title",
       "title_highlight": "Title-Highlight",
       "subtitle": "Subtitle",
+      "background": {
+        "title": "Background Image",
+        "show_background": "Show background",
+        "hide_background": "Hide background"
+      },
       "actions": {
         "heading": "Actions",
         "label": "Label",
@@ -139,6 +144,7 @@
           "video": "Video",
           "image": "Image"
         },
+
         "show_banner": "Show banner",
         "hide_banner": "Hide banner"
       },
diff --git a/apps/dashboard/src/lib/utils/translations/es.json b/apps/dashboard/src/lib/utils/translations/es.json
index 1121cb92..989f25cf 100644
--- a/apps/dashboard/src/lib/utils/translations/es.json
+++ b/apps/dashboard/src/lib/utils/translations/es.json
@@ -1218,6 +1218,11 @@
           "video": "Video",
           "image": "Imagen"
         }
+      },
+      "background": {
+        "title": "Imagen de fondo",
+        "show_background": "Mostrar fondo",
+        "hide_background": "Ocultar fondo"
       }
     },
     "organization": {
diff --git a/apps/dashboard/src/lib/utils/translations/fr.json b/apps/dashboard/src/lib/utils/translations/fr.json
index ccf73079..e99e6856 100644
--- a/apps/dashboard/src/lib/utils/translations/fr.json
+++ b/apps/dashboard/src/lib/utils/translations/fr.json
@@ -1218,6 +1218,11 @@
           "video": "Vidéo",
           "image": "Image"
         }
+      },
+      "background": {
+        "title": "Image d'arrière-plan",
+        "show_background": "Afficher l'arrière-plan",
+        "hide_background": "Masquer l'arrière-plan"
       }
     },
     "organization": {
diff --git a/apps/dashboard/src/lib/utils/translations/hi.json b/apps/dashboard/src/lib/utils/translations/hi.json
index 5aa96334..18d00d88 100644
--- a/apps/dashboard/src/lib/utils/translations/hi.json
+++ b/apps/dashboard/src/lib/utils/translations/hi.json
@@ -1218,6 +1218,11 @@
           "video": "वीडियो",
           "image": "छवि"
         }
+      },
+      "background": {
+        "title": "पृष्ठभूमि छवि",
+        "show_background": "पृष्ठभूमि दिखाएँ",
+        "hide_background": "पृष्ठभूमि छिपाएँ"
       }
     },
     "organization": {
diff --git a/apps/dashboard/src/lib/utils/translations/pt.json b/apps/dashboard/src/lib/utils/translations/pt.json
index 3dfe7fd8..a665bdc6 100644
--- a/apps/dashboard/src/lib/utils/translations/pt.json
+++ b/apps/dashboard/src/lib/utils/translations/pt.json
@@ -1218,6 +1218,11 @@
           "video": "Vídeo",
           "image": "Imagem"
         }
+      },
+      "background": {
+        "title": "Imagem de fundo",
+        "show_background": "Mostrar plano de fundo",
+        "hide_background": "Ocultar plano de fundo"
       }
     },
     "organization": {
diff --git a/apps/dashboard/src/lib/utils/translations/ru.json b/apps/dashboard/src/lib/utils/translations/ru.json
index 77a13a34..8de806ef 100644
--- a/apps/dashboard/src/lib/utils/translations/ru.json
+++ b/apps/dashboard/src/lib/utils/translations/ru.json
@@ -1218,6 +1218,11 @@
           "video": "видео",
           "image": "Изображение"
         }
+      },
+      "background": {
+        "title": "Фоновое изображение",
+        "show_background": "Показать фон",
+        "hide_background": "Скрыть фон"
       }
     },
     "organization": {
diff --git a/apps/dashboard/src/lib/utils/translations/vi.json b/apps/dashboard/src/lib/utils/translations/vi.json
index 450ae9cf..a222b314 100644
--- a/apps/dashboard/src/lib/utils/translations/vi.json
+++ b/apps/dashboard/src/lib/utils/translations/vi.json
@@ -1218,6 +1218,11 @@
           "video": "Băng hình",
           "image": "Hình ảnh"
         }
+      },
+      "background": {
+        "title": "Hình nền",
+        "show_background": "Hiển thị nền",
+        "hide_background": "Ẩn nền"
       }
     },
     "organization": {