@thecb/components 4.3.3 → 4.3.6

package/dist/index.cjs.js

@@ -18770,6 +18770,7 @@ var Checkbox = function Checkbox(_ref4) {
       hidden = _ref4$hidden === void 0 ? false : _ref4$hidden,
       _ref4$error = _ref4.error,
       error = _ref4$error === void 0 ? false : _ref4$error,
+      extraStyles = _ref4.extraStyles,
       textExtraStyles = _ref4.textExtraStyles;
 
   var _useState = React.useState(false),
@@ -18797,7 +18798,7 @@ var Checkbox = function Checkbox(_ref4) {
     },
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
-    extraStyles: "outline: none;"
+    extraStyles: "outline: none; ".concat(extraStyles)
   }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, null, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
@@ -21817,17 +21818,17 @@ var PasswordRequirements = function PasswordRequirements(_ref) {
       isMobile = _ref.isMobile;
   var iconMap = (_iconMap = {}, _defineProperty(_iconMap, INPUT_STATE_NEUTRAL, {
     icon: /*#__PURE__*/React__default.createElement(IconNeutral, {
-      margin: "0.125rem 0.5rem 0 0"
+      margin: "0 0.5rem 0 0"
     }),
     color: MINESHAFT_GREY
   }), _defineProperty(_iconMap, INPUT_STATE_INVALID, {
     icon: /*#__PURE__*/React__default.createElement(IconInvalid, {
-      margin: "0.125rem 0.5rem 0 0"
+      margin: "0 0.5rem 0 0"
     }),
     color: RAZZMATAZZ_RED
   }), _defineProperty(_iconMap, INPUT_STATE_VALID, {
     icon: /*#__PURE__*/React__default.createElement(IconValid, {
-      margin: "0.125rem 0.5rem 0 0"
+      margin: "0 0.5rem 0 0"
     }),
     color: FOREST_GREEN
   }), _iconMap);
@@ -21877,7 +21878,7 @@ var PasswordRequirements = function PasswordRequirements(_ref) {
       onRight: true,
       childGap: "0rem"
     }, /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0rem"
+      padding: "0.15rem 0 0 0"
     }, /*#__PURE__*/React__default.createElement(Cluster, {
       justify: "flex-start",
       align: "center"
@@ -22180,7 +22181,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
     errorMessages: {},
     field: fields.searchTerm,
     fieldActions: actions.fields.searchTerm,
-    placeholder: "Search departments",
+    placeholder: "Search agencies",
     disabled: disabled
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem 0",
@@ -22197,7 +22198,8 @@ var SearchableSelect = function SearchableSelect(_ref) {
         return handleSelect(value);
       },
       textExtraStyles: "margin: 0;",
-      disabled: disabled
+      disabled: disabled,
+      extraStyles: "margin: 0 0.5rem;"
     });
   })))));
 };
@@ -34849,7 +34851,11 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showErrors = _ref.showErrors,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      revenueManagement = _ref.revenueManagement,
+      closeForm = _ref.closeForm,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName;
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -34867,7 +34873,29 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
 
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     role: "form",
-    "aria-label": "Change password"
+    "aria-label": "Change password",
+    extraStyles: "padding: 0;"
+  }, revenueManagement && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem",
+    borderColor: GHOST_GREY,
+    borderSize: "1px",
+    borderWidthOverride: "0 0 1px 0"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.25rem",
+    borderRadius: "50%",
+    background: "#CACED8"
+  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h4",
+    weight: "700"
+  }, firstName.charAt(0).toUpperCase(), lastName.charAt(0).toUpperCase())), /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "p",
+    weight: "700",
+    extraStyles: "padding-left: 1rem;"
+  }, firstName, " ", lastName))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Current password",
     errorMessages: currentPasswordErrorMessages,
