[Publisher][Design Update] Agency Settings: Account Tab Modals (exclu…

…ding Jurisdictions) (3/5) #1257 (#1327) * made major changes to the settings page components and all that is connected * [Publisher][Design Update] Agency Settings: Settings page + Account Tab (2/5) * ran yarn lint --fix * manually removed extra space in code on AgencySettings.styles.tsx * removed unused code from AgencySettingsEmailNotifications and AgencySetting.styles * Removed all files that are in the .gitignore * removed TODO notes from AccountSettings.tsx and added suggested styling to GlobalStyles.tsx * removed unused code, replaced custom colors with colors from the palette, fixed some margin and spacing issues in the Settings.styles, AgencySettings.styles, and AccountSettings.styles files * removed custom color and used color from palette and adjusted spacing for email reminder input on AgencySettingsEmailNotifications * created custom components in AgencySettings.Styles to replace divs and spans in the AgencySettingsBasicInfo file * removed div and added styling to custom component in AgencySettings.styles * created a AgencySettingActionRequiredIndicator component and applied logic to show display component next to the section labels of AgencySettingsDescription and AgencySettingsUrl * removed duplicate input component and used an existing one from the common repo and adjusted spacing on severalelements in the AgencySettings sections. * Added flags to Input.tsx and new styles to Input.styled.tsx * Removed duplicate button componenet * used the checkboxOptions component to replace an input checkbox in AgencySettingEmailNotifications * removed unnecessary styling inheritance and made a meaningful name for CheckboxSpacingWrapper in the AgencySettings.styles, added capitialization to the values in the Sectors sectionin the AgencySettingsBasicInfo file * simplified logic on AgencySettingsActionRequiredIndicator in the AgencySettingDescription and AgencySettingsURL pages * changed a variable name * added settigsViewOptions object in prep for using common tabbed bar component * added TabbedBar component to Settings page * removed unused logic on Input.tsx * removed unused logic on Input.tsx * added close-icon-lg.svg to the assets folder * refactored const SettigsViewOptions to use the tabOptions enum in the Settings pg * removed log statement and removed const declaration from tabOptions in Settings page * moved tabOptions enum outside of the Settings function * modified label on settingViewOptions to remove underscore from Team_Members * cleaned up logic statement in AgencySettingsSupervisions * added logic to DescriptionSection in the AgencySettingsEmailNotifications * modified subpopulations modal by left-aligning options * removed const systemsToDisplayInReadMode from AgencySettingSupervisons because we no longer need the filtering that the const provided * renamed the SettingsTitle component -- SettingsTitleContainer and split the font styling between two new components, SettingsTitle and SettingsSubTitle * updated the 'Learn More' link on the Settings page to point to the set-up-metrics page * replaced styling to the NewInput component in Input.styled.tsx * removed unused code in Input component * updated tabOptions enum on Settings page * changed variable name on Settings page * updated initial value of the const currentSettingsView on the Settings page and updated GuideKey to point to AgencySetting * changed logic for the AgencySettingActionRequiredIndicator to depend on purposeAndFunctionsSetting variable * added onClickClose function option to the Modal component, added the Modal component to AccountSettings * added email edit modal to the AccountSetting page * updated Modal and Input to allow custom styling options * started adding custom styling to Modal and Input that will apply to the Settings page modals * started adding custom styling to Modal and Input that will apply to the Settings page modals * added custom styling to AccountSettings Modal and the Modal input * updated styling for the modal on AgencySettingsDescription * updated styling on AgencySettingsURL edit modal * added email validation to AccountSettings page * added email url validation and styling to the AccountSettings page * updated the validateAgencyURL logic * removed unused logic in helperUtils * ran linting * added url validation and styling to the AgencySettings page * ran linting * caught bug in validateURL logic that did not meet figma specs for valid or invalid URL * refactored regex on helpUtils validateAgencyURL function * refactored validatAgencyURL function's regex * removed hover styling on button if the logic determines that there should be agencySettingsConfigs * made adjustments to AccountSettings AccountSettingsDescription and URL according to suggestions in PR #1257 * removed unused logic from Modal.tsx. Adjusted AccountSettings and AgencyDescription modals to not persist invalid email or URL on the UI * adjusted AccountSettings, AgencySettingsDescription, and AgencySettingURL modal * removed uneccessary logic from validateEmail function in helperUtils and refactored modal logic in AccountSettings * updated AgencySettingSupervisions and UnsavedChanges modals according to figma docs * ran linting * refactored title and searchbar area of AgencySettingsJurisdictions page * finished refactoring of searchbar for AgencySettingsJurisdictions page * finished refactoring of searchbar for AgencySettingsJurisdictions page * removed opacity setting on Button component * adjusted the logic in the onClickClose function on the AccountSettings page * renamed editModeAndTypeUpdate function to resetEditModeTypeStates and moved some of its functionality to a new function called validateUpdateEmailErrorStates on the AccountSettings page * updated spacing to all agency and account settings modals * updated validation of URL and Email to check validation on change * ran linting * cleaned up logic on AgencySettings pages removed unused code * fixed bug in AgencySettingURL error checking logic and removed the cancel button from AgencySettingsJurisdictions modal
Recidiviz · May 21, 2024 · 5deca19 · 5deca19
1 parent aff8617
commit 5deca19
Show file tree

