Update marketing functionality (#7122)

* WIP

* Add new ads style

* Sort out schema.rb

* Improve layout

* Rename to perk

* Return no advert if there's not one

* Add dark theme logo

* Add new color and filter variables

* Further improvemnets

* Fix things more

* Normalise icons

* Allow updating of mailer text

* Fix schema

---------

Co-authored-by: dem4ron <[email protected]>

app/controllers/admin/adverts_controller.rb

@@ -50,6 +50,6 @@ def use_advert
 
   # Only allow a list of trusted parameters through.
   def advert_params
-    params.require(:partner_advert).permit(*%i[status url base_text emphasised_text light_logo dark_logo])
+    params.require(:partner_advert).permit(*%i[status url markdown mailer_text light_logo dark_logo])
   end
 end

app/controllers/partners_controller.rb

@@ -1,6 +1,11 @@
 class PartnersController < ApplicationController
   skip_before_action :authenticate_user!
 
+  def show
+    @partner = Partner.find_by!(slug: params[:id])
+    @perk = @partner.perks.active.first
+  end
+
   def gobridge
     @track = Track.find('go')
     @num_concepts = @track.concepts.count

app/controllers/perks_controller.rb

@@ -9,7 +9,7 @@ def index
       },
       light_logo_attachment: :blob,
       dark_logo_attachment: :blob
-    )
+    ).order(id: :desc)
   end
 
   def show

app/css/components/advert.css

