Update organization profiles with staff approval

frontend/css/gps.css

@@ -456,8 +456,27 @@ strong {
   font-family: "Source Sans Pro";
 }
 
+.card {
+  padding: 2rem;
+  box-sizing: border-box;
+  border-radius: var(--radius-4);
+  box-shadow: var(--shadow-1);
+  background: var(--white);
+  color: var(--gray-5);
+  margin: 0 auto;
+}
+
 /* Form Fields */
 
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-self: stretch;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .field {
   display: flex;
   flex-direction: column;
@@ -478,14 +497,27 @@ strong {
   font-weight: 600;
 }
 
+.field-label-inline {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  flex: 1 0 0;
+
+  color: var(--black, #0c1e27);
+  font-feature-settings: "ss04" on;
+  font-family: var(--font-sans, "Source Sans Pro");
+  font-weight: 600;
+}
+
 .field-required {
   color: var(--orange-3);
   font-size: var(--font-sm);
 }
 
 .field input[type="text"],
 .field input[type="email"],
-.field input[type="password"] {
+.field input[type="password"],
+.field input[type="url"] {
   display: flex;
   width: 100%;
   box-sizing: border-box;
@@ -510,20 +542,48 @@ strong {
 }
 
 .field textarea {
+  display: flex;
+  padding: 0.375rem 0.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+
   border-radius: 0.5rem;
   border: 1px solid var(--gray-3, #99a8b3);
   background: var(--white, #fff);
   box-shadow: 0 2px 0 0 var(--gray-2, #d8dee2) inset;
+}
+
+.field select {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
   padding: 0.375rem 0.75rem;
-  color: var(--gray-5, #233944);
-  font-feature-settings: "ss04" on;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+
+  appearance: none;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-3, #99a8b3);
+  background: var(--white, #fff);
+  box-shadow: 0 2px 0 0 var(--gray-2, #d8dee2) inset;
   font-family: "Source Sans Pro";
-  font-size: var(--font-md, 1rem);
-  font-style: normal;
-  font-weight: 400;
+  font-size: 1rem;
   line-height: normal;
+  cursor: pointer;
+
+  /* Add dropdown arrow */
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235c717c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2.5rem;
+}
+
+.field select:disabled {
+  color: var(--gray-4);
+  cursor: not-allowed;
 }
 
 .field .help {
@@ -545,6 +605,36 @@ strong {
   font-weight: 400;
 }
 
+/* Fieldsets */
+
+.fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem 2rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-2, #d8dee2);
+  background: transparent;
+}
+
+.fieldset-legend {
+  font-family: var(--font-sans, "Source Sans Pro");
+  font-size: var(--font-md, 1rem);
+  font-feature-settings: "ss04" on;
+  font-weight: 600;
+  color: currentColor;
+  background: transparent;
+  border: none;
+  padding: 0 1rem 0.5rem;
+  margin-left: -3rem;
+}
+
+.fieldset-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
 /* Font Styles */
 .caption {
   margin: 0;

frontend/css/main.css

@@ -1703,12 +1703,12 @@ a.service-provider:focus {
 
 .card {
   padding: 2rem;
+  box-sizing: border-box;
   border-radius: var(--radius-4);
   box-shadow: var(--shadow-1);
   background: var(--white);
   color: var(--gray-5);
   margin: 0 auto;
-  max-width: 36rem;
 }
 
 .icon {

frontend/css/organization_update.css

@@ -0,0 +1,88 @@
+/* css for /organizations/<slug>/update/ */
+
+#organization-form {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  max-width: 60rem;
+  margin: 2rem auto;
+  align-items: flex-start;
+  gap: 0 1.5rem;
+  align-self: stretch;
+  justify-content: center;
+}
+
+#organization-form .sidebar {
+  display: flex;
+  flex: 1 1 8rem;
+  padding: 0.75rem;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    align-self: stretch;
+    position: sticky;
+    top: 2rem;
+  }
+
+  h1,
+  h2 {
+    margin: 0;
+  }
+  h1 {
+    margin-top: 2rem;
+  }
+  h2 {
+    font-weight: 400;
+  }
+}
+
+#organization-form .content {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 37.5rem;
+  width: 100%;
+  padding: 0.75rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2rem;
+
+  section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    align-self: stretch;
+  }
+
+  header .title {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .title h2,
+  .title p {
+    margin: 0;
+  }
+}
+
+#pending-requests {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  dl {
+    width: 100%;
+  }
+  dt {
+    font-weight: bold;
+  }
+}

frontend/views/organization_update.ts

@@ -0,0 +1 @@
+import "@/css/organization_update.css";

squarelet/conftest.py

@@ -17,6 +17,7 @@
     OrganizationPlanFactory,
     PlanFactory,
     ProfessionalPlanFactory,
+    ProfileChangeRequestFactory,
     SubscriptionFactory,
 )
 from squarelet.users.tests.factories import UserFactory
@@ -30,6 +31,7 @@
 register(OrganizationFactory)
 register(OrganizationPlanFactory)
 register(ProfessionalPlanFactory)
+register(ProfileChangeRequestFactory)
 register(SubscriptionFactory)
 register(CustomerFactory)
 

squarelet/core/templatetags/tests/test_airtable.py

@@ -13,7 +13,7 @@
     airtable_form_url,
     airtable_verification_url,
 )
-from squarelet.organizations.models.organization import OrganizationUrl
+from squarelet.organizations.models.organization_metadata import OrganizationUrl
 
 
 class TestAirtableFormUrl:

squarelet/organizations/admin.py

@@ -34,6 +34,7 @@
     OrganizationType,
     OrganizationUrl,
     Plan,
+    ProfileChangeRequest,
     ReceiptEmail,
     Subscription,
 )
@@ -208,6 +209,11 @@ def queryset(self, request, queryset):
         return queryset
 
 
+class ProfileChangeRequestInline(admin.StackedInline):
+    model = ProfileChangeRequest
+    extra = 0
+
+
 @admin.register(Organization)
 class OrganizationAdmin(VersionAdmin):
     def export_organizations_as_csv(self, request, queryset):
@@ -273,6 +279,7 @@ def export_organizations_as_csv(self, request, queryset):
         "created_at",
         "updated_at",
         "avatar",
+        "about",
         "individual",
         "private",
         "verified_journalist",
@@ -316,6 +323,7 @@ def export_organizations_as_csv(self, request, queryset):
         MembershipInline,
         ReceiptEmailInline,
         InvitationInline,
+        ProfileChangeRequestInline,
     )
 
     def get_queryset(self, request):

squarelet/organizations/choices.py

@@ -88,3 +88,9 @@ class ChangeLogReason(DjangoChoices):
     ("SK", _("Saskatchewan")),
     ("YT", _("Yukon")),
 )
+
+CHANGE_STATUS_CHOICES = (
+    ("pending", _("Pending")),
+    ("accepted", _("Accepted")),
+    ("rejected", _("Rejected")),
+)