Hide file tree

Showing 15 changed files with 811 additions and 453 deletions.
diff --git a/common/components/Button/Button.styled.tsx b/common/components/Button/Button.styled.tsx
@@ -38,6 +38,7 @@ export const Button = styled.div<{
   noSidePadding?: boolean;
   noTopBottomPadding?: boolean;
   noHover?: boolean;
+  agencySettingsConfigs?: boolean;
 }>`
   ${({ size }) => (size ? typography.sizeCSS[size] : typography.body)};
   display: flex;
@@ -46,7 +47,8 @@ export const Button = styled.div<{
   border-radius: 3px;
   gap: 8px;
   white-space: nowrap;
-  min-width: 80px;
+  min-width: ${({ agencySettingsConfigs }) =>
+    agencySettingsConfigs ? "unset" : "80px"};
   pointer-events: ${({ disabled }) => disabled && "none"};
   background-color: ${({ buttonColor, disabled }) => {
     if (disabled) return palette.highlight.grey3;
@@ -66,7 +68,17 @@ export const Button = styled.div<{
     }
     return "none";
   }};
-  padding: ${({ size }) => (size === "medium" ? "16px 32px" : "10px 15px")};
+
+  padding: ${({ size, agencySettingsConfigs }) => {
+    if (agencySettingsConfigs) {
+      return "0";
+    }
+    if (size) {
+      return "16px 32px";
+    }
+    return "10px 15px";
+  }};
+
   ${({ noSidePadding }) =>
     noSidePadding && "padding-left: 0; padding-right: 0;"}
   ${({ noTopBottomPadding }) =>
@@ -79,8 +91,9 @@ export const Button = styled.div<{
         return `color: ${palette.solid.darkblue}`;
       }
     }};
-    ${({ buttonColor, noHover }) => {
+    ${({ buttonColor, noHover, agencySettingsConfigs }) => {
       if (buttonColor) return "opacity: 0.8;";
+      if (agencySettingsConfigs) return "opacity: unset";
       return !noHover && `background-color: ${palette.solid.lightgrey2};`;
     }}
     a {

diff --git a/common/components/Button/Button.tsx b/common/components/Button/Button.tsx
@@ -39,6 +39,7 @@ export type ButtonProps = {
   noTopBottomPadding?: boolean;
   noHover?: boolean;
   tooltipMsg?: string;
+  agencySettingsConfigs?: boolean;
 };
 
 export function Button({
@@ -54,6 +55,7 @@ export function Button({
   noTopBottomPadding,
   noHover,
   tooltipMsg,
+  agencySettingsConfigs,
 }: ButtonProps) {
   return (
     <Styled.ButtonWrapper id={id}>
@@ -67,6 +69,7 @@ export function Button({
         noSidePadding={noSidePadding}
         noTopBottomPadding={noTopBottomPadding}
         noHover={noHover}
+        agencySettingsConfigs={agencySettingsConfigs}
       >
         {label}
       </Styled.Button>

diff --git a/common/components/Input/Input.styled.tsx b/common/components/Input/Input.styled.tsx
@@ -258,8 +258,9 @@ export const NewInputLabel = styled.label<{ error: boolean }>`
   `};
 `;
 
-export const ErrorMessage = styled.div`
+export const ErrorMessage = styled.div<{ settingsCustomMargin?: boolean }>`
   ${typography.body}
   color: ${palette.solid.red};
