feat: enable subscription via yearly plan

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',

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'

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",

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"
     }
   },
 

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",

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",

apps/dashboard/src/lib/utils/translations/hi.json

@@ -1069,7 +1069,9 @@
       "plan": "आपकी योजना हमारे द्वारा जारी की जाने वाली सभी भविष्य की सुविधाओं तक पहुंच सहित शानदार सुविधाओं और लाभों के साथ आती है।",
       "close": "बंद करना",
       "learn": "और अधिक जानें",
-      "month": "महीना"
+      "month": "महीना",
+      "monthly": "महीने के",
+      "annually": "हर साल"
     },
     "plan_names": {
       "free": "मुक्त",

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",

apps/dashboard/src/lib/utils/translations/ru.json

@@ -1069,7 +1069,9 @@
       "plan": "Ваш план включает в себя интересные привилегии и преимущества, включая доступ ко всем будущим функциям, которые мы выпустим.",
       "close": "Закрывать",
       "learn": "Узнать больше",
-      "month": "месяц"
+      "month": "месяц",
+      "monthly": "Ежемесячно",
+      "annually": "Ежегодно"
     },
     "plan_names": {
       "free": "Бесплатно",

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í",

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": {