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 | 3x 3x 3x 5x 6x 5x 5x 5x | import React from 'react';
import {
Button,
H1,
P,
Tile,
Title,
useI18nContext,
} from '@procore/core-react';
import { useAddCompanyContext } from '../../Context/AddCompanyContext';
export interface OnboardingModalProps {
onClick: () => void;
}
export function OnboardingModal(props: OnboardingModalProps) {
const projectId = useAddCompanyContext().projectId;
const gifURL =
'https://assets3.procore.com/assets/directory/add_company_onboarding.gif';
const i18n = useI18nContext();
return (
<Tile orientation="portrait" style={{ width: 640 }}>
{i18n.locale.substring(0, 2) === 'en' ? (
<Tile.HeroMedia style={{ height: 295 }}>
<img src={gifURL} alt="Add Company Onboarding" />
</Tile.HeroMedia>
) : null}
<Tile.Content
style={{
paddingLeft: '15%',
paddingRight: '15%',
}}
>
<Title style={{ justifyContent: 'center', textAlign: 'center' }}>
<Title.Text>
<H1>
{i18n.t(
'views.generic.directory.add_company_package.adding_companies'
)}
<br />
{i18n.t(
'views.generic.directory.add_company_package.just_got_easier'
)}
</H1>
</Title.Text>
</Title>
<P>
{projectId
? i18n.t(
'views.generic.directory.add_company_package.project_onboarding_text_1'
)
: i18n.t(
'views.generic.directory.add_company_package.onboarding_text_1'
)}
</P>
<P>
{i18n.t(
'views.generic.directory.add_company_package.onboarding_text_2'
)}
</P>
</Tile.Content>
<Tile.Footer style={{ paddingBottom: 32, textAlign: 'center' }}>
<Button onClick={props.onClick}>
{i18n.t('views.generic.directory.add_company_package.get_started')}
</Button>
</Tile.Footer>
</Tile>
);
}
|