web: add separate plan for education discount

apps/web/src/dialogs/buy-dialog/buy-dialog.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Text, Flex, Button } from "@theme-ui/components";
+import { Text, Flex, Button, Link } from "@theme-ui/components";
 import { Cross, Check, Loading } from "../../components/icons";
 import { useStore as useUserStore } from "../../stores/user-store";
 import { useStore as useThemeStore } from "../../stores/theme-store";
@@ -461,7 +461,21 @@ function SelectedPlan(props: SelectedPlanProps) {
       >
         {metadata.title}
       </Text>
-
+      {plan.period === "education" && (
+        <Link
+          href="https://notesnook.com/education"
+          target="_blank"
+          variant="text.body"
+          mt={1}
+          sx={{
+            textDecorationColor: "primary",
+            color: "primary",
+            textAlign: "center"
+          }}
+        >
+          Apply here to get your Education discount code.
+        </Link>
+      )}
       {pricingInfo ? (
         <>
           <Text data-test-id={`checkout-plan-country-${pricingInfo.country}`} />
@@ -602,7 +616,9 @@ function CheckoutPricing(props: CheckoutPricingProps) {
             {currentTotal}
           </Text>
           <Text as="div" sx={{ fontSize: "body", color: "paragraph" }}>
-            {isDiscounted
+            {period === "education" && discount.amount > 0
+              ? "for one year"
+              : isDiscounted
               ? "forever"
               : `first ${getFullPeriod(period)} then ${recurringTotal}`}
           </Text>

apps/web/src/dialogs/buy-dialog/plan-list.tsx

@@ -141,7 +141,11 @@ function RecurringPricing(props: RecurringPricingProps) {
 }
 
 export function formatPeriod(period: Period) {
-  return period === "monthly" ? "/mo" : period === "yearly" ? "/yr" : "";
+  return period === "monthly"
+    ? "/mo"
+    : period === "yearly" || period === "education"
+    ? "/yr"
+    : "";
 }
 
 export function getFullPeriod(period: Period) {

apps/web/src/dialogs/buy-dialog/plans.ts

@@ -26,6 +26,15 @@ type PlanMetadata = {
   subtitle: string;
 };
 
+export const EDUCATION_PLAN: Plan = {
+  id: import.meta.env.DEV || IS_TESTING ? "50305" : "658759",
+  period: "education",
+  country: "US",
+  currency: "USD",
+  discount: 0,
+  price: { gross: 9.99, net: 0, tax: 0 }
+};
+
 export const DEFAULT_PLANS: Plan[] = [
   {
     period: "monthly",
@@ -42,12 +51,17 @@ export const DEFAULT_PLANS: Plan[] = [
     discount: 0,
     id: import.meta.env.DEV || IS_TESTING ? "50305" : "658759",
     price: { gross: 49.99, net: 0, tax: 0 }
-  }
+  },
+  EDUCATION_PLAN
 ];
 
 export const PLAN_METADATA: Record<Period, PlanMetadata> = {
   monthly: { title: "Monthly", subtitle: `Pay once a month.` },
-  yearly: { title: "Yearly", subtitle: `Pay once a year.` }
+  yearly: { title: "Yearly", subtitle: `Pay once a year.` },
+  education: {
+    title: "Education",
+    subtitle: "Special offer for students & teachers."
+  }
 };
 
 let CACHED_PLANS: Plan[];
@@ -59,6 +73,7 @@ export async function getPlans(): Promise<Plan[] | null> {
   const response = await fetch(url);
   if (!response.ok) return null;
   const plans = (await response.json()) as Plan[];
+  plans.push(EDUCATION_PLAN);
   CACHED_PLANS = plans;
   return plans;
 }

apps/web/src/dialogs/buy-dialog/types.ts

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-export type Period = "monthly" | "yearly";
+export type Period = "monthly" | "yearly" | "education";
 
 export enum PaddleEvents {
   /**  Checkout has been initialized on the page  **/