Refactor BlackFriday code

azimuttapp · Nov 25, 2023 · 8fc95ad · 8fc95ad
1 parent 8d3acc0
commit 8fc95ad
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 27 deletions.
diff --git a/backend/lib/azimutt/services/blackfriday_srv.ex b/backend/lib/azimutt/services/blackfriday_srv.ex
@@ -0,0 +1,11 @@
+defmodule Azimutt.Services.BlackFridaySrv do
+  @moduledoc false
+
+  def should_display? do
+    Date.compare(DateTime.utc_now(), ~D[2023-11-30]) == :lt && Azimutt.config(:host) == "azimutt.app"
+  end
+
+  def code do
+    "BLACKFRIDAY2023"
+  end
+end
diff --git a/backend/lib/azimutt_web/templates/layout/_organization_right_bar.html.heex b/backend/lib/azimutt_web/templates/layout/_organization_right_bar.html.heex
@@ -1,27 +1,5 @@
 <div class="min-h-full pr-4 bg-gray-50 sm:pr-6 lg:pr-8 lg:flex-shrink-0 lg:border-l lg:border-gray-200 xl:pr-0 divide-y">
-    <%= if @plan.id == :free && Date.compare(DateTime.utc_now(), ~D[2023-11-30]) == :lt && Azimutt.config(:host) == "azimutt.app" do %>
-        <section class="py-6 pl-6 lg:w-80 mx-auto">
-            <div class="relative isolate overflow-hidden bg-gray-900 px-3 py-4 text-center shadow-2xl rounded-2xl">
-                <h2 class="mt-0 mx-auto text-xl font-bold tracking-tight text-white">BlackFriday Offer!</h2>
-                <p class="mx-auto mt-3 text-gray-300">
-                    Get <span class="underline">50% OFF</span> for one year with code:
-                    <span class="font-extrabold bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-transparent bg-clip-text">BLACKFRIDAY2023</span>
-                </p>
-                <div class="mt-4 flex items-center justify-center gap-x-6">
-                    <a href={Routes.organization_billing_path(@conn, :index, @organization, source: "orga-card")} class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Claim discount!</a>
-                </div>
-                <svg viewBox="0 0 512 512" class="absolute left-1/2 top-1/2 -z-10 h-[32rem] w-[32rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]" aria-hidden="true">
-                    <circle cx="256" cy="256" r="256" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7" />
-                    <defs>
-                        <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
-                            <stop stop-color="#7775D6" />
-                            <stop offset="1" stop-color="#E935C1" />
-                        </radialGradient>
-                    </defs>
-                </svg>
-            </div>
-        </section>
-    <% end %>
+    <%= render AzimuttWeb.PartialsView, "_blackfriday_card.html", conn: @conn, organization: @organization, plan: @plan.id %>
     <%= render AzimuttWeb.PartialsView, "_streak.html", value: @plan.streak %>
     <%= render AzimuttWeb.PartialsView, "_start_checklist.html", conn: @conn, organization: @organization, completed: @current_user.data.start_checklist %>
     <%= render AzimuttWeb.PartialsView, "_activity_feed.html", events: @organization_events %>

