feat(organizations): add Organization Settings route TASK-981

jsapp/js/account/accountFieldsEditor.component.tsx

@@ -13,7 +13,7 @@ import type {
 } from './account.constants';
 
 // See: kobo/apps/accounts/forms.py (KoboSignupMixin)
-const ORGANIZATION_TYPE_SELECT_OPTIONS = [
+export const ORGANIZATION_TYPE_SELECT_OPTIONS = [
   {value: 'non-profit', label: t('Non-profit organization')},
   {value: 'government', label: t('Government institution')},
   {value: 'educational', label: t('Educational organization')},

jsapp/js/account/organization/OrganizationSettingsField.tsx

@@ -0,0 +1,36 @@
+import TextBox from 'jsapp/js/components/common/textBox';
+import organizationSettingsStyles from 'js/account/organization/organizationSettingsRoute.module.scss';
+
+interface Props {
+  label: string;
+  value: string;
+  isDisabled?: boolean;
+  /** If `onChange` is not provided, we make the field disabled for safety. */
+  onChange?: (newValue: string) => void;
+  /**
+   * Function that ensures that field value is valid. If invalid will cause
+   * an error to be displayed.
+   */
+  validateValue?: (currentValue: string) => string | boolean | string[] | undefined;
+}
+
+/**
+ * A `TextBox` wrapper componet for `OrganizationSettingsRoute` that makes code
+ * a bit more DRY.
+ */
+export default function OrganizationSettingsField(
+  {label, value, isDisabled, onChange, validateValue}: Props
+) {
+  return (
+    <div className={organizationSettingsStyles.field}>
+      <TextBox
+        label={label}
+        value={value}
+        required
+        onChange={onChange}
+        disabled={!onChange || isDisabled}
+        errors={validateValue ? validateValue(value) : undefined}
+      />
+    </div>
+  );
+}

jsapp/js/account/organization/OrganizationSettingsRoute.tsx

@@ -1,7 +1,156 @@
-import React from 'react';
+// Libraries
+import {useState, useEffect} from 'react';
 
+// Partial components
+import OrganizationSettingsField from './OrganizationSettingsField';
+import LoadingSpinner from 'jsapp/js/components/common/loadingSpinner';
+import InlineMessage from 'jsapp/js/components/common/inlineMessage';
+import Button from 'jsapp/js/components/common/button';
+
+// Stores, hooks and utilities
+import useWhenStripeIsEnabled from 'js/hooks/useWhenStripeIsEnabled.hook';
+import {OrganizationUserRole, useOrganizationQuery} from 'js/account/organization/organizationQuery';
+import subscriptionStore from 'js/account/subscriptionStore';
+import envStore from 'js/envStore';
+import {getSimpleMMOLabel} from './organization.utils';
+
+// Constants and types
+import {ORGANIZATION_TYPE_SELECT_OPTIONS} from 'js/account/accountFieldsEditor.component';
+
+// Styles
+import styles from 'js/account/organization/organizationSettingsRoute.module.scss';
+
+interface State {
+  name: string;
+  website?: string;
+  type?: string;
+}
+
+/**
+ * Renders few fields with organization related settings, like name or website
+ * (with some logic in regards to their visibility). If user has necessary role,
+ * they can edit available fields.
+ */
 export default function OrganizationSettingsRoute() {
+  const orgQuery = useOrganizationQuery();
+  const [subscriptions] = useState(() => subscriptionStore);
+  const [state, setState] = useState<State>({name: ''});
+  const [isStripeEnabled, setIsStripeEnabled] = useState(false);
+
+  useEffect(() => {
+    if (orgQuery.data) {
+      setState({name: orgQuery.data.name});
+    }
+  }, [orgQuery.data]);
+
+  useWhenStripeIsEnabled(() => {
+    setIsStripeEnabled(true);
+  }, []);
+
+  const isUserAdminOrOwner = (
+    orgQuery.data?.request_user_role &&
+    [OrganizationUserRole.admin, OrganizationUserRole.owner]
+      .includes(orgQuery.data?.request_user_role)
+  );
+
+  const isPendingOrgPatch = orgQuery.data && orgQuery.isPending;
+
+  function handleSave() {
+    // TODO: call the API endpoint
+    // to be done while doing: https://www.notion.so/kobotoolbox/Add-react-query-mutation-hook-for-org-changes-1307e515f6548010b5d3c087b634f01a
+    console.log('save');
+  }
+
+  function handleChangeName(name: string) {
+    setState((prevState) => {return {...prevState, name};});
+  }
+
+  function handleChangeWebsite(website: string) {
+    setState((prevState) => {return {...prevState, website};});
+  }
+
+  function isNameValueValid(currentName: string) {
+    return !currentName;
+  }
+
+  function isWebsiteValueValid(currentWebsite: string) {
+    return !currentWebsite;
+  }
+
+  function getTypeLabel(typeName: string) {
+    // TODO: see if this would be an actual source of the organization type label
+    // to be done while doing: https://www.notion.so/kobotoolbox/Add-react-query-mutation-hook-for-org-changes-1307e515f6548010b5d3c087b634f01a
+    const foundLabel = ORGANIZATION_TYPE_SELECT_OPTIONS.find((item) => item.value === typeName)?.label;
+    return foundLabel || typeName;
+  }
+
+  const mmoLabel = getSimpleMMOLabel(
+    envStore.data,
+    subscriptionStore.activeSubscriptions[0],
+    false,
+    true
+  );
+  const mmoLabelLowercase = mmoLabel.toLowerCase();
+
+  if (!orgQuery.data) {
+    return <LoadingSpinner />;
+  }
+
   return (
-    <div>Organization settings view to be implemented</div>
+    <div className={styles.orgSettingsRoot}>
+      <header className={styles.orgSettingsHeader}>
+        <h2 className={styles.orgSettingsHeaderText}>
+          {t('##team/org## details').replace('##team/org##', mmoLabel)}
+        </h2>
+      </header>
+
+      <section className={styles.fieldsRow}>
+        <OrganizationSettingsField
+          label={t('##team/org## name').replace('##team/org##', mmoLabel)}
+          onChange={handleChangeName}
+          value={state.name}
+          validateValue={isNameValueValid}
+          isDisabled={!isUserAdminOrOwner || isPendingOrgPatch}
+        />
+
+        {isStripeEnabled && state.website && (
+          <OrganizationSettingsField
+            label={t('##team/org## website').replace('##team/org##', mmoLabel)}
+            onChange={handleChangeWebsite}
+            value={state.website}
+            validateValue={isWebsiteValueValid}
+            isDisabled={!isUserAdminOrOwner || isPendingOrgPatch}
+          />
+        )}
+      </section>
+
+      <section className={styles.fieldsRow}>
+        {isStripeEnabled && state.type && (
+          <OrganizationSettingsField
+            label={t('##team/org## type').replace('##team/org##', mmoLabel)}
+            value={getTypeLabel(state.type)}
+            isDisabled
+          />
+        )}
+      </section>
+
+      <Button
+        type='primary'
+        size='m'
+        onClick={handleSave}
+        label={t('Save')}
+        isDisabled={!isUserAdminOrOwner}
+        isPending={isPendingOrgPatch}
+      />
+
+      <InlineMessage
+        type='default'
+        message={
+          t("To delete this ##team/org##, you need to cancel your current ##plan name## plan. At the end of the plan period your ##team/org##'s projects will be converted to projects owned by your personal account.")
+            .replaceAll('##team/org##', mmoLabelLowercase)
+            .replace('##plan name##', subscriptions.planName)
+        }
+      />
+    </div>
   );
 }

jsapp/js/account/organization/organizationSettingsRoute.module.scss

@@ -0,0 +1,50 @@
+@use 'scss/mixins';
+@use 'scss/colors';
+@use 'scss/breakpoints';
+@use 'js/components/common/textBox.module';
+
+.orgSettingsRoot {
+  padding: 20px;
+  overflow-y: auto;
+  height: 100%;
+}
+
+header.orgSettingsHeader {
+  @include mixins.centerRowFlex;
+  margin: 24px 0;
+
+  &:not(:first-child) {
+    margin-top: 44px;
+  }
+}
+
+h2.orgSettingsHeaderText {
+  color: colors.$kobo-storm;
+  text-transform: uppercase;
+  font-size: 18px;
+  font-weight: 700;
+  flex: 1;
+  margin: 0;
+}
+
+.fieldsRow {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  &:not(:first-child) {
+    margin-top: 16px;
+  }
+}
+
+.field {
+  max-width: 285px;
+  width: 100%;
+}
+
+@include breakpoints.breakpoint(mediumAndUp) {
+  .orgSettingsRoot {
+    padding: 50px;
+  }
+}

jsapp/js/components/common/textBox.tsx

@@ -37,7 +37,7 @@ interface TextBoxProps {
   endIcon?: IconName;
   value: string;
   /** Not needed if `readOnly` */
-  onChange?: Function;
+  onChange?: (newValue: string) => void;
   onBlur?: Function;
   onKeyPress?: Function;
   /**