From 8cef8ae65190fe241b8324f6a019aa3ee6b89e68 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Tue, 30 Jul 2024 21:29:27 +0100
Subject: [PATCH] feat: enable subscription via yearly plan

---
 .../src/lib/components/Org/Settings/store.ts  |  2 +-
 .../src/lib/components/Upgrade/Modal.svelte   | 35 ++++++++++++++++---
 .../src/lib/utils/translations/de.json        |  4 ++-
 .../src/lib/utils/translations/en.json        |  8 +++--
 .../src/lib/utils/translations/es.json        |  4 ++-
 .../src/lib/utils/translations/fr.json        |  4 ++-
 .../src/lib/utils/translations/hi.json        |  4 ++-
 .../src/lib/utils/translations/pt.json        |  4 ++-
 .../src/lib/utils/translations/ru.json        |  4 ++-
 .../src/lib/utils/translations/vi.json        |  4 ++-
 packages/shared/src/plans/data.json           |  3 +-
 11 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/apps/dashboard/src/lib/components/Org/Settings/store.ts b/apps/dashboard/src/lib/components/Org/Settings/store.ts
index 9714b8df..1bf2484e 100644
--- a/apps/dashboard/src/lib/components/Org/Settings/store.ts
+++ b/apps/dashboard/src/lib/components/Org/Settings/store.ts
@@ -64,7 +64,7 @@ export interface OrgLandingPageJson {
   };
 }
 