diff --git a/backend/lib/azimutt_web/templates/partials/_blackfriday_card.html.heex b/backend/lib/azimutt_web/templates/partials/_blackfriday_card.html.heex
@@ -0,0 +1,23 @@
+<%= if @plan == :free && Azimutt.Services.BlackFridaySrv.should_display? do %>
+    <section class="py-6 pl-6 lg:w-80 mx-auto">
+        <div class="relative isolate overflow-hidden bg-gray-900 px-3 py-4 text-center shadow-2xl rounded-2xl">
+            <h2 class="mt-0 mx-auto text-xl font-bold tracking-tight text-white">BlackFriday Offer!</h2>
+            <p class="mx-auto mt-3 text-gray-300">
+                Get <span class="underline">50% OFF</span> for one year with code:
+                <span class="font-extrabold bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-transparent bg-clip-text"><%= Azimutt.Services.BlackFridaySrv.code %></span>
+            </p>
+            <div class="mt-4 flex items-center justify-center gap-x-6">
+                <a href={Routes.organization_billing_path(@conn, :index, @organization, source: "orga-card")} class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Claim discount!</a>
+            </div>
+            <svg viewBox="0 0 512 512" class="absolute left-1/2 top-1/2 -z-10 h-[32rem] w-[32rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]" aria-hidden="true">
+                <circle cx="256" cy="256" r="256" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7" />
+                <defs>
+                    <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
+                        <stop stop-color="#7775D6" />
+                        <stop offset="1" stop-color="#E935C1" />
+                    </radialGradient>
+                </defs>
+            </svg>
+        </div>
+    </section>
+<% end %>
diff --git a/backend/lib/azimutt_web/templates/partials/_plans-3tier-dark.html.heex b/backend/lib/azimutt_web/templates/partials/_plans-3tier-dark.html.heex
@@ -4,14 +4,16 @@
             <h1 class="mx-auto max-w-4xl text-center text-5xl font-bold tracking-tight text-white"><%= @title %></h1>
             <p class="mx-auto mt-4 max-w-2xl text-center text-lg leading-8 text-white/60"><%= @description %></p>
         </div>
-        <%= if Date.compare(DateTime.utc_now(), ~D[2023-11-30]) == :lt && Azimutt.config(:host) == "azimutt.app" do %>
+        <%= if Azimutt.Services.BlackFridaySrv.should_display? do %>
             <div class="mt-10 -mb-16 rounded-md bg-indigo-50 p-4">
                 <div class="flex">
                     <div class="flex-shrink-0">
                         <Icon.sparkles class="h-5 w-5 text-indigo-400" />
                     </div>
                     <div class="ml-3 flex-1 md:flex md:justify-between">
-                        <p class="text-sm text-indigo-700"><b>BlackFriday Offer!</b> Get <span class="underline">50% OFF</span> for one year with code <span class="font-extrabold">BLACKFRIDAY2023</span></p>
+                        <p class="text-sm text-indigo-700">
+                            <b>BlackFriday Offer!</b> Get <span class="underline">50% OFF</span> for one year with code <span class="font-extrabold"><%= Azimutt.Services.BlackFridaySrv.code %>></span>
+                        </p>
                         <p class="mt-3 text-sm md:ml-6 md:mt-0">
                             <a href="/login?plan=pro" class="whitespace-nowrap font-medium text-indigo-700 hover:text-indigo-600">
                                 Claim discount!

diff --git a/backend/lib/azimutt_web/templates/website/index.html.heex b/backend/lib/azimutt_web/templates/website/index.html.heex
@@ -3,10 +3,10 @@
         <!-- Hero section -->
         <div class="relative">
             <div class="my-32">
-                <%= if Date.compare(DateTime.utc_now(), ~D[2023-11-30]) == :lt && Azimutt.config(:host) == "azimutt.app" do %>
+                <%= if Azimutt.Services.BlackFridaySrv.should_display? do %>
                     <div class="flex justify-center mb-12 -mt-24">
                         <p class="relative rounded-full px-4 py-1.5 text-sm leading-6 text-gray-600 ring-1 ring-inset ring-gray-900/10 hover:ring-gray-900/20">
-                            <span class="hidden md:inline mr-1"><b>✨ BlackFriday Offer!</b> Get <span class="underline">50% OFF</span> for one year with code BLACKFRIDAY2023</span>
+                            <span class="hidden md:inline mr-1"><b>✨ BlackFriday Offer!</b> Get <span class="underline">50% OFF</span> for one year with code <%= Azimutt.Services.BlackFridaySrv.code %></span>
                             <a href="/login?plan=pro" class="font-semibold text-indigo-600"><span class="absolute inset-0" aria-hidden="true"></span> Claim discount! <span aria-hidden="true">→</span></a>
                         </p>
                     </div>