-  margin-top: -4px;
+  margin-top: ${({ settingsCustomMargin }) =>
+    settingsCustomMargin ? "-4px" : "8px"};
 `;
diff --git a/common/components/Input/Input.tsx b/common/components/Input/Input.tsx
@@ -28,7 +28,7 @@ import * as Styled from "./Input.styled";
 import { InputTextSize, NotReportedIconTooltipProps } from "./types";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label: string;
+  label?: string;
   noBottomMargin?: boolean;
   error?: FormError;
   valueLabel?: string;
@@ -41,6 +41,8 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   textSize?: InputTextSize;
   hideLabel?: boolean;
   fullWidth?: boolean;
+  agencySettingsConfigs?: boolean;
+  settingsCustomMargin?: boolean;
 }
 
 export function Input({
@@ -197,6 +199,8 @@ export function NewInput({
   metricKey,
   hideLabel,
   fullWidth,
+  agencySettingsConfigs,
+  settingsCustomMargin,
   ...props
 }: InputProps) {
   return (
@@ -219,7 +223,11 @@ export function NewInput({
         error={Boolean(error)}
         fullWidth={fullWidth}
       />
-      {error && <Styled.ErrorMessage>{error.message}</Styled.ErrorMessage>}
+      {error && (
+        <Styled.ErrorMessage settingsCustomMargin={settingsCustomMargin}>
+          {error.message}
+        </Styled.ErrorMessage>
+      )}
     </Styled.NewInputWrapper>
   );
 }
diff --git a/common/components/Modal/Modal.styled.tsx b/common/components/Modal/Modal.styled.tsx
@@ -61,6 +61,7 @@ export const InnerWrapper = styled.div<{
   modalType?: ModalType;
   centerText?: boolean;
   customPadding?: string;
+  noBottomDiv?: boolean;
 }>`
   background-color: ${palette.solid.white};
   width: 100%;
@@ -71,6 +72,11 @@ export const InnerWrapper = styled.div<{
   ${({ centerText }) => centerText && `align-items: center;`};
   border-radius: 3px;
   ${centerTextCSS}
+  ${({ noBottomDiv }) => {
+    if (noBottomDiv) {
+      return `& > div:last-child {display: none;}`;
+    }
+  }};
 `;
 
 export const Icon = styled.img`
@@ -79,21 +85,45 @@ export const Icon = styled.img`
   margin-bottom: 24px;
 `;
 
-export const Title = styled.div<{ mediumTitle?: boolean }>`
+export const Title = styled.div<{
+  mediumTitle?: boolean;
+}>`
   ${({ mediumTitle }) =>
-    mediumTitle ? typography.sizeCSS.medium : typography.sizeCSS.large};
+    mediumTitle
+      ? `${typography.sizeCSS.medium}`
+      : `${typography.sizeCSS.large}`};
+  margin-top: 16px;
   margin-bottom: 16px;
+  a {
+    color: ${palette.solid.blue};
+    text-decoration: none;
+  }
+`;
 
+export const AgencySettingsAndJurisdictionsTitle = styled.div`
+  ${typography.bodyEmphasized}
+  margin-bottom: 16px;
+  margin-top: 16px;
   a {
     color: ${palette.solid.blue};
     text-decoration: none;
   }
 `;
 
-export const Description = styled.div<{ centerText?: boolean }>`
+export const Description = styled.div<{
+  centerText?: boolean;
+  unsetTextAlignment?: boolean;
+}>`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: ${({ centerText, unsetTextAlignment }) => {
+    if (centerText) {
+      return `align-items: center;`;
+    }
+    if (unsetTextAlignment) {
+      return `align-items: unset;`;
+    }
+  }};
   ${typography.sizeCSS.normal};
 `;
 