-export let landingPageSettings: Writable<OrgLandingPageJson> = writable({
+export const landingPageSettings: Writable<OrgLandingPageJson> = writable({
   header: {
     title: 'Web Development Courses for',
     titleHighlight: 'Everyone',
diff --git a/apps/dashboard/src/lib/components/Upgrade/Modal.svelte b/apps/dashboard/src/lib/components/Upgrade/Modal.svelte
index 45c5238c..b4206b73 100644
--- a/apps/dashboard/src/lib/components/Upgrade/Modal.svelte
+++ b/apps/dashboard/src/lib/components/Upgrade/Modal.svelte
@@ -26,6 +26,7 @@
   let orgPlanChannel: RealtimeChannel;
   let open = false;
   let upgraded = false;
+  let isYearlyPlan = false;
 
   async function handleClick(plan, planName: string) {
     if (plan.CTA.IS_DISABLED || !$profile.id) {
@@ -41,7 +42,7 @@
 
     try {
       const { checkoutURL } = await subscribeToProduct({
-        productId: plan.CTA.PRODUCT_ID,
+        productId: isYearlyPlan ? plan.CTA.PRODUCT_ID_YEARLY : plan.CTA.PRODUCT_ID,
         email: $profile.email,
         name: $profile.fullname,
         triggeredBy: $currentOrg.memberId,
@@ -89,6 +90,9 @@
   function onLearnMore() {
     window.open('https://classroomio.com/blog/early-adopter', '_blank');
   }
+  function toggleIsYearlyPlan() {
+    isYearlyPlan = !isYearlyPlan;
+  }
 
   onMount(() => {
     orgPlanChannel = supabase
@@ -124,6 +128,7 @@
   width="w-4/5"
   maxWidth={upgraded ? 'max-w-[600px]' : undefined}
   modalHeading={$t('pricing.modal.heading')}
+  containerClass="pt-4"
 >
   {#if upgraded}
     <div class="flex flex-col items-center justify-center mb-4 w-full relative">
@@ -147,6 +152,29 @@
     </div>
   {:else}
     <div class="flex flex-col items-center justify-center">
+      <div class="relative mb-2 flex items-center rounded-[30px] border-[2px] p-[2px] lg:scale-100">
+        <button
+          style="background-color: {isYearlyPlan ? 'initial' : '#1D4EE2'}; color: {isYearlyPlan
+            ? '#5e636b'
+            : '#fff'}"
+          class="rounded-[30px] bg-blue-700 px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
+          on:click={toggleIsYearlyPlan}>{$t('pricing.modal.monthly')}</button
+        >
+        <button
+          style="background-color: {isYearlyPlan ? '#1D4EE2' : ''}; color: {isYearlyPlan
+            ? '#fff'
+            : '#5e636b'}"
+          class="relative rounded-[30px] px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
+          on:click={toggleIsYearlyPlan}
+        >
+          {$t('pricing.modal.annually')}
+          <div
+            class="absolute right-[-40%] -top-4 scale-[90%] rounded-full bg-[#006600] px-1.5 py-1 text-[0.7rem] text-white"
+          >
+            Save 2 months
+          </div>
+        </button>
+      </div>
       <div class="isolate grid grid-cols-1 gap-3 lg:grid-cols-3">
         {#each planNames as planName}
           <div
@@ -167,10 +195,7 @@
                 : 'text-black'} dark:text-gray-300"
             >
               {PLANS[planName].PRICE.CURRENCY}
-              {PLANS[planName].PRICE.MONTHLY}
-              {#if !PLANS[planName].PRICE.IS_PREMIUM}
-                /month
-              {/if}
+              {isYearlyPlan ? PLANS[planName].PRICE.YEARLY : PLANS[planName].PRICE.MONTHLY}
             </p>
             <p
               class=" mt-4 text-sm font-light leading-6 {planName === 'EARLY_ADOPTER'
diff --git a/apps/dashboard/src/lib/utils/translations/de.json b/apps/dashboard/src/lib/utils/translations/de.json
index 05143a8c..46c7f4f3 100644
--- a/apps/dashboard/src/lib/utils/translations/de.json
+++ b/apps/dashboard/src/lib/utils/translations/de.json
@@ -1069,7 +1069,9 @@
       "plan": "Ihr Plan beinhaltet coole Vergünstigungen und Vorteile, einschließlich Zugriff auf alle zukünftigen Funktionen, die wir veröffentlichen.",
       "close": "Schließen",
       "learn": "Erfahren Sie mehr",
-      "month": "Monat"
+      "month": "Monat",
+      "monthly": "Monatlich",
+      "annually": "Jährlich"
     },
     "plan_names": {
       "free": "Frei",
diff --git a/apps/dashboard/src/lib/utils/translations/en.json b/apps/dashboard/src/lib/utils/translations/en.json
index ee237df1..4626764c 100644
--- a/apps/dashboard/src/lib/utils/translations/en.json
+++ b/apps/dashboard/src/lib/utils/translations/en.json
@@ -219,7 +219,9 @@
       "plan": "Your plan comes with cool perks and benefits including access to all future features we release.",
       "close": "Close",
       "learn": "Learn more",
-      "month": "month"
+      "month": "month",
+      "monthly": "Monthly",
+      "annually": "Annually"
     }
   },
 
@@ -1336,8 +1338,8 @@
   "validations": {
     "user_profile": {
       "email": "Invalid email address",
-      "username":"Username cannot be empty",
-      "fullname":"Name should be minimum of 5 characters"
+      "username": "Username cannot be empty",
+      "fullname": "Name should be minimum of 5 characters"
     },
     "organization_name": {
       "min_char": "Organization must contain 5 or more characters",
diff --git a/apps/dashboard/src/lib/utils/translations/es.json b/apps/dashboard/src/lib/utils/translations/es.json
index 6a7cc7a6..3dc950bc 100644
--- a/apps/dashboard/src/lib/utils/translations/es.json
+++ b/apps/dashboard/src/lib/utils/translations/es.json
@@ -1069,7 +1069,9 @@
       "plan": "Su plan viene con ventajas y beneficios interesantes, incluido el acceso a todas las funciones futuras que lancemos.",
       "close": "Cerca",
       "learn": "Aprende más",
-      "month": "mes"
+      "month": "mes",
+      "monthly": "Mensual",
+      "annually": "Anualmente"
     },
     "plan_names": {
       "free": "Gratis",
diff --git a/apps/dashboard/src/lib/utils/translations/fr.json b/apps/dashboard/src/lib/utils/translations/fr.json
index 0b729220..c2940983 100644
--- a/apps/dashboard/src/lib/utils/translations/fr.json
+++ b/apps/dashboard/src/lib/utils/translations/fr.json
@@ -1069,7 +1069,9 @@
       "plan": "Votre forfait s'accompagne d'avantages et d'avantages intéressants, notamment l'accès à toutes les futures fonctionnalités que nous publions.",
       "close": "Fermer",
       "learn": "Apprendre encore plus",
-      "month": "mois"
+      "month": "mois",
+      "monthly": "Mensuel",
+      "annually": "Annuellement"
     },
     "plan_names": {
       "free": "Gratuit",
diff --git a/apps/dashboard/src/lib/utils/translations/hi.json b/apps/dashboard/src/lib/utils/translations/hi.json
index 078ef198..93486eed 100644
--- a/apps/dashboard/src/lib/utils/translations/hi.json
+++ b/apps/dashboard/src/lib/utils/translations/hi.json
@@ -1069,7 +1069,9 @@
       "plan": "आपकी योजना हमारे द्वारा जारी की जाने वाली सभी भविष्य की सुविधाओं तक पहुंच सहित शानदार सुविधाओं और लाभों के साथ आती है।",
       "close": "बंद करना",
       "learn": "और अधिक जानें",
-      "month": "महीना"
+      "month": "महीना",
+      "monthly": "महीने के",
+      "annually": "हर साल"
     },
     "plan_names": {
       "free": "मुक्त",
diff --git a/apps/dashboard/src/lib/utils/translations/pt.json b/apps/dashboard/src/lib/utils/translations/pt.json
index b646e960..d2e30921 100644
--- a/apps/dashboard/src/lib/utils/translations/pt.json
+++ b/apps/dashboard/src/lib/utils/translations/pt.json
@@ -1069,7 +1069,9 @@
       "plan": "Seu plano vem com vantagens e benefícios interessantes, incluindo acesso a todos os recursos futuros que lançaremos.",
       "close": "Fechar",
       "learn": "Saber mais",
-      "month": "mês"
+      "month": "mês",
+      "monthly": "Por mês",
+      "annually": "Anualmente"
     },
     "plan_names": {
       "free": "Livre",
diff --git a/apps/dashboard/src/lib/utils/translations/ru.json b/apps/dashboard/src/lib/utils/translations/ru.json
index c8b384da..470a71d0 100644
--- a/apps/dashboard/src/lib/utils/translations/ru.json
+++ b/apps/dashboard/src/lib/utils/translations/ru.json
@@ -1069,7 +1069,9 @@
       "plan": "Ваш план включает в себя интересные привилегии и преимущества, включая доступ ко всем будущим функциям, которые мы выпустим.",
       "close": "Закрывать",
       "learn": "Узнать больше",
-      "month": "месяц"
+      "month": "месяц",
+      "monthly": "Ежемесячно",
+      "annually": "Ежегодно"
     },
     "plan_names": {
       "free": "Бесплатно",
diff --git a/apps/dashboard/src/lib/utils/translations/vi.json b/apps/dashboard/src/lib/utils/translations/vi.json
index a518831f..611d20b8 100644
--- a/apps/dashboard/src/lib/utils/translations/vi.json
+++ b/apps/dashboard/src/lib/utils/translations/vi.json
@@ -1069,7 +1069,9 @@
       "plan": "Gói của bạn đi kèm với các đặc quyền và lợi ích thú vị, bao gồm quyền truy cập vào tất cả các tính năng trong tương lai mà chúng tôi sẽ phát hành.",
       "close": "Đóng",
       "learn": "Tìm hiểu thêm",
-      "month": "tháng"
+      "month": "tháng",
+      "monthly": "hàng tháng",
+      "annually": "Hàng năm"
     },
     "plan_names": {
       "free": "Miễn phí",
diff --git a/packages/shared/src/plans/data.json b/packages/shared/src/plans/data.json
index 83cf30b5..4e2831e9 100644
--- a/packages/shared/src/plans/data.json
+++ b/packages/shared/src/plans/data.json
@@ -47,7 +47,8 @@
       "DASHBOARD_LABEL": "Support us 😍",
       "DASHBOARD_LINK": "",
       "IS_DISABLED": false,
-      "PRODUCT_ID": "331121"
+      "PRODUCT_ID": "331121",
+      "PRODUCT_ID_YEARLY": "331122"
     }
   },
   "ENTERPRISE": {