@@ -34906,7 +34934,25 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {
     password: fields.newPassword,
     isMobile: isMobile
-  }))));
+  }))), revenueManagement && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem 0 0"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row",
+    justify: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    text: "Cancel",
+    action: closeForm,
+    variant: "secondary",
+    dataQa: "Cancel",
+    extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;"
+  }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    text: "Save",
+    action: handleSubmit,
+    variant: "primary",
+    dataQa: "Save",
+    extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;"
+  })))));
 };
 
 var formConfig$1 = {
@@ -37062,6 +37108,9 @@ var CLIENT_ADMIN = "CLIENT_ADMIN";
 var SUPERVISOR = "SUPERVISOR";
 var CB_ADMIN = "CITYBASE_ADMIN";
 var CREATE_CLIENT_ADMIN = "CREATE_CLIENT_ADMIN";
+var PROFILE = "PROFILE";
+var ADD = "ADD";
+var EDIT = "EDIT";
 var roleDescriptions = (_roleDescriptions = {}, _defineProperty(_roleDescriptions, RESEARCHER, "Researcher"), _defineProperty(_roleDescriptions, AGENCY_ADMIN, "Agency admin"), _defineProperty(_roleDescriptions, CLIENT_ADMIN, "Client admin"), _defineProperty(_roleDescriptions, SUPERVISOR, "Supervisor"), _defineProperty(_roleDescriptions, CB_ADMIN, "Citybase admin"), _roleDescriptions);
 
 var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
@@ -37073,21 +37122,32 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      closeForm = _ref.closeForm,
       allAgencyOptions = _ref.allAgencyOptions,
       selectedAgencies = _ref.selectedAgencies,
       allSelected = _ref.allSelected,
-      toggleSelectAllAgencies = _ref.toggleSelectAllAgencies,
+      _ref$toggleSelectAllA = _ref.toggleSelectAllAgencies,
+      toggleSelectAllAgencies = _ref$toggleSelectAllA === void 0 ? noop : _ref$toggleSelectAllA,
       selectAgency = _ref.selectAgency,
       roleOptions = _ref.roleOptions,
       clientOptions = _ref.clientOptions,
-      disabled = _ref.disabled,
       emailDisabled = _ref.emailDisabled,
       roleDisabled = _ref.roleDisabled,
-      formType = _ref.formType;
+      selectionDisabled = _ref.selectionDisabled,
+      formType = _ref.formType,
+      isOktaUser = _ref.isOktaUser,
+      openChangePasswordForm = _ref.openChangePasswordForm,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName;
   React.useEffect(function () {
     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) {
@@ -37111,8 +37171,30 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
-    "aria-label": "user-info-form"
-  }, /*#__PURE__*/React__default.createElement(Stack, null, formType === CREATE_CLIENT_ADMIN && /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
+    "aria-label": "user-info-form",
+    extraStyles: "padding: 0;"
+  }, formType === PROFILE && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.25rem",
+    borderRadius: "50%",
+    background: "#CACED8"
+  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h4",
+    weight: "700"
+  }, firstName.charAt(0).toUpperCase(), lastName.charAt(0).toUpperCase())), /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "p",
+    weight: "700",
+    extraStyles: "padding-left: 1rem;"
+  }, firstName, " ", lastName))), formType === CREATE_CLIENT_ADMIN && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem 1.5rem 0.5rem",
+    borderColor: GHOST_GREY,
+    borderSize: "1px",
+    borderWidthOverride: "0 0 1px 0"
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
     variant: "h6",
     weight: "700",
     margin: "0 0 1rem"
@@ -37132,7 +37214,12 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  })), /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
+  }))), /*#__PURE__*/React__default.createElement(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"
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
     variant: "h6",
     weight: "700",
     margin: "0 0 1rem"
@@ -37163,13 +37250,30 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    disabled: disabled || emailDisabled
-  })), /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
+    disabled: emailDisabled
+  }), formType === PROFILE && !isOktaUser && /*#__PURE__*/React__default.createElement(FormInput$1, {
+    labelTextWhenNoError: "Password",
+    errorMessages: {},
+    field: {
+      rawValue: "•••••••••••••"
+    },
+    disabled: true,
+    decorator: /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "pS",
+      color: "#15749D",
+      onClick: openChangePasswordForm,
+      extraStyles: "cursor: pointer;"
+    }, "Change Password")
+  }))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem"
+  }, formType !== PROFILE && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 0.5rem"
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
     variant: "h6",
     weight: "700",
     margin: "0 0 1rem"
