history.push(`/proposals/${proposalRef}`)}\n >\n \n \n \n {getName(item) || \"[No name]\"}\n \n \n {item.vehicle.regNo\n ? `${item.vehicle.regNo.toUpperCase()}, `\n : null}\n {item.vehicle.make || item.vehicle.model\n ? `${item.vehicle.make} ${item.vehicle.model}`\n : \"[vehicle unknown]\"}\n \n {item.dealer.name} \n ) : null}\n\n \n Finance:{\" \"}\n {item.finance.totalFinance\n ? formatCurrency(item.finance.totalFinance)\n : \"\"}\n \n \n APR: {`${Math.round((item.finance.aprRate || 0) * 100) / 100}%`}\n \n\n \n Comm:{\" \"}\n {`${\n item.finance.dealerCommission\n ? formatCurrency(item.finance.dealerCommission)\n : \"-\"\n }`}\n \n\n \n\n {isAdministrator(loggedInUser) ? (\n \n ) : (\n \n \n \n )}\n | \n \n {item.finance.totalFinance\n ? formatCurrency(item.finance.totalFinance)\n : \"\"}\n | \n {`${\n Math.round((item.finance.aprRate || 0) * 100) / 100\n }%`} | \n\n \n {`${\n item.finance.dealerCommission\n ? formatCurrency(item.finance.dealerCommission)\n : \"-\"\n }`}\n | \n {isAdministrator(loggedInUser) ? (\n \n \n | \n ) : (\n \n \n | \n )}\n \n );\n};\n\nexport const ProposalListItemLoadingPlaceholder = () => (\n \n | \n \n | \n
\n);\n\nexport const ProposalListItemNoItemsPlaceholder = () => (\n \n | \n No results found \n | \n
\n);\n\nexport default compose<\n RouteComponentProps & ProposalListItemProps,\n ProposalListItemProps\n>(withRouter)(ProposalListItem);\n","import gql from \"graphql-tag\";\nimport * as React from \"react\";\nimport { Query, QueryResult, useQuery } from \"react-apollo\";\nimport { ProposalSearchArgs, ProposalStatistics } from \"./types\";\n\nexport interface ProposalStatisticsData {\n proposalStatistics: ProposalStatistics;\n}\n\nexport const PROPOSAL_STATISTICS = gql`\n query ProposalStatisticsQuery($input: ProposalSearchArgsInput) {\n proposalStatistics(input: $input) {\n totalCreatedCount\n totalPaidOutCount\n totalAcceptedCount\n totalCancelledCount\n totalFinance\n averagePaidOutFinance\n averageApr\n averagePeriod\n totalDebitBackAmount\n totalDealerCommission\n averageAcceptedFinance\n acceptance\n }\n }\n`;\n\ninterface ProposalStatisticsVariables {\n input?: ProposalSearchArgs;\n}\n\nconst ProposalStatisticsQuery = ({\n children,\n variables\n}: { variables: ProposalStatisticsVariables } & {\n children: (\n result: QueryResult\n ) => JSX.Element | null;\n}) => (\n \n query={PROPOSAL_STATISTICS}\n variables={variables}\n >\n {children}\n \n);\n\nexport const useProposalStatistics = (searchArgs?: ProposalSearchArgs) => {\n // Remove the page information from the payload, so paging does not cause a re-query\n const { page, pageSize, ...input } = searchArgs || {};\n\n const { loading, data } = useQuery<\n ProposalStatisticsData,\n ProposalStatisticsVariables\n >(PROPOSAL_STATISTICS, {\n variables: { input }\n });\n\n return { loading, proposalStatistics: data?.proposalStatistics };\n};\n\nexport default ProposalStatisticsQuery;\n","import * as React from \"react\";\nimport { formatCurrency } from \"../../../utils\";\nimport ListTotals, { ListTotalsItem } from \"../../PagedList/ListTotals\";\nimport { getPeriodDescription } from \"../../shared/PeriodPicker\";\nimport { useProposalStatistics } from \"../ProposalStatisticsQuery\";\nimport { ProposalSearchArgs } from \"../types\";\n\nconst ProposalListTotals = ({\n searchArgs\n}: {\n searchArgs?: ProposalSearchArgs;\n}) => {\n const { loading, proposalStatistics } = useProposalStatistics(searchArgs);\n\n return (\n \n \n {getPeriodDescription(searchArgs?.startDate, searchArgs?.endDate)}\n \n }\n />\n {formatCurrency(proposalStatistics?.totalFinance)}\n ) : null\n }\n loading={loading}\n />\n {formatCurrency(proposalStatistics?.totalDealerCommission)}\n ) : null\n }\n loading={loading}\n />\n \n );\n};\n\nexport default ProposalListTotals;\n","import { faFileExcel } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { FormikProps } from \"formik\";\nimport querystring from \"querystring\";\nimport * as React from \"react\";\nimport {\n Col,\n DropdownItem,\n DropdownMenu,\n DropdownToggle,\n FormGroup,\n Label,\n Row,\n UncontrolledDropdown\n} from \"reactstrap\";\nimport config from \"../../../config\";\nimport AccountManagerSelect from \"../../AccountManagers/AccountManagerSelect\";\nimport DealerSelect from \"../../Dealers/DealerSelect\";\nimport FileDownloadLink from \"../../FileDownloadLink\";\nimport BooleanCheckboxField from \"../../Forms/BooleanCheckboxField\";\nimport PeriodPickerField from \"../../Forms/PeriodPickerField\";\nimport { useLoggedInUser } from \"../../LoggedInUserQuery\";\nimport { ContextNames } from \"../../types\";\nimport {\n ProposalSearchArgs,\n ProposalSearchDate,\n ProposalSearchDateLookup\n} from \"../types\";\n\nconst getQuerystringForReports = (args: ProposalSearchArgs) => {\n const status =\n args.status && args.status.length\n ? args.status.map(s => s.replace(/_/g, \"\"))\n : [];\n\n const convertedArgs = {\n ...args,\n status: status && status.length ? status : []\n };\n\n delete (convertedArgs as any).create;\n delete (convertedArgs as any).editDates;\n\n return querystring.stringify(convertedArgs as any);\n};\n\nconst ProposalSearchFilterPanel = ({\n values,\n setFieldValue,\n submitForm,\n initialValues,\n context\n}: FormikProps & { context?: ContextNames }) => {\n const {\n loading,\n loggedInUser,\n isDealer,\n isAccountManager,\n isSuperUser\n } = useLoggedInUser();\n\n if (loading || !loggedInUser) {\n return null;\n }\n\n return (\n <>\n \n \n \n \n \n
\n \n {values.filterByDate\n ? ProposalSearchDateLookup[values.filterByDate].description\n : ProposalSearchDateLookup[ProposalSearchDate.CREATED_DATE]\n .description}{\" \"}\n \n \n {Object.keys(ProposalSearchDate).map(x => (\n {\n setFieldValue(\"filterByDate\", x, false);\n submitForm();\n }}\n >\n {\n ProposalSearchDateLookup[x as ProposalSearchDate]\n .description\n }\n \n ))}\n \n \n
\n
\n {context !== ContextNames.DEALER && !isDealer && (\n <>\n {context !== ContextNames.ACCOUNT_MANAGER && !isAccountManager && (\n \n \n \n \n {\n setFieldValue(\"accountManagerId\", id, false);\n submitForm();\n }}\n isClearable={true}\n />\n \n \n
\n )}\n \n \n \n \n {\n setFieldValue(\"dealerId\", id, false);\n submitForm();\n }}\n isClearable={true}\n />\n \n \n
\n \n \n )}\n {!isDealer && (\n \n \n \n \n
\n )}\n {isSuperUser && (\n \n \n \n \n
\n )}\n {!isDealer && (\n <>\n \n Download\n report\n \n {(isDealer || isAccountManager) && (\n Report is limited to 200 proposals
\n )}\n \n )}\n \n );\n};\nexport default ProposalSearchFilterPanel;\n","import { difference } from \"lodash\";\nimport * as React from \"react\";\nimport {\n DropdownItem,\n DropdownMenu,\n DropdownToggle,\n InputGroupButtonDropdown\n} from \"reactstrap\";\nimport withToggleState, { ToggleStateProps } from \"../../withToggleState\";\nimport {\n ActiveProposalStatus,\n ProposalStatusEnum,\n ProposalStatusLookup\n} from \"../types\";\n\n// tslint:disable:jsx-no-lambda\nconst ProposalStatusDropdownItem = ({\n status,\n active,\n updateStatus,\n title\n}: {\n title: string;\n active: boolean;\n status: string[];\n updateStatus: (status: string[]) => void;\n}) => {\n const update = () => updateStatus(status);\n\n return (\n \n {title}\n \n );\n};\n\nconst ProposalStatusDropdown = withToggleState<{\n status?: string[];\n updateStatus: (status: string[]) => void;\n}>(false)(\n ({\n status,\n active,\n toggle,\n updateStatus\n }: ToggleStateProps & {\n status?: string[];\n updateStatus: (status: string[]) => void;\n }) => {\n let currentStatus: string;\n\n if (!status || !status.length) {\n currentStatus = \"all\";\n } else {\n currentStatus = status[0].toUpperCase();\n\n if (status.length > 1) {\n const diff = difference(ActiveProposalStatus, status);\n if (diff.length === 0) {\n currentStatus = \"active\";\n }\n }\n }\n\n const title =\n currentStatus === \"all\"\n ? \"All\"\n : !currentStatus || currentStatus === \"active\"\n ? \"Active\"\n : ProposalStatusLookup[currentStatus as ProposalStatusEnum].description;\n\n const allStatus = Object.keys(ProposalStatusEnum) as ProposalStatusEnum[];\n\n const activeGroup = ActiveProposalStatus;\n const inactiveGroup = difference(allStatus, activeGroup);\n\n return (\n \n {title}\n \n \n \n \n {activeGroup.map(s => (\n \n ))}\n \n {inactiveGroup.map(s => (\n \n ))}\n \n \n );\n }\n);\n\nexport default ProposalStatusDropdown;\n","import { faSearch } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Field, FieldProps } from \"formik\";\nimport * as React from \"react\";\nimport { Button, Input, InputGroup, InputGroupAddon } from \"reactstrap\";\nimport ProposalStatusDropdown from \"./ProposalStatusDropdown\";\n\nconst ProposalSearchInputField = ({\n name,\n placeholder\n}: {\n name: string;\n placeholder?: string;\n}) => (\n \n \n {({\n field,\n form: { setFieldValue, submitForm, values }\n }: FieldProps) => (\n <>\n \n {\n setFieldValue(\"status\", s, false);\n submitForm();\n }}\n />\n \n )}\n \n \n \n \n \n);\n\nexport default ProposalSearchInputField;\n","import { format } from \"date-fns\";\nimport { FormikProps } from \"formik\";\nimport { defaults, difference } from \"lodash\";\nimport * as React from \"react\";\nimport { isAdministrator } from \"../../../utils\";\nimport FormikEffects from \"../../Forms/FormikEffects\";\nimport SearchForm from \"../../Forms/SearchForm\";\nimport { LoggedInUserProps, withLoggedInUser } from \"../../LoggedInUserQuery\";\nimport PagedList from \"../../PagedList\";\nimport { ContextNames, User } from \"../../types\";\nimport {\n ActiveProposalStatus,\n ProposalSearchArgs,\n ProposalSearchDate,\n ProposalStatusEnum\n} from \"../types\";\nimport \"./index.scss\";\nimport ProposalListActionButtons from \"./ProposalListActionButtons\";\nimport ProposalListItem, {\n ProposalListItemLoadingPlaceholder,\n ProposalListItemNoItemsPlaceholder\n} from \"./ProposalListItem\";\nimport { PROPOSAL_LIST, ProposalListData } from \"./ProposalListQuery\";\nimport ProposalListTotals from \"./ProposalListTotals\";\nimport ProposalSearchFilterPanel from \"./ProposalSearchFilterPanel\";\nimport ProposalSearchInputField from \"./ProposalSearchInputField\";\n\ninterface ProposalListProps {\n context?: ContextNames;\n fixedArgs?: ProposalListFormValues;\n defaultArgs?: ProposalListFormValues;\n}\n\ninterface ProposalListFormValues extends ProposalSearchArgs {\n table?: boolean;\n}\n\nconst mapValuesToQuerystring = (values: ProposalListFormValues) => ({\n ...values,\n status: getQuerystringStatus(values.status as ProposalStatusEnum[]),\n startDate: values.startDate\n ? format(values.startDate, \"YYYY-MM-DD\")\n : undefined,\n endDate: values.endDate ? format(values.endDate, \"YYYY-MM-DD\") : undefined\n});\n\nconst mapQuerystringToValues = (qs: any): ProposalListFormValues => ({\n ...qs,\n fundedDealersOnly: qs.fundedDealersOnly === \"true\",\n editDates: qs.editDates === \"true\",\n hasDebitBackOnly: qs.hasDebitBackOnly === \"true\",\n status: getStatusFromQuerystring(qs.status)\n});\n\nconst defaultValues: ProposalListFormValues = {\n page: 1,\n pageSize: 10,\n status: ActiveProposalStatus,\n fundedDealersOnly: false,\n hasDebitBackOnly: false,\n filterByDate: ProposalSearchDate.PAID_OUT_DATE,\n statisticsFilterByDate: true,\n editDates: false\n};\n\nconst getQuerystringStatus = (\n status?: ProposalStatusEnum[]\n): string[] | string | undefined => {\n if (!status) {\n return undefined;\n }\n\n if (!difference(ActiveProposalStatus, status).length) {\n return \"active\";\n }\n\n if (!status.length || !difference(Object.keys(ProposalStatusEnum), status)) {\n return \"all\";\n }\n\n return status.map(s => s.toLowerCase());\n};\n\nconst getStatusFromQuerystring = (\n status?: string | string[]\n): ProposalStatusEnum[] | undefined => {\n if (status === \"active\") {\n return ActiveProposalStatus;\n }\n\n if (status === \"all\") {\n return [];\n }\n\n if (status) {\n if (typeof status === \"string\") {\n return [status.toUpperCase() as ProposalStatusEnum];\n }\n\n if (Array.isArray(status)) {\n return status.map(x => x.toUpperCase() as ProposalStatusEnum);\n }\n }\n\n return undefined;\n};\n\nconst ProposalListTableContainer = ({\n variables,\n children,\n loggedInUser\n}: {\n variables: { input: ProposalSearchArgs };\n children: React.ReactNode;\n loggedInUser?: User;\n context?: ContextNames;\n}) => {\n const {\n input: { page, pageSize, ...input }\n } = variables;\n\n return (\n <>\n {input.startDate || input.endDate ? (\n \n ) : null}\n \n \n \n | \n Finance | \n APR | \n Commission | \n {loggedInUser && isAdministrator(loggedInUser) ? (\n | \n ) : null}\n
\n \n {children}\n
\n \n );\n};\n\nclass ProposalList extends React.Component<\n ProposalListProps & LoggedInUserProps\n> {\n public render() {\n const { context, defaultArgs, fixedArgs } = this.props;\n\n return (\n \n {(formikProps: FormikProps) => {\n const { table, editDates, ...input } = formikProps.initialValues;\n return (\n <>\n {\n let setStatusToAll = false;\n\n const statusIncludesPaidOut =\n !currentValues.status ||\n !currentValues.status.length ||\n currentValues.status.includes(ProposalStatusEnum.PAID_OUT);\n\n // Change the status filter to \"All\" if the date filter is changed to \"Paid out date\"\n // and paid-out proposals are not visible.\n if (\n prevValues.filterByDate !== currentValues.filterByDate &&\n currentValues.filterByDate ===\n ProposalSearchDate.PAID_OUT_DATE &&\n !statusIncludesPaidOut\n ) {\n setStatusToAll = true;\n }\n\n // Change the status filter to \"All\" if the \"Proposals with debit backs only\" checkbox\n // is ticked, and paid-out proposals are not visible.\n if (\n prevValues.hasDebitBackOnly !==\n currentValues.hasDebitBackOnly &&\n currentValues.hasDebitBackOnly &&\n !statusIncludesPaidOut\n ) {\n setStatusToAll = true;\n }\n\n if (setStatusToAll) {\n formikProps.setFieldValue(\"status\", [], false);\n setTimeout(formikProps.submitForm, 0);\n }\n }}\n />\n \n data.loggedInUser && data.loggedInUser.proposals\n }\n listItemsContainer={ProposalListTableContainer}\n actionButtonsComponent={ProposalListActionButtons}\n pollInterval={30000}\n fetchPolicy=\"cache-and-network\"\n loadingPlaceholder={ProposalListItemLoadingPlaceholder}\n noItemsPlaceholder={ProposalListItemNoItemsPlaceholder}\n listItemComponent={ProposalListItem}\n />\n \n );\n }}\n \n );\n }\n}\n\nexport default withLoggedInUser(ProposalList);\n","import { faSpinner } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport classNames from \"classnames\";\nimport * as React from \"react\";\n\nconst LoadingSpinner = () => (\n \n);\n\ninterface ListTotalsProps {\n children: React.ReactElement | React.ReactElement[];\n className?: string;\n}\n\ninterface ListTotalsItemProps {\n label: string;\n value?: string | React.ReactElement | null;\n loading?: boolean;\n}\n\nexport const ListTotals = ({ children, className }: ListTotalsProps) => {\n return {children}
;\n};\n\nexport const ListTotalsItem = ({\n label,\n value,\n loading\n}: ListTotalsItemProps) => {\n return (\n \n {label}\n \n {loading ? : value || null}\n \n
\n );\n};\n\nexport default ListTotals;\n"],"sourceRoot":""}