@@ -104,7 +134,6 @@ export const ButtonsContainer = styled.div<{
   width: 100%;
   display: flex;
   gap: 12px;
-
   ${({ modalType, centerButtons }) => {
     if (centerButtons) return "justify-content: center; margin-top: 72px;";
     if (modalType) return "justify-content: space-between; margin-top: 72px;";
@@ -116,3 +145,26 @@ export const ButtonsContainer = styled.div<{
     margin-left: auto;
   }
 `;
+
+export const UnsavedChangesButtonsContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: end;
+  gap: 16px;
+  margin-top: 24px;
+  & > div:first-child {
+    div {
+      border: none;
+    }
+  }
+`;
+
+export const ModalTitleWrapper = styled.div<{
+  typographyBodyEmphasized?: boolean;
+}>`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  ${({ typographyBodyEmphasized }) =>
+    typographyBodyEmphasized ? `${typography.bodyEmphasized}` : ""};
+`;
diff --git a/common/components/Modal/Modal.tsx b/common/components/Modal/Modal.tsx
@@ -19,6 +19,7 @@ import React, { useEffect } from "react";
 import { createPortal } from "react-dom";
 
 import alertIcon from "../../assets/alert-icon.png";
+import xCloseLg from "../../assets/close-icon-lg.svg";
 import successIcon from "../../assets/success-icon.png";
 import warningIcon from "../../assets/warning-icon.svg";
 import { Button, ButtonColor } from "../Button";
@@ -36,6 +37,12 @@ type ModalProps = Partial<{
   mediumTitle: boolean;
   customPadding?: string;
   children?: React.ReactNode;
+  onClickClose?: () => void;
+  agencySettingsConfigs?: boolean;
+  unsavedChangesConfigs?: boolean;
+  jurisdictionsSettingsConfigs?: boolean;
+  agencySettingsAndJurisdictionsTitleConfigs?: boolean;
+  noBottomDiv?: boolean;
 }>;
 
 export function Modal({
@@ -49,6 +56,11 @@ export function Modal({
   mediumTitle,
   customPadding,
   children,
+  onClickClose,
+  unsavedChangesConfigs,
+  jurisdictionsSettingsConfigs,
+  agencySettingsAndJurisdictionsTitleConfigs,
+  noBottomDiv,
 }: ModalProps) {
   const primaryButtonColor = (): ButtonColor => {
     if (modalType === "alert") return "red";
@@ -71,28 +83,67 @@ export function Modal({
           modalType={modalType}
           centerText={centerText}
           customPadding={customPadding}
+          noBottomDiv={noBottomDiv}
         >
           {modalType === "success" && <Styled.Icon src={successIcon} alt="" />}
           {modalType === "warning" && <Styled.Icon src={warningIcon} alt="" />}
           {modalType === "alert" && <Styled.Icon src={alertIcon} alt="" />}
-          <Styled.Title mediumTitle={mediumTitle}>{title}</Styled.Title>
-          <Styled.Description>{description}</Styled.Description>
-          <Styled.ButtonsContainer modalType={modalType}>
-            {buttons?.map((button, index) => (
+          <Styled.ModalTitleWrapper typographyBodyEmphasized>
+            {agencySettingsAndJurisdictionsTitleConfigs && (
+              <Styled.AgencySettingsAndJurisdictionsTitle>
+                {title}
+              </Styled.AgencySettingsAndJurisdictionsTitle>
+            )}
+            {!agencySettingsAndJurisdictionsTitleConfigs && (
+              <Styled.Title mediumTitle={mediumTitle}>{title}</Styled.Title>
+            )}
+            {onClickClose && (
               <Button
-                label={button.label}
-                onClick={button.onClick}
-                borderColor={
-                  index === buttons.length - 1 ? undefined : "lightgrey"
-                }
-                buttonColor={
-                  index === buttons.length - 1
-                    ? primaryButtonColor()
-                    : undefined
-                }
+                label={<img src={xCloseLg} alt="Close Button" />}
+                onClick={onClickClose}
+                agencySettingsConfigs
               />
-            ))}
-          </Styled.ButtonsContainer>
+            )}
+          </Styled.ModalTitleWrapper>
+          <Styled.Description unsetTextAlignment={jurisdictionsSettingsConfigs}>
+            {description}
+          </Styled.Description>
+          {!unsavedChangesConfigs && (
+            <Styled.ButtonsContainer modalType={modalType}>
+              {buttons?.map((button, index) => (
+                <Button
+                  label={button.label}
+                  onClick={button.onClick}
+                  borderColor={
+                    index === buttons.length - 1 ? undefined : "lightgrey"
+                  }
+                  buttonColor={
+                    index === buttons.length - 1
+                      ? primaryButtonColor()
+                      : undefined
+                  }
+                />
+              ))}
+            </Styled.ButtonsContainer>
+          )}
+          {unsavedChangesConfigs && (
+            <Styled.UnsavedChangesButtonsContainer>
+              {buttons?.map((button, index) => (
+                <Button
+                  label={button.label}
+                  onClick={button.onClick}
+                  borderColor={
+                    index === buttons.length - 1 ? undefined : "lightgrey"
+                  }
+                  buttonColor={
+                    index === buttons.length - 1
+                      ? primaryButtonColor()
+                      : undefined
+                  }
+                />
+              ))}
+            </Styled.UnsavedChangesButtonsContainer>
+          )}
         </Styled.InnerWrapper>
       )}
     </Styled.OuterWrapper>

diff --git a/common/utils/helperUtils.ts b/common/utils/helperUtils.ts
@@ -277,6 +277,11 @@ export const validateEmail = (email: string) => {
   );
 };
 
+export const validateAgencyURL = (url: string) => {
+  const urlRegex = /^(?:(?:https?|ftp):\/\/)?[\w.-]+\.[a-zA-Z]{2,}(?:\/\S*)?$/;
+  return urlRegex.test(url);
+};
+
 /**
  * Updates a set of selections by either adding or removing a specified item.
  * @param prevSet - The previous set of selected items to update