\r\n Layout Settings\r\n User Interface Settings\r\n
\r\n\r\n
\r\n
\r\n )}\r\n \r\n {status.ImpersonationActive ? (\r\n <>{impersonationHeader}\r\n ) : (\r\n {username}\r\n )}\r\n
\r\n {status.ImpersonationActive && (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Stop Impersonating\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Impersonate\r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n {!is3rdPartyDataPortalUser && (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {username}\r\n
\r\n \r\n {user?.MemberEmail}\r\n \r\n \r\n \r\n Profile\r\n
\r\n \r\n \r\n Logout\r\n
\r\n \r\n \r\n \r\n \r\n { menuFlip ?
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default NavToggle;\r\n","import React from 'react';\r\n\r\nimport TopBar from '@components/general/topBar/TopBar';\r\nimport NavToggle from '@components/general/sideBar/NavToggle';\r\n\r\nconst Header = () => (\r\n \r\n {\r\n options.map(option => {\r\n const isSelect = currSizePerPage === `${option.page}`;\r\n return (\r\n onSizePerPageChange(option.page)}\r\n >\r\n {option.text}\r\n \r\n );\r\n })\r\n }\r\n
\r\n );\r\n\r\n const customTotal = (from, to, size) => (\r\n \r\n \r\n {`Showing rows ${from} to ${to} of ${size}`}\r\n \r\n );\r\n\r\n const options = {\r\n firstPageText: '<<',\r\n hidePageListOnlyOnePage: true,\r\n lastPageText: '>>',\r\n nextPageText: '>',\r\n paginationTotalRenderer: customTotal,\r\n prePageText: '<',\r\n showTotal: true,\r\n sizePerPageList: [],\r\n sizePerPage: isModal ? 5 : 10,\r\n sizePerPageRenderer,\r\n };\r\n\r\n return (\r\n \r\n {!isEmpty(src) ? 
: null}\r\n {!isEmpty(header) ?
\r\n );\r\n};\r\n\r\nCard.propTypes = {\r\n alt: PropTypes.string,\r\n children: PropTypes.node,\r\n customClass: PropTypes.string,\r\n customBodyClass: PropTypes.string,\r\n customHeader: PropTypes.string,\r\n header: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.shape(),\r\n ]),\r\n footer: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.node,\r\n ]),\r\n src: PropTypes.string,\r\n title: PropTypes.string,\r\n id: PropTypes.string,\r\n};\r\n\r\nCard.defaultProps = {\r\n alt: null,\r\n customClass: '',\r\n customHeader: '',\r\n customBodyClass: '',\r\n header: null,\r\n footer: null,\r\n src: null,\r\n title: null,\r\n id: null,\r\n};\r\n\r\nexport default Card;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory from 'react-bootstrap-table2-paginator';\r\n\r\nimport TeamMemberRowActionButtons from '@components/table/actionButtons/TeamMemberRowActionButtons';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport Stack from '@mui/material/Stack';\r\n\r\nconst TeamMembersTable = ({\r\n id = 'teamMembersTable',\r\n displayData,\r\n onMemberDelete,\r\n showDeleteButton = true,\r\n isModal = false,\r\n}) => {\r\n const onDeleteRow = row => onMemberDelete(row);\r\n\r\n const actionsFormatter = (cell, row) => (\r\n {header}
: null}\r\n {!isEmpty(title)\r\n ? (\r\n \r\n
\r\n )\r\n : (\r\n \r\n {title}\r\n
\r\n{children}
\r\n \r\n
\r\n )}\r\n {!isEmpty(footer) && footer !== null\r\n ? {children}
\r\n {footer}
: null}\r\n \r\n {\r\n options.map(option => {\r\n const isSelect = currSizePerPage === `${option.page}`;\r\n return (\r\n onSizePerPageChange(option.page)}\r\n >\r\n {option.text}\r\n \r\n );\r\n })\r\n }\r\n
\r\n );\r\n\r\n const customTotal = (from, to, size) => (\r\n \r\n \r\n {`Showing rows ${from} to ${to} of ${size}`}\r\n \r\n );\r\n\r\n const options = {\r\n firstPageText: '<<',\r\n hidePageListOnlyOnePage: true,\r\n lastPageText: '>>',\r\n nextPageText: '>',\r\n paginationTotalRenderer: customTotal,\r\n prePageText: '<',\r\n showTotal: true,\r\n sizePerPageList: [],\r\n sizePerPage: isModal ? 5 : 10,\r\n sizePerPageRenderer,\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nListingImpersonation.propTypes = {\r\n};\r\n\r\nexport default ListingImpersonation;\r\n","import React from 'react';\r\nimport Modal from '../smartAdminUI/Modal';\r\nimport ListingImpersonation from './ListingImpersonation/ListingImpersonation';\r\n\r\nconst ReqImpersonation = () => (\r\n \r\n
\r\n \r\n);\r\n\r\nexport default ReqImpersonation;\r\n","import { useState } from 'react';\r\n\r\nconst useObjectState = (initialState = {}) => {\r\n const [localState, _setLocalState] = useState(initialState);\r\n const setLocalState = fieldAndValue => _setLocalState({ ...localState, ...fieldAndValue });\r\n\r\n return [localState, setLocalState];\r\n};\r\n\r\nexport default useObjectState;\r\n","export default __webpack_public_path__ + \"static/media/cover-7-lg.d2b95e3a.png\";","export default __webpack_public_path__ + \"static/media/cover-8-lg.a56323c9.png\";","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","import React from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\nimport Badge from 'react-bootstrap/Badge';\r\n\r\nimport {\r\n CLOUDCMA_PAGE_CLICKED,\r\n CONDO_MANAGEMENT_PAGE_CLICKED,\r\n CREAWEBFORMS_PAGE_CLICKED,\r\n CREADDF_PAGE_CLICKED,\r\n AGGREGATE_DATA_BUTTON_CLICKED,\r\n DATA_SEARCH_BUTTON_CLICKED,\r\n HOME_BUTTON_CLICKED,\r\n REMAPLIST_PAGE_CLICKED,\r\n SEARCH_AGENTS_PAGE_CLICKED,\r\n SEARCH_LISTINGS_PAGE_CLICKED,\r\n MATRIX_PAGE_CLICKED,\r\n OFFICE_PAGE_CLICKED,\r\n PROSPECTS_PAGE_CLICKED,\r\n SPACELIST_PAGE_CLICKED,\r\n SPIN_PAGE_CLICKED,\r\n} from '@redux/constants/ActionTypes';\r\n\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\nimport { clearPhotoCollection } from '@redux/modules/photo';\r\nimport { clearRepeatableSectionCount } from '@redux/modules/listing';\r\nimport { clearAgent } from '@redux/modules/agent';\r\nimport useObjectState from '@hooks/useObjectState';\r\nimport useAcl from '@hooks/useAcl';\r\n\r\nimport { includes } from 'lodash';\r\n\r\nimport P9CoverLarge from '@images/covers/cover-7-lg.png';\r\nimport P9CoverLargeDP from '@images/covers/cover-8-lg.png';\r\nimport P9Logo from '@images/logos/P9LogoWhite.png';\r\nimport WhitePillars from '@images/logos/pillars-white.png';\r\n\r\nconst appSettings = require('../../../appsettings.json');\r\n\r\nconst menuInitialState = {\r\n agentNav: false,\r\n listingNav: false,\r\n createListingNav: false,\r\n officesNav: false,\r\n creaNav: false,\r\n resourcesNav: false,\r\n transactionalNav: false,\r\n};\r\n\r\nconst Sidebar = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n\r\n const [{\r\n agentNav,\r\n listingNav,\r\n createListingNav,\r\n officesNav,\r\n creaNav,\r\n transactionalNav,\r\n }, setMenuState] = useObjectState({\r\n agentNav: false,\r\n listingNav: false,\r\n createListingNav: false,\r\n officesNav: false,\r\n creaNav: false,\r\n analyticsNav: false,\r\n });\r\n\r\n // TODO: add isAdmin to the list once we are ready to use it\r\n const {\r\n mainActions,\r\n aclIsEmpty,\r\n is3rdPartyDataPortalUser,\r\n is3rdPartyDataPortalTransactionalUser,\r\n } = useAcl();\r\n\r\n const updateAgentNav = e => {\r\n e.stopPropagation();\r\n setMenuState({ ...menuInitialState, agentNav: !agentNav });\r\n };\r\n\r\n // toggles listings menu\r\n const updateListingNav = e => {\r\n e.stopPropagation();\r\n setMenuState({ ...menuInitialState, listingNav: !listingNav });\r\n };\r\n\r\n // toggles create listings submenu\r\n const updateCreateNav = e => {\r\n e.stopPropagation(); // to prevent submenu click from closing the menu\r\n setMenuState({ createListingNav: !createListingNav });\r\n };\r\n\r\n // toggles office menu\r\n const updateOfficesNav = e => {\r\n e.stopPropagation();\r\n setMenuState({ ...menuInitialState, officesNav: !officesNav });\r\n };\r\n\r\n // toggles crea menu\r\n const updateCreaNav = e => {\r\n e.stopPropagation();\r\n setMenuState({ ...menuInitialState, creaNav: !creaNav });\r\n };\r\n\r\n // loads form definitions based on the data attribute of the \r\n \r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n {!aclIsEmpty && !is3rdPartyDataPortalUser && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default Sidebar;\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Breadcrumb, BreadcrumbItem } from 'react-bootstrap';\r\nimport { Link } from 'react-router-dom';\r\n\r\nconst RoutesWithCrumbs = ({ Component, routePathList = {} }) => {\r\n const createCrumbs = useCallback(dictionary => {\r\n const cr = [];\r\n\r\n if (dictionary) {\r\n Object.entries(dictionary).forEach(item => {\r\n const [key, value] = item;\r\n\r\n if (!window.location.pathname.includes(key)) {\r\n return;\r\n }\r\n\r\n cr.push({ path: key, name: value });\r\n });\r\n }\r\n\r\n return cr;\r\n }, [routePathList]);\r\n\r\n const crumbs = useMemo(() => createCrumbs(routePathList), [routePathList]);\r\n\r\n return crumbs.length <= 1 ? ( // Don't display single crumbs\r\n - \r\n
- \r\n
\r\n www.pillarnine.com\r\n \r\n )\r\n }\r\n >\r\n \r\n - \r\n
\r\n Email: helpdesk@pillarnine.com\r\n \r\n )\r\n }\r\n >\r\n \r\n - \r\n
\r\n Phone: 587-430-2991\r\n \r\n )\r\n }\r\n >\r\n \r\n
\r\n {\r\n enrichedList && (\r\n <>\r\n \r\n \r\n Export Transaction CSV\r\n \r\n 1 ? paginationFactory(paginationOptions) : null}\r\n {...toolKit.baseProps}\r\n />\r\n \r\n )\r\n }\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nAuditSubTable.propTypes = {\r\n displayData: PropTypes.arrayOf(PropTypes.shape()).isRequired,\r\n};\r\n\r\nexport default AuditSubTable;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\n/*\r\nCould potentially be integrated with inputGroup,\r\nexcept InputGroup uses Formik specifically and that\r\nis not needed here.\r\n*/\r\n\r\nconst TableSearchInputGroup = props => {\r\n const { onSearch } = props;\r\n let input;\r\n\r\n const handleSearch = e => {\r\n if (e.key === 'Enter') {\r\n onSearch(input.value);\r\n }\r\n };\r\n\r\n const handleChange = () => {\r\n onSearch(input.value);\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nTableSearchInputGroup.propTypes = {\r\n onSearch: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default TableSearchInputGroup;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n trim,\r\n words,\r\n upperCase,\r\n startCase,\r\n camelCase,\r\n isEmpty,\r\n} from 'lodash';\r\n\r\nimport Avatar from '@mui/material/Avatar';\r\nimport Stack from '@mui/material/Stack';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nconst AgentAvatar = ({ fullName, showFullName }) => (\r\n showFullName ? (\r\n \r\n handleSearch(e)}\r\n onChange={handleChange}\r\n placeholder=\"Search...\"\r\n ref={n => { input = n; }}\r\n aria-label=\"Table Search\"\r\n aria-describedby=\"tableSearchButton\"\r\n autoComplete=\"off\"\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {\r\n enrichedList && (\r\n <>\r\n 1 ? paginationFactory(paginationOptions) : null}\r\n {...toolKit.baseProps}\r\n />\r\n \r\n )\r\n }\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nAuditTable.propTypes = {\r\n displayData: PropTypes.arrayOf(PropTypes.shape()).isRequired,\r\n};\r\n\r\nexport default AuditTable;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport isEmpty from 'lodash/isEmpty';\r\n\r\nimport './Panel.styles.css';\r\n\r\n/*\r\npanel is used to wrap everything in a container\r\npanels can be collapsible and have plenty of customization options, such as buttons, tabs, badges..\r\nto close a panel, add the class .PanelCollapsed to .PanelWrapper and .Collapse to .PanelContainer\r\nNOTE: collapsible functionality is active\r\n\r\npanel header: section at the top of the panel; only thing showing when panel is collapsed\r\npanel content: main content ie children; wrapped by PanelContainer which as a predefined padding\r\n\r\ncustomClass: if provided, adds a custom class to the panel\r\n*/\r\n\r\nconst Panel = props => {\r\n const {\r\n header, footer, panelToolbar, children, customClass, customBodyClass, disabled,\r\n } = props;\r\n\r\n return (\r\n \r\n {\r\n (header || panelToolbar)\r\n && (\r\n
\r\n );\r\n};\r\n\r\nPanel.propTypes = {\r\n header: PropTypes.oneOfType([PropTypes.string, PropTypes.shape(), PropTypes.func]),\r\n footer: PropTypes.oneOfType([PropTypes.string, PropTypes.shape(), PropTypes.func]),\r\n children: PropTypes.node,\r\n panelToolbar: PropTypes.node,\r\n customClass: PropTypes.string,\r\n customBodyClass: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n // leave commented in case its needed again\r\n // children: PropTypes.oneOfType([\r\n // PropTypes.arrayOf(PropTypes.node),\r\n // PropTypes.node,\r\n // ]).isRequired,\r\n};\r\n\r\nPanel.defaultProps = {\r\n children: null,\r\n header: '',\r\n footer: '',\r\n panelToolbar: null,\r\n customClass: '',\r\n customBodyClass: '',\r\n disabled: false,\r\n};\r\n\r\nexport default Panel;\r\n","import React from 'react';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport {\r\n getAuditData,\r\n selectAuditEntityId,\r\n} from '@redux/selectors/AuditSelector';\r\n\r\nimport AuditTable from '@components/table/AuditTable';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\n\r\nconst AuditLogPage = () => {\r\n const auditResults = useSelector(getAuditData);\r\n const listingID = useSelector(selectAuditEntityId);\r\n\r\n return (\r\n <>\r\n \r\n {!isEmpty(header) ? (\r\n <>\r\n
\r\n )\r\n }\r\n {children && (\r\n \r\n {header}\r\n
\r\n \r\n ) : null}\r\n {!isEmpty(panelToolbar) ?{panelToolbar}
: null}\r\n \r\n
\r\n )}\r\n {!isEmpty(footer) && footer !== null ? \r\n {children}\r\n
\r\n {footer}
: null}\r\n \r\n
\r\n \r\n \r\n Audit Log\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AuditLogPage;\r\n","/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport apiService from '@services/apiService';\r\nimport {\r\n CONDO_INSERT,\r\n CONDO_INSERT_FAIL,\r\n CONDO_INSERT_SUCCESS,\r\n CONDO_SEARCH,\r\n CONDO_SEARCH_FAIL,\r\n CONDO_SEARCH_SUCCESS,\r\n CONDO_SELECT,\r\n CONDO_SELECT_FAIL,\r\n CONDO_SELECT_SUCCESS,\r\n CONDO_UPDATE,\r\n CONDO_UPDATE_FAIL,\r\n CONDO_UPDATE_SUCCESS,\r\n} from '../constants/ActionTypes';\r\n\r\n// Condo names search by where clause (subdivision name and value)\r\nexport const searchCondo = searchCriteria => async dispatch => {\r\n dispatch({ type: CONDO_SEARCH });\r\n try {\r\n const condoSearchResults = await apiService.Condo.searchCondoName(searchCriteria);\r\n dispatch({\r\n type: CONDO_SEARCH_SUCCESS,\r\n payload: { condoSearchResults },\r\n });\r\n } catch (err) {\r\n console.error('Error: Condo searchCondo', err);\r\n dispatch({ type: CONDO_SEARCH_FAIL });\r\n }\r\n};\r\n\r\n// Select a condo name by UniqueID\r\n// NOTE: this behavior is not used in legacy app\r\nexport const selectCondo = UniqueID => async dispatch => {\r\n dispatch({ type: CONDO_SELECT });\r\n try {\r\n const condoSelected = await apiService.Condo.selectCondoName(UniqueID);\r\n dispatch({\r\n type: CONDO_SELECT_SUCCESS,\r\n payload: { condoSelected },\r\n });\r\n } catch (err) {\r\n console.error('Error: Condo selectCondo', err);\r\n dispatch({ type: CONDO_SELECT_FAIL });\r\n }\r\n};\r\n\r\n// Creates new condo name record and returns new condo name record\r\nexport const createCondo = newCondoRecord => async dispatch => {\r\n dispatch({ type: CONDO_INSERT });\r\n try {\r\n const condoCreated = await apiService.Condo.createCondoName(newCondoRecord); // returns UniqueID\r\n const newCondo = {\r\n UniqueID: condoCreated.UniqueID,\r\n CondoName: newCondoRecord.CondoData.CondoName,\r\n SubdivisionName: newCondoRecord.CondoData.SubdivisionName,\r\n };\r\n\r\n dispatch({\r\n type: CONDO_INSERT_SUCCESS,\r\n payload: { newCondo },\r\n });\r\n } catch (err) {\r\n console.error('Error: Condo createCondo', err);\r\n dispatch({ type: CONDO_INSERT_FAIL });\r\n }\r\n};\r\n\r\n// Edit/update the condo name of an existing condo record\r\nexport const updateCondo = condoRecord => async dispatch => {\r\n dispatch({ type: CONDO_UPDATE });\r\n try {\r\n const updatedCondo = await apiService.Condo.updateCondoName(condoRecord); // returns type SUCCESS or FAILURE (name already exists)\r\n dispatch({\r\n type: CONDO_UPDATE_SUCCESS,\r\n payload: { updateStatus: updatedCondo },\r\n });\r\n } catch (err) {\r\n console.error('Error: Condo updateCondo', err);\r\n dispatch({ type: CONDO_UPDATE_FAIL });\r\n }\r\n};\r\n","export const QUARTERLY_AVERAGES_BY_YEAR = 'Quarterly averages by year';\r\nexport const TOTALS_BY_QUARTER_BY_YEAR = 'Totals by quarter, by year';\r\nexport const TOTALS_BY_YEAR = 'Totals by year';\r\n\r\nexport const AggregateDataChartsArray = [\r\n TOTALS_BY_QUARTER_BY_YEAR,\r\n TOTALS_BY_YEAR,\r\n QUARTERLY_AVERAGES_BY_YEAR,\r\n];\r\n\r\nexport const listingDict = {\r\n com: 'Commercial',\r\n farm: 'Farm',\r\n land: 'Land',\r\n mob: 'MobileHome',\r\n mult: 'Multifamily',\r\n rnt: 'Rental',\r\n res: 'Residential',\r\n};\r\n\r\nexport const listingRuleDict = {\r\n com: 'CommercialListingRules',\r\n farm: 'FarmListingRules',\r\n land: 'LandListingRules',\r\n mob: 'MobileHomeListingRules',\r\n mult: 'MultifamilyListingRules',\r\n rnt: 'RentalListingRules',\r\n res: 'ResidentialListingRules',\r\n chgTerm: 'ChangeToTerminatedListingRules',\r\n chgSold: 'ChangeToSoldListingRules',\r\n chgMajor: 'MajorCorrectionsRules',\r\n chgPending: 'ChangeToPendingListingRules',\r\n chgLeased: 'ChangeToLeasedListingRules',\r\n chgWithdrawn: 'ChangeToWithdrawnListingRules',\r\n chgActive: 'ChangeToActiveListingRules',\r\n chgExp: 'ChangeToExpiredListingRules',\r\n chgDel: 'ChangeToDeletedListingRules',\r\n chgOpenHouse: 'ChangeToOpenHouseListingRules',\r\n};\r\n","import { createSelector } from 'reselect';\r\nimport { listingDict, listingRuleDict } from '../constants/GeneralConstants';\r\n\r\nexport const getLoadingState = ({ formGeneration }) => formGeneration.isLoading;\r\n\r\nexport const selectPageStructure = ({ formGeneration }) => formGeneration.pageStructure;\r\n\r\nexport const selectVisiblePageStructure = createSelector(selectPageStructure, pageStructure => {\r\n pageStructure.forEach(page => {\r\n // solve for groups\r\n if (!page?.children?.find(child => child.isGroup)) {\r\n const pageVisible = page?.children?.find(child => child?.IsVisible);\r\n page.IsVisible = !!(pageVisible); // eslint-disable-line no-param-reassign\r\n }\r\n if (page?.children?.find(child => child.isGroup)) {\r\n const pageVisible = page?.children?.find(child => child?.fields?.find(field => field?.IsVisible));\r\n page.IsVisible = !!(pageVisible);// eslint-disable-line no-param-reassign\r\n }\r\n });\r\n return pageStructure;\r\n});\r\n\r\nexport const selectPageStructureHasRooms = createSelector(selectPageStructure, pageStructure => pageStructure?.find(section => section.sectionName === 'Rooms') !== undefined ?? false);\r\n\r\nexport const selectAllFields = ({ formGeneration }) => formGeneration.allFields;\r\n\r\nexport const selectStatusByName = ({ formGeneration }, name, repeatableType = '', repeatableId = '') => {\r\n if (repeatableType !== '' && repeatableId !== '') return formGeneration?.validationResult?.[repeatableType]?.[repeatableId]?.[name];\r\n return formGeneration?.validationResult?.[name];\r\n};\r\n\r\nexport const selectSectionAddClicksByName = ({ formGeneration }, name) => formGeneration?.sectionAddClicks?.[name] ?? 0;\r\n\r\nexport const selectRequiredStatusByFieldName = ({ formGeneration }, fieldName) => formGeneration.validationResult?.[fieldName]?.isRequired;\r\n\r\n// retrieves validation results\r\nexport const selectValidationResults = ({ formGeneration }) => formGeneration?.validationResult;\r\n\r\n// Consumes UID corresponding to a room. Returns the validation results for all fields in that room.\r\nexport const selectRoomStatusById = ({ formGeneration }, id) => formGeneration?.roomValidationResult?.[id];\r\n\r\nexport const selectComboValueDict = ({ formGeneration }) => formGeneration.comboSetValueDictionary;\r\n\r\nexport const selectAllComboBoxOptions = createSelector(\r\n ({ formGeneration }) => formGeneration.comboBoxOptions,\r\n ({ listing }) => listing.selectedListing,\r\n ({ formGeneration }) => formGeneration.isCopyOperation,\r\n (comboBoxOptions, selectedListing, isCopyOperation) => {\r\n if (!selectedListing?.listing || isCopyOperation) return comboBoxOptions;\r\n\r\n // When a listing has a disabled value we need to allow the option to show for the member to remove or keep.\r\n return comboBoxOptions.map(comboBoxOption => {\r\n if (selectedListing.listing[comboBoxOption.lookupFieldName]) {\r\n const selectedComboBoxValue = selectedListing.listing[comboBoxOption.lookupFieldName];\r\n const selectedComboBoxOption = comboBoxOption.data.find(option => option.Code === selectedComboBoxValue);\r\n if (selectedComboBoxOption) {\r\n // Ensure current option is enabled\r\n if (!selectedComboBoxOption.Active) {\r\n selectedComboBoxOption.Active = true;\r\n selectedComboBoxOption.Description += ' (disabled)';\r\n }\r\n }\r\n }\r\n return comboBoxOption;\r\n });\r\n },\r\n);\r\n\r\nexport const selectFormType = ({ formGeneration }) => formGeneration.formType;\r\n\r\nexport const selectFormDefinition = ({ formGeneration }) => formGeneration?.formDefinition;\r\n\r\nexport const selectFormDefinitionType = ({ formGeneration }) => formGeneration.definitionType;\r\n\r\nexport const selectListingCode = ({ formGeneration }) => formGeneration.listingType;\r\n\r\nexport const selectRoomValidationResult = ({ formGeneration }) => formGeneration.roomValidationResult;\r\n\r\nexport const selectFormDataStatus = ({ formGeneration }) => formGeneration.formDataStatus;\r\n\r\nexport const selectRoomValidationResults = createSelector(\r\n selectRoomValidationResult,\r\n roomValidationResult => {\r\n const dict = [];\r\n if (roomValidationResult) {\r\n Object.entries(roomValidationResult).map(([roomID]) => {\r\n Object.entries(roomValidationResult[roomID]).map(([key, value]) => {\r\n if (key && !value.isValid) {\r\n dict.push({ [`Rooms.[${roomID}].${value.id}`]: value.errorMessage });\r\n }\r\n return null;\r\n });\r\n return null;\r\n });\r\n }\r\n return dict;\r\n },\r\n);\r\n\r\nexport const selectOpenHouseValidationResults = createSelector(\r\n selectValidationResults,\r\n fullValidationResults => {\r\n const openHouseResults = fullValidationResults?.OpenHouse;\r\n if (!openHouseResults) return [];\r\n const dict = [];\r\n Object.entries(openHouseResults).map(([openHouseID]) => {\r\n Object.entries(openHouseResults[openHouseID]).map(([key, value]) => {\r\n if (key && !value.isValid) {\r\n dict.push({ [`OpenHouse ${value.id}`]: value.errorMessage });\r\n }\r\n return null;\r\n });\r\n return null;\r\n });\r\n return dict;\r\n },\r\n\r\n);\r\n\r\nexport const selectFieldLabelDictionary = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const dictionary = {};\r\n formDefinition.map(item => {\r\n dictionary[item?.fieldLabel] = item?.PageName;\r\n return null;\r\n });\r\n dictionary.Photos = 'Photos';\r\n dictionary.Rooms = 'Rooms';\r\n dictionary.Supplements = 'Supplements';\r\n return dictionary;\r\n },\r\n);\r\n\r\nexport const selectFieldDictionary = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const dictionary = {};\r\n formDefinition.map(item => {\r\n dictionary[item?.FieldName] = item?.PageName;\r\n return null;\r\n });\r\n dictionary.Photos = 'Photos';\r\n dictionary.Rooms = 'Rooms';\r\n dictionary.Supplements = 'Supplements';\r\n return dictionary;\r\n },\r\n);\r\n\r\nexport const getVisibleSections = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const visiblePageNames = formDefinition.map(field => {\r\n if (field?.IsVisible) return field.PageName;\r\n return null;\r\n }).filter(entry => entry);\r\n const visiblePageSet = [...new Set(visiblePageNames)];\r\n return visiblePageSet;\r\n // if all fields w/PageName are visible\r\n },\r\n);\r\n\r\n// sort definition first by pageSortOrder, secondly by field SortOrder\r\nexport const getSortedDefinition = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const sorted = formDefinition.sort((a, b) => {\r\n const x = (a.pageSortOrder - b.pageSortOrder);\r\n if (x === 0) {\r\n return (a.SortOrder - b.SortOrder);\r\n }\r\n return x;\r\n });\r\n return sorted;\r\n },\r\n);\r\n\r\n// consumes sorted form definition, returns (sorted) unique sections\r\nexport const getOrderedSections = createSelector(\r\n // input selector\r\n getSortedDefinition,\r\n // output selector\r\n sortedDef => {\r\n const flags = {};\r\n const unique = sortedDef.filter(item => {\r\n if (flags[item.PageName]) {\r\n return false;\r\n }\r\n if (!item.IsVisible) {\r\n return false;\r\n }\r\n flags[item.PageName] = true;\r\n return true;\r\n });\r\n return unique.map(item => ({ sectionName: item.PageName, sectionLabel: item.PageLabel }));\r\n },\r\n);\r\n\r\n// creates a dictionary mapping between section and fields\r\nexport const selectFormStructure = createSelector(\r\n // input selector\r\n getSortedDefinition,\r\n // output selector\r\n sortedDef => {\r\n const structure = {};\r\n sortedDef.map(item => {\r\n if (!structure[item.PageName]) {\r\n structure[item.PageName] = [];\r\n }\r\n structure[item.PageName] = [\r\n ...structure[item.PageName],\r\n { ...item },\r\n ];\r\n return null;\r\n });\r\n return structure;\r\n },\r\n);\r\n\r\n// Gets/sets the initial values for the create listings form\r\nexport const selectInitialValues = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const initialValues = {};\r\n formDefinition.forEach(field => {\r\n if (field.datatype === 'bit') {\r\n // set bit fields to null by default for validation\r\n initialValues[field.FieldName] = null;\r\n } else {\r\n initialValues[field.FieldName] = '';\r\n }\r\n return null;\r\n });\r\n return initialValues;\r\n },\r\n);\r\n\r\n// gets/sets initial touched values for validation on mount purposes\r\nexport const selectInitialTouched = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const initialTouched = {};\r\n\r\n formDefinition.forEach(field => { initialTouched[field.FieldName] = field.IsRequired; });\r\n return initialTouched;\r\n },\r\n);\r\n\r\n// Needs cases for other listing types\r\nexport const selectListingType = createSelector(\r\n selectListingCode,\r\n listingType => listingDict[listingType],\r\n);\r\n\r\nexport const selectListingRule = createSelector(\r\n selectListingCode,\r\n listingType => listingRuleDict[listingType],\r\n);\r\n\r\n// Retrieves first page name for the change form panel headers\r\nexport const selectEditPageName = createSelector(\r\n selectListingCode,\r\n selectPageStructure,\r\n (listingType, pageStructure) => {\r\n let pageName = '';\r\n const pageValues = Object.values(pageStructure);\r\n if (pageValues.length > 0 && listingType?.includes('chg')) {\r\n pageName = pageValues[0].sectionName;\r\n }\r\n return pageName;\r\n },\r\n);\r\n\r\n// Selects all field objects marked as required from the validationResult section of the data store.\r\nexport const selectRequired = createSelector(\r\n selectValidationResults,\r\n validationResult => {\r\n const required = [];\r\n Object.keys(validationResult).map(fieldName => {\r\n const {\r\n id,\r\n isRequired,\r\n isVisible,\r\n } = validationResult[fieldName];\r\n\r\n if (isRequired && isVisible) (required.push(id));\r\n return null;\r\n });\r\n return required;\r\n },\r\n);\r\n\r\nexport const selectLookupNames = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const lookupTableNames = {\r\n lookupNames: [],\r\n };\r\n\r\n formDefinition.map(field => {\r\n if (field.inputType === 'ComboBox' && field.comboBoxLookupName) {\r\n lookupTableNames.lookupNames.push(field.comboBoxLookupName);\r\n }\r\n return null;\r\n });\r\n return lookupTableNames;\r\n },\r\n);\r\n\r\n// Retrieves combo options for a condo lookup name\r\n// Using instead of selectComboBoxOptions since that selector is mainly for listings\r\nexport const selectCondoMgmtComboBoxOptions = createSelector(\r\n [\r\n selectAllComboBoxOptions,\r\n (_, lookupName) => lookupName,\r\n ],\r\n (allComboBoxOptions, lookupName) => {\r\n const comboBoxOptions = [];\r\n allComboBoxOptions.forEach(optionGroups => {\r\n if (lookupName === optionGroups.tableName) {\r\n optionGroups.data.forEach(option => { // add option object to list for specific field.\r\n if (option.Active && option.ParentIsActive) {\r\n comboBoxOptions.push({\r\n label: option.Description,\r\n value: `${option.Code ? option.Code : ''}`,\r\n parents: option.Parents,\r\n });\r\n }\r\n });\r\n }\r\n });\r\n return comboBoxOptions;\r\n },\r\n);\r\n\r\n// Gets all of the options for the given ComboBox Field\r\nexport const selectComboBoxOptions = createSelector(\r\n [\r\n selectFormDefinition,\r\n selectAllComboBoxOptions,\r\n (_, lookupName) => lookupName,\r\n (_, __, lookupRequired) => lookupRequired,\r\n ],\r\n (formDefinition, allComboBoxOptions, lookupName, lookupRequired = true) => {\r\n if (!lookupRequired) return null;\r\n\r\n // if this is using the boptions from formGeneration, then you need to be able to manipulate what's available in that array.\r\n // lookupName == field name\r\n\r\n const comboBoxOptions = [];\r\n let comboBoxLookupName;\r\n // wrapped in an if so that FIGs can be used for comboBox Population in Search Listing forms\r\n if (formDefinition !== []) {\r\n // Goes through the formDefinition to get the lookupTableName based on the fieldName\r\n formDefinition.forEach(field => {\r\n if (field.FieldName === lookupName) {\r\n comboBoxLookupName = field.comboBoxLookupName;\r\n }\r\n });\r\n\r\n // If there was a comboBoxLookupName, now loop through the comboBox options to get the relevant data\r\n if (comboBoxLookupName) {\r\n allComboBoxOptions.forEach(optionGroups => {\r\n if (comboBoxLookupName === optionGroups.tableName) { // matches the table name to the fieldName\r\n optionGroups.data.forEach(option => { // add option object to list for specific field.\r\n // can you just add a ParentActive? prop\r\n if (option.Active && option.ParentIsActive) {\r\n comboBoxOptions.push({ // returned boptions.\r\n label: option.Description,\r\n value: `${option.Code ? option.Code : ''}`,\r\n parents: option.Parents,\r\n });\r\n }\r\n });\r\n }\r\n });\r\n }\r\n }\r\n\r\n // Retrieves comboBoxOptions for dropdown that are not part of a listing form\r\n if (formDefinition.length === 0) {\r\n allComboBoxOptions.forEach(optionGroup => {\r\n if (lookupName === optionGroup.tableName) {\r\n optionGroup.data.forEach(option => { // add option object to list for specific field.\r\n if (option.Active) {\r\n comboBoxOptions.push({ // returned boptions.\r\n label: option.Description,\r\n value: `${option.Code ? option.Code : ''}`,\r\n parents: option.Parents,\r\n });\r\n }\r\n return null;\r\n });\r\n }\r\n return null;\r\n });\r\n }\r\n\r\n return comboBoxOptions;\r\n },\r\n);\r\n\r\nexport const selectYNOptions = ({ formGeneration }, fieldname) => {\r\n const requiredOptions = [];\r\n let YNfield;\r\n\r\n // check that field retrieved matches the fieldname passed in and check if its a YN field\r\n formGeneration.formDefinition.map(field => {\r\n if (field.FieldName === fieldname) {\r\n if (field.datatype === 'bit') {\r\n YNfield = field.FieldName;\r\n }\r\n }\r\n return null;\r\n });\r\n\r\n /*\r\n YN field required : Yes/No/Empty\r\n YN field !required : Yes/No\r\n */\r\n if (YNfield) {\r\n formGeneration.formDefinition.map(field => {\r\n if (YNfield === field.FieldName) {\r\n requiredOptions.push(\r\n { label: 'Yes', value: 1 },\r\n { label: 'No', value: 0 },\r\n );\r\n }\r\n return null;\r\n });\r\n }\r\n\r\n return requiredOptions;\r\n};\r\n\r\n// Receives array of sorted fields and retrieves the error messages to display in the same order\r\nexport const getSortedErrors = createSelector(\r\n selectFormStructure,\r\n selectValidationResults,\r\n selectRoomValidationResults,\r\n selectOpenHouseValidationResults,\r\n (structure, validationResult, roomValidationResult, openHouseValidationResult) => {\r\n const orderedErrors = [];\r\n if (validationResult !== null) {\r\n const orderedSections = Object.keys(structure);\r\n const valKeys = Object.keys(validationResult);\r\n if (valKeys.length > 0) {\r\n orderedSections.map(section => {\r\n const sectionResults = structure[section].sort((a, b) => a.SortOrder - b.SortOrder);\r\n sectionResults.map(field => {\r\n if (valKeys.includes(field.FieldName)) {\r\n const {\r\n isVisible, isValid, errorMessage,\r\n } = validationResult[field.FieldName];\r\n\r\n if (isVisible && !isValid && errorMessage) {\r\n orderedErrors.push({ [field.fieldLabel]: errorMessage });\r\n }\r\n }\r\n return null;\r\n });\r\n if (section === 'Photos' && valKeys.includes('Photos') && validationResult.Photos.errorMessage) {\r\n orderedErrors.push({ Photos: validationResult.Photos.errorMessage });\r\n }\r\n if (section === 'Supplements' && valKeys.includes('Supplements') && validationResult.Supplements.errorMessage) {\r\n orderedErrors.push({ Supplements: validationResult.Supplements.errorMessage });\r\n }\r\n if (section === 'Rooms' && valKeys.includes('RoomDimensions') && validationResult.RoomDimensions.errorMessage) {\r\n orderedErrors.push({ 'Room Dimensions': validationResult.RoomDimensions.errorMessage });\r\n }\r\n if (section === 'Rooms' && valKeys.includes('RoomTypeMinimumRequirements') && validationResult.RoomTypeMinimumRequirements.errorMessage) {\r\n orderedErrors.push({ 'Room Type Minimum Requirements': validationResult.RoomTypeMinimumRequirements.errorMessage });\r\n }\r\n if (section === 'Rooms' && roomValidationResult) {\r\n orderedErrors.push(...roomValidationResult);\r\n }\r\n if (section === 'OpenHouses' && openHouseValidationResult) orderedErrors.push(...openHouseValidationResult);\r\n return null;\r\n });\r\n }\r\n }\r\n return orderedErrors;\r\n },\r\n);\r\n\r\nexport const getSortedErrorsOfInvisibleFields = createSelector(\r\n selectFormStructure,\r\n selectValidationResults,\r\n selectRoomValidationResults,\r\n (structure, validationResult, roomValidationResult) => {\r\n const orderedErrors = [];\r\n if (validationResult !== null) {\r\n const orderedSections = Object.keys(structure);\r\n const valKeys = Object.keys(validationResult);\r\n if (valKeys.length > 0) {\r\n orderedSections.map(section => {\r\n const sectionResults = structure[section].sort((a, b) => a.SortOrder - b.SortOrder);\r\n sectionResults.map(field => {\r\n if (valKeys.includes(field.FieldName)) {\r\n const {\r\n isVisible, isValid, errorMessage,\r\n } = validationResult[field.FieldName];\r\n\r\n if (!isVisible && !isValid && errorMessage) {\r\n orderedErrors.push({ [field.fieldLabel]: errorMessage });\r\n }\r\n }\r\n return null;\r\n });\r\n if (section === 'Photos' && valKeys.includes('Photos') && validationResult.Photos.errorMessage) {\r\n orderedErrors.push({ Photos: validationResult.Photos.errorMessage });\r\n }\r\n if (section === 'Supplements' && valKeys.includes('Supplements') && validationResult.Supplements.errorMessage) {\r\n orderedErrors.push({ Supplements: validationResult.Supplements.errorMessage });\r\n }\r\n if (section === 'Rooms' && valKeys.includes('RoomDimensions') && validationResult.RoomDimensions.errorMessage) {\r\n orderedErrors.push({ 'Room Dimensions': validationResult.RoomDimensions.errorMessage });\r\n }\r\n if (section === 'Rooms' && valKeys.includes('RoomTypeMinimumRequirements') && validationResult.RoomTypeMinimumRequirements.errorMessage) {\r\n orderedErrors.push({ 'Room Type Minimum Requirements': validationResult.RoomTypeMinimumRequirements.errorMessage });\r\n }\r\n if (section === 'Rooms' && roomValidationResult) {\r\n orderedErrors.push(...roomValidationResult);\r\n }\r\n return null;\r\n });\r\n }\r\n }\r\n return orderedErrors;\r\n },\r\n);\r\n\r\nexport const selectErrorsPerSection = createSelector(\r\n getSortedErrors,\r\n selectFieldLabelDictionary,\r\n selectRoomValidationResults,\r\n selectOpenHouseValidationResults,\r\n (errors, dictionary, roomValidationResult, openHouseResult) => {\r\n const errorsPerSection = {};\r\n errorsPerSection.Rooms = [];\r\n errorsPerSection.OpenHouses = [];\r\n errors.map(error => {\r\n const [fieldName] = Object.keys(error);\r\n const section = dictionary[fieldName];\r\n if (fieldName === 'Room Dimensions' || fieldName === 'Room Type Minimum Requirements') {\r\n errorsPerSection.Rooms = [...errorsPerSection.Rooms, fieldName];\r\n } else if (!errorsPerSection[section]) {\r\n errorsPerSection[section] = [fieldName];\r\n } else if (errorsPerSection[section] && !errorsPerSection[section].includes(fieldName)) {\r\n errorsPerSection[section] = [...errorsPerSection[section], fieldName];\r\n }\r\n return null;\r\n });\r\n if (roomValidationResult) {\r\n errorsPerSection.Rooms = [...errorsPerSection.Rooms, ...roomValidationResult];\r\n }\r\n if (!errorsPerSection.Rooms.length) {\r\n delete errorsPerSection.Rooms;\r\n }\r\n if (openHouseResult) {\r\n errorsPerSection.OpenHouses = [...errorsPerSection.OpenHouses, ...openHouseResult];\r\n }\r\n if (!errorsPerSection.OpenHouses.length) {\r\n delete errorsPerSection.OpenHouses;\r\n }\r\n return errorsPerSection;\r\n },\r\n);\r\n\r\nexport const selectRequiredPerSection = createSelector(\r\n selectRequired,\r\n selectFieldDictionary,\r\n (required, dictionary) => {\r\n const reqPerSection = {};\r\n required.map(req => {\r\n const section = dictionary[req];\r\n\r\n if (!reqPerSection[section]) (reqPerSection[section] = [req]);\r\n if (reqPerSection[section] && !reqPerSection[section].includes(req)) {\r\n reqPerSection[section] = [...reqPerSection[section], req];\r\n }\r\n return null;\r\n });\r\n return reqPerSection;\r\n },\r\n);\r\n\r\nexport const getFieldNameAndLabels = createSelector(\r\n selectFormDefinition,\r\n formDefinition => (\r\n formDefinition?.flatMap(singleField => (\r\n [{\r\n fieldName: singleField?.FieldName,\r\n fieldLabel: singleField?.fieldLabel,\r\n }]\r\n ))\r\n ),\r\n);\r\n\r\nexport const getVisibleFieldNameAndLabels = createSelector(\r\n selectFormDefinition,\r\n formDefinition => (\r\n formDefinition?.flatMap(singleField => (\r\n (singleField?.IsVisible || singleField?.isVisible)\r\n ? [{\r\n fieldName: singleField?.FieldName,\r\n fieldLabel: singleField?.fieldLabel,\r\n }] : []\r\n ))\r\n ),\r\n);\r\n\r\nexport const transformComboBoxData = createSelector(\r\n selectAllComboBoxOptions,\r\n allComboBoxOptions => {\r\n const formattedComboBoxOptions = allComboBoxOptions.flatMap(tableOptions => {\r\n const comboData = tableOptions.data.flatMap(singleOption => {\r\n if (!singleOption.Active) return [];\r\n\r\n return [{\r\n label: singleOption.Description,\r\n value: singleOption.Description,\r\n formValue: tableOptions.lookupFieldName,\r\n }];\r\n });\r\n if (!comboData.length) return [];\r\n\r\n return [{\r\n label: tableOptions.lookupFieldName,\r\n options: comboData,\r\n }];\r\n });\r\n\r\n return formattedComboBoxOptions;\r\n },\r\n);\r\n\r\nconst transformFieldOptions = createSelector(\r\n getVisibleFieldNameAndLabels,\r\n fields => {\r\n const fieldOptions = fields.flatMap(fieldData => (\r\n [{\r\n label: fieldData.fieldLabel,\r\n value: fieldData.fieldName,\r\n formValue: fieldData.fieldName,\r\n }]\r\n ));\r\n return {\r\n label: 'Fields',\r\n options: fieldOptions,\r\n };\r\n },\r\n);\r\n\r\nexport const selectFormSearchOptions = createSelector(\r\n transformComboBoxData,\r\n transformFieldOptions,\r\n (comboBoxOptionsGroup, fieldOptions) => {\r\n const groupedOptions = [];\r\n groupedOptions.push(fieldOptions);\r\n /*\r\n Currently, adding the comboBoxOptionsGroup to the options for the form search\r\n causes lag. The Select in FormSearchBar will need to be refactored to be async,\r\n and after talking with Aaron it was decided that we will leave comboBoxOptions\r\n out for now and will come back to it for v2\r\n */\r\n // groupedOptions = groupedOptions.concat(comboBoxOptionsGroup);\r\n\r\n return groupedOptions;\r\n },\r\n);\r\n","import React, { useState, useMemo } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport Select from 'react-select';\r\nimport { selectCondoMgmtComboBoxOptions } from '@redux/selectors/FormSelector';\r\n\r\nconst CondoManagementForm = ({ setSubdivisionSelected }) => {\r\n const [county, setCounty] = useState(null);\r\n const [city, setCity] = useState(null);\r\n const [subdivision, setSubdivision] = useState(null);\r\n\r\n const comboIsLoading = useSelector(state => state.formGeneration.comboIsLoading); // combo loading status\r\n const countyComboValues = useSelector(state => selectCondoMgmtComboBoxOptions(state, 'Lookup_Property_Listing_CountyOrParish'));\r\n const cityComboValues = useSelector(state => selectCondoMgmtComboBoxOptions(state, 'Lookup_Property_Listing_City'));\r\n const subdivisionComboValues = useSelector(state => selectCondoMgmtComboBoxOptions(state, 'Lookup_Property_Listing_SubdivisionName'));\r\n\r\n const handleCountyChange = value => setCounty(value);\r\n const handleCityChange = value => setCity(value);\r\n\r\n const handleSubdivChange = value => {\r\n setSubdivision(value);\r\n setSubdivisionSelected(value);\r\n };\r\n\r\n // Determine the options to display for city based on parent childing rules from County\r\n const cityOptions = useMemo(() => {\r\n if (county) {\r\n // parents is ALWAYS a one-level array since it's already filtered to the city-level;\r\n return cityComboValues.filter(cityValue => cityValue?.parents?.[0]?.ParentCodes?.[0] === county.value);\r\n }\r\n return [];\r\n }, [county]);\r\n\r\n // Determines the options to display for subdivisions based on parent childing rules from City\r\n const subdivOptions = useMemo(() => {\r\n if (city) {\r\n // parents is ALWAYS a one-level array since it's already filtered to the subdivision-level;\r\n return subdivisionComboValues.filter(subdiv => subdiv?.parents?.[0]?.ParentCodes?.[0] === city.value);\r\n }\r\n return [];\r\n }, [city]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n {auditResults ? (\r\n \r\n
\r\n No data found.
\r\n )}\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nCondoManagementForm.propTypes = {\r\n setSubdivisionSelected: PropTypes.func,\r\n};\r\n\r\nexport default CondoManagementForm;\r\n","/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport { loadComboBoxOptions } from '@redux/modules/formGeneration';\r\nimport { createCondo, searchCondo, updateCondo } from '@redux/actionCreators/CondoCreator';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport CondoForm from '@components/form/forms/CondoManagementForm';\r\n\r\nconst submitTranslation = {\r\n Lookup_Property_Listing_CountyOrParish: 'CountyOrParish',\r\n Lookup_Property_Listing_City: 'City',\r\n Lookup_Property_Listing_SubdivisionName: 'SubdivisionName',\r\n};\r\nconst lookupNames = { lookupNames: Object.keys(submitTranslation) };\r\n\r\n// NOTE: Not all subdivisions will return a list -> will display no subdivisions message\r\n// NOTE: Add Condo Name button disabled until a subdivision search has been performed\r\n\r\nconst CondoManagementPage = () => {\r\n const dispatch = useDispatch();\r\n\r\n const [editCondoName, setEditCondoName] = useState(''); // holds condo name to edit/update\r\n const [currCondo, setCurrCondo] = useState({}); // holds current condo record to edit\r\n const [newCondoName, setNewCondoName] = useState(''); // holds new condo name to create/insert\r\n const [subdivisionSelected, setSubdivisionSelected] = useState({}); // holds subdivision name from results list to create new condo record\r\n const [isEditable, setIsEditable] = useState(false); // flag to determine whether to display the condo name in a or for edit\r\n\r\n const condoSearchResults = useSelector(state => state.condo.condoSearchResults); // array of condo record objects\r\n const isSearching = useSelector(state => state.condo.isSearching);\r\n\r\n // API call to get combo box values on first render\r\n useEffect(() => {\r\n dispatch(loadComboBoxOptions(lookupNames));\r\n }, []);\r\n\r\n // submits search criteria to retrieve condo records\r\n const handleSubmit = event => {\r\n event.preventDefault();\r\n if (subdivisionSelected?.value) {\r\n const jsonBody = {\r\n whereClause: {\r\n clause: [{\r\n name: 'SubdivisionName',\r\n value: subdivisionSelected.value,\r\n }],\r\n },\r\n };\r\n dispatch(searchCondo(jsonBody));\r\n setIsEditable(false);\r\n }\r\n };\r\n\r\n // sets editable state to true and saves input as currCondo\r\n const handleEdit = condoItem => {\r\n setIsEditable(true);\r\n setCurrCondo(condoItem);\r\n };\r\n\r\n // stores input value to local state editCondoName\r\n const updateCondoName = e => {\r\n setEditCondoName(e.target.value);\r\n };\r\n\r\n // extract updated condo name values to submit to API / redux\r\n const buildUpdateWhereClause = values => {\r\n const whereClause = {\r\n clause: [],\r\n };\r\n const valueKeys = Object.keys(values);\r\n valueKeys.forEach(key => {\r\n if (values[key] && key === 'UniqueID') {\r\n whereClause.clause.push({\r\n name: 'UniqueID',\r\n value: values[key],\r\n });\r\n }\r\n });\r\n return whereClause;\r\n };\r\n\r\n // handles the condo name update and re rendering of updated results list (with small delay in re render)\r\n const handleSaveEdit = () => {\r\n setIsEditable(false);\r\n // currCondo is the original condo name record, where as editCondoName only holds the input string to update the condo name\r\n if (currCondo && editCondoName) {\r\n const updateClause = buildUpdateWhereClause(currCondo);\r\n const jsonBody = {\r\n whereClause: updateClause,\r\n CondoData: {\r\n CondoName: editCondoName, // holds new condo name value\r\n SubdivisionName: currCondo.SubdivisionName,\r\n },\r\n };\r\n dispatch(updateCondo(jsonBody));\r\n\r\n const searchClause = {\r\n clause: [{\r\n name: 'SubdivisionName',\r\n value: currCondo.SubdivisionName,\r\n }],\r\n };\r\n const updatedJsonBody = {\r\n whereClause: searchClause,\r\n };\r\n dispatch(searchCondo(updatedJsonBody)); // re render result list with edited condo name\r\n setEditCondoName(''); // clear edit name\r\n }\r\n };\r\n\r\n // reset editable state\r\n const handleCancelEdit = () => {\r\n setEditCondoName(''); // clear edit name\r\n setIsEditable(false);\r\n };\r\n\r\n // Captures the input's value and saves it to local state as newCondoName\r\n const handleInput = e => setNewCondoName(e.target.value);\r\n\r\n // Creates new subdivision and adds new record to results list for display\r\n const submitNewCondoName = e => {\r\n e.preventDefault();\r\n if ((condoSearchResults ?? [])) {\r\n if (newCondoName !== '' && subdivisionSelected !== '') {\r\n const newCondoRecord = {\r\n CondoData: {\r\n CondoName: newCondoName,\r\n SubdivisionName: subdivisionSelected.value,\r\n },\r\n };\r\n dispatch(createCondo(newCondoRecord));\r\n }\r\n }\r\n };\r\n\r\n // NOTE: Left as is for now as per Riz/Bill's instruction since delete might be added later\r\n const handleDelete = () => null;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n Condo Management\r\n
\r\n\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default CondoManagementPage;\r\n","import React, { useMemo } from 'react';\r\nimport Select, { components } from 'react-select';\r\nimport { useSelector } from 'react-redux';\r\nimport { selectFormSearchOptions } from '@redux/selectors/FormSelector';\r\n\r\nconst formatGroupLabel = () => (\r\n \r\n);\r\n\r\nconst DropdownIndicator = props => (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n <>\r\n \r\n New Condo Name\r\n \r\n \r\n \r\n \r\n
\r\n \r\n - \r\n {condoSearchResults\r\n && condoSearchResults.sort((a, b) => a.CondoName.localeCompare(b.CondoName)).map(item => (\r\n
- \r\n {`${item.CondoName}`}\r\n \r\n \r\n \r\n\r\n \r\n )}\r\n
\r\n {(isEditable && (currCondo.CondoName === item.CondoName))\r\n ? (\r\n
\r\n ))}\r\n \r\n \r\n
\r\n )\r\n : (\r\n \r\n \r\n \r\n
\r\n No condo names found
}\r\n \r\n ({ ...css, padding: 0 }), clearIndicator: css => ({ ...css, padding: 0 }) }}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default FormSearchBar;\r\n","import React from 'react';\r\n\r\nimport Skeleton from '@mui/material/Skeleton';\r\n\r\nconst FormLoader = () => (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n);\r\n\r\nexport default FormLoader;\r\n","/* eslint-disable no-unused-vars */\r\n/* eslint-disable react/prop-types */\r\n/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport { useEffect } from 'react';\r\nimport { useFormikContext } from 'formik';\r\nimport { useDispatch } from 'react-redux';\r\nimport { setValidationResult } from '@redux/modules/formGeneration';\r\n\r\nconst FieldValidator = ({\r\n validationRules,\r\n validateFieldName,\r\n validateFlag,\r\n validationValue,\r\n selectedListing,\r\n setValidateFlag,\r\n setValidationValue,\r\n setValidateFieldName,\r\n runValidation = () => null,\r\n}) => {\r\n const dispatch = useDispatch();\r\n const { values } = useFormikContext();\r\n\r\n // photosHaveChanged, supplementsHaveChanged, roomsHaveChanged, listing, unmodifiedListing, photos, supplements, rooms\r\n\r\n const getRepeatableChanged = (formikGroup, unmodifiedGroup) => {\r\n /* does origin have this item?\r\n does any prop of this item not match origin?\r\n */\r\n let hasChanged = false;\r\n if (formikGroup.length !== unmodifiedGroup.length) return true;\r\n formikGroup.forEach(item => {\r\n if (hasChanged) return;\r\n if (item.UniqueID) {\r\n // room/door/parcel, openhouse?\r\n const umItem = unmodifiedGroup.find(umi => umi.UniqueID === item.UniqueID);\r\n Object.keys(item).forEach(itemkey => {\r\n if (hasChanged) return;\r\n if (umItem?.[itemkey]) {\r\n if (umItem[itemkey] !== item[itemkey]) hasChanged = true;\r\n }\r\n });\r\n // see that every key's value in formikElement matches umEl\r\n } else if (item.URL) {\r\n // photo or supp\r\n const umItem = unmodifiedGroup.find(umi => umi.URL === item.URL);\r\n Object.keys(item).forEach(itemkey => {\r\n if (hasChanged) return;\r\n if (umItem?.[itemkey]) {\r\n if (umItem[itemkey] !== item[itemkey]) hasChanged = true;\r\n }\r\n });\r\n } else {\r\n // item has neither url or uniqueId;\r\n hasChanged = true;\r\n }\r\n });\r\n return hasChanged;\r\n };\r\n\r\n const getChanged = (unModGroup, photosGroup, roomsGroup, supplementsGroup, openHousesGroup) => {\r\n let photosHaveChanged = false;\r\n let supplementsHaveChanged = false;\r\n let roomsHaveChanged = false;\r\n let openHousesHaveChanged = false;\r\n\r\n photosHaveChanged = getRepeatableChanged(photosGroup, unModGroup.umPhotos);\r\n supplementsHaveChanged = getRepeatableChanged(supplementsGroup, unModGroup.umSupplements);\r\n roomsHaveChanged = getRepeatableChanged(roomsGroup, unModGroup.umRooms);\r\n openHousesHaveChanged = getRepeatableChanged(openHousesGroup, unModGroup.umOpenHouses);\r\n\r\n photosHaveChanged = photosHaveChanged ? 1 : 0;\r\n supplementsHaveChanged = supplementsHaveChanged ? 1 : 0;\r\n roomsHaveChanged = roomsHaveChanged ? 1 : 0;\r\n openHousesHaveChanged = openHousesHaveChanged ? 1 : 0;\r\n\r\n return [photosHaveChanged, supplementsHaveChanged, roomsHaveChanged, openHousesHaveChanged];\r\n };\r\n\r\n useEffect(() => {\r\n if (validateFlag === true) {\r\n values[validateFieldName] = validationValue;\r\n\r\n try {\r\n if (validationRules.descriptions.logics.includes(`${validateFieldName}Rules`)) { // possessionData, NumofElevators rules do not exist, it will throw an error\r\n let res;\r\n const {\r\n Photos, Rooms, Supplements, OpenHouses, ...resourceData\r\n } = values;\r\n\r\n if ((validationRules.descriptions.logicName === 'AgentRules') || (validationRules.descriptions.logicName === 'OfficeRules')) {\r\n res = validationRules.runWithParameters({ name: `${validateFieldName}Rules` }, resourceData);\r\n } else {\r\n const unmodifiedListing = selectedListing ? selectedListing.listing : {};\r\n const unModGroup = {\r\n umPhotos: selectedListing?.photos ?? [],\r\n umRooms: selectedListing?.rooms ?? [],\r\n umSupplements: selectedListing?.supplements ?? [],\r\n umOpenHouses: selectedListing?.openHouses ?? [],\r\n umParcels: selectedListing?.parcels ?? [],\r\n umDoors: selectedListing?.doors ?? [],\r\n };\r\n const photosGroup = Photos\r\n ? Object.keys(Photos).map(key => (!Photos[key].IsDeleted) && Photos[key])\r\n : [];\r\n const roomsGroup = Rooms\r\n ? Object.keys(Rooms).map(key => (!Rooms[key].IsDeleted) && Rooms[key])\r\n : [];\r\n const supplementsGroup = Supplements\r\n ? Object.keys(Supplements).map(key => (!Supplements[key].IsDeleted) && Supplements[key])\r\n : [];\r\n const openHousesGroup = OpenHouses\r\n ? Object.keys(OpenHouses).map(key => (!OpenHouses[key].IsDeleted) && OpenHouses[key])\r\n : [];\r\n\r\n const [photosHaveChanged, supplementsHaveChanged, roomsHaveChanged, openHousesHaveChanged] = getChanged(unModGroup, photosGroup, roomsGroup, supplementsGroup, openHousesGroup);\r\n\r\n res = validationRules.runWithParameters({ name: `${validateFieldName}Rules` }, photosHaveChanged, supplementsHaveChanged, roomsHaveChanged, openHousesHaveChanged, resourceData, unmodifiedListing, photosGroup, supplementsGroup, roomsGroup);\r\n }\r\n\r\n const { fieldValidationResult } = res.context.variableContainer;\r\n dispatch(setValidationResult(fieldValidationResult));\r\n }\r\n } catch (er) {\r\n console.error('Error: FieldValidator getChanged', er);\r\n }\r\n\r\n setValidateFlag(false); // clear state\r\n setValidateFieldName('');\r\n setValidationValue('');\r\n runValidation();\r\n }\r\n }, [validateFlag]);\r\n\r\n return null;\r\n};\r\n\r\nexport default FieldValidator;\r\n","import { createSelector } from 'reselect';\r\n\r\nexport const selectOperationType = createSelector(({ formGeneration }) => formGeneration.operationType, result => result);\r\n\r\nexport const selectDefinitionType = createSelector(({ formGeneration }) => formGeneration.definitionType, result => result);\r\n\r\nexport const selectListingType = createSelector(({ formGeneration }) => formGeneration.listingType, result => result);\r\n\r\nexport const selectDefaultValues = createSelector(({ formGeneration }) => formGeneration.defaultValues, result => result);\r\n\r\nexport const selectListingSelected = createSelector(({ listing }) => listing.selectedListing, result => result);\r\n\r\nexport const selectAgentSelected = createSelector(({ agent }) => agent.agentSelected, result => result);\r\n\r\nexport const selectOfficeSelected = createSelector(({ office }) => office.currentOffice, result => result);\r\n\r\n/*\r\n Select Listings's form data taking default values into account:\r\n * on Create : pre-populate the field with the default value;\r\n * on Full Edit : Listing data takes priority over default values, even if Listing has null data for the field;\r\n * on Task Edits (chgMajor, chgSold etc) : non-null fields in listing data override defaults, but default values override null properties in listing data.\r\n*/\r\nexport const selectListingFormData = createSelector(\r\n selectOperationType,\r\n selectDefinitionType,\r\n selectListingType,\r\n selectDefaultValues,\r\n selectListingSelected,\r\n (operationType, definitionType, listingType, defaultValues, selectedListing) => {\r\n if (definitionType !== 'listings') return null;\r\n if (operationType === 'edit' && !selectedListing) return null;\r\n\r\n const formData = selectedListing?.listing ?? defaultValues;\r\n const taskTypes = ['chgTerm', 'chgSold', 'chgDetails', 'chgMajor', 'chgDel', 'chgPending', 'chgLeased', 'chgPropType', 'chgWithdrawn', 'chgActive', 'chgExp'];\r\n const isTaskEdit = taskTypes.includes(listingType);\r\n if (isTaskEdit) {\r\n // Update empty values with default values.\r\n Object.entries(formData).map(([key, value]) => {\r\n if (value == null && (key in defaultValues)) {\r\n formData[key] = defaultValues[key];\r\n }\r\n return null;\r\n });\r\n // Add missing defaulted fields (TBD if this is required).\r\n Object.entries(defaultValues).map(([key, defaultValue]) => {\r\n if (!(key in formData)) {\r\n formData[key] = defaultValue;\r\n }\r\n return null;\r\n });\r\n }\r\n return formData;\r\n },\r\n);\r\n\r\n/*\r\n Select Agent's form data taking default values into account:\r\n * on Create : pre-populate the field with the default value;\r\n * on Edit : Agent data takes priority over default values, even if Agent has null data for the field.\r\n*/\r\nexport const selectAgentFormData = createSelector(\r\n selectOperationType,\r\n selectDefinitionType,\r\n selectDefaultValues,\r\n selectAgentSelected,\r\n (operationType, definitionType, defaultValues, selectedAgent) => {\r\n if (definitionType !== 'agent') return null;\r\n if (operationType === 'edit' && !selectedAgent) return null;\r\n\r\n const formData = selectedAgent ?? defaultValues;\r\n return formData;\r\n },\r\n);\r\n\r\n/*\r\n Select Office's form data taking default values into account:\r\n * on Create : pre-populate the field with the default value;\r\n * on Edit : Office data takes priority over default values, even if Office has null data for the field.\r\n*/\r\nexport const selectOfficeFormData = createSelector(\r\n selectOperationType,\r\n selectDefinitionType,\r\n selectDefaultValues,\r\n selectOfficeSelected,\r\n (operationType, definitionType, defaultValues, selectedOffice) => {\r\n if (definitionType !== 'office') return null;\r\n if (operationType === 'edit' && !selectedOffice) return null;\r\n\r\n const formData = selectedOffice ?? defaultValues;\r\n return formData;\r\n },\r\n);\r\n","/* eslint-disable react/prop-types */\r\nimport { useEffect } from 'react';\r\nimport { useFormikContext } from 'formik';\r\nimport { useSelector } from 'react-redux';\r\nimport { selectAllComboBoxOptions } from '@redux/selectors/FormSelector';\r\n\r\nconst ComboEnforcer = props => {\r\n const parentFields = [\r\n 'City',\r\n 'CountyOrParish',\r\n 'PropertySubType',\r\n 'SubdivisionName',\r\n ];\r\n\r\n const {\r\n valueBubble, opt, FieldName,\r\n } = props;\r\n\r\n const allComboBoxOptions = useSelector(selectAllComboBoxOptions); // used to gather target children when parent changes\r\n\r\n const { values } = useFormikContext(); // used to check the set displayed values\r\n\r\n useEffect(() => {\r\n if (opt) { // enforcer is running.\r\n // a governing field has changed, select the options that need to be checked.\r\n if (parentFields.includes(FieldName)) { // a governor has changed\r\n const targetComboOptions = allComboBoxOptions.map(aCBO => {\r\n const found = aCBO.data.map(singleOption => {\r\n let isTargetOption = false;\r\n let target = null;\r\n if ('Parents' in singleOption) {\r\n singleOption.Parents.map(parent => {\r\n if (parent.ParentField === FieldName) {\r\n isTargetOption = true;\r\n }\r\n return null;\r\n });\r\n }\r\n\r\n if (isTargetOption === true) {\r\n target = singleOption;\r\n } return target;\r\n });\r\n\r\n return { lookupFieldName: aCBO.lookupFieldName, found };\r\n });\r\n\r\n // filter the target options out of the dirty array\r\n const filteredTargets = [];\r\n\r\n if (targetComboOptions.length > 0) {\r\n targetComboOptions.map(tgt => {\r\n const filteredOptions = tgt.found.filter(fOpt => fOpt !== null);\r\n if (filteredOptions.length > 0) filteredTargets.push({ lookupFieldName: tgt.lookupFieldName, filteredOptions });\r\n return null;\r\n });\r\n }\r\n\r\n // manipulate targeted data. => clear out any values that have been set.\r\n if (filteredTargets.length > 0) { // ensure that there's anything to check\r\n filteredTargets.map(tgtOpt => {\r\n const childOpt = values[tgtOpt.lookupFieldName];\r\n if (childOpt) {\r\n const foundChild = tgtOpt.filteredOptions.find(tData => tData.Code === childOpt);\r\n if (foundChild) {\r\n const targetParent = foundChild.Parents.find(parent => parent.ParentField === FieldName);\r\n if (!targetParent.ParentCodes.includes(opt.value)) {\r\n valueBubble({ fieldName: tgtOpt.lookupFieldName, newValue: '' });\r\n }\r\n }\r\n }\r\n return null;\r\n });\r\n }\r\n\r\n // Manipulate the available options.\r\n const parentValue = values[FieldName];\r\n\r\n filteredTargets.map(fTarg => {\r\n fTarg.filteredOptions.map(fOpt => {\r\n let hasParent;\r\n\r\n fOpt.Parents.map(ftPar => {\r\n if (ftPar.ParentField === FieldName) {\r\n if (ftPar.ParentCodes.find(pc => pc === parentValue)) {\r\n hasParent = true;\r\n }\r\n }\r\n\r\n const mOpt = fOpt;\r\n mOpt.ParentIsActive = hasParent;\r\n return null;\r\n });\r\n return null;\r\n });\r\n return null;\r\n });\r\n }\r\n }\r\n }, [opt]);\r\n return null;\r\n};\r\n\r\nexport default ComboEnforcer;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport { useField } from 'formik';\r\nimport NumberFormat from 'react-number-format';\r\nimport Select from 'react-select';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nimport { setComboSetValueDictionary } from '@redux/modules/formGeneration';\r\n\r\nimport {\r\n selectStatusByName,\r\n selectLookupNames,\r\n selectAllComboBoxOptions,\r\n selectComboBoxOptions,\r\n selectYNOptions, // determines options to show for YN values depending on isRequired\r\n selectRequiredStatusByFieldName, // retrieves required field objects from the validationResults\r\n} from '@redux/selectors/FormSelector';\r\n\r\nimport {\r\n selectListingFormData,\r\n selectAgentFormData,\r\n selectOfficeFormData,\r\n} from '@redux/selectors/FormDataSelector';\r\n\r\nimport ComboEnforcer from '@components/form/formHelpers/ParentChildEnforcer';\r\n// import { isNull } from 'lodash';\r\nimport TextareaAutosize from 'react-textarea-autosize';\r\n\r\n/*\r\nComboBox Attributes\r\n- multiselect\r\n- dataType: string\r\n- inputType: ComboBox\r\n- fieldWidth\r\n- fieldLabel\r\n- isRequired\r\n- showHelpIcon\r\n- helpText\r\n- comboBoxValue\r\n- comboBoxLabel\r\n- comboBoxParentFieldName\r\n- comboBoxParentLinkAttribute\r\n- comboBoxChildLinkAttribute\r\n\r\nTextInput/MaskedTextInput Attributes\r\n- dataType: string, integer, numeric, date, datetime, time\r\n- inputType: TextInput / MaskedTextInput\r\n- fieldWidth\r\n- fieldHeight (multi row)\r\n- fieldLabel\r\n- isRequired\r\n- showHelpIcon\r\n- helpText\r\n- isHidden\r\n- sortOrder\r\n*/\r\n\r\nconst FormikInputGroup = ({\r\n comboClear, // reset flag for combos\r\n setComboClear, // set reset flag for combos\r\n datatype, // = 'string',\r\n // disabled = false, // Removed in favor of IsDisabled flag\r\n fieldLabel,\r\n FieldName,\r\n helpText,\r\n inputType, // = 'TextInput',\r\n IsVisible,\r\n IsDisabled,\r\n multiselect = false,\r\n // PageName, // section name e.g. Remarks, General, etc\r\n Precision,\r\n maxLength,\r\n showHelpIcon = false,\r\n validateFigField,\r\n comboBubbleWrap = {\r\n AddComboMutator: () => { },\r\n setNewComboValue: () => { },\r\n setNewComboOptions: () => { },\r\n },\r\n}) => {\r\n const dispatch = useDispatch();\r\n\r\n const [field, meta, helpers] = useField(FieldName);\r\n const [localFieldValue, setLocalFieldValue] = useState(field?.value);\r\n const [checkOpt, setCheckOpt] = useState('');\r\n const [comboValue, setComboValue] = useState('');\r\n const [characterCount, setCharacterCount] = useState(0);\r\n\r\n const listingFormData = useSelector(selectListingFormData);\r\n const agentFormData = useSelector(selectAgentFormData);\r\n const officeFormData = useSelector(selectOfficeFormData);\r\n const lookUpNames = useSelector(selectLookupNames);\r\n const allComboBoxOptions = useSelector(selectAllComboBoxOptions);\r\n const comboBoxOptions = useSelector(state => selectComboBoxOptions(state, FieldName, inputType === 'ComboBox'));\r\n const comboIsLoading = useSelector(state => state.formGeneration.comboIsLoading); // combo loading status\r\n const requiredFields = useSelector(state => selectRequiredStatusByFieldName(state, FieldName)); // returns isRequired prop per fieldname in the form\r\n const staticOptions = useSelector(state => selectYNOptions(state, FieldName));\r\n const status = useSelector(state => selectStatusByName(state, FieldName));\r\n const fieldIsVisible = IsVisible;\r\n const fieldIsDisabled = IsDisabled ?? false;\r\n const controlRef = useRef(null);\r\n\r\n // string array for combo placeholder to force display of TAP values in form\r\n const validationBubble = fieldValue => {\r\n helpers.setTouched(true);\r\n validateFigField(FieldName, fieldValue);\r\n };\r\n\r\n const comboChange = opt => {\r\n let blurValue = '';\r\n if (opt) {\r\n if (multiselect) {\r\n blurValue = opt?.map(option => option.value).join(',') ?? '';\r\n } else if (datatype !== 'bit') {\r\n blurValue = opt.value ?? '';\r\n setCheckOpt(opt);\r\n } else {\r\n blurValue = opt.value ?? '';\r\n }\r\n }\r\n setComboValue(opt ?? '');\r\n if (field?.value === blurValue) return;\r\n helpers.setValue(blurValue);\r\n validationBubble(blurValue);\r\n };\r\n\r\n // Combo values can be updated externally via redux (see usage of setComboSetValueDictionary and comboSetValueDictionary).\r\n useEffect(() => {\r\n if (inputType === 'ComboBox') {\r\n comboChange(comboValue);\r\n }\r\n }, [comboValue]);\r\n\r\n // sets combo value to empty to remove any values displaying\r\n useEffect(() => {\r\n if (comboClear && inputType === 'ComboBox') {\r\n setComboValue('');\r\n setComboClear(false);\r\n }\r\n }, [comboClear]);\r\n\r\n useEffect(() => {\r\n if (inputType === 'ComboBox') {\r\n dispatch(setComboSetValueDictionary({ [FieldName]: setComboValue }));\r\n }\r\n }, []);\r\n\r\n /*\r\n This is still here to update the comboBox, date time and bit fields.\r\n Because they read their values from state, this will need to potentially\r\n be moved at another time.\r\n */\r\n const updateFIGValues = updatedData => {\r\n if (updatedData) {\r\n Object.entries(updatedData).map(([key, value]) => {\r\n if (field.name !== key) return null;\r\n\r\n switch (inputType) {\r\n case 'TextInput':\r\n if (datatype === 'bit') {\r\n let bitValue;\r\n if (value != null && value !== '') {\r\n if (typeof value === 'string') {\r\n bitValue = value === 'true' ? 1 : 0;\r\n } else if (typeof value === 'boolean') {\r\n bitValue = value === true ? 1 : 0;\r\n } else if (typeof value === 'number') {\r\n bitValue = value;\r\n }\r\n }\r\n if (bitValue != null) {\r\n const option = {\r\n label: bitValue ? 'Yes' : 'No',\r\n value: bitValue,\r\n };\r\n comboChange(option);\r\n }\r\n }\r\n break;\r\n\r\n case 'ComboBox':\r\n if (comboBoxOptions?.length) {\r\n const multiSelectedOptions = [];\r\n let singleSelectOption = null;\r\n comboBoxOptions.forEach(opt => {\r\n // checking that field names and combo options match popfield value to display\r\n if (value) {\r\n if (multiselect) {\r\n value.split(',').map(val => {\r\n if (val === opt.value) {\r\n multiSelectedOptions.push(opt);\r\n }\r\n return null;\r\n });\r\n }\r\n if (value === opt.value) {\r\n if (!multiselect) {\r\n singleSelectOption = opt;\r\n }\r\n }\r\n }\r\n });\r\n if (multiselect) {\r\n comboChange(multiSelectedOptions);\r\n }\r\n if (!multiselect) {\r\n comboChange(singleSelectOption);\r\n }\r\n }\r\n break;\r\n\r\n default: break;\r\n }\r\n return null;\r\n });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (listingFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFIGValues(listingFormData);\r\n }\r\n }, [listingFormData, allComboBoxOptions]);\r\n\r\n useEffect(() => {\r\n if (agentFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFIGValues(agentFormData);\r\n }\r\n }, [agentFormData, allComboBoxOptions]);\r\n\r\n useEffect(() => {\r\n if (officeFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFIGValues(officeFormData);\r\n }\r\n }, [officeFormData, allComboBoxOptions]);\r\n\r\n const sameValue = (oldValue, newValue) => {\r\n if (oldValue === newValue) return true;\r\n if (oldValue?.toString() === newValue?.toString()) return true;\r\n // if (!oldValue && !newValue) return true;\r\n return false;\r\n };\r\n\r\n const handleBlur = e => {\r\n let validationValue = e.target.value;\r\n const isNumber = datatype === 'numeric' || datatype === 'decimal' || datatype === 'integer';\r\n if (isNumber && typeof (validationValue) === 'string') {\r\n validationValue = validationValue.replace(/,/g, '');\r\n }\r\n if (sameValue(field?.value, validationValue)) return;\r\n helpers.setValue(validationValue);\r\n validationBubble(validationValue);\r\n };\r\n\r\n const handleChange = ({ target }) => {\r\n setLocalFieldValue(target.value);\r\n setCharacterCount(target.value.length);\r\n };\r\n\r\n const handleFocus = () => {\r\n controlRef.current.focus();\r\n };\r\n\r\n const handleKeyPress = e => {\r\n if (e.key === 'Enter') {\r\n e.target.blur();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (inputType !== 'TextInput') return;\r\n if (!(datatype === 'string' || datatype === 'integer' || datatype === 'decimal' || datatype === 'numeric')) return;\r\n if (field?.value == null || field.value === localFieldValue) return;\r\n setLocalFieldValue(field.value);\r\n }, [field?.value]);\r\n\r\n // display an asterisk beside the field label if a field is required\r\n const isRequiredSymbol = requiredFields ? * : '';\r\n\r\n const classNames = 'form-group';\r\n // if (!fieldIsVisible) classNames = 'd-none'; // this almost works, but isVisible is not being returned properly.\r\n if (!fieldIsVisible) return null;\r\n\r\n return (\r\n \r\n \r\n {fieldLabel}\r\n {isRequiredSymbol}\r\n \r\n {\r\n showHelpIcon && (\r\n {helpText}}\r\n >\r\n \r\n \r\n )\r\n }\r\n {\r\n inputType === 'TextInput' && (\r\n <>\r\n {\r\n (datatype === 'string' && maxLength < 200)\r\n && (\r\n <>\r\n ({ ...styles, zIndex: 9999 }),\r\n }}\r\n />\r\n )\r\n }\r\n {\r\n inputType === 'ComboBox' && multiselect\r\n && (\r\n ({\r\n ...styles,\r\n backgroundColor: data?.label?.endsWith('(disabled)')\r\n ? 'hsl(0, 0%, 60%)'\r\n : styles.backgroundColor,\r\n }),\r\n menuPortal: styles => ({ ...styles, zIndex: 9999 }),\r\n }}\r\n />\r\n )\r\n }\r\n {\r\n meta && status && status.errorMessage ? (\r\n
\r\n );\r\n};\r\n\r\nFormikInputGroup.propTypes = {\r\n comboClear: PropTypes.bool,\r\n setComboClear: PropTypes.func,\r\n datatype: PropTypes.string,\r\n // disabled: PropTypes.bool,\r\n fieldLabel: PropTypes.string,\r\n FieldName: PropTypes.string,\r\n helpText: PropTypes.string,\r\n inputType: PropTypes.oneOf(['ComboBox', 'TextInput']),\r\n IsVisible: PropTypes.bool,\r\n IsDisabled: PropTypes.bool,\r\n multiselect: PropTypes.bool,\r\n // PageName: PropTypes.string,\r\n Precision: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n showHelpIcon: PropTypes.bool,\r\n validateFigField: PropTypes.func,\r\n comboBubbleWrap: PropTypes.shape({\r\n AddComboMutator: PropTypes.func,\r\n setNewComboValue: PropTypes.func,\r\n setNewComboOptions: PropTypes.func,\r\n }),\r\n};\r\n\r\nexport default FormikInputGroup;\r\n","import { createSelector } from 'reselect';\r\n\r\nexport const selectPhotoMetaCollection = createSelector(({ photo }) => photo.photoMetaCollection, result => result);\r\n\r\nexport const selectPhotosToUpload = createSelector(\r\n selectPhotoMetaCollection,\r\n photos => {\r\n if (!photos) return null;\r\n return photos.filter(p => !p.IsDeleted && !p.externalURL && !p.IsError);\r\n },\r\n);\r\n\r\nexport const selectPhotosToDisplay = createSelector(selectPhotoMetaCollection,\r\n photos => {\r\n if (!photos) return null;\r\n return photos.filter(pm => !pm.IsDeleted && pm.externalURL);\r\n });\r\n\r\nexport const selectValidPhotos = createSelector(selectPhotoMetaCollection, photoMetas => photoMetas.filter(pM => !pM.IsDeleted));\r\n\r\nexport const selectPhotoToEdit = createSelector(({ photo }) => photo.editPhotoMeta, result => result);\r\n\r\nexport const selectMaxSortOrder = createSelector(selectPhotoMetaCollection, allPhotos => {\r\n if (!allPhotos) return 0;\r\n if (allPhotos.length === 0) return 0;\r\n return allPhotos.filter(photoMeta => !photoMeta.IsDeleted).length;\r\n});\r\n\r\nexport const selectPhotoQueueLength = createSelector(selectPhotoMetaCollection, allPhotos => {\r\n if (!allPhotos) return 0;\r\n if (allPhotos.length === 0) return 0;\r\n return allPhotos.filter(photo => !photo.IsUploaded && !photo.IsError).length;\r\n});\r\n\r\nexport const selectDisplayedPhotoCount = createSelector(selectPhotosToDisplay, displayPhotos => displayPhotos.length);\r\n","/* eslint-disable react/prop-types */\r\nimport { useEffect } from 'react';\r\nimport { useFormikContext } from 'formik';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\n\r\nimport {\r\n selectLookupNames,\r\n selectAllComboBoxOptions,\r\n selectFormDefinition,\r\n} from '@redux/selectors/FormSelector';\r\n\r\nimport {\r\n setFormDataInitialized,\r\n} from '@redux/modules/formGeneration';\r\n\r\nimport { setRepeatableSectionCount } from '@redux/modules/listing';\r\nimport { selectPhotoMetaCollection } from '@redux/selectors/PhotoSelector';\r\n\r\nconst FormikFieldUpdater = ({\r\n agentGroupType,\r\n agentLookup,\r\n agentOfficeLookup,\r\n agentFormData,\r\n currCoords,\r\n officeLookup,\r\n officeManagerLookup,\r\n officeFormData,\r\n listingFormData,\r\n runValidation,\r\n}) => {\r\n const formDefinition = useSelector(selectFormDefinition);\r\n const lookUpNames = useSelector(selectLookupNames);\r\n const allComboBoxOptions = useSelector(selectAllComboBoxOptions);\r\n const photoMetaCollection = useSelector(selectPhotoMetaCollection);\r\n const { values, setFieldValue } = useFormikContext();\r\n // const newSortOrder = useSelector(selectListingPhotoSortOrder);\r\n const dispatch = useDispatch();\r\n const generateComboBoxOptions = currComboOptionObject => (\r\n currComboOptionObject.data.flatMap(currOption => {\r\n if (!currOption.Active || !currOption.ParentIsActive) return [];\r\n\r\n return [{\r\n label: currOption.Description,\r\n value: `${currOption.Code ? currOption.Code : ''}`,\r\n parents: currOption.Parents,\r\n }];\r\n })\r\n );\r\n\r\n useEffect(() => {\r\n if (values?.Photos) {\r\n if (photoMetaCollection.length === 0 && Object.keys(values.Photos).length !== 0) values.Photos = {};\r\n }\r\n dispatch(setRepeatableSectionCount(values));\r\n }, [values.Rooms, values.Photos, values.Supplements, values.OpenHouses, values.Doors, values.Parcels, values.Units, values.History]);\r\n\r\n const updateFormikValues = updatedData => {\r\n if (!updatedData) return;\r\n const updatedWhiteList = Object.keys(updatedData);\r\n\r\n const formDefinitionFlatMap = formDefinition.flatMap(field => {\r\n if (!updatedWhiteList.includes(field.FieldName)) return [];\r\n return [{ ...field }];\r\n });\r\n\r\n const comboBoxFlatMap = allComboBoxOptions.flatMap(comboOption => {\r\n if (!updatedWhiteList.includes(comboOption.lookupFieldName)) return [];\r\n return [{ ...comboOption }];\r\n });\r\n\r\n formDefinitionFlatMap.map(currField => {\r\n const currentValue = updatedData[currField.FieldName];\r\n\r\n switch (currField.inputType) {\r\n case 'TextInput':\r\n if (currField.datatype === 'datetime' || currField.datatype === 'date') {\r\n if (!currentValue) break;\r\n // FormikField takes care of formatting and presentation\r\n setFieldValue(currField.FieldName, currentValue.split('T')[0]);\r\n } else if (currField.datatype === 'bit') {\r\n let bitValue;\r\n if (currentValue != null && currentValue !== '') {\r\n if (typeof currentValue === 'string') {\r\n bitValue = currentValue === 'true' ? 1 : 0;\r\n } else if (typeof currentValue === 'boolean') {\r\n bitValue = currentValue === true ? 1 : 0;\r\n } else if (typeof value === 'number') {\r\n bitValue = currentValue;\r\n }\r\n }\r\n setFieldValue(currField.FieldName, bitValue ?? '');\r\n } else {\r\n setFieldValue(currField.FieldName, currentValue);\r\n }\r\n break;\r\n\r\n case 'ComboBox':\r\n if (comboBoxFlatMap.length) {\r\n let currComboOptionDirty;\r\n comboBoxFlatMap.forEach(currOption => {\r\n if (currField.comboBoxLookupName === currOption.tableName) {\r\n currComboOptionDirty = currOption;\r\n }\r\n });\r\n\r\n const currentComboOption = currComboOptionDirty ? generateComboBoxOptions(currComboOptionDirty) : [];\r\n const multiSelectedOptions = [];\r\n let singleSelectOption = {};\r\n currentComboOption.forEach(opt => {\r\n if (currentValue) {\r\n if (currField.multiselect) {\r\n currentValue.split(',').map(val => {\r\n if (val === opt.value) {\r\n multiSelectedOptions.push(opt);\r\n }\r\n return null;\r\n });\r\n } else {\r\n // eslint-disable-next-line no-lonely-if\r\n if (currentValue === opt.value) {\r\n singleSelectOption = opt;\r\n }\r\n }\r\n }\r\n });\r\n\r\n if (currField.multiselect) {\r\n setFieldValue(currField.FieldName, multiSelectedOptions.map(option => option.value).join(','));\r\n } else {\r\n setFieldValue(currField.FieldName, singleSelectOption.value ?? '');\r\n }\r\n }\r\n break;\r\n\r\n default: break;\r\n }\r\n return null;\r\n });\r\n };\r\n\r\n // Goes through the office keys, and sets an object with the MemberOffice field name and AgentOffice field name\r\n const updatedOfficeKeys = (officeKeys, officeType) => (\r\n officeKeys.flatMap(key => {\r\n // eslint-disable-next-line no-unused-vars\r\n const [officePrefix, officeSuffix] = key.split('Office');\r\n const officeUpdatedKey = officeType.concat('Office', officeSuffix);\r\n let officeWhiteList = ['OfficeAOR', 'OfficeKeyNumeric', 'OfficeMlsId', 'OfficeName', 'OfficePhone'];\r\n\r\n if (officeType === 'Main') {\r\n officeWhiteList = ['OfficeKeyNumeric', 'OfficeMlsId', 'OfficeName'];\r\n }\r\n\r\n if (!officeWhiteList.includes(key)) return [];\r\n return [{\r\n base: key,\r\n updated: officeUpdatedKey,\r\n }];\r\n })\r\n );\r\n\r\n // Goes through the agent keys, and sets an object with the Member field name and Agent field name\r\n const updatedAgentKeys = (agentKeys, agentGroup) => (\r\n agentKeys.flatMap(key => {\r\n let agentWhiteList = ['MemberAOR', 'MemberEmail', 'MemberFullName', 'MemberMlsId', 'MemberDirectPhone'];\r\n if (agentGroup === 'OfficeManager') {\r\n agentWhiteList = ['MemberMlsId', 'MemberFullName', 'MemberKeyNumeric'];\r\n }\r\n if (!agentWhiteList.includes(key)) return [];\r\n\r\n let agentUpdatedKey;\r\n switch (key) {\r\n case 'MemberDirectPhone':\r\n if (agentGroup === 'ListAgent') {\r\n agentUpdatedKey = 'ListAgentDirectPhone';\r\n break;\r\n }\r\n if (agentGroup === 'CoListAgent') {\r\n agentUpdatedKey = 'CoListAgentMobilePhone';\r\n break;\r\n }\r\n if (agentGroup === 'BuyerAgent') {\r\n agentUpdatedKey = 'BuyerAgentDirectPhone';\r\n break;\r\n }\r\n if (agentGroup === 'CoBuyerAgent') {\r\n agentUpdatedKey = 'CoBuyerAgentMobilePhone';\r\n break;\r\n }\r\n break;\r\n\r\n default: {\r\n const [, agentSuffix] = key.split('Member');\r\n agentUpdatedKey = agentGroup.concat(agentSuffix);\r\n break;\r\n }\r\n }\r\n if (!agentUpdatedKey) return [];\r\n\r\n return [{\r\n base: key,\r\n updated: agentUpdatedKey,\r\n }];\r\n })\r\n );\r\n\r\n // Populating manager fields in create/edit office\r\n useEffect(() => {\r\n if (officeManagerLookup) {\r\n const memberKeys = Object.keys(officeManagerLookup);\r\n const memberGroup = 'OfficeManager';\r\n\r\n const filteredMemberKeys = updatedAgentKeys(memberKeys, memberGroup);\r\n filteredMemberKeys.map(key => {\r\n setFieldValue(key.updated, officeManagerLookup[key.base]);\r\n return null;\r\n });\r\n\r\n runValidation();\r\n }\r\n }, [officeManagerLookup]);\r\n\r\n // Populating agent lookup fields in create/edit listing\r\n useEffect(() => {\r\n if (agentLookup) {\r\n const memberKeys = Object.keys(agentLookup);\r\n const agentKeys = [];\r\n const officeKeys = [];\r\n\r\n let agentOfficeType = 'List';\r\n let agentGroup = 'ListAgent';\r\n\r\n if (agentGroupType) {\r\n [agentOfficeType] = agentGroupType.split('Agent');\r\n agentGroup = agentGroupType;\r\n }\r\n\r\n memberKeys.map(key => {\r\n if (key.includes('Member')) {\r\n agentKeys.push(key);\r\n } else if (key.includes('Office')) {\r\n officeKeys.push(key);\r\n }\r\n return null;\r\n });\r\n\r\n const filteredMemberKeys = updatedAgentKeys(agentKeys, agentGroup);\r\n const filteredOfficeKeys = updatedOfficeKeys(officeKeys, agentOfficeType);\r\n\r\n filteredMemberKeys.map(key => {\r\n setFieldValue(key.updated, agentLookup[key.base]);\r\n return null;\r\n });\r\n\r\n filteredOfficeKeys.map(key => {\r\n setFieldValue(key.updated, agentLookup[key.base]);\r\n return null;\r\n });\r\n\r\n const keyNumericKey = agentGroup.concat('KeyNumeric');\r\n setFieldValue(keyNumericKey, agentLookup.UniqueID);\r\n\r\n runValidation();\r\n }\r\n }, [agentLookup]);\r\n\r\n // This is for populating the office lookup fields when creating an agent\r\n useEffect(() => {\r\n if (agentOfficeLookup) {\r\n Object.entries(agentOfficeLookup).map(([key, value]) => {\r\n const officeWhiteList = ['OfficeKeyNumeric', 'OfficeID', 'OfficeMlsId', 'OfficeName']; // We know that these are the office fields are are looking for\r\n if (officeWhiteList.includes(key)) {\r\n setFieldValue(key, value);\r\n }\r\n return null;\r\n });\r\n runValidation();\r\n }\r\n }, [agentOfficeLookup]);\r\n\r\n // This is for populating the coordinates fields when using the location plotter\r\n useEffect(() => {\r\n if (currCoords) {\r\n Object.entries(currCoords).map(([key, value]) => {\r\n setFieldValue(key, value);\r\n return null;\r\n });\r\n runValidation();\r\n }\r\n }, [currCoords]);\r\n\r\n /*\r\n This useEffect listens to both the comboBox options and selectedListing\r\n because when editing a listing, we need to wait for the comboBox options\r\n to load before we update the fields, whereas with TAP we don't need to do that.\r\n */\r\n useEffect(() => {\r\n if (listingFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFormikValues(listingFormData);\r\n runValidation();\r\n dispatch(setFormDataInitialized());\r\n }\r\n }, [listingFormData, allComboBoxOptions]);\r\n\r\n // Populating fields when we edit an agent\r\n useEffect(() => {\r\n if (agentFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFormikValues(agentFormData);\r\n runValidation();\r\n dispatch(setFormDataInitialized());\r\n }\r\n }, [agentFormData, allComboBoxOptions]);\r\n\r\n // Populating the fields when editing an office\r\n useEffect(() => {\r\n if (officeFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFormikValues(officeFormData);\r\n runValidation();\r\n dispatch(setFormDataInitialized());\r\n }\r\n }, [officeFormData, allComboBoxOptions]);\r\n\r\n /*\r\n This is for when we are in the create/edit office form\r\n and do a Main Office Lookup\r\n */\r\n useEffect(() => {\r\n if (officeLookup) {\r\n const officeKeys = Object.keys(officeLookup);\r\n const filteredOfficeKeys = updatedOfficeKeys(officeKeys, 'Main');\r\n filteredOfficeKeys.map(key => {\r\n setFieldValue(key.updated, officeLookup[key.base]);\r\n return null;\r\n });\r\n runValidation();\r\n }\r\n }, [officeLookup]);\r\n\r\n return null;\r\n};\r\n\r\nexport default FormikFieldUpdater;\r\n","import isEmpty from 'lodash/isEmpty';\r\nimport { createSelector } from 'reselect';\r\nimport { isUndefined } from 'lodash';\r\nimport { listingDict } from '../constants/GeneralConstants';\r\n\r\nexport const selectRepeatableSectionCount = ({ listing }) => listing.repeatableSectionCount;\r\n\r\nexport const selectUploadedImages = ({ listing }) => listing.uploadedPhotos;\r\n\r\nexport const selectCurrentImages = ({ listing }) => listing.currentImages;\r\n\r\nexport const selectUploadedSupplements = ({ listing }) => listing.uploadedSupplements;\r\n\r\nexport const selectCurrentListing = ({ listing }) => listing?.listingClicked;\r\n\r\nexport const selectListingStdStatus = ({ listing }) => listing?.listingClicked?.StandardStatus;\r\n\r\nexport const selectListingStdStatusVerb = ({ listing }) => listing?.listingClicked?.StandardStatusVerb;\r\n\r\nexport const selectCurrentListingPreferredPhotoDetails = ({ listing }) => listing.listingPreferredPhotoDetails;\r\n\r\nexport const selectCurrentListingPhoto = ({ listing }) => listing.listingPhoto;\r\n\r\nexport const selectListingSelected = ({ listing }) => listing.selectedListing;\r\n\r\nexport const selectMyListings = ({ listing }) => listing.myListings;\r\n\r\nexport const selectListingSelectedPhotos = createSelector(selectListingSelected, selectedListing => selectedListing?.photos ?? []);\r\n\r\nexport const selectListingSelectedRooms = createSelector(selectListingSelected, selectedListing => selectedListing?.rooms ?? []);\r\n\r\nexport const selectListingSelectedSupplements = createSelector(selectListingSelected, selectedListing => selectedListing?.supplements ?? []);\r\n\r\nexport const selectListingSelectedOpenHouses = createSelector(selectListingSelected, selectedListing => selectedListing?.openHouses ?? []);\r\n\r\nexport const selectListingSelectedParcels = createSelector(selectListingSelected, selectedListing => selectedListing?.parcels ?? []);\r\n\r\nexport const selectListingSelectedDoors = createSelector(selectListingSelected, selectedListing => selectedListing?.doors ?? []);\r\n\r\nexport const selectListingSelectedUnits = createSelector(selectListingSelected, selectedListing => selectedListing?.units ?? []);\r\n\r\nexport const selectListingSelectedHistory = createSelector(selectListingSelected, selectedListing => selectedListing?.history ?? []);\r\n\r\nexport const getSelectedListingData = ({ listing }) => listing?.selectedListing?.listing;\r\n\r\nexport const selectListingPhotoSortOrder = ({ listing }) => listing.listingPhotoSortOrder;\r\n\r\nexport const selectListingCodeFromListing = createSelector(\r\n selectListingSelected,\r\n listing => listing?.PropertyType.toString().toLowerCase(),\r\n);\r\n\r\nexport const selectListingTypeForViewing = createSelector(\r\n selectListingCodeFromListing,\r\n listingType => listingDict[listingType],\r\n);\r\n\r\nexport const selectListingSelectedByFilled = ({ listing }) => {\r\n const selectedListing = [];\r\n const dict = {};\r\n if (!isEmpty(listing.selectedListing)) {\r\n let slctListingData;\r\n if (listing.selectedListing.listing) {\r\n slctListingData = listing.selectedListing.listing; // Loading a listing\r\n } else {\r\n [slctListingData] = listing.selectedListing; // TAP data\r\n }\r\n Object.entries(slctListingData).map(([key, value]) => {\r\n if (value !== null) {\r\n dict[key] = value;\r\n }\r\n return null;\r\n });\r\n }\r\n\r\n if (!isEmpty(dict)) {\r\n selectedListing.push(dict);\r\n }\r\n return selectedListing;\r\n};\r\n\r\n// unused?\r\nexport const selectAutoPopSelectedByFieldName = ({ listing }, fieldName) => {\r\n const dict = {};\r\n if (listing.autoPopSelected) {\r\n const [slctListingData] = listing.autoPopSelected[0];\r\n Object.entries(slctListingData).map(([key, value]) => {\r\n if (key === fieldName) {\r\n dict[key] = value;\r\n }\r\n return null;\r\n });\r\n }\r\n return dict;\r\n};\r\n\r\n/* retrieves ListingId, UnparsedAddress and StandardStatus values from the current listing */\r\nexport const selectEditListingHeaderInfo = createSelector(selectListingSelected, listing => {\r\n const listingInfo = [];\r\n if (!isEmpty(listing)) {\r\n Object.entries(listing).map(([key, value]) => {\r\n if (key === 'listing') {\r\n const unitNumber = isUndefined(value?.UnitNumber) ? '' : `${value?.UnitNumber}, `;\r\n const streetNumber = isUndefined(value?.StreetNumber) ? '' : `${value?.StreetNumber} `;\r\n const streetName = isUndefined(value?.StreetName) ? '' : `${value?.StreetName} `;\r\n const streetSuffix = isUndefined(value?.StreetSuffix) ? '' : `${value?.StreetSuffix} `;\r\n const streetDirSuffix = isUndefined(value?.StreetDirSuffix) ? '' : `${value?.StreetDirSuffix}`;\r\n const unparsedAddress = value?.UnparsedAddress\r\n ? value?.UnparsedAddress\r\n : `${unitNumber}${streetNumber}${streetName}${streetSuffix}${streetDirSuffix}`;\r\n\r\n listingInfo.push({\r\n ListingId: value?.ListingId,\r\n PropertyType: value?.PropertyType,\r\n StandardStatus: value?.StandardStatus,\r\n UnparsedAddress: unparsedAddress,\r\n });\r\n }\r\n return null;\r\n });\r\n }\r\n return listingInfo;\r\n});\r\n\r\nexport const selectSectionsPerRepeatableSection = createSelector(selectRepeatableSectionCount, countListing => {\r\n const countPerSection = {};\r\n if (countListing) {\r\n const {\r\n Photos = [],\r\n Rooms = [],\r\n Supplements = [],\r\n OpenHouses = [],\r\n Doors = [],\r\n Parcels = [],\r\n Units = [],\r\n History = [],\r\n } = countListing;\r\n countPerSection.Photos = Photos.filter(photo => !photo);\r\n countPerSection.Rooms = Rooms.filter(room => !room);\r\n countPerSection.Supplements = Supplements.filter(supp => !supp);\r\n countPerSection.OpenHouses = OpenHouses.filter(openHouse => !openHouse);\r\n countPerSection.Doors = Doors.filter(door => !door);\r\n countPerSection.Parcels = Parcels.filter(parcel => !parcel);\r\n countPerSection.Units = Units.filter(unit => !unit);\r\n countPerSection.History = History.filter(hist => !hist);\r\n }\r\n return countPerSection;\r\n});\r\n","import { createSelector } from 'reselect';\r\n\r\nexport const getSearchAgentResults = createSelector(({ agent }) => agent.agentSearchResults, results => results);\r\n\r\nexport const getAgentSelected = ({ agent }) => agent.agentSelected;\r\n\r\nexport const selectAgentPhotos = ({ agent }) => agent.agentPhotos;\r\n\r\nexport const selectAgentPreferredPhoto = ({ agent }) => agent.singleAgentPhoto;\r\n\r\nexport const selectAgentPreferredPhotoDetails = createSelector(selectAgentPhotos, photos => {\r\n let preferredPhoto = {};\r\n if (photos?.length > 0) {\r\n [preferredPhoto] = photos;\r\n photos?.map(singlePhoto => {\r\n if (singlePhoto.PreferredPhotoYN) preferredPhoto = singlePhoto;\r\n return null;\r\n });\r\n }\r\n return preferredPhoto;\r\n});\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\n\r\n// This will group the Address fields together\r\n\r\nconst Address = props => {\r\n const [cityField, setCityField] = useState({ FieldName: 'City' });\r\n const [countyField, setCountyField] = useState({ FieldName: 'CountyOrParish' });\r\n const [postalField, setPostalField] = useState({ FieldName: 'PostalCode' });\r\n const [provinceField, setProvinceField] = useState({ FieldName: 'StateOrProvince' });\r\n const [streetDirSufField, setStreetDirSufField] = useState({ FieldName: 'StreetDirSuffix' });\r\n const [streetNameField, setStreetNameField] = useState({ FieldName: 'StreetName' });\r\n const [streetNumField, setStreetNumField] = useState({ FieldName: 'StreetNumber' });\r\n const [streetSufField, setStreetSufField] = useState({ FieldName: 'StreetSuffix' });\r\n const [unitNumField, setUnitNumField] = useState({ FieldName: 'UnitNumber' });\r\n\r\n const { fields, validateFigField, comboBubbleWrap } = props;\r\n\r\n useEffect(() => {\r\n fields.forEach(field => {\r\n switch (field.FieldName) {\r\n case 'City':\r\n setCityField(field);\r\n break;\r\n case 'CountyOrParish':\r\n setCountyField(field);\r\n break;\r\n case 'PostalCode':\r\n setPostalField(field);\r\n break;\r\n case 'StateOrProvince':\r\n setProvinceField(field);\r\n break;\r\n case 'StreetDirSuffix':\r\n setStreetDirSufField(field);\r\n break;\r\n case 'StreetName':\r\n setStreetNameField(field);\r\n break;\r\n case 'StreetNumber':\r\n setStreetNumField(field);\r\n break;\r\n case 'StreetSuffix':\r\n setStreetSufField(field);\r\n break;\r\n case 'UnitNumber':\r\n setUnitNumField(field);\r\n break;\r\n default: break;\r\n }\r\n });\r\n }, [fields]);\r\n\r\n return (\r\n <>\r\n \r\n {fieldLabel.includes('URL') && (
\r\n \r\n )\r\n }\r\n {\r\n (datatype === 'string' && maxLength >= 200)\r\n && (\r\n <>\r\n )}\r\n
\r\n
\r\n )}\r\n \r\n {maxLength > 0 && !fieldIsDisabled ? `${characterCount} / ${maxLength}` : null}\r\n
\r\n \r\n {fieldLabel.includes('URL') && (
\r\n \r\n )\r\n }\r\n {\r\n datatype === 'integer'\r\n && (\r\n )}\r\n
\r\n
\r\n )}\r\n \r\n {maxLength > 0 && !fieldIsDisabled ? `${characterCount} / ${maxLength}` : null}\r\n
\r\n \r\n {(fieldLabel.includes('Price') || fieldLabel.includes('Tax') || fieldLabel.includes('Rent') || fieldLabel.includes('Fee')) && (
\r\n )\r\n }\r\n \r\n )\r\n }\r\n {\r\n inputType === 'ComboBox' && !multiselect\r\n && (\r\n $
)}\r\n 00
)}\r\n {status.errorMessage}
\r\n ) : null\r\n }\r\n {inputType === 'ComboBox'\r\n && (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nAddress.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n comboBubbleWrap: PropTypes.shape({\r\n AddComboMutator: PropTypes.func,\r\n setNewComboValue: PropTypes.func,\r\n setNewComboOptions: PropTypes.func,\r\n }),\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default Address;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport { SET_GROUP_TYPE } from '@redux/constants/ActionTypes';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\n\r\nconst AgentLookup = ({ fields, groupName, validateFigField }) => {\r\n const dispatch = useDispatch();\r\n const selectLoading = useSelector(state => state.agent.selectLoading);\r\n\r\n const agentFullNameField = useMemo(() => fields.find(field => field.FieldName.toUpperCase().includes('FULLNAME')), [fields]);\r\n const officeNameField = useMemo(() => fields.find(field => field.FieldName.toUpperCase().includes('OFFICENAME')), [fields]);\r\n\r\n const { setFieldValue } = useFormikContext();\r\n\r\n const agentSearchClicked = () => {\r\n dispatch({ type: SET_GROUP_TYPE, groupType: groupName });\r\n };\r\n\r\n const onAgentCleared = () => {\r\n if (fields) {\r\n fields.map(field => {\r\n setFieldValue(field.FieldName, '');\r\n return null;\r\n });\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nAgentLookup.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n groupName: PropTypes.string,\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default AgentLookup;\r\n","import { useEffect, useRef } from 'react';\r\n\r\n// https://blog.logrocket.com/how-to-get-previous-props-state-with-react-hooks/\r\n\r\nconst usePrevious = value => {\r\n const ref = useRef();\r\n\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current;\r\n};\r\n\r\nexport default usePrevious;\r\n","import React, {\r\n useEffect,\r\n useState,\r\n useMemo,\r\n useCallback,\r\n} from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\nimport {\r\n Autocomplete, GoogleMap, LoadScript, Marker,\r\n} from '@react-google-maps/api';\r\n\r\nimport { useField } from 'formik';\r\n\r\nimport {\r\n selectComboBoxOptions,\r\n} from '@redux/selectors/FormSelector';\r\n\r\nimport usePrevious from '@hooks/usePrevious';\r\n\r\nconst defaultCenter = {\r\n lat: 53.54288713007532,\r\n lng: -113.49615377351157,\r\n};\r\n\r\nconst containerStyles = {\r\n width: '100%',\r\n height: '60vh',\r\n};\r\n\r\nconst defaultLibraries = ['places', 'geometry'];\r\n\r\nconst LocationPlotterMap = ({ onCoordsClicked }) => {\r\n const [autocompleteInstance, setAutocompleteInstance] = useState(null);\r\n const [mapInstance, setMapInstance] = useState(null);\r\n const [zoom, setZoom] = useState(5);\r\n\r\n const [zoomToLocation, setZoomToLocation] = useState(false);\r\n\r\n const [latValue, setLatValue] = useState(null);\r\n const [lngValue, setLngValue] = useState(null);\r\n\r\n const [latField] = useField('Latitude');\r\n const [lngField] = useField('Longitude');\r\n\r\n const [streetNoField] = useField('StreetNumber');\r\n const [streetNameField] = useField('StreetName');\r\n const [postalCodeField] = useField('PostalCode');\r\n const [streetSuffixField] = useField('StreetSuffix'); // ComboBox\r\n const [streetDirSuffixField] = useField('StreetDirSuffix'); // ComboBox\r\n const [cityField] = useField('City'); // ComboBox\r\n const [countyField] = useField('CountyOrParish'); // ComboBox\r\n const [provinceField] = useField('StateOrProvince'); // ComboBox\r\n\r\n const streetSuffixOptions = useSelector(state => selectComboBoxOptions(state, 'StreetSuffix'));\r\n const streetDirSuffixOptions = useSelector(state => selectComboBoxOptions(state, 'StreetDirSuffix'));\r\n const cityOptions = useSelector(state => selectComboBoxOptions(state, 'City'));\r\n const countyOptions = useSelector(state => selectComboBoxOptions(state, 'CountyOrParish'));\r\n const provinceOptions = useSelector(state => selectComboBoxOptions(state, 'StateOrProvince'));\r\n\r\n const streetNo = useMemo(() => streetNoField.value ?? '', [streetNoField]);\r\n const streetName = useMemo(() => streetNameField.value ?? '', [streetNameField]);\r\n const postalCode = useMemo(() => postalCodeField.value ?? '', [postalCodeField]);\r\n const streetSuffix = useMemo(() => streetSuffixOptions.find(opt => opt.value === streetSuffixField.value)?.label ?? '', [streetSuffixField.value, streetSuffixOptions]);\r\n const streetDirSuffix = useMemo(() => streetDirSuffixOptions.find(opt => opt.value === streetDirSuffixField.value)?.label ?? '', [streetDirSuffixField.value, streetSuffixOptions]);\r\n const city = useMemo(() => cityOptions.find(opt => opt.value === cityField.value)?.label ?? '', [cityField.value, streetSuffixOptions]);\r\n const county = useMemo(() => countyOptions.find(opt => opt.value === countyField.value)?.label ?? '', [countyField.value, streetSuffixOptions]);\r\n const province = useMemo(() => provinceOptions.find(opt => opt.value === provinceField.value)?.value ?? '', [provinceField.value, streetSuffixOptions]);\r\n\r\n const [addressInputValue, setAddressInputValue] = useState('');\r\n\r\n const [formAddress, setFormAddress] = useState('');\r\n useEffect(() => {\r\n const cityOrCounty = city || county;\r\n const address = `${streetNo} ${streetName} ${streetSuffix} ${streetDirSuffix}, ${cityOrCounty}, ${province} ${postalCode}`\r\n .replace(/\\s+,/g, ',') // moves any spaced comma next to the leftmost address token\r\n .trim() // cleanups any leading and trailing white space\r\n .replace(/^,+|,+$/g, '') // cleanups leading and trailing commas\r\n .replace(/,+/g, ',') // ensures only one comma is used between address tokens\r\n .replace(/\\s+/g, ' ') // ensures only one space is used between address tokens\r\n .trim(); // cleanups any leading and trailing white space\r\n setFormAddress(address);\r\n setAddressInputValue(address);\r\n }, [streetNo, streetName, streetSuffix, streetDirSuffix, city, county, province, postalCode]);\r\n\r\n const [isModalShown, setIsModalShown] = useState(false);\r\n const previousIsModalShown = usePrevious(isModalShown);\r\n const onModalShow = () => setIsModalShown(true);\r\n const onModalHide = () => setIsModalShown(false);\r\n\r\n useEffect(() => {\r\n window.jQuery('#locationPlotterModal').on('show.bs.modal', onModalShow);\r\n window.jQuery('#locationPlotterModal').on('hide.bs.modal', onModalHide);\r\n return () => {\r\n window.jQuery('#locationPlotterModal').off('show.bs.modal', onModalShow);\r\n window.jQuery('#locationPlotterModal').off('hide.bs.modal', onModalHide);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (previousIsModalShown && !isModalShown && !addressInputValue) {\r\n // Populate address field with existing form address when exiting modal without an address.\r\n setAddressInputValue(formAddress);\r\n }\r\n }, [isModalShown]);\r\n\r\n useEffect(() => {\r\n if (latField.value !== '') {\r\n const parseLat = parseFloat(latField.value);\r\n\r\n if (!latValue || parseLat !== latValue) {\r\n setLatValue(parseLat);\r\n }\r\n setZoomToLocation(true);\r\n } else if (latValue) {\r\n setLatValue(null); // If the user clears the lng coordinate we remove it from the map\r\n }\r\n }, [latField.value]);\r\n\r\n useEffect(() => {\r\n if (lngField.value !== '') {\r\n const parseLng = parseFloat(lngField.value);\r\n\r\n if (!lngValue || parseLng !== lngValue) {\r\n setLngValue(parseLng);\r\n }\r\n setZoomToLocation(true);\r\n } else if (lngValue) {\r\n setLngValue(null); // If the user clears the lng coordinate we remove it from the map\r\n }\r\n }, [lngField.value]);\r\n\r\n useEffect(() => {\r\n if (mapInstance && latValue && lngValue) {\r\n mapInstance.panTo({ lat: latValue, lng: lngValue });\r\n\r\n if (zoomToLocation) {\r\n mapInstance.setZoom(18);\r\n setZoom(18);\r\n }\r\n }\r\n }, [mapInstance, latValue, lngValue, zoomToLocation]);\r\n\r\n const onPlaceChanged = () => {\r\n if (autocompleteInstance) {\r\n const place = autocompleteInstance.getPlace();\r\n\r\n if (!place.geometry) return;\r\n if (mapInstance) {\r\n if (place.geometry.viewport) {\r\n mapInstance.fitBounds(place.geometry.viewport);\r\n } else {\r\n mapInstance.setCenter(place.geometry.location);\r\n mapInstance.setZoom(17);\r\n }\r\n }\r\n setLatValue(place.geometry.location.lat());\r\n setLngValue(place.geometry.location.lng());\r\n onCoordsClicked({\r\n Latitude: place.geometry.location.lat().toString(),\r\n Longitude: place.geometry.location.lng().toString(),\r\n });\r\n setAddressInputValue(place.formatted_address);\r\n }\r\n };\r\n\r\n const onMapClick = e => {\r\n if (mapInstance) {\r\n setZoomToLocation(false);\r\n setLatValue(e.latLng.lat());\r\n setLngValue(e.latLng.lng());\r\n onCoordsClicked({\r\n Latitude: e.latLng.lat().toString(),\r\n Longitude: e.latLng.lng().toString(),\r\n });\r\n }\r\n };\r\n\r\n const onMapLoad = useCallback(map => {\r\n setMapInstance(map);\r\n const parcelLayer = new window.google.maps.ImageMapType({\r\n getTileUrl: (c, z) => `${process.env.REACT_APP_MAPS_PARCEL_LAYER}${z}/${c.x}/${c.y}.png`,\r\n maxZoom: 20,\r\n minZoom: 16,\r\n tileSize: new window.google.maps.Size(256, 256),\r\n name: 'Parcels',\r\n });\r\n\r\n const neighbourhoodLayer = new window.google.maps.ImageMapType({\r\n getTileUrl: (c, z) => `${process.env.REACT_APP_MAPS_NEIGHBOURHOOD_LAYER}${z}/${c.x}/${c.y}.png`,\r\n maxZoom: 15,\r\n minZoom: 12,\r\n tileSize: new window.google.maps.Size(256, 256),\r\n name: 'Neighbourhoods',\r\n });\r\n\r\n const municipalityLayer = new window.google.maps.ImageMapType({\r\n getTileUrl: (c, z) => `${process.env.REACT_APP_MAPS_MUNICIPALITY_LAYER}${z}/${c.x}/${c.y}.png`,\r\n maxZoom: 13,\r\n minZoom: 7,\r\n tileSize: new window.google.maps.Size(256, 256),\r\n name: 'Municipalities',\r\n });\r\n map.overlayMapTypes.insertAt(0, parcelLayer);\r\n map.overlayMapTypes.insertAt(1, neighbourhoodLayer);\r\n map.overlayMapTypes.insertAt(2, municipalityLayer);\r\n }, []);\r\n\r\n const onMapUnmount = () => {\r\n setMapInstance(null);\r\n };\r\n\r\n const onAutoCompleteLoad = autocomplete => {\r\n setAutocompleteInstance(autocomplete);\r\n };\r\n\r\n const onAutoCompleteUnload = () => {\r\n setAutocompleteInstance(null);\r\n };\r\n\r\n const handleClear = () => {\r\n document.getElementById('locationPlotter').value = '';\r\n };\r\n\r\n return (\r\n \r\n
\r\n {\r\n groupName !== 'OfficeManager' && (\r\n \r\n
\r\n )\r\n }\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n agentSearchClicked()}\r\n variant=\"primary\"\r\n tooltipText=\"Agent Lookup\"\r\n disabled={selectLoading}\r\n >\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n setAddressInputValue(e.value)}\r\n value={addressInputValue}\r\n />\r\n
\r\n \r\n \r\n Clear}\r\n >\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nOfficeLookup.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default OfficeLookup;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport isEmpty from 'lodash/isEmpty';\r\nimport { useField, useFormikContext } from 'formik';\r\n\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\n// Contains one numeric field and one units lookup field\r\n\r\nconst OneDMeasurement = props => {\r\n const { fields, validateFigField } = props;\r\n const { setFieldValue } = useFormikContext();\r\n\r\n const [currUnit, setCurrUnit] = useState('');\r\n\r\n const areaField = useMemo(() => fields.find(field => !(field.FieldName.toUpperCase().includes('UNITS'))), [fields]);\r\n const unitsField = useMemo(() => fields.find(field => field.FieldName.toUpperCase().includes('UNITS')), [fields]);\r\n\r\n const [areaFormikField] = useField(areaField?.FieldName);\r\n const [unitsFormikField] = useField(unitsField?.FieldName);\r\n\r\n // updates current unit value from formik\r\n useEffect(() => {\r\n if (unitsFormikField.name) {\r\n if (!isEmpty(unitsFormikField.value)) {\r\n setCurrUnit(unitsFormikField.value);\r\n }\r\n }\r\n }, [unitsFormikField]);\r\n\r\n const convertFieldMeasurements = () => {\r\n let areaValue = parseFloat(areaFormikField.value);\r\n /*\r\n currUnit is the measurement we are changing from\r\n unitsFormikField is the measurement we are changing to\r\n */\r\n\r\n switch (currUnit) {\r\n case 'AC': {\r\n switch (unitsFormikField.value) {\r\n case 'HA': {\r\n areaValue /= 2.471;\r\n break;\r\n }\r\n case 'SF': {\r\n areaValue *= 43560;\r\n break;\r\n }\r\n case 'SM': {\r\n areaValue /= 0.000247105;\r\n break;\r\n }\r\n default: break;\r\n }\r\n break;\r\n }\r\n case 'HA': {\r\n switch (unitsFormikField.value) {\r\n case 'AC': {\r\n areaValue *= 2.471;\r\n break;\r\n }\r\n case 'SF': {\r\n areaValue *= 107639;\r\n break;\r\n }\r\n case 'SM': {\r\n areaValue *= 10000;\r\n break;\r\n }\r\n default: break;\r\n }\r\n break;\r\n }\r\n case 'SF': {\r\n switch (unitsFormikField.value) {\r\n case 'AC': {\r\n areaValue /= 43560;\r\n break;\r\n }\r\n case 'HA': {\r\n areaValue /= 107640;\r\n break;\r\n }\r\n case 'SM': {\r\n areaValue *= 0.09290304;\r\n break;\r\n }\r\n default: break;\r\n }\r\n break;\r\n }\r\n case 'SM': {\r\n switch (unitsFormikField.value) {\r\n case 'AC': {\r\n areaValue *= 0.000247105;\r\n break;\r\n }\r\n case 'HA': {\r\n areaValue /= 10000;\r\n break;\r\n }\r\n case 'SF': {\r\n areaValue *= 10.7639104167;\r\n break;\r\n }\r\n default: break;\r\n }\r\n break;\r\n }\r\n default: break;\r\n }\r\n\r\n setFieldValue(areaField.FieldName, areaValue);\r\n setCurrUnit(unitsFormikField.value);\r\n };\r\n\r\n useEffect(() => {\r\n if (unitsFormikField.value !== currUnit && areaFormikField.value > 0) {\r\n convertFieldMeasurements();\r\n }\r\n }, [unitsFormikField.value, areaFormikField.value]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nOneDMeasurement.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default OneDMeasurement;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useField, useFormikContext } from 'formik';\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\n\r\n// Contains two numeric fields and one units lookup field\r\n\r\nconst TwoDMeasurement = props => {\r\n const { fields, validateFigField } = props;\r\n const { setFieldValue } = useFormikContext();\r\n\r\n const [currUnit, setCurrUnit] = useState('');\r\n\r\n const lengthField = useMemo(() => fields.find(field => field.FieldName.toUpperCase().includes('LENGTH') || field.FieldName.toUpperCase().includes('FRONTAGEINPUT')), [fields]);\r\n const unitsField = useMemo(() => fields.find(field => field.FieldName.toUpperCase().includes('UNITS')), [fields]);\r\n const widthField = useMemo(() => fields.find(field => {\r\n if (field.FieldName.toUpperCase().includes('LENGTH') || field.FieldName.toUpperCase().includes('FRONTAGEINPUT')) return false;\r\n if (field.FieldName.toUpperCase().includes('UNITS')) return false;\r\n return true;\r\n }), [fields]);\r\n\r\n const [lengthFormikField] = useField(lengthField?.FieldName);\r\n const [unitsFormikField] = useField(unitsField?.FieldName);\r\n const [widthFormikField] = useField(widthField?.FieldName);\r\n\r\n // updates current unit value from formik\r\n useEffect(() => {\r\n if (unitsFormikField.name) {\r\n if (!unitsFormikField.value) {\r\n setCurrUnit(unitsFormikField.value);\r\n }\r\n }\r\n }, [unitsFormikField]);\r\n\r\n const convertFieldMeasurements = () => {\r\n let lengthValue = parseFloat(lengthFormikField.value);\r\n let widthValue = parseFloat(widthFormikField.value);\r\n\r\n // Convert between feet and meters\r\n if (currUnit === 'M') {\r\n lengthValue *= 3.281;\r\n widthValue *= 3.281;\r\n } else if (currUnit === 'F') {\r\n lengthValue /= 3.281;\r\n widthValue /= 3.281;\r\n }\r\n setFieldValue(lengthField.FieldName, lengthValue); // Set the length field in Formik state\r\n setFieldValue(widthField.FieldName, widthValue); // Set the width field in Formik state\r\n setCurrUnit(unitsFormikField.value); // Update the state\r\n };\r\n\r\n useEffect(() => {\r\n if (unitsFormikField.value !== currUnit && lengthFormikField.value && widthFormikField.value) {\r\n convertFieldMeasurements();\r\n }\r\n }, [unitsFormikField.value, lengthFormikField.value, widthFormikField.value]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nTwoDMeasurement.propTypes = {\r\n // fields: PropTypes.arrayOf(PropTypes.shape({\r\n // datatype: PropTypes.string,\r\n // fieldLabel: PropTypes.string,\r\n // FieldName: PropTypes.string.isRequired,\r\n // FormName: PropTypes.oneOf([\r\n // 'COM',\r\n // 'FARM',\r\n // 'LAND',\r\n // 'MOB',\r\n // 'MULT',\r\n // 'RES',\r\n // 'RNT',\r\n // ]).isRequired,\r\n // helpText: PropTypes.string,\r\n // inputType: PropTypes.oneOf(['ComboBox', 'TextInput']).isRequired,\r\n // IsActive: PropTypes.bool,\r\n // IsGrandfathered: PropTypes.bool,\r\n // IsRequired: PropTypes.bool,\r\n // layoutGroupName: PropTypes.string,\r\n // layoutGroupType: PropTypes.string,\r\n // maxLength: PropTypes.number,\r\n // multiselect: PropTypes.bool,\r\n // pageIsRepeatableComponent: PropTypes.bool,\r\n // PageName: PropTypes.string,\r\n // pageSortOrder: PropTypes.number.isRequired,\r\n // Precision: PropTypes.number,\r\n // RowID: PropTypes.number.isRequired,\r\n // showHelpIcon: PropTypes.bool.isRequired,\r\n // SortOrder: PropTypes.number.isRequired,\r\n // ValidationMessage: PropTypes.string,\r\n // ValidationRule: PropTypes.string,\r\n // })).isRequired,\r\n fields: PropTypes.arrayOf(PropTypes.shape()).isRequired,\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default TwoDMeasurement;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSelector } from 'react-redux';\r\nimport Select from 'react-select';\r\nimport { useField, useFormikContext } from 'formik';\r\nimport { selectComboBoxOptions, selectStatusByName } from '@redux/selectors/FormSelector';\r\n\r\nconst SupplementComboBox = ({ uid, supplementType }) => {\r\n const name = `Supplements.[${uid}].SupplementType`;\r\n const [field, meta] = useField(name);\r\n const { setFieldTouched, setFieldValue } = useFormikContext();\r\n\r\n const supplementTypeOptions = useSelector(state => selectComboBoxOptions(state, 'SupplementType'));\r\n const suppType = useMemo(() => supplementTypeOptions.find(opt => opt.value === supplementType), [supplementType, supplementTypeOptions]);\r\n\r\n const status = useSelector(state => selectStatusByName(state, 'Supplements'));\r\n\r\n // FlexRule does not return a validation result per supplement instance, but instead a single status for all supplements.\r\n // Therefore, it is necessary to check MEASURE and JUDICIAL (the only two valid selections) before displaying validation error message.\r\n const isValid = (meta.touched && status?.errorMessage && field.value !== 'MEASURE' && field.value !== 'JUDICIAL');\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n setFieldTouched(name, true)}\r\n // react-select sends synthetic events, and will not work with formik change handler\r\n onChange={option => ((option === null) ? setFieldValue(name, '') : setFieldValue(name, option.value))}\r\n closeMenuOnSelect\r\n value={suppType}\r\n isClearable // option will be null if user clears combo box\r\n options={supplementTypeOptions}\r\n placeholder=\"Choose one\"\r\n />\r\n {isValid && (
\r\n );\r\n};\r\n\r\nSupplementComboBox.propTypes = {\r\n uid: PropTypes.string,\r\n supplementType: PropTypes.string,\r\n};\r\n\r\nexport default SupplementComboBox;\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useField } from 'formik';\r\n\r\nconst SupplementDescription = ({ uid }) => {\r\n const name = `Supplements.[${uid}].Description`;\r\n const [field, , helpers] = useField(name);\r\n const [localFieldValue, setLocalFieldValue] = useState(field?.value);\r\n\r\n const handleBlur = e => {\r\n if (field?.value === e.target.value) return;\r\n helpers.setValue(e.target.value);\r\n };\r\n\r\n const handleChange = ({ target }) => setLocalFieldValue(target.value);\r\n\r\n useEffect(() => {\r\n if (field?.value == null || field.value === localFieldValue) return;\r\n setLocalFieldValue(field.value);\r\n }, [field?.value]);\r\n\r\n return (\r\n {status.errorMessage}
)}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nSupplementDescription.propTypes = {\r\n uid: PropTypes.string,\r\n};\r\n\r\nexport default SupplementDescription;\r\n","import React, { useMemo, useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport apiService from '@services/apiService';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\n\r\nconst extensionDict = {\r\n doc: 'word',\r\n docx: 'word',\r\n pdf: 'pdf',\r\n rtf: 'alt',\r\n txt: 'alt',\r\n xls: 'spreadsheet',\r\n xlsx: 'spreadsheet',\r\n gif: 'image',\r\n jpg: 'image',\r\n jpeg: 'image',\r\n png: 'image',\r\n tiff: 'image',\r\n mov: 'video',\r\n mp4: 'video',\r\n mpeg: 'video',\r\n wmv: 'video',\r\n quicktime: 'video',\r\n};\r\n\r\nconst SupplementLink = ({ path }) => {\r\n const [fileBlob, setFileBlob] = useState(null);\r\n const [blobURL, setBlobURL] = useState('');\r\n const [blobSize, setBlobSize] = useState(0);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const currentIcon = useMemo(() => {\r\n if (path) {\r\n const extension = path.substring(path.lastIndexOf('.') + 1);\r\n return `far fa-file-${extensionDict[extension]}`;\r\n }\r\n return null;\r\n }, [path]);\r\n\r\n const retrieveFile = async awsUrl => {\r\n try {\r\n const response = await apiService.Photos.getSingleImage(awsUrl);\r\n return response;\r\n } catch (er) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: SupplementLink retrieveFile:', er);\r\n return null;\r\n } finally {\r\n setIsLoading(false);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (fileBlob) {\r\n const megabytes = Math.round((fileBlob.size * 0.000001 + Number.EPSILON) * 100) / 100;\r\n setBlobSize(megabytes);\r\n setBlobURL(URL.createObjectURL(fileBlob));\r\n }\r\n }, [fileBlob]);\r\n\r\n useEffect(async () => {\r\n try {\r\n if (path) {\r\n setIsLoading(true);\r\n const fileResp = await retrieveFile(path);\r\n setFileBlob(fileResp);\r\n }\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: SupplementLink retrieveFile', err);\r\n }\r\n }, [path]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nSupplementLink.propTypes = {\r\n path: PropTypes.string,\r\n};\r\n\r\nexport default SupplementLink;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useDispatch } from 'react-redux';\r\nimport { useFormikContext } from 'formik';\r\nimport { deleteSupplement } from '@redux/modules/listing';\r\nimport { SortableHandle } from 'react-sortable-hoc';\r\n\r\nimport Card from 'react-bootstrap/Card';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nimport SupplementComboBox from './components/SupplementComboBox';\r\nimport SupplementDescription from './components/SupplementDescription';\r\nimport SupplementLink from './components/SupplementLink';\r\n\r\nconst DragHandle = SortableHandle(() => );\r\n\r\nconst SupplementCard = ({ file, sortIndex }) => {\r\n const dispatch = useDispatch();\r\n const { values, setValues } = useFormikContext();\r\n\r\n const handleDelete = () => {\r\n // flips isDeleted flag in Redux store\r\n dispatch(deleteSupplement(file.uid));\r\n\r\n // set formik state for deleted supplement\r\n setValues({\r\n ...values,\r\n Supplements: {\r\n ...values.Supplements,\r\n [file.uid]: {\r\n ...file,\r\n IsDeleted: true,\r\n },\r\n },\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Download\r\n {' ('}\r\n \r\n {isLoading ? : ` , ${blobSize} MB`}\r\n {') '}\r\n \r\n
\r\n \r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst SupplementGrid = ({ fields, supplementsPayload }) => {\r\n const {\r\n values, setValues, setFieldValue,\r\n } = useFormikContext();\r\n const dispatch = useDispatch();\r\n const statusSupplement = useSelector(state => selectStatusByName(state, 'Supplements'));\r\n // const pageStructureHasRooms = useSelector(selectPageStructureHasRooms);\r\n\r\n const uploadList = useSelector(selectUploadedSupplements);\r\n // this property is duplicated in each member of fields\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const supplementsCount = sectionsPerRepeatableSection.Supplements.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.Supplements) {\r\n Object.entries(values.Supplements).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.Supplements]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'Supplements Exceeded',\r\n html: `The maximum number of supplements must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n useEffect(() => {\r\n const formikSupplements = values.Supplements;\r\n uploadList.forEach(upload => {\r\n if (!upload.IsUploading) {\r\n // formik may not have the record.\r\n const uploadFormikRecord = formikSupplements?.[upload.uid] ?? null;\r\n if (uploadFormikRecord) {\r\n uploadFormikRecord.Description = upload.Description;\r\n uploadFormikRecord.Path = upload.Name ?? upload.URL;\r\n uploadFormikRecord.Name = upload.Name ?? upload.URL;\r\n }\r\n }\r\n });\r\n }, [uploadList]);\r\n\r\n const handleFileDrop = acceptedFiles => {\r\n if (supplementsCount + acceptedFiles.length > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n // we batch supplements before adding to formik state, may need async hack per https://github.com/jaredpalmer/formik/issues/529\r\n const batch = {};\r\n acceptedFiles.map(file => {\r\n // generate UID to relate placeholder to POST response to formik state\r\n const id = uuidv4();\r\n // For each file, dispatch async thunk in Redux\r\n dispatch(saveSupplement(file, id));\r\n\r\n batch[id] = {\r\n uid: id,\r\n Description: '',\r\n SupplementType: '',\r\n SortOrder: uploadList.length + 1,\r\n IsDeleted: false,\r\n };\r\n return null;\r\n });\r\n // add uploads to formik state\r\n setValues({\r\n ...values,\r\n Supplements: {\r\n ...values.Supplements,\r\n ...batch,\r\n },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (supplementsPayload?.length) {\r\n const batch = {}; // adds object to formik\r\n const newUploadedSupp = []; // used for re ordering\r\n supplementsPayload.map(supp => {\r\n // generate UID to relate placeholder to POST response to formik state\r\n const id = uuidv4();\r\n batch[id] = {\r\n uid: id,\r\n Description: supp.displayName ?? supp.Description,\r\n SupplementType: supp.SupplementType,\r\n SortOrder: supp.SortOrder,\r\n IsDeleted: supp.IsDeleted,\r\n Name: supp.Path,\r\n Path: supp.Path,\r\n URL: supp.URL,\r\n };\r\n newUploadedSupp.push({\r\n uid: id,\r\n Path: supp.Path,\r\n Description: supp.displayName ?? supp.Description,\r\n UniqueID: supp.UniqueID,\r\n SupplementType: supp.SupplementType,\r\n MediaType: supp.MediaType,\r\n URL: supp.URL,\r\n SortOrder: supp.SortOrder,\r\n IsDeleted: supp.IsDeleted,\r\n IsLive: supp.IsLive,\r\n IsPreload: supp.IsPreload,\r\n Name: supp.Path,\r\n });\r\n return null;\r\n });\r\n // add uploads to formik state\r\n setFieldValue('Supplements', {\r\n ...values.Supplements,\r\n ...batch,\r\n });\r\n // add it to redux\r\n dispatch(reorderSupplements(newUploadedSupp));\r\n }\r\n }, [supplementsPayload]);\r\n\r\n // after sort ends derive new order, then dispatch results to redux\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const newSortOrder = arrayMoveImmutable(uploadList, oldIndex, newIndex);\r\n dispatch(reorderSupplements(newSortOrder));\r\n\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n setValues({\r\n ...values,\r\n Supplements: { ...newValues },\r\n });\r\n };\r\n\r\n const { getRootProps, getInputProps } = useDropzone({ accept: allowableFiles, maxFiles: maxCount, onDrop: handleFileDrop });\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nSupplementGrid.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n supplementsPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n};\r\n\r\nexport default SupplementGrid;\r\n","/* eslint-disable no-param-reassign */\r\n\r\nimport { useEffect, useState } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport apiService from '@services/apiService';\r\nimport {\r\n addNewClientPhoto,\r\n addFlexRulePhoto,\r\n addEditPhotoResult,\r\n addApiUploadResult,\r\n softDeletePhoto,\r\n clearPhotoCollection,\r\n removeEditPhoto,\r\n restorePhotoMetaByKey,\r\n} from '@redux/modules/photo';\r\n\r\nimport {\r\n selectPhotoMetaCollection,\r\n selectPhotosToUpload,\r\n selectPhotoToEdit,\r\n selectMaxSortOrder,\r\n} from '@redux/selectors/PhotoSelector';\r\nimport photoPlaceholder from '@images/image-not-available.png';\r\nimport API from '../config';\r\n\r\nconst usePhotoManager = () => {\r\n const dispatch = useDispatch();\r\n\r\n // retrieves entire collection\r\n const photoMetaCollection = useSelector(selectPhotoMetaCollection);\r\n\r\n // retrieve only photos without externalURL\r\n const photosToUpload = useSelector(selectPhotosToUpload);\r\n\r\n const editPhotoMeta = useSelector(selectPhotoToEdit);\r\n const maxSort = useSelector(selectMaxSortOrder);\r\n // tracks by key which photos have been passed to the api already.\r\n const [photoUploadStatus, setPhotoUploadStatus] = useState([]);\r\n\r\n const getPhotoMetaObject = () => ({\r\n key: null,\r\n id: null,\r\n originalURL: null,\r\n srcURL: null,\r\n cropperSrcURL: null,\r\n externalURL: null,\r\n SortOrder: null,\r\n IsDeleted: null,\r\n IsUploaded: false,\r\n IsError: false,\r\n Description: null,\r\n thumbailSrcURL: null,\r\n thumbExternalURL: null,\r\n cropPointer: null,\r\n cropperResult: {\r\n file: null,\r\n blobURL: null,\r\n },\r\n dropZoneMeta: {\r\n file: null,\r\n blobURL: null,\r\n },\r\n apiMeta: {\r\n assetType: null,\r\n displayName: null,\r\n extension: null,\r\n isError: null,\r\n newName: null,\r\n path: null,\r\n url: null,\r\n },\r\n formikMeta: {\r\n URL: null,\r\n SortOrder: null,\r\n IsDeleted: null,\r\n IsLive: null,\r\n IsPreload: null,\r\n Description: null,\r\n MediaType: null,\r\n MediaCategory: null,\r\n },\r\n flexMeta: {\r\n UniqueID: null,\r\n ParentID: null,\r\n SortOrder: null,\r\n IsDeleted: null,\r\n Description: null,\r\n MediaCategory: null,\r\n MediaKeyNumeric: null,\r\n MediaType: null,\r\n ModificationTimestamp: null,\r\n Order: null,\r\n OriginatingSystemMediaKey: null,\r\n OriginatingSystemName: null,\r\n PreferredPhotoYN: null,\r\n ResourceName: null,\r\n Path: null,\r\n URL: null,\r\n ResourceRecordKeyNumeric: null,\r\n ModifiedDate: null,\r\n IsLive: null,\r\n LongDescription: null,\r\n ParentType: null,\r\n OriginatingSystemParent: null,\r\n IsPreload: null,\r\n fullSizeURL: null,\r\n InitialSortOrder: null,\r\n },\r\n });\r\n\r\n const createThumbNailFile = photoMetaFilePtr => {\r\n let thumbnail;\r\n const fileName = photoMetaFilePtr.path ?? photoMetaFilePtr.name;\r\n const name = fileName.replace(/(\\.[\\w\\d_-]+)$/i, '_thumbnail$1');\r\n thumbnail = new File([photoMetaFilePtr], name, {\r\n type: photoMetaFilePtr.type,\r\n });\r\n thumbnail = Object.assign(thumbnail, {\r\n length: photoMetaFilePtr.length,\r\n });\r\n return thumbnail;\r\n };\r\n\r\n const uuidRegexPattern = /[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}/i;\r\n const createThumbnailExternalLink = photoMeta => {\r\n const externalFullSizeUrl = photoMeta.externalURL;\r\n if (externalFullSizeUrl) {\r\n if (!externalFullSizeUrl.match(uuidRegexPattern)) return externalFullSizeUrl; // thumbnail image does not exist\r\n return externalFullSizeUrl.replace(/(\\.[\\w\\d_-]+)$/i, '_thumbnail$1');\r\n }\r\n return '';\r\n };\r\n\r\n const postFormFiles = async (formFiles, photoMeta) => {\r\n /*\r\n +++++++ Base API return\r\n assetType: \"image\"\r\n photoMeta.apiMeta.displayName: \"cat1_thumbnail.jpg\"\r\n photoMeta.apiMeta.extension: \".jpg\"\r\n photoMeta.apiMeta.isError: false\r\n photoMeta.apiMeta.newName: \"https://dev-pillarnineonmarket.s3.ca-central-1.amazonaws.com/8f46d3eb63af4315b7bff500cceff7d8_thumbnail.jpg\"\r\n photoMeta.apiMeta.path: \"8f46d3eb63af4315b7bff500cceff7d8_thumbnail.jpg\"\r\n photoMeta.apiMeta.url: \"https://dev-pillarnineonmarket.s3.ca-central-1.amazonaws.com/8f46d3eb63af4315b7bff500cceff7d8_thumbnail.jpg\"\r\n */\r\n try {\r\n const result = await apiService.Photos.postImage(formFiles);\r\n result.forEach(res => {\r\n if (res.path.includes('_thumbnail')) {\r\n photoMeta.thumbExternalURL = res.url;\r\n return;\r\n }\r\n photoMeta.IsUploaded = true;\r\n photoMeta.externalURL = res.url;\r\n photoMeta.apiMeta.assetType = res.assetType;\r\n photoMeta.apiMeta.displayName = res.displayName;\r\n photoMeta.apiMeta.extension = res.extension;\r\n photoMeta.apiMeta.isError = res.isError;\r\n photoMeta.apiMeta.newName = res.newName;\r\n photoMeta.apiMeta.path = res.path;\r\n photoMeta.apiMeta.url = res.url;\r\n });\r\n // write photoMeta back to redux.\r\n dispatch(addApiUploadResult(photoMeta));\r\n } catch (error) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: usePhotoManager postFormFiles', error);\r\n photoMeta.IsError = true;\r\n if (photoMeta.cropPointer) {\r\n photoMeta.IsDeleted = true;\r\n dispatch(restorePhotoMetaByKey(photoMeta.cropPointer));\r\n } else {\r\n dispatch(addApiUploadResult(photoMeta));\r\n }\r\n }\r\n };\r\n\r\n const uploadPhoto = async photoMeta => {\r\n const metaFile = photoMeta.cropperResult.file ?? photoMeta.dropZoneMeta.file;\r\n const thumbnail = createThumbNailFile(metaFile);\r\n const formFiles = new FormData();\r\n formFiles.append('cropperImageList', metaFile);\r\n formFiles.append('cropperImageList', thumbnail);\r\n await postFormFiles(formFiles, photoMeta); // dispatch key w/ formfile to maintain object provenance\r\n formFiles.delete('cropperImageList');\r\n };\r\n\r\n // set upload flags to track file uploads\r\n // this runs 4 times for 1 photo.\r\n useEffect(() => {\r\n if (photosToUpload && photosToUpload.length > 0) {\r\n photosToUpload.forEach(pm => {\r\n if (!photoUploadStatus.find(status => status.key === pm.key)) {\r\n const newStatus = {\r\n key: pm.key,\r\n toUpload: true,\r\n uploadComplete: false,\r\n reUpload: false,\r\n };\r\n setPhotoUploadStatus([...photoUploadStatus, newStatus]);\r\n }\r\n });\r\n }\r\n }, [photosToUpload, photoUploadStatus]);\r\n\r\n // upload photos based on status\r\n useEffect(() => {\r\n if (photoUploadStatus.length > 0) {\r\n const needToProcess = photoUploadStatus.filter(pU => pU.toUpload);\r\n if (needToProcess.length > 0) {\r\n needToProcess.forEach(async processKey => {\r\n const targetPM = photoMetaCollection.find(pm => pm.key === processKey.key);\r\n if (targetPM) await uploadPhoto(targetPM);\r\n });\r\n const processedStatuses = photoUploadStatus.map(pU => {\r\n const element = pU;\r\n const status = needToProcess.find(n => n.key === pU.key);\r\n if (!status) return element;\r\n element.toUpload = false;\r\n element.uploadComplete = true;\r\n return element;\r\n });\r\n setPhotoUploadStatus(processedStatuses);\r\n }\r\n }\r\n }, [photoUploadStatus]);\r\n\r\n useEffect(() => {\r\n if (photoMetaCollection.length === 0 && photoUploadStatus.length !== 0) setPhotoUploadStatus([]);\r\n }, [photoMetaCollection]);\r\n\r\n // index passed to handle bulk drop of photos, as only the dropzone will know how many files are coming in.\r\n const addNewDropzonePhoto = (photo, index) => {\r\n /* default file params.\r\n {\r\n path: \"cat1.jpg\"\r\n lastModified: 1651087606513\r\n lastModifiedDate: Wed Apr 27 2022 13:26:46 GMT-0600 (Mountain Daylight Time) {}\r\n name: \"cat1.jpg\"\r\n size: 5256\r\n type: \"image/jpeg\"\r\n webkitRelativePath: \"\"\r\n }\r\n */\r\n const newDzPhoto = getPhotoMetaObject();\r\n const key = uuidv4();\r\n newDzPhoto.key = key;\r\n newDzPhoto.id = key;\r\n newDzPhoto.SortOrder = maxSort + index + 1;\r\n newDzPhoto.IsDeleted = false;\r\n newDzPhoto.dropZoneMeta.file = photo;\r\n\r\n // need to convert to a safer data ref for redux storage.\r\n if (photo.blobURL) URL.revokeObjectURL(photo.blobURL);\r\n // URL.revokeObjectURL(photo.blobURL);\r\n dispatch(addNewClientPhoto(newDzPhoto));\r\n };\r\n\r\n const addNewFlexRulePhoto = photo => {\r\n const newFrPhoto = getPhotoMetaObject();\r\n const key = uuidv4();\r\n if (!photo.URL) newFrPhoto.IsError = true;\r\n else newFrPhoto.IsUploaded = true;\r\n newFrPhoto.key = key;\r\n newFrPhoto.id = key;\r\n newFrPhoto.SortOrder = photo.SortOrder;\r\n newFrPhoto.IsDeleted = photo.IsDeleted;\r\n newFrPhoto.Description = photo.Description;\r\n newFrPhoto.flexMeta = { ...photo };\r\n newFrPhoto.externalURL = photo.URL;\r\n newFrPhoto.thumbExternalURL = createThumbnailExternalLink(newFrPhoto);\r\n dispatch(addFlexRulePhoto(newFrPhoto));\r\n };\r\n\r\n // const createFileFromUrl = async (dataUrl, name) => fetch(dataUrl).then(r => r.blob()).then(blobFile => new File([blobFile], `${name}.png`, { type: blobFile.type }));\r\n\r\n const getPhotoFileFromApi = async externalURL => {\r\n try {\r\n const response = await apiService.Photos.getSingleImage(externalURL);\r\n return URL.createObjectURL(response);\r\n } catch (er) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: usePhotoManager getPhotoFileFromApi', er);\r\n return photoPlaceholder;\r\n }\r\n };\r\n\r\n const addEditPhotoMeta = (metaSource, cropperBlob) => {\r\n // const cropMeta = deriveCropMetaFromOriginal(editedPhotoMeta);\r\n\r\n const originMeta = metaSource;\r\n const cropMeta = getPhotoMetaObject();\r\n // const originMeta = photoMeta;\r\n const newKey = uuidv4(); // create new key to hold original photo;\r\n cropMeta.key = newKey;\r\n cropMeta.id = newKey;\r\n cropMeta.SortOrder = originMeta.SortOrder;\r\n cropMeta.IsDeleted = originMeta.IsDeleted;\r\n cropMeta.Description = originMeta.Description;\r\n cropMeta.cropPointer = originMeta.key; // point to original to use on reset\r\n\r\n originMeta.IsDeleted = true;\r\n const name = originMeta.Description ?? originMeta.key;\r\n cropMeta.cropperResult.blobURL = cropperBlob;\r\n\r\n dispatch(addEditPhotoResult(cropMeta, name));\r\n dispatch(softDeletePhoto(originMeta));\r\n URL.revokeObjectURL(cropMeta.cropperResult.blobURL);\r\n URL.revokeObjectURL(cropperBlob);\r\n };\r\n\r\n const getFullImageFromMeta = photoMeta => `${API.URL}Image/GetAwsFile?file=${photoMeta.externalURL}`;\r\n\r\n const getThumbFromMeta = photoMeta => `${API.URL}Image/GetAwsFile?file=${photoMeta.thumbExternalURL}`;\r\n\r\n const markIsDeleted = photoMeta => {\r\n const deletedPhotoMeta = photoMeta;\r\n deletedPhotoMeta.IsDeleted = true;\r\n dispatch(softDeletePhoto(deletedPhotoMeta));\r\n };\r\n\r\n const getPhotoToEdit = async () => {\r\n if (editPhotoMeta) {\r\n editPhotoMeta.originalURL = getFullImageFromMeta(editPhotoMeta);\r\n editPhotoMeta.cropperSrcURL = await getPhotoFileFromApi(editPhotoMeta.externalURL);\r\n return editPhotoMeta;\r\n }\r\n return null;\r\n };\r\n const removeEditPhotoMeta = () => dispatch(removeEditPhoto());\r\n\r\n const dispatchClearPhotoCollection = () => dispatch(clearPhotoCollection());\r\n\r\n return {\r\n addNewDropzonePhoto,\r\n addNewFlexRulePhoto,\r\n addEditPhotoMeta,\r\n\r\n dispatchClearPhotoCollection,\r\n getPhotoFileFromApi,\r\n getFullImageFromMeta,\r\n getThumbFromMeta,\r\n getPhotoToEdit,\r\n maxSort,\r\n removeEditPhotoMeta,\r\n markIsDeleted,\r\n };\r\n};\r\n\r\nexport default usePhotoManager;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nconst Edit = ({ onEditClicked, item, isDisabled = false }) => {\r\n const handleEditClick = () => onEditClicked(item);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n {statusSupplement?.errorMessage && \r\n \r\n
\r\n\r\n Drag 'n' drop your supplement files here, or click to select\r\n them manually.\r\n
\r\n\r\n Press 'Ctrl' or ⌘ to multi-select\r\n
\r\n{statusSupplement.errorMessage}
}\r\n \r\n {dynamicOrder\r\n ? item?.SortOrder\r\n : item.InitialSortOrder}\r\n
\r\n \r\n {image ? (\r\n <>\r\n
\r\n \r\n )}\r\n >\r\n {image\r\n ? (\r\n
\r\n )}\r\n \r\n Loading...\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n },\r\n);\r\n\r\nPhoto.propTypes = {\r\n isSelected: PropTypes.bool,\r\n className: PropTypes.string,\r\n color: PropTypes.string,\r\n dragOverlay: PropTypes.bool,\r\n dragging: PropTypes.bool,\r\n disabled: PropTypes.string,\r\n fadeIn: PropTypes.bool,\r\n height: PropTypes.string,\r\n listeners: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n onSelect: PropTypes.func,\r\n isDropped: PropTypes.bool,\r\n id: PropTypes.string,\r\n index: PropTypes.number,\r\n item: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n sorting: PropTypes.bool,\r\n style: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n transition: PropTypes.string,\r\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n containerId: PropTypes.string,\r\n getIndex: PropTypes.func,\r\n handle: PropTypes.bool,\r\n renderItem: PropTypes.arrayOf(PropTypes.string, PropTypes.shape()),\r\n // onRemove: PropTypes.func,\r\n // onEditClicked: PropTypes.func,\r\n transform: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n wrapperStyle: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n\r\n};\r\n\r\nexport default Photo;\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n// import { useSelector } from 'react-redux';\r\n\r\nimport {\r\n useSortable,\r\n} from '@dnd-kit/sortable';\r\n\r\nimport Photo from './Photo';\r\n\r\nconst useMountStatus = () => {\r\n const [isMounted, setIsMounted] = useState(false);\r\n\r\n useEffect(() => {\r\n const timeout = setTimeout(() => setIsMounted(true), 500);\r\n\r\n return () => clearTimeout(timeout);\r\n }, []);\r\n\r\n return isMounted;\r\n};\r\n\r\nconst SortableItem = ({\r\n item,\r\n isSelected,\r\n onSelect,\r\n // onEditClicked,\r\n // onRemove,\r\n isDropped,\r\n id,\r\n index,\r\n handle,\r\n renderItem,\r\n style,\r\n containerId,\r\n getIndex,\r\n wrapperStyle,\r\n}) => {\r\n // const isBusy = useSelector(state => state?.listing?.isBusy ?? false);\r\n const {\r\n setNodeRef,\r\n listeners,\r\n isDragging,\r\n isSorting,\r\n over,\r\n overIndex,\r\n transform,\r\n transition,\r\n } = useSortable({\r\n id: item.id,\r\n // disabled: isBusy,\r\n });\r\n const mounted = useMountStatus();\r\n const mountedWhileDragging = isDragging && !mounted;\r\n const newlisteners = {\r\n ...listeners,\r\n onClick: event => {\r\n onSelect(item, event.ctrlKey);\r\n },\r\n };\r\n const className = classNames(\r\n isSelected && 'selectedItem',\r\n isDropped && 'droppedItem',\r\n );\r\n\r\n return (\r\n \r\n \r\n {selectedItems.length}\r\n items\r\n \r\n
\r\n )}\r\n \r\n ) : null}\r\n \r\n \r\n
\r\n {status?.errorMessage && \r\n \r\n
\r\n\r\n Drag 'n' drop your photos here, or click to select them\r\n manually.\r\n
\r\n\r\n Press 'Ctrl' or ⌘ to multi-select\r\n
\r\n{status.errorMessage}
}\r\n {photosCount === 0 && (\r\n \r\n \r\n Please note that photos must be under 50 MB each in size.\r\n
\r\n )}\r\n\r\n {cropping && (\r\n \r\n \r\n Download\r\n \r\n {/* \r\n \r\n\r\n */}\r\n {/* */}\r\n
\r\n );\r\n};\r\n\r\nCropperController.propTypes = {\r\n cropping: PropTypes.bool,\r\n // imageFile: PropTypes.oneOfType([PropTypes.string, PropTypes.shape()]),\r\n imageURL: PropTypes.string,\r\n photoToEdit: PropTypes.oneOfType([PropTypes.string, PropTypes.shape()]),\r\n onCrop: PropTypes.func,\r\n onRemove: PropTypes.func,\r\n onReset: PropTypes.func,\r\n onSave: PropTypes.func,\r\n};\r\n\r\nexport default CropperController;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\n\r\nimport { selectPhotoToEdit } from '@redux/selectors/PhotoSelector';\r\nimport { addEditPhotoResult, removeEditPhoto, softDeletePhoto } from '@redux/modules/photo';\r\n\r\nimport Cropper from 'react-cropper';\r\nimport 'cropperjs/dist/cropper.css';\r\n\r\nimport Modal from '@components/smartAdminUI/Modal';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nimport CropperController from './cropperController/CropperController';\r\n\r\nconst ImageCropperModal = () => {\r\n const dispatch = useDispatch();\r\n const cropperRef = useRef(null);\r\n const [cropping, setCropping] = useState(false); // whether cropper is in the middle of cropping\r\n const [cropData, setCropData] = useState(null); // cropped image object\r\n const [cropper, setCropper] = useState(null); // cropper js object\r\n const photoToEdit = useSelector(selectPhotoToEdit); // gets photo key for editing out of redux\r\n\r\n const [descriptionFieldValue, setDescriptionFieldValue] = useState(''); // value for description text box\r\n const [displayImageSrc, setDisplayImageSrc] = useState(''); // Full size image for cropper to work with\r\n\r\n // set description from redux\r\n useEffect(() => {\r\n if (photoToEdit) {\r\n setDescriptionFieldValue(photoToEdit.Description);\r\n if (photoToEdit.cropperPhoto && typeof (photoToEdit.cropperPhoto) !== 'string') {\r\n const displaySrc = URL.createObjectURL(photoToEdit.cropperPhoto);\r\n setDisplayImageSrc(displaySrc);\r\n }\r\n }\r\n }, [photoToEdit]);\r\n\r\n // keep modal state in unison with cropper state\r\n useEffect(() => {\r\n if (cropper && cropper.options.dragMode === 'crop') {\r\n setCropping(true);\r\n }\r\n }, [cropper]);\r\n\r\n // writes orientation and scale changes to canvas\r\n const setTransformData = () => {\r\n const canvasData = cropper.getCanvasData();\r\n if (canvasData) {\r\n cropper.setCropBoxData(canvasData);\r\n setCropData(cropper.getCroppedCanvas().toDataURL());\r\n }\r\n };\r\n\r\n // description modification UI -> formik\r\n const handleBlur = e => {\r\n if (!photoToEdit) return;\r\n if (photoToEdit.Description === e.target.value) return;\r\n photoToEdit.Description = e.target.value;\r\n setTransformData();\r\n };\r\n\r\n // description modification formik -> UI\r\n const handleChange = e => {\r\n setDescriptionFieldValue(e.target.value);\r\n setTransformData();\r\n };\r\n\r\n const onRotateLeft = () => {\r\n if (!cropper) return;\r\n cropper.rotate(-90);\r\n setTransformData();\r\n };\r\n\r\n const onRotateRight = () => {\r\n if (!cropper) return;\r\n cropper.rotate(90);\r\n setTransformData();\r\n };\r\n\r\n const onZoomIn = () => {\r\n if (!cropper) return;\r\n cropper.crop();\r\n cropper.zoom(0.1);\r\n setTransformData();\r\n };\r\n\r\n const onZoomOut = () => {\r\n if (!cropper) return;\r\n cropper.crop();\r\n cropper.zoom(-0.1);\r\n setTransformData();\r\n };\r\n\r\n const onFlipH = () => {\r\n if (!cropper) return;\r\n cropper.scaleX(-cropper.getData().scaleX || 1);\r\n setTransformData();\r\n };\r\n\r\n const onFlipV = () => {\r\n if (!cropper) return;\r\n cropper.scaleY(-cropper.getData().scaleY || 1);\r\n setTransformData();\r\n };\r\n\r\n const onCropImage = action => {\r\n if (!cropper) return;\r\n if (cropper !== undefined && action === 'move') {\r\n cropper.setDragMode('move');\r\n setCropping(false);\r\n } else {\r\n cropper.setDragMode('crop');\r\n setCropping(true);\r\n }\r\n };\r\n\r\n const onSave = async () => {\r\n if (cropData) {\r\n dispatch(addEditPhotoResult(photoToEdit, cropData));\r\n setCropData(URL.revokeObjectURL(cropData));\r\n setCropping(false);\r\n setCropData(null);\r\n dispatch(removeEditPhoto());\r\n }\r\n };\r\n\r\n const onReset = () => {\r\n cropper.reset();\r\n cropper.clear();\r\n if (cropData) setCropData(URL.revokeObjectURL(cropData));\r\n setCropData(null);\r\n setCropping(false);\r\n };\r\n\r\n // load crop result\r\n const onCrop = () => {\r\n if (!cropper) return;\r\n setCropData(cropper.getCroppedCanvas().toDataURL());\r\n setCropping(false);\r\n cropper.setDragMode('move');\r\n };\r\n\r\n const closeClicked = () => {\r\n if (!cropper) return;\r\n if (cropData) setCropData(URL.revokeObjectURL(cropData));\r\n setCropData(null);\r\n setCropping(false);\r\n dispatch(removeEditPhoto());\r\n };\r\n\r\n const onRemove = () => {\r\n if (!cropper) return;\r\n if (cropData) setCropData(URL.revokeObjectURL(cropData));\r\n dispatch(softDeletePhoto(photoToEdit));\r\n dispatch(removeEditPhoto());\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n \r\n OK\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n Delete\r\n \r\n \r\n \r\n Save\r\n \r\n
\r\n \r\n {photoToEdit && (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ImageCropperModal;\r\n","import React, {\r\n useEffect, useMemo,\r\n} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport {\r\n setRepeatableSectionCount,\r\n} from '@redux/modules/listing';\r\nimport { selectPhotoMetaCollection } from '@redux/selectors/PhotoSelector';\r\nimport { clearPhotoCollection } from '@redux/modules/photo';\r\nimport 'cropperjs/dist/cropper.css';\r\nimport ImageDropZone from './imageDropZone/ImageDropZone';\r\nimport ImageCropperModal from './imageCropperModal/ImageCropperModal';\r\n\r\nconst ImageCropper = ({ fields, photosPayload }) => {\r\n const dispatch = useDispatch();\r\n const { values, setValues } = useFormikContext();\r\n const photoCollection = useSelector(selectPhotoMetaCollection);\r\n\r\n // clears photo collection on unmount; note the nested anonymous function\r\n useEffect(() => () => {\r\n dispatch(clearPhotoCollection());\r\n }, []);\r\n\r\n const transformFields = currentFields => {\r\n const newFields = [];\r\n if (currentFields?.fields) {\r\n currentFields[0].fields.forEach(field => { newFields[field.FieldName] = ''; });\r\n }\r\n return newFields;\r\n };\r\n\r\n const fieldNames = useMemo(() => transformFields(fields), [fields]);\r\n\r\n // object structure to write to formik values.Photos\r\n const createFormikEntry = photoMeta => {\r\n const formikEntry = {\r\n key: photoMeta.key,\r\n id: photoMeta.id,\r\n URL: photoMeta.externalURL,\r\n UniqueID: photoMeta.flexMeta.UniqueID ?? null,\r\n ParentID: photoMeta.flexMeta.ParentID ?? null,\r\n PreferredPhotoYN: photoMeta.flexMeta.PreferredPhotoYN ?? null,\r\n ResourceName: photoMeta.flexMeta.ResourceName ?? null,\r\n SortOrder: photoMeta.SortOrder,\r\n IsDeleted: photoMeta.IsDeleted,\r\n IsLive: photoMeta.flexMeta.IsLive ?? null,\r\n IsPreload: photoMeta.flexMeta.IsPreload ?? null,\r\n Description: photoMeta.Description,\r\n MediaType: photoMeta.flexMeta.MediaType ?? null,\r\n MediaCategory: photoMeta.flexMeta.MediaCategory ?? null,\r\n };\r\n return formikEntry;\r\n };\r\n\r\n // writes redux photo collection to formik.\r\n useEffect(() => {\r\n if (photoCollection) {\r\n let formikPhotos = values?.Photos ?? {};\r\n if (photoCollection.length === 0) formikPhotos = {};\r\n photoCollection.forEach(dPhoto => {\r\n const formikEntry = createFormikEntry(dPhoto);\r\n if (formikPhotos?.[formikEntry.key] && formikPhotos?.[formikEntry.key] !== formikEntry) {\r\n formikPhotos[formikEntry.key] = { ...fieldNames, ...formikEntry };\r\n } else if (!formikPhotos?.[formikEntry.key]) formikPhotos[formikEntry.key] = formikEntry;\r\n });\r\n const formikValues = values;\r\n formikValues.Photos = formikPhotos;\r\n setValues(formikValues);\r\n dispatch(setRepeatableSectionCount(formikValues));\r\n }\r\n }, [photoCollection]);\r\n\r\n return (\r\n <>\r\n \r\n setCropper(instance)}\r\n dragMode=\"none\"\r\n guides\r\n />\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n Description\r\n \r\n
\r\n \r\n
\r\n \r\n Crop}\r\n >\r\n onCropImage('drag')}\r\n >\r\n \r\n \r\n \r\n Zoom In}\r\n >\r\n \r\n \r\n \r\n \r\n Zoom Out}\r\n >\r\n \r\n \r\n \r\n \r\n Rotate Left}\r\n >\r\n \r\n \r\n \r\n \r\n Rotate Right}\r\n >\r\n \r\n \r\n \r\n \r\n Fip Horizontal}\r\n >\r\n \r\n \r\n \r\n \r\n Fip Vertical}\r\n >\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {roomStatus?.RoomLength?.errorMessage && \r\n
\r\n \r\n {roomValues?.RoomLengthWidthUnits === 'F' ? 'ft' : 'm'}\r\n
\r\n {roomValues?.RoomLengthWidthUnits === 'F' && (\r\n <>\r\n \r\n {roomValues?.RoomLengthWidthUnits === 'F' ? 'in' : 'm'}\r\n
\r\n \r\n )}\r\n {roomStatus.RoomLength.errorMessage}
}\r\n \r\n \r\n \r\n
\r\n {roomStatus?.RoomWidth?.errorMessage && \r\n
\r\n \r\n {roomValues?.RoomLengthWidthUnits === 'F' ? 'ft' : 'm'}\r\n
\r\n {roomValues?.RoomLengthWidthUnits === 'F' && (\r\n <>\r\n \r\n {roomValues?.RoomLengthWidthUnits === 'F' ? 'in' : 'm'}\r\n
\r\n \r\n )}\r\n {roomStatus.RoomWidth.errorMessage}
}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nRoomMeasurement.propTypes = {\r\n formik: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(), PropTypes.number, PropTypes.func])),\r\n id: PropTypes.string.isRequired,\r\n handleBlur: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default RoomMeasurement;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, {\r\n forwardRef, useEffect, useMemo, useCallback,\r\n} from 'react';\r\n\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport Select from 'react-select';\r\n\r\nimport {\r\n setRoomValidationResult,\r\n} from '@redux/modules/formGeneration';\r\n\r\nimport { selectRoomStatusById, selectComboBoxOptions } from '@redux/selectors/FormSelector';\r\n\r\nimport Card from '@components/smartAdminUI/Card';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport styles from '@components/form/formComponents/repeatableRoom/RoomCard.module.css';\r\nimport RoomMeasurement from '@components/form/formComponents/repeatableRoom/RoomMeasurement';\r\n\r\nconst roomRules = window.FlexRule.RuntimeEngine.fromJavaScript('OnePlatform', 'RoomRules');\r\n\r\nconst RoomCard = forwardRef(\r\n ({\r\n attributes,\r\n item,\r\n className,\r\n color,\r\n dragOverlay,\r\n dragging,\r\n disabled,\r\n fadeIn,\r\n handle,\r\n height,\r\n listeners,\r\n renderItem,\r\n sorting,\r\n style,\r\n transition,\r\n transform,\r\n value,\r\n wrapperStyle,\r\n index,\r\n onRemoveRoom,\r\n role,\r\n formik,\r\n id,\r\n ...props\r\n }, ref) => {\r\n const dispatch = useDispatch();\r\n const roomLvlOptions = useSelector(state => selectComboBoxOptions(state, 'RoomLevel'));\r\n const roomTypeOptions = useSelector(state => selectComboBoxOptions(state, 'RoomType'));\r\n const values = formik?.values?.Rooms[id];\r\n const roomLvl = useMemo(() => roomLvlOptions.find(opt => opt.value === values.RoomLevel), [values, roomLvlOptions]);\r\n const roomType = useMemo(() => roomTypeOptions.find(opt => opt.value === values.RoomType), [values, roomTypeOptions]);\r\n\r\n const roomStatus = useSelector(state => selectRoomStatusById(state, id));\r\n // validates total room, then sets the results in redux\r\n const validateRoomField = () => {\r\n if (!values.IsDeleted) {\r\n const res = roomRules.run(values);\r\n const { fieldValidationResult } = res.context.variableContainer;\r\n dispatch(setRoomValidationResult(id, fieldValidationResult));\r\n }\r\n };\r\n\r\n // sets field as touched, then triggers validation on field\r\n const handleBlur = useCallback(fieldName => () => {\r\n formik.setFieldTouched(fieldName, true);\r\n validateRoomField();\r\n }, [values]);\r\n\r\n const lvlOnChange = opt => {\r\n formik.setFieldValue(`Rooms.[${id}].RoomLevel`, opt?.value);\r\n };\r\n\r\n const typeOnChange = opt => {\r\n formik.setFieldValue(`Rooms.[${id}].RoomType`, opt?.value);\r\n };\r\n\r\n useEffect(() => {\r\n if (!dragOverlay) {\r\n return undefined;\r\n }\r\n\r\n document.body.style.cursor = 'grabbing';\r\n\r\n return () => {\r\n document.body.style.cursor = '';\r\n };\r\n }, [dragOverlay]);\r\n\r\n const removeRoom = () => {\r\n onRemoveRoom(id);\r\n };\r\n return (renderItem && item) ? (\r\n renderItem({\r\n key: id,\r\n dragOverlay: Boolean(dragOverlay),\r\n dragging: Boolean(dragging),\r\n sorting: Boolean(sorting),\r\n index,\r\n fadeIn: Boolean(fadeIn),\r\n listeners,\r\n onRemoveRoom,\r\n ref,\r\n style,\r\n transform,\r\n transition,\r\n value,\r\n })\r\n ) : (\r\n <>\r\n \r\n \r\n Type\r\n \r\n
\r\n {roomStatus.RoomType.errorMessage}
)}\r\n \r\n \r\n Level\r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n },\r\n);\r\n\r\nRoomCard.propTypes = {\r\n attributes: PropTypes.string,\r\n className: PropTypes.string,\r\n color: PropTypes.string,\r\n dragOverlay: PropTypes.bool,\r\n dragging: PropTypes.bool,\r\n disabled: PropTypes.bool,\r\n fadeIn: PropTypes.bool,\r\n handle: PropTypes.bool,\r\n height: PropTypes.string,\r\n key: PropTypes.string,\r\n listeners: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n id: PropTypes.string.isRequired,\r\n index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n item: PropTypes.arrayOf(PropTypes.string),\r\n renderItem: PropTypes.bool,\r\n sorting: PropTypes.bool,\r\n style: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n transform: PropTypes.bool,\r\n transition: PropTypes.string,\r\n value: PropTypes.string,\r\n wrapperStyle: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n onRemoveRoom: PropTypes.func,\r\n role: PropTypes.string,\r\n formik: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(), PropTypes.number, PropTypes.func])),\r\n};\r\n\r\nexport default RoomCard;\r\n","import React, {\r\n useEffect, useState, useMemo,\r\n} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { createPortal } from 'react-dom';\r\nimport { useDispatch } from 'react-redux';\r\nimport {\r\n closestCenter,\r\n DragOverlay,\r\n DndContext,\r\n defaultDropAnimation,\r\n KeyboardSensor,\r\n PointerSensor,\r\n TouchSensor,\r\n useSensor,\r\n useSensors,\r\n} from '@dnd-kit/core';\r\n\r\nimport {\r\n arrayMove,\r\n useSortable,\r\n SortableContext,\r\n sortableKeyboardCoordinates,\r\n rectSortingStrategy,\r\n} from '@dnd-kit/sortable';\r\n\r\nimport {\r\n deleteRoomValidationResult,\r\n} from '@redux/modules/formGeneration';\r\n\r\nimport { setRepeatableSectionCount } from '@redux/modules/listing';\r\n\r\nimport Grid from '@components/form/formComponents/imageCropper/imageDropZone/components/Grid';\r\nimport RoomCard from '@components/form/formComponents/repeatableRoom/RoomCard';\r\n\r\nconst defaultDropAnimationConfig = {\r\n ...defaultDropAnimation,\r\n dragSourceOpacity: 0.5,\r\n};\r\n\r\nexport function RoomsGridList({\r\n activationConstraint,\r\n animateLayoutChanges,\r\n adjustScale = false,\r\n collisionDetection = closestCenter,\r\n dropAnimation = defaultDropAnimationConfig,\r\n formik,\r\n getItemStyles = () => ({}),\r\n handle = false,\r\n isDisabled = () => false,\r\n measuring,\r\n modifiers,\r\n renderItem,\r\n strategy = rectSortingStrategy,\r\n useDragOverlay = true,\r\n wrapperStyle = () => ({}),\r\n}) {\r\n const roomValues = formik?.values?.Rooms;\r\n const [items, setItems] = useState(null);\r\n const [activeId, setActiveId] = useState(null);\r\n\r\n const sensors = useSensors(\r\n useSensor(PointerSensor, {\r\n activationConstraint: {\r\n distance: 10,\r\n },\r\n }),\r\n useSensor(TouchSensor, {\r\n activationConstraint,\r\n }),\r\n useSensor(KeyboardSensor, {\r\n coordinateGetter: sortableKeyboardCoordinates,\r\n }),\r\n );\r\n const dispatch = useDispatch();\r\n const entryItems = useMemo(() => {\r\n const arrayOfItems = items ? Object.entries(items) : [];\r\n return arrayOfItems;\r\n }, [items]);\r\n\r\n const getIndex = id => Object.keys(items).findIndex(item => item === id);\r\n const activeIndex = activeId ? getIndex(activeId) : -1;\r\n\r\n useEffect(() => {\r\n if (roomValues) {\r\n setItems(roomValues);\r\n }\r\n }, [roomValues]);\r\n\r\n const onRemoveRoom = id => {\r\n // remove room from formik values\r\n const { [id]: removedValue, ...otherValues } = items;\r\n // otherValues is a dictionary.\r\n // keys are just uid prop\r\n\r\n // eslint-disable-next-line no-param-reassign, no-return-assign\r\n const sortedOthers = Object.values(otherValues).filter(ov => !ov.IsDeleted).sort((ov1, ov2) => ov1.SortOrder - ov2.SortOrder).map((sOv, index) => sOv = { ...sOv, SortOrder: index + 1 });\r\n const otherDict = {};\r\n const newValues = formik.values;\r\n sortedOthers.forEach(sO => {\r\n otherDict[sO.uid] = sO;\r\n newValues.Rooms[sO.uid].SortOrder = sO.SortOrder;\r\n });\r\n setItems({ ...otherDict });\r\n newValues.Rooms[removedValue.uid].IsDeleted = true;\r\n formik.setValues(newValues);\r\n // remove room from formik touched, if it exists\r\n if (formik?.touched?.Rooms?.[id]) {\r\n const { [id]: removedTouched, ...otherTouched } = formik.touched.Rooms;\r\n formik.setTouched({\r\n ...formik.touched,\r\n Rooms: { ...otherTouched },\r\n });\r\n }\r\n // remove room from redux validation\r\n dispatch(setRepeatableSectionCount(newValues));\r\n dispatch(deleteRoomValidationResult(id));\r\n };\r\n\r\n const spliceDict = (dict, startIndex, endIndex) => {\r\n let newDict = [];\r\n const newArr = {};\r\n Object.entries(dict).map(([key]) => newDict.push({ [key]: dict[key] }));\r\n newDict = arrayMove(newDict, startIndex, endIndex);\r\n newDict.map((entry, index) => {\r\n Object.entries(entry).map(([key, value]) => {\r\n newArr[key] = {\r\n ...value,\r\n SortOrder: index + 1,\r\n };\r\n return undefined;\r\n });\r\n return undefined;\r\n });\r\n return newArr;\r\n };\r\n return (\r\n {roomStatus.RoomLevel.errorMessage}
)}\r\n \r\n Rooms\r\n \r\n {roomsCount}\r\n \r\n
\r\n \r\n {roomErrorDimension?.errorMessage &&
\r\n\r\n <>\r\n \r\n {(roomsCount > 2) && (\r\n <>\r\n \r\n
\r\n \r\n )}\r\n
\r\n \r\n )}\r\n {roomErrorDimension.errorMessage}
}\r\n {roomErrorCount?.errorMessage && {roomErrorCount.errorMessage}
}\r\n {roomErrorLevel?.errorMessage && {roomErrorLevel.errorMessage}
}\r\n {roomErrorType?.errorMessage && {roomErrorType.errorMessage}
}\r\n \r\n \r\n
\r\n \r\n Units\r\n \r\n
\r\n { roomsCount === 0 && (\r\n \r\n \r\n Please note that you can use the dropdown above to change units from Imperial to Metric.\r\n
\r\n )}\r\n {!isEmpty(formik.values.Rooms) && (\r\n\r\n \r\n )}\r\n
\r\n {name.includes('URL') && (
\r\n )\r\n : (\r\n )}\r\n
\r\n
\r\n )}\r\n \r\n {maxLength > 0 && !disabled ? `${isNull(value) ? 0 : value.length} / ${maxLength}` : null}\r\n
\r\n \r\n {name.includes('URL') && (
\r\n )\r\n);\r\n\r\nFormikTextInput.propTypes = {\r\n disabled: PropTypes.bool,\r\n name: PropTypes.string,\r\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.instanceOf(null)]), // if value is null\r\n onBlur: PropTypes.func,\r\n onChange: PropTypes.func,\r\n onKeyPress: PropTypes.func,\r\n maxLength: PropTypes.number,\r\n};\r\n\r\nexport default FormikTextInput;\r\n","import React, { useMemo } from 'react';\r\nimport { Form } from 'react-bootstrap';\r\nimport PropTypes from 'prop-types';\r\nimport { useField } from 'formik';\r\n\r\nconst FormikBoolean = ({\r\n disabled,\r\n name,\r\n value = false,\r\n onBlur,\r\n onChange,\r\n}) => {\r\n const [field, , helpers] = useField(name);\r\n const checked = useMemo(() => {\r\n if (typeof value === 'boolean') return value;\r\n if (typeof value === 'number') return Boolean(value);\r\n if (typeof value === 'string') return Boolean(Number(value));\r\n return null;\r\n }, [value]);\r\n\r\n const handleChange = event => {\r\n const bitVal = String(Number(event?.target?.checked ?? false));\r\n if (field?.value === bitVal) return;\r\n if (onChange) {\r\n onChange(bitVal);\r\n } else {\r\n helpers.setValue(bitVal);\r\n }\r\n };\r\n\r\n return (\r\n )}\r\n
\r\n
\r\n )}\r\n \r\n {maxLength > 0 && !disabled ? `${isNull(value) ? 0 : value.length} / ${maxLength}` : null}\r\n
\r\n \r\n \r\n
\r\n ));\r\n\r\n DateWithAddOnCalendar.propTypes = {\r\n className: PropTypes.string, val: PropTypes.string, onClick: PropTypes.func,\r\n };\r\n\r\n const TimeWithAddOnClock = React.forwardRef(({\r\n className: _className, val, onClick, ...remaining\r\n }, ref) => (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n ));\r\n\r\n TimeWithAddOnClock.propTypes = {\r\n className: PropTypes.string, val: PropTypes.string, onClick: PropTypes.func,\r\n };\r\n\r\n const [customInput, dateFormat, todayButton, showTimeSelect, showTimeSelectOnly] = useMemo(() => {\r\n let input = null;\r\n let format = 'yyyy/MM/dd HH:mm';\r\n let today = null;\r\n let timeSelect = true;\r\n let timeSelectOnly = false;\r\n\r\n switch (datatype) {\r\n case 'date':\r\n input = \r\n \r\n
\r\n \r\n \r\n {fieldLabel}\r\n {status?.errorMessage && *}\r\n \r\n {\r\n showHelpIcon && (\r\n {helpText}}\r\n >\r\n \r\n \r\n )\r\n }\r\n
\r\n );\r\n};\r\n\r\nFormikField.propTypes = {\r\n FieldName: PropTypes.string,\r\n helpText: PropTypes.string,\r\n inputType: PropTypes.string,\r\n showHelpIcon: PropTypes.bool,\r\n datatype: PropTypes.string,\r\n IsVisible: PropTypes.bool,\r\n IsDisabled: PropTypes.bool,\r\n name: PropTypes.string,\r\n fieldLabel: PropTypes.string,\r\n validateFigField: PropTypes.func,\r\n repeatableType: PropTypes.string,\r\n repeatableId: PropTypes.string,\r\n};\r\n\r\nexport default FormikField;\r\n","import React, { useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\nimport { useDispatch } from 'react-redux';\r\n\r\nimport FormikField from '@components/form/FormikField';\r\nimport { SortableHandle } from 'react-sortable-hoc';\r\n\r\nimport { setOpenHouseValidationResult, deleteOpenHouseValidationResult } from '@redux/modules/formGeneration';\r\n\r\nimport Card from 'react-bootstrap/Card';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nconst openHouseRules = window.FlexRule.RuntimeEngine.fromJavaScript('OnePlatform', 'OpenHouseRules');\r\n\r\nconst DragHandle = SortableHandle(() => );\r\n\r\nconst OpenHouseCard = ({\r\n file,\r\n sortIndex,\r\n fieldsList,\r\n}) => {\r\n const dispatch = useDispatch();\r\n const { values, setValues } = useFormikContext();\r\n const value = values?.OpenHouses[file.uid];\r\n\r\n // run after first render to hydrate default validation errors.\r\n useEffect(() => {\r\n const validateValue = value;\r\n const res = openHouseRules.run(validateValue);\r\n const { fieldValidationResult } = res.context.variableContainer; // results coming back.\r\n dispatch(setOpenHouseValidationResult(`${file.uid}`, fieldValidationResult)); // does set the validation result in redux according to name.\r\n }, []);\r\n\r\n const validateOpenHouseField = (FieldName, newValue) => {\r\n if (!value.IsDeleted) {\r\n const validateValue = value;\r\n validateValue[FieldName] = newValue;\r\n const res = openHouseRules.run(validateValue);\r\n const { fieldValidationResult } = res.context.variableContainer; // results coming back.\r\n dispatch(setOpenHouseValidationResult(`${file.uid}`, fieldValidationResult)); // does set the validation result in redux according to name.\r\n }\r\n };\r\n\r\n const handleDelete = () => {\r\n // update deleted entry\r\n const updated = {\r\n ...values.OpenHouses,\r\n [file.uid]: {\r\n ...file,\r\n IsDeleted: true,\r\n },\r\n };\r\n // recalculate sort order\r\n let index = 0;\r\n Object.entries(updated).forEach(([k]) => {\r\n if (!updated[k].IsDeleted) {\r\n updated[k].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n const newValues = values;\r\n newValues.OpenHouses = updated;\r\n // set formik state\r\n setValues(newValues);\r\n dispatch(deleteOpenHouseValidationResult(file.uid));\r\n };\r\n\r\n return (\r\n <>\r\n {status?.errorMessage}
}\r\n \r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst RepeatableOpenHouse = ({ fields, validateFigField, openHousesPayload }) => {\r\n const {\r\n values, setValues, setFieldValue,\r\n } = useFormikContext();\r\n\r\n const statusOpenHouseStatus = useSelector(state => selectStatusByName(state, 'OpenHouseStatus'));\r\n const statusOpenHouseDate = useSelector(state => selectStatusByName(state, 'OpenHouseDate'));\r\n const statusOpenHouseStartTime = useSelector(state => selectStatusByName(state, 'OpenHouseStartTime'));\r\n const statusOpenHouseEndTime = useSelector(state => selectStatusByName(state, 'OpenHouseEndTime'));\r\n const statusOpenHouseType = useSelector(state => selectStatusByName(state, 'OpenHouseType'));\r\n const statusOpenHouseURL = useSelector(state => selectStatusByName(state, 'OpenHouseURL'));\r\n\r\n const addClickCounter = useSelector(state => selectSectionAddClicksByName(state, 'OpenHouses'));\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const openHousesCount = sectionsPerRepeatableSection.OpenHouses.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.OpenHouses) {\r\n Object.entries(values.OpenHouses).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.OpenHouses]);\r\n\r\n const fieldsList = useMemo(() => {\r\n const array = [];\r\n fields.forEach(field => {\r\n if (whiteList.includes(field.FieldName)) {\r\n array.push(field);\r\n }\r\n });\r\n return array;\r\n }, [fields]);\r\n\r\n const buildFormikValues = () => {\r\n const newValues = {};\r\n let index = 0;\r\n openHousesPayload.sort((a, b) => a.SortOrder - b.SortOrder).forEach(entry => {\r\n const uid = uuidv4(); // keep this an unique string that cannot be converted to a number (prevents keys reordering)\r\n newValues[uid] = {\r\n uid,\r\n UniqueID: entry.UniqueID,\r\n OpenHouseDate: entry.OpenHouseDate,\r\n OpenHouseEndTime: entry.OpenHouseEndTime,\r\n OpenHouseStartTime: entry.OpenHouseStartTime,\r\n OpenHouseStatus: entry.OpenHouseStatus,\r\n OpenHouseRemarks: entry.OpenHouseRemarks,\r\n OpenHouseType: entry.OpenHouseType,\r\n Refreshments: entry.Refreshments,\r\n OpenHouseLiveURL: entry.OpenHouseLiveURL,\r\n SortOrder: entry.SortOrder,\r\n IsDeleted: entry.IsDeleted,\r\n IsLive: entry.IsLive,\r\n };\r\n // ensure correct sort order\r\n if (!entry.IsDeleted) {\r\n newValues[uid].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n return newValues;\r\n };\r\n\r\n useEffect(() => {\r\n if (openHousesPayload?.length) {\r\n const newValues = buildFormikValues();\r\n setFieldValue('OpenHouses', {\r\n ...values.OpenHouses,\r\n ...newValues,\r\n });\r\n }\r\n }, [openHousesPayload]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'Open Houses Exceeded',\r\n html: `The maximum number of open houses must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n const addOpenHouse = () => {\r\n if (openHousesCount + 1 > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n const uid = uuidv4();\r\n setValues({\r\n ...values,\r\n OpenHouses: {\r\n ...values.OpenHouses,\r\n [uid]: {\r\n uid,\r\n OpenHouseDate: '',\r\n OpenHouseEndTime: '',\r\n OpenHouseStartTime: '',\r\n OpenHouseStatus: '',\r\n OpenHouseRemarks: '',\r\n OpenHouseType: '',\r\n Refreshments: '',\r\n OpenHouseLiveURL: '',\r\n SortOrder: fileList.length + 1, // fileList excludes deleted entries\r\n IsDeleted: false,\r\n IsLive: false,\r\n },\r\n },\r\n });\r\n };\r\n\r\n // after sort ends derive new order, then set formik state\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n // preserve deleted entries - excluded from fileList\r\n Object.entries(values.OpenHouses).forEach(file => {\r\n if (file[1].IsDeleted) {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n },\r\n };\r\n }\r\n });\r\n setValues({\r\n ...values,\r\n OpenHouses: { ...newValues },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (addClickCounter) {\r\n addOpenHouse();\r\n }\r\n }, [addClickCounter]);\r\n\r\n return (\r\n <>\r\n { statusOpenHouseStatus?.errorMessage && {statusOpenHouseStatus.errorMessage}
}\r\n { statusOpenHouseDate?.errorMessage && {statusOpenHouseDate.errorMessage}
}\r\n { statusOpenHouseStartTime?.errorMessage && {statusOpenHouseStartTime.errorMessage}
}\r\n { statusOpenHouseEndTime?.errorMessage && {statusOpenHouseEndTime.errorMessage}
}\r\n { statusOpenHouseType?.errorMessage && {statusOpenHouseType.errorMessage}
}\r\n { statusOpenHouseURL?.errorMessage && {statusOpenHouseURL.errorMessage}
}\r\n \r\n
\r\n {(openHousesCount > MAX) && (\r\n
\r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst RepeatableParcels = ({ fields, validateFigField, parcelsPayload }) => {\r\n const { values, setValues, setFieldValue } = useFormikContext();\r\n const statusParcels = useSelector(state => selectStatusByName(state, 'Parcels'));\r\n const addClickCounter = useSelector(state => selectSectionAddClicksByName(state, 'Parcels'));\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const parcelsCount = sectionsPerRepeatableSection.Parcels.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.Parcels) {\r\n Object.entries(values.Parcels).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.Parcels]);\r\n\r\n const fieldsList = useMemo(() => {\r\n const array = [];\r\n fields.forEach(field => {\r\n if (whiteList.includes(field.FieldName)) {\r\n array.push(field);\r\n }\r\n });\r\n return array;\r\n }, [fields]);\r\n\r\n const buildFormikValues = () => {\r\n const newValues = {};\r\n let index = 0;\r\n parcelsPayload.sort((a, b) => a.SortOrder - b.SortOrder).forEach(entry => {\r\n const uid = uuidv4(); // keep this an unique string that cannot be converted to a number (prevents keys reordering)\r\n newValues[uid] = {\r\n uid,\r\n UniqueID: entry.UniqueID,\r\n TitleType: entry.TitleType,\r\n LandWestMeridian: entry.LandWestMeridian,\r\n LandTaxAmount: entry.LandTaxAmount,\r\n LandTownship: entry.LandTownship,\r\n LandSection: entry.LandSection,\r\n LandRange: entry.LandRange,\r\n LandQuarter: entry.LandQuarter,\r\n LandLincNumber: entry.LandLincNumber,\r\n LandAcres: entry.LandAcres,\r\n SortOrder: entry.SortOrder,\r\n IsDeleted: entry.IsDeleted,\r\n IsLive: entry.IsLive,\r\n };\r\n // ensure correct sort order\r\n if (!entry.IsDeleted) {\r\n newValues[uid].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n return newValues;\r\n };\r\n\r\n useEffect(() => {\r\n if (parcelsPayload?.length) {\r\n const newValues = buildFormikValues();\r\n setFieldValue('Parcels', {\r\n ...values.Parcels,\r\n ...newValues,\r\n });\r\n }\r\n }, [parcelsPayload]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'Parcels Exceeded',\r\n html: `The maximum number of parcels must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n const addParcel = () => {\r\n if (parcelsCount + 1 > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n const uid = uuidv4();\r\n setValues({\r\n ...values,\r\n Parcels: {\r\n ...values.Parcels,\r\n [uid]: {\r\n uid,\r\n TitleType: '',\r\n LandWestMeridian: '',\r\n LandTaxAmount: '',\r\n LandTownship: '',\r\n LandSection: '',\r\n LandRange: '',\r\n LandQuarter: '',\r\n LandLincNumber: '',\r\n LandAcres: '',\r\n SortOrder: fileList.length + 1, // fileList excludes deleted entries\r\n IsDeleted: false,\r\n IsLive: false,\r\n },\r\n },\r\n });\r\n };\r\n\r\n // after sort ends derive new order, then set formik state\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n // preserve deleted entries - excluded from fileList\r\n Object.entries(values.Parcels).forEach(file => {\r\n if (file[1].IsDeleted) {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n },\r\n };\r\n }\r\n });\r\n setValues({\r\n ...values,\r\n Parcels: { ...newValues },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (addClickCounter) {\r\n addParcel();\r\n }\r\n }, [addClickCounter]);\r\n\r\n return (\r\n <>\r\n { statusParcels?.errorMessage && {statusParcels.errorMessage}
}\r\n \r\n
\r\n {(parcelsCount > MAX) && (\r\n <>\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nRepeatableParcels.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func,\r\n parcelsPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n};\r\n\r\nexport default RepeatableParcels;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\nimport FormikField from '@components/form/FormikField';\r\nimport { SortableHandle } from 'react-sortable-hoc';\r\n\r\nimport Card from 'react-bootstrap/Card';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nconst DragHandle = SortableHandle(() => );\r\n\r\nconst DoorCard = ({\r\n file,\r\n sortIndex,\r\n validateFigField,\r\n fieldsList,\r\n}) => {\r\n const { values, setValues } = useFormikContext();\r\n const value = values?.Doors[file.uid];\r\n\r\n const handleDelete = () => {\r\n // update deleted entry\r\n const updated = {\r\n ...values.Doors,\r\n [file.uid]: {\r\n ...file,\r\n IsDeleted: true,\r\n },\r\n };\r\n // recalculate sort order\r\n let index = 0;\r\n Object.entries(updated).forEach(([k]) => {\r\n if (!updated[k].IsDeleted) {\r\n updated[k].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n // set formik state\r\n setValues({\r\n ...values,\r\n Doors: updated,\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst RepeatableDoors = ({ fields, validateFigField, doorsPayload }) => {\r\n const { values, setValues, setFieldValue } = useFormikContext();\r\n const statusDoors = useSelector(state => selectStatusByName(state, 'Doors'));\r\n const addClickCounter = useSelector(state => selectSectionAddClicksByName(state, 'Doors'));\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const doorsCount = sectionsPerRepeatableSection.Doors.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.Doors) {\r\n Object.entries(values.Doors).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.Doors]);\r\n\r\n const fieldsList = useMemo(() => {\r\n const array = [];\r\n fields.forEach(field => {\r\n if (whiteList.includes(field.FieldName)) {\r\n array.push(field);\r\n }\r\n });\r\n return array;\r\n }, [fields]);\r\n\r\n const buildFormikValues = () => {\r\n const newValues = {};\r\n let index = 0;\r\n doorsPayload.sort((a, b) => a.SortOrder - b.SortOrder).forEach(entry => {\r\n const uid = uuidv4(); // keep this an unique string that cannot be converted to a number (prevents keys reordering)\r\n newValues[uid] = {\r\n uid,\r\n UniqueID: entry.UniqueID,\r\n DoorDescription: entry.DoorDescription,\r\n DoorHeight: entry.DoorHeight,\r\n DoorType: entry.DoorType,\r\n DoorWeight: entry.DoorWeight,\r\n DoorWidth: entry.DoorWidth,\r\n NumberDoors: entry.NumberDoors,\r\n SortOrder: entry.SortOrder,\r\n IsDeleted: entry.IsDeleted,\r\n IsLive: entry.IsLive,\r\n };\r\n // ensure correct sort order\r\n if (!entry.IsDeleted) {\r\n newValues[uid].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n return newValues;\r\n };\r\n\r\n useEffect(() => {\r\n if (doorsPayload?.length) {\r\n const newValues = buildFormikValues();\r\n setFieldValue('Doors', {\r\n ...values.Doors,\r\n ...newValues,\r\n });\r\n }\r\n }, [doorsPayload]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'Doors Exceeded',\r\n html: `The maximum number of doors must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n const addDoor = () => {\r\n if (doorsCount + 1 > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n const uid = uuidv4();\r\n setValues({\r\n ...values,\r\n Doors: {\r\n ...values.Doors,\r\n [uid]: {\r\n uid,\r\n DoorDescription: '',\r\n DoorHeight: '',\r\n DoorType: '',\r\n DoorWeight: '',\r\n DoorWidth: '',\r\n NumberDoors: '',\r\n SortOrder: fileList.length + 1, // fileList excludes deleted entries\r\n IsDeleted: false,\r\n IsLive: false,\r\n },\r\n },\r\n });\r\n };\r\n\r\n // after sort ends derive new order, then set formik state\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n // preserve deleted entries - excluded from fileList\r\n Object.entries(values.Doors).forEach(file => {\r\n if (file[1].IsDeleted) {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n },\r\n };\r\n }\r\n });\r\n setValues({\r\n ...values,\r\n Doors: { ...newValues },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (addClickCounter) {\r\n addDoor();\r\n }\r\n }, [addClickCounter]);\r\n\r\n return (\r\n <>\r\n { statusDoors?.errorMessage && {statusDoors.errorMessage}
}\r\n \r\n
\r\n {(doorsCount > MAX) && (\r\n <>\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nRepeatableDoors.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func,\r\n doorsPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n};\r\n\r\nexport default RepeatableDoors;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\nimport FormikField from '@components/form/FormikField';\r\n\r\nimport { SortableHandle } from 'react-sortable-hoc';\r\n\r\nimport Card from 'react-bootstrap/Card';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nconst DragHandle = SortableHandle(() => );\r\n\r\nconst UnitCard = ({\r\n file,\r\n sortIndex,\r\n validateFigField,\r\n fieldsList,\r\n}) => {\r\n const { values, setValues } = useFormikContext();\r\n const value = values?.Units[file.uid];\r\n\r\n const handleDelete = () => {\r\n // update deleted entry\r\n const updated = {\r\n ...values.Units,\r\n [file.uid]: {\r\n ...file,\r\n IsDeleted: true,\r\n },\r\n };\r\n // recalculate sort order\r\n let index = 0;\r\n Object.entries(updated).forEach(([k]) => {\r\n if (!updated[k].IsDeleted) {\r\n updated[k].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n // set formik state\r\n setValues({\r\n ...values,\r\n Units: updated,\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst RepeatableUnits = ({ fields, validateFigField, unitsPayload }) => {\r\n const {\r\n values, setValues, setFieldValue,\r\n } = useFormikContext();\r\n\r\n const statusUnits = useSelector(state => selectStatusByName(state, 'Units'));\r\n const addClickCounter = useSelector(state => selectSectionAddClicksByName(state, 'Units'));\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const unitsCount = sectionsPerRepeatableSection.Units.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.Units) {\r\n Object.entries(values.Units).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.Units]);\r\n\r\n const fieldsList = useMemo(() => {\r\n const array = [];\r\n fields.forEach(field => {\r\n if (whiteList.includes(field.FieldName)) {\r\n array.push(field);\r\n }\r\n });\r\n return array;\r\n }, [fields]);\r\n\r\n const buildFormikValues = () => {\r\n const newValues = {};\r\n let index = 0;\r\n unitsPayload.sort((a, b) => a.SortOrder - b.SortOrder).forEach(entry => {\r\n const uid = uuidv4(); // keep this an unique string that cannot be converted to a number (prevents keys reordering)\r\n newValues[uid] = {\r\n uid,\r\n UniqueID: entry.UniqueID,\r\n UnitTypeType: entry.UnitTypeType,\r\n UnitTypeTotalRent: entry.UnitTypeTotalRent,\r\n UnitTypeDescription: entry.UnitTypeDescription,\r\n UnitTypeActualRent: entry.UnitTypeActualRent,\r\n UnitTypeUnitsTotal: entry.UnitTypeUnitsTotal,\r\n SortOrder: entry.SortOrder,\r\n IsDeleted: entry.IsDeleted,\r\n IsLive: entry.IsLive,\r\n };\r\n // ensure correct sort order\r\n if (!entry.IsDeleted) {\r\n newValues[uid].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n return newValues;\r\n };\r\n\r\n useEffect(() => {\r\n if (unitsPayload?.length) {\r\n const newValues = buildFormikValues();\r\n setFieldValue('Units', {\r\n ...values.Units,\r\n ...newValues,\r\n });\r\n }\r\n }, [unitsPayload]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'Units Exceeded',\r\n html: `The maximum number of units must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n const addUnit = () => {\r\n if (unitsCount + 1 > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n const uid = uuidv4();\r\n setValues({\r\n ...values,\r\n Units: {\r\n ...values.Units,\r\n [uid]: {\r\n uid,\r\n UnitTypeType: '',\r\n UnitTypeTotalRent: '',\r\n UnitTypeDescription: '',\r\n UnitTypeActualRent: '',\r\n UnitTypeUnitsTotal: '',\r\n SortOrder: fileList.length + 1, // fileList excludes deleted entries\r\n IsDeleted: false,\r\n IsLive: false,\r\n },\r\n },\r\n });\r\n };\r\n\r\n // after sort ends derive new order, then set formik state\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n // preserve deleted entries - excluded from fileList\r\n Object.entries(values.Units).forEach(file => {\r\n if (file[1].IsDeleted) {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n },\r\n };\r\n }\r\n });\r\n setValues({\r\n ...values,\r\n Units: { ...newValues },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (addClickCounter) {\r\n addUnit();\r\n }\r\n }, [addClickCounter]);\r\n\r\n return (\r\n <>\r\n { statusUnits?.errorMessage && {statusUnits.errorMessage}
}\r\n \r\n
\r\n {(unitsCount > MAX) && (\r\n <>\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nRepeatableUnits.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func,\r\n unitsPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n};\r\n\r\nexport default RepeatableUnits;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\nimport { SortableHandle } from 'react-sortable-hoc';\r\n\r\nimport FormikField from '@components/form/FormikField';\r\n\r\nimport Card from 'react-bootstrap/Card';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nconst DragHandle = SortableHandle(() => );\r\n\r\nconst HistoryCard = ({\r\n file,\r\n sortIndex,\r\n validateFigField,\r\n fieldsList,\r\n}) => {\r\n const { values, setValues } = useFormikContext();\r\n const value = values?.History[file.uid];\r\n\r\n const handleDelete = () => {\r\n // update deleted entry\r\n const updated = {\r\n ...values.History,\r\n [file.uid]: {\r\n ...file,\r\n IsDeleted: true,\r\n },\r\n };\r\n // recalculate sort order\r\n let index = 0;\r\n Object.entries(updated).forEach(([k]) => {\r\n if (!updated[k].IsDeleted) {\r\n updated[k].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n // set formik state\r\n setValues({\r\n ...values,\r\n History: updated,\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst RepeatableHistory = ({ fields, validateFigField, historyPayload }) => {\r\n const {\r\n values, setValues, setFieldValue,\r\n } = useFormikContext();\r\n\r\n const statusHistory = useSelector(state => selectStatusByName(state, 'History'));\r\n const addClickCounter = useSelector(state => selectSectionAddClicksByName(state, 'History'));\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const historyCount = sectionsPerRepeatableSection.History.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.History) {\r\n Object.entries(values.History).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.History]);\r\n\r\n const fieldsList = useMemo(() => {\r\n const array = [];\r\n fields.forEach(field => {\r\n if (whiteList.includes(field.FieldName)) {\r\n array.push(field);\r\n }\r\n });\r\n return array;\r\n }, [fields]);\r\n\r\n const buildFormikValues = () => {\r\n const newValues = {};\r\n let index = 0;\r\n historyPayload.sort((a, b) => a.SortOrder - b.SortOrder).forEach(entry => {\r\n const uid = uuidv4(); // keep this an unique string that cannot be converted to a number (prevents keys reordering)\r\n newValues[uid] = {\r\n uid,\r\n UniqueID: entry.UniqueID,\r\n OriginatingSystemTimestamp: entry.OriginatingSystemTimestamp,\r\n EffectiveDate: entry.EffectiveDate,\r\n MlsChangeType: entry.MlsChangeType,\r\n PreviousValue: entry.PreviousValue,\r\n NewValue: entry.NewValue,\r\n DOM: entry.DOM,\r\n SortOrder: entry.SortOrder,\r\n IsDeleted: entry.IsDeleted,\r\n IsLive: entry.IsLive,\r\n };\r\n // ensure correct sort order\r\n if (!entry.IsDeleted) {\r\n newValues[uid].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n return newValues;\r\n };\r\n\r\n useEffect(() => {\r\n if (historyPayload?.length) {\r\n const newValues = buildFormikValues();\r\n setFieldValue('History', {\r\n ...values.History,\r\n ...newValues,\r\n });\r\n }\r\n }, [historyPayload]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'History Exceeded',\r\n html: `The maximum number of history must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n const addHistory = () => {\r\n if (historyCount + 1 > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n const uid = uuidv4();\r\n setValues({\r\n ...values,\r\n History: {\r\n ...values.History,\r\n [uid]: {\r\n uid,\r\n OriginatingSystemTimestamp: '',\r\n EffectiveDate: '',\r\n MlsChangeType: '',\r\n PreviousValue: '',\r\n NewValue: '',\r\n DOM: '',\r\n SortOrder: fileList.length + 1, // fileList excludes deleted entries\r\n IsDeleted: false,\r\n IsLive: false,\r\n },\r\n },\r\n });\r\n };\r\n\r\n // after sort ends derive new order, then set formik state\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n // preserve deleted entries - excluded from fileList\r\n Object.entries(values.History).forEach(file => {\r\n if (file[1].IsDeleted) {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n },\r\n };\r\n }\r\n });\r\n setValues({\r\n ...values,\r\n History: { ...newValues },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (addClickCounter) {\r\n addHistory();\r\n }\r\n }, [addClickCounter]);\r\n\r\n return (\r\n <>\r\n { statusHistory?.errorMessage && {statusHistory.errorMessage}
}\r\n \r\n
\r\n {(historyCount > MAX) && (\r\n <>\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nRepeatableHistory.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func,\r\n historyPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n};\r\n\r\nexport default RepeatableHistory;\r\n","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n selectListingSelectedDoors,\r\n selectListingSelectedHistory,\r\n selectListingSelectedOpenHouses,\r\n selectListingSelectedParcels,\r\n selectListingSelectedPhotos,\r\n selectListingSelectedRooms,\r\n selectListingSelectedSupplements,\r\n selectListingSelectedUnits,\r\n} from '@redux/selectors/ListingSelector';\r\nimport { selectAgentPhotos } from '@redux/selectors/AgentSelector';\r\nimport Address from './Address';\r\nimport AgentLookup from './agentLookup/AgentLookup';\r\nimport LocationPlotter from './locationPlotter/LocationPlotter';\r\nimport OfficeLookup from './officeLookup/OfficeLookup';\r\nimport OneDMeasurement from './OneDMeasurement';\r\nimport TwoDMeasurement from './TwoDMeasurement';\r\nimport SupplementGrid from './supplements/SupplementGrid';\r\nimport ImageCropper from '../imageCropper/ImageCropper';\r\nimport RepeatableRoom from '../repeatableRoom/RepeatableRoom';\r\nimport RepeatableOpenHouse from './openHouse/RepeatableOpenHouse';\r\nimport RepeatableParcels from './parcels/RepeatableParcels';\r\nimport RepeatableDoors from './doors/RepeatableDoors';\r\nimport RepeatableUnits from './units/RepeatableUnits';\r\nimport RepeatableHistory from './history/RepeatableHistory';\r\n\r\n// TODO: In the future, test this component alongside with https://github.com/welldone-software/why-did-you-render\r\nconst LayoutGroupWrapper = ({ groupType, resourceType = 'listing', ...props }) => {\r\n let photosPayload;\r\n\r\n const listingPhotos = useSelector(selectListingSelectedPhotos);\r\n const agentPhotos = useSelector(selectAgentPhotos);\r\n if (resourceType === 'listing') photosPayload = listingPhotos;\r\n else photosPayload = agentPhotos;\r\n\r\n const supplementsPayload = useSelector(selectListingSelectedSupplements);\r\n const roomsPayload = useSelector(selectListingSelectedRooms);\r\n const parcelsPayload = useSelector(selectListingSelectedParcels);\r\n const unitsPayload = useSelector(selectListingSelectedUnits);\r\n const doorsPayload = useSelector(selectListingSelectedDoors);\r\n const openHousesPayload = useSelector(selectListingSelectedOpenHouses);\r\n const historyPayload = useSelector(selectListingSelectedHistory);\r\n\r\n switch (groupType) {\r\n case 'Address':\r\n return ;\r\n case 'AgentLookup':\r\n return
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nOfficeLookupActionButtons.propTypes = {\r\n currRow: PropTypes.shape({\r\n UniqueID: PropTypes.number,\r\n }),\r\n officeSelected: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default OfficeLookupActionButtons;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory from 'react-bootstrap-table2-paginator';\r\n\r\nimport OfficeLookupActionButtons from '@components/table/actionButtons/OfficeLookupActionButtons';\r\nimport Button from '@components/smartAdminUI/Button';\r\n\r\nconst OfficeLookupTable = ({\r\n displayData,\r\n onOfficeSelect,\r\n isModal = false,\r\n}) => {\r\n const officeSelected = row => onOfficeSelect(row);\r\n\r\n const actionsFormatter = (cell, row) => (\r\n \r\n {\r\n options.map(option => {\r\n const isSelect = currSizePerPage === `${option.page}`;\r\n return (\r\n onSizePerPageChange(option.page)}\r\n >\r\n {option.text}\r\n \r\n );\r\n })\r\n }\r\n
\r\n );\r\n\r\n const customTotal = (from, to, size) => (\r\n \r\n \r\n {`Showing rows ${from} to ${to} of ${size}`}\r\n \r\n );\r\n\r\n const options = {\r\n firstPageText: '<<',\r\n hidePageListOnlyOnePage: true,\r\n lastPageText: '>>',\r\n nextPageText: '>',\r\n paginationTotalRenderer: customTotal,\r\n prePageText: '<',\r\n showTotal: true,\r\n sizePerPageList: [],\r\n sizePerPage: isModal ? 5 : 10,\r\n sizePerPageRenderer,\r\n };\r\n\r\n return (\r\n - \r\n {(isFormDataLoaded) ? errors.map(item => (\r\n
\r\n
\r\n );\r\n};\r\n\r\nRowLockMessage.propTypes = {\r\n rowLockEntity: PropTypes.shape({\r\n type: PropTypes.string,\r\n id: PropTypes.number,\r\n }),\r\n message: PropTypes.string,\r\n lockedBy: PropTypes.string,\r\n lockedByMe: PropTypes.bool,\r\n checkStatus: PropTypes.func,\r\n onTakeover: PropTypes.func,\r\n onDiscard: PropTypes.func,\r\n displayActions: PropTypes.bool,\r\n lastUpdatedOn: PropTypes.string,\r\n lastCheckedOn: PropTypes.number,\r\n isAutoSave: PropTypes.bool,\r\n};\r\n\r\nexport default RowLockMessage;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Alert from 'react-bootstrap/Alert';\r\n\r\nconst RowLockOwnerMessage = ({\r\n onRemoveLock = () => null,\r\n}) => (\r\n \r\n \r\n {rowLockEntity && \r\n
\r\n {`${rowLockEntity.type.charAt(0).toUpperCase() + rowLockEntity.type.slice(1)} [${rowLockEntity.id}]`}
}\r\n\r\n \r\n {message || (isAutoSave\r\n ? 'There is auto-save data available.'\r\n : `This entity is locked by ${lockedBy}.`)}\r\n
\r\n {!isAutoSave && lastUpdate && timeElapsedMessage &&{`The lock was last updated on ${lastUpdate.toLocaleString()} (${timeElapsedMessage}).`}
}\r\n {displayActions && canTakeAction && (\r\n <>\r\n {isAutoSave\r\n ?Do you wish to use the available auto-save data?
\r\n :Do you wish to take over and create a new lock, or remove the existing lock?
}\r\n \r\n \r\n \r\n )}\r\n\r\n
\r\n);\r\n\r\nRowLockOwnerMessage.propTypes = {\r\n onRemoveLock: PropTypes.func,\r\n};\r\n\r\nexport default RowLockOwnerMessage;\r\n","import {\r\n useEffect, useMemo, useState, useCallback,\r\n} from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n checkRowLock,\r\n createRowLock,\r\n pingRowLock,\r\n removeRowLock,\r\n setRowLockCurrentUser,\r\n setRowLockEntity,\r\n setRowLockCallback,\r\n takeoverRowLock,\r\n} from '@redux/modules/rowLock';\r\n\r\nimport {\r\n selectLockRequiresCheck,\r\n selectLocked,\r\n selectLockedBy,\r\n selectLockedByMe,\r\n selectLastUpdatedOn,\r\n selectLastCheckedOn,\r\n selectCreatedWithinSession,\r\n selectError,\r\n selectClareityUrl,\r\n} from '@redux/selectors/RowLockSelector';\r\n\r\nimport {\r\n getUserName,\r\n getUserId,\r\n getUserIdleStatus,\r\n} from '@redux/selectors/UserSelector';\r\nimport { getImpersonationStatus } from '@redux/selectors/ImpersonationSelector';\r\n\r\nimport { isValidEntity } from '@utils/rowLock';\r\nimport useInterval from '@hooks/useInterval';\r\nimport useRowChecked from '@hooks/useRowChecked';\r\nimport LockMessage from '@components/rowLock/RowLockMessage';\r\nimport LockOwnerMessage from '@components/rowLock/RowLockOwnerMessage';\r\n\r\n/* Validates hook props using PropTypes.checkPropTypes. */\r\nconst validateProps = props => {\r\n const propTypes = {\r\n rowLockEntity: PropTypes.shape({\r\n type: PropTypes.string,\r\n id: PropTypes.number,\r\n }),\r\n isEditOperation: PropTypes.bool,\r\n enableAutomation: PropTypes.bool,\r\n redirectOnLocked: PropTypes.bool,\r\n enableRowLocking: PropTypes.bool,\r\n };\r\n\r\n PropTypes.checkPropTypes(propTypes, props, 'prop', 'useRowLock');\r\n};\r\n\r\nconst useRowLock = props => {\r\n const {\r\n rowLockEntity = null, // the entity which the hook will be initialized with;\r\n isEditOperation = false, // specifies if the hook is used within an edit page;\r\n enableAutomation = true, // specifies if automations (e.g. intervals) should be ON for this hook;\r\n enableRowLocking = true, // specifies if the row-locking should currently be enabled;\r\n redirectOnLocked = false, // specifies if the user should be redirected to a dedicated page if the entity is locked\r\n } = props;\r\n\r\n validateProps(props);\r\n\r\n const [entity, setEntity] = useState(enableRowLocking && isValidEntity(rowLockEntity) ? rowLockEntity : null);\r\n const [lockCallback, setLockCallback] = useState(null);\r\n const checked = useRowChecked(entity);\r\n\r\n const history = useHistory(); // use for redirection\r\n\r\n const dispatch = useDispatch();\r\n const locked = useSelector(selectLocked);\r\n const lockedBy = useSelector(selectLockedBy);\r\n const lockedByMe = useSelector(selectLockedByMe);\r\n const lockCreatedWithinSession = useSelector(selectCreatedWithinSession);\r\n const lockRequiresCheck = useSelector(selectLockRequiresCheck);\r\n const lastUpdatedOn = useSelector(selectLastUpdatedOn);\r\n const lastCheckedOn = useSelector(selectLastCheckedOn);\r\n const isError = useSelector(selectError);\r\n const clareityUrl = useSelector(selectClareityUrl);\r\n\r\n const isErrorOrUnknownStatus = isError || lockRequiresCheck || !!clareityUrl;\r\n const lockedByMeWithinSession = lockedByMe && lockCreatedWithinSession;\r\n const lockingAuthorized = !locked || lockedByMeWithinSession;\r\n\r\n const realUserName = useSelector(getUserName);\r\n const realUserId = useSelector(getUserId);\r\n const isIdle = useSelector(getUserIdleStatus);\r\n const impersonationStatus = useSelector(getImpersonationStatus);\r\n\r\n const currentUser = useMemo(() => (impersonationStatus?.ImpersonationActive\r\n ? { userName: impersonationStatus.memberFullName, userId: impersonationStatus.memberUniqueID }\r\n : { userName: realUserName, userId: realUserId }\r\n ), [realUserName, realUserId, impersonationStatus]);\r\n\r\n const authChecked = useSelector(({ authentication }) => authentication.authChecked);\r\n const isLoadingAuth = useSelector(({ authentication }) => authentication.isLoadingAuth);\r\n const isAuthenticated = useSelector(({ authentication }) => authentication.isAuthenticated);\r\n const isAuthCloseToExpiry = useSelector(({ authentication }) => authentication.isAuthCloseToExpiry);\r\n\r\n const rowLockIntervalsEnabled = enableRowLocking && enableAutomation && !isIdle && authChecked && isAuthenticated && !isLoadingAuth && !isAuthCloseToExpiry;\r\n\r\n /* Save current user to redux store. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n dispatch(setRowLockCurrentUser(currentUser));\r\n }, [currentUser]);\r\n\r\n const initializeEntity = (newEntity, callback) => {\r\n if (!enableRowLocking) return;\r\n setLockCallback(null);\r\n if (!isValidEntity(newEntity)) return;\r\n setEntity(newEntity);\r\n dispatch(setRowLockEntity(newEntity)).then(() => callback && setLockCallback(() => callback));\r\n };\r\n\r\n /* Make sure to re-initialize the local entity when a new rowLock entity is being passed. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n initializeEntity(rowLockEntity);\r\n }, [rowLockEntity]);\r\n\r\n const checkStatus = useCallback(callback => {\r\n if (!enableRowLocking) return;\r\n if (!isValidEntity(entity)) return;\r\n dispatch(checkRowLock(entity)).then(() => callback && setLockCallback(() => callback));\r\n }, [entity]);\r\n\r\n const createLock = useCallback(async callback => {\r\n let created;\r\n\r\n if (!enableRowLocking) return null;\r\n if (!isValidEntity(entity)) return null;\r\n\r\n try {\r\n created = await dispatch(createRowLock(entity));\r\n if (created && callback) setLockCallback(() => callback);\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: RowLock createLock', err);\r\n }\r\n\r\n return created;\r\n }, [entity]);\r\n\r\n const pingLock = useCallback(() => {\r\n if (!enableRowLocking) return;\r\n if (!isValidEntity(entity)) return;\r\n dispatch(pingRowLock(entity));\r\n }, [entity]);\r\n\r\n const removeLock = useCallback(() => {\r\n if (!enableRowLocking) return;\r\n if (!isValidEntity(entity)) return;\r\n dispatch(removeRowLock(entity));\r\n }, [entity]);\r\n\r\n const takeoverLock = useCallback(callback => {\r\n if (!enableRowLocking) return;\r\n if (!isValidEntity(entity)) return;\r\n dispatch(takeoverRowLock(entity)).then(() => callback && setLockCallback(() => callback));\r\n }, [entity]);\r\n\r\n /* It is not very clear at this point what \"Discard Changes\" action should do behind the scenes, so for now\r\n it will just take over existing lock and remove it (remove is only allowed for the owner of the lock).\r\n This approach should also assist in removing any hanging locks. */\r\n const discardChanges = useCallback(() => {\r\n if (!enableRowLocking) return;\r\n if (!isValidEntity(entity)) return;\r\n dispatch(takeoverRowLock(entity)).then(() => dispatch(removeRowLock(entity)));\r\n }, [entity]);\r\n\r\n /* Redirect the user to the Clareity URL when this is being returned by the api, and the user is not on an edit page.\r\n This is meant to be a temporary solution until a middleware will automatically deal with this url. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n if (clareityUrl && !isEditOperation && checked) {\r\n window.location.href = clareityUrl;\r\n }\r\n }, [clareityUrl, isEditOperation, checked]);\r\n\r\n /* Re-trigger the lock check action if that is required (due to receiving a 'FAILURE' type). */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n if (lockRequiresCheck && checked && !isError) {\r\n checkStatus();\r\n }\r\n }, [lockRequiresCheck, checked, isError]);\r\n\r\n /* Check if there is any callback action waiting to be fired. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n if (lockCallback && checked && !isErrorOrUnknownStatus && lockedByMeWithinSession) {\r\n lockCallback();\r\n setLockCallback(null);\r\n }\r\n }, [lockCallback && checked, isErrorOrUnknownStatus, lockedByMeWithinSession]);\r\n\r\n /* Remove any saved callback actions if the user is not entitled to fire it yet. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n if (lockCallback && checked && !isErrorOrUnknownStatus && locked && !lockedByMeWithinSession) {\r\n setLockCallback(null);\r\n }\r\n }, [lockCallback, checked, isErrorOrUnknownStatus, locked, lockedByMeWithinSession]);\r\n\r\n /* Redirect the user to the RowLock page if the entity is locked. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n if (redirectOnLocked && checked && !isErrorOrUnknownStatus && locked && !lockedByMeWithinSession) {\r\n if (lockCallback) {\r\n // Save callback to redux store, from where it will be picked up by the rowLock page.\r\n dispatch(setRowLockCallback(lockCallback));\r\n }\r\n history.push(`/rowLock/${entity.type}/${entity.id}`);\r\n }\r\n }, [redirectOnLocked, checked, isErrorOrUnknownStatus, locked, lockedByMeWithinSession, lockCallback, entity]);\r\n\r\n /* If the lock belongs to the current user, then start to regularly ping the lock for heartbeat purposes. */\r\n useInterval(pingLock, rowLockIntervalsEnabled && isEditOperation && checked && !isErrorOrUnknownStatus && lockedByMeWithinSession ? (1000 * 60 * 5) : null);\r\n\r\n /* If the entity is locked, then start to regularly check for any lock status changes. */\r\n useInterval(checkStatus, rowLockIntervalsEnabled && checked && !isErrorOrUnknownStatus && locked ? (1000 * 60) : null);\r\n\r\n return {\r\n rowLockingEnabled: enableRowLocking && isValidEntity(entity),\r\n entity,\r\n checked,\r\n lockingAuthorized: checked ? lockingAuthorized : false,\r\n locked: checked ? locked : false,\r\n lockedBy: checked ? lockedBy : null,\r\n lockedByMe: checked ? lockedByMe : false,\r\n lastUpdatedOn: checked ? lastUpdatedOn : null,\r\n lastCheckedOn: checked ? lastCheckedOn : null,\r\n initializeEntity,\r\n checkStatus,\r\n createLock,\r\n pingLock,\r\n removeLock,\r\n takeoverLock,\r\n discardChanges,\r\n LockMessage,\r\n LockOwnerMessage,\r\n };\r\n};\r\n\r\nexport default useRowLock;\r\n","import { useEffect, useRef } from 'react';\r\n\r\nconst useIsMounted = () => {\r\n const isMountedRef = useRef(false);\r\n\r\n useEffect(() => {\r\n isMountedRef.current = true;\r\n return () => {\r\n isMountedRef.current = false;\r\n };\r\n });\r\n\r\n return isMountedRef.current;\r\n};\r\n\r\nexport default useIsMounted;\r\n","/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport React, {\r\n useEffect, useMemo, useRef, useState,\r\n} from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Formik, Form } from 'formik';\r\nimport { useRollbar, useRollbarPerson } from '@rollbar/react';\r\n\r\nimport Swal from 'sweetalert2/src/sweetalert2';\r\nimport Tab from 'react-bootstrap/Tab';\r\nimport Row from 'react-bootstrap/Row';\r\nimport Col from 'react-bootstrap/Col';\r\nimport LinearProgress from '@mui/material/LinearProgress';\r\n\r\nimport apiService from '@services/apiService';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport FormSearchBar from '@components/form/formComponents/formSearch/FormSearchBar';\r\nimport FormLoader from '@components/loaders/FormLoader';\r\nimport FieldValidator from '@components/form/formHelpers/FieldValidator';\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\nimport FormikFieldUpdater from '@components/form/formHelpers/FormikFieldUpdater';\r\nimport LayoutGroupWrapper from '@components/form/formComponents/inputGroups/LayoutGroupWrapper';\r\nimport OfficeLookupModal from '@components/form/formComponents/inputGroups/officeLookup/OfficeLookupModal';\r\nimport RepeatableRoom from '@components/form/formComponents/repeatableRoom/RepeatableRoom';\r\nimport OnSubmitValidationError from '@components/form/formikComponents/OnSubmitValidationError';\r\n\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nimport {\r\n getSortedErrors,\r\n selectComboValueDict,\r\n selectFormDefinition,\r\n selectInitialTouched,\r\n selectInitialValues,\r\n selectLookupNames,\r\n selectVisiblePageStructure,\r\n selectAllFields,\r\n getOrderedSections,\r\n selectErrorsPerSection,\r\n selectRequiredPerSection,\r\n} from '@redux/selectors/FormSelector';\r\n\r\nimport {\r\n selectSectionsPerRepeatableSection,\r\n} from '@redux/selectors/ListingSelector';\r\n\r\nimport { getUserName, getUserMlsId } from '@redux/selectors/UserSelector';\r\nimport { selectPhotoQueueLength, selectPhotoMetaCollection } from '@redux/selectors/PhotoSelector';\r\nimport { selectAgentFormData } from '@redux/selectors/FormDataSelector';\r\n\r\nimport {\r\n formSubmitted,\r\n loadComboBoxOptions,\r\n setValidationResult,\r\n} from '@redux/modules/formGeneration';\r\n\r\nimport { clearAgent } from '@redux/modules/agent';\r\n\r\nimport SectionNav from '@components/smartAdminUI/SectionNav';\r\n\r\nimport useRowLock from '@hooks/useRowLock';\r\nimport usePrevious from '@hooks/usePrevious';\r\nimport useIsMounted from '@hooks/useIsMounted';\r\n\r\nimport Badge from '@components/smartAdminUI/Badge';\r\nimport FormikField from '@components/form/FormikField';\r\n\r\nconst CreateAgentForm = () => {\r\n const dispatch = useDispatch();\r\n const isMounted = useIsMounted();\r\n const formRef = useRef();\r\n const history = useHistory(); // use for redirection\r\n\r\n const agentRules = window.FlexRule.RuntimeEngine.fromJavaScript('OnePlatform', 'AgentRules');\r\n\r\n const photoQueueLength = useSelector(selectPhotoQueueLength);\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const orderedSections = useSelector(getOrderedSections);\r\n const errPerSection = useSelector(selectErrorsPerSection);\r\n const reqPerSection = useSelector(selectRequiredPerSection);\r\n const agentSelected = useSelector(state => state.agent.agentSelected);\r\n const agentDataSelect = useSelector(selectAgentFormData);\r\n const definitionType = useSelector(state => state.formGeneration.definitionType);\r\n const formIsLoading = useSelector(state => state.formGeneration.formIsLoading);\r\n const officeLookup = useSelector(state => state.office.officeLookup);\r\n const operationType = useSelector(state => state.formGeneration.operationType);\r\n const previousOperationType = usePrevious(operationType);\r\n const comboSetValueDict = useSelector(selectComboValueDict);\r\n const currentFormDefinition = useSelector(selectFormDefinition);\r\n const lookUpNames = useSelector(selectLookupNames);\r\n const initialTouched = useSelector(selectInitialTouched);\r\n const initialValues = useSelector(selectInitialValues);\r\n const pageStructure = useSelector(selectVisiblePageStructure);\r\n const allFields = useSelector(selectAllFields);\r\n const photoMeta = useSelector(selectPhotoMetaCollection);\r\n const sortedErrors = useSelector(getSortedErrors);\r\n\r\n const [formSubmitting, setFormSubmitting] = useState(false);\r\n const [newComboValue, setNewComboValue] = useState({});\r\n const [runValidation, setRunValidation] = useState(false);\r\n const [validateFieldName, setValidateFieldName] = useState('');\r\n const [validateFlag, setValidateFlag] = useState(false);\r\n const [validationValue, setValidationValue] = useState('');\r\n const [progress, setProgress] = useState(((1 / orderedSections.length) * 100));\r\n const [activeSection, setActiveSection] = useState(1);\r\n\r\n const memoizedInitialValues = useMemo(() => initialValues, []);\r\n const agentFormData = useMemo(() => agentDataSelect, [agentDataSelect]);\r\n const comboBubbleWrap = { setNewComboValue };\r\n\r\n const photosAreQueued = useMemo(() => {\r\n if (photoQueueLength > 0) return true;\r\n return false;\r\n }, [photoQueueLength]);\r\n\r\n const rowLockEntity = useMemo(() => ({ type: 'agent', id: agentSelected?.UniqueID }), [agentSelected]);\r\n const gaEventTracker = GAEventTracking('Error Agent Form Submit');\r\n const username = useSelector(getUserName);\r\n const userMLSID = useSelector(getUserMlsId);\r\n\r\n const rollbar = useRollbar();\r\n useRollbarPerson({ id: userMLSID, username });\r\n\r\n const {\r\n lockingAuthorized,\r\n locked,\r\n lockedBy,\r\n checked,\r\n checkStatus,\r\n createLock,\r\n removeLock,\r\n rowLockingEnabled,\r\n } = useRowLock({ rowLockEntity, isEditOperation: operationType === 'edit', enableRowLocking: operationType === 'edit' });\r\n\r\n const lockReleasedByCurrentUser = useRef(false);\r\n\r\n useEffect(() => {\r\n if (!currentFormDefinition?.length) return;\r\n\r\n if (lookUpNames?.lookupNames?.length) {\r\n dispatch(loadComboBoxOptions(lookUpNames, 'agents'));\r\n }\r\n\r\n formRef?.current?.validateForm();\r\n }, [currentFormDefinition]);\r\n\r\n useEffect(() => {\r\n // prevent the execution of this effect when going from edit mode to create mode;\r\n // current component will not be un-mounted yet when [operationType] gets updated in redux.\r\n if (previousOperationType === 'edit' && operationType === 'create') return;\r\n\r\n if (operationType === 'create') {\r\n dispatch(clearAgent());\r\n formRef?.current?.resetForm();\r\n setRunValidation(true);\r\n }\r\n }, [operationType]);\r\n\r\n useEffect(() => {\r\n if (Object.keys(newComboValue).length > 0) {\r\n const newComboKeys = Object.keys(newComboValue);\r\n if (comboSetValueDict) {\r\n if (newComboKeys.length > 0) {\r\n const { fieldName, newValue } = newComboValue;\r\n const comboMutator = comboSetValueDict[fieldName];\r\n comboMutator(newValue);\r\n }\r\n }\r\n }\r\n }, [newComboValue]);\r\n\r\n const getPhotoDeltas = (formikPhoto, unmodifiedEntry) => {\r\n const deltas = {};\r\n if (!formikPhoto) return deltas;\r\n if (formikPhoto.IsDeleted !== unmodifiedEntry.flexMeta.IsDeleted) deltas.IsDeleted = formikPhoto.IsDeleted;\r\n if (formikPhoto.Description !== unmodifiedEntry.flexMeta.Description) deltas.Description = formikPhoto.Description;\r\n if (formikPhoto.SortOrder !== unmodifiedEntry.flexMeta.SortOrder) deltas.SortOrder = formikPhoto.SortOrder;\r\n return deltas;\r\n };\r\n\r\n const mergePhotoData = (formikState, photoMetaCollection = []) => {\r\n if (!photoMetaCollection) return [];\r\n const mergedPhotos = photoMetaCollection.map(image => {\r\n const isError = image.IsError;\r\n if (image.flexMeta?.UniqueID) { // image exists in flexRule DB\r\n // Handle existing photo.\r\n const { SortOrder, IsDeleted } = formikState[image.key];\r\n if (IsDeleted) {\r\n // Mark photo as deleted.\r\n return {\r\n UniqueID: image.flexMeta.UniqueID,\r\n SortOrder: image.SortOrder,\r\n IsDeleted,\r\n };\r\n }\r\n if (isError && !IsDeleted) {\r\n // do not calculate deltas\r\n return {\r\n UniqueID: image.flexMeta.UniqueID,\r\n SortOrder,\r\n IsDeleted,\r\n };\r\n }\r\n // Update photo.\r\n //\r\n const deltas = getPhotoDeltas(formikState[image.key], image);\r\n return {\r\n ...deltas,\r\n UniqueID: image.flexMeta.UniqueID,\r\n SortOrder,\r\n IsDeleted,\r\n };\r\n }\r\n // Handle new photo.\r\n if (isError) return null;\r\n const {\r\n URL,\r\n Description,\r\n SortOrder,\r\n IsDeleted,\r\n } = formikState[image.key];\r\n\r\n return {\r\n URL,\r\n Description,\r\n SortOrder,\r\n IsDeleted,\r\n };\r\n }).filter(photo => photo !== null);\r\n // eslint-disable-next-line no-return-assign, no-param-reassign\r\n mergedPhotos.filter(p => !p.IsDeleted).sort((p1, p2) => p1.SortOrder - p2.SortOrder).forEach((photo, index) => photo.SortOrder = index + 1);\r\n return mergedPhotos;\r\n };\r\n\r\n const convertDateToUTC = date => new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());\r\n\r\n const getDateValue = value => {\r\n let formattedDate;\r\n if (value) {\r\n const dateUTC = convertDateToUTC(new Date(value));\r\n const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(dateUTC);\r\n const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(dateUTC);\r\n const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(dateUTC);\r\n formattedDate = `${year}-${month}-${day}`;\r\n }\r\n return formattedDate ?? '';\r\n };\r\n\r\n const getBitValue = value => {\r\n let bitValue;\r\n if (value != null && value !== '') {\r\n if (typeof value === 'string') {\r\n bitValue = value === 'true' ? 1 : 0;\r\n } else if (typeof value === 'boolean') {\r\n bitValue = value === true ? 1 : 0;\r\n } else if (typeof value === 'number') {\r\n bitValue = value;\r\n }\r\n }\r\n return bitValue ?? '';\r\n };\r\n\r\n const getStringValue = value => value ?? '';\r\n\r\n const getNumericValue = value => (value != null && value !== '' ? Number(value) : '');\r\n\r\n const getComboBoxValue = value => value ?? '';\r\n\r\n // TODO: move to utility module (used by listing/agent/office)\r\n const valueHasChanged = (fieldName, oldValue, newValue) => {\r\n const inputType = allFields[fieldName]?.InputType;\r\n const dataType = allFields[fieldName]?.DataType;\r\n switch (inputType) {\r\n case 'TextInput':\r\n if (dataType === 'datetime' || dataType === 'date') {\r\n return (getDateValue(oldValue) !== getDateValue(newValue));\r\n }\r\n if (dataType === 'bit') {\r\n return (getBitValue(oldValue) !== getBitValue(newValue));\r\n }\r\n if (dataType === 'string') {\r\n return (getStringValue(oldValue) !== getStringValue(newValue));\r\n }\r\n if (dataType === 'numeric' || dataType === 'decimal' || dataType === 'integer') {\r\n return (getNumericValue(oldValue) !== getNumericValue(newValue));\r\n }\r\n return (oldValue !== newValue);\r\n\r\n case 'ComboBox':\r\n return (getComboBoxValue(oldValue) !== getComboBoxValue(newValue));\r\n\r\n default:\r\n return (oldValue !== newValue);\r\n }\r\n };\r\n\r\n const handlePreviousClick = () => {\r\n const tabNav = document.querySelector('.tab-nav');\r\n const tabActive = tabNav.querySelector('.active');\r\n if (tabActive) {\r\n const navItem = tabActive.parentNode;\r\n const previous = navItem.previousElementSibling;\r\n if (previous) {\r\n previous.querySelector('a').click();\r\n window.scrollTo(0, 0);\r\n setProgress(progress - ((1 / orderedSections.length) * 100));\r\n setActiveSection(activeSection - 1);\r\n }\r\n }\r\n };\r\n\r\n const handleNextClick = () => {\r\n const tabNav = document.querySelector('.tab-nav');\r\n const tabActive = tabNav.querySelector('.active');\r\n if (tabActive) {\r\n const navItem = tabActive.parentNode;\r\n const next = navItem.nextElementSibling;\r\n if (next) {\r\n next.querySelector('a').click();\r\n window.scrollTo(0, 0);\r\n setProgress(progress + ((1 / orderedSections.length) * 100));\r\n setActiveSection(activeSection + 1);\r\n }\r\n }\r\n };\r\n\r\n const handleSubmit = async (values, { setSubmitting }) => {\r\n if (!(operationType === 'create') && !(operationType === 'edit')) return;\r\n\r\n let uniqueID;\r\n const { Photos, ...agent } = values;\r\n const photosGroup = Photos ? mergePhotoData(Photos, photoMeta) : null;\r\n // generates postBody\r\n const postBody = {};\r\n\r\n if (operationType === 'create') {\r\n postBody.data = {\r\n agent: { ...agent },\r\n photos: photosGroup,\r\n };\r\n } else if (operationType === 'edit') {\r\n const agentData = {\r\n UniqueID: agentSelected.UniqueID,\r\n };\r\n\r\n Object.keys(agent).map(key => {\r\n if (valueHasChanged(key, agentSelected[key], values[key])) {\r\n agentData[key] = values[key];\r\n }\r\n return null;\r\n });\r\n\r\n postBody.data = {\r\n agent: { ...agentData },\r\n photos: photosGroup,\r\n };\r\n }\r\n\r\n try {\r\n // If the component has been un-mounted meanwhile, we don't need to update local state anymore, nor display subsequent alerts.\r\n if (!isMounted) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n icon: 'question',\r\n iconColor: 'var(--theme-warning)',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-warning btn-lg mr-2 swal-question-agent-submit-yes',\r\n denyButton: 'btn btn-primary btn-lg swal-question-agent-submit-no',\r\n },\r\n confirmButtonText: 'Yes, Continue',\r\n denyButtonText: 'No, Cancel',\r\n showDenyButton: true,\r\n title: 'Submit Agent?',\r\n text: 'Your changes will be reflected in Matrix™ within 10-15 minutes.',\r\n }).then(async choice => {\r\n if (choice.isConfirmed) {\r\n setFormSubmitting(true);\r\n\r\n if (operationType === 'create') {\r\n const result = await apiService.Agent.createAgent(postBody);\r\n uniqueID = result?.UniqueID;\r\n } else if (operationType === 'edit') {\r\n uniqueID = agentSelected?.UniqueID;\r\n await apiService.Agent.updateAgent(postBody);\r\n }\r\n\r\n dispatch(formSubmitted());\r\n removeLock();\r\n lockReleasedByCurrentUser.current = true;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Agent Submitted',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n }).then(() => {\r\n history.push(uniqueID == null ? '/' : `/agent/view?UniqueID=${uniqueID}`);\r\n });\r\n }\r\n });\r\n } catch (error) {\r\n // If the component has been un-mounted meanwhile, we don't need to update local state anymore, nor display subsequent alerts.\r\n if (!isMounted) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Agent Not Submitted',\r\n text: 'Agent could not be submitted at this time. Please contact support.',\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-submit',\r\n },\r\n });\r\n if (operationType === 'edit') gaEventTracker(`Edit - ${uniqueID}`, `${username}`);\r\n if (operationType === 'create') gaEventTracker(`Create - ${uniqueID}`, `${username}`);\r\n rollbar.error('Error: Agent Form Submit', error, postBody);\r\n }\r\n setFormSubmitting(false);\r\n setSubmitting(false);\r\n };\r\n\r\n const onClickSubmit = (values, actions) => {\r\n if (rowLockingEnabled) return checkStatus(async () => handleSubmit(values, actions)); // check lock status before submitting\r\n return handleSubmit(values, actions);\r\n };\r\n\r\n const transformRepeatable = values => {\r\n const filledValues = { ...values };\r\n const existingLogics = agentRules.descriptions.logics; // existing fields that have validation rules\r\n const newValues = {};\r\n\r\n Object.entries(filledValues).forEach(([key, value]) => { // now handles removal of fields that do not have the validation logic set\r\n const newKeyLogic = `${key}Rules`;\r\n if (existingLogics.includes(newKeyLogic)) {\r\n newValues[key] = value;\r\n }\r\n });\r\n return { agent: newValues };\r\n };\r\n\r\n const myValidateForm = values => {\r\n const errors = {};\r\n\r\n if (agentRules) {\r\n try {\r\n const { agent, photos } = transformRepeatable(values);\r\n\r\n const res = agentRules.run(agent, photos);\r\n const { fieldValidationResult, agentIsValid } = res.context.variableContainer;\r\n\r\n dispatch(setValidationResult(fieldValidationResult));\r\n\r\n if (!agentIsValid) {\r\n errors.agentIsValid = agentIsValid;\r\n }\r\n } catch (er) {\r\n rollbar.error('Error: Agent Validation', er, values);\r\n }\r\n }\r\n\r\n return errors;\r\n };\r\n\r\n const validateFigField = (figFieldName, figValidationValue) => {\r\n setValidateFieldName(figFieldName);\r\n setValidateFlag(true);\r\n setValidationValue(figValidationValue);\r\n };\r\n\r\n const fieldsUpdated = () => {\r\n setRunValidation(true);\r\n };\r\n\r\n useEffect(() => {\r\n if (runValidation) {\r\n formRef?.current?.validateForm();\r\n setRunValidation(false);\r\n }\r\n }, [runValidation]);\r\n\r\n // prevents form from submitting on enter key press\r\n const handleEnterKeyDown = keyEvent => {\r\n if ((keyEvent.charCode || keyEvent.keyCode) === 13) {\r\n keyEvent.preventDefault();\r\n }\r\n };\r\n\r\n // TODO: Pull this function out and put it into a general utils file as it is being used multiple times\r\n // Handle custom header for supplements and photo sections\r\n const getCustomHeader = section => {\r\n if (section.sectionName === 'Photos') {\r\n return (\r\n <>\r\n {section.sectionLabel}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n This entity is currently locked.\r\n
\r\nYou currently hold a lock for this entity. Do you wish to release the lock?
\r\n \r\n\r\n
\r\n \r\n \r\n Create\r\n Agent\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CreateAgentPage;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from '@components/smartAdminUI/Button';\r\n\r\nconst AgentLookupActionButtons = ({\r\n agentSelected,\r\n currRow,\r\n}) => {\r\n const handleClick = () => agentSelected(currRow);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nAgentLookupActionButtons.propTypes = {\r\n agentSelected: PropTypes.func.isRequired,\r\n currRow: PropTypes.shape({\r\n UniqueID: PropTypes.number,\r\n }),\r\n};\r\n\r\nexport default AgentLookupActionButtons;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory from 'react-bootstrap-table2-paginator';\r\n\r\nimport AgentLookupActionButtons from '@components/table/actionButtons/AgentLookupActionButtons';\r\nimport Button from '@components/smartAdminUI/Button';\r\n\r\nconst AgentLookupTable = ({\r\n displayData,\r\n onAgentSelect,\r\n isModal = false,\r\n}) => {\r\n const agentSelected = row => onAgentSelect(row);\r\n\r\n const actionsFormatter = (cell, row) => (\r\n \r\n {\r\n options.map(option => {\r\n const isSelect = currSizePerPage === `${option.page}`;\r\n return (\r\n onSizePerPageChange(option.page)}\r\n >\r\n {option.text}\r\n \r\n );\r\n })\r\n }\r\n
\r\n );\r\n\r\n const customTotal = (from, to, size) => (\r\n \r\n \r\n {`Showing rows ${from} to ${to} of ${size}`}\r\n \r\n );\r\n\r\n const options = {\r\n firstPageText: '<<',\r\n hidePageListOnlyOnePage: true,\r\n lastPageText: '>>',\r\n nextPageText: '>',\r\n paginationTotalRenderer: customTotal,\r\n prePageText: '<',\r\n showTotal: true,\r\n sizePerPageList: [],\r\n sizePerPage: isModal ? 5 : 10,\r\n sizePerPageRenderer,\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nCustomInput.propTypes = {\r\n label: PropTypes.string,\r\n name: PropTypes.string,\r\n};\r\n\r\nconst TaxAutoPopForm = props => {\r\n const { onSearchSubmit, formClear } = props;\r\n const [formEdited, setFormEdited] = useState(false);\r\n\r\n const taxAutoPopSearchLoading = useSelector(state => state.listing.searchLoading);\r\n\r\n const FormikHelper = () => {\r\n const { dirty, resetForm } = useFormikContext();\r\n\r\n useEffect(() => {\r\n if (dirty) {\r\n if (!formEdited) setFormEdited(true);\r\n } else {\r\n // eslint-disable-next-line no-lonely-if\r\n if (formEdited) setFormEdited(false);\r\n }\r\n }, [dirty]);\r\n\r\n // resets form once the tax auto pop modal reopens\r\n useEffect(() => {\r\n if (formClear) {\r\n if (formEdited) {\r\n resetForm({});\r\n }\r\n }\r\n }, []);\r\n\r\n return null;\r\n };\r\n\r\n const buildWhereClause = values => {\r\n const whereClause = {\r\n clause: [],\r\n };\r\n const valueKeys = Object.keys(values);\r\n\r\n valueKeys.forEach(key => {\r\n if (values[key]) {\r\n whereClause.clause.push({\r\n Name: key,\r\n Value: values[key].trim(),\r\n });\r\n }\r\n });\r\n return whereClause;\r\n };\r\n\r\n const handleSubmit = values => {\r\n const whereClause = buildWhereClause(values);\r\n\r\n const jsonBody = {\r\n action: 'search',\r\n where: whereClause,\r\n };\r\n onSearchSubmit(jsonBody);\r\n };\r\n\r\n return (\r\n {meta.error}
\r\n ) : null}\r\n \r\n \r\n \r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nTaxActionButtons.propTypes = {\r\n listingClicked: PropTypes.func.isRequired,\r\n index: PropTypes.number.isRequired,\r\n};\r\n\r\nexport default TaxActionButtons;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory from 'react-bootstrap-table2-paginator';\r\nimport TaxActionButtons from './actionButtons/TaxActionButtons';\r\nimport Button from '../smartAdminUI/Button';\r\n\r\nconst TaxAutoPopTable = props => {\r\n const {\r\n displayData,\r\n onListingSelected,\r\n isModal = false,\r\n } = props;\r\n\r\n const actionsFormatter = (cell, row) => (\r\n \r\n {\r\n options.map(option => {\r\n const isSelect = currSizePerPage === `${option.page}`;\r\n return (\r\n onSizePerPageChange(option.page)}\r\n >\r\n {option.text}\r\n \r\n );\r\n })\r\n }\r\n
\r\n );\r\n\r\n const customTotal = (from, to, size) => (\r\n \r\n \r\n {`Showing rows ${from} to ${to} of ${size}`}\r\n \r\n );\r\n\r\n const options = {\r\n firstPageText: '<<',\r\n hidePageListOnlyOnePage: true,\r\n lastPageText: '>>',\r\n nextPageText: '>',\r\n paginationTotalRenderer: customTotal,\r\n prePageText: '<',\r\n showTotal: true,\r\n sizePerPageList: [],\r\n sizePerPage: isModal ? 5 : 10,\r\n sizePerPageRenderer,\r\n };\r\n\r\n return (\r\n <>\r\n {displayData.length > 0\r\n ? (\r\n \r\n \r\n NOTE:\r\n \r\n Although new tax assessments are sent out to home owners at the beginning of each calendar year, Pillar 9™ does not typically receive\r\n new Calgary Tax Data until sometime in May, with all other municipalities following sometime thereafter. Please check back\r\n \r\n \r\n HERE\r\n \r\n \r\n {' '}\r\n regularly, to see what data has been received for the current and past years.\r\n
\r\n\r\n {\r\n listingData\r\n && (\r\n
\r\n
\r\n \r\n \r\n {formEdit ? 'Edit' : 'Create'}\r\n Listing\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CreateListingsPage;\r\n","/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport React, {\r\n useEffect, useMemo, useRef, useState,\r\n} from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Formik, Form } from 'formik';\r\nimport { useRollbar, useRollbarPerson } from '@rollbar/react';\r\n\r\nimport Swal from 'sweetalert2';\r\nimport Tab from 'react-bootstrap/Tab';\r\nimport Row from 'react-bootstrap/Row';\r\nimport Col from 'react-bootstrap/Col';\r\nimport LinearProgress from '@mui/material/LinearProgress';\r\n\r\nimport apiService from '@services/apiService';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport FormSearchBar from '@components/form/formComponents/formSearch/FormSearchBar';\r\nimport FormLoader from '@components/loaders/FormLoader';\r\n\r\nimport AgentLookupModal from '@components/form/formComponents/inputGroups/agentLookup/AgentLookupModal';\r\nimport FieldValidator from '@components/form/formHelpers/FieldValidator';\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\nimport FormikFieldUpdater from '@components/form/formHelpers/FormikFieldUpdater';\r\nimport LayoutGroupWrapper from '@components/form/formComponents/inputGroups/LayoutGroupWrapper';\r\nimport OfficeLookupModal from '@components/form/formComponents/inputGroups/officeLookup/OfficeLookupModal';\r\nimport RepeatableRoom from '@components/form/formComponents/repeatableRoom/RepeatableRoom';\r\nimport OnSubmitValidationError from '@components/form/formikComponents/OnSubmitValidationError';\r\n\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\n// import Debug from '@components/general/Debug';\r\n\r\nimport {\r\n getSortedErrors,\r\n selectComboValueDict,\r\n selectFormDefinition,\r\n selectInitialTouched,\r\n selectInitialValues,\r\n selectLookupNames,\r\n selectVisiblePageStructure,\r\n selectAllFields,\r\n getOrderedSections,\r\n selectRequiredPerSection,\r\n selectErrorsPerSection,\r\n} from '@redux/selectors/FormSelector';\r\n\r\nimport { selectUploadedImages, selectSectionsPerRepeatableSection } from '@redux/selectors/ListingSelector';\r\nimport { getUserName, getUserMlsId } from '@redux/selectors/UserSelector';\r\nimport { selectOfficeFormData } from '@redux/selectors/FormDataSelector';\r\n\r\nimport {\r\n formSubmitted,\r\n loadComboBoxOptions,\r\n setValidationResult,\r\n} from '@redux/modules/formGeneration';\r\n\r\nimport { clearOffice } from '@redux/modules/office';\r\nimport SectionNav from '@components/smartAdminUI/SectionNav';\r\n\r\nimport useRowLock from '@hooks/useRowLock';\r\nimport usePrevious from '@hooks/usePrevious';\r\nimport useIsMounted from '@hooks/useIsMounted';\r\nimport FormikField from '@components/form/FormikField';\r\n\r\nconst CreateOfficeForm = () => {\r\n const dispatch = useDispatch();\r\n const isMounted = useIsMounted();\r\n const formRef = useRef();\r\n const history = useHistory(); // use for redirection\r\n\r\n const officeRules = window.FlexRule.RuntimeEngine.fromJavaScript('OnePlatform', 'OfficeRules');\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const reqPerSection = useSelector(selectRequiredPerSection);\r\n const orderedSections = useSelector(getOrderedSections);\r\n const errPerSection = useSelector(selectErrorsPerSection);\r\n const agentLookup = useSelector(state => state.agent.agentLookup);\r\n const definitionType = useSelector(state => state.formGeneration.definitionType);\r\n const formIsLoading = useSelector(state => state.formGeneration.formIsLoading);\r\n const officeLookup = useSelector(state => state.office.officeLookup);\r\n const officeSelected = useSelector(state => state.office.currentOffice);\r\n const officeFormData = useSelector(selectOfficeFormData);\r\n const operationType = useSelector(state => state.formGeneration.operationType);\r\n const comboSetValueDict = useSelector(selectComboValueDict);\r\n const currentFormDefinition = useSelector(selectFormDefinition);\r\n const lookUpNames = useSelector(selectLookupNames);\r\n const initialTouched = useSelector(selectInitialTouched);\r\n const initialValues = useSelector(selectInitialValues);\r\n const pageStructure = useSelector(selectVisiblePageStructure);\r\n const allFields = useSelector(selectAllFields);\r\n const uploadedImages = useSelector(selectUploadedImages);\r\n const sortedErrors = useSelector(getSortedErrors);\r\n\r\n const [formSubmitting, setFormSubmitting] = useState(false);\r\n const [newComboValue, setNewComboValue] = useState({});\r\n const [runValidation, setRunValidation] = useState(false);\r\n const [validateFieldName, setValidateFieldName] = useState('');\r\n const [validateFlag, setValidateFlag] = useState(false);\r\n const [validationValue, setValidationValue] = useState('');\r\n const [progress, setProgress] = useState(((1 / orderedSections.length) * 100));\r\n const [activeSection, setActiveSection] = useState(1);\r\n\r\n const gaEventTracker = GAEventTracking('Error Office Form Submit');\r\n const username = useSelector(getUserName);\r\n const userMLSID = useSelector(getUserMlsId);\r\n\r\n const rollbar = useRollbar();\r\n useRollbarPerson({ id: userMLSID, username });\r\n\r\n const previousOperationType = usePrevious(operationType);\r\n\r\n const memoizedInitialValues = useMemo(() => initialValues, []);\r\n const rowLockEntity = useMemo(() => ({ type: 'office', id: officeSelected?.UniqueID }), [officeSelected]);\r\n\r\n const comboBubbleWrap = { setNewComboValue };\r\n\r\n const {\r\n lockingAuthorized,\r\n locked,\r\n lockedBy,\r\n checked,\r\n checkStatus,\r\n createLock,\r\n removeLock,\r\n rowLockingEnabled,\r\n } = useRowLock({ rowLockEntity, isEditOperation: operationType === 'edit', enableRowLocking: operationType === 'edit' });\r\n\r\n const lockReleasedByCurrentUser = useRef(false);\r\n\r\n useEffect(() => {\r\n if (!currentFormDefinition?.length) return;\r\n\r\n if (lookUpNames?.lookupNames?.length) {\r\n dispatch(loadComboBoxOptions(lookUpNames, 'offices'));\r\n }\r\n\r\n formRef?.current?.validateForm();\r\n }, [currentFormDefinition]);\r\n\r\n useEffect(() => {\r\n // prevent the execution of this effect when going from edit mode to create mode;\r\n // current component will not be un-mounted yet when [operationType] gets updated in redux\r\n if (previousOperationType === 'edit' && operationType === 'create') return;\r\n\r\n if (operationType === 'create') {\r\n dispatch(clearOffice());\r\n formRef?.current?.resetForm();\r\n setRunValidation(true);\r\n }\r\n }, [operationType]);\r\n\r\n useEffect(() => {\r\n if (Object.keys(newComboValue).length > 0) {\r\n const newComboKeys = Object.keys(newComboValue);\r\n if (comboSetValueDict) {\r\n if (newComboKeys.length > 0) {\r\n const { fieldName, newValue } = newComboValue;\r\n const comboMutator = comboSetValueDict[fieldName];\r\n comboMutator(newValue);\r\n }\r\n }\r\n }\r\n }, [newComboValue]);\r\n\r\n const getDeltas = (formikState, unmodifiedEntry) => {\r\n const deltas = {};\r\n if (!formikState) return deltas;\r\n Object.entries(unmodifiedEntry).map(([key, value]) => {\r\n if (key in formikState && formikState?.[key] !== value) {\r\n deltas[key] = formikState?.[key];\r\n }\r\n return null;\r\n });\r\n return deltas;\r\n };\r\n\r\n const mergePhotoData = (formikState, uploadList = []) => {\r\n const mergedPhotos = uploadList.flatMap(images => {\r\n if (!images) return [];\r\n return images.map(singleImage => {\r\n const currentDisplayName = singleImage.displayName ?? '';\r\n const imageKey = singleImage?.key ?? singleImage?.UniqueID ?? singleImage?.displayName;\r\n\r\n if (`${currentDisplayName}`.includes('_thumbnail')) return null;\r\n if (singleImage.UniqueID) {\r\n // Handle existing photo.\r\n const { SortOrder, IsDeleted } = formikState[imageKey];\r\n if (IsDeleted) {\r\n // Mark photo as deleted.\r\n return {\r\n UniqueID: singleImage.UniqueID,\r\n SortOrder: singleImage.SortOrder,\r\n IsDeleted,\r\n };\r\n }\r\n // Update photo.\r\n const deltas = getDeltas(formikState[imageKey], singleImage);\r\n return {\r\n ...deltas,\r\n UniqueID: singleImage.UniqueID,\r\n SortOrder,\r\n IsDeleted,\r\n };\r\n }\r\n // Handle new photo.\r\n const {\r\n URL,\r\n Description,\r\n SortOrder,\r\n IsDeleted,\r\n } = formikState[imageKey];\r\n if (IsDeleted) return null;\r\n return {\r\n URL,\r\n Description,\r\n SortOrder,\r\n IsDeleted,\r\n };\r\n }).filter(photo => photo !== null);\r\n });\r\n return mergedPhotos;\r\n };\r\n\r\n const convertDateToUTC = date => new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());\r\n\r\n const getDateValue = value => {\r\n let formattedDate;\r\n if (value) {\r\n const dateUTC = convertDateToUTC(new Date(value));\r\n const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(dateUTC);\r\n const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(dateUTC);\r\n const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(dateUTC);\r\n formattedDate = `${year}-${month}-${day}`;\r\n }\r\n return formattedDate ?? '';\r\n };\r\n\r\n const getBitValue = value => {\r\n let bitValue;\r\n if (value != null && value !== '') {\r\n if (typeof value === 'string') {\r\n bitValue = value === 'true' ? 1 : 0;\r\n } else if (typeof value === 'boolean') {\r\n bitValue = value === true ? 1 : 0;\r\n } else if (typeof value === 'number') {\r\n bitValue = value;\r\n }\r\n }\r\n return bitValue ?? '';\r\n };\r\n\r\n const getStringValue = value => value ?? '';\r\n\r\n const getNumericValue = value => (value != null && value !== '' ? Number(value) : '');\r\n\r\n const getComboBoxValue = value => value ?? '';\r\n\r\n // TODO: move to utility module (used by listing/agent/office)\r\n const valueHasChanged = (fieldName, oldValue, newValue) => {\r\n const inputType = allFields[fieldName]?.InputType;\r\n const dataType = allFields[fieldName]?.DataType;\r\n switch (inputType) {\r\n case 'TextInput':\r\n if (dataType === 'datetime' || dataType === 'date') {\r\n return (getDateValue(oldValue) !== getDateValue(newValue));\r\n }\r\n if (dataType === 'bit') {\r\n return (getBitValue(oldValue) !== getBitValue(newValue));\r\n }\r\n if (dataType === 'string') {\r\n return (getStringValue(oldValue) !== getStringValue(newValue));\r\n }\r\n if (dataType === 'numeric' || dataType === 'decimal' || dataType === 'integer') {\r\n return (getNumericValue(oldValue) !== getNumericValue(newValue));\r\n }\r\n return (oldValue !== newValue);\r\n\r\n case 'ComboBox':\r\n return (getComboBoxValue(oldValue) !== getComboBoxValue(newValue));\r\n\r\n default:\r\n return (oldValue !== newValue);\r\n }\r\n };\r\n\r\n const handlePreviousClick = () => {\r\n const tabNav = document.querySelector('.tab-nav');\r\n const tabActive = tabNav.querySelector('.active');\r\n if (tabActive) {\r\n const navItem = tabActive.parentNode;\r\n const previous = navItem.previousElementSibling;\r\n if (previous) {\r\n previous.querySelector('a').click();\r\n window.scrollTo(0, 0);\r\n setProgress(progress - ((1 / orderedSections.length) * 100));\r\n setActiveSection(activeSection - 1);\r\n }\r\n }\r\n };\r\n\r\n const handleNextClick = () => {\r\n const tabNav = document.querySelector('.tab-nav');\r\n const tabActive = tabNav.querySelector('.active');\r\n if (tabActive) {\r\n const navItem = tabActive.parentNode;\r\n const next = navItem.nextElementSibling;\r\n if (next) {\r\n next.querySelector('a').click();\r\n window.scrollTo(0, 0);\r\n setProgress(progress + ((1 / orderedSections.length) * 100));\r\n setActiveSection(activeSection + 1);\r\n }\r\n }\r\n };\r\n\r\n const handleSubmit = async (values, { setSubmitting }) => {\r\n if (!(operationType === 'create') && !(operationType === 'edit')) return;\r\n\r\n setFormSubmitting(true);\r\n const { Photos, ...office } = values;\r\n\r\n const photosGroup = Photos\r\n ? mergePhotoData(Photos, uploadedImages)\r\n : null;\r\n\r\n // CREATE ONLY\r\n const postBody = {\r\n photos: photosGroup,\r\n };\r\n\r\n if (operationType === 'create') {\r\n postBody.office = { ...office };\r\n } else if (operationType === 'edit') {\r\n const officeData = {\r\n UniqueID: officeSelected.UniqueID,\r\n };\r\n\r\n Object.keys(office).map(key => {\r\n if (valueHasChanged(key, officeSelected[key], values[key])) {\r\n officeData[key] = values[key];\r\n }\r\n return null;\r\n });\r\n\r\n postBody.office = { ...officeData };\r\n }\r\n\r\n let uniqueID;\r\n try {\r\n // If the component has been un-mounted meanwhile, we don't need to update local state anymore, nor display subsequent alerts.\r\n if (!isMounted) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n icon: 'question',\r\n iconColor: 'var(--theme-warning)',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-warning btn-lg mr-2 swal-question-office-submit-yes',\r\n denyButton: 'btn btn-primary btn-lg swal-question-office-submit-no',\r\n },\r\n confirmButtonText: 'Yes, Continue',\r\n denyButtonText: 'No, Cancel',\r\n showDenyButton: true,\r\n title: 'Submit Office?',\r\n text: 'Your changes will be reflected in Matrix™ within 10-15 minutes.',\r\n }).then(async choice => {\r\n if (choice.isConfirmed) {\r\n if (operationType === 'create') {\r\n const result = await apiService.Office.insertOffice(postBody);\r\n uniqueID = result?.data?.UniqueID;\r\n } else if (operationType === 'edit') {\r\n uniqueID = officeSelected?.UniqueID;\r\n await apiService.Office.updateOffice(postBody);\r\n }\r\n\r\n dispatch(formSubmitted());\r\n removeLock();\r\n lockReleasedByCurrentUser.current = true;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Office Submitted',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n }).then(() => {\r\n history.push(uniqueID == null ? '/' : `/office/view?UniqueID=${uniqueID}`);\r\n });\r\n }\r\n });\r\n } catch (error) {\r\n // If the component has been un-mounted meanwhile, we don't need to update local state anymore, nor display subsequent alerts.\r\n if (!isMounted) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Office Not Submitted',\r\n text: 'Office could not be submitted at this time. Please contact support.',\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-office-submit',\r\n },\r\n });\r\n if (operationType === 'edit') gaEventTracker(`Edit - ${uniqueID}`, `${username}`);\r\n if (operationType === 'create') gaEventTracker(`Create - ${uniqueID}`, `${username}`);\r\n rollbar.error('Error: Office Form Submit', error, postBody);\r\n }\r\n setFormSubmitting(false);\r\n setSubmitting(false);\r\n };\r\n\r\n const onClickSubmit = (values, actions) => {\r\n if (rowLockingEnabled) return checkStatus(async () => handleSubmit(values, actions)); // check lock status before submitting\r\n return handleSubmit(values, actions);\r\n };\r\n\r\n const transformRepeatable = values => {\r\n const filledValues = { ...values };\r\n const existingLogics = officeRules.descriptions.logics; // existing fields that have validation rules\r\n const newValues = {};\r\n\r\n Object.entries(filledValues).forEach(([key, value]) => { // now handles removal of fields that do not have the validation logic set\r\n const newKeyLogic = `${key}Rules`;\r\n if (existingLogics.includes(newKeyLogic)) {\r\n newValues[key] = value;\r\n }\r\n });\r\n return { office: newValues };\r\n };\r\n\r\n const myValidateForm = values => {\r\n const errors = {};\r\n\r\n if (officeRules) {\r\n try {\r\n const { office, photos } = transformRepeatable(values);\r\n\r\n const res = officeRules.run(office, photos);\r\n\r\n const { fieldValidationResult, officeIsValid } = res.context.variableContainer;\r\n\r\n dispatch(setValidationResult(fieldValidationResult));\r\n\r\n if (!officeIsValid) {\r\n errors.officeIsValid = officeIsValid;\r\n }\r\n } catch (er) {\r\n rollbar.error('Error: Office Validation', er, values);\r\n }\r\n }\r\n return errors;\r\n };\r\n\r\n const validateFigField = (figFieldName, figValidationValue) => {\r\n setValidateFieldName(figFieldName);\r\n setValidateFlag(true);\r\n setValidationValue(figValidationValue);\r\n };\r\n\r\n const fieldsUpdated = () => {\r\n setRunValidation(true);\r\n };\r\n\r\n useEffect(() => {\r\n if (runValidation) {\r\n formRef?.current?.validateForm();\r\n setRunValidation(false);\r\n }\r\n }, [runValidation]);\r\n\r\n // prevents form from submitting on enter key press\r\n const handleEnterKeyDown = keyEvent => {\r\n if ((keyEvent.charCode || keyEvent.keyCode) === 13) {\r\n keyEvent.preventDefault();\r\n }\r\n };\r\n\r\n const handleDiscardChanges = e => {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Discard Changes?',\r\n html: 'Your changes will be discarded.',\r\n iconHtml: '',\r\n iconColor: 'var(--theme-danger)',\r\n buttonsStyling: false,\r\n showDenyButton: true,\r\n confirmButtonText: 'Yes, Continue',\r\n denyButtonText: 'No, Cancel',\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg mr-2 swal-question-office-discard-yes',\r\n denyButton: 'btn btn-primary btn-lg swal-question-office-discard-no',\r\n },\r\n }).then(result => {\r\n if (result.isConfirmed) {\r\n if (operationType) {\r\n e.preventDefault();\r\n removeLock();\r\n lockReleasedByCurrentUser.current = true;\r\n history.push(operationType === 'create' ? '/' : '/office/view');\r\n }\r\n }\r\n });\r\n };\r\n\r\n // updates row lock and displays an alert when changes are being overwritten by another user\r\n useEffect(() => {\r\n const tryRegainRowLock = async () => {\r\n try {\r\n const created = await createLock();\r\n if (!created) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Lock Lost',\r\n text: 'Your lock was lost and could not be regained.',\r\n iconHtml: '',\r\n iconColor: 'var(--theme-warning)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-warning btn-lg swal-warning-office-lockLost',\r\n },\r\n }).then(resp => {\r\n if (resp.value) {\r\n history.push('/office/view');\r\n }\r\n });\r\n }\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: Office tryRegainRowLock', err);\r\n }\r\n };\r\n\r\n if (operationType === 'edit' && !lockReleasedByCurrentUser.current) {\r\n if (checked && !locked) {\r\n tryRegainRowLock();\r\n return;\r\n }\r\n\r\n if (locked && !lockingAuthorized) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Changes Overwritten',\r\n text: `Your changes have been overwritten by ${lockedBy}.`,\r\n iconHtml: '',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-warning-office-changesOverwritten',\r\n },\r\n }).then(resp => {\r\n if (resp.value) {\r\n history.push('/office/view');\r\n }\r\n });\r\n }\r\n }\r\n }, [locked, lockingAuthorized, lockedBy, operationType]);\r\n\r\n const datePickerWhitelist = ['datetime', 'date', 'time'];\r\n const requiresDatePicker = childDataType => datePickerWhitelist.includes(childDataType);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Create\r\n Office\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CreateOfficePage;\r\n","import React, { useEffect } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useQueryParam, StringParam } from 'use-query-params';\r\n\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\nimport { setCurrentAgent } from '@redux/modules/agent';\r\nimport { getAgentSelected } from '@redux/selectors/AgentSelector';\r\n\r\nimport CreateAgentForm from '@components/form/forms/CreateAgentForm';\r\n\r\nconst EditAgentPage = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n const currAgent = useSelector(getAgentSelected);\r\n const [urlParam, setUrlParam] = useQueryParam('UniqueID', StringParam);\r\n\r\n const jsonBody = {\r\n action: 'select',\r\n where: {\r\n clause: [],\r\n },\r\n };\r\n\r\n const alertUser = e => {\r\n e.preventDefault(); // cancel the event\r\n e.returnValue = ''; // chrome requires return value to be set\r\n };\r\n\r\n useEffect(() => {\r\n window.addEventListener('beforeunload', alertUser);\r\n\r\n if (urlParam) {\r\n jsonBody.where.clause.push({ name: 'UniqueID', value: urlParam });\r\n dispatch(loadFormDefinition('edit', 'agent', null, urlParam, 'agentACL'));\r\n dispatch(setCurrentAgent(jsonBody));\r\n }\r\n\r\n return () => window.removeEventListener('beforeunload', alertUser);\r\n }, []);\r\n\r\n /*\r\n This has to be done using location. Currently, when the user loads a form, it redirects the user to the\r\n create/edit page. When this happens, it clears out the path and search values in the location object.\r\n We can't memo the location and use that as a comparison, because technically the locations will be\r\n the same on the reload, so we can't reset the search value in the location object.\r\n */\r\n useEffect(() => {\r\n if (location?.search === '') {\r\n if (currAgent) {\r\n setUrlParam(currAgent?.UniqueID);\r\n }\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (currAgent) {\r\n if (location?.search === '' || location?.search !== currAgent?.UniqueID) {\r\n setUrlParam(currAgent?.UniqueID);\r\n }\r\n }\r\n }, [currAgent]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Edit Agent\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default EditAgentPage;\r\n","import React, { useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useQueryParam, StringParam } from 'use-query-params';\r\n\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\nimport { setCurrentOffice } from '@redux/modules/office';\r\nimport { getCurrentOffice } from '@redux/selectors/OfficeSelector';\r\n\r\nimport CreateOfficeForm from '@components/form/forms/CreateOfficeForm';\r\n\r\nconst EditOfficePageOG = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n const currOffice = useSelector(getCurrentOffice);\r\n\r\n const [urlParam, setUrlParam] = useQueryParam('UniqueID', StringParam); // unique ID of current listing from CLF\r\n\r\n const alertUser = e => {\r\n e.preventDefault(); // cancel the event\r\n e.returnValue = ''; // chrome requires return value to be set\r\n };\r\n\r\n useEffect(() => {\r\n window.addEventListener('beforeunload', alertUser);\r\n\r\n if (urlParam) {\r\n dispatch(loadFormDefinition('edit', 'office', null, urlParam, 'officeACL'));\r\n dispatch(setCurrentOffice(urlParam));\r\n }\r\n\r\n return () => window.removeEventListener('beforeunload', alertUser);\r\n }, []);\r\n\r\n /*\r\n This has to be done using location. Currently, when the user loads a form, it redirects the user to the\r\n create/edit page. When this happens, it clears out the path and search values in the location object.\r\n We can't memo the location and use that as a comparison, because technically the locations will be\r\n the same on the reload, so we can't reset the search value in the location object.\r\n */\r\n useEffect(() => {\r\n if (location?.search === '') {\r\n if (currOffice) {\r\n setUrlParam(currOffice?.UniqueID);\r\n }\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (currOffice) {\r\n if (location?.search === '' || location?.search !== currOffice?.UniqueID) {\r\n setUrlParam(currOffice?.UniqueID);\r\n }\r\n }\r\n }, [currOffice]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Edit\r\n Office\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default EditOfficePageOG;\r\n","/* eslint-disable jsx-a11y/control-has-associated-label */\r\nimport React from 'react';\r\n\r\nimport Skeleton from '@mui/material/Skeleton';\r\n\r\nconst TableLoaderSmall = () => (\r\n <>\r\n \r\n
\r\n | \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n
|---|---|---|---|---|---|
\r\n
\r\n \r\n);\r\n\r\nexport default TableLoaderSmall;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nconst ListingActionButtons = ({\r\n viewClicked,\r\n copyClicked,\r\n auditClicked,\r\n currRow,\r\n isEditable,\r\n isCopiable,\r\n isAuditable,\r\n sizeSM,\r\n}) => {\r\n const onViewClick = () => viewClicked(currRow);\r\n const onCopyClick = () => copyClicked(currRow);\r\n const onAuditClick = () => auditClicked(currRow);\r\n\r\n return (\r\n <>\r\n {isEditable && (\r\n \r\n
\r\n \r\n
\r\n \r\n onColumnToggle('ListAgentFullName')}\r\n >\r\n Agent\r\n \r\n
\r\n );\r\n\r\n const listingsTable = ({ paginationTableProps }) => (\r\n \r\n
\r\n )}\r\n \r\n );\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n { listingsTable }\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nListingsTableWidget.propTypes = {\r\n displayData: PropTypes.arrayOf(PropTypes.shape()).isRequired,\r\n onListingSelect: PropTypes.func.isRequired,\r\n onColumnToggle: PropTypes.func,\r\n isModal: PropTypes.bool,\r\n};\r\n\r\nexport default ListingsTableWidget;\r\n","export default __webpack_public_path__ + \"static/media/residential.cafecd31.jpg\";","export default __webpack_public_path__ + \"static/media/multi.b7113201.jpg\";","export default __webpack_public_path__ + \"static/media/mobile.e34c5fdb.jpg\";","export default __webpack_public_path__ + \"static/media/land.43e4413f.jpg\";","export default __webpack_public_path__ + \"static/media/commercial.8ed1fe06.jpg\";","export default __webpack_public_path__ + \"static/media/farm.52c5c7ce.jpg\";","export default __webpack_public_path__ + \"static/media/rent.d110b332.jpg\";","import React from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\n\r\nimport Carousel from 'react-bootstrap/Carousel';\r\nimport Button from '@components/smartAdminUI/Button';\r\n\r\nimport ResidentialImage from '@images/createListing/residential.jpg';\r\nimport MultiImage from '@images/createListing/multi.jpg';\r\nimport MobileImage from '@images/createListing/mobile.jpg';\r\nimport LandImage from '@images/createListing/land.jpg';\r\nimport CommercialImage from '@images/createListing/commercial.jpg';\r\nimport FarmImage from '@images/createListing/farm.jpg';\r\nimport RentImage from '@images/createListing/rent.jpg';\r\n\r\nconst CreateListingWidget = () => {\r\n const dispatch = useDispatch();\r\n const handleClicked = e => {\r\n e.stopPropagation();\r\n const clickedItem = e?.currentTarget?.dataset?.id;\r\n if (clickedItem) {\r\n const [operationType, definitionType, listingType] = clickedItem.split('-');\r\n dispatch(loadFormDefinition(operationType, definitionType, listingType, null, 'listing'));\r\n }\r\n };\r\n return (\r\n <>\r\n Residential
\r\nA property that is owned for people to live in. This includes detached, semi-detached, row and condominium properties
\r\nMulti-Family
\r\nA listing where 2 - 4 units are being sold together, regardless of whether they are connected.
\r\nRental
\r\nResidential properties listed for rent or lease. This includes all residential property sub-types.
\r\nMobile
\r\nMobile home on rented/leased land. Note: If a mobile home includes land with the sale it should be listed under detached residential
\r\nLand
\r\nA property that does not have a dwelling on it, including rural acreage parcels and vacant residential lots. Should include all land parcels regardless of their zoning
\r\nCommercial
\r\nOffice, industrial, retail property and multi-family with 5 or more units being sold in a single transaction
\r\nAgribusiness
\r\nA property where the primary purpose is agricultural
\r\nThere was an error downloading your file. Please contact Pillar 9 Support for assistance.
',\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-warning btn-lg mr-2 swal-question-agent-submit-yes',\r\n },\r\n showConfirmButton: true,\r\n confirmButtonText: 'OK',\r\n });\r\n }\r\n };\r\n\r\n const headerSortClasses = (_column, sortOrder) => `sorting_${sortOrder}`;\r\n\r\n const actionsFormatter = (cell, row) => (\r\n\r\n Criteria:\r\n \r\n {row.SqlWhereClause}\r\n
\r\n ),\r\n expandHeaderColumnRenderer: ({ isAnyExpands }) => {\r\n if (isAnyExpands) {\r\n return (\r\n \r\n
\r\n )}\r\n \r\n );\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n { dataFileRequestsTable }\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nDataFileRequestsTableWidget.propTypes = {\r\n displayData: PropTypes.arrayOf(PropTypes.shape()).isRequired,\r\n isModal: PropTypes.bool,\r\n};\r\n\r\nexport default DataFileRequestsTableWidget;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Row from 'react-bootstrap/Row';\r\nimport { Line } from 'react-chartjs-2';\r\nimport {\r\n Chart as ChartJS,\r\n CategoryScale,\r\n LinearScale,\r\n PointElement,\r\n LineElement,\r\n Title,\r\n Tooltip,\r\n Legend,\r\n} from 'chart.js';\r\nimport Form from 'react-bootstrap/Form';\r\n\r\nconst AggregateDataChartWidget = ({\r\n displayData,\r\n}) => {\r\n ChartJS.register(\r\n CategoryScale,\r\n LinearScale,\r\n PointElement,\r\n LineElement,\r\n Title,\r\n Tooltip,\r\n Legend,\r\n );\r\n\r\n ChartJS.defaults.elements.line.tension = 0.3;\r\n ChartJS.defaults.font.family = '\"Poppins\", sans-serif';\r\n\r\n const [showFilteredTotalsByQuarterByYear, setShowFilteredTotalsByQuarterByYear] = useState({ sales: true, adjusted: true });\r\n\r\n const handleFilteredTotalsByQuarterByYearSalesToggled = () => {\r\n setShowFilteredTotalsByQuarterByYear({ ...showFilteredTotalsByQuarterByYear, sales: !showFilteredTotalsByQuarterByYear.sales });\r\n };\r\n\r\n const handleFilteredTotalsByQuarterByYearAdjustedToggled = () => {\r\n setShowFilteredTotalsByQuarterByYear({ ...showFilteredTotalsByQuarterByYear, adjusted: !showFilteredTotalsByQuarterByYear.adjusted });\r\n };\r\n\r\n const options = {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n datalabels: {\r\n display: false,\r\n },\r\n legend: {\r\n display: false,\r\n },\r\n title: {\r\n display: false,\r\n },\r\n },\r\n };\r\n\r\n const data = {\r\n labels: displayData.labels,\r\n datasets: [\r\n {\r\n label: 'Actual',\r\n data: displayData.sales,\r\n borderColor: 'rgb(255, 99, 132)',\r\n backgroundColor: 'rgba(255, 99, 132, 0.5)',\r\n },\r\n {\r\n label: 'Seasonally Adjusted',\r\n data: displayData.adjusted,\r\n borderColor: 'rgb(75, 192, 192)',\r\n backgroundColor: 'rgba(75, 192, 192, 0.5)',\r\n },\r\n ],\r\n };\r\n\r\n const filteredTotalsByQuarterByYearData = {\r\n ...data,\r\n datasets: data.datasets.filter(\r\n dataset => (\r\n dataset.label === 'Actual' && showFilteredTotalsByQuarterByYear.sales\r\n ) || (\r\n dataset.label === 'Seasonally Adjusted' && showFilteredTotalsByQuarterByYear.adjusted\r\n ),\r\n ),\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n {is3rdPartyDataPortalUser && (\r\n \r\n {!isEmpty(aggregateTotalsByQuarterByYear) && (\r\n
\r\n {is3rdPartyDataPortalTransactionalUser && (\r\n \r\n <>\r\n \r\n \r\n
\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default DataPortalDashboard;\r\n","import React, { useEffect } from 'react';\r\nimport { useSelector } from 'react-redux';\r\n\r\nimport useAcl from '@hooks/useAcl';\r\n\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport MemberDashboard from '@components/dashboards/MemberDashboard';\r\nimport DataPortalDashboard from '@components/dashboards/DataPortalDashboard';\r\n\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\n// Landing page\r\nconst Dashboard = () => {\r\n const {\r\n aclIsEmpty,\r\n is3rdPartyDataPortalUser,\r\n } = useAcl();\r\n\r\n const username = useSelector(getUserName);\r\n\r\n const gaEventTracker = GAEventTracking('User');\r\n\r\n useEffect(() => {\r\n if (username !== null) {\r\n gaEventTracker('Entry Dashboard', `${username}`);\r\n }\r\n });\r\n\r\n return (\r\n <>\r\n {!aclIsEmpty && (\r\n is3rdPartyDataPortalUser ? \r\n
\r\n \r\n \r\n Dashboard\r\n
\r\n\r\n
\r\n );\r\n }\r\n\r\n if (!checked) return null;\r\n\r\n if (!locked) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Invalid entity
\r\n\r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n This entity is not currently locked.
\r\n\r\n {entitiesAreValidAndMatch && reduxRowLockCallback && (\r\n \r\n )}\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default RowLockPage;\r\n","import React, { useState, forwardRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSelector } from 'react-redux';\r\nimport {\r\n Chart as ChartJS,\r\n CategoryScale,\r\n LinearScale,\r\n PointElement,\r\n LineElement,\r\n BarElement,\r\n Title,\r\n Tooltip,\r\n Legend,\r\n} from 'chart.js';\r\nimport { Line, Bar } from 'react-chartjs-2';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport apiService from '@services/apiService';\r\nimport {\r\n selectAggregateDataFilteredQuarterlyAveragesByYear,\r\n selectAggregateDataFilteredTotalsByQuarterByYear,\r\n selectAggregateDataFilteredTotalsByYear,\r\n} from '@redux/selectors/DataPortalSelector';\r\nimport Col from 'react-bootstrap/Col';\r\nimport Row from 'react-bootstrap/Row';\r\nimport Dropdown from 'react-bootstrap/Dropdown';\r\nimport Form from 'react-bootstrap/Form';\r\nimport DropdownButton from 'react-bootstrap/DropdownButton';\r\nimport DatePicker from 'react-datepicker';\r\n\r\nconst AggregateDataPage = () => {\r\n const [startDate, setStartDate] = useState(new Date().setFullYear(new Date().getFullYear() - 11));\r\n const [endDate, setEndDate] = useState(new Date().setFullYear(new Date().getFullYear() - 1));\r\n const [showFilteredQuarterlyAveragesByYear, setShowFilteredQuarterlyAveragesByYear] = useState({ sales: true, adjusted: true });\r\n const [showFilteredTotalsByQuarterByYear, setShowFilteredTotalsByQuarterByYear] = useState({ sales: true, adjusted: true });\r\n const [showFilteredTotalsByYear, setShowFilteredTotalsByYear] = useState({ sales: true, adjusted: true });\r\n\r\n const handleFilteredQuarterlyAveragesByYearSalesToggled = () => {\r\n setShowFilteredQuarterlyAveragesByYear({ ...showFilteredQuarterlyAveragesByYear, sales: !showFilteredQuarterlyAveragesByYear.sales });\r\n };\r\n\r\n const handleFilteredQuarterlyAveragesByYearAdjustedToggled = () => {\r\n setShowFilteredQuarterlyAveragesByYear({ ...showFilteredQuarterlyAveragesByYear, adjusted: !showFilteredQuarterlyAveragesByYear.adjusted });\r\n };\r\n\r\n const handleFilteredTotalsByQuarterByYearSalesToggled = () => {\r\n setShowFilteredTotalsByQuarterByYear({ ...showFilteredTotalsByQuarterByYear, sales: !showFilteredTotalsByQuarterByYear.sales });\r\n };\r\n\r\n const handleFilteredTotalsByQuarterByYearAdjustedToggled = () => {\r\n setShowFilteredTotalsByQuarterByYear({ ...showFilteredTotalsByQuarterByYear, adjusted: !showFilteredTotalsByQuarterByYear.adjusted });\r\n };\r\n\r\n const handleFilteredTotalsByYearSalesToggled = () => {\r\n setShowFilteredTotalsByYear({ ...showFilteredTotalsByYear, sales: !showFilteredTotalsByYear.sales });\r\n };\r\n\r\n const handleFilteredTotalsByYearAdjustedToggled = () => {\r\n setShowFilteredTotalsByYear({ ...showFilteredTotalsByYear, adjusted: !showFilteredTotalsByYear.adjusted });\r\n };\r\n\r\n const filteredQuarterlyAveragesByYear = useSelector(state => selectAggregateDataFilteredQuarterlyAveragesByYear(state, { startDate, endDate }));\r\n const filteredTotalsByQuarterByYear = useSelector(state => selectAggregateDataFilteredTotalsByQuarterByYear(state, { startDate, endDate }));\r\n const filteredTotalsByYear = useSelector(state => selectAggregateDataFilteredTotalsByYear(state, { startDate, endDate }));\r\n\r\n ChartJS.register(\r\n CategoryScale,\r\n LinearScale,\r\n PointElement,\r\n LineElement,\r\n BarElement,\r\n Title,\r\n Tooltip,\r\n Legend,\r\n );\r\n\r\n ChartJS.defaults.elements.line.tension = 0.3;\r\n ChartJS.defaults.font.family = 'Poppins, sans-serif';\r\n\r\n const options = {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n datalabels: {\r\n display: false,\r\n },\r\n legend: {\r\n display: false,\r\n },\r\n title: {\r\n display: false,\r\n },\r\n },\r\n };\r\n\r\n const quarterlyData = {\r\n chartTitle: 'Quarterly Residential Sales',\r\n labels: filteredTotalsByQuarterByYear.labels,\r\n datasets: [\r\n {\r\n label: 'Actual',\r\n data: filteredTotalsByQuarterByYear.sales,\r\n borderColor: 'rgb(255, 166, 87)',\r\n backgroundColor: 'rgba(255, 166, 87, 0.5)',\r\n },\r\n {\r\n label: 'Seasonally Adjusted',\r\n data: filteredTotalsByQuarterByYear.adjusted,\r\n borderColor: 'rgb(111, 174, 173)',\r\n backgroundColor: 'rgba(111, 174, 173, 0.5)',\r\n },\r\n ],\r\n };\r\n\r\n const yearlyData = {\r\n chartTitle: 'Annual Residential Sales',\r\n labels: filteredTotalsByYear.labels,\r\n datasets: [\r\n {\r\n label: 'Actual',\r\n data: filteredTotalsByYear.sales,\r\n borderColor: 'rgb(255, 99, 132)',\r\n backgroundColor: 'rgba(255, 99, 132, 0.5)',\r\n },\r\n {\r\n label: 'Seasonally Adjusted',\r\n data: filteredTotalsByYear.adjusted,\r\n borderColor: 'rgb(54, 162, 235)',\r\n backgroundColor: 'rgba(54, 162, 235, 0.5)',\r\n },\r\n ],\r\n };\r\n\r\n const quarterlyAveragesData = {\r\n chartTitle: 'Quarterly Average Residential Sales',\r\n labels: filteredQuarterlyAveragesByYear.labels,\r\n datasets: [\r\n {\r\n type: 'bar',\r\n label: 'Actual',\r\n data: filteredQuarterlyAveragesByYear.sales,\r\n borderColor: 'rgb(153, 102, 255)',\r\n backgroundColor: 'rgba(153, 102, 255, 0.5)',\r\n },\r\n {\r\n type: 'line',\r\n label: 'Seasonally Adjusted',\r\n data: filteredQuarterlyAveragesByYear.adjusted,\r\n borderColor: 'rgb(255, 205, 86)',\r\n backgroundColor: 'rgba(255, 205, 86, 0.5)',\r\n },\r\n ],\r\n };\r\n\r\n const filteredQuarterlyAveragesData = {\r\n ...quarterlyAveragesData,\r\n datasets: quarterlyAveragesData.datasets.filter(\r\n dataset => (\r\n dataset.label === 'Actual' && showFilteredQuarterlyAveragesByYear.sales\r\n ) || (\r\n dataset.label === 'Seasonally Adjusted' && showFilteredQuarterlyAveragesByYear.adjusted\r\n ),\r\n ),\r\n };\r\n\r\n const filteredTotalsByQuarterByYearData = {\r\n ...quarterlyData,\r\n datasets: quarterlyData.datasets.filter(\r\n dataset => (\r\n dataset.label === 'Actual' && showFilteredTotalsByQuarterByYear.sales\r\n ) || (\r\n dataset.label === 'Seasonally Adjusted' && showFilteredTotalsByQuarterByYear.adjusted\r\n ),\r\n ),\r\n };\r\n\r\n const filteredTotalsByYearData = {\r\n ...yearlyData,\r\n datasets: yearlyData.datasets.filter(\r\n dataset => (\r\n dataset.label === 'Actual' && showFilteredTotalsByYear.sales\r\n ) || (\r\n dataset.label === 'Seasonally Adjusted' && showFilteredTotalsByYear.adjusted\r\n ),\r\n ),\r\n };\r\n\r\n const onChange = dates => {\r\n const [start, end] = dates;\r\n setStartDate(start);\r\n setEndDate(end);\r\n };\r\n\r\n const handleDownloadAll = async () => {\r\n try {\r\n const response = await apiService.DataPortal.downloadAllAggregateData();\r\n // Create a temp URL for the file blob\r\n const fileUrl = window.URL.createObjectURL(new Blob([response]));\r\n // Create a temp link and click it to download the file\r\n const link = document.createElement('a');\r\n link.href = fileUrl;\r\n link.setAttribute('download', 'City of Calgary Quarterly Adjusted (all data).xlsx');\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n } catch (error) {\r\n // TODO: RollBar this error\r\n console.error(error);\r\n }\r\n };\r\n\r\n const handleDownloadFiltered = async data => {\r\n try {\r\n const array = [];\r\n for (let i = 0; i < data.labels.length; i += 1) {\r\n const obj = {\r\n period: data.labels[i],\r\n sales: data.datasets[0].data[i],\r\n seasonallyAdjusted: data.datasets[1].data[i],\r\n };\r\n array.push(obj);\r\n }\r\n const response = await apiService.DataPortal.downloadFilteredAggregateData(array);\r\n // Create a temp URL for the file blob\r\n const fileUrl = window.URL.createObjectURL(new Blob([response]));\r\n // Create a temp link and click it to download the file\r\n const link = document.createElement('a');\r\n const startYear = new Date(startDate).getFullYear();\r\n const endYear = new Date(endDate).getFullYear();\r\n link.href = fileUrl;\r\n link.setAttribute('download', `City of Calgary Adjusted - ${data.chartTitle} (${startYear} - ${endYear}).xlsx`);\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n } catch (error) {\r\n // TODO: RollBar this error\r\n console.error(error);\r\n }\r\n };\r\n\r\n const DateWithAddOnCalendar = forwardRef(({\r\n className: _className, val, onClick, ...remaining\r\n }, ref) => (\r\n \r\n
\r\n \r\n {lockingAuthorized\r\n ? (\r\n
\r\n \r\n \r\n
\r\n ));\r\n\r\n DateWithAddOnCalendar.propTypes = {\r\n className: PropTypes.string, val: PropTypes.string, onClick: PropTypes.func,\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Aggregate\r\n Data\r\n Calgary, Alberta\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Quarterly Adjusted\r\n Data and Chart (.xlsx)\r\n
\r\n \r\n\r\n \r\n
\r\n \r\n {title}\r\n
\r\nThere was an error updating your file name. Please contact Pillar 9 Support for assistance.
',\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-warning btn-lg mr-2 swal-question-agent-submit-yes',\r\n },\r\n showConfirmButton: true,\r\n confirmButtonText: 'OK',\r\n });\r\n }\r\n };\r\n\r\n const onDownloadClicked = async (e, row) => {\r\n e.preventDefault();\r\n\r\n try {\r\n const response = await apiService.DataPortal.requestPresignedLink({ UniqueID: row.UniqueID, FileName: row.FileName, UserID: row.UserID });\r\n if (isEmpty(response.error)) {\r\n const s3Link = response;\r\n const link = document.createElement('a');\r\n link.href = s3Link;\r\n link.setAttribute('download', `${row.UserFileName}`);\r\n link.style.display = 'none';\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n } else {\r\n throw new Error(response);\r\n }\r\n } catch (error) {\r\n // TODO: Rollbar this error\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Download Error',\r\n html: 'There was an error downloading your file. Please contact Pillar 9 Support for assistance.
',\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-warning btn-lg mr-2 swal-question-agent-submit-yes',\r\n },\r\n showConfirmButton: true,\r\n confirmButtonText: 'OK',\r\n });\r\n }\r\n };\r\n\r\n const actionsFormatter = (cell, row) => (\r\n{cellContent}
,\r\n },\r\n {\r\n dataField: 'FileSize',\r\n text: 'Size',\r\n headerSortingClasses: headerSortClasses,\r\n headerAttrs: { className: 'sorting' },\r\n sort: true,\r\n align: 'center',\r\n headerStyle: { width: '100px' },\r\n formatter: cellContent => (cellContent === 'Waiting...'\r\n ? \r\n : cellContent),\r\n },\r\n {\r\n dataField: 'RecordCount',\r\n text: 'Records',\r\n headerSortingClasses: headerSortClasses,\r\n headerAttrs: { className: 'sorting' },\r\n sort: true,\r\n align: 'center',\r\n headerStyle: { width: '100px' },\r\n formatter: cellContent => (isUndefined(cellContent)\r\n ? \r\n : cellContent),\r\n },\r\n {\r\n dataField: 'DateLinkTimeToExpiry',\r\n text: 'Expires in',\r\n headerSortingClasses: headerSortClasses,\r\n headerAttrs: { className: 'sorting' },\r\n sort: false,\r\n hidden: true,\r\n },\r\n {\r\n dataField: 'DateCreatedTimeElapsed',\r\n text: 'Created',\r\n headerSortingClasses: headerSortClasses,\r\n headerAttrs: { className: 'sorting' },\r\n sort: true,\r\n headerStyle: { width: '150px' },\r\n },\r\n ], []);\r\n\r\n const expandRow = {\r\n onlyOneExpanding: true,\r\n showExpandColumn: true,\r\n expandByColumnOnly: true,\r\n expandColumnPosition: 'right',\r\n classes: 'text-center',\r\n renderer: row => (\r\n\r\n Criteria:\r\n \r\n {row.SqlWhereClause}\r\n
\r\n ),\r\n expandHeaderColumnRenderer: ({ isAnyExpands }) => {\r\n if (isAnyExpands) {\r\n return (\r\n \r\n {\r\n options.map(option => {\r\n const isSelect = currSizePerPage === `${option.page}`;\r\n return (\r\n onSizePerPageChange(option.page)}\r\n >\r\n {option.text}\r\n \r\n );\r\n })\r\n }\r\n
\r\n );\r\n\r\n const customTotal = (from, to, size) => (\r\n \r\n \r\n {`Showing rows ${from} to ${to} of ${size}`}\r\n \r\n );\r\n\r\n const options = {\r\n firstPageText: '<<',\r\n hidePageListOnlyOnePage: true,\r\n lastPageText: '>>',\r\n nextPageText: '>',\r\n paginationTotalRenderer: customTotal,\r\n prePageText: '<',\r\n showTotal: true,\r\n sizePerPageList: [],\r\n sizePerPage: 25,\r\n sizePerPageRenderer,\r\n };\r\n\r\n return (\r\n <>\r\n There was an error updating your saved criteria name. Please contact Pillar 9 Support for assistance.
',\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-warning btn-lg mr-2 swal-question-agent-submit-yes',\r\n },\r\n showConfirmButton: true,\r\n confirmButtonText: 'OK',\r\n });\r\n }\r\n };\r\n\r\n const onEditClick = row => handleOpenEditCriteriaNameModal(row);\r\n\r\n const actionsFormatter = (cell, row) => (\r\n{cellContent}
,\r\n },\r\n {\r\n dataField: 'NumberOfRuns',\r\n text: 'Runs',\r\n headerSortingClasses: headerSortClasses,\r\n headerAttrs: { className: 'sorting' },\r\n sort: true,\r\n headerStyle: { width: '100px' },\r\n },\r\n {\r\n dataField: 'DateCreatedTimeElapsed',\r\n text: 'Last Run',\r\n headerSortingClasses: headerSortClasses,\r\n headerAttrs: { className: 'sorting' },\r\n sort: true,\r\n headerStyle: { width: '150px' },\r\n },\r\n ], []);\r\n\r\n const expandRow = {\r\n onlyOneExpanding: true,\r\n showExpandColumn: true,\r\n expandByColumnOnly: true,\r\n expandColumnPosition: 'right',\r\n classes: 'text-center',\r\n renderer: row => (\r\n\r\n Criteria:\r\n \r\n {row.SqlWhereClause}\r\n
\r\n ),\r\n expandHeaderColumnRenderer: ({ isAnyExpands }) => {\r\n if (isAnyExpands) {\r\n return (\r\n \r\n {\r\n options.map(option => {\r\n const isSelect = currSizePerPage === `${option.page}`;\r\n return (\r\n onSizePerPageChange(option.page)}\r\n >\r\n {option.text}\r\n \r\n );\r\n })\r\n }\r\n
\r\n );\r\n\r\n const customTotal = (from, to, size) => (\r\n \r\n \r\n {`Showing rows ${from} to ${to} of ${size}`}\r\n \r\n );\r\n\r\n const options = {\r\n firstPageText: '<<',\r\n hidePageListOnlyOnePage: true,\r\n lastPageText: '>>',\r\n nextPageText: '>',\r\n paginationTotalRenderer: customTotal,\r\n prePageText: '<',\r\n showTotal: true,\r\n sizePerPageList: [],\r\n sizePerPage: 25,\r\n sizePerPageRenderer,\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n ));\r\n\r\n DateWithAddOnCalendar.propTypes = {\r\n className: PropTypes.string, val: PropTypes.string, onClick: PropTypes.func,\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n ), []);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Search\r\n Data\r\n
\r\n\r\n {isEditable && (\r\n \r\n \r\n \r\n )}\r\n {isAuditable && (\r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nAgentActionButtons.propTypes = {\r\n viewClicked: PropTypes.func.isRequired,\r\n auditClicked: PropTypes.func.isRequired,\r\n isAuditable: PropTypes.bool.isRequired,\r\n isEditable: PropTypes.bool.isRequired,\r\n currRow: PropTypes.shape({\r\n UniqueID: PropTypes.number,\r\n }),\r\n};\r\n\r\nexport default AgentActionButtons;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport ToolkitProvider from 'react-bootstrap-table2-toolkit';\r\nimport paginationFactory from 'react-bootstrap-table2-paginator';\r\nimport { isEmpty } from 'lodash';\r\n\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\nimport TableSearchInputGroup from '@components/smartAdminUI/input/TableSearchInputGroup';\r\nimport AgentActionButtons from './actionButtons/AgentActionButtons';\r\nimport Button from '../smartAdminUI/Button';\r\n\r\nconst AgentsTable = ({\r\n displayData,\r\n onAgentSelect,\r\n onAuditClick,\r\n isModal = false,\r\n}) => {\r\n // NOTE: P9 mentioned that isCopiable will always be false so its not included\r\n const actionsFormatter = (cell, row) => (\r\n \r\n {\r\n options.map(option => {\r\n const isSelect = currSizePerPage === `${option.page}`;\r\n return (\r\n onSizePerPageChange(option.page)}\r\n >\r\n {option.text}\r\n \r\n );\r\n })\r\n }\r\n
\r\n );\r\n\r\n const customTotal = (from, to, size) => (\r\n \r\n \r\n {`Showing rows ${from} to ${to} of ${size}`}\r\n \r\n );\r\n\r\n const options = {\r\n firstPageText: '<<',\r\n hidePageListOnlyOnePage: true,\r\n lastPageText: '>>',\r\n nextPageText: '>',\r\n paginationTotalRenderer: customTotal,\r\n prePageText: '<',\r\n showTotal: true,\r\n sizePerPageList: [],\r\n sizePerPage: isModal ? 5 : 10,\r\n sizePerPageRenderer,\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n Search\r\n Agent\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SearchAgentPage;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport ToolkitProvider from 'react-bootstrap-table2-toolkit';\r\nimport paginationFactory from 'react-bootstrap-table2-paginator';\r\nimport { isEmpty } from 'lodash';\r\n\r\nimport ListingTypeIcons from '@components/table/icons/ListingTypeIcons';\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\nimport TableSearchInputGroup from '@components/smartAdminUI/input/TableSearchInputGroup';\r\nimport ListingActionButtons from '@components/table/actionButtons/ListingActionButtons';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport AgentAvatar from '@components/table/avatar/AgentAvatar';\r\n\r\nconst ListingsTable = ({\r\n displayData,\r\n onListingSelect,\r\n onCopyClick,\r\n onAuditClick,\r\n isModal = false,\r\n}) => {\r\n const actionsFormatter = (cell, row) => (\r\n \r\n dispatch(loadFormDefinition('create', 'agent', null, null, 'agentACL'))}>\r\n \r\n Create Agent\r\n \r\n )}\r\n >\r\n
\r\n {!isNull(searchResults) && (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n {\r\n options.map(option => {\r\n const isSelect = currSizePerPage === `${option.page}`;\r\n return (\r\n onSizePerPageChange(option.page)}\r\n >\r\n {option.text}\r\n \r\n );\r\n })\r\n }\r\n
\r\n );\r\n\r\n const customTotal = (from, to, size) => (\r\n \r\n \r\n {`Showing rows ${from} to ${to} of ${size}`}\r\n \r\n );\r\n\r\n const options = {\r\n firstPageText: '<<',\r\n hidePageListOnlyOnePage: true,\r\n lastPageText: '>>',\r\n nextPageText: '>',\r\n paginationTotalRenderer: customTotal,\r\n prePageText: '<',\r\n showTotal: true,\r\n sizePerPageList: [],\r\n sizePerPage: isModal ? 5 : 10,\r\n sizePerPageRenderer,\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n Search\r\n Listings\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SearchListingsPage;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport isEmpty from 'lodash/isEmpty';\r\n\r\n/*\r\n SmartAdmin input group - default input element for forms\r\n \r\n \r\n
\r\n {!isNull(searchResults) && (\r\n \r\n {mainActions.ListingsCreate && (\r\n \r\n \r\n Create Listing\r\n \r\n )}\r\n
\r\n \r\n )}\r\n >\r\n \r\n \r\n Please note that the search will only return listings you are authorized to see.\r\n
\r\n\r\n \r\n \r\n
\r\n )}\r\n \r\n {!isEmpty(label) ? : null}\r\n
\r\n );\r\n};\r\n\r\nInputGroup.propTypes = {\r\n id: PropTypes.string,\r\n label: PropTypes.string,\r\n placeholder: PropTypes.string.isRequired,\r\n value: PropTypes.node,\r\n type: PropTypes.string.isRequired,\r\n};\r\n\r\nInputGroup.defaultProps = {\r\n id: '',\r\n label: null,\r\n};\r\n\r\nexport default InputGroup;\r\n","import React from 'react';\r\nimport Select from 'react-select';\r\n\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { searchOffices, clearOfficeSearch } from '@redux/modules/office';\r\n\r\nimport useObjectState from '@hooks/useObjectState';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport InputGroup from '@components/smartAdminUI/input/InputGroup';\r\n\r\nconst options = [\r\n { label: 'Active', value: 'A' },\r\n { label: 'Inactive', value: 'I' },\r\n { label: 'Pending', value: 'P' },\r\n { label: 'Suspended', value: 'S' },\r\n { label: 'Terminated', value: 'T' },\r\n];\r\n\r\nconst initialState = {\r\n OfficeMlsId: '',\r\n OfficeManagerMlsId: '',\r\n OfficeManagerFullName: '',\r\n officeName: '',\r\n OfficeCity: '',\r\n OfficeStatus: options[0],\r\n};\r\nconst OfficeAdvancedSearch = () => {\r\n const officeSearchLoading = useSelector(state => state.office.isLoading);\r\n\r\n // custom hook, takes a key:value pair an merges into state object (immutably)\r\n const [searchBarState, setSearchBarState] = useObjectState(initialState);\r\n const dispatch = useDispatch();\r\n\r\n const handleSubmit = e => {\r\n e.preventDefault();\r\n dispatch(searchOffices({\r\n ...searchBarState,\r\n OfficeStatus: searchBarState.OfficeStatus.value,\r\n }));\r\n };\r\n const handleReset = () => {\r\n setSearchBarState(initialState);\r\n dispatch(clearOfficeSearch());\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default OfficeAdvancedSearch;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from '@components/smartAdminUI/Button';\r\n\r\nconst OfficeActionButtons = ({\r\n viewClicked,\r\n auditClicked,\r\n currRow,\r\n isEditable,\r\n isAuditable,\r\n}) => {\r\n const onViewClick = () => viewClicked(currRow);\r\n const onAuditClick = () => auditClicked(currRow);\r\n\r\n return (\r\n \r\n {isEditable && (\r\n \r\n \r\n \r\n )}\r\n {isAuditable && (\r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\nOfficeActionButtons.propTypes = {\r\n viewClicked: PropTypes.func.isRequired,\r\n auditClicked: PropTypes.func.isRequired,\r\n currRow: PropTypes.shape({\r\n UniqueID: PropTypes.number,\r\n }),\r\n isAuditable: PropTypes.bool.isRequired,\r\n isEditable: PropTypes.bool.isRequired,\r\n};\r\n\r\nexport default OfficeActionButtons;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport ToolkitProvider from 'react-bootstrap-table2-toolkit';\r\nimport paginationFactory from 'react-bootstrap-table2-paginator';\r\nimport { isEmpty } from 'lodash';\r\n\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\nimport TableSearchInputGroup from '@components/smartAdminUI/input/TableSearchInputGroup';\r\nimport OfficeActionButtons from './actionButtons/OfficeActionButtons';\r\nimport Button from '../smartAdminUI/Button';\r\n\r\nconst OfficesTable = ({\r\n displayData,\r\n onOfficeSelect,\r\n onAuditClick,\r\n isModal = false,\r\n}) => {\r\n // NOTE: P9 mentioned that isCopiable will always be false so its not included\r\n const actionsFormatter = (cell, row) => (\r\n \r\n {\r\n options.map(option => {\r\n const isSelect = currSizePerPage === `${option.page}`;\r\n return (\r\n onSizePerPageChange(option.page)}\r\n >\r\n {option.text}\r\n \r\n );\r\n })\r\n }\r\n
\r\n );\r\n\r\n const customTotal = (from, to, size) => (\r\n \r\n \r\n {`Showing rows ${from} to ${to} of ${size}`}\r\n \r\n );\r\n\r\n const options = {\r\n firstPageText: '<<',\r\n hidePageListOnlyOnePage: true,\r\n lastPageText: '>>',\r\n nextPageText: '>',\r\n paginationTotalRenderer: customTotal,\r\n prePageText: '<',\r\n showTotal: true,\r\n sizePerPageList: [],\r\n sizePerPage: isModal ? 5 : 10,\r\n sizePerPageRenderer,\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n Search\r\n Offices\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SearchOfficePage;\r\n","/* eslint-disable jsx-a11y/control-has-associated-label */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Skeleton from '@mui/material/Skeleton';\r\n\r\nconst ViewLoader = ({ type }) => (\r\n <>\r\n \r\n dispatch(loadFormDefinition('create', 'office', null, null, 'officeACL'))}>\r\n \r\n Create Office\r\n \r\n )}\r\n >\r\n
\r\n {!isNull(searchResults) && (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n);\r\n\r\nViewLoader.propTypes = {\r\n type: PropTypes.string.isRequired,\r\n};\r\n\r\nexport default ViewLoader;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useQueryParam, StringParam } from 'use-query-params';\r\n\r\nimport { loadAgentPhoto, setCurrentAgent } from '@redux/modules/agent';\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\nimport { getAgentSelected, selectAgentPreferredPhoto, selectAgentPreferredPhotoDetails } from '@redux/selectors/AgentSelector';\r\nimport { addTeamMember, removeTeamMember, searchTeamMember } from '@redux/modules/teamsManagement';\r\nimport { selectCanBeImpersonatedBy, selectCanImpersonate } from '@redux/selectors/TeamsManagementSelector';\r\n\r\nimport useRowLock from '@hooks/useRowLock';\r\nimport useAcl from '@hooks/useAcl';\r\n\r\nimport TeamMembersTable from '@components/table/TeamMembersTable';\r\nimport TeamLeadersTable from '@components/table/TeamLeadersTable';\r\nimport AgentLookupModal from '@components/form/formComponents/inputGroups/agentLookup/AgentLookupModal';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport ViewLoader from '@components/loaders/ViewLoader';\r\n\r\nimport Swal from 'sweetalert2';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\nimport sortBy from 'lodash/sortBy';\r\nimport isEmpty from 'lodash/isEmpty';\r\n\r\nconst operationType = 'edit';\r\nconst definitionType = 'agent';\r\n\r\nconst agentAttributesWhiteList = [\r\n 'CellPhone',\r\n 'CompanyName',\r\n 'PrimaryWebsite',\r\n 'TerminationDate',\r\n 'MemberFax',\r\n 'MemberAddress1',\r\n 'MemberCity',\r\n 'MemberPostalCode',\r\n 'MemberPreferredPhone',\r\n 'MemberPreferredPhoneExt',\r\n 'OfficePhone',\r\n];\r\n\r\nconst ViewAgents = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n\r\n const currAgent = useSelector(getAgentSelected);\r\n const currentAgentPhotoDetails = useSelector(selectAgentPreferredPhotoDetails);\r\n const currentAgentPhoto = useSelector(selectAgentPreferredPhoto);\r\n const canBeImpersonatedByData = useSelector(selectCanBeImpersonatedBy);\r\n const canImpersonateData = useSelector(selectCanImpersonate);\r\n const memoizedAgentEntries = useMemo(() => (currAgent ? Object.entries(currAgent) : []), [currAgent]);\r\n const memberName = useMemo(() => currAgent?.MemberFullName ?? currAgent?.MemberFirstName.concat(' ', currAgent?.MemberLastName), [currAgent]);\r\n\r\n const [currentAgentPhotoURL, setCurrentAgentPhotoURL] = useState(null);\r\n const [editButtonClicked, setEditButtonClicked] = useState(false);\r\n\r\n const [urlParam, setUrlParam] = useQueryParam('UniqueID', StringParam);\r\n\r\n const jsonBody = {\r\n action: 'select',\r\n where: {\r\n clause: [],\r\n },\r\n };\r\n\r\n const rowLockEntity = useMemo(() => ({ type: 'agent', id: currAgent?.UniqueID }), [currAgent]);\r\n\r\n const {\r\n lockingAuthorized,\r\n locked,\r\n lockedBy,\r\n lockedByMe,\r\n lastUpdatedOn,\r\n lastCheckedOn,\r\n checkStatus,\r\n createLock,\r\n removeLock,\r\n takeoverLock,\r\n discardChanges,\r\n LockMessage,\r\n LockOwnerMessage,\r\n } = useRowLock({ rowLockEntity });\r\n\r\n const getCurrentAgentPhoto = photoURL => {\r\n dispatch(loadAgentPhoto(photoURL));\r\n };\r\n\r\n const onEditAgent = () => {\r\n if (currAgent) {\r\n dispatch(loadFormDefinition(operationType, definitionType, null, currAgent.UniqueID, 'agentACL'));\r\n }\r\n };\r\n\r\n const onClickEdit = () => {\r\n setEditButtonClicked(true);\r\n createLock(onEditAgent);\r\n };\r\n\r\n const {\r\n getAgentAcl,\r\n canEditForm,\r\n canAddTeamMember, canAddToTeam, canViewTeam, canEditTeam,\r\n isAllComplete,\r\n } = useAcl();\r\n const isAllAclComplete = isAllComplete();\r\n\r\n useEffect(() => {\r\n if (urlParam) {\r\n jsonBody.where.clause.push({ name: 'UniqueID', value: urlParam });\r\n dispatch(setCurrentAgent(jsonBody));\r\n }\r\n }, []);\r\n\r\n /*\r\n This has to be done using location. Currently, when the user loads a form, it redirects the user to the\r\n create/edit page. When this happens, it clears out the path and search values in the location object.\r\n We can't memo the location and use that as a comparison, because technically the locations will be\r\n the same on the reload, so we can't reset the search value in the location object.\r\n */\r\n useEffect(() => {\r\n if (location?.search === '') {\r\n if (currAgent) {\r\n setUrlParam(currAgent?.UniqueID, 'replaceIn');\r\n }\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (currAgent?.UniqueID) {\r\n // Retrieve the teams details for current agent.\r\n dispatch(searchTeamMember({ targetMemberkey: currAgent.UniqueID }));\r\n\r\n // retrieves EDIT and COPY permissions for agent\r\n getAgentAcl({\r\n action: 'view',\r\n formname: 'Agent',\r\n uniqueId: currAgent.UniqueID,\r\n });\r\n\r\n // retrieves form permissions for agent\r\n getAgentAcl({\r\n action: 'forms',\r\n formname: 'Agent',\r\n uniqueId: currAgent.UniqueID,\r\n });\r\n\r\n if (location?.search === '' || location?.search !== currAgent?.UniqueID) {\r\n setUrlParam(currAgent?.UniqueID, 'replaceIn');\r\n }\r\n }\r\n }, [currAgent]);\r\n\r\n useEffect(() => {\r\n if (currentAgentPhotoDetails?.URL) {\r\n getCurrentAgentPhoto(currentAgentPhotoDetails.URL);\r\n }\r\n }, [currentAgentPhotoDetails]);\r\n\r\n useEffect(() => {\r\n if (currentAgentPhotoURL) URL.revokeObjectURL(currentAgentPhotoURL);\r\n if (currentAgentPhoto) setCurrentAgentPhotoURL(URL.createObjectURL(currentAgentPhoto));\r\n return () => currentAgentPhotoURL && URL.revokeObjectURL(currentAgentPhotoURL);\r\n }, [currentAgentPhoto]);\r\n\r\n const onAddMemberToCurrentAgentTeam = async member => {\r\n if (!(currAgent?.UniqueID && member?.UniqueID)) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Adding Member...',\r\n title: '',\r\n showConfirmButton: false,\r\n });\r\n\r\n try {\r\n const success = await dispatch(addTeamMember({ targetMemberkey: member.UniqueID, targetTeamKey: currAgent.UniqueID }));\r\n\r\n if (success) {\r\n Swal.fire({\r\n position: 'center',\r\n title: 'Member Added',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n });\r\n // Refresh the teams details for current agent.\r\n dispatch(searchTeamMember({ targetMemberkey: currAgent.UniqueID }));\r\n } else {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Added',\r\n html: `${member.MemberFullName} could not be added at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotAdded',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onAddMemberToCurrentAgentTeam', `${member.MemberFullName} Could not be added. Please contact support.`);\r\n }\r\n } catch (err) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Added',\r\n html: `${member.MemberFullName} could not be added at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotAdded',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onAddMemberToCurrentAgentTeam', err);\r\n }\r\n };\r\n\r\n const onAddCurrentAgentToTeam = async member => {\r\n if (!(currAgent?.UniqueID && member?.UniqueID)) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Adding Member...',\r\n title: '',\r\n showConfirmButton: false,\r\n });\r\n\r\n try {\r\n const success = await dispatch(addTeamMember({ targetMemberkey: currAgent.UniqueID, targetTeamKey: member.UniqueID }));\r\n\r\n if (success) {\r\n Swal.fire({\r\n position: 'center',\r\n title: 'Member Added',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n });\r\n // Refresh the teams details for current agent.\r\n dispatch(searchTeamMember({ targetMemberkey: currAgent.UniqueID }));\r\n } else {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Added',\r\n html: `${member.MemberFullName} could not be added at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotAdded',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onAddCurrentAgentToTeam', `${currAgent.MemberFullName} Could not be added. Please contact support.`);\r\n }\r\n } catch (err) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Added',\r\n html: `${member.MemberFullName} could not be added at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotAdded',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onAddCurrentAgentToTeam', err);\r\n }\r\n };\r\n\r\n const onRemoveMemberFromCurrentAgentTeam = async member => {\r\n if (!(currAgent?.UniqueID && member?.TeamMemberKeyNumeric)) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Removing Member...',\r\n title: '',\r\n showConfirmButton: false,\r\n });\r\n\r\n try {\r\n const success = await dispatch(removeTeamMember({ targetMemberkey: member.TeamMemberKeyNumeric, targetTeamKey: currAgent.UniqueID }));\r\n\r\n Swal.fire({\r\n position: 'center',\r\n title: 'Member Removed',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n });\r\n\r\n if (success) {\r\n // Refresh the teams details for current agent.\r\n dispatch(searchTeamMember({ targetMemberkey: currAgent.UniqueID }));\r\n } else {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Removed',\r\n html: `${member.MemberFullName} could not be removed at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotRemoved',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onRemoveMemberFromCurrentAgentTeam', `${member.MemberFullName} Could not be removed. Please contact support.`);\r\n }\r\n } catch (err) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Removed',\r\n html: `${member.MemberFullName} could not be removd at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotRemoved',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onRemoveMemberFromCurrentAgentTeam', err);\r\n }\r\n };\r\n\r\n const onRemoveCurrentAgentFromTeam = async member => {\r\n if (!(currAgent?.UniqueID && member?.TeamLeadKeyNumeric)) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Removing Member...',\r\n title: '',\r\n showConfirmButton: false,\r\n });\r\n\r\n try {\r\n const success = await dispatch(removeTeamMember({ targetMemberkey: currAgent.UniqueID, targetTeamKey: member.TeamLeadKeyNumeric }));\r\n\r\n if (success) {\r\n // Refresh the teams details for current agent.\r\n Swal.fire({\r\n position: 'center',\r\n title: 'Member Removed',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n });\r\n dispatch(searchTeamMember({ targetMemberkey: currAgent.UniqueID }));\r\n } else {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Removed',\r\n html: `${member.MemberFullName} could not be removed at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotRemoved',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onRemoveCurrentAgentFromTeam', `${currAgent.MemberFullName} Could not be removed. Please contact support.`);\r\n }\r\n } catch (err) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Removed',\r\n html: `${member.MemberFullName} could not be removed at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotRemoved',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onRemoveCurrentAgentFromTeam', err);\r\n }\r\n };\r\n\r\n if (currAgent) {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n { type === 'agent' ? (\r\n
\r\n \r\n \r\n
\r\n ) : (\r\n \r\n { type === 'listings' ? : }\r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n {!isAllAclComplete && !canEditForm ? (\r\n \r\n \r\n View\r\n Agent\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {memberName}
\r\n{currAgent.OfficeName}
\r\n\r\n
\r\n \r\n \r\n {currAgent.MemberDirectPhone}\r\n \r\n
\r\n )}\r\n { !isEmpty(currAgent.MemberEmail) && (\r\n\r\n \r\n \r\n {currAgent.MemberEmail}\r\n \r\n
\r\n )}\r\n\r\n \r\n {canEditForm && (\r\n \r\n \r\n Edit\r\n \r\n )}\r\n \r\n )}\r\n >\r\n \r\n \r\n {sortBy(memoizedAgentEntries).map(([key, value]) => {\r\n if (!agentAttributesWhiteList.includes(key)) return null;\r\n if (value) {\r\n return (\r\n
\r\n \r\n
\r\n | {key.replace(/([a-z])([A-Z])/g, '$1 $2')} | \r\n{value} | \r\n
|---|
\r\n {canViewTeam && (\r\n <>\r\n {canEditTeam && (\r\n <>\r\n
\r\n \r\n )}\r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\nexport default ViewAgents;\r\n","export default __webpack_public_path__ + \"static/media/ShowingTime.9d83d4d9.png\";","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSelector } from 'react-redux';\r\nimport { selectCurrentListing } from '@redux/selectors/ListingSelector';\r\nimport { getUserMlsId, getUserName } from '@redux/selectors/UserSelector';\r\nimport { getImpersonationStatus } from '@redux/selectors/ImpersonationSelector';\r\nimport md5 from 'md5';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport showingTimeIcon from '@images/logos/vendor/ShowingTime.png';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst ShowingTimeWidget = ({ disabled }) => {\r\n const currListing = useSelector(selectCurrentListing);\r\n // eslint-disable-next-line no-unused-vars\r\n const impersonationStatus = useSelector(getImpersonationStatus);\r\n const realUserMlsId = useSelector(getUserMlsId);\r\n const userMlsId = useMemo(() => (impersonationStatus?.ImpersonationActive ? impersonationStatus?.memberMlsId : realUserMlsId), [impersonationStatus]);\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n const getDateTimeNowUTC = () => new Date().toISOString();\r\n const getMD5Signature = () => md5(`${getDateTimeNowUTC() + currListing.ListingID + userMlsId}150535003-T2E8K4`);\r\n\r\n const getCurrentListingAddress = () => {\r\n const streetNumber = currListing.StreetNumber?.toString() ?? '';\r\n const streetName = currListing.StreetName;\r\n const streetSuffix = currListing.StreetSuffix?.toString() ?? '';\r\n const streetDirSuffix = currListing.StreetDirSuffix?.toString() ?? '';\r\n return `${streetNumber} ${streetName} ${streetSuffix} ${streetDirSuffix}`;\r\n };\r\n\r\n const getShowingTimeUrl = () => {\r\n if (!(currListing && userMlsId)) return null;\r\n return `https://setup-sso.showingtime.com/config?\r\n level=listing\r\n &siteid=${encodeURIComponent('CORE.PILLARNINE.I')}\r\n &mlsid=${encodeURIComponent('PILLARNINE')}\r\n &listingid=${encodeURIComponent(currListing.ListingID)}\r\n &userid=${encodeURIComponent(userMlsId)}\r\n &laid=${encodeURIComponent(currListing.ListAgentMlsId)}\r\n &listingoffice=${encodeURIComponent(currListing.ListOfficeMlsId)}\r\n &paddr=${encodeURIComponent(getCurrentListingAddress())}\r\n &pcity=${encodeURIComponent(currListing.City)}\r\n &pstate=${encodeURIComponent(currListing.StateOrProvince)}\r\n &pzip=${encodeURIComponent(currListing.PostalCode)}\r\n &price=${encodeURIComponent(currListing.ListPrice?.toString())}\r\n pstatus=${encodeURIComponent(currListing.StandardStatus)}\r\n &datetime=${encodeURIComponent(getDateTimeNowUTC())}\r\n &signature=${encodeURIComponent(getMD5Signature().toUpperCase())}`.replace(/\\s/g, '');\r\n };\r\n return (\r\n \r\n \r\n \r\n Add\r\n \r\n )\r\n )}\r\n >\r\n
\r\n Who this agent can impersonate:
\r\n\r\n \r\n \r\n Add\r\n \r\n )\r\n )}\r\n >\r\n
\r\n \r\n )}\r\n Who can impersonate this agent:
\r\n\r\n 
\r\n {\r\n const url = getShowingTimeUrl();\r\n if (url) {\r\n window.open(url, '_blank');\r\n gaEventTracker('Opened Showing Time', `${username}`);\r\n }\r\n }}\r\n variant=\"primary\"\r\n disabled={disabled}\r\n >\r\n \r\n ShowingTime\r\n \r\n
\r\n );\r\n};\r\n\r\nShowingTimeWidget.propTypes = {\r\n disabled: PropTypes.bool,\r\n};\r\n\r\nexport default ShowingTimeWidget;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useHistory, useLocation } from 'react-router-dom';\r\nimport { useQueryParam, StringParam } from 'use-query-params';\r\nimport Swal from 'sweetalert2/src/sweetalert2';\r\nimport { useRollbar, useRollbarPerson } from '@rollbar/react';\r\n\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\nimport { getUserName, getUserMlsId } from '@redux/selectors/UserSelector';\r\nimport {\r\n checkForAutoSave,\r\n loadAutoSave,\r\n removeAutoSave,\r\n loadListingById,\r\n loadListingToCopyById,\r\n loadListingPhoto,\r\n loadListingPreferredPhotoDetails,\r\n reloadListingClicked,\r\n} from '@redux/modules/listing';\r\n\r\nimport { getAuditLog } from '@redux/modules/audit';\r\n\r\nimport {\r\n selectCurrentListing,\r\n selectCurrentListingPreferredPhotoDetails,\r\n selectCurrentListingPhoto,\r\n} from '@redux/selectors/ListingSelector';\r\n\r\nimport { listingDict } from '@redux/constants/GeneralConstants';\r\n\r\nimport useRowLock from '@hooks/useRowLock';\r\nimport useAcl from '@hooks/useAcl';\r\nimport useInterval from '@hooks/useInterval';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Modal from '@components/smartAdminUI/Modal';\r\nimport Input from '@components/smartAdminUI/input/InputGroup';\r\nimport ShowingTimeWidget from '@components/widget/ShowingTimeWidget';\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\nimport ViewLoader from '@components/loaders/ViewLoader';\r\n\r\nimport Avatar from '@mui/material/Avatar';\r\nimport startCase from 'lodash/startCase';\r\nimport lowerCase from 'lodash/lowerCase';\r\nimport upperCase from 'lodash/upperCase';\r\nimport isEmpty from 'lodash/isEmpty';\r\nimport sortBy from 'lodash/sortBy';\r\n\r\nimport apiService from '@services/apiService';\r\n\r\nconst operationType = 'edit';\r\nconst definitionType = 'listings';\r\n\r\nconst listingAttributesWhiteList = [\r\n 'ListingID',\r\n 'PropertyType',\r\n 'UnparsedAddress',\r\n 'City',\r\n 'StateOrProvince',\r\n 'PostalCode',\r\n];\r\n\r\nconst statusTasks = {\r\n chgActive: true,\r\n chgPending: true,\r\n chgSold: true,\r\n chgExp: true,\r\n chgWithdrawn: true,\r\n chgTerm: true,\r\n};\r\n\r\nconst otherTasks = {\r\n chgDetails: true,\r\n chgPropertyType: true,\r\n chgLeased: true,\r\n chgMajor: true,\r\n chgDel: true,\r\n};\r\n\r\nconst otherTaskConfig = [\r\n {\r\n taskCode: 'chgDetails',\r\n iconClass: 'far fa-file-edit fa-2x',\r\n buttonText: 'Change Details',\r\n },\r\n {\r\n taskCode: 'chgPropType',\r\n iconClass: 'far fa-exclamation-triangle fa-2x',\r\n buttonText: 'Change Property Type',\r\n },\r\n {\r\n taskCode: 'chgLeased',\r\n iconClass: 'far fa-house-leave fa-2x',\r\n buttonText: 'Change to Leased',\r\n },\r\n {\r\n taskCode: 'chgMajor',\r\n iconClass: 'far fa-database fa-2x',\r\n buttonText: 'Major Correction',\r\n },\r\n {\r\n taskCode: 'chgDel',\r\n iconClass: 'far fa-trash-alt fa-2x',\r\n buttonText: 'Delete Listing',\r\n },\r\n];\r\n\r\nconst statusTaskConfig = [\r\n {\r\n taskCode: 'chgActive',\r\n buttonText: 'Active',\r\n },\r\n {\r\n taskCode: 'chgPending',\r\n buttonText: 'Pending',\r\n },\r\n {\r\n taskCode: 'chgSold',\r\n buttonText: 'Sold',\r\n },\r\n {\r\n taskCode: 'chgTerm',\r\n buttonText: 'Terminated',\r\n },\r\n {\r\n taskCode: 'chgExp',\r\n buttonText: 'Expired',\r\n },\r\n {\r\n taskCode: 'chgWithdrawn',\r\n buttonText: 'Withdrawn',\r\n },\r\n];\r\n\r\nconst ViewListings = () => {\r\n const dispatch = useDispatch();\r\n const history = useHistory();\r\n const location = useLocation();\r\n\r\n const [autoSaveButtonClicked, setAutoSaveButtonClicked] = useState(false);\r\n const [otherBtnArr, setOtherBtnArr] = useState([]);\r\n const [taskBtnArr, setTaskBtnArr] = useState([]);\r\n const [currentListingPhotoUrl, setCurrentListingPhotoUrl] = useState(null);\r\n const [editButtonClicked, setEditButtonClicked] = useState(false);\r\n const [deleteButtonClicked, setDeleteButtonClicked] = useState(false);\r\n const [hideButton, setHideButton] = useState(true);\r\n const [inputString, setInputString] = useState(''); // for ensuring the user of listing deletion\r\n const [isFormLoading, setIsFormLoading] = useState(false);\r\n const [rowLockButtonClicked, setRowLockButtonClicked] = useState(false);\r\n const [canAccessShowingTime, setCanAccessShowingTime] = useState(false);\r\n const [canViewOpenHouses, setCanViewOpenHouses] = useState(false);\r\n\r\n const autoSaveExists = useSelector(state => state.listing.autoSaveExists);\r\n const currListing = useSelector(selectCurrentListing);\r\n const currentListingPhoto = useSelector(selectCurrentListingPhoto);\r\n const currentListingPreferredPhotoDetails = useSelector(selectCurrentListingPreferredPhotoDetails);\r\n\r\n const autoSaveCriteria = useMemo(() => ({ ResourceUnique: currListing?.UniqueID }), [currListing]);\r\n const rowLockEntity = useMemo(() => ({ type: 'listing', id: currListing?.UniqueID }), [currListing]);\r\n\r\n const [urlParam, setUrlParam] = useQueryParam('ListingID', StringParam);\r\n\r\n const listingCode = currListing?.PropertyType?.toString().toLowerCase();\r\n const listingType = useMemo(() => listingDict[listingCode], [listingCode]);\r\n const memoizedListingEntries = useMemo(() => (currListing ? Object.entries(currListing) : []), [currListing]);\r\n const username = useSelector(getUserName);\r\n const userMLSID = useSelector(getUserMlsId);\r\n\r\n const rollbar = useRollbar();\r\n useRollbarPerson({ id: userMLSID, username });\r\n\r\n const jsonBody = {\r\n where: {\r\n clause: [],\r\n },\r\n };\r\n\r\n const {\r\n lockingAuthorized,\r\n locked,\r\n lockedBy,\r\n lockedByMe,\r\n lastUpdatedOn,\r\n lastCheckedOn,\r\n checkStatus,\r\n createLock,\r\n removeLock,\r\n takeoverLock,\r\n discardChanges,\r\n LockMessage,\r\n LockOwnerMessage,\r\n } = useRowLock({ rowLockEntity });\r\n\r\n const checkAutoSave = () => {\r\n if (!autoSaveCriteria?.ResourceUnique) return;\r\n dispatch(checkForAutoSave(autoSaveCriteria));\r\n };\r\n\r\n useEffect(() => {\r\n checkAutoSave();\r\n }, [autoSaveCriteria]);\r\n\r\n /* If autoSave exists, then start to regularly check for autoSave changes. */\r\n useInterval(checkAutoSave, autoSaveExists ? (1000 * 60) : null);\r\n\r\n const {\r\n getListingAcl,\r\n canEditForm, canCopyForm, canAuditForm, formPermissions,\r\n isAllComplete,\r\n } = useAcl();\r\n const isAllAclComplete = isAllComplete();\r\n\r\n useEffect(() => {\r\n if (Object.keys(formPermissions).length > 0) {\r\n setCanAccessShowingTime(formPermissions.showingTime);\r\n setCanViewOpenHouses(formPermissions.openHouse);\r\n }\r\n }, [formPermissions]);\r\n\r\n useEffect(() => {\r\n if (urlParam) {\r\n jsonBody.where.clause.push({ name: 'ListingID', value: urlParam });\r\n dispatch(reloadListingClicked(jsonBody));\r\n }\r\n\r\n let otherButtons = Object.keys(otherTasks).map(key => {\r\n if (otherTasks[key]) return otherTaskConfig.find(btnCfg => btnCfg.taskCode === key);\r\n return null;\r\n });\r\n otherButtons = otherButtons.filter(btn => btn);\r\n setOtherBtnArr(otherButtons);\r\n\r\n let statusButtons = Object.keys(statusTasks).map(key => {\r\n if (statusTasks[key]) return statusTaskConfig.find(btnCfg => btnCfg.taskCode === key);\r\n return null;\r\n });\r\n statusButtons = statusButtons.filter(btn => btn);\r\n setTaskBtnArr(statusButtons);\r\n }, []);\r\n\r\n /*\r\n This has to be done using location. Currently, when the user loads a form, it redirects the user to the\r\n create/edit page. When this happens, it clears out the path and search values in the location object.\r\n We can't memo the location and use that as a comparison, because technically the locations will be\r\n the same on the reload, so we can't reset the search value in the location object.\r\n */\r\n useEffect(() => {\r\n if (location?.search === '') {\r\n setUrlParam(currListing?.ListingID, 'replaceIn');\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (currListing?.UniqueID) {\r\n // retrieves EDIT, COPY and AUDITLOG permissions\r\n getListingAcl({\r\n action: 'view',\r\n uniqueId: currListing.UniqueID,\r\n });\r\n\r\n // retrieves forms accessible to user\r\n getListingAcl({\r\n action: 'forms',\r\n uniqueId: currListing.UniqueID,\r\n });\r\n\r\n if (location?.search === '' || location?.search !== currListing?.ListingID) {\r\n setUrlParam(currListing?.ListingID, 'replaceIn');\r\n }\r\n }\r\n }, [currListing]);\r\n\r\n // for confirming deletion of listing by having the user type the string \"delete\" to confirm\r\n const confirmInput = typedString => {\r\n setInputString(typedString);\r\n\r\n if (typedString === 'delete' && hideButton) {\r\n setHideButton(false); // set submit button to enabled\r\n }\r\n };\r\n\r\n // Build where clause with UniqueID to retrieve records for\r\n const buildWhereClause = values => {\r\n const whereClause = {\r\n where: {\r\n clause: [],\r\n },\r\n };\r\n const valueKeys = Object.keys(values);\r\n\r\n valueKeys.map(key => {\r\n if (key === 'UniqueID') {\r\n whereClause.where.clause.push(\r\n {\r\n name: key,\r\n value: values[key],\r\n },\r\n );\r\n }\r\n return null;\r\n });\r\n return whereClause;\r\n };\r\n\r\n const loadAutoSaveData = () => {\r\n dispatch(loadFormDefinition(operationType, definitionType, listingCode, currListing?.UniqueID, 'listing')); // loads create listing page.\r\n dispatch(loadAutoSave(autoSaveCriteria));\r\n };\r\n\r\n const removeAutoSaveData = () => {\r\n dispatch(removeAutoSave(autoSaveCriteria));\r\n };\r\n\r\n /*\r\n When a listing is selected, form definition is loaded according to the PropertyType (listing type)\r\n Dispatch retrieves listing record based on UniqueID\r\n */\r\n const loadListingData = () => {\r\n dispatch(loadFormDefinition(operationType, definitionType, listingCode, currListing?.UniqueID, 'listing')); // loads create listing page.\r\n dispatch(loadListingById(buildWhereClause(currListing))); // dispatches call to get listing values\r\n };\r\n\r\n const onTakeoverRowLock = () => {\r\n setRowLockButtonClicked(true);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n\r\n if (autoSaveExists) setIsFormLoading(true);\r\n takeoverLock(() => {\r\n if (autoSaveExists) {\r\n loadAutoSaveData();\r\n }\r\n });\r\n };\r\n\r\n const onDiscardRowLock = () => {\r\n setRowLockButtonClicked(true);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n\r\n if (autoSaveExists) removeAutoSaveData();\r\n if (lockedByMe) {\r\n removeLock();\r\n } else {\r\n discardChanges();\r\n }\r\n };\r\n\r\n const onTakeoverAutoSave = () => {\r\n setAutoSaveButtonClicked(true);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(false);\r\n setRowLockButtonClicked(false);\r\n\r\n setIsFormLoading(true);\r\n createLock(loadAutoSaveData);\r\n };\r\n\r\n const onDiscardAutoSave = () => {\r\n setAutoSaveButtonClicked(true);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(false);\r\n setRowLockButtonClicked(false);\r\n\r\n removeAutoSaveData();\r\n };\r\n\r\n const onEditListing = () => {\r\n if (currListing) {\r\n loadListingData();\r\n }\r\n };\r\n\r\n const onDeleteListing = () => {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Delete Listing?',\r\n html: `Are you sure you want to delete Listing ${currListing.ListingId}?`,\r\n iconHtml: '',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'Yes, Delete',\r\n denyButtonText: 'No, Cancel',\r\n showDenyButton: true,\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn-danger btn-lg mr-2 swal-question-listing-discard-yes',\r\n denyButton: 'btn-primary btn-lg swal-question-listing-discard-no',\r\n },\r\n }).then(async result => {\r\n if (result.isConfirmed) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Deleting Listing...',\r\n title: '',\r\n showConfirmButton: false,\r\n });\r\n\r\n try {\r\n const response = await apiService.Listing.DeleteListingById({ UniqueID: currListing.UniqueID, PropertyType: currListing.PropertyType });\r\n const listingId = response?.Data?.ListingId;\r\n\r\n if (listingId) {\r\n setRowLockButtonClicked(false);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(true);\r\n setAutoSaveButtonClicked(false);\r\n\r\n if (autoSaveExists) removeAutoSaveData();\r\n if (lockedByMe) {\r\n removeLock();\r\n } else {\r\n discardChanges();\r\n }\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Listing Deleted',\r\n text: `Listing ${currListing.ListingId} has been deleted.`,\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n }).then(() => {\r\n history.push('/');\r\n });\r\n } else {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Listing Not Deleted',\r\n text: `Listing ${currListing.ListingId} could not be deleted at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-listing-delete',\r\n },\r\n });\r\n }\r\n } catch (err) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Listing Not Deleted',\r\n text: `Listing ${currListing.ListingId} could not be deleted at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-listing-delete',\r\n },\r\n });\r\n rollbar.error('Error: Listing Delete', err, currListing.ListingId);\r\n }\r\n } else {\r\n setRowLockButtonClicked(false);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(true);\r\n setAutoSaveButtonClicked(false);\r\n\r\n if (autoSaveExists) removeAutoSaveData();\r\n if (lockedByMe) {\r\n removeLock();\r\n } else {\r\n discardChanges();\r\n }\r\n }\r\n });\r\n };\r\n\r\n const onCopyListing = () => {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Copying Listing...',\r\n title: '',\r\n showConfirmButton: false,\r\n timer: 2000,\r\n });\r\n dispatch(loadFormDefinition('create', 'listings', currListing?.PropertyType?.toLowerCase(), null, 'listing', true));\r\n const copyRequest = buildWhereClause(currListing);\r\n copyRequest.formName = currListing?.PropertyType?.toLowerCase();\r\n dispatch(loadListingToCopyById(copyRequest));\r\n };\r\n\r\n const getTaskDefinitions = taskName => {\r\n dispatch(loadFormDefinition(operationType, definitionType, taskName, currListing?.UniqueID, 'listing'));\r\n dispatch(loadListingById(buildWhereClause(currListing)));\r\n };\r\n\r\n const getCurrentListingPreferredPhotoDetails = uniqueID => {\r\n dispatch(loadListingPreferredPhotoDetails(uniqueID));\r\n };\r\n\r\n const getCurrentListingPhoto = photoId => {\r\n dispatch(loadListingPhoto(photoId));\r\n };\r\n\r\n const onClickEdit = () => {\r\n setEditButtonClicked(true);\r\n setDeleteButtonClicked(false);\r\n setRowLockButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n\r\n setIsFormLoading(true);\r\n createLock(onEditListing);\r\n };\r\n\r\n const onClickDelete = () => {\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(true);\r\n setRowLockButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n\r\n setIsFormLoading(true);\r\n createLock(onDeleteListing);\r\n };\r\n\r\n const onClickTask = taskCode => () => {\r\n setEditButtonClicked(true);\r\n setDeleteButtonClicked(false);\r\n setRowLockButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n setIsFormLoading(true);\r\n createLock(() => getTaskDefinitions(taskCode));\r\n };\r\n\r\n // temporary placeholder for copy functions\r\n const onCopyClick = () => {\r\n setRowLockButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n setIsFormLoading(true);\r\n onCopyListing();\r\n };\r\n\r\n const onAuditClick = () => {\r\n if (currListing.UniqueID !== null) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Loading Listing Audit Log...',\r\n title: '',\r\n showConfirmButton: false,\r\n timer: 2000,\r\n });\r\n dispatch(getAuditLog({ tableName: 'Listing', uniqueID: currListing?.UniqueID, entityID: currListing?.ListingID }));\r\n history.push('/audit');\r\n }\r\n };\r\n\r\n // update change form buttons and edit button visibility depending on ACL permissions\r\n useEffect(() => {\r\n if (!listingCode) return;\r\n\r\n let otherButtons = Object.keys(formPermissions).flatMap(key => {\r\n if (!formPermissions[key]) return [];\r\n return otherTaskConfig.find(btnCfg => btnCfg.taskCode === key);\r\n });\r\n otherButtons = otherButtons.filter(btn => btn).sort((a, b) => otherTaskConfig.indexOf(a) - otherTaskConfig.indexOf(b));\r\n setOtherBtnArr(otherButtons);\r\n\r\n let taskButtons = Object.keys(formPermissions).flatMap(key => {\r\n if (!formPermissions[key]) return [];\r\n return statusTaskConfig.find(btnCfg => btnCfg.taskCode === key);\r\n });\r\n taskButtons = taskButtons.filter(btn => btn).sort((a, b) => statusTaskConfig.indexOf(a) - statusTaskConfig.indexOf(b));\r\n setTaskBtnArr(taskButtons);\r\n }, [formPermissions, listingCode]);\r\n\r\n useEffect(() => {\r\n if (currListing?.UniqueID) {\r\n getCurrentListingPreferredPhotoDetails(currListing.UniqueID);\r\n }\r\n }, [currListing]);\r\n\r\n useEffect(() => {\r\n if (currentListingPreferredPhotoDetails?.URL) {\r\n getCurrentListingPhoto(currentListingPreferredPhotoDetails.URL);\r\n }\r\n }, [currentListingPreferredPhotoDetails]);\r\n\r\n useEffect(() => {\r\n if (currentListingPhotoUrl) URL.revokeObjectURL(currentListingPhotoUrl);\r\n if (currentListingPhoto) setCurrentListingPhotoUrl(URL.createObjectURL(currentListingPhoto));\r\n return () => currentListingPhotoUrl && URL.revokeObjectURL(currentListingPhotoUrl);\r\n }, [currentListingPhoto]);\r\n\r\n if (currListing) { // added check to avoid crash when home button was clicked.\r\n return (\r\n <>\r\n \r\n ShowingTime \r\n products automate the showing scheduling and management process, simplify the report generating process, and deliver buyer leads.\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Are you sure?
\r\nYou are about to permanently delete a listing and all its contents.
\r\n\r\n Please confirm by typing\r\n delete\r\n below\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {!isAllAclComplete && !canEditForm ? (\r\n \r\n \r\n View\r\n Listing\r\n
\r\n\r\n
\r\n \r\n {canEditForm && (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {isEmpty(currListing.UnitNumber) ? '' : `${currListing.UnitNumber}, `}\r\n {`${currListing.StreetNumber} ${startCase(lowerCase(currListing.StreetName))} ${startCase(lowerCase(currListing.StreetSuffix))}`}\r\n {isEmpty(currListing.StreetDirSuffix) ? '' : ` ${upperCase(currListing.StreetDirSuffix)}`}\r\n
\r\n\r\n {isEmpty(currListing.City) ? '' : `${startCase(currListing.City)}, `}\r\n {startCase(currListing.StateOrProvince) ?? ''}\r\n
\r\n\r\n
\r\n \r\n {canEditForm && otherBtnArr.find(x => x.taskCode === 'chgDel') !== undefined && (\r\n \r\n \r\n Delete\r\n \r\n )}\r\n {canEditForm && (\r\n \r\n \r\n Edit\r\n \r\n )}\r\n {canCopyForm && (\r\n \r\n \r\n Copy\r\n \r\n )}\r\n {canAuditForm && (\r\n \r\n \r\n Audit\r\n \r\n )}\r\n \r\n )}\r\n >\r\n \r\n \r\n {\r\n sortBy(memoizedListingEntries).map(([key, value]) => {\r\n if (!listingAttributesWhiteList.includes(key)) {\r\n return null;\r\n }\r\n if (value) {\r\n return (\r\n
\r\n \r\n {canEditForm && taskBtnArr.length > 0 && (\r\n \r\n
\r\n \r\n )}\r\n | {key.replace(/([a-z])([A-Z])/g, '$1 $2')} | \r\n{ (key === 'PropertyType' ? listingType : value) } | \r\n
|---|
\r\n {taskBtnArr.map(element => (\r\n \r\n \r\n \r\n {`${element.buttonText}`}\r\n \r\n
\r\n ))}\r\n \r\n {canAccessShowingTime && (\r\n
\r\n )}\r\n \r\n )}\r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\nexport default ViewListings;\r\n","import React, { useMemo, useState, useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useQueryParam, StringParam } from 'use-query-params';\r\n\r\nimport { getCurrentOffice } from '@redux/selectors/OfficeSelector';\r\nimport { setCurrentOffice } from '@redux/modules/office';\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\n\r\nimport useRowLock from '@hooks/useRowLock';\r\nimport useAcl from '@hooks/useAcl';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport ViewLoader from '@components/loaders/ViewLoader';\r\n\r\nimport capitalize from 'lodash/capitalize';\r\nimport sortBy from 'lodash/sortBy';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\n\r\nconst officeAttributesWhiteList = [\r\n 'OfficeAssociationComments',\r\n 'OfficeEmail',\r\n 'OfficeFax',\r\n 'OfficeMailAddress',\r\n 'OfficeMailCity',\r\n 'OfficeMailPostalCode',\r\n 'OfficePhone',\r\n 'OfficePostalCodePlus4',\r\n 'OtherWebsite',\r\n 'SocialMediaWebsiteUrlOrId',\r\n 'TerminationDate',\r\n 'TollFree',\r\n 'WebFacebook',\r\n 'WebTwitter',\r\n];\r\n\r\nconst operationType = 'edit';\r\nconst definitionType = 'office';\r\n\r\nconst ViewOffices = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n\r\n const currOffice = useSelector(getCurrentOffice);\r\n\r\n const [editButtonClicked, setEditButtonClicked] = useState(false);\r\n\r\n const [urlParam, setUrlParam] = useQueryParam('UniqueID', StringParam); // unique ID of current listing from CLF\r\n\r\n const memoizedOfficeEntries = useMemo(() => (currOffice ? Object.entries(currOffice) : []), [currOffice]);\r\n const rowLockEntity = useMemo(() => ({ type: 'office', id: currOffice?.UniqueID }), [currOffice]);\r\n\r\n const {\r\n lockingAuthorized,\r\n locked,\r\n lockedBy,\r\n lockedByMe,\r\n lastUpdatedOn,\r\n lastCheckedOn,\r\n checkStatus,\r\n createLock,\r\n removeLock,\r\n takeoverLock,\r\n discardChanges,\r\n LockMessage,\r\n LockOwnerMessage,\r\n } = useRowLock({ rowLockEntity });\r\n\r\n const onEditOffice = () => {\r\n if (currOffice) {\r\n dispatch(loadFormDefinition(operationType, definitionType, null, currOffice?.UniqueID, 'officeACL'));\r\n }\r\n };\r\n\r\n const {\r\n getOfficeAcl,\r\n canEditForm,\r\n isAllComplete,\r\n } = useAcl();\r\n const isAllAclComplete = isAllComplete();\r\n\r\n useEffect(() => {\r\n if (urlParam) {\r\n dispatch(setCurrentOffice(urlParam));\r\n }\r\n }, []);\r\n\r\n /*\r\n This has to be done using location. Currently, when the user loads a form, it redirects the user to the\r\n create/edit page. When this happens, it clears out the path and search values in the location object.\r\n We can't memo the location and use that as a comparison, because technically the locations will be\r\n the same on the reload, so we can't reset the search value in the location object.\r\n */\r\n useEffect(() => {\r\n if (location?.search === '') {\r\n if (currOffice) {\r\n setUrlParam(currOffice?.UniqueID, 'replaceIn');\r\n }\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (currOffice?.UniqueID) {\r\n // retrieves EDIT and COPY permissions for offices\r\n getOfficeAcl({\r\n action: 'view',\r\n formname: 'Office',\r\n uniqueId: currOffice.UniqueID,\r\n });\r\n\r\n // retrieves form permissions for offices\r\n getOfficeAcl({\r\n action: 'forms',\r\n formname: 'Office',\r\n uniqueId: currOffice.UniqueID,\r\n });\r\n\r\n if (location?.search === '' || location?.search !== currOffice?.UniqueID) {\r\n setUrlParam(currOffice?.UniqueID, 'replaceIn');\r\n }\r\n }\r\n }, [currOffice]);\r\n\r\n const onClickEdit = () => {\r\n setEditButtonClicked(true);\r\n createLock(onEditOffice);\r\n };\r\n\r\n if (currOffice) {\r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n )}\r\n {canViewOpenHouses && (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n {otherBtnArr.length > 0 && (\r\n // eslint-disable-next-line no-nested-ternary\r\n Open Houses
\r\n \r\n\r\n {otherBtnArr.find(x => x.taskCode !== 'chDel').length > 0 && (\r\n \r\n {otherBtnArr.map(element => (element.taskCode !== 'chgDel' && (\r\n \r\n \r\n \r\n )}\r\n
\r\n )}\r\n {`${element.buttonText}`}
\r\n \r\n )))}\r\n\r\n
\r\n {!isAllAclComplete && !canEditForm ? (\r\n \r\n \r\n View\r\n Office\r\n
\r\n\r\n
\r\n \r\n )}\r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\nexport default ViewOffices;\r\n","export default __webpack_public_path__ + \"static/media/corelogic-icon.dcafb25f.svg\";","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport matrixIcon from '@images/logos/vendor/matrix_logo.png';\r\nimport corelogicIcon from '@images/logos/vendor/corelogic-icon.svg';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst MatrixWidget = () => {\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {currOffice.OfficeName}
\r\n\r\n
\r\n \r\n \r\n {currOffice.OfficePhone}\r\n \r\n
\r\n \r\n\r\n \r\n \r\n Edit\r\n \r\n )\r\n )}\r\n >\r\n \r\n \r\n {sortBy(memoizedOfficeEntries).map(([key, value]) => {\r\n if (!officeAttributesWhiteList.includes(key)) return null;\r\n if (value) {\r\n return (\r\n
\r\n \r\n
\r\n | {key.replace(/([a-z])([A-Z])/g, '$1 $2')} | \r\n{value} | \r\n
|---|
\r\n 
\r\n {\r\n window.open('https://matrix.pillarnine.com', '_blank');\r\n gaEventTracker('Opened Matrix', `${username}`);\r\n }}\r\n variant=\"primary\"\r\n >\r\n \r\n Matrix™\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default MatrixWidget;\r\n","export default \"data:image/png;base64,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\"","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst TrainingWidget = props => {\r\n const { url = '#' } = props;\r\n const username = useSelector(getUserName);\r\n const gaEventTracker = GAEventTracking('User');\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n MLS® System Powered By |\r\n \r\n
\r\n \r\n {\r\n if (url) {\r\n window.open(`${url}`, '_blank');\r\n gaEventTracker('Opened Training', `${username}`);\r\n }\r\n }}\r\n variant=\"primary\"\r\n >\r\n \r\n Training Resources\r\n \r\n
\r\n );\r\n};\r\n\r\nTrainingWidget.propTypes = {\r\n url: PropTypes.string,\r\n};\r\n\r\nexport default TrainingWidget;\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport MatrixWidget from '@components/widget/MatrixWidget';\r\nimport TrainingWidget from '@components/widget/TrainingWidget';\r\n\r\nconst Matrix = () => (\r\n <>\r\n Guides & Videos, Training Courses and Webinars
\r\n\r\n
\r\n \r\n \r\n Matrix™\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default Matrix;\r\n","export default __webpack_public_path__ + \"static/media/logop9map.7b4ffed6.png\";","export default __webpack_public_path__ + \"static/media/remaplist-placeholder.a72a8578.jpg\";","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport REMapListIcon from '@images/logos/logop9map.png';\r\nimport REMapListPlaceholder from '@images/logos/remaplist-placeholder.jpg';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst REMapListWidget = () => {\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n {\r\n window.open('https://maps.pillarnine.com', '_blank');\r\n gaEventTracker('Opened REMapList', `${username}`);\r\n }}\r\n variant=\"primary\"\r\n >\r\n \r\n REMapList™\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default REMapListWidget;\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport REMapListWidget from '@components/widget/REMapListWidget';\r\n\r\nconst REMapList = () => (\r\n <>\r\n \r\n REMapList™ \r\n is an intuitive mapping tool using data from the Matrix™ and other data sources to provide members with a dynamic mapping experience.\r\n
\r\n\r\n
\r\n \r\n \r\n REMapList™\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default REMapList;\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport CreaWebformsWidget from '@components/widget/CreaWebformsWidget';\r\n\r\nconst CREAWEBForms = () => (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n CREA\r\n WEBForms®\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default CREAWEBForms;\r\n","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport creaIcon from '@images/logos/vendor/crea-logo.svg';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst CreaDDFWidget = () => {\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n {\r\n window.open('https://www.crea.ca/technology/realtor-ca-for-realtors/realtor-ca-tools/realtor-ca-ddf', '_blank');\r\n gaEventTracker('Opened CREA DDF', `${username}`);\r\n }}\r\n variant=\"primary\"\r\n >\r\n \r\n CREA DDF®\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CreaDDFWidget;\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport CreaDDFWidget from '@components/widget/CreaDDFWidget';\r\n\r\nconst CREADDF = () => (\r\n <>\r\n \r\n CREA DDF® \r\n is a managed service to share listings with multiple third-party websites, while providing access to more listings for your own website.\r\n
\r\n\r\n
\r\n \r\n \r\n CREA\r\n DDF®\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n CREA has created a Data Distribution Facility (DDF®) to enable CREA's members to easily disseminate MLS® listing content to&nbps;\r\n multiple websites, and to ensure that MLS® listing content that is displayed on these websites is accurate, up to date, and uses CREA's trademarks correctly.\r\n
\r\n\r\n You can use the DDF® to share your listings with other REALTORS®, with Franchisors, as well as approved real estate advertising websites. You can also receive a feed of listing content from the DDF® for display on your own website.\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default CREADDF;\r\n","export default __webpack_public_path__ + \"static/media/logoprospectscrmwhite2.aa66b88a.png\";","export default __webpack_public_path__ + \"static/media/applebadge.2e842790.svg\";","export default __webpack_public_path__ + \"static/media/google-play-badge.c39ff0cc.svg\";","import React from 'react';\r\n\r\nimport prospectsIcon from '@images/logos/vendor/logoprospectscrmwhite2.png';\r\nimport appleIcon from '@images/logos/applebadge.svg';\r\nimport googleIcon from '@images/logos/google-play-badge.svg';\r\n\r\nconst ProspectsMobileWidget = () => (\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n 
\r\n \r\n \r\n 
\r\n \r\n
\r\n);\r\n\r\nexport default ProspectsMobileWidget;\r\n","import React from 'react';\r\n\r\nimport ProspectsWidget from '@components/widget/ProspectsWidget';\r\nimport ProspectsMobileWidget from '@components/widget/ProspectsMobileWidget';\r\nimport TrainingWidget from '@components/widget/TrainingWidget';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\n\r\nconst Prospects = () => (\r\n <>\r\n \r\n Prospects Mobile gives you the tools you need to stay connected to critical listing data and client activities while you're on the go.\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n Prospects\r\n \r\n Powered by CoreLogic\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Members! Did you know that as part of your Pillar 9™ fees you have access to the \r\n Premium Level Pro version\r\n of all of Prospects tools?\r\n
\r\n\r\n Prospects CRM provides you with all the tools you need to succeed and\r\n thrive in a highly competitive market. Manage your contacts and your\r\n everyday business better than ever with this powerful CRM that's\r\n designed for real estate professionals. \r\n
\r\n\r\n Learn more about Prospects here: \r\n
Access & Login
\r\n\r\n To log into Prospects, visit \r\n
\r\n
\r\n \r\n);\r\n\r\nexport default Prospects;\r\n","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport spinIcon from '@images/logos/vendor/spin_logo.gif';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst SpinWidget = () => {\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n {\r\n window.open('https://alta.registries.gov.ab.ca/spinii/logon.aspx', '_blank');\r\n gaEventTracker('Opened Spin', `${username}`);\r\n }}\r\n variant=\"primary\"\r\n className=\"pos-right\"\r\n >\r\n \r\n Spin2\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SpinWidget;\r\n","export default \"data:image/gif;base64,R0lGODlhXAA/ALMAAP///0SDharHyGGXmODq642ztMja2/L39/7+/nSjpQAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAABcAD8AAAT/EMhJq7046827/2AojmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJfBEEicRgWjA0R4TCIMDtdgfWayfr5SYKAi13IDwYDIK4wHAACbwJQb1y2IZ9BGVfexsECV16Gn0CQHcBA1VvBgUFHARbAQWEGQYBjCGbKVmfFHcbfY8EHpOhHAUBqjICW2wadwOtLYd/LrNdvBdbsTJPuSiOXALDGVvKYqVemh5kj2dxy0cHh1xVIk/bXWfYE+M4nYgocJiPA9iHsQezeRZpxiTIiSvUmRSvngAG1sEi569SBS3Lrm3wFwDYCkcJJFzqQqYAgXMTkPGbYGCbQV9c/+z5axcjEL9zEEkCuCUh2YFkE15NCZCAzMyGGBwZjIEJ5CRue0wq46Lq1p5mJmcycgRv57kEmy7OMVAuxMg1dcxMeEnzVqxXjLQ1RLUmliOJkDImg1MA3BcTBxgOcAaQ6IEDE9fw4gKHKABwUGPSBDiFkEZBXqpu+PnrILtH0UJ5Ick10yZHdwJTWDfA2hwAF2uGAAmzgklB3Sx0kQa6NIXTOyvQUfEkk8dxqNpVo3vhCTaqGCaRglERCs2qPZ8F+5LvQpqQyi1cdCid0sboIxIExIldRBqM3UXAAhs+RCfw5T9A2RI7PQdkit0vpy4/w936+PPr38+/v/8bCAQo4BCABBYYoHsGJnigfwL+B0QEADs=\"","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport SpinWidget from '@components/widget/SpinWidget';\r\n\r\nconst Spin = () => (\r\n <>\r\n Land titles data products, registered survey plans, township images, survey control markers, soil capability information and other land information.
\r\n\r\n
\r\n \r\n \r\n Spin2\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default Spin;\r\n","export default __webpack_public_path__ + \"static/media/spacelist_logo.c6e3d303.svg\";","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport spacelistIcon from '@images/logos/vendor/spacelist_logo.svg';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst SpacelistWidget = () => {\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n {\r\n window.open('https://www.spacelist.ca', '_blank');\r\n gaEventTracker('Opened Spacelist', `${username}`);\r\n }}\r\n variant=\"primary\"\r\n >\r\n \r\n Spacelist™\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SpacelistWidget;\r\n","import AuditLogPage from '@containers/auditLog/AuditLogPage';\r\nimport CondoManagementPage from '@containers/condo/CondoManagementPage';\r\nimport CreateAgentPage from '@containers/agent/CreateAgentPage';\r\nimport CreateListingsPage from '@containers/listing/CreateListingsPage';\r\nimport CreateOfficePageOG from '@containers/office/CreateOfficePageOG';\r\nimport EditAgentPage from '@containers/agent/EditAgentPage';\r\nimport EditOfficePageOG from '@containers/office/EditOfficePageOG';\r\nimport Dashboard from '@containers/dashboard/Dashboard';\r\nimport RowLockPage from '@components/rowLock/RowLockPage';\r\nimport AggregateDataPage from '@containers/dataPortal/aggregateData/AggregateDataPage';\r\nimport DataSearchPage from '@containers/dataPortal/transactionalData/dataSearch/DataSearchPage';\r\nimport SearchAgentPage from '@containers/agent/SearchAgentPage';\r\nimport SearchListingsPage from '@containers/listing/SearchListingsPage';\r\nimport SearchOfficePage from '@containers/office/SearchOfficePage';\r\nimport ViewAgentPage from '@containers/agent/ViewAgentPage';\r\nimport ViewListingPage from '@containers/listing/ViewListingsPage';\r\nimport ViewOfficePage from '@containers/office/ViewOfficePage';\r\nimport Matrix from '@containers/vendorApps/matrix/Matrix';\r\nimport REMapList from '@containers/vendorApps/remaplist/REMapList';\r\nimport CREAWEBForms from '@containers/vendorApps/crea/CREAWEBForms';\r\nimport CREADDF from '@containers/vendorApps/crea/CREADDF';\r\nimport Prospects from '@containers/vendorApps/prospects/Prospects';\r\nimport Spin from '@containers/vendorApps/spin/Spin';\r\nimport Spacelist from '@containers/vendorApps/spacelist/SpaceList';\r\nimport CloudCMA from '@containers/vendorApps/cloudcma/CloudCMA';\r\nimport RECA from '@containers/resources/RECA';\r\nimport PostalCodeLookup from '@containers/resources/PostalCodeLookup';\r\nimport Training from '@containers/resources/Training';\r\n\r\nexport default [\r\n {\r\n id: 'dashboard_page',\r\n path: '/',\r\n breadcrumbPath: '/',\r\n name: 'Home',\r\n Component: Dashboard,\r\n requiredAcl: 'EVERYONE',\r\n },\r\n {\r\n id: 'aggregate_data_page',\r\n path: '/data/aggregate',\r\n breadcrumbPath: '/data/aggregate',\r\n name: 'Aggregate Data',\r\n Component: AggregateDataPage,\r\n requiredAcl: 'DPA',\r\n },\r\n {\r\n id: 'data_search_page',\r\n path: '/data/search',\r\n breadcrumbPath: '/data/search',\r\n name: 'Search Data',\r\n Component: DataSearchPage,\r\n requiredAcl: 'DPT',\r\n },\r\n {\r\n id: 'create_agent_page',\r\n path: '/agent/create',\r\n breadcrumbPath: '/agent/create',\r\n name: 'Create Agent',\r\n Component: CreateAgentPage,\r\n requiredAcl: 'STAFF',\r\n },\r\n {\r\n id: 'edit_agent_page',\r\n path: '/agent/edit',\r\n breadcrumbPath: '/agent/edit',\r\n name: 'Edit Agent',\r\n Component: EditAgentPage,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'search_agent_page',\r\n path: '/agent/search',\r\n breadcrumbPath: '/agent/search',\r\n name: 'Search Agents',\r\n Component: SearchAgentPage,\r\n requiredAcl: 'STAFF',\r\n },\r\n {\r\n id: 'view_agent_page',\r\n path: '/agent/view',\r\n breadcrumbPath: '/agent/view',\r\n name: 'View Agent',\r\n Component: ViewAgentPage,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'audit_log_page',\r\n path: '/audit',\r\n breadcrumbPath: '/audit',\r\n name: 'Audit Log',\r\n Component: AuditLogPage,\r\n requiredAcl: 'STAFF',\r\n },\r\n {\r\n id: 'condo_management_page',\r\n path: '/condo',\r\n breadcrumbPath: '/condo',\r\n name: 'Condo Management',\r\n Component: CondoManagementPage,\r\n requiredAcl: 'ADMIN',\r\n },\r\n {\r\n id: 'create_listings_page',\r\n path: '/listings/create/:listingType',\r\n breadcrumbPath: '/listings/create',\r\n name: 'Create Listing',\r\n Component: CreateListingsPage,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'edit_listings_page',\r\n path: '/listings/edit/:listingType',\r\n breadcrumbPath: '/listings/edit',\r\n name: 'Edit Listing',\r\n Component: CreateListingsPage,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'search_listings_page',\r\n path: '/listings/search',\r\n breadcrumbPath: '/listings/search',\r\n name: 'Search Listings',\r\n Component: SearchListingsPage,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'view_listings_page',\r\n path: '/listings/view',\r\n breadcrumbPath: '/listings/view',\r\n name: 'View Listing',\r\n Component: ViewListingPage,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'search_office_page',\r\n path: '/office/search',\r\n breadcrumbPath: '/office/search',\r\n name: 'Search Office',\r\n Component: SearchOfficePage,\r\n requiredAcl: 'STAFF',\r\n },\r\n {\r\n id: 'create_office_page',\r\n path: '/office/create',\r\n breadcrumbPath: '/office/create',\r\n name: 'Create Office',\r\n Component: CreateOfficePageOG,\r\n requiredAcl: 'STAFF',\r\n },\r\n {\r\n id: 'edit_office_page',\r\n path: '/office/edit',\r\n breadcrumbPath: '/office/edit',\r\n name: 'Edit Office',\r\n Component: EditOfficePageOG,\r\n requiredAcl: 'STAFF',\r\n },\r\n {\r\n id: 'view_office_page',\r\n path: '/office/view',\r\n breadcrumbPath: '/office/view',\r\n name: 'View Office',\r\n Component: ViewOfficePage,\r\n requiredAcl: 'STAFF',\r\n },\r\n {\r\n id: 'row_lock_page',\r\n path: '/rowLock/:entityType/:entityId',\r\n breadcrumbPath: '/rowLock',\r\n name: 'Row Lock',\r\n Component: RowLockPage,\r\n requiredAcl: 'ADMIN',\r\n },\r\n {\r\n id: 'matrix_page',\r\n path: '/matrix',\r\n breadcrumbPath: '/matrix',\r\n name: 'Matrix',\r\n Component: Matrix,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'remaplist_page',\r\n path: '/remaplist',\r\n breadcrumbPath: '/remaplist',\r\n name: 'REMapList',\r\n Component: REMapList,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'creawebforms_page',\r\n path: '/crea/webforms',\r\n breadcrumbPath: '/crea/webforms',\r\n name: 'CREA WEBForms',\r\n Component: CREAWEBForms,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'creaddf_page',\r\n path: '/crea/ddf',\r\n breadcrumbPath: '/crea/ddf',\r\n name: 'CREA DDF',\r\n Component: CREADDF,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'prospects_page',\r\n path: '/prospects',\r\n breadcrumbPath: '/prospects',\r\n name: 'Prospects',\r\n Component: Prospects,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'spin_page',\r\n path: '/spin',\r\n breadcrumbPath: '/spin',\r\n name: 'Spin2',\r\n Component: Spin,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'spacelist_page',\r\n path: '/spacelist',\r\n breadcrumbPath: '/spacelist',\r\n name: 'Spacelist',\r\n Component: Spacelist,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'cloudcma_page',\r\n path: '/cloudcma',\r\n breadcrumbPath: '/cloudcma',\r\n name: 'Cloud CMA',\r\n Component: CloudCMA,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'postalcodelookup_page',\r\n path: '/resources/postalcodelookup',\r\n breadcrumbPath: 'resources/postalcodelookup',\r\n name: 'Postal Code Lookup',\r\n Component: PostalCodeLookup,\r\n requiredAcl: 'EVERYONE',\r\n },\r\n {\r\n id: 'reca_page',\r\n path: '/resources/reca',\r\n breadcrumbPath: '/resources/reca',\r\n name: 'RECA',\r\n Component: RECA,\r\n requiredAcl: 'ASSIST',\r\n },\r\n {\r\n id: 'training_page',\r\n path: '/resources/training',\r\n breadcrumbPath: '/training',\r\n name: 'Training',\r\n Component: Training,\r\n requiredAcl: 'ASSIST',\r\n },\r\n];\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport SpacelistWidget from '@components/widget/SpacelistWidget';\r\n\r\nconst SpaceList = () => (\r\n <>\r\n \r\n Spacelist™ \r\n is an interactive mapping tool to search billions of square feet of commercial real estate listings for free.\r\n
\r\n\r\n
\r\n \r\n \r\n Spacelist\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default SpaceList;\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport CloudCMAWidget from '@components/widget/CloudCMAWidget';\r\nimport TrainingWidget from '@components/widget/TrainingWidget';\r\n\r\nconst CloudCMA = () => (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Cloud CMA\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default CloudCMA;\r\n","import React from 'react';\r\n\r\nconst PostalCodeLookup = () => (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n);\r\n\r\nexport default PostalCodeLookup;\r\n","import React from 'react';\r\n\r\nconst RECA = () => (\r\n \r\n
\r\n \r\n \r\n Postal Code Lookup\r\n \r\n Powered by Canada Post\r\n \r\n
\r\n\r\n
\r\n);\r\n\r\nexport default RECA;\r\n","import React from 'react';\r\n\r\nconst Training = () => (\r\n \r\n
\r\n \r\n \r\n RECA\r\n Resources\r\n \r\n Tools, Guides and Standards\r\n \r\n
\r\n\r\n
\r\n);\r\n\r\nexport default Training;\r\n","import React, { useState } from 'react';\r\nimport Modal from 'react-bootstrap/Modal';\r\nimport Button from 'react-bootstrap/Button';\r\nimport useAcl from '@hooks/useAcl';\r\n\r\nconst appSettings = require('../../../appsettings.json');\r\n\r\nconst Footer = () => {\r\n const { aclIsEmpty, is3rdPartyDataPortalUser } = useAcl();\r\n const [showTerms, setShowTerms] = useState(false);\r\n const [okButtonDisabled, setOkButtonDisabled] = useState(true);\r\n\r\n const handleScroll = e => {\r\n const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;\r\n\r\n if (bottom) setOkButtonDisabled(false);\r\n else setOkButtonDisabled(true);\r\n };\r\n\r\n return (\r\n <>\r\n {is3rdPartyDataPortalUser && (\r\n <>\r\n \r\n
\r\n \r\n \r\n Training\r\n
\r\nData Disclaimer
\r\nInformation is deemed reliable but is NOT guaranteed accurate.
\r\n {/* eslint-disable-next-line max-len */}\r\nThe Listing Agent(s) who creates the Listing is responsible for the Listing information to be accurate and shall use their best efforts to transfer copyright title for photographs and other copyrightable material to the Pillar 9™.
\r\nNo warranties or representations are made by PILLAR 9™or our partners.
\r\nAuthorized Use
\r\n- \r\n
- \r\n The information contained on the PILLAR 9™ MLS® System is confidential and shall not be distributed to unauthorized persons (including other real estate boards) or used in any unauthorized manner.\r\n The Shareholders agree that information and data contained on the PILLAR 9™ MLS® System may only be used in an Authorized manner.\r\n \r\n
- \r\n
For the purposes of this Agreement:
\r\n- \r\n
- \r\n
“Authorized Use” or “Authorized manner” “of the MLS® System means:
\r\n- \r\n
- The extraction of data from the MLS® System by Members in good standing necessary to assist them in representing their Clients/Customers or specific identified customers in the Trade of real property; \r\n {/* eslint-disable-next-line max-len */}\r\n
- The ability of Members in good standing to remove reference to the Listing Brokerage and Listing Associate when representing specific clients, or specific identified customers in the Trade of real estate; and \r\n
- Any specific use authorized in writing by the Corporation. \r\n
\r\n - \r\n
“Unauthorized Use” of the MLS® System is any use not set out in the above section and includes, but is not limited to:
\r\n- \r\n
- The sale or distribution of any portion of the MLS® System to any third parties; \r\n
- \r\n Use of the MLS® System for direct or personal contact or communication with another Member’s Client/Customer when the status of a listing on PILLAR 9™ MLS® System is marked as either Expired (X),\r\n or Terminated (T) or and the Member knows or ought to know that a written service agreement has been or is in place. \r\n \r\n
- \r\n Any general or institutional advertising of a Member’s services through radio, television, open houses, or other means of reaching a large group of the public not directed specifically to persons having had\r\n a written service agreement that is now either expired (X) or terminated (T) or any contact or communication that was specifically requested or initiated by the Client/Customer, is not deemed to be an unauthorized\r\n use of the MLS® System. \r\n \r\n
- No use is unauthorized if consented to in writing by the Corporation. Anyone requesting such consent is required to meet all requirements as determined by the Corporation. \r\n
- \r\n The Corporation shall be responsible for ensuring the enforcement of agreements that set out the authorized use of data from the MLS®\r\n System by third parties or to take necessary means to prevent unauthorized use.\r\n \r\n
\r\n
\r\n - \r\n
Ownership and Copyright
\r\n- \r\n
- \r\n PILLAR 9™ is the owner of the copyright in its MLS® SYSTEM database. The MLS® SYSTEM database is a licensed product for the exclusive use of Members and other authorized users and any use of this\r\n data for any unauthorized purpose is prohibited. The right to use, reproduce or download the data is subject to the authority of PILLAR 9™ and is limited to the specific uses permitted by PILLAR 9™.\r\n \r\n
- \r\n Members shall comply with, observe, and be bound by all restrictions, copyright notices, or other limitations of access to the PILLAR 9™ MLS® SYSTEM database and use thereof as may be adopted\r\n by the Directors from time to time.\r\n \r\n
- A member, in submitting Listing information to PILLAR 9™, consents to such use of that information as PILLAR 9™ determines. \r\n
- \r\n
The Member shall advise and obtain the Principal’s consent that:
\r\n- \r\n
- \r\n All information concerning the Agency Agreement, the properties affected thereby, and the transactions thereunder shall be made available not only to all other Members but also to any\r\n third-party authorized users with whom PILLAR 9™ has a contract and their Principals;\r\n \r\n
- PILLAR 9™ may, at its option, advertise in any medium, including the Internet, any properties listed on the MLS® SYSTEM database; \r\n
- PILLAR 9™ may retain and distribute the listing information indefinitely and may compile and publish any statistical analysis, including historical MLS® SYSTEM data, on such information. \r\n
\r\n - \r\n PILLAR 9™ shall not be responsible for any indirect, special, or consequential damages or any other obligation or liability arising out of, or in any way connected with, the MLS® SYSTEM database including,\r\n but not limited to, computer failure or interruption, or negligence. \r\n \r\n
- The Directors may from time to time establish fees for use of the PILLAR 9™ MLS® SYSTEM information. \r\n
Cookies
\r\nWhen you use P9 Analytics, PILLAR 9™ uses Cookies to track your interactions, usage, and patterns in order to better understand and meet your preferences, to provide you with a customized experience.
\r\nPILLAR 9™ uses third-party technology for tracking and in doing so, a third-party Cookie may be placed or recognized by your browser.
\r\nAccessibility
\r\nPILLAR 9™ strives to ensure that its applications and content are accessible to persons with disabilities including users of screen reader technology.
\r\nWCAG 2.0 Level AA is used as a guide for developing online experiences that serve all of our users.
\r\nPlease be aware that our efforts to maintain accessibility and usability are ongoing.
\r\n\r\n \r\n
\r\n Data Disclaimer
\r\nInformation is deemed reliable but is NOT guaranteed accurate.
\r\n {/* eslint-disable-next-line max-len */}\r\nThe Listing Agent(s) who creates the Listing is responsible for the Listing information to be accurate and shall use their best efforts to transfer copyright title for photographs and other copyrightable material to the Pillar 9™.
\r\nNo warranties or representations are made by PILLAR 9™or our partners.
\r\nAuthorized Use
\r\n- \r\n
- \r\n The information contained on the PILLAR 9™ MLS® System is confidential and shall not be distributed to unauthorized persons (including other real estate boards) or used in any unauthorized manner.\r\n The Shareholders agree that information and data contained on the PILLAR 9™ MLS® System may only be used in an Authorized manner.\r\n \r\n
- \r\n
For the purposes of this Agreement:
\r\n- \r\n
- \r\n
“Authorized Use” or “Authorized manner” “of the MLS® System means:
\r\n- \r\n
- The extraction of data from the MLS® System by Members in good standing necessary to assist them in representing their Clients/Customers or specific identified customers in the Trade of real property; \r\n {/* eslint-disable-next-line max-len */}\r\n
- The ability of Members in good standing to remove reference to the Listing Brokerage and Listing Associate when representing specific clients, or specific identified customers in the Trade of real estate; and \r\n
- Any specific use authorized in writing by the Corporation. \r\n
\r\n - \r\n
“Unauthorized Use” of the MLS® System is any use not set out in the above section and includes, but is not limited to:
\r\n- \r\n
- The sale or distribution of any portion of the MLS® System to any third parties; \r\n
- \r\n Use of the MLS® System for direct or personal contact or communication with another Member’s Client/Customer when the status of a listing on PILLAR 9™ MLS® System is marked as either Expired (X),\r\n or Terminated (T) or and the Member knows or ought to know that a written service agreement has been or is in place. \r\n \r\n
- \r\n Any general or institutional advertising of a Member’s services through radio, television, open houses, or other means of reaching a large group of the public not directed specifically to persons having had\r\n a written service agreement that is now either expired (X) or terminated (T) or any contact or communication that was specifically requested or initiated by the Client/Customer, is not deemed to be an unauthorized\r\n use of the MLS® System. \r\n \r\n
- No use is unauthorized if consented to in writing by the Corporation. Anyone requesting such consent is required to meet all requirements as determined by the Corporation. \r\n
- \r\n The Corporation shall be responsible for ensuring the enforcement of agreements that set out the authorized use of data from the MLS®\r\n System by third parties or to take necessary means to prevent unauthorized use.\r\n \r\n
\r\n
\r\n - \r\n
Ownership and Copyright
\r\n- \r\n
- \r\n PILLAR 9™ is the owner of the copyright in its MLS® SYSTEM database. The MLS® SYSTEM database is a licensed product for the exclusive use of Members and other authorized users and any use of this\r\n data for any unauthorized purpose is prohibited. The right to use, reproduce or download the data is subject to the authority of PILLAR 9™ and is limited to the specific uses permitted by PILLAR 9™.\r\n \r\n
- \r\n Members shall comply with, observe, and be bound by all restrictions, copyright notices, or other limitations of access to the PILLAR 9™ MLS® SYSTEM database and use thereof as may be adopted\r\n by the Directors from time to time.\r\n \r\n
- A member, in submitting Listing information to PILLAR 9™, consents to such use of that information as PILLAR 9™ determines. \r\n
- \r\n
The Member shall advise and obtain the Principal’s consent that:
\r\n- \r\n
- \r\n All information concerning the Agency Agreement, the properties affected thereby, and the transactions thereunder shall be made available not only to all other Members but also to any\r\n third-party authorized users with whom PILLAR 9™ has a contract and their Principals;\r\n \r\n
- PILLAR 9™ may, at its option, advertise in any medium, including the Internet, any properties listed on the MLS® SYSTEM database; \r\n
- PILLAR 9™ may retain and distribute the listing information indefinitely and may compile and publish any statistical analysis, including historical MLS® SYSTEM data, on such information. \r\n
\r\n - \r\n PILLAR 9™ shall not be responsible for any indirect, special, or consequential damages or any other obligation or liability arising out of, or in any way connected with, the MLS® SYSTEM database including,\r\n but not limited to, computer failure or interruption, or negligence. \r\n \r\n
- The Directors may from time to time establish fees for use of the PILLAR 9™ MLS® SYSTEM information. \r\n
Cookies
\r\nWhen you use OnePlatform, PILLAR 9™ uses Cookies to track your interactions, usage, and patterns in order to better understand and meet your preferences, to provide you with a customized experience.
\r\nPILLAR 9™ uses third-party technology for tracking and in doing so, a third-party Cookie may be placed or recognized by your browser.
\r\nAccessibility
\r\nPILLAR 9™ strives to ensure that its applications and content are accessible to persons with disabilities including users of screen reader technology.
\r\nWCAG 2.0 Level AA is used as a guide for developing online experiences that serve all of our users.
\r\nPlease be aware that our efforts to maintain accessibility and usability are ongoing.
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n 
\r\n \r\n {routes.map(({\r\n path, Component, requiredAcl, id,\r\n }) => (\r\n (!aclIsEmpty && (aclString.includes(requiredAcl) || requiredAcl === 'EVERYONE')) && (\r\n \r\n \r\n )\r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n