From 92211ef929a83068197e55678b6b10ced9ffd262 Mon Sep 17 00:00:00 2001
From: Chad Burt <chad@underbluewaters.net>
Date: Thu, 26 Sep 2024 13:38:00 -0700
Subject: [PATCH] WIP

---
 packages/client/src/admin/Settings.tsx        | 260 +++++++++++-------
 .../src/queries/UpdateProjectSettings.graphql |   3 +
 2 files changed, 165 insertions(+), 98 deletions(-)

diff --git a/packages/client/src/admin/Settings.tsx b/packages/client/src/admin/Settings.tsx
index bb8a84cd..3f8a54fb 100644
--- a/packages/client/src/admin/Settings.tsx
+++ b/packages/client/src/admin/Settings.tsx
@@ -52,6 +52,7 @@ import getSlug from "../getSlug";
 import { TranslateIcon } from "@heroicons/react/outline";
 import TranslatedPropControl from "../components/TranslatedPropControl";
 import bytes from "bytes";
+import { Pencil1Icon, Pencil2Icon } from "@radix-ui/react-icons";
 
 export default function Settings() {
   const { data } = useCurrentProjectMetadata();
@@ -76,7 +77,14 @@ export default function Settings() {
           <AccessControlSettings />
         </div>
         <div className="mx-auto max-w-3xl px-4 sm:px-6 md:px-8">
-          {data && data.project && <HiddenContentSettings projectId={data.project.id} hideForums={data.project.hideForums} hideSketches={data.project.hideSketches} hideOverlays={data.project.hideOverlays} />}
+          {data && data.project && (
+            <HiddenContentSettings
+              projectId={data.project.id}
+              hideForums={data.project.hideForums}
+              hideSketches={data.project.hideSketches}
+              hideOverlays={data.project.hideOverlays}
+            />
+          )}
         </div>
         <div className="mx-auto max-w-3xl px-4 sm:px-6 md:px-8">
           <MapboxAPIKeys />
@@ -110,8 +118,14 @@ function BasicSettingsForm(props: {
   description?: string | null;
   url: string;
   slug: string;
+  supportEmail: string;
 }) {
+  const { prompt } = useDialog();
   const { t } = useTranslation("admin");
+  const onError = useGlobalErrorHandler();
+  const [updateProject, updateProjectState] = useUpdateProjectSettingsMutation({
+    onError,
+  });
   const [copiedToClipboard, setCopiedToClipboard] = useState(false);
   useEffect(() => {
     if (copiedToClipboard === true) {
@@ -166,6 +180,47 @@ function BasicSettingsForm(props: {
                 className="p-0.5 absolute -right-9 top-8 -mt-0.5 border rounded hover:shadow-sm"
               />
             </div>
+            <div className="md:max-w-xs mt-5 relative">
+              <TextInput
+                label={t("Support Email")}
+                name="supportEmail"
+                description={t(
+                  "This email will be made available to users to contact for help with the project."
+                )}
+                value={props.supportEmail}
+                disabled
+              />
+              <button
+                className="p-1 absolute right-3 top-8"
+                onClick={async (e) => {
+                  e.preventDefault();
+                  prompt({
+                    message: t("Enter new support email"),
+                    defaultValue: props.supportEmail,
+                    onSubmit: async (value) => {
+                      // validate the email
+                      if (!props.slug) {
+                        onError(t("Project slug is missing"));
+                        return;
+                      }
+                      if (value.match(/.+@.+\..+/)) {
+                        // update the email
+                        updateProject({
+                          variables: {
+                            slug: props.slug,
+                            supportEmail: value,
+                          },
+                        });
+                      } else {
+                        onError(t("You entered an invalid email address"));
+                      }
+                    },
+                  });
+                }}
+              >
+                <Pencil2Icon />
+              </button>
+            </div>
 
             <div className="mt-6">
               <label className="block text-sm leading-5 font-medium text-gray-700">
@@ -230,8 +285,9 @@ function BasicSettingsForm(props: {
                       </svg>
                     </span>
                     <span
-                      className={`text-primary-500 p-1 px-4 rounded-full text-xs absolute w-auto right-0 top-0 -mt-7 -mr-4 duration-500 transition-opacity ${copiedToClipboard ? "opacity-100" : "opacity-0"
-                        }`}
+                      className={`text-primary-500 p-1 px-4 rounded-full text-xs absolute w-auto right-0 top-0 -mt-7 -mr-4 duration-500 transition-opacity ${
+                        copiedToClipboard ? "opacity-100" : "opacity-0"
+                      }`}
                     >
                       {t("Copied URL")}
                     </span>
@@ -246,7 +302,12 @@ function BasicSettingsForm(props: {
   );
 }
 
-function HiddenContentSettings(props: { hideSketches: boolean, hideForums: boolean, hideOverlays: boolean, projectId: number }) {
+function HiddenContentSettings(props: {
+  hideSketches: boolean;
+  hideForums: boolean;
+  hideOverlays: boolean;
+  projectId: number;
+}) {
   const [hideSketches] = useUpdateHideSketchesMutation({
     optimisticResponse: (data) => {
       return {
@@ -258,11 +319,10 @@ function HiddenContentSettings(props: { hideSketches: boolean, hideForums: boole
             id: data.projectId,
             hideSketches: data.hidden,
           },
-        }
-      }
-    }
-  }
-  );
+        },
+      };
+    },
+  });
   const [hideForums] = useUpdateHideForumsMutation({
     optimisticResponse: (data) => {
       return {
@@ -274,11 +334,10 @@ function HiddenContentSettings(props: { hideSketches: boolean, hideForums: boole
             id: data.projectId,
             hideForums: data.hidden,
           },
-        }
-      }
-    }
-  }
-  );
+        },
+      };
+    },
+  });
   const [hideOverlays] = useUpdateHideOverlaysMutation({
     optimisticResponse: (data) => {
       return {
@@ -290,74 +349,75 @@ function HiddenContentSettings(props: { hideSketches: boolean, hideForums: boole
             id: data.projectId,
             hideOverlays: data.hidden,
           },
-        }
-      }
-    }
-  }
-  );
+        },
+      };
+    },
+  });
   const { t } = useTranslation("admin");
