April fools' day setup

app/javascript/hotsauce.js

@@ -0,0 +1,33 @@
+const hotsauceKey = 'hotsauce2020_redirected'
+document.addEventListener('turbolinks:load', function() {
+  if (localStorage.getItem(hotsauceKey) === '1') {
+    return
+  }
+
+  const now = new Date()
+  if ((now.getMonth() === 2 && now.getDay() === 31) || (now.getMonth() === 3 && now.getDay() <= 7)) {
+    localStorage.setItem(hotsauceKey, '1')
+    window.location = '/hot#sauce'
+  }
+})
+
+document.addEventListener('click', async function(event) {
+  const hotsauceButton = event.target.closest('.hotsauce-buy')
+  if (hotsauceButton === null) {
+    return
+  }
+
+  event.preventDefault()
+
+  const stripe = Stripe(process.env.STRIPE_PUBLISHABLE_KEY)
+  stripe.redirectToCheckout({
+    items: [{sku: hotsauceButton.dataset.sku, quantity: 1}],
+    successUrl: 'https://splits.io/hot?ordered=1#sauce',
+    cancelUrl: 'https://splits.io/hot?ordered=0#sauce',
+    clientReferenceId: gon.user && gon.user.id,
+    customerEmail: gon.user && gon.user.email,
+    shippingAddressCollection: {
+      allowedCountries: ['US'],
+    },
+  })
+})

app/javascript/packs/application.js

@@ -62,6 +62,7 @@ import "../count.js"
 import "../crisp.js"
 import "../dropdown.js"
 import "../highchart_theme.js"
+import "../hotsauce.js"
 import "../chart_builder.js"
 import "../landing.js"
 import "../like.js"

app/views/layouts/application.slim

@@ -80,6 +80,10 @@ html lang='en'
                   span.d-md-none.d-xl-inline FAQ
               li.nav-item
                 search
+              - now = Time.now.utc
+              - if (now.month == 3 && now.day == 31) || (now.month == 4 && now.day <= 7)
+                li.nav-item.px-3
+                  a.btn.btn-danger href=hotsauce_path(anchor: 'sauce') Splits.io hot sauce!
             ul.nav.navbar-nav
               - if current_user.present?
                 li.nav-item class=('active' if on_a_profile_page?)

app/views/pages/hotsauce.slim

