Add a create subscription page

This allows us to make new subscriptions from the UI instead of having
to curl the api with the correct fields filled out.

frontend/containers/CreateSubscription.js

@@ -0,0 +1,68 @@
+import axios from "axios";
+import React from "react";
+
+import { prepareSubscriptionPayload } from "../lib/subscription";
+import EditSubscription from "../components/EditSubscription";
+import DisplayErrorMessage from "../components/DisplayErrors";
+
+const DEFAULT_OPTIONS = {
+  location: "Online",
+  name: "",
+  office: "Remote",
+  rule_logic: null,
+  rules: [],
+  size: 2,
+  time_slots: [],
+  timezone: "America/Los_Angeles",
+  default_auto_opt_in: false,
+};
+
+function CreateSubscription() {
+  const [subscription, setSubscription] = React.useState({
+    ...DEFAULT_OPTIONS,
+  });
+  const [saving, setSaving] = React.useState(false);
+  const [errors, setErrors] = React.useState(null);
+
+  const createSubscription = () => {
+    setSaving(true);
+    const payloadSubscription = prepareSubscriptionPayload(subscription);
+
+    setSaving(false);
+    axios
+      .post(`/v1/subscriptions/`, payloadSubscription)
+      .then(() => {
+        setSaving(false);
+        setErrors(null);
+        window.location.assign("/admin/subscriptions");
+      })
+      .catch((error) => {
+        setSaving(false);
+        if (error.response) {
+          setErrors(error.response.data);
+        } else {
+          setErrors([{ msg: "Error sending POST request to server" }]);
+        }
+      });
+  };
+
+  return (
+    <div className="container mt-2">
+      {errors && <DisplayErrorMessage errors={errors} />}
+      <EditSubscription
+        subscription={subscription}
+        setSubscription={setSubscription}
+      />
+      <button
+        type="button"
+        className="btn btn-primary mt-2"
+        onClick={createSubscription}
+        disabled={saving}
+      >
+        Create
+      </button>
+    </div>
+  );
+}
+
+export default CreateSubscription;

frontend/containers/SubscriptionsList.js

@@ -28,6 +28,9 @@ function SubscriptionList() {
   return (
     <div className="container-fluid">
       <h1>Subscriptions</h1>
+      <a className="btn btn-primary my-2" href="/admin/subscriptions/create">
+        New Subscription
+      </a>
       <table className="table table-striped">
         <thead>
           <tr>

frontend/index.js

@@ -10,6 +10,7 @@ import MeetingRequest from "./containers/MeetingRequest";
 import User from "./containers/User";
 import SubscriptionsList from "./containers/SubscriptionsList";
 import Subscription from "./containers/Subscription";
+import CreateSubscription from "./containers/CreateSubscription";
 import Subscribe from "./containers/Subscribe";
 
 const router = createBrowserRouter([
@@ -33,6 +34,10 @@ const router = createBrowserRouter([
     path: "/subscribe/:id",
     element: <Subscribe />,
   },
+  {
+    path: "/admin/subscriptions/create",
+    element: <CreateSubscription />,
+  },
   {
     path: "/admin/subscriptions/:id",
     element: <Subscription />,

frontend/webapp.js

@@ -69,6 +69,10 @@ app.get("/admin/subscriptions", (req, res) => {
   res.sendFile(`${__dirname}/index.html`);
 });
 
+app.get("/admin/subscriptions/create", (req, res) => {
+  res.sendFile(`${__dirname}/index.html`);
+});
+
 app.get("/admin/subscriptions/:id", (req, res) => {
   res.sendFile(`${__dirname}/index.html`);
 });