Add countdown (#7208)

* Add countdown

* Fix CSS

app/controllers/bootcamp_controller.rb

@@ -7,12 +7,20 @@ class BootcampController < ApplicationController
   before_action :setup_pricing!
 
   def index
-    if @bootcamp_data # rubocop:disable Style/GuardClause
+    if @bootcamp_data
       @bootcamp_data.num_views += 1
       @bootcamp_data.last_viewed_at = Time.current
       @bootcamp_data.ppp_country = @country_code_2 if @country_code_2
       @bootcamp_data.save
     end
+
+    difference_in_seconds = Time.utc(2025, 1, 8, 13, 0o0, 0o0) - Time.current
+
+    # Convert to days, hours, minutes, and seconds
+    @days = (difference_in_seconds / (24 * 60 * 60)).to_i
+    @hours = (difference_in_seconds % (24 * 60 * 60) / (60 * 60)).to_i
+    @minutes = (difference_in_seconds % (60 * 60) / 60).to_i
+    @seconds = (difference_in_seconds % 60).to_i
   end
 
   def start_enrolling
@@ -130,7 +138,7 @@ def retrieve_user_bootcamp_data_from_session
   end
 
   def lookup_country_code_from_ip
-    return "IN" unless Rails.env.production?
+    return "MX" unless Rails.env.production?
 
     data = JSON.parse(RestClient.get("https://vpnapi.io/api/#{request.remote_ip}?key=#{Exercism.secrets.vpnapi_key}").body)
     return "VPN" if data.dig("security", "vpn")

app/css/packs/bootcamp.css

@@ -58,7 +58,27 @@ body {
 }
 
 #discount-bar {
+    @apply px-16 py-12;
+    @apply block mx-auto;
+    @apply relative z-[10];
+    @apply rounded-8 mb-20;
+    @apply border-4 border-purple text-purple text-center;
+    @apply text-[19px];
+    @apply bg-lightPurple;
+
+    .flag {
+        @apply inline-flex align-middle;
+        @apply text-[32px] leading-[100%] mr-4;
+    }
+    @apply font-medium;
+    strong {
+        @apply font-semibold;
+    }
+}
+
+#countdown-bar {
     @apply bg-[var(--purple)] text-white text-center;
+    @apply border-b-1 border-[#843eff];
     @apply px-16 py-8;
     @apply block mx-auto;
     @apply relative z-[10];

app/views/bootcamp/index.html.haml

@@ -1,10 +1,12 @@
-- if @has_discount
-  #discount-bar
-    .flag= flag_for_country_code(@country_code_2)
-    - if @hello.present?
-      %strong #{@hello}!
-    Everyone in #{@country_name} gets a
-    %strong.inline #{@discount_percentage}% discount!
+
+#countdown-bar
+  %span.inline-block
+    %strong First live session
+    in
+    #js-countdown-time.inline>= " #{@days} days, #{@hours} hours, #{@minutes} minutes"
+    #js-countdown-seconds{ class: "hidden md:inline" }> , #{@seconds} seconds
+    \.
+  %strong.inline-block Only a few places remaining.
 #nav
   .lg-container.flex.flex-row.gap-8.items-center
     = image_tag "bootcamp/exercism-face-light.svg", class: 'exercism-face'
@@ -425,6 +427,13 @@
       Choose your Journey
     %p.intro.text-balance
       Depending on whether you want to learn web development or some other speciality such as data science, we have two different options.
+    - if @has_discount
+      #discount-bar
+        .flag= flag_for_country_code(@country_code_2)
+        - if @hello.present?
+          %strong #{@hello}!
+        Everyone in #{@country_name} gets a
+        %strong.inline #{@discount_percentage}% discount!
     .grid.md:grid-cols-2.grid-cols-1.gap-40
       .container
         .header
@@ -641,3 +650,35 @@
     is a registered
     %strong not-for-profit organisation.
     %span.whitespace-nowrap © #{Date.current.year} Exercism
+
+:javascript
+  const targetDate = new Date("2025-01-08T13:00:00").getTime();
+  const timeElem = document.getElementById("js-countdown-time")
+  const secondsElem = document.getElementById("js-countdown-seconds")
+
+  function updateCountdown() {
+    const now = new Date().getTime();
+    const distance = targetDate - now;
+
+    if (distance < 0) {
+      timeElem.innerText = "Countdown Finished!";
+      secondsElem.style.display = "none"
+      return;
+    }
+
+    // Calculate time components
+    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+    // Display the countdown
+    timeElem.innerText = ` ${days} days, ${hours} hours, ${minutes} minutes`;
+    secondsElem.innerText = `, ${seconds} seconds`
+  }
+
+  // Update the countdown every second
+  setInterval(updateCountdown, 1000);
+
+  // Initialize the countdown
+  updateCountdown();