Redesign Squarelet billing pages

config/urls.py

@@ -19,7 +19,7 @@
     OrganizationViewSet as FEOrganizationViewSet,
 )
 from squarelet.organizations.viewsets import ChargeViewSet, OrganizationViewSet
-from squarelet.payments.views import PlanDetailView, PlanRedirectView
+from squarelet.payments.views import PaymentsHubView, PlanDetailView, PlanRedirectView
 from squarelet.users.fe_api.viewsets import UserViewSet as FEUserViewSet
 from squarelet.users.views import (
     LoginView,
@@ -66,6 +66,7 @@ def redirect_erh(request, path=""):
     path("plans/<int:pk>/", PlanRedirectView.as_view(), name="plan_detail_id"),
     path("plans/<slug:slug>/", PlanRedirectView.as_view(), name="plan_detail_slug"),
     path("selectplan/", SelectPlanView.as_view(), name="select_plan"),
+    path("payments/", PaymentsHubView.as_view(), name="payments"),
     # Django Admin, use {% url 'admin:index' %}
     path(settings.ADMIN_URL, admin.site.urls),
     # User management

e2e/organizations.spec.ts

@@ -91,7 +91,7 @@ test.describe("Organization Viewing", () => {
 
     test("does NOT see plan section", async ({ page }) => {
       await page.goto("/organizations/e2e-public-org/");
-      await expect(page.locator("section#plan")).toHaveCount(0);
+      await expect(page.locator("section#billing")).toHaveCount(0);
     });
   });
 
@@ -112,7 +112,7 @@ test.describe("Organization Viewing", () => {
 
     test("does NOT see plan section", async ({ page }) => {
       await page.goto("/organizations/e2e-public-org/");
-      await expect(page.locator("section#plan")).toHaveCount(0);
+      await expect(page.locator("section#billing")).toHaveCount(0);
     });
 
     test("sees only admins in member list", async ({ page }) => {
@@ -141,7 +141,7 @@ test.describe("Organization Viewing", () => {
 
     test("sees plan section", async ({ page }) => {
       await page.goto("/organizations/e2e-public-org/");
-      await expect(page.locator("section#plan")).toBeVisible();
+      await expect(page.locator("section#billing")).toBeVisible();
     });
 
     test("sees all members in user list (not just admins)", async ({
@@ -204,13 +204,13 @@ test.describe("Organization Viewing", () => {
 
     test("sees plan section", async ({ page }) => {
       await page.goto("/organizations/e2e-public-org/");
-      await expect(page.locator("section#plan")).toBeVisible();
+      await expect(page.locator("section#billing")).toBeVisible();
     });
 
-    test("sees button to change plans", async ({ page }) => {
+    test("sees button to upgrade plan", async ({ page }) => {
       await page.goto("/organizations/e2e-public-org/");
       await expect(
-        page.locator('a[href$="/organizations/e2e-public-org/payment/"]'),
+        page.locator('a.btn.premium[href*="/plans/"][href$="-organization/"]'),
       ).toBeVisible();
     });
   });
@@ -253,13 +253,13 @@ test.describe("Organization Viewing", () => {
 
     test("sees plan section", async ({ page }) => {
       await page.goto("/organizations/e2e-public-org/");
-      await expect(page.locator("section#plan")).toBeVisible();
+      await expect(page.locator("section#billing")).toBeVisible();
     });
 
-    test("sees button to change plans", async ({ page }) => {
+    test("sees button to upgrade plan", async ({ page }) => {
       await page.goto("/organizations/e2e-public-org/");
       await expect(
-        page.locator('a[href$="/organizations/e2e-public-org/payment/"]'),
+        page.locator('a.btn.premium[href*="/plans/"][href$="-organization/"]'),
       ).toBeVisible();
     });
 

frontend/css/manage_subscriptions.css

@@ -0,0 +1,96 @@
+.subscription-card {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem 1rem;
+  padding: 1rem;
+}
+
+.subscription-card h3 {
+  font-family: var(--font-sans, "Source Sans Pro");
+  font-size: var(--font-md, 1rem);
+  font-style: normal;
+  font-weight: 600;
+  line-height: var(--font-xl, 1.5rem);
+  margin: 0 0 auto;
+}
+
+.subscription-card .professional {
+  color: var(--blue-4);
+}
+
+.subscription-card .organization {
+  color: var(--purple-4);
+}
+
+.subscription-frequency {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.subscription-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.subscription-group {
+  display: flex;
+  gap: 1rem;
+}
+
+@media (max-width: 28rem) {
+  .subscription-group {
+    flex: 1 0 100%;
+  }
+}
+
+.subscription-detail {
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--gray-5);
+  fill: var(--gray-4);
+}
+
+.subscription-detail .icon {
+  display: inline-flex;
+  align-items: center;
+  width: var(--font-md, 0.75em);
+  height: var(--font-md, 0.75em);
+}
+
+.subscription-detail .emails :not(:last-child):after {
+  content: ",";
+}
+
+.account-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.remove-card-form {
+  margin: 0;
+}
+
+.account-card {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.account-card .icon {
+  display: flex;
+  align-items: center;
+}
+
+.account-card-brand {
+  text-transform: capitalize;
+}

frontend/css/modal_layout.css

@@ -0,0 +1,108 @@
+.modal-layout {
+  box-sizing: border-box;
+}
+
+.modal-layout header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 0.25rem 1rem;
+  margin: 0.5rem 0 2rem;
+}
+
+.modal-layout header .arrow {
+  fill: var(--gray-4, #5c717c);
+  width: var(--font-md, 1rem);
+  height: var(--font-md, 1rem);
+  align-self: center;
+}
+
+.modal-layout main {
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-2, #d8dee2);
+  background: var(--white, #fff);
+  box-shadow: var(--shadow-1);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem 1rem;
+  padding: 1rem;
+}
+
+.modal-layout :is(h1, h2, h3) {
+  margin: 0;
+}
+
+.modal-layout h1 {
+  font-size: var(--font-xl, 24px);
+  font-weight: 400;
+}
+
+.modal-layout h2 {
+  font-size: var(--font-xl, 24px);
+}
+
+.modal-layout h3 {
+  font-size: var(--font-md, 16px);
+}
+
+.modal-layout .info {
+  flex: 0 1 auto;
+  font-size: var(--font-sm);
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--gray-5);
+}
+
+.modal-layout .info .icon {
+  display: inline-flex;
+  align-items: center;
+  width: var(--font-md, 0.75em);
+  height: var(--font-md, 0.75em);
+}
+
+.modal-layout .help {
+  font-weight: var(--font-regular, 400);
+  font-size: var(--font-sm, 0.875em);
+}
+
+.modal-layout .plan.professional {
+  color: var(--blue-4);
+}
+
+.modal-layout .plan.organization {
+  color: var(--purple-4);
+}
+
+.modal-layout p {
+  margin: 0;
+}
+
+.modal-layout form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.modal-layout .buttons {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-top: 0.5rem;
+}
+
+.modal-layout .footer {
+  margin-top: 2rem;
+  font-weight: 600;
+  font-family: var(--font-sans, "Source Sans Pro");
+  font-size: var(--font-md, 16px);
+}
+
+.modal-layout .footer a {
+  color: var(--gray-5, #233944);
+  text-decoration-color: var(--gray-5, #233944);
+}

frontend/css/payments_hub.css

@@ -0,0 +1,5 @@
+header .title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}