Skip to content

Commit

Permalink
Update pricing for Fall 2024
Browse files Browse the repository at this point in the history
  • Loading branch information
@nwalters512
nwalters512 committed Dec 11, 2024
1 parent a117894 commit 48acb7a
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 49 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
110 changes: 61 additions & 49 deletions src/pages/pricing/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,12 @@ 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";
Expand Down Expand Up @@ -78,12 +82,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>
),
},
Expand Down Expand Up @@ -136,16 +134,38 @@ function ContactUsButton({ className }: { className?: string }) {

export default function Pricing() {
const controls = useAnimationControls();
const [termSystem, setTermSystem] = React.useState<
"semester" | "quarter" | "monthly"
>("semester");
const [paymentModel, setPaymentModel] = React.useState<"course" | "student">(
"course"
);
const [showModal, setShowModal] = React.useState(false);

const basicPrice = paymentModel === "course" ? "$6" : "$10";
const premiumPrice = paymentModel === "course" ? "$12" : "$16";
let basicPrice = run(() => {
if (termSystem === "semester") {
return 8;
} else if (termSystem === "quarter") {
return 6;
} else {
return 2;
}
});

let premiumPrice = basicPrice * 2;

if (paymentModel === "student") {
basicPrice += 2;
premiumPrice += 2;
}

const updatePaymentModel = (paymentModel: "course" | "student") => {
setPaymentModel(paymentModel);
controls.start({ scale: 1.3 }).then(() => controls.start({ scale: 1 }));
};

const updatePaymentModel = (model: "course" | "student") => {
setPaymentModel(model);
const updateTermSystem = (termSystem: "semester" | "quarter" | "monthly") => {
setTermSystem(termSystem);
controls.start({ scale: 1.3 }).then(() => controls.start({ scale: 1 }));
};

Expand Down Expand Up @@ -187,46 +207,38 @@ 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}>
<Form.Group controlId="term-system">
<Form.Label>Term system</Form.Label>
<Form.Select
onChange={(e) => {
updateTermSystem(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}>
<Form.Group controlId="payment-model">
<Form.Label>Payment model</Form.Label>
<Form.Select
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>
Expand All @@ -252,7 +264,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" />
Expand All @@ -265,7 +277,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" />
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 48acb7a

Please sign in to comment.