\n {header}\n \n {children}\n \n );\n}\n\nReviewSection.propTypes = {};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { blue, grayDarker } from \"../../styles/colors\";\n\nconst Centered = styled.div`\n max-width: 72rem;\n margin: auto;\n text-align: center;\n`;\n\nconst Nav = styled.div`\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n`;\n\nconst NavItem = styled.div`\n padding: 1rem;\n font-weight: 500;\n color: ${props => (props.stepActive ? blue : grayDarker)};\n border-bottom: ${props => (props.stepActive ? `5px solid ${blue}` : \"\")};\n`;\n\nexport default function StepNav(props) {\n const { deal } = props;\n const location = useLocation();\n\n const petitionerStepPath = deal.id\n ? `/deals/${deal.id}/petitioner`\n : \"/deals/new\";\n\n return (\n \n \n \n Petitioner\n \n\n {/* Allow user to navigate with the header nav when the deal allows */}\n {deal.id ? (\n \n Beneficiaries & Visas\n \n \n ) : (\n \n Beneficiaries & Visas\n \n )}\n {deal?.petitionBundles?.length > 0 ? (\n \n Point of Contact\n \n \n ) : (\n \n Point of Contact\n \n )}\n {deal?.petitionBundles?.length > 0 ? (\n \n Review\n \n \n ) : (\n \n Review\n \n )}\n \n \n );\n}\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"styled-components\";\nimport Collapse from \"react-css-collapse\";\nimport { grayLight, grayDark, grayDarker, white } from \"../../../styles/colors\";\nimport { formatCentsToCurrency } from \"../../../utils/numberHelpers\";\n\nconst DetailBox = styled.div`\n background: ${white};\n border: 1px solid ${grayLight};\n border-radius: 6px;\n margin-right: 3rem;\n padding: 1rem;\n`;\n\nconst DetailRow = styled.div`\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n p {\n margin: 0;\n font-size: ${({ diminished }) => (diminished ? \"14px\" : \"\")};\n }\n`;\n\nexport default function PetitionBundleDetails(props) {\n const { petitionBundle } = props;\n const { petition, finalPriceData } = petitionBundle;\n // alias to camelcase because Jbuilder sucks at handling jsonb columns\n const {\n price_total: priceTotal,\n base_fees: baseFees,\n additional_services: additionalServices\n } = finalPriceData;\n const allFees = baseFees.concat(additionalServices);\n const { beneficiary, workflow, id } = petition;\n\n const [dropdownOpen, setDropdownOpen] = useState(false);\n\n return (\n \n \n setDropdownOpen(!dropdownOpen)}\n onKeyDown={() => setDropdownOpen(!dropdownOpen)}\n >\n {`${beneficiary.firstName} ${beneficiary.lastName}`}
\n \n\n {workflow.name}
\n {formatCentsToCurrency(priceTotal)}
\n {/* eslint-disable-next-line no-undef */}\n Go to petition \n \n \n {allFees.map((fee, i) => (\n \n
\n {fee.name}
\n \n {formatCentsToCurrency(fee.amount)}\n
\n
\n \n ))}\n \n \n );\n}\n\nPetitionBundleDetails.propTypes = {\n petitionBundle: PropTypes.object\n};\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useAlert } from \"react-alert\";\nimport { useForm } from \"react-hook-form\";\nimport { FormInput } from \"../../Shared/Forms\";\nimport request from \"../../../services/request\";\n\nexport default function SalesforceIdForm({\n dealId,\n salesforceOpportunityId,\n setDeal\n}) {\n const popup = useAlert();\n\n const [formVisible, setFormVisible] = useState(false);\n\n const { register, handleSubmit, formState } = useForm({\n defaultValues: {\n salesforceOpportunityId\n }\n });\n\n const updateSalesforceId = data => {\n request(Routes.update_metadata_deal_path(dealId), {\n body: data,\n method: \"PUT\"\n })\n .then(res => {\n setDeal(res);\n setFormVisible(false);\n })\n .catch(err =>\n err.errors.forEach(error => popup.show(error, { type: \"error\" }))\n );\n };\n\n return (\n \n );\n}\n\nSalesforceIdForm.propTypes = {\n dealId: PropTypes.string,\n salesforceOpportunityId: PropTypes.string,\n setDeal: PropTypes.func\n};\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useAlert } from \"react-alert\";\nimport { useForm } from \"react-hook-form\";\nimport { FormInput } from \"../../Shared/Forms\";\nimport request from \"../../../services/request\";\nimport { red } from \"../../../styles/colors\";\n\nexport default function QuickbooksIdForm({\n dealId,\n quickbooksInvoiceId,\n setDeal\n}) {\n const popup = useAlert();\n\n const [formVisible, setFormVisible] = useState(false);\n\n const { register, handleSubmit, setValue, formState, errors } = useForm({\n defaultValues: {\n quickbooksInvoiceId\n }\n });\n\n const updateQuickbooksId = data => {\n if (formState.isDirty)\n request(Routes.update_metadata_deal_path(dealId), {\n body: data,\n method: \"PUT\"\n })\n .then(res => {\n setDeal(res);\n setFormVisible(false);\n })\n .catch(err =>\n err.errors.forEach(error => popup.show(error, { type: \"error\" }))\n );\n };\n\n const handlePaste = e => {\n let paste = (e.clipboardData || window.clipboardData).getData(\"text\");\n paste = paste.replace(/\\D/g, \"\");\n setValue(\"quickbooks_invoice_id\", paste, {\n shouldValidate: true,\n shouldDirty: true\n });\n e.preventDefault();\n };\n\n return (\n \n );\n}\n\nQuickbooksIdForm.propTypes = {\n dealId: PropTypes.string,\n quickbooksInvoiceId: PropTypes.string,\n setDeal: PropTypes.func\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Route, Switch } from \"react-router-dom\";\nimport CommonNav from \"../../Shared/CommonNav/CommonNav\";\nimport ServicesPage from \"../ServicesPage/ServicesPage\";\nimport WorkflowsPage from \"../WorkflowsPage/WorkflowsPage\";\nimport DealIndexPage from \"../DealIndexPage/DealIndexPage\";\n\nconst Layout = styled.div`\n width: 100vw;\n height: 100vh;\n display: grid;\n`;\n\nexport default function SalesDashboard() {\n return (\n \n \n \n \n \n \n \n \n \n \n
\n \n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { useAlert } from \"react-alert\";\nimport { formHeaders } from \"../../../utils/form\";\nimport { IndexRow } from \"../../Shared/IndexRow/IndexRow\";\nimport AdditionalServiceRow from \"./AdditionalServiceRow\";\nimport { blue } from \"../../../styles/colors\";\nimport { CheckboxItem } from \"../../Shared/CheckBox\";\nimport StatusTag from \"../../Shared/StatusTag/StatusTag\";\nimport { useAuthContext } from \"../../Shared/ContextProviders/AuthProvider\";\n\nconst FormInput = styled.input`\n padding: 0.5rem;\n border: 1px solid ${blue};\n border-radius: 4px;\n width: ${props => props.width};\n`;\n\nexport default function ServicesPage() {\n const popup = useAlert();\n\n const user = useAuthContext();\n const hasEngAccess = user.engAccess;\n\n const [additionalServices, setAdditionalServices] = useState([]);\n const [asFormVisible, setAsFormVisible] = useState(false);\n const [additionalServiceFormState, setAdditionalServiceFormState] = useState({\n name: \"\",\n amount: \"\",\n maxQuantity: 1,\n isDefaultOption: false\n });\n\n useEffect(() => {\n const fetchAdditionalServices = async () => {\n try {\n const url = Routes.additional_services_path();\n\n const response = await fetch(url, {\n method: \"GET\",\n headers: formHeaders()\n });\n\n if (!response.ok) {\n popup.show(\n `Something went wrong: \\n ${response.status} ${response.statusText}`,\n { type: \"error\" }\n );\n }\n\n if (response.ok) {\n const json = await response.json();\n setAdditionalServices(json.additional_services);\n }\n } catch (error) {\n popup.show(error.message, { type: \"error\" });\n }\n };\n fetchAdditionalServices();\n }, []);\n\n const handleAdditionalServiceFormChange = (e, isCheckbox) => {\n if (isCheckbox) {\n setAdditionalServiceFormState({\n ...additionalServiceFormState,\n [e.target.name]: e.target.checked\n });\n } else {\n setAdditionalServiceFormState({\n ...additionalServiceFormState,\n [e.target.name]: e.target.value\n });\n }\n };\n\n const createAdditionalService = async () => {\n try {\n const url = Routes.additional_services_path();\n\n const requestBody = {\n additional_service: {\n name: additionalServiceFormState.name,\n amount: parseInt(additionalServiceFormState.amount * 100),\n is_default_option: additionalServiceFormState.isDefaultOption,\n max_quantity: additionalServiceFormState.maxQuantity\n }\n };\n\n const response = await fetch(url, {\n method: \"POST\",\n headers: formHeaders(),\n body: JSON.stringify(requestBody)\n });\n\n if (!response.ok) {\n const json = await response.json();\n popup.show(\n `Something went wrong: \\n ${response.status} ${response.statusText} \\n ${json}`,\n { type: \"error\" }\n );\n }\n\n if (response.ok) {\n const json = await response.json();\n setAdditionalServices([...additionalServices, json]);\n setAsFormVisible(false);\n setAdditionalServiceFormState({\n name: \"\",\n amount: \"\",\n maxQuantity: 1,\n isDefaultOption: false\n });\n popup.show(\"Service successfully created\", { type: \"success\" });\n }\n } catch (error) {\n popup.show(error.message, { type: \"error\" });\n }\n };\n\n return (\n \n
\n Additional Services \n {!hasEngAccess && (\n \n \n \n Name \n Price \n Max quantity \n Default selected \n \n {additionalServices.map(as => (\n \n \n handleAdditionalServiceFormChange(e)}\n />\n \n\n \n $\n handleAdditionalServiceFormChange(e)}\n />\n \n \n handleAdditionalServiceFormChange(e)}\n />\n \n \n \n handleAdditionalServiceFormChange(e, true)}\n />\n Default option \n \n \n \n setAsFormVisible(false)}\n >\n Cancel\n \n createAdditionalService()}\n >\n Save\n \n \n \n )}\n \n
\n {!asFormVisible && (\n setAsFormVisible(true)}\n >\n New service\n \n )}\n \n
\n \n handleAdditionalServiceChange(e)}\n style={{ fontWeight: 600 }}\n disabled={!hasEngAccess || loading}\n />\n \n \n $\n handleAdditionalServiceChange(e, true)}\n disabled={!hasEngAccess || loading}\n />\n \n \n handleAdditionalServiceChange(e, true)}\n disabled={!hasEngAccess || loading}\n />\n \n \n \n handleAdditionalServiceDefaultCheck(e)}\n disabled={!hasEngAccess || loading}\n >\n {currentAdditionalService.isDefaultOption?.toString()} \n \n \n {serviceDirty && !loading ? (\n \n handleCancel()}\n >\n Cancel\n \n updateAdditionalService()}\n >\n Save\n \n \n ) : (\n \n handleDelete()}\n onKeyDown={() => handleDelete()}\n disabled={!hasEngAccess || loading}\n >\n DELETE\n \n \n \n );\n}\n\nAdditionalServiceRow.propTypes = {\n additionalService: PropTypes.object,\n setAdditionalServices: PropTypes.func\n};\n","import React, { useState, useEffect } from \"react\";\nimport { useAlert } from \"react-alert\";\nimport { formHeaders } from \"../../../utils/form\";\nimport WorkflowDetails from \"./WorkflowDetails\";\nimport StatusTag from \"../../Shared/StatusTag/StatusTag\";\nimport { useAuthContext } from \"../../Shared/ContextProviders/AuthProvider\";\n\nexport default function WorkflowsPage() {\n const popup = useAlert();\n const [workflows, setWorkflows] = useState([]);\n const [additionalServices, setAdditionalServices] = useState([]);\n\n const user = useAuthContext();\n const hasEngAccess = user.engAccess;\n\n useEffect(() => {\n const fetchWorkflows = async () => {\n try {\n const url = Routes.workflows_path();\n\n const response = await fetch(url, {\n method: \"GET\",\n headers: formHeaders()\n });\n\n if (!response.ok) {\n popup.show(\n `Something went wrong: \\n ${response.status} ${response.statusText}`,\n { type: \"error\" }\n );\n }\n\n if (response.ok) {\n const json = await response.json();\n setWorkflows(json.items);\n }\n } catch (error) {\n popup.show(error.message, { type: \"error\" });\n }\n };\n const fetchAdditionalServices = async () => {\n try {\n const url = Routes.additional_services_path();\n\n const response = await fetch(url, {\n method: \"GET\",\n headers: formHeaders()\n });\n\n if (!response.ok) {\n popup.show(\n `Something went wrong: \\n ${response.status} ${response.statusText}`,\n { type: \"error\" }\n );\n }\n\n if (response.ok) {\n const json = await response.json();\n setAdditionalServices(json.additional_services);\n }\n } catch (error) {\n popup.show(error.message, { type: \"error\" });\n }\n };\n fetchWorkflows();\n fetchAdditionalServices();\n }, []);\n\n return (\n \n \n Workflows \n {!hasEngAccess && (\n \n
\n );\n}\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useAlert } from \"react-alert\";\nimport styled from \"styled-components\";\nimport Select from \"react-select\";\nimport Loader from \"react-loader-spinner\";\nimport { formHeaders } from \"../../../utils/form\";\nimport BaseFeeRow from \"./BaseFeeRow\";\nimport { IndexRow } from \"../../Shared/IndexRow/IndexRow\";\nimport { generateUUID } from \"../../../utils/uuidGenerator\";\nimport { blue, gold } from \"../../../styles/colors\";\nimport { formatCentsToCurrency } from \"../../../utils/numberHelpers\";\nimport { useDidMountEffect } from \"../../../hooks/useDidMountEffect\";\n\nconst FormInput = styled.input`\n padding: 0.5rem;\n border: 1px solid ${blue};\n border-radius: 4px;\n width: ${props => props.width};\n`;\n\nexport default function WorkflowDetails(props) {\n const popup = useAlert();\n const { workflow, additionalServices, hasEngAccess } = props;\n const {\n additionalServices: workflowAdditionalServices,\n baseFees,\n id\n } = workflow;\n\n const baseFeesWithTempId = baseFees.map(fee => ({\n ...fee,\n amount: fee.amount,\n tempId: generateUUID()\n }));\n\n const [currentBaseFees, setCurrentBaseFees] = useState(baseFeesWithTempId);\n\n const [\n currentAdditionalServiceIds,\n setCurrentAdditionalServiceIds\n ] = useState(workflowAdditionalServices.map(as => as.id));\n\n const [baseFeeFormVisible, setBaseFeeFormVisible] = useState(false);\n const [baseFeeFormState, setBaseFeeFormState] = useState({\n name: \"\",\n amount: \"\"\n });\n\n const [updateBaseFees, setUpdateBaseFees] = useState(false);\n\n const defaultOptions = workflowAdditionalServices.map(as => ({\n value: as.id,\n label: `${as.name} - ${formatCentsToCurrency(as.amount)}`\n }));\n\n const serviceOptions = additionalServices.map(as => ({\n value: as.id,\n label: `${as.name} - ${formatCentsToCurrency(as.amount)}`\n }));\n\n const handleServicesSelect = values => {\n if (!values) {\n setCurrentAdditionalServiceIds([]);\n } else {\n setCurrentAdditionalServiceIds(values?.map(v => v.value));\n }\n };\n\n const handleBaseFeeFormChange = e => {\n setBaseFeeFormState({\n ...baseFeeFormState,\n [e.target.name]: e.target.value\n });\n };\n\n const createBaseFee = () => {\n setCurrentBaseFees(prevFees => [\n ...prevFees,\n {\n ...baseFeeFormState,\n amount: baseFeeFormState.amount * 100,\n tempId: generateUUID()\n }\n ]);\n setBaseFeeFormState({\n name: \"\",\n amount: \"\"\n });\n setBaseFeeFormVisible(false);\n setUpdateBaseFees(true);\n };\n\n const totalPrice = () => {\n const baseFeeCost = currentBaseFees.reduce(\n (a, bf) => a + parseInt(bf.amount),\n 0\n );\n\n return formatCentsToCurrency(baseFeeCost);\n };\n\n const [loading, setLoading] = useState(false);\n\n const updateWorkflow = async () => {\n try {\n setLoading(true);\n\n const url = Routes.workflow_path(workflow.id);\n\n const requestBody = {\n workflow: {\n base_fees: currentBaseFees.map(({ name, amount }) => ({\n name,\n amount: parseInt(amount)\n })),\n additional_service_ids: currentAdditionalServiceIds\n }\n };\n\n const response = await fetch(url, {\n method: \"PUT\",\n headers: formHeaders(),\n body: JSON.stringify(requestBody)\n });\n\n if (!response.ok) {\n const json = await response.json();\n popup.show(\n `Something went wrong: \\n ${response.status} ${response.statusText} \\n ${json}`,\n { type: \"error\" }\n );\n }\n\n if (response.ok) {\n popup.show(\"Workflow successfully updated\", { type: \"success\" });\n }\n } catch (error) {\n popup.show(error.message, { type: \"error\" });\n } finally {\n setLoading(false);\n setUpdateBaseFees(false);\n }\n };\n\n useDidMountEffect(() => {\n if (updateBaseFees) updateWorkflow();\n }, [updateBaseFees]);\n\n return (\n \n
{workflow.name} \n {additionalServices.length > 0 && (\n
Base price: {totalPrice()} \n )}\n
Base Fees \n {currentBaseFees.length > 0 && (\n
\n \n \n Name \n Amount \n \n {currentBaseFees.map(bf => (\n \n
\n )}\n {!baseFeeFormVisible && (\n
setBaseFeeFormVisible(true)}\n disabled={!hasEngAccess}\n style={{ cursor: !hasEngAccess ? \"not-allowed\" : \"pointer\" }}\n >\n Add new fee\n \n )}\n {baseFeeFormVisible && (\n \n handleBaseFeeFormChange(e)}\n />\n \n $\n handleBaseFeeFormChange(e)}\n />\n
\n \n setBaseFeeFormVisible(false)}\n >\n Cancel\n \n createBaseFee()}\n >\n Save\n \n
\n \n )}\n Additional Services \n ({\n ...base,\n backgroundColor: gold\n }),\n multiValueLabel: base => ({\n ...base,\n backgroundColor: gold\n })\n }}\n placeholder=\"Add additional services...\"\n isMulti\n options={serviceOptions}\n className=\"additional-services-select\"\n classNamePrefix=\"additional-service\"\n defaultValue={defaultOptions}\n onChange={values => handleServicesSelect(values)}\n />\n {!loading && (\n \n updateWorkflow()}\n disabled={!hasEngAccess}\n style={{ cursor: !hasEngAccess ? \"not-allowed\" : \"pointer\" }}\n >\n Save\n \n
\n )}\n {loading && (\n \n \n handleBaseFeeChange(e)}\n style={{ fontWeight: 600 }}\n disabled={!hasEngAccess}\n />\n \n \n $\n handleBaseFeeChange(e)}\n disabled={!hasEngAccess}\n />\n \n \n handleDelete()}\n onKeyDown={() => handleDelete()}\n disabled={!hasEngAccess}\n style={{ cursor: !hasEngAccess ? \"not-allowed\" : \"pointer\" }}\n >\n DELETE\n \n \n \n );\n}\n\nBaseFeeRow.propTypes = {\n baseFee: PropTypes.object\n};\n","/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport PropTypes from \"prop-types\";\nimport DealRow from \"../DealRow/DealRow\";\nimport { usePagination } from \"../../../../hooks/usePagination\";\nimport { IndexRow } from \"../../../Shared/IndexRow/IndexRow\";\nimport { PaginationWidget } from \"../../../Shared/PaginationWidget/PaginationWidget\";\nimport { useDidMountEffect } from \"../../../../hooks/useDidMountEffect\";\nimport {\n alphabeticalSort,\n chronologicalSort,\n numericalSort\n} from \"../../../../utils/sorting\";\n\nconst IndexGrid = styled.div`\n display: grid;\n`;\n\nexport default function DealsTable(props) {\n const {\n groupName,\n dealGroup,\n maxPerPage = 10,\n setDealsState,\n searchString\n } = props;\n\n const [showingAll, setShowingAll] = useState(false);\n const [sortBy, setSortBy] = useState({\n attribute: \"updatedAt\",\n ascending: true\n });\n\n const handleSort = attribute => {\n setSortBy(prevState => ({\n attribute,\n ascending: prevState.attribute === attribute ? !sortBy.ascending : true\n }));\n };\n\n const currentSortFunction = (a, b) => {\n switch (sortBy.attribute) {\n case \"beneficiaryName\":\n return alphabeticalSort(\n a.dealBeneficiaries[0],\n b.dealBeneficiaries[0],\n sortBy.ascending\n );\n case \"authorName\":\n return alphabeticalSort(\n a.author.fullName,\n b.author.fullName,\n sortBy.ascending\n );\n case \"state\":\n return alphabeticalSort(a.state, b.state, sortBy.ascending);\n case \"total\":\n return numericalSort(\n a.finalPriceData.pay_total,\n b.finalPriceData.pay_total,\n sortBy.ascending\n );\n case \"updatedAt\":\n return chronologicalSort(a.updatedAt, b.updatedAt, sortBy.ascending);\n // By default deals will be sorted by last updated\n default:\n return chronologicalSort(a.updatedAt, b.updatedAt, sortBy.ascending);\n }\n };\n\n const currentSortArrow = attribute => {\n if (sortBy.attribute === attribute && sortBy.ascending) return \"↑\";\n if (sortBy.attribute === attribute && !sortBy.ascending) return \"↓\";\n };\n\n const sortedDealGroup = dealGroup.sort((a, b) => currentSortFunction(a, b));\n\n const {\n nextPage,\n prevPage,\n currentPage,\n maxPage,\n showAll,\n setCurrentPage,\n repaginate,\n currentData,\n startIndex,\n endIndex\n } = usePagination(sortedDealGroup, maxPerPage);\n\n useDidMountEffect(() => {\n setCurrentPage(1);\n }, [searchString]);\n\n const handleShowAllClick = () => {\n window.location = `#${groupName.toLowerCase().replace(/\\s/g, \"\")}`;\n window.scrollBy(0, -70);\n showAll();\n setShowingAll(true);\n };\n\n const handleRepaginateClick = () => {\n window.history.pushState(\n \"\",\n document.title,\n window.location.pathname + window.location.search\n );\n repaginate();\n setShowingAll(false);\n };\n\n return (\n <>\n {dealGroup.length === 0 && No results found...
}\n {dealGroup.length > 0 && (\n \n {`${startIndex} - ${endIndex} of ${dealGroup.length}`}
\n {dealGroup.length > maxPerPage && (\n \n )}\n {dealGroup.length > maxPerPage && (\n \n prevPage()}\n className=\"fas fa-chevron-left\"\n />\n nextPage()}\n className=\"fas fa-chevron-right\"\n />\n
\n )}\n \n )}\n \n {dealGroup.length > 0 && (\n \n handleSort(\"beneficiaryName\")}\n >\n Beneficiary Information {currentSortArrow(\"beneficiaryName\")}\n \n handleSort(\"authorName\")}\n >\n Account Executive {currentSortArrow(\"authorName\")}\n \n handleSort(\"total\")}>\n Total {currentSortArrow(\"total\")}\n
\n handleSort(\"state\")}>\n Status {currentSortArrow(\"state\")}\n
\n handleSort(\"updatedAt\")}\n >\n Last modified {currentSortArrow(\"updatedAt\")}\n \n \n )}\n {currentData().map(deal => (\n \n \n );\n}\n\nDealsTable.propTypes = {\n groupName: PropTypes.string,\n dealGroup: PropTypes.array,\n maxPerPage: PropTypes.number,\n setDealsState: PropTypes.func\n};\n","import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { BrowserRouter as Router } from \"react-router-dom\";\nimport { grayLighter } from \"../../styles/colors\";\nimport DataProvider from \"./DataProvider\";\n\nconst Container = styled.div`\n margin-top: 1rem;\n width: 100%;\n`;\n\nexport default function SalesFlow() {\n document.body.style.backgroundColor = grayLighter;\n\n const baseUrl = \"/sales\";\n\n // Current server state\n const [deal, setDeal] = useState({});\n\n return (\n \n \n \n \n );\n}\n","import React from \"react\";\nimport { Provider as AlertProvider, positions } from \"react-alert\";\nimport AlertTemplate from \"../Shared/AlertTemplate\";\nimport SalesFlow from \"./SalesFlow\";\nimport { AuthContextProvider } from \"../Shared/ContextProviders/AuthProvider\";\n\nconst options = {\n position: positions.TOP_RIGHT,\n timeout: 3500,\n offset: \"30px\"\n // you can also just use 'scale'\n};\n\nexport default function SalesFlowWrapper(props) {\n return (\n \n \n \n \n );\n}\n\nSalesFlowWrapper.propTypes = {};\n","import { render } from \"@testing-library/react\";\nimport AdditionalServiceSelect from \"./AdditionalServiceSelect\";\n\ndescribe(\"The AdditionalServiceSelect component\", () => {\n it(\"renders without crashing\", () => {\n const { container } = render(\n \n \n \n \n \n );\n expect(fetch.mock.calls.length).toEqual(0);\n await waitFor(() => {\n expect(container);\n expect(getByText(\"Choose beneficiaries\"));\n });\n });\n it(\"allows the user to select from a list or organization people\", async () => {\n const { getByText } = render(\n // need to wrap with the alert provider for popups\n \n \n \n \n \n \n );\n await waitFor(() => {\n expect(getByText(\"Homer Simpson\"));\n expect(getByText(\"Barney Gumble\"));\n });\n fireEvent.click(getByText(\"Homer Simpson\"));\n expect(getByText(\"First Visa\"));\n });\n it(\"does not let the user continue until there is a valid bundle\", async () => {\n const { getByText, getByTestId } = render(\n // need to wrap with the alert provider for popups\n \n \n \n \n \n \n );\n\n await waitFor(() => expect(getByText(\"Homer Simpson\")));\n\n expect(getByText(/Continue/i).closest(\"button\")).toHaveClass(\"disabled\");\n\n fireEvent.click(getByText(\"Homer Simpson\"));\n expect(getByText(\"First Visa\"));\n const workflowSelectDiv = getByTestId(\"workflow-select\");\n fireEvent.focus(workflowSelectDiv.querySelector(\"input\"));\n fireEvent.keyDown(workflowSelectDiv.querySelector(\"input\"), {\n key: \"ArrowDown\",\n code: 40\n });\n fireEvent.keyDown(workflowSelectDiv.querySelector(\"input\"), {\n key: \"Enter\",\n code: 13\n });\n\n expect(getByText(/Continue/i).closest(\"button\")).not.toHaveClass(\n \"disabled\"\n );\n });\n});\n","import { render, within, fireEvent, waitFor } from \"@testing-library/react\";\nimport { Provider as AlertProvider } from \"react-alert\";\nimport { Router } from \"react-router-dom\";\nimport { createMemoryHistory } from \"history\";\nimport DealIndexPage from \"./DealIndexPage\";\nimport { mockDeals } from \"../../../testHelpers/dealIndexMocks.new\";\nimport AlertTemplate from \"../../Shared/AlertTemplate\";\n\ndescribe(\"The DealIndexPage component\", () => {\n // fetch deals call on render\n beforeEach(() => {\n fetch.mockResponses([JSON.stringify({ deals: mockDeals })]);\n });\n\n afterEach(() => fetch.resetMocks());\n\n const history = createMemoryHistory();\n\n it(\"renders without crashing\", async () => {\n const { container, getAllByText } = render(\n \n \n \n \n );\n\n await waitFor(() => getAllByText(\"Drafts\")[0]);\n\n expect(fetch.mock.calls.length).toEqual(1);\n expect(container);\n });\n\n it(\"pulls down the deals from the server when rendered\", async () => {\n const { getByText } = render(\n \n \n \n \n );\n\n await waitFor(() => {\n expect(fetch.mock.calls.length).toEqual(1);\n getByText(\"Eric Cartman & 2 more\");\n });\n });\n\n it(\"sorts the deals within a section by 'last updated' by default\", async () => {\n const { getByTestId } = render(\n \n \n \n \n );\n\n await waitFor(() => {\n expect(fetch.mock.calls.length).toEqual(1);\n });\n\n const draftDealRows = within(getByTestId(\"Drafts\")).getAllByTestId(\n \"deal-row\"\n );\n\n await waitFor(() =>\n within(draftDealRows[0]).getByText(\"Eric Cartman & 2 more\")\n );\n\n const pendingDealRows = within(\n getByTestId(\"Payment Pending\")\n ).getAllByTestId(\"deal-row\");\n\n await waitFor(() => within(pendingDealRows[0]).getByText(\"Jarvis Witte\"));\n\n const inProgressDealRows = within(\n getByTestId(\"Payment in Progress\")\n ).getAllByTestId(\"deal-row\");\n await waitFor(() => within(inProgressDealRows[0]).getByText(\"Tiger Woods\"));\n });\n\n it(`sorts the deals chronologically in ascending order when clicking on \n date modified and in descending order on a second click`, async () => {\n const { getByTestId, getAllByTestId } = render(\n \n \n \n \n );\n\n await waitFor(() => {\n expect(fetch.mock.calls.length).toEqual(1);\n });\n\n fireEvent.click(getAllByTestId(\"deal-last-modified\")[0]);\n\n const draftDealRows = within(getByTestId(\"Drafts\")).getAllByTestId(\n \"deal-row\"\n );\n\n await waitFor(() => within(draftDealRows[0]).getByText(\"Randy Marsh\"));\n\n fireEvent.click(getAllByTestId(\"deal-last-modified\")[0]);\n\n const newDraftDealRows = within(getByTestId(\"Drafts\")).getAllByTestId(\n \"deal-row\"\n );\n\n await waitFor(() =>\n within(newDraftDealRows[0]).getByText(\"Eric Cartman & 2 more\")\n );\n });\n\n it(\"sorts the deals alphabetically by beneficiary name when clicking on 'deal'\", async () => {\n const { getByTestId, getAllByTestId } = render(\n \n \n \n \n );\n\n await waitFor(() => {\n expect(fetch.mock.calls.length).toEqual(1);\n });\n\n fireEvent.click(getAllByTestId(\"deal\")[0]);\n const draftDealRows = within(getByTestId(\"Drafts\")).getAllByTestId(\n \"deal-row\"\n );\n await waitFor(() =>\n within(draftDealRows[0]).getByText(\"Aaalphonse Mephesto\")\n );\n\n fireEvent.click(getAllByTestId(\"deal\")[0]);\n const newDraftDealRows = within(getByTestId(\"Drafts\")).getAllByTestId(\n \"deal-row\"\n );\n await waitFor(() => within(newDraftDealRows[0]).getByText(\"Zz Top\"));\n });\n\n it(\"displays the appropriate search results when typing in the search bar\", async () => {\n const { getByTestId, getAllByTestId } = render(\n \n \n \n \n );\n\n await waitFor(() => {\n expect(fetch.mock.calls.length).toEqual(1);\n });\n\n fireEvent.click(getAllByTestId(\"next-page\")[0]);\n fireEvent.click(getAllByTestId(\"next-page\")[0]);\n fireEvent.click(getAllByTestId(\"prev-page\")[0]);\n\n fireEvent.change(getByTestId(\"deal-index-searchbar\"), {\n target: { value: \"Chef Hayes\" }\n });\n\n await waitFor(() =>\n within(getAllByTestId(\"deal-row\")[0]).getByText(\"Chef Hayes\")\n );\n });\n});\n","import { render } from \"@testing-library/react\";\nimport { Provider as AlertProvider } from \"react-alert\";\nimport DealRow from \"./DealRow\";\nimport { mockDeals } from \"../../../../testHelpers/dealIndexMocks\";\nimport AlertTemplate from \"../../../Shared/AlertTemplate\";\n\ndescribe(\"The Deal component\", () => {\n it(\"renders without crashing\", () => {\n const { container } = render(\n \n \n );\n expect(container);\n });\n\n it(\"displays the billing person full name and organization display name\", () => {\n const { getByText } = render(\n \n \n );\n expect(getByText(\"Some Dude & 2 more\"));\n expect(getByText(\"Springfield parents assoc\"));\n });\n\n it(\"displays the final price pay total if it is present\", () => {\n const { getByText } = render(\n \n \n );\n expect(getByText(\"$9,937\"));\n });\n\n it(\"does not display the final price total if it is missing\", () => {\n const { getByText } = render(\n \n \n );\n expect(getByText(\"-\"));\n });\n\n describe(\"state\", () => {\n it(\"displays a friendly name for the draft deal state\", () => {\n const deal = mockDeals[0];\n deal.state = \"draft\";\n\n const { getByText } = render(\n \n \n );\n\n expect(getByText(\"Draft\"));\n });\n\n it(\"displays a friendly name for the submitted deal state\", () => {\n const deal = mockDeals[0];\n deal.state = \"submitted\";\n\n const { getByText } = render(\n \n \n );\n\n expect(getByText(\"Pending\"));\n });\n\n it(\"displays a friendly name for the active deal state\", () => {\n const deal = mockDeals[0];\n deal.state = \"active\";\n const { getByText } = render(\n \n \n );\n\n expect(getByText(\"Payments in progress\"));\n });\n });\n});\n","import { render, waitFor } from \"@testing-library/react\";\nimport { Provider as AlertProvider } from \"react-alert\";\nimport { BrowserRouter as Router } from \"react-router-dom\";\nimport DealShowPage from \"./DealShowPage\";\nimport { mockDeals } from \"../../../testHelpers/dealIndexMocks\";\nimport { mockUser } from \"../../../testHelpers/userMocks\";\nimport AlertTemplate from \"../../Shared/AlertTemplate\";\n\ndescribe(\"The DealShowPage component\", () => {\n // fetch deals call on render\n beforeEach(() => {\n fetch.mockResponses([JSON.stringify(mockUser), { status: 200 }]);\n });\n\n afterEach(() => fetch.resetMocks());\n\n it(\"renders without crashing\", async () => {\n const { container, getByText } = render(\n \n \n \n \n );\n\n expect(fetch.mock.calls.length).toEqual(1);\n expect(container);\n });\n\n describe(\"actions and status\", () => {\n it(\"displays a the finalize and submit link for a draft deal state\", () => {\n const deal = mockDeals[2];\n deal.state = \"draft\";\n\n const { getByText, queryByText } = render(\n \n \n \n \n );\n\n expect(getByText(\"This is a draft.\"));\n expect(getByText(\"Finalize and submit package.\"));\n expect(getByText(\"Archive this deal\"));\n expect(queryByText(\"No actions available\")).not.toBeInTheDocument();\n });\n\n it(\"displays the unarchive link for an archived deal\", () => {\n const deal = mockDeals[2];\n deal.state = \"draft\";\n deal.archived = true;\n\n const { getByText } = render(\n \n \n \n \n );\n\n expect(getByText(\"Unarchive this deal\"));\n });\n\n it(\"displays the status and edit link for the submitted deal state\", () => {\n const deal = mockDeals[2];\n deal.state = \"submitted\";\n deal.archived = false;\n\n const { getByText, queryByText } = render(\n \n \n \n \n );\n\n expect(getByText(\"Payment not yet received\"));\n expect(getByText(\"Edit deal\"));\n expect(queryByText(\"No actions available\")).not.toBeInTheDocument();\n });\n\n it(\"displays a friendly name for the active deal state\", () => {\n const deal = mockDeals[2];\n deal.state = \"active\";\n const { getByText, queryByText } = render(\n \n \n \n \n );\n\n expect(queryByText(\"Edit deal\")).not.toBeInTheDocument();\n expect(getByText(\"Payments in progress\"));\n expect(queryByText(\"No actions available\"));\n });\n });\n});\n","import React, { useState } from \"react\";\nimport PropTypes, { object } from \"prop-types\";\nimport styled from \"styled-components\";\nimport Collapse from \"react-css-collapse\";\nimport { formatCentsToCurrency } from \"../../../utils/numberHelpers\";\nimport { grayDark, grayDarker, white, grayLight } from \"../../../styles/colors\";\n\nconst DiscountsBox = styled.div`\n margin-top: 3rem;\n width: 23rem;\n background: ${white};\n border: 1px solid ${grayLight};\n border-radius: 6px;\n padding: 1rem;\n p {\n margin: 0;\n }\n`;\n\nconst DiscountRow = styled.div`\n display: flex;\n justify-content: space-between;\n margin-left: 2rem;\n color: ${grayDark};\n p {\n font-size: 14px;\n }\n`;\n\nexport default function DiscountsDetails(props) {\n const { discountsTotal, dealDiscounts } = props;\n\n const [dropdownOpen, setDropdownOpen] = useState(false);\n\n return (\n \n \n setDropdownOpen(!dropdownOpen)}\n onKeyDown={() => setDropdownOpen(!dropdownOpen)}\n >\n Total Discounts
\n \n -{formatCentsToCurrency(discountsTotal)}
\n \n \n {dealDiscounts.map((discount, i) => (\n \n {discount.name}
\n -{formatCentsToCurrency(discount.amount)}
\n \n ))}\n \n \n );\n}\n\nDiscountsDetails.propTypes = {\n discountsTotal: PropTypes.number,\n dealDiscounts: PropTypes.arrayOf(object)\n};\n","import { render, within } from \"@testing-library/react\";\nimport { Provider as AlertProvider } from \"react-alert\";\nimport { BrowserRouter as Router } from \"react-router-dom\";\nimport AlertTemplate from \"../../Shared/AlertTemplate\";\nimport ReviewStep from \"./ReviewStep\";\nimport {\n fullDealMock,\n mockWorkflowsWithFees\n} from \"../../../testHelpers/salesFlowMocks\";\n\ndescribe(\"The ReviewStep component\", () => {\n it(\"renders without crashing\", () => {\n const { container } = render(\n \n \n \n \n );\n expect(container);\n });\n\n it(\"displays the correct data given a deal object\", () => {\n const { getByTestId } = render(\n \n \n \n \n );\n const petitionerInformationDiv = getByTestId(\n \"petitioner-information-section\"\n );\n within(petitionerInformationDiv).getByText(\"Bigco\");\n\n const beneficiaryAndVisaDiv = getByTestId(\"beneficiary-visas-section\");\n\n within(beneficiaryAndVisaDiv).queryAllByText(\"John Deer\");\n within(beneficiaryAndVisaDiv).getByText(\"E-2\");\n within(beneficiaryAndVisaDiv).queryAllByText(\"jdeer@gmail.com\");\n });\n});\n","import { render } from \"@testing-library/react\";\nimport RunningTotal from \"./RunningTotal\";\nimport {\n mockWorkflowsWithFees,\n mockPetitionBundles\n} from \"../../../testHelpers/salesFlowMocks\";\n\ndescribe(\"The RunningTotal component\", () => {\n it(\"renders without crashing\", () => {\n const { container } = render( tags to emphasise matching search characters\n expect(getByText(\"B\"));\n expect(getByText(\"igco\"));\n });\n\n it(\"cannot navigate to the beneficiaries/visa step without a deal in state\", async () => {\n const { getByPlaceholderText, getByText } = render( tags to emphasise matching search characters\n expect(getByText(\"B\"));\n expect(getByText(\"igco\"));\n fireEvent.click(getByText(\"igco\"));\n fireEvent.click(getByText(\"Continue\"));\n await waitFor(() => {\n expect(getByText(\"Beneficiaries & Visas\")[1]);\n });\n });\n});\n","import styled from \"styled-components\";\nimport { grayDark } from \"../../../styles/colors\";\n\nexport const Section = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n\n h3 {\n font-weight: 400;\n font-size: 21px;\n margin: 0;\n }\n\n h4 {\n font-weight: 400;\n font-size: 18px;\n margin: 0.5rem 0;\n }\n\n p {\n color: ${grayDark};\n }\n\n a {\n text-decoration: underline;\n margin: 0.5rem 0;\n }\n`;\n","import React, { createContext, useState, useContext } from \"react\";\n\nconst FormContext = createContext(null);\n\nexport const useFormState = () => {\n const formContextState = useContext(FormContext);\n\n if (formContextState === null) {\n throw new Error(\n \"useFormState must be used within a FormContext.Provider tag\"\n );\n }\n return formContextState;\n};\n\nexport const FormContextProvider = ({ children }) => {\n const [state, setState] = useState({ dirty: false });\n return (\n \n {children}\n \n );\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"styled-components\";\nimport { Link } from \"react-router-dom\";\nimport Loader from \"react-loader-spinner\";\nimport { gray } from \"../../styles/colors\";\n\nconst Main = styled.div`\n border-top: 1px solid ${gray};\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n\n button {\n margin-top: 0.5rem;\n }\n`;\n\nexport default function ActionFrame(props) {\n const {\n loading = false,\n continueDisabled,\n stepsArray,\n currentStep,\n continueButtonText = \"Continue\",\n lastStepText,\n handleContinue\n } = props;\n\n const currentStepIndex = stepsArray.indexOf(currentStep);\n const nextStep = () => stepsArray[currentStepIndex + 1];\n const prevStep = () => stepsArray[currentStepIndex - 1];\n\n return (\n \n {currentStepIndex > 1 && (\n Back
\n \n )}\n
\n \n {loading && (\n Next: {nextStep().description} }\n {!nextStep() && {lastStepText} }\n handleContinue()}\n disabled={continueDisabled}\n >\n {continueButtonText}\n \n \n )}\n
\n \n );\n}\n\nActionFrame.propTypes = {\n stepsArray: PropTypes.array,\n currentStep: PropTypes.object,\n continueButtonText: PropTypes.string,\n lastStepText: PropTypes.string\n};\n","import React, { useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"styled-components\";\nimport { green } from \"../../../styles/colors\";\nimport { formatCentsToCurrency } from \"../../../utils/numberHelpers\";\nimport { uniqueArrayByProp } from \"../../../utils/arrayMethods\";\n\nconst Container = styled.div`\n position: sticky;\n top: 25px;\n bottom: 25px;\n width: 20vw;\n border-radius: 2px;\n background-color: white;\n padding: 1rem 1rem 1.5rem 1rem;\n text-align: left;\n box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);\n min-width: 16rem;\n\n h4,\n h5 {\n margin: 0;\n }\n`;\n\nconst LineItem = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n p {\n margin: 0;\n font-size: 12px;\n }\n .custom-discount-line-item {\n margin-right: 2rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n\nexport default function RunningTotal(props) {\n const {\n petitionBundles = [],\n discounts = [],\n workflows = [],\n selectedPlan,\n setPayTotal\n } = props;\n\n const queryWorkflowById = workflowId => {\n if (workflowId) {\n const { totalBaseFees, name: workflowName } = workflows.find(\n wf => wf.id === workflowId\n );\n return [totalBaseFees, workflowName];\n }\n };\n\n const queryAdditionalServiceById = serviceId => {\n const allAdditionalServices = [];\n workflows.forEach(wf => allAdditionalServices.push(wf.additionalServices));\n const uniqueServices = uniqueArrayByProp(\n \"id\",\n allAdditionalServices.flat()\n );\n const { name: serviceName, amount: serviceAmount } = uniqueServices.find(\n as => as.id === serviceId\n );\n return [serviceName, serviceAmount];\n };\n\n const totalPrice = petitionBundles.reduce((total, currentBundle) => {\n if (currentBundle.workflowId || currentBundle.petition?.workflow.id) {\n const [totalBaseFees] = queryWorkflowById(\n currentBundle.workflowId ?? currentBundle.petition?.workflow.id\n );\n const totalAdditionalServiceFees = currentBundle.additionalServiceIds.reduce(\n (totalServiceFees, currentServiceId) => {\n const [, serviceAmount] = queryAdditionalServiceById(\n currentServiceId\n );\n return totalServiceFees + serviceAmount;\n },\n 0\n );\n return total + totalBaseFees + totalAdditionalServiceFees;\n }\n return total;\n }, 0);\n\n const totalDiscounts = discounts.reduce(\n (total, currentValue) => total + currentValue.amount,\n 0\n );\n\n useEffect(() => {\n if (setPayTotal) setPayTotal(totalPrice - totalDiscounts);\n }, [totalPrice, totalDiscounts]);\n\n return (\n \n Summary \n {petitionBundles.map(bundle => {\n if (bundle.workflowId || bundle.petition?.workflow.id) {\n // necessary because workflowId is not on the bundle after the beneficiary step\n const idForQuery = bundle.workflowId ?? bundle.petition?.workflow.id;\n const [totalBaseFees, workflowName] = queryWorkflowById(idForQuery);\n const totalBundleAdditionalServiceFees = bundle.additionalServiceIds.reduce(\n (totalBundleServiceFees, currentServiceId) => {\n const [, serviceAmount] = queryAdditionalServiceById(\n currentServiceId\n );\n return totalBundleServiceFees + serviceAmount;\n },\n 0\n );\n\n return (\n \n \n {workflowName} \n \n {formatCentsToCurrency(\n totalBaseFees + totalBundleAdditionalServiceFees\n )}\n \n \n {bundle.additionalServiceIds.map((serviceId, i) => {\n const [name, amount] = queryAdditionalServiceById(serviceId);\n return (\n \n {name}
\n {formatCentsToCurrency(amount)}
\n \n );\n })}\n \n );\n }\n return
;\n })}\n {discounts.length > 0 && (\n <>\n \n Discounts \n \n -{formatCentsToCurrency(totalDiscounts)}\n \n \n {discounts.map(discount => (\n \n {discount.name}
\n -{formatCentsToCurrency(discount.amount)}
\n \n ))}\n \n )}\n \n 1 ? { fontWeight: 400 } : null}>Pay Total \n 1 ? { fontWeight: 400 } : null}>\n {formatCentsToCurrency(totalPrice - totalDiscounts)}\n \n \n {selectedPlan && selectedPlan > 1 && (\n <>\n \n Over {selectedPlan} months
\n \n \n First payment \n \n {formatCentsToCurrency(\n (totalPrice - totalDiscounts) / selectedPlan\n )}\n \n \n \n )}\n \n );\n}\n\nRunningTotal.propTypes = {\n petitionBundles: PropTypes.array,\n discounts: PropTypes.array\n};\n"],"sourceRoot":""}