@@ -1,12 +1,60 @@
+.c-perk-a {
+    @apply bg-backgroundColorA;
+    @apply border-1 border-borderColor5 rounded-8;
+    @apply pt-10 pb-12 px-16;
+    @apply text-left leading-140 text-14;
+    @apply hover:shadow-sm;
+    @apply flex flex-col items-start;
+    @apply relative;
+
+    background: var(--backgroundColorPerkContainer);
+    @apply border-1 border-vividPurple;
+
+    .logo {
+        max-width: 50%;
+        height: auto;
+        max-height: 35px;
+    }
+
+    .tag {
+        @apply ml-auto mr-[-16px];
+        @apply py-2 pl-16 pr-12;
+        background: #eee;
+        @apply rounded-l-[16px];
+        @apply font-medium;
+        @apply bg-vividPurple text-white;
+    }
+
+    .offer {
+        @apply text-14;
+        @apply mb-6;
+
+        strong {
+            @apply font-semibold;
+        }
+    }
+    .cta {
+        @apply flex flex-row items-center gap-4;
+        @apply text-14 font-medium;
+        color: var(--textColorPerkCTA);
+        img {
+            @apply h-[10px];
+            filter: var(--purple-light-white-dark-filter);
+            &:last-child {
+                opacity: 0.5;
+            }
+        }
+    }
+}
 .theme-light {
-    .c-advert {
+    .c-perk-a {
         .logo-dark {
             @apply hidden;
         }
     }
 }
 .theme-dark {
-    .c-advert {
+    .c-perk-a {
         .logo-light {
             @apply hidden;
         }

app/css/components/perk.css

@@ -1,11 +1,12 @@
 .c-perk {
     @apply bg-backgroundColorA shadow-smZ1 rounded-8;
-    @apply py-24 px-16;
-    @apply flex flex-col items-center;
-    @apply text-center;
+    @apply p-20;
+    @apply flex flex-col items-stretch;
+
     .logo {
-        @apply h-[40px];
-        @apply mb-20;
+        @apply h-[40px] max-w-[190px];
+        @apply mb-12;
+        @apply self-start;
     }
     .about {
         @apply text-p-base;
@@ -18,6 +19,18 @@
             @apply font-semibold text-textColor2;
         }
     }
+
+    .buttons {
+        @apply flex gap-12;
+        *:first-child {
+            @apply flex-grow;
+        }
+        .c-react-wrapper-perks-modal-button {
+            button {
+                @apply w-fill;
+            }
+        }
+    }
 }
 
 .theme-light {

app/css/pages/exercise-show.css

@@ -468,3 +468,15 @@ body.namespace-tracks.controller-exercises.action-show {
         }
     }
 }
+
+#page-exercise-show.has-advert,
+#page-concept-show.has-advert {
+    .c-react-wrapper-student-update-exercise-notice {
+        max-width: calc(100% - 340px);
+    }
+    .c-perk-a {
+        @apply absolute top-20;
+        right: var(--container-padding-x);
+        @apply w-[320px];
+    }
+}

app/css/ui-kit/colors.css

@@ -205,6 +205,7 @@
     --backgroundColorNavDropdown: theme(colors.aliceBlue);
     --backgroundColorDonationFormCover: rgba(255, 255, 255, 0.6);
     --backgroundColorHoverMenuTrack: #fafaff;
+    --backgroundColorPerkContainer: #f8f5ff;
 
     --backgroundImpactPageHeader: linear-gradient(
             180deg,
@@ -277,6 +278,7 @@
     --textGradientStart: #2200ff;
     --textGradientEnd: #9e00ff;
     --textColorSoftEmphasis: #333;
+    --textColorPerkCTA: theme(colors.purple);
 
     --shadowColorED: 0, 80, 255;
     --shadowColorMain: 79, 114, 205;
@@ -361,6 +363,7 @@
     --white-filter: var(--filter-FFFFFF);
     --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
         brightness(97%) contrast(80%);
+    --purple-light-white-dark-filter: var(--purple-filter);
     --dark-purple-filter: invert(20%) sepia(60%) saturate(1812%)
         hue-rotate(229deg) brightness(92%) contrast(89%);
     --selected-tab-icon-filter: var(--purple-filter);
@@ -488,6 +491,7 @@ body.namespace-.controller-insiders.theme-light,
     --backgroundColorNavDropdown: theme(colors.eerieBlack);
     --backgroundColorDonationFormCover: rgba(0, 0, 0, 0.4);
     --backgroundColorHoverMenuTrack: #3a3557;
+    --backgroundColorPerkContainer: #103;
 
     --backgroundImpactPageHeader: theme(colors.eerieBlack);
 
@@ -546,6 +550,7 @@ body.namespace-.controller-insiders.theme-light,
     --textGradientStart: #8370ff;
     --textGradientEnd: #b947ff;
     --textColorSoftEmphasis: #f5f5f5;
+    --textColorPerkCTA: theme(colors.white);
 
     --c-prominent-link-color: theme(colors.lightGold);
     --color22: var(--c-533F56);
@@ -677,6 +682,8 @@ body.namespace-.controller-insiders.theme-light,
     --purple-filter: invert(23%) sepia(90%) saturate(1818%) hue-rotate(236deg)
         brightness(97%) contrast(80%);
 
+    --purple-light-white-dark-filter: var(--white-filter);
+
     /* aliceBlue */
     --selected-tab-icon-filter: invert(94%) sepia(7%) saturate(129%)
         hue-rotate(182deg) brightness(102%) contrast(96%);

app/helpers/view_components/partner/advert.rb

@@ -5,10 +5,7 @@ class Partner::Advert < ViewComponent
     initialize_with advert: nil, track: nil, preview: false
 
     def to_s
-      # Don't show adverts at all for crawlers
-      return nil if request.is_crawler?
-      return nil unless preview || show_advert?
-      return nil unless advert
+      return nil unless show_advert?
 
       uuid = SecureRandom.hex
 
@@ -27,15 +24,15 @@ def to_s
     private
     memoize
     def advert
-      @advert || ::Partner::Advert.active.first
+      @advert ||= ::Partner::Advert.for_track(track)
     end
 
     def show_advert?
-      return false unless track
-      return true if track.slug == "go"
-      return true if %w[javascript python java].include?(track.slug) && ALLOWED_DATES.include?(Date.current)
+      return false if request.is_crawler?
+      return true if preview
+      return false unless advert
 
-      false
+      true
     end
 
     ALLOWED_DATES = [