From 787c5550c677fcb78b1660e8cf7f39b8284fd89a Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Fri, 18 Jun 2021 10:20:54 -0500
Subject: [PATCH] FEATURE: Add ability to use custom background image (#76)

* FEATURE: Add ability to use custom background image

* Prettier
---
 .../components/campaign-banner.js.es6          | 18 ++++++++++++++++++
 .../templates/components/campaign-banner.hbs   |  8 +++++++-
 config/locales/client.en.yml                   |  1 +
 config/settings.yml                            |  4 ++++
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/assets/javascripts/discourse/components/campaign-banner.js.es6 b/assets/javascripts/discourse/components/campaign-banner.js.es6
index c4134bd..536f83e 100644
--- a/assets/javascripts/discourse/components/campaign-banner.js.es6
+++ b/assets/javascripts/discourse/components/campaign-banner.js.es6
@@ -13,6 +13,9 @@ export default Component.extend({
   dropShadowColor: setting(
     "discourse_subscriptions_campaign_banner_shadow_color"
   ),
+  backgroundImageUrl: setting(
+    "discourse_subscriptions_campaign_banner_bg_image"
+  ),
   isSidebar: equal(
     "siteSettings.discourse_subscriptions_campaign_banner_location",
     "Sidebar"
@@ -34,6 +37,21 @@ export default Component.extend({
 
     this.set("contributors", []);
 
+    // add background-image url to stylesheet
+    if (this.backgroundImageUrl) {
+      const backgroundUrl = `url(${this.backgroundImageUrl}`.replace(/\\/g, "");
+      if (
+        document.documentElement.style.getPropertyValue(
+          "--campaign-background-image"
+        ) !== backgroundUrl
+      ) {
+        document.documentElement.style.setProperty(
+          "--campaign-background-image",
+          backgroundUrl
+        );
+      }
+    }
+
     if (this.showContributors) {
       return ajax("/s/contributors", { method: "get" }).then((result) => {
         this.setProperties({
diff --git a/assets/javascripts/discourse/templates/components/campaign-banner.hbs b/assets/javascripts/discourse/templates/components/campaign-banner.hbs
index 080bed8..99de413 100644
--- a/assets/javascripts/discourse/templates/components/campaign-banner.hbs
+++ b/assets/javascripts/discourse/templates/components/campaign-banner.hbs
@@ -5,7 +5,13 @@
       action="dismissBanner"
       class="close"
     }}
-    <div class="campaign-banner-info">
+    <div class="campaign-banner-info" style="{{if backgroundImageUrl 'background-image: linear-gradient(
+        0deg,
+        rgba(var(--secondary-rgb), 0.75) 0%,
+        rgba(var(--secondary-rgb), 0.75) 100%),
+        var(--campaign-background-image);
+      background-size: cover;
+      background-repeat: no-repeat;' ''}}">
       <h2 class="campaign-banner-info-header">{{i18n 'discourse_subscriptions.campaign.title'}}</h2>
         <p class="campaign-banner-info-description">{{i18n 'discourse_subscriptions.campaign.body'}}</p>
         {{#if product}}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index a53eca3..df509ba 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -11,6 +11,7 @@ en:
     discourse_subscriptions_campaign_type: Selects the type of campaign to run (subscribers or monthly amount raised).
     discourse_subscriptions_campaign_banner_location: Selects the location of the campaign banner (top or sidebar).
     discourse_subscriptions_campaign_banner_shadow_color: Selects the color of the campaign banner drop shadow.
+    discourse_subscriptions_campaign_banner_bg_image: Upload a custom image to use as the background on the campaign banner.
     discourse_subscriptions_campaign_show_contributors: Show avatars of the most recent purchases of subscription products.
     discourse_subscriptions_campaign_product: The Stripe product id to send supporters when they click the button on the campaign. If this setting is blank, supporters will be directed to the main products page.
     errors:
diff --git a/config/settings.yml b/config/settings.yml
index c3f5dd8..5e6fda3 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -48,6 +48,10 @@ plugins:
     choices:
       - Top
       - Sidebar
+  discourse_subscriptions_campaign_banner_bg_image:
+    client: true
+    type: upload
+    default: ""
   discourse_subscriptions_campaign_banner_shadow_color:
     client: true
     type: color