@@ -0,0 +1,126 @@
+- content_for(:title, 'Hot sauce')
+- content_for(:header)
+  ol.breadcrumb.shadow
+    li.breadcrumb-item = link_to(site_title, root_path)
+    li.breadcrumb-item = link_to('Hot Sauce', brand_path)
+
+div.bg-dark style="width: 100%; height: 100%"
+  div class="overflow-hidden p-3 p-md-5 text-center bg-white text-dark" style='width: 100%'
+    a name="sauce"
+    br
+    - if params['ordered'] == '1'
+      .alert.alert-success
+        ' Your hot sauce has been ordered and a receipt has been emailed to you.
+    - if params['ordered'] == '0'
+      .alert.alert-warning
+        ' Your hot sauce has not been ordered. Click Buy to proceed.
+    div class="col-md-8 col-lg-5 p-lg-5 mx-auto my-5" 
+      h1 class="display-4 font-weight-normal" We've done it.
+      p class="lead font-weight-normal"
+        ' Thanks for helping us on our journey to be the #1 destination for speedrunning analytics.
+      p class="lead font-weight-normal"
+        ' It's time for us to call it quits, because we've developed and released a singular tool which will supersede all
+        ' our previous efforts.
+      p class="lead font-weight-normal"
+        ' Introducing
+        i Race to the Bottom
+        ' :
+      p class="lead font-weight-normal"
+        ' The Splits.io hot sauce.
+      p class="lead font-weight-normal"
+        ' Starting at just $15 with free shipping.
+      button.btn.btn-primary.hotsauce-buy data={sku: ENV['STRIPE_HOTSAUCE_SKU']} Buy now
+
+    .text-secondary.m-5 style='font-size: 3em' = icon('fas', 'arrow-circle-down')
+    br
+    br
+    br
+    br
+    br
+    br
+    br
+    br
+    img.rounded-circle src=asset_path('hotsauce/day.jpg') width=400
+
+  div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3 card-group" 
+    div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden card"
+      div class="my-3 py-3" 
+        h2 class="display-5" It's hot.
+        p class="lead" Cayenne. Habanero. Chipotle. The big three.
+      div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0; background: url(#{asset_path('hotsauce/bg.png')})"
+
+    div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-dark overflow-hidden card"
+      div class="my-3 p-3" 
+        h2 class="display-5" It's sauce.
+        p class="lead" It's made of liquid, so you can pour it on things.
+      div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0; background: url(#{asset_path('hotsauce/bg.png')})" 
+
+  div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3 card-group"
+    div class="bg-secondary text-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden card"
+      div class="my-3 p-3" 
+        h2 class="display-5"
+          ' "I force myself to eat this if I don't PB. Now I PB every time!"
+          br  
+        p class="lead"
+          i — Glacials
+      div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0; background: url(#{asset_path('hotsauce/bg.png')})" 
+
+    div class="bg-warning text-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden card"
+      div class="my-3 py-3" 
+        h2 class="display-5"
+          ' "I never thought negative reinforcement could be so cheap!"
+          br  
+        p class="lead"
+          i — My brother, as yelled through the bathroom door
+      div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0; background: url(#{asset_path('hotsauce/bg.png')})" 
+
+  div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3 card-group"
+    div class="bg-danger mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden card"
+      div class="my-3 p-3" 
+        h2 class="display-5" "I used this sauce to force myself to pick up Half-Life: Alyx, but then I delocated my wrist doing an OOB. You'll be hearing from my lawyer."
+        p class="lead"
+          i — Former VR speedrunner
+      div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0; background: url(#{asset_path('hotsauce/bg.png')})" 
+
+    div class="bg-light text-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden card"
+      div class="my-3 py-3" 
+        h2 class="display-5"
+          ' "Yeah it's alright I guess."
+          br
+          br
+          br
+        p class="lead"
+          i — Some bozo
+      div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0; background: url(#{asset_path('hotsauce/bg.png')})" 
+
+  div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3 card-group"
+    div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-dark overflow-hidden card"
+      div class="my-3 p-3" 
+        h2 class="display-5" "This is a hot sauce alright, and you can quote me on that."
+        p class="lead"
+          i — I forgot this guy's name
+      div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0; background: url(#{asset_path('hotsauce/bg.png')})" 
+
+    div class="bg-dark text-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-dark overflow-hidden card"
+      div class="my-3 py-3 text-light" 
+        h2 class="display-5" "That guy's name was Jerry."
+        p class="lead"
+          i — Wise-ass
+      div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0; background: url(#{asset_path('hotsauce/bg.png')})" 
+
+  .card.text-center.my-5
+    img.border.p-2.mx-auto src=asset_path('hotsauce/cloth.jpg') width=400
+    .card-body
+      button.btn.btn-primary.hotsauce-buy data={sku: ENV['STRIPE_HOTSAUCE_SKU']} Buy now
+      br
+      a.btn.btn-link href=asset_path('hotsauce/nutrition.jpg') Nutritional facts
+      br
+      br
+      br
+      br
+      br
+      br
+      br
+      br
+      br
+      br

config/routes.rb

@@ -35,6 +35,7 @@
   get '/read-only', to: 'pages#read_only_mode', as: :read_only_mode
   get '/privacy',   to: 'pages#privacy_policy', as: :privacy_policy
   get '/partners',  to: 'pages#partners',       as: :partners
+  get '/hot',       to: 'pages#hotsauce',       as: :hotsauce
 
   get '/timers/:timer_id', to: 'timers#show', as: :timer
 

docker-compose-production.yml

@@ -28,6 +28,7 @@ x-environment:
   - SKYLIGHT_AUTHENTICATION
   - SPLITSIO_CLIENT_ID
   - SPLITSIO_CLIENT_SECRET
+  - STRIPE_HOTSAUCE_SKU=sku_GV5cPqEZVXo5rC
   - STRIPE_PLAN_ID_TIER1=plan_FmTrtxmjMQtRZw
   - STRIPE_PLAN_ID_TIER2=plan_FmTrIECG2yldww
   - STRIPE_PLAN_ID_TIER3=plan_GDqBjHfafzS1Hn

docker-compose.yml

@@ -21,6 +21,7 @@ x-server-environment:
   - SITE_TITLE=Splits.io (Local)
   - SPLITSIO_CLIENT_SECRET
   - SPLITSIO_CLIENT_ID
+  - STRIPE_HOTSAUCE_SKU=sku_Gz2u7Mp3bWzYAk
   - STRIPE_PLAN_ID_TIER1=plan_FmRDE979W782Zj
   - STRIPE_PLAN_ID_TIER2=plan_FmRDa9Hhf1lwMQ
   - STRIPE_PLAN_ID_TIER3=plan_GDlCHoXN5YCCUg