setShowForm(true)}\n />\n )}\n {showForm && (\n \n
\n
Add a new person
\n
setShowForm(false)}\n onKeyDown={() => setShowForm(false)}\n >\n REMOVE\n \n \n {existingPerson && (\n
\n Is this the person you're looking for?
\n {}}\n />\n \n setExistingPerson(null)}\n onKeyDown={() => setExistingPerson(null)}\n >\n No, wrong person.\n \n handleExistingPerson(existingPerson)}\n onKeyDown={() => handleExistingPerson(existingPerson)}\n >\n Yes\n \n \n handleChange(e)}\n >\n \n
\n \n handleChange(e)}\n >\n \n
\n \n handleChange(e)}\n >\n \n
\n {showDetails && (\n <>\n setShowDetails(false)}\n onKeyDown={() => setShowDetails(false)}\n role=\"button\"\n tabIndex={0}\n >\n Hide Details\n \n \n \n US Mailing Address
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n )}\n {loading && (\n \n )}\n \n
\n
createPerson()}\n style={{\n border: `1px solid ${blue}`,\n width: \"6rem\",\n marginLeft: \"auto\",\n gridColumn: 2\n }}\n >\n Save\n \n {user.fullName}
\n {user.email}\n
\n \n
\n \n Sign Out\n \n \n );\n}\n","import { useState } from \"react\";\n\nexport function usePagination(data, ipp) {\n const [currentPage, setCurrentPage] = useState(1);\n const [itemsPerPage, setItemsPerPage] = useState(ipp);\n const maxPage = Math.ceil(data.length / itemsPerPage);\n\n const nextPage = () => setCurrentPage(cp => Math.min(cp + 1, maxPage));\n\n const prevPage = () => setCurrentPage(cp => Math.max(cp - 1, 1));\n\n const currentData = () => {\n const start = (currentPage - 1) * itemsPerPage;\n const end = start + itemsPerPage;\n return data.slice(start, end);\n };\n\n const showAll = () => {\n setCurrentPage(1);\n setItemsPerPage(data.length);\n };\n\n const repaginate = () => setItemsPerPage(ipp);\n\n const startIndex = (currentPage - 1) * itemsPerPage + 1;\n\n const endIndex = Math.min(startIndex + itemsPerPage - 1, data.length);\n\n return {\n nextPage,\n prevPage,\n currentData,\n currentPage,\n setCurrentPage,\n showAll,\n repaginate,\n maxPage,\n startIndex,\n endIndex\n };\n}\n","/* eslint-disable react/destructuring-assignment */\nimport React from \"react\";\n\nexport default function Select(props) {\n /*\n Props: {\n options* List of label and value pairs to populate the select field\n value Default value applied to the component\n name* Name to be applied to the field\n placeholder Default first option in the list\n onSelect Callback function to be executed onChange of the select input\n }\n */\n\n const optionsForSelect = props.options.map(option => {\n let label;\n let value;\n if (typeof option === \"object\" && option.length > 1) {\n [label, value] = option;\n } else {\n label = option;\n value = option;\n }\n return (\n \n );\n });\n const placeholder = props.placeholder || \"Please select one\";\n\n return (\n props.onSelect(e)}\n >\n \n {optionsForSelect}\n \n );\n}\n","import React from \"react\";\nimport RadioButton from \"./RadioButton\";\n\nexport default function RadioButtonGroup(props) {\n /*\n Props: {\n options: array of options\n value: existing value if any\n name: name of the attribute being passed to the server\n onChange: function of how to handle change\n labelClassName: class to be applied to the label\n }\n */\n\n return props.options.map(option => {\n const [label, value] = option;\n const attributeValue = props.value;\n return (\n \n );\n });\n}\n","import React, { useState, useMemo, useCallback } from \"react\";\nimport DataListInput from \"../DataListInput/DataListInput\";\n\nexport default function AutoSuggest(props) {\n const {\n items,\n label,\n placeholder = \"Select an option from the drop down menu...\",\n initialValue,\n handleSelect,\n handleInputChange,\n inputComponent\n } = props;\n // selectedItem\n const [, setSelectedItem] = useState();\n\n const onSelect = useCallback(selected => {\n setSelectedItem(selected);\n handleSelect(selected);\n }, []);\n\n const onInput = useCallback(value => {\n // clear selected item when input value changes\n handleSelect({});\n handleInputChange(value);\n });\n\n // the array you want to pass to the react-data-list component\n // key and label are required properties\n const memoizedItems = useMemo(\n () =>\n items.map(item => ({\n // required: what to show to the user\n label: item.label,\n // required: key to identify the item within the array\n key: item.id,\n // feel free to add your own app logic to access those properties in the onSelect function\n someAdditionalValue: item.someAdditionalValue,\n // or just keep everything\n ...item\n })),\n [items]\n );\n\n return (\n <>\n \n \n );\n}\n","export const generateDocumentReducer = (state, action) => {\n switch (action.type) {\n case \"GENERATE_STARTED\": {\n return {\n ...state,\n loading: true,\n generated: false,\n popupMessage: null,\n popupType: null\n };\n }\n case \"GENERATE_COMPLETE\": {\n return {\n ...state,\n generated: true,\n response: action.response,\n popupMessage: \"Your document was successfully generated.\",\n popupType: \"success\",\n loading: false\n };\n }\n case \"GENERATE_ERROR\": {\n return {\n ...state,\n generated: false,\n popupMessage: `Your document could not be generated. ${action.popupMessage}`,\n popupType: \"error\",\n loading: false\n };\n }\n default: {\n return state;\n }\n }\n};\n","import styled from \"styled-components\";\nimport {\n gray,\n grayDarkest,\n grayLight,\n red,\n white\n} from \"../../../styles/colors\";\n\nexport const ContextMenu = styled.div`\n background: ${white};\n border-radius: 2px;\n width: auto;\n height: auto;\n box-shadow: 0px 3px 5px ${gray};\n\n a {\n padding: 1rem;\n height: 100%;\n width: 100%;\n color: ${grayDarkest};\n &:visited {\n color: ${grayDarkest};\n }\n :last-child {\n color: ${red};\n }\n }\n\n hr {\n margin: 0;\n height: 1px;\n background-color: ${grayLight};\n border: none;\n }\n`;\n","import React, { createContext, useState, useContext } from \"react\";\n\nconst DashboardContext = createContext(null);\n\nexport const useDashboardContext = () => {\n const dashboardContext = useContext(DashboardContext);\n\n if (dashboardContext === null) {\n throw new Error(\n \"useDashboardContext must be used within a DashboardContextProvider tag\"\n );\n }\n return dashboardContext;\n};\n\nexport function DashboardContextProvider({ children }) {\n // this is the global state store for the client dashboard\n const [state, setState] = useState(null);\n\n return (\n \n {children}\n \n );\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { useHotkeys } from \"../../../hooks/useHotKeys\";\nimport { useOnClickOutside } from \"../../../hooks/useOnClickOutside\";\n\nconst Container = styled.div`\n padding: 1.5rem;\n display: grid;\n grid-template-rows: 6fr 1fr;\n background: white;\n border: none;\n border-radius: 6px;\n flex-shrink: 0;\n position: fixed;\n animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;\n z-index: 100;\n width: auto;\n height: auto;\n\n box-shadow: 0px 6px 6px 0px 0, 0, 0, 0.75;\n\n @media (min-width: 900px) {\n width: 42rem;\n height: 26rem;\n }\n`;\n\nconst Overlay = styled.div`\n z-index: 10;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: rgb(58, 72, 97, 0.37);\n\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport default function ProgressTrackerModal({ show, cleanup, children }) {\n const [modalVisible, setModalVisible] = useState(true);\n const [shouldRender, setRender] = useState(show);\n\n const containerRef = useRef();\n\n useOnClickOutside(containerRef, () => {\n setModalVisible(false);\n cleanup();\n });\n\n useHotkeys(\"esc\", () => {\n setModalVisible(false);\n cleanup();\n });\n\n useEffect(() => {\n if (show) setRender(true);\n }, [show]);\n\n const onAnimationEnd = () => {\n if (!show) setRender(false);\n };\n\n if (modalVisible)\n return (\n \n {shouldRender && (\n \n {children}\n \n )}\n \n );\n return null;\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useState } from \"react\";\nimport Collapse from \"react-css-collapse\";\nimport styled from \"styled-components\";\nimport { grayDarker } from \"../../../styles/colors\";\n\nconst Container = styled.div`\n header {\n display: flex;\n align-items: baseline;\n color: ${grayDarker};\n cursor: pointer;\n outline: none;\n h4 {\n font-weight: 400px;\n }\n }\n i {\n width: 36px;\n }\n button {\n width: 100%;\n padding: 1rem;\n }\n`;\nexport default function Dropdown(props) {\n const { name, children } = props;\n\n const [dropdownOpen, setDropdownOpen] = useState(true);\n\n return (\n \n setDropdownOpen(!dropdownOpen)}\n onKeyDown={() => setDropdownOpen(!dropdownOpen)}\n >\n \n {name}
\n \n \n {children}\n \n \n );\n}\n","/* eslint-disable import/no-unresolved */\n/* eslint-disable global-require */\nimport React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"styled-components\";\nimport { NavLink } from \"react-router-dom\";\nimport UserMenu from \"../UserMenu/UserMenu\";\nimport UserAvatar from \"../UserAvatar\";\nimport { avatarInitials } from \"../../../utils/userHelpers\";\nimport {\n blue,\n grayDark,\n grayDarker,\n grayDarkest,\n grayLighter\n} from \"../../../styles/colors\";\nimport { formHeaders } from \"../../../utils/form\";\n\nconst NavIcon = styled.img`\n margin-right: 1.5rem;\n cursor: pointer;\n`;\n\nconst Drawer = styled.nav`\n &&& {\n position: fixed;\n top: 64;\n left: 0;\n z-index: 10;\n padding: 1.5rem;\n height: 100%;\n width: 14rem;\n display: flex;\n flex-direction: column;\n background-color: ${grayLighter};\n box-shadow: 0px 6px 0px ${grayLighter};\n\n a {\n font-size: 1em;\n color: ${grayDarker};\n font-weight: 300;\n &:hover {\n color: ${blue};\n }\n margin: 0.5rem 0;\n\n i {\n width: 0.5rem;\n margin-right: 1.5rem;\n }\n }\n }\n`;\n\nconst MenuItem = styled.a`\n &&& {\n font-weight: ${props => (props.isActive ? 600 : 300)} !important;\n }\n`;\n\nconst Overlay = styled.div`\n z-index: 9;\n position: fixed;\n top: 64;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n background-color: black;\n`;\n\nfunction NavDrawer(props) {\n const { useBrowserRouter } = props;\n const { pathname } = window.location;\n\n return (\n \n \n \n \n \n \n \n Help Center\n \n {!useBrowserRouter && (\n <>\n \n \n New Deal\n \n \n \n \n Services\n \n \n \n Workflows\n \n \n )}\n {/* use react router when possible for speedy transitions */}\n {/* common nav must be wrapped in `` */}\n {useBrowserRouter && (\n <>\n \n \n New Deal\n \n\n \n \n Deals\n \n\n \n \n Services\n \n\n \n \n Workflows\n \n \n )}\n \n );\n}\n\nexport default function CommonNav(props) {\n const {\n home = { text: \"Legalpad\", href: \"/petitions\" },\n title = null,\n subTitle = null,\n useBrowserRouter = false\n } = props;\n\n const { pathname } = window.location;\n\n const parsedTitle = pathname.split(\"/\")[2];\n\n const [user, setUser] = useState({});\n\n const [navVisible, setNavVisible] = useState(false);\n\n const [showUserMenu, setShowUserMenu] = useState(false);\n\n useEffect(() => {\n setNavVisible(false);\n }, [pathname]);\n\n useEffect(() => {\n const fetchUser = async () => {\n try {\n const url = Routes.users_current_path();\n\n const response = await fetch(url, {\n method: \"GET\",\n headers: formHeaders()\n });\n\n if (!response.ok) {\n alert(\"Something went wrong fetching the current user\");\n }\n\n if (response.ok) {\n const json = await response.json();\n setUser(json);\n }\n } catch (error) {\n alert(error);\n }\n };\n fetchUser();\n }, []);\n\n return (\n <>\n \n {navVisible && (\n <>\n \n setNavVisible(!navVisible)} />\n \n )}\n \n );\n}\n\nCommonNav.propTypes = {\n home: PropTypes.object,\n title: PropTypes.object\n};\n","import React from \"react\";\n\nexport default function RadioButton(props) {\n /*\n Props: {\n name: name of the attribute being passed to the server\n label: display name of the radio button option\n value: value to be sent to the server\n onChange: function of how to handle change\n defaultChecked: True/False if the radio button should be checked\n labelClassName: class to be applied to the label\n }\n */\n\n const { labelClassName, label, ...inputProps } = props;\n return (\n \n );\n}\n","import styled from \"styled-components\";\nimport { blue, gray, grayLight, white } from \"../../../styles/colors\";\n\nexport const IndexRow = styled.tr`\n :first-child {\n div,\n th {\n cursor: pointer;\n text-align: left;\n font-weight: 500;\n :last-child {\n margin-right: -0.5rem;\n }\n }\n padding: 1rem;\n }\n\n &:not(:first-child) {\n background: ${white};\n border: 1px solid ${grayLight};\n border-radius: 8px;\n margin-bottom: 1rem;\n border-left: 4px solid transparent;\n\n &:hover {\n border-left: 4px solid ${blue};\n box-shadow: 0px 3px 5px ${gray};\n cursor: ${props => (props.clickable ? \"pointer\" : \"\")};\n }\n }\n .actions {\n text-align: right;\n button {\n display: inline-block;\n }\n }\n\n display: grid;\n justify-content: center;\n align-items: center;\n grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));\n column-gap: 0.5rem;\n padding: 1rem;\n\n td:not(:last-child) {\n max-width: max(10rem, 100%);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default function FileUpload(props) {\n const { attribute = {}, setLoading, filesPresent = false } = props;\n\n const handleChange = e => {\n setLoading(true);\n props.handleUpload(e);\n };\n\n const inputId = Math.random();\n\n return (\n <>\n \n \n \n handleChange(e)}\n />\n \n \n );\n}\n\nFileUpload.propTypes = {\n attribute: PropTypes.object,\n setLoading: PropTypes.func,\n // eslint-disable-next-line react/boolean-prop-naming\n filesPresent: PropTypes.bool\n};\n","import PropTypes from \"prop-types\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { Checkbox } from \"./Checkbox\";\n\nconst Label = styled.label`\n display: flex;\n align-items: baseline;\n`;\n\nexport default function CheckBoxItem(props) {\n const { checked, handleChange, text, name, value } = props;\n return (\n \n );\n}\n\nCheckBoxItem.propTypes = {\n // eslint-disable-next-line react/boolean-prop-naming\n checked: PropTypes.bool,\n handleChange: PropTypes.func,\n text: PropTypes.string,\n name: PropTypes.string\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\n\nconst CheckboxContainer = styled.div`\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n`;\n\nconst Icon = styled.svg`\n fill: none;\n stroke: white;\n stroke-width: 2px;\n`;\n// Hide checkbox visually but remain accessible to screen readers.\n// Source: https://polished.js.org/docs/#hidevisually\nconst HiddenCheckbox = styled.input.attrs({ type: \"checkbox\" })`\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n\nconst StyledCheckbox = styled.div`\n display: inline-block;\n width: 16px;\n height: 16px;\n background: ${props => (props.checked ? \"#2680FA\" : \"white\")};\n border: 1px solid #b9bfcb;\n border-radius: 3px;\n transition: all 150ms;\n\n ${Icon} {\n visibility: ${props => (props.checked ? \"visible\" : \"hidden\")};\n }\n`;\n\nexport const Checkbox = ({ className, checked, ...props }) => (\n \n \n \n \n \n \n \n \n);\n","export const fetchReducer = (state, action) => {\n switch (action.type) {\n case \"FETCH_STARTED\": {\n return {\n ...state,\n loading: true,\n success: false,\n response: null\n };\n }\n case \"FETCH_COMPLETE\": {\n return {\n ...state,\n loading: false,\n success: true,\n response: action.response\n };\n }\n case \"FETCH_ERROR\": {\n return {\n ...state,\n loading: false,\n success: false\n };\n }\n default: {\n return state;\n }\n }\n};\n","import React, {\n useState,\n useRef,\n useEffect,\n useCallback,\n useMemo\n} from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"styled-components\";\nimport useStateRef from \"./useStateRef\";\n\nconst Container = styled.div`\n .datalist-input {\n /*the container must be positioned relative:*/\n position: relative;\n display: inline-block;\n width: 100%;\n }\n\n .datalist-input .autocomplete-input {\n width: 100%;\n }\n\n .datalist-input .datalist-items {\n position: absolute;\n z-index: 99;\n /*position the autocomplete items to be the same width as the container:*/\n top: 100%;\n left: 0;\n right: 0;\n border-radius: 0 0 4px 4px;\n max-height: 24rem;\n overflow: auto;\n div:last-child {\n border-radius: 0 0 4px 4px;\n }\n }\n\n .datalist-input .default-datalist-items {\n border: 1px solid #d4d4d4;\n border-bottom: none;\n border-top: none;\n }\n\n .datalist-input .default-datalist-items div:not(.datalist-active-item) {\n padding: 10px;\n cursor: pointer;\n background-color: #fff;\n border-bottom: 1px solid #d4d4d4;\n }\n\n .datalist-input .default-datalist-items div:not(.datalist-active-item):hover {\n /*when hovering an item:*/\n background-color: #e9e9e9;\n }\n\n .datalist-input .datalist-active-item {\n /*when navigating through the items using the arrow keys:*/\n cursor: pointer;\n }\n\n .datalist-input .datalist-active-item-default {\n background-color: #2680fa;\n color: #ffffff;\n border-bottom: 1px solid #d4d4d4;\n padding: 10px;\n }\n`;\n\n/**\n * default matching function\n * @param currentInput\n * @param item\n * @returns {boolean}\n */\nconst labelMatch = (currentInput, item) =>\n item.label?.toLowerCase().includes(currentInput.toLowerCase());\n\n/**\n * function for getting the index of the currentValue inside a value of the values array\n * @param currentInput\n * @param item\n * @returns {number}\n */\nconst indexOfMatch = (currentInput, item) =>\n item.label.toLowerCase().indexOf(currentInput.toLowerCase());\n\n/**\n * index of item in items\n * @param {*} item\n * @param {*} items\n */\nconst indexOfItem = (item, items) =>\n items.indexOf(items.find(i => i.key === item.key));\n\nconst DataListInput = ({\n activeItemClassName,\n clearInputOnSelect,\n debounceLoader,\n debounceTime,\n dropdownClassName,\n dropDownLength,\n initialValue,\n inputClassName,\n itemClassName,\n match,\n onDropdownClose,\n onDropdownOpen,\n onInput,\n onSelect,\n label,\n placeholder,\n requiredInputLength,\n suppressReselect,\n items,\n inputComponent\n}) => {\n /* last valid item that was selected from the drop down menu */\n const [lastValidItem, setLastValidItem] = useState();\n /* current input text */\n const [currentInput, setCurrentInput, currentInputRef] = useStateRef(\n initialValue\n );\n /* current set of matching items */\n const [matchingItems, setMatchingItems] = useState([]);\n /* visibility property of the drop down menu */\n const [visible, setVisible, visibleRef] = useStateRef(false);\n /* index of the currently focused item in the drop down menu */\n const [focusIndex, setFocusIndex] = useState(0);\n /* cleaner click events, click interaction within dropdown menu */\n const interactionHappenedRef = useRef(false);\n /* show loader if still matching in debounced mode */\n const [isMatchingDebounced, setIsMatchingDebounced] = useState(false);\n\n /* to manage debouncing of matching, typing input into the input field */\n const inputHappenedTimeout = useRef();\n const menu = useRef();\n const inputField = useRef();\n\n useEffect(() => {\n const onClickCloseMenu = event => {\n if (!menu.current) return;\n // if rerender, items inside might change, allow one click without further checking\n if (interactionHappenedRef.current) {\n interactionHappenedRef.current = false;\n return;\n }\n // do not do anything if input is clicked, as we have a dedicated func for that\n if (!inputField.current) return;\n const targetIsInput = event.target === inputField.current;\n const targetInInput = inputField.current.contains(event.target);\n if (targetIsInput || targetInInput) return;\n\n // do not close menu if user clicked inside\n const targetInMenu = menu.current.contains(event.target);\n const targetIsMenu = event.target === menu.current;\n if (targetInMenu || targetIsMenu) return;\n\n if (visibleRef.current) {\n setVisible(false);\n setFocusIndex(-1);\n onDropdownClose();\n }\n };\n window.addEventListener(\"click\", onClickCloseMenu, false);\n return () => {\n window.removeEventListener(\"click\", onClickCloseMenu);\n };\n }, [onDropdownClose, setVisible, visibleRef]);\n\n useEffect(() => {\n // if we have an initialValue, we want to reset it everytime we update and are empty\n // also setting a new initialValue will trigger this\n if (!currentInput && initialValue && !visible && !isMatchingDebounced) {\n setCurrentInput(initialValue);\n }\n }, [\n currentInput,\n visible,\n isMatchingDebounced,\n initialValue,\n setCurrentInput\n ]);\n\n /**\n * runs the matching process of the current input\n * and handles debouncing the different callback calls to reduce lag time\n * for bigger datasets or heavier matching algorithms\n * @param nextInput\n */\n const debouncedMatchingUpdateStep = useCallback(\n nextInput => {\n // cleanup waiting update step\n if (inputHappenedTimeout.current) {\n clearTimeout(inputHappenedTimeout.current);\n inputHappenedTimeout.current = null;\n }\n\n // set nextInput into input field and show loading if debounced mode is on\n const reachedRequiredLength = nextInput.length >= requiredInputLength;\n const showMatchingStillLoading =\n debounceTime >= 0 && reachedRequiredLength;\n setCurrentInput(nextInput);\n setIsMatchingDebounced(showMatchingStillLoading);\n // no matching if we do not reach required input length\n if (!reachedRequiredLength) return;\n\n const updateMatchingItems = () => {\n // matching process to find matching entries in items array\n const updatedMatchingItems = items.filter(item => {\n if (typeof match === typeof Function) return match(nextInput, item);\n return labelMatch(nextInput, item);\n });\n const displayableItems = updatedMatchingItems.slice(0, dropDownLength);\n const showDragIndex = lastValidItem && !clearInputOnSelect;\n const index = showDragIndex\n ? indexOfItem(lastValidItem, displayableItems)\n : 0;\n if (displayableItems.length) {\n if (!visibleRef.current) {\n onDropdownOpen();\n }\n setMatchingItems(displayableItems);\n setFocusIndex(index > 0 ? index : 0);\n setIsMatchingDebounced(false);\n setVisible(true);\n } else {\n if (visibleRef.current) {\n setVisible(false);\n onDropdownClose();\n }\n setMatchingItems(displayableItems);\n setFocusIndex(-1);\n setIsMatchingDebounced(false);\n }\n };\n\n if (debounceTime <= 0) {\n updateMatchingItems();\n } else {\n inputHappenedTimeout.current = setTimeout(\n updateMatchingItems,\n debounceTime\n );\n }\n },\n [\n requiredInputLength,\n debounceTime,\n setCurrentInput,\n items,\n dropDownLength,\n lastValidItem,\n clearInputOnSelect,\n match,\n setVisible,\n onDropdownOpen,\n visibleRef,\n onDropdownClose\n ]\n );\n\n /**\n * gets called when someone starts to write in the input field\n * @param value\n */\n const onHandleInput = useCallback(\n event => {\n const { value } = event.target;\n debouncedMatchingUpdateStep(value);\n onInput(value);\n },\n [debouncedMatchingUpdateStep, onInput]\n );\n\n const onClickInput = useCallback(() => {\n let value = currentInputRef.current;\n // if user clicks on input field with initialValue,\n // the user most likely wants to clear the input field\n if (initialValue && value === initialValue) {\n value = \"\";\n }\n\n const reachedRequiredLength = value.length >= requiredInputLength;\n if (reachedRequiredLength && !visibleRef.current) {\n debouncedMatchingUpdateStep(value);\n }\n }, [\n currentInputRef,\n initialValue,\n requiredInputLength,\n visibleRef,\n debouncedMatchingUpdateStep\n ]);\n\n /**\n * handleSelect is called onClickItem and onEnter upon an option of the drop down menu\n * does nothing if the key has not changed since the last onSelect event\n * @param selectedItem\n */\n const onHandleSelect = useCallback(\n selectedItem => {\n // block select call until last matching went through\n if (isMatchingDebounced) return;\n\n setCurrentInput(clearInputOnSelect ? \"\" : selectedItem.label);\n setVisible(false);\n setFocusIndex(-1);\n interactionHappenedRef.current = true;\n onDropdownClose();\n\n if (\n suppressReselect &&\n lastValidItem &&\n selectedItem.key === lastValidItem.key\n ) {\n // do not trigger the callback function\n // but still change state to fit new selection\n return;\n }\n // change state to fit new selection\n setLastValidItem(selectedItem);\n // callback function onSelect\n onSelect(selectedItem);\n },\n [\n isMatchingDebounced,\n setCurrentInput,\n clearInputOnSelect,\n setVisible,\n onDropdownClose,\n suppressReselect,\n lastValidItem,\n onSelect\n ]\n );\n\n /**\n * handle key events\n * @param event\n */\n const onHandleKeydown = useCallback(\n event => {\n // only do something if drop-down div is visible\n if (!visibleRef.current) return;\n let currentFocusIndex = focusIndex;\n if (event.keyCode === 40 || event.keyCode === 9) {\n // If the arrow DOWN key or tab is pressed increase the currentFocus variable:\n currentFocusIndex += 1;\n if (currentFocusIndex >= matchingItems.length) currentFocusIndex = 0;\n setFocusIndex(currentFocusIndex);\n // prevent tab to jump to the next input field if drop down is still open\n event.preventDefault();\n } else if (event.keyCode === 38) {\n // If the arrow UP key is pressed, decrease the currentFocus variable:\n currentFocusIndex -= 1;\n if (currentFocusIndex <= -1)\n currentFocusIndex = matchingItems.length - 1;\n setFocusIndex(currentFocusIndex);\n } else if (event.keyCode === 13) {\n // Enter pressed, similar to onClickItem\n if (focusIndex > -1) {\n // Simulate a click on the \"active\" item:\n const selectedItem = matchingItems[currentFocusIndex];\n onHandleSelect(selectedItem);\n }\n }\n },\n [focusIndex, matchingItems, onHandleSelect, visibleRef]\n );\n\n const renderItemLabel = useCallback(\n item => {\n const index = indexOfMatch(currentInput, item);\n const inputLength = currentInput.length;\n return (\n <>\n {index >= 0 && inputLength ? (\n // renders label with matching search string marked\n <>\n {item.label.substr(0, index)}\n {item.label.substr(index, inputLength)}\n {item.label.substr(index + inputLength, item.label.length)}\n \n ) : (\n item.label\n )}\n \n );\n },\n [currentInput]\n );\n\n const renderItems = useCallback(\n () => (\n <>\n {matchingItems.map((item, i) => {\n const isActive = focusIndex === i;\n const itemActiveClasses = isActive\n ? `datalist-active-item ${activeItemClassName ||\n \"datalist-active-item-default\"}`\n : \"\";\n const itemClasses = `${itemClassName} ${itemActiveClasses}`;\n return (\n onHandleSelect(item)}\n className={itemClasses}\n key={item.key}\n tabIndex={0}\n role=\"button\"\n aria-label={item.label}\n onKeyUp={event => event.preventDefault()}\n >\n {renderItemLabel(item)}\n \n );\n })}\n \n ),\n [\n matchingItems,\n focusIndex,\n activeItemClassName,\n itemClassName,\n onHandleSelect,\n renderItemLabel\n ]\n );\n const dropDown = useMemo(() => {\n const reachedRequiredLength =\n currentInputRef.current.length >= requiredInputLength;\n if (reachedRequiredLength && isMatchingDebounced) {\n return (\n \n {debounceLoader || \"loading...\"}
\n \n );\n }\n if (reachedRequiredLength && visible) {\n return (\n \n {renderItems()}\n \n );\n }\n return undefined;\n }, [\n currentInputRef,\n requiredInputLength,\n isMatchingDebounced,\n visible,\n dropdownClassName,\n itemClassName,\n debounceLoader,\n renderItems\n ]);\n return (\n \n \n
\n \n \n {dropDown}\n
\n
\n setDeleteConfirmVisible(false)}\n >\n Cancel\n \n handleDelete(itemId)}\n >\n Delete\n \n
\n \n );\n}\n","import { useState, useEffect } from \"react\";\n\nexport function useScript(src) {\n // Keep track of script status (\"idle\", \"loading\", \"ready\", \"error\")\n const [status, setStatus] = useState(src ? \"loading\" : \"idle\");\n\n useEffect(\n () => {\n // Allow falsy src value if waiting on other data needed for\n // constructing the script URL passed to this hook.\n if (!src) {\n setStatus(\"idle\");\n return;\n }\n\n // Fetch existing script element by src\n // It may have been added by another intance of this hook\n let script = document.querySelector(`script[src=\"${src}\"]`);\n\n if (!script) {\n // Create script\n script = document.createElement(\"script\");\n script.src = src;\n script.async = true;\n script.setAttribute(\"data-status\", \"loading\");\n // Add script to document body\n document.body.appendChild(script);\n\n // Store status in attribute on script\n // This can be read by other instances of this hook\n const setAttributeFromEvent = event => {\n script.setAttribute(\n \"data-status\",\n event.type === \"load\" ? \"ready\" : \"error\"\n );\n };\n\n script.addEventListener(\"load\", setAttributeFromEvent);\n script.addEventListener(\"error\", setAttributeFromEvent);\n } else {\n // Grab existing script status from attribute and set to state.\n setStatus(script.getAttribute(\"data-status\"));\n }\n\n // Script event handler to update status in state\n // Note: Even if the script already exists we still need to add\n // event handlers to update the state for *this* hook instance.\n const setStateFromEvent = event => {\n setStatus(event.type === \"load\" ? \"ready\" : \"error\");\n };\n\n // Add event listeners\n script.addEventListener(\"load\", setStateFromEvent);\n script.addEventListener(\"error\", setStateFromEvent);\n\n // Remove event listeners on cleanup\n return () => {\n if (script) {\n script.removeEventListener(\"load\", setStateFromEvent);\n script.removeEventListener(\"error\", setStateFromEvent);\n }\n };\n },\n [src] // Only re-run effect if script src changes\n );\n\n return status;\n}\n","/* eslint no-console:0 */\n// This file is automatically compiled by Webpack, along with any other files\n// present in this directory. You're encouraged to place your actual application logic in\n// a relevant structure within app/javascript and only use these pack files to reference\n// that code so it'll be compiled.\n//\n// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate\n// layout file, like app/views/layouts/application.html.erb\n\n// Support component names relative to this directory:\nimport * as Routes from 'routes';\n\nconst componentRequireContext = require.context(\"components\", true);\nconst ReactRailsUJS = require(\"react_ujs\");\n\nReactRailsUJS.useContext(componentRequireContext);\n\nwindow.Routes = Routes;\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"styled-components\";\nimport Select from \"react-select\";\nimport { useAlert } from \"react-alert\";\nimport RadioButtonGroup from \"../Shared/RadioButtonGroup\";\nimport { formHeaders } from \"../../utils/form\";\nimport { red } from \"../../styles/colors\";\nimport ApplicationDateResponse from \"./ApplicationDateResponse\";\n\nconst Logo = styled.header`\n padding: 1rem;\n`;\n\nconst VibuHeader = styled.div`\n margin-bottom: 3rem;\n\n h5 {\n font-size: 18px;\n color: gray;\n }\n\n p {\n font-size: 24px;\n max-width: 68rem;\n }\n`;\n\nconst Container = styled.div`\n width: 100%;\n height: 100%;\n\n main {\n padding: 0 4rem;\n }\n\n .red {\n color: ${red};\n }\n`;\n\nconst Input = styled.input`\n padding: 0.5rem;\n width: 16rem;\n border-radius: 4px;\n border: 1px solid #b9bfcb;\n`;\n\nconst ToolTip = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n width: auto;\n border-radius: 4px;\n box-shadow: 2px 2px 2px 2px lightgray;\n background-color: white;\n padding: 0.5rem;\n margin-top: 1rem;\n\n i {\n cursor: pointer;\n }\n`;\n\nexport default function ApplicationDateQuestionare(props) {\n const { countriesList = [], visaCategoriesList = [], logoUrl = null } = props;\n\n const countryOptions = countriesList.map((c, i) => ({ value: i, label: c }));\n const visaOptions = visaCategoriesList.map((v, i) => ({\n value: i,\n label: v\n }));\n\n const [selectedBirthCountry, setSelectedBirthCountry] = useState(null);\n const [selectedVisaCategory, setSelectedVisaCategory] = useState(null);\n const [priorityDate, setPriorityDate] = useState(\"\");\n const [isMarried, setIsMarried] = useState(null);\n const [isFilingWithSpouse, setIsFilingWithSpouse] = useState(null);\n const [spouseBirthCountry, setSpouseBirthCountry] = useState(null);\n\n const [vibuStatus, setVibuStatus] = useState();\n\n const [submitted, setSubmitted] = useState(false);\n\n // Tooltip hide/show\n const [piToolTipVisible, setPiToolTipVisible] = useState(false);\n const [siToolTipVisible, setSiToolTipVisible] = useState(false);\n\n const clearForm = () => {\n setSubmitted(false);\n setSelectedBirthCountry(null);\n setSelectedVisaCategory(null);\n setPriorityDate(\"\");\n setIsMarried(null);\n setIsFilingWithSpouse(null);\n setSpouseBirthCountry(null);\n setVibuStatus(null);\n };\n\n const [errors, setErrors] = useState({\n birthCountry: null,\n visaCategory: null,\n isMarried: null,\n isFilingWithSpouse: null,\n spouseBirthCountry: null\n });\n\n const alert = useAlert();\n\n const handleSubmit = async () => {\n setSubmitted(true);\n\n const hasErrors = Object.values(errors).some(x => x !== null);\n\n if (hasErrors) {\n const messages = Object.keys(errors).map(key => errors[key]);\n return messages.forEach(err =>\n err ? alert.show(err, { type: \"error\" }) : null\n );\n }\n\n try {\n const url = Routes.visa_bulletin_application_date_status_path();\n\n const params = {\n birth_country: selectedBirthCountry.label,\n spouse_birth_country: spouseBirthCountry?.label ?? null,\n visa_category: selectedVisaCategory.label,\n priority_date: priorityDate ?? null\n };\n\n const response = await fetch(url, {\n method: \"PUT\",\n body: JSON.stringify(params),\n headers: formHeaders()\n });\n\n if (!response.ok) {\n alert.show(\"Something went wrong\", { type: \"error\" });\n }\n\n if (response.ok) {\n const json = await response.json();\n setVibuStatus(json);\n alert.show(\"Great, thanks for filling that out!\", { type: \"success\" });\n }\n } catch (error) {\n alert.show(error, { type: \"error\" });\n }\n };\n\n const filingWithSpouseError = () => {\n if (isMarried && isFilingWithSpouse === null) {\n return \"Please indicate if you are filing with your spouse\";\n }\n return null;\n };\n\n const spouseBirthCountryError = () => {\n if (isFilingWithSpouse && spouseBirthCountry == null) {\n return \"Please select your spouses country of birth\";\n }\n return null;\n };\n\n useEffect(() => {\n // setSubmitted(false);\n setErrors({\n birthCountry: selectedBirthCountry\n ? null\n : \"Please select your country of birth\",\n visaCategory: selectedVisaCategory\n ? null\n : \"Please select your desired visa category\",\n isMarried:\n isMarried === true || isMarried === false\n ? null\n : \"Please indicate your marriage status\",\n isFilingWithSpouse: filingWithSpouseError(),\n spouseBirthCountry: spouseBirthCountryError()\n });\n }, [\n selectedBirthCountry,\n selectedVisaCategory,\n isMarried,\n isFilingWithSpouse,\n spouseBirthCountry\n ]);\n\n return (\n \n \n 
\n \n \n {!vibuStatus && (\n \n Visa Bulletin
\n \n 5 easy questions to find out if you can file your Green Card\n application.\n
\n \n )}\n {vibuStatus && (\n \n )}\n {!vibuStatus && (\n <>\n \n \n Where were you born?{\" \"}\n {submitted && errors.birthCountry && (\n \n )}\n
\n \n \n \n \n \n \n What I-140 Employment Based Category are you applying for?{\" \"}\n {submitted && errors.visaCategory && (\n \n )}\n
\n \n \n \n \n \n \n Do you have an existing I-140 Priority Date? (if not, leave this\n blank){\" \"}\n \n setPiToolTipVisible(!piToolTipVisible)}\n onKeyDown={() => setPiToolTipVisible(!piToolTipVisible)}\n role=\"button\"\n tabIndex={0}\n >\n What is a priority date?\n \n \n {piToolTipVisible && (\n \n \n This is your place in line. It determines when you can\n file the green card application (I-485). For more\n information{\" \"}\n \n visit our blog\n \n \n \n setPiToolTipVisible(false)}\n />\n \n )}\n
\n setPriorityDate(e.target.value)}\n />\n \n \n \n Are you legally married?{\" \"}\n {submitted && errors.isMarried && (\n \n )}\n
\n setIsMarried(e.target.value === \"true\")}\n labelClassName=\"input-button-label small inline\"\n />\n \n {isMarried && (\n \n \n Will you and your spouse be filing the I-485 at the same time?{\" \"}\n \n setSiToolTipVisible(!siToolTipVisible)}\n onKeyDown={() => setSiToolTipVisible(!siToolTipVisible)}\n role=\"button\"\n tabIndex={0}\n >\n Why is this important?\n \n \n {siToolTipVisible && (\n \n \n If you and your spouse are filing the I-485 at the same\n time, you can use either your or your spouse’s country\n of birth, whichever bulletin date is earlier in line.\n For more information{\" \"}\n \n visit our blog\n \n \n \n setSiToolTipVisible(false)}\n />\n \n )}\n {submitted && errors.isFilingWithSpouse && (\n \n )}\n
\n \n setIsFilingWithSpouse(e.target.value === \"true\")\n }\n labelClassName=\"input-button-label small inline\"\n />\n \n )}\n {isMarried && isFilingWithSpouse && (\n \n \n What is your spouse's country of birth?{\" \"}\n {submitted && errors.spouseBirthCountry && (\n \n )}\n
\n \n \n
\n \n )}\n handleSubmit()}\n >\n Check your eligibility\n \n \n )}\n \n \n );\n}\n\nApplicationDateQuestionare.propTypes = {\n countriesList: PropTypes.array,\n visaCategoriesList: PropTypes.array\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"styled-components\";\nimport moment from \"moment\";\nimport HubspotForm from \"./HubspotForm\";\n\nconst DataTable = styled.div`\n margin-top: 4rem;\n display: grid;\n grid-gap: 1rem;\n grid-template-columns: repeat(6, 1fr);\n\n p {\n margin-top: 0.5rem;\n }\n`;\n\nconst FollowUpActions = styled.div`\n margin-top: 1rem;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n a {\n margin-right: 1rem;\n font-weight: 300;\n }\n`;\n\nexport default function ApplicationDateResponse(props) {\n const { vibuStatus, clearForm, isMarried, isFilingWithSpouse } = props;\n\n return (\n <>\n \n \n
Birth country
\n
{vibuStatus.birthCountry}
\n
\n
Visa type
\n
{vibuStatus.visaCategory}
\n
\n
Priority date
\n
{vibuStatus.priorityDate}
\n
\n
Married?
\n
{isMarried ? \"Yes\" : \"No\"}
\n
\n
Filing with spouse?
\n
{isFilingWithSpouse ? \"Yes\" : \"No\"}
\n
\n
Spouse birth country
\n
{vibuStatus.spouseBirthCountry}
\n
\n Congratulations! You are eligible to file the I-485 based on the{\" \"}\n \n {moment().format(\"MMMM YYYY\")} Visa Bulletin{\" \"}\n \n
\n )}\n {!vibuStatus.currentMonthStatus && (\n \n Unfortunately, you are not currently eligible to file the I-485 based\n on the{\" \"}\n \n {moment().format(\"MMMM YYYY\")} Visa Bulletin{\" \"}\n \n
\n )}\n {vibuStatus.nextMonthStatus && (\n \n )}\n {!vibuStatus.nextMonthStatus && vibuStatus.nextVisaBulletin && (\n \n )}\n\n {vibuStatus.currentMonthStatus && (\n <>\n \n What now? We can walk you through your options and answer any\n questions free of charge.\n
\n \n \n Get in touch\n \n clearForm()}\n onKeyDown={() => clearForm()}\n role=\"link\"\n tabIndex={0}\n >\n Answer questions again\n \n \n \n )}\n {!vibuStatus.currentMonthStatus && (\n <>\n \n Want to be notified when the State Department releases the next visa\n bulletin? Sign up for notifications below. We will let you know when\n it is time to check your status again.\n
\n \n clearForm()}\n onKeyDown={() => clearForm()}\n role=\"link\"\n tabIndex={0}\n >\n Answer questions again\n \n \n )}\n \n );\n}\n\nApplicationDateResponse.propTypes = {\n vibuStatus: PropTypes.object,\n isMarried: PropTypes.bool,\n isFilingWithSpouse: PropTypes.bool\n};\n","import React, { useEffect } from \"react\";\nimport { useScript } from \"../../hooks/useScript\";\n\nexport default function HubspotForm(props) {\n const status = useScript(\"//js.hsforms.net/forms/v2.js\");\n\n useEffect(() => {\n if (status === \"ready\") {\n window.hbspt.forms.create({\n portalId: \"5589333\",\n formId: \"078acabb-8bf7-4a66-9c96-18c77b3ccc19\",\n target: \"#hubspot-form\"\n });\n }\n }, [status]);\n\n if (status !== \"ready\") {\n return Loading...
;\n }\n\n return ;\n}\n","import React from \"react\";\nimport { Provider as AlertProvider, positions } from \"react-alert\";\nimport AlertTemplate from \"../Shared/AlertTemplate\";\nimport ApplicationDateQuestionare from \"./ApplicationDateQuestionare\";\n\nconst options = {\n timeout: 5000,\n position: positions.TOP_RIGHT,\n offset: \"30px\"\n};\n\nexport default function ApplicationDateQuestionaireWrapper(props) {\n return (\n \n \n \n );\n}\n","import { formHeaders } from \"../utils/form\";\n\nexport default async function request(url, { body, ...customConfig } = {}) {\n const headers = formHeaders();\n\n const config = {\n method: body ? \"POST\" : \"GET\",\n ...customConfig,\n headers: {\n ...headers,\n ...customConfig.headers\n }\n };\n\n if (body) {\n config.body = JSON.stringify(body);\n }\n\n const response = await fetch(url, config);\n\n const data = await response.json();\n\n if (response.ok) {\n return data;\n }\n\n return Promise.reject(data);\n}\n","import { useEffect } from \"react\";\n\nexport function useOnClickOutside(ref, handler) {\n useEffect(\n () => {\n const listener = event => {\n // Do nothing if clicking ref's element or descendent elements\n if (!ref.current || ref.current.contains(event.target)) {\n return;\n }\n\n handler(event);\n };\n\n document.addEventListener(\"mousedown\", listener);\n document.addEventListener(\"touchstart\", listener);\n\n return () => {\n document.removeEventListener(\"mousedown\", listener);\n document.removeEventListener(\"touchstart\", listener);\n };\n },\n // Wrap the passed in handler function in useCallback for better perf\n [ref, handler]\n );\n}\n","import styled from \"styled-components\";\n\nexport const CheckboxItem = styled.div`\n // override the existing css that makes it impossible to use a standard html checkbox 😩\n\n &&& {\n input {\n opacity: 100;\n position: relative;\n left: 0;\n cursor: ${props => (props.disabled ? \"not-allowed\" : \"pointer\")};\n }\n label {\n margin: 0 8px;\n cursor: ${props => (props.disabled ? \"not-allowed\" : \"pointer\")};\n }\n }\n`;\n","import styled from \"styled-components\";\nimport { blue, gray, red } from \"../../../styles/colors\";\n\nexport const FormInput = styled.input`\n padding: 0.5rem;\n border: 1px solid ${props => (props.error ? red : gray)};\n border-radius: 4px;\n width: ${props => props.width};\n &:focus {\n border: 1px solid ${blue};\n }\n`;\n","import { formHeaders } from \"../utils/form\";\n\nexport const sendConfirmationEmail = async (personId, popup) => {\n try {\n const url = Routes.send_welcome_email_client_path(personId);\n\n const response = await fetch(url, {\n method: \"POST\",\n headers: formHeaders(),\n body: JSON.stringify({})\n });\n\n if (!response.ok) {\n popup.show(response.error.message, { type: \"error\" });\n throw new Error(response.error.message);\n }\n\n if (response.ok) {\n const json = await response.json();\n popup.show(\"Confirmation email sent.\", { type: \"success\" });\n return json;\n }\n } catch (error) {\n popup.show(error.message, {\n type: \"error\"\n });\n }\n};\n","import { render, waitFor } from \"@testing-library/react\";\nimport CommonNav from \"./CommonNav\";\nimport { mockUser } from \"../../../testHelpers/userMocks\";\n\ndescribe(\"The CommonNav component\", () => {\n // eslint-disable-next-line no-console\n window.alert = alert => console.warn(alert);\n\n beforeEach(() => {\n fetch.once(JSON.stringify(mockUser));\n });\n\n afterEach(() => {\n fetch.resetMocks();\n });\n\n it(\"renders without crashing\", async () => {\n const { container } = render(\n \n );\n await waitFor(() => expect(container));\n });\n\n it(\"makes a fetch call for the user and updates the ui\", async () => {\n const { getByText } = render(\n \n );\n\n await waitFor(() => {\n expect(fetch.mock.calls.length).toEqual(1);\n expect(getByText(\"HS\"));\n });\n });\n});\n","import styled from \"styled-components\";\n\nexport const IconStack = styled.span`\n display: grid;\n svg {\n grid-area: 1 / 1;\n }\n`;\n","import { render, fireEvent, within, waitFor } from \"@testing-library/react\";\nimport ApplicationDateQuestionaireWrapper from \"./ApplicationDateQuestionareWrapper\";\n\ndescribe(\"The ApplicationDateQuestionare component\", () => {\n beforeEach(() => {\n fetch.resetMocks();\n });\n\n it(\"renders without crashing\", () => {\n const { container } = render();\n expect(container);\n });\n\n it(\"allows the user to input the necessary data\", async () => {\n fetch.once(\n JSON.stringify({\n currentVisaBulletin: {},\n nextVisaBulletin: {},\n currentMonthStatus: true,\n nextMonthStatus: false,\n birthCountry: \"China\",\n spouseBirthCountry: \"China\",\n visaCategory: \"EB-1\",\n priorityDate: null\n })\n );\n\n const { getByTestId, getByText, queryAllByText } = render(\n \n );\n const birthCountrySelectDiv = getByTestId(\"select-birth-country\");\n fireEvent.focus(birthCountrySelectDiv.querySelector(\"input\"));\n fireEvent.keyDown(birthCountrySelectDiv.querySelector(\"input\"), {\n key: \"ArrowDown\",\n code: 40\n });\n fireEvent.keyDown(birthCountrySelectDiv.querySelector(\"input\"), {\n key: \"Enter\",\n code: 13\n });\n const visaCategorySelectDiv = getByTestId(\"select-visa-category\");\n fireEvent.focus(visaCategorySelectDiv.querySelector(\"input\"));\n fireEvent.keyDown(visaCategorySelectDiv.querySelector(\"input\"), {\n key: \"ArrowDown\",\n code: 40\n });\n fireEvent.keyDown(visaCategorySelectDiv.querySelector(\"input\"), {\n key: \"Enter\",\n code: 13\n });\n fireEvent.change(\n getByTestId(\"input-priority-date\").querySelector(\"input\"),\n {\n target: { value: \"02/09/2020\" }\n }\n );\n fireEvent.click(\n within(getByTestId(\"yes-no-married\")).getByTestId(\"Yes-radio\")\n );\n expect(\n getByText(\n \"Will you and your spouse be filing the I-485 at the same time?\"\n )\n );\n fireEvent.click(\n within(getByTestId(\"yes-no-filing-with-spouse\")).getByTestId(\"Yes-radio\")\n );\n expect(getByText(\"What is your spouse's country of birth?\"));\n const spouseCountryOfBirthDiv = getByTestId(\n \"select-spouse-country-of-birth\"\n );\n fireEvent.focus(spouseCountryOfBirthDiv.querySelector(\"input\"));\n fireEvent.keyDown(spouseCountryOfBirthDiv.querySelector(\"input\"), {\n key: \"ArrowDown\",\n code: 40\n });\n fireEvent.keyDown(spouseCountryOfBirthDiv.querySelector(\"input\"), {\n key: \"Enter\",\n code: 13\n });\n fireEvent.click(getByText(\"Check your eligibility\"));\n await waitFor(() =>\n getByText(\n \"What now? We can walk you through your options and answer any questions free of charge.\"\n )\n );\n\n expect(getByText(\"Birth country\"));\n expect(queryAllByText(\"China\")[0]);\n expect(getByText(\"Visa type\"));\n expect(getByText(\"EB-1\"));\n expect(getByText(\"Married?\"));\n expect(queryAllByText(\"Yes\")[0]);\n expect(getByText(\"Filing with spouse?\"));\n expect(queryAllByText(\"Yes\")[1]);\n expect(getByText(\"Spouse birth country\"));\n expect(queryAllByText(\"China\")[1]);\n });\n});\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { blue, gray, white } from \"../../../styles/colors\";\n\nconst SearchBarInput = styled.input`\n background: ${white};\n border: 1px solid ${gray};\n border-radius: 6px;\n padding: 1rem;\n width: 562px;\n\n &:focus {\n outline: 1px solid ${blue};\n }\n`;\n\nexport default function SearchBar(props) {\n const {\n id,\n dataTestId,\n placeholder,\n searchStringValue,\n setSearchStringEvent\n } = props;\n\n return (\n setSearchStringEvent(e.target.value)}\n />\n );\n}\n","import styled from \"styled-components\";\nimport { blue, grayDark } from \"../../../styles/colors\";\n\nexport const PaginationWidget = styled.div`\n width: 100%;\n display: flexbox;\n justify-content: flex-end;\n align-items: baseline;\n color: ${grayDark};\n margin-top: ${props => (props.upshift ? \"-2rem\" : \"\")};\n\n p {\n margin: 0;\n }\n\n a {\n margin-left: 0.75rem;\n }\n\n i {\n margin: 0 0.5rem;\n color: ${props => (props.showingAll ? grayDark : blue)};\n cursor: ${props => (props.showingAll ? \"default\" : \"pointer\")};\n\n &:first-of-type {\n color: ${props => (props.currentPage === 1 ? grayDark : blue)};\n cursor: ${props => (props.currentPage === 1 ? \"default\" : \"pointer\")};\n }\n\n &:last-of-type {\n color: ${props =>\n props.currentPage === props.maxPage ? grayDark : blue};\n cursor: ${props =>\n props.currentPage === props.maxPage ? \"default\" : \"pointer\"};\n }\n }\n`;\n","/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useState } from \"react\";\nimport Collapse from \"react-css-collapse\";\nimport { useDeprecated } from \"../../../hooks/useDeprecated\";\n\nexport default function __Dropdown(props) {\n const { name, dropdownContent, children } = props;\n\n const [dropdownOpen, setDropdownOpen] = useState(true);\n\n useDeprecated(__Dropdown, \"Please use Shared/Dropdown/Dropdown instead\");\n\n return (\n <>\n setDropdownOpen(!dropdownOpen)}\n >\n {\" \"}\n {name}\n \n \n {dropdownContent}\n {children}\n \n \n );\n}\n","module.exports = {\n blue: \"#2680FA\",\n blueDark: \"#275BC0\",\n blueLight: \"#80A6F2\",\n blueLighter: \"#E9F2FE\",\n blueLightest: \"#F5F9FF\",\n\n green: \"#41CD7E\",\n gold: \"#F5D75B\",\n\n gray: \"#B9BFCB\",\n grayDark: \"#818DA4\",\n grayDarker: \"#3A4861\",\n grayDarkest: \"#0B1C38\",\n grayLight: \"#E9EDF0\",\n grayLighter: \"#F1F5F9\",\n grayLightest: \"#F8FAFC\",\n\n orange: \"#ff784f\",\n red: \"#FF5C5C\",\n white: \"#FFF\"\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport {\n gold,\n blue,\n red,\n grayLightest,\n grayLight\n} from \"../../../styles/colors\";\n\nconst handleSize = size => {\n switch (size) {\n case \"large\":\n return \"1.75rem 3rem\";\n case \"medium\":\n return \"1.25rem 2rem\";\n case \"small\":\n return \".5rem .75rem\";\n default:\n return \".5rem .75rem\";\n }\n};\n\nconst handleBackgroundColor = (color, disabled) => {\n if (disabled) return grayLightest;\n switch (color) {\n case \"primary\":\n return gold;\n case \"secondary\":\n return blue;\n case \"danger\":\n return red;\n default:\n return \"#fff\";\n }\n};\n\nconst handleHoverColor = (color, disabled) => {\n if (disabled) return \"\";\n switch (color) {\n case \"primary\":\n return \"#fecd6b\";\n case \"secondary\":\n return \"dodgerblue\";\n case \"danger\":\n return \"#d74c4c\";\n default:\n return \"#fff\";\n }\n};\n\nconst handleBorder = variant => {\n switch (variant) {\n case \"outlined\":\n return `1px solid ${blue}`;\n case \"text\":\n return \"none\";\n default:\n return \"none\";\n }\n};\n\nconst handleFontSize = size => {\n switch (size) {\n case \"large\":\n return \"18px\";\n case \"medium\":\n return \"16px\";\n case \"small\":\n return \"14px\";\n default:\n return \"14px\";\n }\n};\n\nconst handleColor = (color, disabled) => {\n if (disabled) return grayLightest;\n\n switch (color) {\n case \"secondary\":\n return blue;\n case \"danger\":\n return red;\n default:\n return blue;\n }\n};\n\nconst StyledButton = styled.button`\n &&& {\n transition: all 0.4s ease-out;\n font-size: ${({ size }) => handleFontSize(size)};\n color: ${({ color, disabled }) =>\n disabled ? grayLight : color === \"primary\" ? \"black\" : \"white\"};\n border: none;\n border-radius: 4px;\n cursor: ${({ disabled }) => (disabled ? \"not-allowed\" : \"pointer\")};\n padding: ${({ size }) => handleSize(size)};\n background: ${({ color, disabled }) =>\n handleBackgroundColor(color, disabled)};\n &:hover {\n background: ${({ color, disabled }) => handleHoverColor(color, disabled)};\n }\n }\n`;\n\nconst OutlinedButton = styled(StyledButton)`\n &&& {\n border: 2px solid #2680fa;\n color: #2680fa;\n background: #e9f2fe;\n\n &:hover {\n background: #c4dcfd;\n }\n }\n`;\n\nconst TextButton = styled(StyledButton)`\n background: none;\n color: ${({ color }) => handleColor(color)};\n\n &:hover {\n background: ${({ color }) => (color === \"danger\" ? `${red}` : \"#e9f2fe\")};\n color: ${({ color }) => (color === \"danger\" ? \"white\" : null)};\n }\n`;\n\nexport function Button({\n size = \"medium\",\n color = \"primary\",\n variant,\n disabled = false,\n ...rest\n}) {\n if (variant === \"outlined\") {\n return ;\n }\n\n if (variant === \"text\") {\n return ;\n }\n\n return (\n \n );\n}\n","import React from \"react\";\nimport Dropdown from \"../Dropdown/__Dropdown\";\n\nexport default function SectionDropdowns(props) {\n const { sections } = props;\n\n return sections.map((section, index) => (\n \n \n \n ));\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { white, blueLight } from \"../../styles/colors\";\n\nconst Avatar = styled.div`\n width: ${props => props.size}px;\n height: ${props => props.size}px;\n background-color: ${blueLight};\n text-align: center;\n border-radius: 50%;\n margin: auto;\n\n span {\n position: relative;\n top: ${props => props.size / 4}px;\n font-size: ${props => props.size / 3}px;\n line-height: ${props => props.size / 2}px;\n color: ${white};\n font-weight: 300;\n }\n`;\n\nexport default function UserAvatar(props) {\n const { size, children } = props;\n return {children};\n}\n\nUserAvatar.defaultProps = { size: 100 };\n"],"sourceRoot":""}