-  }, "Dashboard Settings"), /*#__PURE__*/React__default.createElement(FormSelect$1, {
-    labelTextWhenNoError: "Role",
+  }, "User Settings"), /*#__PURE__*/React__default.createElement(FormSelect$1, {
+    labelTextWhenNoError: "User Role",
     errorMessages: roleErrorMessages,
     options: roleOptions.map(function (role) {
       return {
@@ -37184,12 +37288,12 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    disabled: disabled || roleDisabled
-  })), formType !== CREATE_CLIENT_ADMIN && /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h6",
-    weight: "700",
-    margin: "0 0 1rem"
-  }, "Select Agencies"), /*#__PURE__*/React__default.createElement(SearchableSelect$1, {
+    disabled: roleDisabled
+  }))), (formType === ADD || formType === EDIT) && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.5rem 0 1.5rem"
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "p"
+  }, "Select which agencies the user can view"), /*#__PURE__*/React__default.createElement(SearchableSelect$1, {
     actions: actions,
     fields: fields,
     items: allAgencyOptions,
@@ -37197,8 +37301,32 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     allSelected: allSelected,
     toggleSelectAllItems: toggleSelectAllAgencies,
     selectItem: selectAgency,
-    disabled: disabled
-  }))));
+    disabled: selectionDisabled
+  }))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row",
+    justify: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    text: "Cancel",
+    action: function action() {
+      if (formType !== CREATE_CLIENT_ADMIN) {
+        toggleSelectAllAgencies(false);
+      }
+
+      closeForm();
+    },
+    variant: "secondary",
+    dataQa: "Cancel",
+    extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;"
+  }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    text: "Save",
+    action: handleSubmit,
+    variant: "primary",
+    dataQa: "Save",
+    extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;"
+  })))));
 };
 
 var formConfig$5 = {
@@ -37212,10 +37340,10 @@ var formConfig$5 = {
     validators: [required()]
   },
   email: {
-    validators: [required(), isProbablyEmail()]
+    validators: [isProbablyEmail()]
   },
   role: {
-    validators: [required()]
+    validators: []
   },
   searchTerm: {
     validators: []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.3.3",
+  "version": "4.3.6",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/checkbox/Checkbox.js

@@ -92,6 +92,7 @@ const Checkbox = ({
   themeValues,
   hidden = false,
   error = false,
+  extraStyles,
   textExtraStyles
 }) => {
   const [focused, setFocused] = useState(false);
@@ -111,7 +112,7 @@ const Checkbox = ({
       onKeyDown={e => handleClick(e, onChange)}
       hiddenStyles={hidden}
       background={themeValues.backgroundColor}
-      extraStyles="outline: none;"
+      extraStyles={`outline: none; ${extraStyles}`}
     >
       <CheckboxLabelContainer>
         <CheckboxContainer data-qa="Checkbox">

package/src/components/atoms/password-requirements/PasswordRequirements.js

@@ -23,15 +23,15 @@ import {
 const PasswordRequirements = ({ password, isMobile }) => {
   const iconMap = {
     [INPUT_STATE_NEUTRAL]: {
-      icon: <IconNeutral margin="0.125rem 0.5rem 0 0" />,
+      icon: <IconNeutral margin="0 0.5rem 0 0" />,
       color: MINESHAFT_GREY
     },
     [INPUT_STATE_INVALID]: {
-      icon: <IconInvalid margin="0.125rem 0.5rem 0 0" />,
+      icon: <IconInvalid margin="0 0.5rem 0 0" />,
       color: RAZZMATAZZ_RED
     },
     [INPUT_STATE_VALID]: {
-      icon: <IconValid margin="0.125rem 0.5rem 0 0" />,
+      icon: <IconValid margin="0 0.5rem 0 0" />,
       color: FOREST_GREEN
     }
   };
@@ -83,7 +83,7 @@ const PasswordRequirements = ({ password, isMobile }) => {
                 </Box>
                 <Box padding="0">
                   <Sidebar onRight childGap="0rem">
-                    <Box padding="0rem">
+                    <Box padding="0.15rem 0 0 0">
                       <Cluster justify="flex-start" align="center">
                         <Stack fullHeight childGap="0.25rem">
                           <Paragraph

package/src/components/atoms/searchable-select/SearchableSelect.js

@@ -50,7 +50,7 @@ const SearchableSelect = ({
           errorMessages={{}}
           field={fields.searchTerm}
           fieldActions={actions.fields.searchTerm}
-          placeholder="Search departments"
+          placeholder="Search agencies"
           disabled={disabled}
         />
         <Box
@@ -67,6 +67,7 @@ const SearchableSelect = ({
                 onChange={() => handleSelect(value)}
                 textExtraStyles={`margin: 0;`}
                 disabled={disabled}
+                extraStyles={`margin: 0 0.5rem;`}
               />
             ))}
           </Stack>

package/src/components/molecules/change-password-form/ChangePasswordForm.js

@@ -13,9 +13,13 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
-import { Box, Cluster } from "../../atoms/layouts";
+import { Box, Cluster, Stack } from "../../atoms/layouts";
+import ButtonWithAction from "../../atoms/button-with-action";
+import Heading from "../../atoms/heading";
+import Text from "../../atoms/text";
 import PasswordRequirements from "../../atoms/password-requirements";
 import { noop } from "../../../util/general";
+import { GHOST_GREY } from "../../../constants/colors";
 
 const ChangePasswordForm = ({
   clearOnDismount,
@@ -23,7 +27,11 @@ const ChangePasswordForm = ({
   actions,
   handleSubmit = noop,
   showErrors,
-  isMobile
+  isMobile,
+  revenueManagement,
+  closeForm,
+  firstName,
+  lastName
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -48,43 +56,89 @@ const ChangePasswordForm = ({
   };
 
   return (
-    <FormContainer role="form" aria-label="Change password">
-      <FormInputColumn>
-        <FormInput
-          labelTextWhenNoError="Current password"
-          errorMessages={currentPasswordErrorMessages}
-          field={fields.currentPassword}
-          fieldActions={actions.fields.currentPassword}
-          showErrors={showErrors}
-          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          type="password"
-        />
-        <FormInput
-          labelTextWhenNoError="New password"
-          errorMessages={newPasswordErrorMessages}
-          field={fields.newPassword}
-          fieldActions={actions.fields.newPassword}
-          showErrors={showErrors}
-          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          type="password"
-        />
-        <FormInput
-          labelTextWhenNoError="Confirm password"
-          errorMessages={confirmNewPasswordErrorMessages}
-          field={fields.confirmNewPassword}
-          fieldActions={actions.fields.confirmNewPassword}
-          showErrors={showErrors}
-          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          type="password"
-        />
-      </FormInputColumn>
-      <Box padding={isMobile ? "1rem 0 0" : "1.5rem 0 0"}>
-        <Cluster justify="center" align="center">
-          <PasswordRequirements
-            password={fields.newPassword}
-            isMobile={isMobile}
+    <FormContainer
+      role="form"
+      aria-label="Change password"
+      extraStyles={`padding: 0;`}
+    >
+      {revenueManagement && (
+        <Box
+          padding="1.5rem"
+          borderColor={GHOST_GREY}
+          borderSize="1px"
+          borderWidthOverride={"0 0 1px 0"}
+        >
+          <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>
+      )}
+      <Box padding="1.5rem">
+        <FormInputColumn>
+          <FormInput
+            labelTextWhenNoError="Current password"
+            errorMessages={currentPasswordErrorMessages}
+            field={fields.currentPassword}
+            fieldActions={actions.fields.currentPassword}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            type="password"
           />
-        </Cluster>
+          <FormInput
+            labelTextWhenNoError="New password"
+            errorMessages={newPasswordErrorMessages}
+            field={fields.newPassword}
+            fieldActions={actions.fields.newPassword}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            type="password"
+          />
+          <FormInput
+            labelTextWhenNoError="Confirm password"
+            errorMessages={confirmNewPasswordErrorMessages}
+            field={fields.confirmNewPassword}
+            fieldActions={actions.fields.confirmNewPassword}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            type="password"
+          />
+        </FormInputColumn>
+        <Box padding={isMobile ? "1rem 0 0" : "1.5rem 0 0"}>
+          <Cluster justify="center" align="center">
+            <PasswordRequirements
+              password={fields.newPassword}
+              isMobile={isMobile}
+            />
+          </Cluster>
+        </Box>
+        {revenueManagement && (
+          <Box padding="1.5rem 0 0">
+            <Stack childGap="1rem" direction="row" justify="flex-end">
+              <ButtonWithAction
+                text="Cancel"
+                action={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>
   );

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

@@ -1,7 +1,9 @@
 import React, { useEffect } from "react";
 import { required } from "redux-freeform";
-import { Stack } from "../../atoms/layouts";
+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,
@@ -10,6 +12,7 @@ import {
 } 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";
@@ -17,6 +20,9 @@ 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",
@@ -33,22 +39,31 @@ const InternalUserInfoForm = ({
   clearOnDismount,
   showErrors,
   handleSubmit = noop,
+  closeForm,
   allAgencyOptions,
   selectedAgencies,
   allSelected,
-  toggleSelectAllAgencies,
+  toggleSelectAllAgencies = noop,
   selectAgency,
   roleOptions,
   clientOptions,
-  disabled,
   emailDisabled,
   roleDisabled,
-  formType
+  selectionDisabled,
+  formType,
+  isOktaUser,
+  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(), []);
@@ -69,9 +84,34 @@ const InternalUserInfoForm = ({
     [required.error]: "Role is required"
   };
   return (
-    <FormContainer variant={variant} role="form" aria-label="user-info-form">
-      <Stack>
-        {formType === CREATE_CLIENT_ADMIN && (
+    <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
@@ -90,7 +130,16 @@ const InternalUserInfoForm = ({
               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
@@ -118,46 +167,93 @@ const InternalUserInfoForm = ({
             fieldActions={actions.fields.email}
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-            disabled={disabled || emailDisabled}
-          />
-        </FormInputColumn>
-        <FormInputColumn>
-          <Heading variant="h6" weight="700" margin="0 0 1rem">
-            Dashboard Settings
-          </Heading>
-          <FormSelect
-            labelTextWhenNoError="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={disabled || roleDisabled}
+            disabled={emailDisabled}
           />
-        </FormInputColumn>
-        {formType !== CREATE_CLIENT_ADMIN && (
-          <FormInputColumn>
-            <Heading variant="h6" weight="700" margin="0 0 1rem">
-              Select Agencies
-            </Heading>
-            <SearchableSelect
-              actions={actions}
-              fields={fields}
-              items={allAgencyOptions}
-              selectedItems={selectedAgencies}
-              allSelected={allSelected}
-              toggleSelectAllItems={toggleSelectAllAgencies}
-              selectItem={selectAgency}
-              disabled={disabled}
+          {formType === PROFILE && !isOktaUser && (
+            <FormInput
+              labelTextWhenNoError="Password"
+              errorMessages={{}}
+              field={{ rawValue: "•••••••••••••" }}
+              disabled={true}
+              decorator={
+                <Text
+                  variant="pS"
+                  color={`#15749D`}
+                  onClick={openChangePasswordForm}
+                  extraStyles={`cursor: pointer;`}
+                >
+                  Change Password
+                </Text>
+              }
             />
-          </FormInputColumn>
+          )}
+        </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>
         )}
-      </Stack>
+        <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>
   );
 };

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

@@ -11,10 +11,10 @@ const formConfig = {
     validators: [required()]
   },
   email: {
-    validators: [required(), isProbablyEmail()]
+    validators: [isProbablyEmail()]
   },
   role: {
-    validators: [required()]
+    validators: []
   },
   searchTerm: {
     validators: []