[Publisher][Design Update] Agency Settings: Account Tab Modals (excluding Jurisdictions) (3/5) #1257

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 {

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>

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"};
 `;

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>
   );
 }

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}` : ""};
+`;

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>

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