feat(front): registration form extension + picky details [MARXAN-1394][MARXAN-1396][MARXAN-1311]

app/components/confirmation-prompt/component.tsx

@@ -37,7 +37,7 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
           {title}
         </div>
         <p className={classnames({
-          'mt-4 text-sm sm:pr-32': true,
+          'my-4 text-sm sm:pr-32': true,
           'underline text-black': !!danger,
           'text-gray-400': !danger,
         })}

app/components/forms/select/constants/theme.ts

@@ -35,6 +35,24 @@ export default {
       disabled: 'text-sm opacity-50 pointer-events-none',
     },
   },
+  'light-square': {
+    container: 'text-gray-600 bg-white ring-1 ring-gray-400 rounded',
+    open: 'ring-1 ring-primary-400 bg-white text-gray-600 rounded',
+    closed: 'text-gray-400',
+    prefix: {
+      base: 'text-gray-800',
+    },
+    icon: {
+      closed: 'text-gray-600',
+      open: 'text-primary-500 transform rotate-180',
+      disabled: 'text-gray-400',
+    },
+    item: {
+      base: 'text-sm text-gray-400',
+      highlighted: 'text-sm bg-gray-100 text-gray-800',
+      disabled: 'text-sm opacity-50 pointer-events-none',
+    },
+  },
   states: {
     none: '',
     error: 'ring-red-500',

app/components/forms/select/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, FocusEventHandler } from 'react';
 
 interface SelectThemeProps {
-  theme: 'dark' | 'light';
+  theme: 'dark' | 'light' | 'light-square';
   size: 'base' | 's';
   status?: 'none' | 'error' | 'valid';
   maxHeight?: number | string;

app/layout/admin/users/table/component.tsx

@@ -1,12 +1,18 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
+import { format } from 'date-fns';
+import { useSession } from 'next-auth/client';
 import { useDebouncedCallback } from 'use-debounce';
 
 import { useAdminUsers } from 'hooks/admin';
+import { useToasts } from 'hooks/toast';
 
+import Button from 'components/button';
 import Search from 'components/search';
 import Table2 from 'components/table2';
 
+import DOWNLOADS from 'services/downloads';
+
 import CellAdmin from './cells/admin';
 import CellBlock from './cells/block';
 
@@ -19,6 +25,8 @@ export const AdminUsersTable: React.FC<AdminUsersTableProps> = () => {
   const [sort, setSort] = useState({ id: 'displayName', direction: 'desc' });
   const [search, setSearch] = useState<string>();
 
+  const { addToast } = useToasts();
+
   const {
     data: adminUsersData = [],
     meta,
@@ -87,18 +95,64 @@ export const AdminUsersTable: React.FC<AdminUsersTableProps> = () => {
     setSearch(v);
   }, 250);
 
+  const [session] = useSession();
+
+  const onDownloadUsersData = useCallback(async () => {
+    const { data: blob, status } = await DOWNLOADS.request({
+      url: '/users/csv',
+      responseType: 'arraybuffer',
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+        'Content-Type': 'application/zip',
+      },
+    });
+
+    const url = window.URL.createObjectURL(new Blob([blob]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `users-${format(Date.now(), 'MM/dd/yyyy hh:mm:ss')}.csv`);
+
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+
+    if (status !== 200) {
+      addToast('download-error', (
+        <>
+          <h2 className="font-medium">Error!</h2>
+          <ul className="text-sm">
+            Data not downloaded
+          </ul>
+        </>
+      ), {
+        level: 'error',
+      });
+    }
+  }, [addToast, session]);
+
   return (
     <div className="space-y-5">
-      <div className="max-w-lg">
-        <Search
-          id="published-project-search"
-          defaultValue={search}
+      <div className="flex justify-between w-full">
+        <div className="max-w-lg">
+          <Search
+            id="published-project-search"
+            defaultValue={search}
+            size="base"
+            theme="light"
+            placeholder="Search by project name, planning area name..."
+            aria-label="Search"
+            onChange={onSearch}
+          />
+        </div>
+        <Button
+          theme="secondary"
           size="base"
-          theme="light"
-          placeholder="Search by project name, planning area name..."
-          aria-label="Search"
-          onChange={onSearch}
-        />
+          type="button"
+          onClick={onDownloadUsersData}
+        >
+          Download data
+
+        </Button>
       </div>
 
       <Table2

app/layout/scenarios/edit/solutions/overview/table/table-form/component.tsx

@@ -175,13 +175,14 @@ export const SolutionsTableForm: React.FC<SolutionsTableFormProps> = ({
           {!noSolutionResults && (
             <div className="flex items-center justify-between space-x-8">
               <div className="flex items-center">
+
                 <Checkbox
                   theme="light"
                   id="checkbox-5-dif-solutions"
                   className="block w-4 h-4 text-green-300 form-checkbox-dark"
                   onChange={(event) => setMostDifSolutions(event.target.checked)}
                 />
-                <Label className="mx-2 text-sm text-gray-700">
+                <Label id="checkbox-5-dif-solutions" className="mx-2 text-sm text-gray-700 cursor-pointer hover:underline">
                   View 5 most different solutions
                 </Label>
 

app/layout/sign-up/component.tsx

@@ -18,6 +18,7 @@ import Checkbox from 'components/forms/checkbox';
 import Field from 'components/forms/field';
 import Input from 'components/forms/input';
 import Label from 'components/forms/label';
+import Select from 'components/forms/select';
 import {
   composeValidators,
   booleanValidator,
@@ -30,6 +31,8 @@ import EMAIL_SVG from 'svgs/ui/email.svg?sprite';
 import PASSWORD_SVG from 'svgs/ui/password.svg?sprite';
 import USER_SVG from 'svgs/ui/user.svg?sprite';
 
+import { BACKGROUND_OPTIONS, ACADEMIC_LEVEL_OPTIONS, APPLIED_LEVEL_OPTIONS } from './constants';
+
 export interface SignUpProps {
 
 }
@@ -117,6 +120,62 @@ export const SignUp: React.FC<SignUpProps> = () => {
                   </FieldRFF>
                 </div>
 
+                {/* COUNTRY */}
+                <div className="mt-5">
+                  <FieldRFF
+                    name="country"
+                    validate={composeValidators([{ presence: true }])}
+                  >
+                    {(fprops) => (
+                      <Field id="login-country" {...fprops}>
+                        <Label theme="light" className="mb-3 uppercase">Country</Label>
+                        <Input theme="light" />
+                      </Field>
+                    )}
+                  </FieldRFF>
+                </div>
+
+                {/* BACKGROUND */}
+                <div className="mt-5">
+                  <FieldRFF
+                    name="background"
+                    validate={composeValidators([{ presence: true }])}
+                  >
+                    {(fprops) => (
+                      <Field id="login-background" {...fprops} className="w-full">
+                        <Label theme="light" className="mb-3 uppercase">What is the nature of your work with Marxan?</Label>
+                        <Select
+                          theme="light-square"
+                          size="base"
+                          placeholder="Select..."
+                          options={BACKGROUND_OPTIONS}
+                          onChange={fprops.input.onChange}
+                        />
+                      </Field>
+                    )}
+                  </FieldRFF>
+                </div>
+
+                {/* LEVEL */}
+                <div className="mt-5">
+                  <FieldRFF
+                    name="level"
+                    validate={composeValidators([{ presence: true }])}
+                  >
+                    {(fprops) => (
+                      <Field id="login-level" {...fprops} className="w-full">
+                        <Select
+                          theme="light-square"
+                          size="base"
+                          placeholder="Select..."
+                          options={props.values.work === 'academic_research' ? ACADEMIC_LEVEL_OPTIONS : APPLIED_LEVEL_OPTIONS}
+                          onChange={fprops.input.onChange}
+                        />
+                      </Field>
+                    )}
+                  </FieldRFF>
+                </div>
+
                 {/* EMAIL */}
                 <div className="mt-5">
                   <FieldRFF

app/layout/sign-up/constants.ts

@@ -0,0 +1,52 @@
+export const BACKGROUND_OPTIONS = [
+  {
+    label: 'Academic research/science',
+    value: 'academic_research',
+  },
+  {
+    label: 'Applied conservation planning',
+    value: 'conservation_planning',
+  },
+];
+
+export const ACADEMIC_LEVEL_OPTIONS = [
+  {
+    label: 'Trainee',
+    value: 'trainee',
+  },
+  {
+    label: 'Student',
+    value: 'student',
+  },
+  {
+    label: 'PhD/Post-doctoral researcher',
+    value: 'phd',
+  },
+  {
+    label: 'Faculty',
+    value: 'faculty',
+  },
+];
+
+export const APPLIED_LEVEL_OPTIONS = [
+  {
+    label: 'Trainee',
+    value: 'trainee',
+  },
+  {
+    label: 'NGO',
+    value: 'ngo',
+  },
+  {
+    label: 'Private sector',
+    value: 'private_sector',
+  },
+  {
+    label: 'Government',
+    value: 'government',
+  },
+  {
+    label: 'Intergovernmental',
+    value: 'intergovernmental',
+  },
+];