@thecb/components 7.3.2-beta.5 → 7.4.0

package/src/components/molecules/internal-user-info-form/InternalUserInfoForm.js

@@ -1,266 +0,0 @@
-import React, { useEffect } from "react";
-import { required, isProbablyEmail } from "redux-freeform";
-import { Stack, Box, Cluster } from "../../atoms/layouts";
-import ButtonWithAction from "../../atoms/button-with-action";
-import Heading from "../../atoms/heading";
-import Text from "../../atoms/text";
-import { noop } from "../../../util/general";
-import {
-  FormInput,
-  FormContainer,
-  FormInputColumn
-} from "../../atoms/form-layouts";
-import FormSelect from "../../atoms/form-select";
-import SearchableSelect from "../../atoms/searchable-select";
-import { GHOST_GREY } from "../../../constants/colors";
-
-const RESEARCHER = "RESEARCHER";
-const AGENCY_ADMIN = "AGENCY_ADMIN";
-const CLIENT_ADMIN = "CLIENT_ADMIN";
-const SUPERVISOR = "SUPERVISOR";
-const CB_ADMIN = "CITYBASE_ADMIN";
-const CREATE_CLIENT_ADMIN = "CREATE_CLIENT_ADMIN";
-const PROFILE = "PROFILE";
-const ADD = "ADD";
-const EDIT = "EDIT";
-
-const roleDescriptions = {
-  [RESEARCHER]: "Researcher",
-  [AGENCY_ADMIN]: "Agency admin",
-  [CLIENT_ADMIN]: "Client admin",
-  [SUPERVISOR]: "Supervisor",
-  [CB_ADMIN]: "Citybase admin"
-};
-
-const InternalUserInfoForm = ({
-  variant = "default",
-  fields,
-  actions,
-  clearOnDismount,
-  showErrors,
-  handleSubmit = noop,
-  closeForm,
-  allAgencyOptions,
-  selectedAgencies,
-  allSelected,
-  toggleSelectAllAgencies = noop,
-  selectAgency,
-  roleOptions,
-  clientOptions,
-  namesDisabled,
-  emailDisabled,
-  roleDisabled,
-  selectionDisabled,
-  formType,
-  openChangePasswordForm,
-  firstName,
-  lastName
-}) => {
-  useEffect(() => {
-    if (formType === CREATE_CLIENT_ADMIN) {
-      actions.fields.client.addValidator(required());
-    }
-    if (formType !== PROFILE) {
-      actions.fields.email.addValidator(required());
-      actions.fields.role.addValidator(required());
-    }
-  }, []);
-  if (clearOnDismount) {
-    useEffect(() => () => actions.form.clear(), []);
-  }
-  const clientErrorMessages = {
-    [required.error]: "Client is required"
-  };
-  const firstNameErrorMessages = {
-    [required.error]: "First name is required"
-  };
-  const lastNameErrorMessages = {
-    [required.error]: "Last name is required"
-  };
-  const emailErrorMessages = {
-    [isProbablyEmail.error]: "Invalid email address"
-  };
-  const roleErrorMessages = {
-    [required.error]: "Role is required"
-  };
-  return (
-    <FormContainer
-      variant={variant}
-      role="form"
-      aria-label="user-info-form"
-      extraStyles={`padding: 0;`}
-    >
-      {formType === PROFILE && (
-        <Box padding="1.5rem">
-          <Cluster justify="flex-start" align="center">
-            <Box padding="1.25rem" borderRadius="50%" background="#CACED8">
-              <Heading variant="h4" weight="700">
-                {firstName.charAt(0).toUpperCase()}
-                {lastName.charAt(0).toUpperCase()}
-              </Heading>
-            </Box>
-            <Text variant="p" weight="700" extraStyles={`padding-left: 1rem;`}>
-              {firstName} {lastName}
-            </Text>
-          </Cluster>
-        </Box>
-      )}
-      {formType === CREATE_CLIENT_ADMIN && (
-        <Box
-          padding="1.5rem 1.5rem 0.5rem"
-          borderColor={GHOST_GREY}
-          borderSize="1px"
-          borderWidthOverride="0 0 1px 0"
-        >
-          <FormInputColumn>
-            <Heading variant="h6" weight="700" margin="0 0 1rem">
-              Select Client
-            </Heading>
-            <FormSelect
-              labelTextWhenNoError="Client"
-              errorMessages={clientErrorMessages}
-              options={clientOptions.map(client => ({
-                text: client,
-                value: client,
-                id: client
-              }))}
-              field={fields.client}
-              fieldActions={actions.fields.client}
-              showErrors={showErrors}
-              onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-            />
-          </FormInputColumn>
-        </Box>
-      )}
-      <Box
-        padding={
-          formType === PROFILE ? "1.5rem 1.5rem 0" : "1.5rem 1.5rem 0.5rem"
-        }
-        borderColor={GHOST_GREY}
-        borderSize="1px"
-        borderWidthOverride={formType === PROFILE ? "1px 0 0" : "0 0 1px 0"}
-      >
-        <FormInputColumn>
-          <Heading variant="h6" weight="700" margin="0 0 1rem">
-            Personal Information
-          </Heading>
-          <FormInput
-            labelTextWhenNoError="First Name"
-            errorMessages={firstNameErrorMessages}
-            field={fields.firstName}
-            fieldActions={actions.fields.firstName}
-            showErrors={showErrors}
-            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-            disabled={namesDisabled}
-            autocomplete="given-name"
-          />
-          <FormInput
-            labelTextWhenNoError="Last Name"
-            errorMessages={lastNameErrorMessages}
-            field={fields.lastName}
-            fieldActions={actions.fields.lastName}
-            showErrors={showErrors}
-            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-            disabled={namesDisabled}
-            autocomplete="family-name"
-          />
-          <FormInput
-            labelTextWhenNoError="Email"
-            errorMessages={emailErrorMessages}
-            field={fields.email}
-            fieldActions={actions.fields.email}
-            showErrors={showErrors}
-            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-            disabled={emailDisabled}
-            autocomplete="email"
-          />
-          {formType === PROFILE && (
-            <FormInput
-              labelTextWhenNoError="Password"
-              errorMessages={{}}
-              field={{ rawValue: "•••••••••••••" }}
-              disabled={true}
-              decorator={
-                <Text
-                  variant="pS"
-                  color={`#15749D`}
-                  onClick={openChangePasswordForm}
-                  extraStyles={`cursor: pointer;`}
-                >
-                  Change Password
-                </Text>
-              }
-            />
-          )}
-        </FormInputColumn>
-      </Box>
-      <Box padding="1.5rem">
-        {formType !== PROFILE && (
-          <Box padding="0 0 0.5rem">
-            <FormInputColumn>
-              <Heading variant="h6" weight="700" margin="0 0 1rem">
-                User Settings
-              </Heading>
-              <FormSelect
-                labelTextWhenNoError="User Role"
-                errorMessages={roleErrorMessages}
-                options={roleOptions.map(role => ({
-                  text: roleDescriptions[role],
-                  value: role,
-                  id: role
-                }))}
-                field={fields.role}
-                fieldActions={actions.fields.role}
-                showErrors={showErrors}
-                onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-                disabled={roleDisabled}
-              />
-            </FormInputColumn>
-          </Box>
-        )}
-        {(formType === ADD || formType === EDIT) && (
-          <Box padding="0.5rem 0 1.5rem">
-            <FormInputColumn>
-              <Text variant="p">Select which agencies the user can view</Text>
-              <SearchableSelect
-                actions={actions}
-                fields={fields}
-                items={allAgencyOptions}
-                selectedItems={selectedAgencies}
-                allSelected={allSelected}
-                toggleSelectAllItems={toggleSelectAllAgencies}
-                selectItem={selectAgency}
-                disabled={selectionDisabled}
-              />
-            </FormInputColumn>
-          </Box>
-        )}
-        <Box padding="0">
-          <Stack childGap="1rem" direction="row" justify="flex-end">
-            <ButtonWithAction
-              text="Cancel"
-              action={() => {
-                if (formType !== CREATE_CLIENT_ADMIN) {
-                  toggleSelectAllAgencies(false);
-                }
-                closeForm();
-              }}
-              variant={"secondary"}
-              dataQa="Cancel"
-              extraStyles={`margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;`}
-            />
-            <ButtonWithAction
-              text="Save"
-              action={handleSubmit}
-              variant="primary"
-              dataQa="Save"
-              extraStyles={`margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;`}
-            />
-          </Stack>
-        </Box>
-      </Box>
-    </FormContainer>
-  );
-};
-
-export default InternalUserInfoForm;

package/src/components/molecules/internal-user-info-form/InternalUserInfoForm.state.js

@@ -1,26 +0,0 @@
-import { createFormState, required, isProbablyEmail } from "redux-freeform";
-
-const formConfig = {
-  client: {
-    validators: []
-  },
-  firstName: {
-    validators: [required()]
-  },
-  lastName: {
-    validators: [required()]
-  },
-  email: {
-    validators: [isProbablyEmail()]
-  },
-  role: {
-    validators: []
-  },
-  searchTerm: {
-    validators: []
-  }
-};
-
-export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
-  formConfig
-);

package/src/components/molecules/internal-user-info-form/index.js

@@ -1,11 +0,0 @@
-import InternalUserInfoForm from "./InternalUserInfoForm";
-import {
-  reducer,
-  mapStateToProps,
-  mapDispatchToProps
-} from "./InternalUserInfoForm.state";
-
-InternalUserInfoForm.reducer = reducer;
-InternalUserInfoForm.mapStateToProps = mapStateToProps;
-InternalUserInfoForm.mapDispatchToProps = mapDispatchToProps;
-export default InternalUserInfoForm;