Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 5x 7x 6x 6x 5x 5x 1x 5x 5x 4x | import React, { useState } from 'react';
import { OnboardingModal } from '../../OnboardingModal';
import { AddCompanyModalTitle } from './AddCompanyModalTitle';
import { Flex, Modal, Box } from '@procore/core-react';
import { useIsFetching, useIsMutating } from '@tanstack/react-query';
import { CurrentScreen } from './CurrentScreen';
import { Loader } from '../../Loader';
import { SearchBar } from '../../SearchBar';
import { SearchContextProvider } from '../../../Context/SearchContext';
import { useAddCompanyContext } from '../../../Context/AddCompanyContext';
import {
isLocalStorageAvailable,
saveToLocalStorage,
} from '../../../shared/utilities';
export interface ModalLayoutProps {
onClose: () => void;
}
export function ModalLayout(props: Readonly<ModalLayoutProps>) {
const isSearchingPCN = useIsFetching({ queryKey: ['pcnSearch'] });
const isMutating = useIsMutating();
const projectId = useAddCompanyContext().projectId;
const [hasViewedOnboarding, setHasViewedOnboarding] = useState(
isLocalStorageAvailable()
? localStorage.getItem(
projectId
? 'projectLevelAddCompanyFirstTimeUser'
: 'companyLevelAddCompanyFirstTimeUser'
)
: false
);
if (!hasViewedOnboarding) {
Iif (!isLocalStorageAvailable()) {
setHasViewedOnboarding('true');
}
}
const onClose = () => {
setHasViewedOnboarding('true');
const key = projectId
? 'projectLevelAddCompanyFirstTimeUser'
: 'companyLevelAddCompanyFirstTimeUser';
saveToLocalStorage(key, 'false');
};
if (hasViewedOnboarding) {
return (
<SearchContextProvider>
<Loader isLoading={isSearchingPCN > 0 || isMutating > 0} />
<Modal.Header
onClose={props.onClose}
qa={{ closeButton: 'close' }}
style={{
paddingBottom: 0,
boxShadow: 'none',
marginBottom: 1,
width: '100%',
}}
>
<Flex direction="column" gap="md" style={{ width: '100%' }}>
<AddCompanyModalTitle />
<Box marginBottom="md" style={{ width: '110%' }}>
<SearchBar />
</Box>
</Flex>
</Modal.Header>
<CurrentScreen />
</SearchContextProvider>
);
}
return <OnboardingModal onClick={() => onClose()} />;
}
|