From 7210f8c05a149e2cfcd836c97694343050706396 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Tue, 15 Nov 2022 14:36:45 +0100
Subject: [PATCH] PR feedback #3 / fix upgrade modals

---
 .../admin/organization/organization_cards.tsx |  2 +-
 .../admin/organization/upgrade_plan_modal.tsx | 71 +++++++++++++------
 frontend/javascripts/libs/utils.ts            |  2 +-
 3 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/frontend/javascripts/admin/organization/organization_cards.tsx b/frontend/javascripts/admin/organization/organization_cards.tsx
index ad60dce5c21..7e2e2738e67 100644
--- a/frontend/javascripts/admin/organization/organization_cards.tsx
+++ b/frontend/javascripts/admin/organization/organization_cards.tsx
@@ -234,7 +234,7 @@ export function PlanDashboardCard({
         </Col>
         <Col>
           <Card actions={upgradePlanAction}>
-            <Row justify="center" align="middle" style={{ minHeight: 160, padding: "25px 65px" }}>
+            <Row justify="center" align="middle" style={{ minHeight: 160, padding: "25px 35px" }}>
               <h3>{organization.pricingPlan}</h3>
             </Row>
             <Row justify="center">Current Plan</Row>
diff --git a/frontend/javascripts/admin/organization/upgrade_plan_modal.tsx b/frontend/javascripts/admin/organization/upgrade_plan_modal.tsx
index 97c876204d1..b8b95eb2257 100644
--- a/frontend/javascripts/admin/organization/upgrade_plan_modal.tsx
+++ b/frontend/javascripts/admin/organization/upgrade_plan_modal.tsx
@@ -17,6 +17,8 @@ import {
 } from "admin/admin_rest_api";
 import { powerPlanFeatures, teamPlanFeatures } from "./pricing_plan_utils";
 import { PricingPlanEnum } from "./organization_edit_view";
+import renderIndependently from "libs/render_independently";
+import Toast from "libs/toast";
 
 function extendPricingPlan(organization: APIOrganization) {
   const extendedDate = moment(organization.paidUntil).add(1, "year");
@@ -57,24 +59,39 @@ function extendPricingPlan(organization: APIOrganization) {
 }
 
 function upgradeUserQuota() {
+  renderIndependently((destroyCallback) => <UpgradeUserQuotaModal destroy={destroyCallback} />);
+}
+
+function UpgradeUserQuotaModal({ destroy }: { destroy: () => void }) {
   const userInputRef = useRef<HTMLInputElement | null>(null);
 
   function handleUserUpgrade() {
-    const requestedUsers = userInputRef.current?.value;
-    sendUpgradePricingPlanUserEmail(requestedUsers);
+    if (userInputRef.current) {
+      const requestedUsers = parseInt(userInputRef.current.value);
+      sendUpgradePricingPlanUserEmail(requestedUsers);
+      Toast.success("An email with your request has been send to the webKnossos team.");
+    }
+
+    destroy();
   }
 
-  Modal.confirm({
-    title: "Upgrade User Quota",
-    okText: "Request More Users",
-    onOk: handleUserUpgrade,
-    icon: <UserAddOutlined style={{ color: "var(--ant-primary-color)" }} />,
-    width: 1000,
-    content: (
+  return (
+    <Modal
+      title={
+        <>
+          <UserAddOutlined style={{ color: "var(--ant-primary-color)" }} /> Upgrade User Quota
+        </>
+      }
+      okText={"Request More Users"}
+      onOk={handleUserUpgrade}
+      onCancel={destroy}
+      width={800}
+      visible
+    >
       <div
         style={{
           background:
-            "right -50px / 35% no-repeat url(/assets/images/pricing/background_users.jpeg)",
+            "right -40px / 35% no-repeat url(/assets/images/pricing/background_users.jpeg)",
         }}
       >
         <p style={{ marginRight: "30%" }}>
@@ -93,27 +110,39 @@ function upgradeUserQuota() {
           <a href="https://webknossos.org/faq">FAQ</a> for more information.
         </p>
       </div>
-    ),
-  });
+    </Modal>
+  );
 }
 
 function upgradeStorageQuota() {
+  renderIndependently((destroyCallback) => <UpgradeStorageQuotaModal destroy={destroyCallback} />);
+}
+function UpgradeStorageQuotaModal({ destroy }: { destroy: () => void }) {
   const storageInputRef = useRef<HTMLInputElement | null>(null);
 
   const handleStorageUpgrade = () => {
     if (storageInputRef.current) {
       const requestedStorage = parseInt(storageInputRef.current.value);
       sendUpgradePricingPlanStorageEmail(requestedStorage);
+      Toast.success("An email with your request has been send to the webKnossos team.");
     }
+
+    destroy();
   };
 
-  Modal.confirm({
-    title: "Upgrade Storage Space",
-    okText: "Request More Storage Space",
-    onOk: handleStorageUpgrade,
-    icon: <DatabaseOutlined style={{ color: "var(--ant-primary-color)" }} />,
-    width: 1000,
-    content: (
+  return (
+    <Modal
+      title={
+        <>
+          <DatabaseOutlined style={{ color: "var(--ant-primary-color)" }} /> Upgrade Storage Space
+        </>
+      }
+      okText={"Request More Storage Space"}
+      onOk={handleStorageUpgrade}
+      onCancel={destroy}
+      width={800}
+      visible
+    >
       <div
         style={{
           background:
@@ -136,8 +165,8 @@ function upgradeStorageQuota() {
           <a href="https://webknossos.org/faq">FAQ</a> for more information.
         </p>
       </div>
-    ),
-  });
+    </Modal>
+  );
 }
 
 function upgradePricingPlan(organization: APIOrganization) {
diff --git a/frontend/javascripts/libs/utils.ts b/frontend/javascripts/libs/utils.ts
index d8151f4c99c..12a8f86fe03 100644
--- a/frontend/javascripts/libs/utils.ts
+++ b/frontend/javascripts/libs/utils.ts
@@ -1001,7 +1001,7 @@ export function diffObjects(
 }
 
 export function coalesce<T>(obj: { [key: string]: T }, field: T): T | null {
-  if (obj && typeof obj === "object" && (field in obj || field in Object.values(obj))) {
+  if (obj && typeof obj === "object" && (field in obj || Object.values(obj).includes(field))) {
     return field;
   }
   return null;