Update pricing for Fall 2024

package.json

@@ -13,6 +13,7 @@
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.2.4",
+    "@prairielearn/run": "^1.0.2",
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.11.1",
     "classnames": "^2.3.1",

src/lib/useUpdateEffect.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from "react";
+
+export function useUpdateEffect(effect: () => void, deps: any[]) {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+    } else {
+      return effect();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}

src/pages/pricing/index.tsx

@@ -2,15 +2,20 @@ import React from "react";
 import Head from "next/head";
 import Link from "next/link";
 import Accordion from "react-bootstrap/Accordion";
+import Col from "react-bootstrap/Col";
+import Form from "react-bootstrap/Form";
+import Row from "react-bootstrap/Row";
 import classnames from "classnames";
 import { motion, useAnimationControls } from "framer-motion";
+import { run } from "@prairielearn/run";
 
 import CheckIcon from "../../components/CheckIcon";
 import Stack from "../../components/Stack";
 import { PageBanner } from "../../components/Banner";
 
 import styles from "./index.module.scss";
 import { RequestCourseModal } from "../../components/RequestCourseModal";
+import { useUpdateEffect } from "../../lib/useUpdateEffect";
 
 const FEATURES = [
   {
@@ -78,12 +83,6 @@ const FAQS = [
           Students will be responsible for paying the PrairieLearn fee before
           they are able to access any of your course's content.
         </p>
-        <p>
-          This pricing model is currently in development, and it is expected to
-          be available by Fall 2023. If your course would like to be any early
-          adopter of this payment model, please{" "}
-          <Link href="/contact">contact us</Link>.
-        </p>
       </React.Fragment>
     ),
   },
@@ -134,21 +133,55 @@ function ContactUsButton({ className }: { className?: string }) {
   );
 }
 
+type AcademicCalendar = "semester" | "quarter" | "monthly";
+type PaymentModel = "course" | "student";
+
 export default function Pricing() {
   const controls = useAnimationControls();
-  const [paymentModel, setPaymentModel] = React.useState<"course" | "student">(
-    "course"
-  );
+
+  const [academicCalendar, setAcademicCalendar] =
+    React.useState<AcademicCalendar>("semester");
+
+  const [paymentModel, setPaymentModel] =
+    React.useState<PaymentModel>("course");
+
   const [showModal, setShowModal] = React.useState(false);
 
-  const basicPrice = paymentModel === "course" ? "$6" : "$10";
-  const premiumPrice = paymentModel === "course" ? "$12" : "$16";
+  let basicPrice = run(() => {
+    if (academicCalendar === "semester") {
+      return 8;
+    } else if (academicCalendar === "quarter") {
+      return 6;
+    } else {
+      return 2;
+    }
+  });
 
-  const updatePaymentModel = (model: "course" | "student") => {
-    setPaymentModel(model);
-    controls.start({ scale: 1.3 }).then(() => controls.start({ scale: 1 }));
+  let premiumPrice = basicPrice * 2;
+
+  // We don't currently have the ability to set the price for students based
+  // on the length of the term, so we just hardcode a single fixed price that
+  // assumes a semester-length term.
+  if (paymentModel === "student") {
+    basicPrice = 10;
+    premiumPrice = 18;
+  }
+
+  const updatePaymentModel = (paymentModel: "course" | "student") => {
+    setPaymentModel(paymentModel);
+  };
+
+  const updateAcademicCalendar = (
+    academicCalendar: "semester" | "quarter" | "monthly"
+  ) => {
+    setAcademicCalendar(academicCalendar);
   };
 
+  // Only animate the price change if the price actually changes.
+  useUpdateEffect(() => {
+    controls.start({ scale: 1.3 }).then(() => controls.start({ scale: 1 }));
+  }, [premiumPrice, basicPrice]);
+
   function RequestCourseButton({
     text,
     className,
@@ -187,46 +220,40 @@ export default function Pricing() {
       <div className="container my-5">
         <Stack>
           <div className="container">
-            <div className="d-flex flex-row justify-content-center">
-              <div className="btn-group">
-                <button
-                  type="button"
-                  className={classnames("btn btn-outline-primary", {
-                    active: paymentModel === "course",
-                  })}
-                  onClick={() => updatePaymentModel("course")}
-                >
-                  <span
-                    className={classnames("me-2", {
-                      "d-none": paymentModel !== "course",
-                    })}
+            <Row>
+              <Col xs={12} md={6} className="mb-3">
+                <Form.Group controlId="academic-calendar">
+                  <Form.Label>Academic calendar</Form.Label>
+                  <Form.Select
+                    value={academicCalendar}
+                    onChange={(e) => {
+                      updateAcademicCalendar(e.currentTarget.value as any);
+                    }}
                   >
-                    ✓
-                  </span>
-                  Course pays
-                </button>
-                <button
-                  type="button"
-                  className={classnames(
-                    "btn btn-outline-primary d-flex flex-row align-items-center",
-                    {
-                      active: paymentModel === "student",
-                    }
-                  )}
-                  onClick={() => updatePaymentModel("student")}
-                >
-                  <span
-                    className={classnames("me-2", {
-                      "d-none": paymentModel !== "student",
-                    })}
+                    <option value="semester">Semester</option>
+                    <option value="quarter">Quarter</option>
+                    <option value="monthly">Monthly</option>
+                  </Form.Select>
+                </Form.Group>
+              </Col>
+
+              <Col xs={12} md={6} className="mb-3">
+                <Form.Group controlId="payment-model">
+                  <Form.Label>Payment model</Form.Label>
+                  <Form.Select
+                    value={paymentModel}
+                    onChange={(e) => {
+                      updatePaymentModel(e.currentTarget.value as any);
+                    }}
                   >
-                    ✓
-                  </span>
-                  Student pays
-                </button>
-              </div>
-            </div>
+                    <option value="course">Institution or course pays</option>
+                    <option value="student">Student pays</option>
+                  </Form.Select>
+                </Form.Group>
+              </Col>
+            </Row>
           </div>
+
           <div className="table-responsive">
             <table className="table table-striped">
               <thead>
@@ -252,7 +279,7 @@ export default function Pricing() {
                         animate={controls}
                         className="d-inline-block"
                       >
-                        {basicPrice}
+                        {"$" + basicPrice}
                       </motion.strong>{" "}
                       <span className="text-muted">/ student / course</span>
                       <RequestCourseButton text="Get started" />
@@ -265,7 +292,7 @@ export default function Pricing() {
                         animate={controls}
                         className="d-inline-block"
                       >
-                        {premiumPrice}
+                        {"$" + premiumPrice}
                       </motion.strong>{" "}
                       <span className="text-muted">/ student / course</span>
                       <RequestCourseButton text="Get started" />

yarn.lock

@@ -241,6 +241,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
   integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
+"@prairielearn/run@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@prairielearn/run/-/run-1.0.2.tgz#86d867d74a09d1e9b32a39d73b5ded5d1b11bf55"
+  integrity sha512-V8H90u3FSNTNu26oxyTx1q3PvyLge/5nbCwZQomxXnpAsfp/dV+W344M1dIk54LKRC4otbLW3QjrErK3/Uqx0Q==
+
 "@react-aria/ssr@^3.2.0":
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.4.1.tgz#79e8bb621487e8f52890c917d3c734f448ba95e7"