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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import React, { useState } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import styled from 'styled-components';
import {
Button,
I18nProvider,
Locale,
useI18nContext,
} from '@procore/core-react';
import { AddCompanyContextProvider } from '../../Context/AddCompanyContext';
import { AddCompanyModal } from '../AddCompanyModal';
import { VendorConfigurableFieldSets } from '../../shared/types';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: false,
},
},
});
const StyledButton = styled(Button)`
width: 100%;
background-color: #f47e42;
border-radius: 2px;
justify-content: center;
padding-left: 8px;
padding-right: 0px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
&:hover {
background-color: #d47044;
}
`;
export interface ConfigurableFieldSets {
vendor: VendorConfigurableFieldSets;
}
export interface AddCompanyButtonProps {
configurableFieldSets: ConfigurableFieldSets;
companyId: number;
projectId?: string;
businessId: string;
canCreateAndEditCompanies: boolean;
companyCountryCode: string;
}
export function AddCompanyButton(props: AddCompanyButtonProps) {
const i18n = useI18nContext();
const [open, setOpen] = useState(false);
const closeModal = () => {
setOpen(false);
};
return (
<QueryClientProvider client={queryClient}>
<I18nProvider
locale={window.I18n.locale as Locale}
translations={window.I18n.translations}
>
<AddCompanyContextProvider
companyId={props.companyId}
businessId={props.businessId}
projectId={props.projectId}
vendorConfigurableFieldSets={props.configurableFieldSets.vendor}
canCreateAndEditCompanies={props.canCreateAndEditCompanies}
companyCountryCode={props.companyCountryCode}
>
<StyledButton
data-pendo="new-add-company-open-modal-button"
onClick={() => setOpen(true)}
icon={
<i
className="fa fa-plus"
style={{
width: 'auto',
height: 'auto',
paddingRight: '0px',
paddingLeft: '0px',
}}
/>
}
>
{i18n.t('views.generic.directory.add_company_package.add_company')}
</StyledButton>
{/* checking open unmounts the modal when closed and resets its state */}
{open && <AddCompanyModal onClose={closeModal} />}
</AddCompanyContextProvider>
</I18nProvider>
</QueryClientProvider>
);
}
|