-  return <div className="shadow sm:rounded-md sm:overflow-hidden">
-    <div className="px-4 py-5 bg-white sm:p-6">
-      <h3 className="text-lg font-medium leading-6 text-gray-900">
-        {t("Hidden Content")}
-      </h3>
-      <p className="mt-2 text-sm text-gray-500">
-        {t(
-          "If you are not using all the features of SeaSketch, as in the case of a data portal, you can hide these features from the homepage sidebar."
-        )}
-      </p>
-      <div className="text-base pt-4">
-        <InputBlock
-          input={
-            <Switch
-              isToggled={props.hideSketches}
-              onClick={() => {
-                hideSketches({
-                  variables: {
-                    projectId: props.projectId,
-                    hidden: !props.hideSketches
-                  }
-                })
-              }}
-            />
-          }
-          title={t("Hide Sketching Tools")}
-        />
-        <InputBlock
-          input={
-            <Switch
-              isToggled={props.hideForums}
-              onClick={() => {
-                hideForums({
-                  variables: {
-                    projectId: props.projectId,
-                    hidden: !props.hideForums
-                  }
-                })
-              }}
-            />
-          }
-          title={t("Hide Discussion Forums")}
-        />
-        <InputBlock
-          input={
-            <Switch
-              isToggled={props.hideOverlays}
-              onClick={() => {
-                hideOverlays({
-                  variables: {
-                    projectId: props.projectId,
-                    hidden: !props.hideOverlays
-                  }
-                })
-              }}
-            />
-          }
-          title={t("Hide Overlay Layers")}
-        />
+  return (
+    <div className="shadow sm:rounded-md sm:overflow-hidden">
+      <div className="px-4 py-5 bg-white sm:p-6">
+        <h3 className="text-lg font-medium leading-6 text-gray-900">
+          {t("Hidden Content")}
+        </h3>
+        <p className="mt-2 text-sm text-gray-500">
+          {t(
+            "If you are not using all the features of SeaSketch, as in the case of a data portal, you can hide these features from the homepage sidebar."
+          )}
+        </p>
+        <div className="text-base pt-4">
+          <InputBlock
+            input={
+              <Switch
+                isToggled={props.hideSketches}
+                onClick={() => {
+                  hideSketches({
+                    variables: {
+                      projectId: props.projectId,
+                      hidden: !props.hideSketches,
+                    },
+                  });
+                }}
+              />
+            }
+            title={t("Hide Sketching Tools")}
+          />
+          <InputBlock
+            input={
+              <Switch
+                isToggled={props.hideForums}
+                onClick={() => {
+                  hideForums({
+                    variables: {
+                      projectId: props.projectId,
+                      hidden: !props.hideForums,
+                    },
+                  });
+                }}
+              />
+            }
+            title={t("Hide Discussion Forums")}
+          />
+          <InputBlock
+            input={
+              <Switch
+                isToggled={props.hideOverlays}
+                onClick={() => {
+                  hideOverlays({
+                    variables: {
+                      projectId: props.projectId,
+                      hidden: !props.hideOverlays,
+                    },
+                  });
+                }}
+              />
+            }
+            title={t("Hide Overlay Layers")}
+          />
+        </div>
       </div>
     </div>
-  </div>
+  );
 }
 
 function UploadLogoField(props: { slug: string; logoUrl?: string | null }) {
@@ -370,7 +430,7 @@ function UploadLogoField(props: { slug: string; logoUrl?: string | null }) {
         slug: props.slug,
         logoUrl: acceptedFiles[0],
       },
-    }).catch((e) => { });
+    }).catch((e) => {});
   }, []);
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
@@ -378,10 +438,11 @@ function UploadLogoField(props: { slug: string; logoUrl?: string | null }) {
     <>
       <div
         {...getRootProps()}
-        className={`-ml-1 mt-2 flex items-center ${isDragActive
-          ? "border-dashed border-2 rounded-lg border-gray-300 -ml-1.5 mt-1.5 -mb-0.5"
-          : ""
-          }`}
+        className={`-ml-1 mt-2 flex items-center ${
+          isDragActive
+            ? "border-dashed border-2 rounded-lg border-gray-300 -ml-1.5 mt-1.5 -mb-0.5"
+            : ""
+        }`}
       >
         <span className="h-16 w-16 overflow-hidden text-gray-400 flex items-center">
           {props.logoUrl ? (
@@ -427,7 +488,7 @@ function UploadLogoField(props: { slug: string; logoUrl?: string | null }) {
                     logoUrl: e.target.files[0],
                   },
                 })
-                  .catch((e) => { })
+                  .catch((e) => {})
                   .then(() => {
                     target.value = "";
                   });
@@ -477,7 +538,7 @@ function AccessControlSettings() {
     };
     await mutate({
       variables,
-    }).catch((e) => { });
+    }).catch((e) => {});
   };
 
   const toggleIsListed = async () => {
@@ -564,8 +625,9 @@ function AccessControlSettings() {
                     />
                   </div>
                   <div
-                    className={`ml-3 text-sm leading-5 ${!showPublicOption && "opacity-50"
-                      }`}
+                    className={`ml-3 text-sm leading-5 ${
+                      !showPublicOption && "opacity-50"
+                    }`}
                   >
                     <label
                       htmlFor="PUBLIC"
@@ -592,7 +654,7 @@ function AccessControlSettings() {
                           accessControl
                             ? accessControl === "ADMINS_ONLY"
                             : data?.projectBySlug?.accessControl ===
-                            "ADMINS_ONLY"
+                              "ADMINS_ONLY"
                         }
                         type="radio"
                         className="form-radio h-4 w-4 text-primary-500 focus:ring focus:ring-blue-200 transition duration-150 ease-in-out"
@@ -624,7 +686,7 @@ function AccessControlSettings() {
                           accessControl
                             ? accessControl === "INVITE_ONLY"
                             : data?.projectBySlug?.accessControl ===
-                            "INVITE_ONLY"
+                              "INVITE_ONLY"
                         }
                         type="radio"
                         className="form-radio h-4 w-4 text-primary-500 transition duration-150 focus:ring focus:ring-blue-200 ease-in-out"
@@ -815,8 +877,9 @@ function MapExtentSettings() {
               ref={(el) => (mapContainer.current = el)}
             ></div>
             <button
-              className={`${drawing ? "hidden" : ""
-                } sm:absolute sm:top-28 mt-2 sm:mt-0 sm:left-10 cursor-pointer inline-flex items-center px-4 py-2 border border-gray-400 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150`}
+              className={`${
+                drawing ? "hidden" : ""
+              } sm:absolute sm:top-28 mt-2 sm:mt-0 sm:left-10 cursor-pointer inline-flex items-center px-4 py-2 border border-gray-400 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150`}
               onClick={onRedrawBounds}
             >
               {t("Redraw Bounds")}
@@ -871,7 +934,7 @@ function SuperUserSettings() {
         slug,
         isFeatured: featured,
       },
-    }).catch((e) => { });
+    }).catch((e) => {});
   };
 
   return (
@@ -968,12 +1031,13 @@ function SuperUserSettings() {
                     <span>{t("Data Hosting Quota")}</span>
                     {quotaQuery.data?.projectBySlug?.dataHostingQuota ? (
                       <span
-                        className={` ml-5 ${quotaQuery.data.projectBySlug.dataHostingQuota *
-                          0.9 <=
+                        className={` ml-5 ${
+                          quotaQuery.data.projectBySlug.dataHostingQuota *
+                            0.9 <=
                           quotaQuery.data.projectBySlug.dataHostingQuotaUsed
-                          ? "text-red-800"
-                          : "text-gray-500"
-                          }`}
+                            ? "text-red-800"
+                            : "text-gray-500"
+                        }`}
                       >
                         {bytes(
                           parseInt(
diff --git a/packages/client/src/queries/UpdateProjectSettings.graphql b/packages/client/src/queries/UpdateProjectSettings.graphql
index af71dacf..24ecb338 100644
--- a/packages/client/src/queries/UpdateProjectSettings.graphql
+++ b/packages/client/src/queries/UpdateProjectSettings.graphql
@@ -7,6 +7,7 @@ mutation UpdateProjectSettings(
   $logoLink: String
   $isFeatured: Boolean
   $mapboxPublicKey: String
+  $supportEmail: String
 ) {
   updateProjectBySlug(
     input: {
@@ -19,6 +20,7 @@ mutation UpdateProjectSettings(
         logoLink: $logoLink
         isFeatured: $isFeatured
         mapboxPublicKey: $mapboxPublicKey
+        supportEmail: $supportEmail
       }
     }
   ) {
@@ -32,6 +34,7 @@ mutation UpdateProjectSettings(
       mapboxPublicKey
       mapboxSecretKey
       isFeatured
+      supportEmail
     }
   }
 }