react-icons/fa#FaFilePdf JavaScript Examples

MapAndAttachments = () => {
	const { technology } = useTechnology();
	const { openModal } = useModal();

	return (
		<Container>
			<ContentBox flexBasis="100%">
				<Geolocation />

				<S.UploadsTitle>Fotos da Tecnologia</S.UploadsTitle>
				{technology.attachments?.images?.length ? (
					<S.UploadedImages>
						{technology.attachments?.images.map((element, index) => (
							<S.IconRow key={element.url}>
								<S.Media
									src={element.url}
									role="button"
									aria-label="Open image gallery"
									onClick={() => {
										openModal(
											'imagesGallery',
											{
												technology,
												settings: {
													arrows: false,
													dots: true,
													initialSlide: index,
												},
											},
											{ customModal: true },
										);
									}}
								/>
								{element.id === technology.thumbnail_id && (
									<S.ImageCaption>Imagem de capa</S.ImageCaption>
								)}
							</S.IconRow>
						))}
					</S.UploadedImages>
				) : (
					<p>Nenhuma foto cadastrada</p>
				)}

				<S.UploadsTitle>Vídeos da Tecnologia</S.UploadsTitle>
				{technology.videos?.length ? (
					<Videos data={technology.videos} />
				) : (
					<p>Nenhum vídeo cadastrado</p>
				)}

				<S.UploadsTitle>Documentos</S.UploadsTitle>
				{technology.attachments.documents?.length ? (
					<S.UploadedDocuments>
						{technology.attachments.documents.map((element) => (
							<S.IconRow row key={element.url}>
								<S.IconLink href={element.url}>
									<FaFilePdf size="2rem" /> {element.filename}
								</S.IconLink>
							</S.IconRow>
						))}
					</S.UploadedDocuments>
				) : (
					<p>Nenhum documento cadastrado</p>
				)}
			</ContentBox>
		</Container>
	);
}

Attachments = () => {
	const { technology } = useTechnology();
	const { openModal } = useModal();
	const { images = [] } = technology.attachments;

	return (
		<Layout.Cell>
			<Section title="Fotos" hideWhenIsEmpty={false}>
				<UploadsTitle>Fotos da Tecnologia</UploadsTitle>
				{images?.length ? (
					<UploadedImages>
						{images.map((element, index) => (
							<IconRow key={element.url}>
								<Media
									src={element.url}
									role="button"
									aria-label="Open image gallery"
									onClick={() => {
										openModal(
											'imagesGallery',
											{
												technology,
												settings: {
													arrows: false,
													dots: true,
													initialSlide: index,
												},
											},
											{ customModal: true },
										);
									}}
								/>
							</IconRow>
						))}
					</UploadedImages>
				) : (
					<p>Nenhuma foto cadastrada</p>
				)}
			</Section>

			<Section title="Vídeos" hideWhenIsEmpty={false}>
				<UploadsTitle>Vídeos da Tecnologia</UploadsTitle>
				{technology.videos?.length ? (
					<Videos data={technology.videos} />
				) : (
					<p>Nenhum vídeo cadastrado</p>
				)}
			</Section>

			<Section title="Documentos" hideWhenIsEmpty={false}>
				<UploadsTitle>Documentos</UploadsTitle>
				{technology.attachments.documents?.length ? (
					<UploadedDocuments>
						{technology.attachments.documents.map((element) => (
							<IconRow row key={element.url}>
								<IconLink href={element.url}>
									<FaFilePdf size="2rem" /> {element.filename}
								</IconLink>
							</IconRow>
						))}
					</UploadedDocuments>
				) : (
					<p>Nenhum documento cadastrado</p>
				)}
			</Section>
		</Layout.Cell>
	);
}

MapAndAttachments = ({ form, data }) => {
	const { attachments } = data.technology;
	const imgsRef = useRef(null);
	const pdfRef = useRef(null);
	const [whereIsAlreadyImplemented, setWhereIsAlreadyImplemented] = useState([]);
	const [whereIsAlreadyImplementedInput, setWhereIsAlreadyImplementedInput] = useState('');
	const [whoDevelop, setWhoDevelop] = useState([]);
	const [whoDevelopInput, setWhoDevelopInput] = useState('');
	const [previewedImgFiles, setPreviewedImgFiles] = useState(attachments.images);
	const [previewedPdfFiles, setPreviewedPdfFiles] = useState(attachments.documents);
	const [uploadError, setUploadError] = useState(false);
	const [videos, setVideos] = useState(data.technology.videos || []);
	const { control } = form;

	useEffect(() => {
		const whereIsAlreadyImplementedParsed = parseLocationsFromApi(
			technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED,
			data.technology?.locations,
		);
		setWhereIsAlreadyImplemented(whereIsAlreadyImplementedParsed);

		const whoDevelopParsed = parseLocationsFromApi(
			technologyLocationsEnum.WHO_DEVELOP,
			data.technology?.locations,
		);
		setWhoDevelop(whoDevelopParsed);
	}, []);

	useEffect(() => {
		whoDevelop.forEach((element, index) => {
			form.setValue(`locations.who_develop.${index}`, element.id);
		});
	}, [whoDevelop]);

	useEffect(() => {
		whereIsAlreadyImplemented.forEach((element, index) => {
			form.setValue(`locations.where_is_already_implemented.${index}`, element.id);
		});
	}, [whereIsAlreadyImplemented]);

	useEffect(() => {
		form.setValue('videos', JSON.stringify(videos));
	}, [videos]);

	const onAddVideos = (link) => {
		if (!link || link === '') {
			form.setError('link_video', { type: 'manual', message: 'Formato de URL inválido' });
			return;
		}

		const videoId = getYoutubeVideoId(link);

		if (videoId) {
			form.clearErrors('link_video');
			const alreadyExists = videos.some((video) => video?.videoId === videoId);

			if (!alreadyExists) {
				setVideos((prevState) => [
					{
						thumbnail: `http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg`,
						link,
						videoId,
						provider: 'Youtube',
					},
					...prevState,
				]);
				form.setValue('link_video', '');
			} else {
				form.setError('link_video', {
					type: 'manual',
					message: 'O vídeo já foi adicionado',
				});
			}
		} else {
			form.setError('link_video', { type: 'manual', message: 'Formato de URL inválido' });
		}
	};

	const onRemoveVideos = (index) => setVideos(videos.filter((video, idx) => idx !== index));

	// eslint-disable-next-line consistent-return
	const onDropAttachments = async (acceptedFiles, type) => {
		if (!acceptedFiles) return null;

		const formData = new FormData();
		for (let index = 0; index < acceptedFiles.length; index += 1) {
			formData.append(`files[${index}]`, acceptedFiles[index], acceptedFiles[index].name);
		}

		formData.append(
			'meta',
			JSON.stringify({
				object: 'technologies',
				object_id: form.getValues('id'),
			}),
		);

		try {
			const response = await upload(formData);
			if (response.status === 200) {
				if (type === 'img') {
					const newValue = [...previewedImgFiles, ...response.data];
					setPreviewedImgFiles(newValue);
				}

				if (type === 'pdf') {
					const newValue = [...previewedPdfFiles, ...response.data];
					setPreviewedPdfFiles(newValue);
				}
			} else {
				setUploadError(response.data.error.message[0].message);
			}
		} catch (error) {
			setUploadError(
				'Ocorreu um error ao fazer o upload, verifique se você seguiu as instruções corretamente, checando o tipo de arquivo e o tamanho dele',
			);
		}
	};

	const deleteAttachment = async ({ index, element, type }) => {
		await deleteUpload(element.id);
		if (type === 'img') {
			setPreviewedImgFiles(
				previewedImgFiles.filter((media, innerIndex) => index !== innerIndex),
			);
		}
		if (type === 'pdf') {
			setPreviewedPdfFiles(
				previewedPdfFiles.filter((pdf, innerIndex) => index !== innerIndex),
			);
		}
	};

	const deleteFromCollection = async (index, collection) => {
		if (collection === 'whoDevelop') {
			setWhoDevelop((prevState) => prevState.filter((_, innerIndex) => index !== innerIndex));
			return;
		}

		if (collection === 'whereIsAlreadyImplemented') {
			setWhereIsAlreadyImplemented((prevState) =>
				prevState.filter((_, innerIndex) => index !== innerIndex),
			);
		}
	};

	const onSelect = async ({ properties, locationType }) => {
		const state =
			locationType === technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED
				? whereIsAlreadyImplemented
				: whoDevelop;
		const toBePushed = properties;
		if (state.some((element) => element.placeId === toBePushed.placeId)) {
			return;
		}
		const response = await geocodeByPlaceId(toBePushed.placeId);
		if (response) {
			toBePushed.location = {
				lat: response[0].geometry.location.lat(),
				lng: response[0].geometry.location.lng(),
			};
		}

		const createResponse = await createLocation({
			place_id: toBePushed.placeId,
			address: toBePushed.description,
			lat: toBePushed.location?.lat?.toString(),
			lng: toBePushed.location?.lng?.toString(),
		});

		if (createResponse.error) {
			toast.error(
				createResponse.messages?.[0]?.message ||
					'Ocorreu um erro para salvar sua localização, tente novamente em instantes.',
			);
			return;
		}

		const newState = [
			...state,
			{ ...toBePushed, locationType, id: createResponse.location.id },
		];
		if (locationType === technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED) {
			setWhereIsAlreadyImplemented(newState);
			setWhereIsAlreadyImplementedInput('');
		} else {
			setWhoDevelop(newState);
			setWhoDevelopInput('');
		}
	};

	return (
		<Wrapper>
			<HelpModal show={!!uploadError} onHide={() => setUploadError(false)}>
				{uploadError}
			</HelpModal>
			<Row>
				<Column>
					<Row>
						<Column>
							<Title>Onde a Tecnologia é desenvolvida?</Title>
						</Column>
					</Row>
					<Row>
						<Column>
							<PlacesAutocomplete
								id="who_develop"
								name="who_develop"
								value={whoDevelopInput}
								onChange={(value) => setWhoDevelopInput(value)}
								onSelect={(_, __, properties) =>
									onSelect({
										properties,
										locationType: technologyLocationsEnum.WHO_DEVELOP,
									})
								}
							>
								{({
									getInputProps,
									suggestions,
									getSuggestionItemProps,
									loading,
								}) => (
									<div>
										<InputField
											{...getInputProps({
												placeholder: 'Procurar instituições e empresas...',
												className: 'location-search-input',
											})}
											form={{ register: () => {} }}
										/>
										<div className="autocomplete-dropdown-container">
											{loading && (
												<GoogleAddressSugestions>
													Carregando...
												</GoogleAddressSugestions>
											)}
											<GoogleAddressSugestions>
												{suggestions.map((suggestion) => {
													const style = suggestion.active
														? {
																backgroundColor: '#fafafa',
														  }
														: {
																backgroundColor: '#fff',
														  };
													return (
														<div
															key={suggestion.placeId}
															{...getSuggestionItemProps(suggestion, {
																style,
															})}
														>
															<Suggestion>
																{suggestion.description}
															</Suggestion>
														</div>
													);
												})}
											</GoogleAddressSugestions>
										</div>
									</div>
								)}
							</PlacesAutocomplete>
						</Column>
					</Row>
					<Row>
						<Column>
							{whoDevelop.map((element, index) => {
								return (
									<IconRow row>
										<IconLink>
											<FaMapMarkerAlt size="2rem" /> {element.description}
										</IconLink>
										<CircularButton
											variant="remove"
											height="2"
											width="2"
											onClick={() =>
												deleteFromCollection(index, 'whoDevelop')
											}
										>
											<FaTrash size="1em" />
										</CircularButton>
										<InputHiddenField
											form={form}
											type="hidden"
											name={`locations.who_develop.${index}`}
										/>
									</IconRow>
								);
							})}
						</Column>
					</Row>
					<Row>
						<Column>
							<Title>Onde a Tecnologia pode ser aplicada?</Title>
						</Column>
					</Row>
					<Row>
						<Column>
							<SelectField
								form={form}
								id="where_can_be_applied"
								label="Região"
								name="terms.where_can_be_applied"
								placeholder="Escolha uma região"
								validation={{ required: true }}
								options={[
									{
										value: 'semiarido',
										label: 'Semiárido',
									},
								]}
							/>
						</Column>
					</Row>

					<Row>
						<Column>
							<Title>Onde a Tecnologia já está implantada?</Title>
						</Column>
					</Row>
					<Row>
						<Column>
							<PlacesAutocomplete
								id="where_is_already_implemented"
								name="where_is_already_implemented"
								value={whereIsAlreadyImplementedInput}
								onChange={(value) => setWhereIsAlreadyImplementedInput(value)}
								onSelect={(_, __, properties) =>
									onSelect({
										properties,
										locationType:
											technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED,
									})
								}
							>
								{({
									getInputProps,
									suggestions,
									getSuggestionItemProps,
									loading,
								}) => (
									<div>
										<InputField
											{...getInputProps({
												placeholder: 'Procurar localidades...',
												className: 'location-search-input',
											})}
											form={{ register: () => {} }}
										/>
										<div className="autocomplete-dropdown-container">
											{loading && (
												<GoogleAddressSugestions>
													Carregando...
												</GoogleAddressSugestions>
											)}
											<GoogleAddressSugestions>
												{suggestions.map((suggestion) => {
													const style = suggestion.active
														? {
																backgroundColor: '#fafafa',
														  }
														: {
																backgroundColor: '#fff',
														  };
													return (
														<div
															{...getSuggestionItemProps(suggestion, {
																style,
															})}
															key={suggestion.placeId}
														>
															<Suggestion>
																{suggestion.description}
															</Suggestion>
														</div>
													);
												})}
											</GoogleAddressSugestions>
										</div>
									</div>
								)}
							</PlacesAutocomplete>
						</Column>
					</Row>
					<Row>
						<Column>
							{whereIsAlreadyImplemented.map((element, index) => {
								return (
									<IconRow row>
										<IconLink>
											<FaMapMarkerAlt size="2rem" /> {element.description}
										</IconLink>
										<CircularButton
											variant="remove"
											height="2"
											width="2"
											onClick={() =>
												deleteFromCollection(
													index,
													'whereIsAlreadyImplemented',
												)
											}
										>
											<FaTrash size="1em" />
										</CircularButton>
										<InputHiddenField
											form={form}
											type="hidden"
											name={`locations.where_is_already_implemented.${index}`}
										/>
									</IconRow>
								);
							})}
						</Column>
					</Row>
				</Column>
				<Column>
					<Title>Fotos da tecnologia</Title>
					<Dropzone
						accept="image/*"
						onDrop={(acceptedFiles) => onDropAttachments(acceptedFiles, 'img')}
						ref={imgsRef}
					>
						{({ getRootProps, getInputProps }) => (
							<UploadBox {...getRootProps()}>
								<input {...getInputProps()} />
								<SvgBox>
									<IconBox>
										<FaFileUpload size="5rem" />
										<IconTextBox>
											<Div>Upload</Div>
											<Div>1280px x 720px</Div>
										</IconTextBox>
									</IconBox>
								</SvgBox>
							</UploadBox>
						)}
					</Dropzone>
					<UploadedImages data-cy="uploaded-images">
						<Controller
							render={({ field }) => (
								<ImagesPreview
									{...field}
									previewedImgFiles={previewedImgFiles}
									deleteAttachment={deleteAttachment}
								/>
							)}
							name="thumbnail_id"
							control={control}
						/>
					</UploadedImages>

					<Title>Videos da tecnologia</Title>
					<VideoContainer>
						<InputVideoWrapper>
							<InputField
								form={form}
								type="url"
								name="link_video"
								placeholder="Link do Youtube"
							/>
							<InputHiddenField form={form} type="hidden" name="videos" />
							<ButtonVideoAdd
								type="button"
								variant="secondary"
								onClick={() => onAddVideos(form.getValues('link_video'))}
							>
								Adicionar
							</ButtonVideoAdd>
						</InputVideoWrapper>
						{videos?.length ? (
							<VideosWrapper>
								{videos.map((video, idx) => (
									<VideoItem key={`video_${video.videoId}`}>
										<a
											href={`//www.youtube.com/watch?v=${video.videoId}`}
											target="_blank"
											rel="noreferrer"
										>
											<img
												src={video.thumbnail}
												alt={`Youtube vídeo ${video.videoId}`}
											/>
										</a>
										<RemoveVideoButton
											type="button"
											onClick={() => onRemoveVideos(idx)}
										>
											Remover
										</RemoveVideoButton>
									</VideoItem>
								))}
							</VideosWrapper>
						) : (
							<EmptyVideos>
								<p>Nenhum vídeo adicionado</p>
							</EmptyVideos>
						)}
					</VideoContainer>

					<Title>Documentos</Title>
					<Dropzone
						accept=".pdf"
						onDrop={(acceptedFiles) => onDropAttachments(acceptedFiles, 'pdf')}
						ref={pdfRef}
					>
						{({ getRootProps, getInputProps }) => (
							<UploadBox {...getRootProps()}>
								<input {...getInputProps()} />
								<SvgBox>
									<IconBox>
										<FaFileUpload size="5rem" />
										<IconTextBox>
											<Div>Upload</Div>
											<Div>.PDF</Div>
										</IconTextBox>
									</IconBox>
								</SvgBox>
							</UploadBox>
						)}
					</Dropzone>
					<UploadedDocuments>
						{previewedPdfFiles?.map((element, index) => {
							return (
								<IconRow row>
									<IconLink href={element.url}>
										<FaFilePdf size="2rem" /> {element.filename}
									</IconLink>
									<CircularButton
										variant="remove"
										height="2"
										width="2"
										onClick={() =>
											deleteAttachment({
												index,
												element,
												type: 'pdf',
											})
										}
									>
										<FaTrash size="1em" />
									</CircularButton>
								</IconRow>
							);
						})}
					</UploadedDocuments>
				</Column>
			</Row>
		</Wrapper>
	);
}

Review = ({ data: { technology }, form }) => {
	const [acceptedTerms, setAcceptedTerms] = useState({
		true_information: false,
		responsibility: false,
		respect_of_rights: false,
		judicial_accountability: false,
	});

	const responsibles = [
		technology.technologyResponsibles?.owner,
		...technology.technologyResponsibles?.users,
	];

	// eslint-disable-next-line consistent-return
	const handleAcceptedTerms = (type) => {
		if (technology?.status !== statusEnum.DRAFT) {
			return null;
		}

		const types = Object.keys(acceptedTerms);

		if (!type || !types.some((item) => item === type)) {
			return null;
		}

		setAcceptedTerms({
			...acceptedTerms,
			[type]: !acceptedTerms[type],
		});
	};

	return (
		<Wrapper>
			<Row>
				<Cell col="2">
					<Section title="Identificação" color="lightGray" hideWhenIsEmpty={false}>
						<TextValue title="Título" value={technology?.title} />
						<TextValue
							title="Nome Popular"
							value={technology?.taxonomies?.popular_name}
						/>
						<TextValue title="Sigla" value={technology?.taxonomies?.initials} />
						<TextValue title="Descrição" value={technology?.description} />
						<TextValue
							title="Grande área"
							value={technology['knowledge_area_id.0']?.label}
						/>
						<TextValue title="Area" value={technology['knowledge_area_id.1']?.label} />
						<TextValue
							title="Sub-área"
							value={technology['knowledge_area_id.2']?.label}
						/>
						<TextValue
							title="Especialidade"
							value={technology['knowledge_area_id.3']?.label}
						/>
						<TextValue
							title="Classificação"
							value={technology?.taxonomies?.classification}
						/>
						<TextValue title="Dimensão" value={technology?.taxonomies?.dimension} />
						<TextValue
							title="Público-alvo"
							value={technology?.taxonomies?.target_audience}
						/>
						<TextValue title="Bioma" value={technology?.taxonomies?.biome} />
						<TextValue
							title="Programa Governamental"
							value={technology?.taxonomies?.government_program}
						/>
						<TextValue
							title="Palavras-chave"
							value={technology?.taxonomies?.keywords}
						/>
					</Section>

					<Section title="Aspectos Legais" color="lightGray" hideWhenIsEmpty={false}>
						<TextValue
							title="Tecnologia Patenteada"
							value={technology?.patent}
							boolean
						/>
						<TextValue
							title="Proteção Intelectual"
							value={technology?.taxonomies?.intellectual_property}
						/>
					</Section>

					<Section
						title="Estágio de Desenvolvimento"
						color="lightGray"
						hideWhenIsEmpty={false}
					>
						<TextValue title="Escala TRL" value={technology?.taxonomies?.stage} />
					</Section>

					<Section title="Financiamento" color="lightGray" hideWhenIsEmpty={false}>
						<TextValue
							title="Necessita de Financiamento"
							value={technology?.technologyCosts?.funding_required}
							boolean
						/>
						<TextValue
							title="Tipo de Financiamento"
							value={getFundingLabelByValue(
								'types',
								technology?.technologyCosts?.funding_type,
							)}
						/>
						<TextValue
							title="Valor do Financiamento"
							value={technology?.technologyCosts?.funding_value}
						/>
						<TextValue
							title="Situação"
							value={getFundingLabelByValue(
								'status',
								technology?.technologyCosts?.funding_status,
							)}
						/>
					</Section>

					<Section title="Custos da Tecnologia" color="lightGray" hideWhenIsEmpty={false}>
						<TextValue
							title="Valor da Tecnologia"
							value={formatMoney(technology?.technologyCosts?.price)}
						/>
						<TextValue
							title="Essa tecnologia é vendida por mim"
							value={technology?.technologyCosts?.is_seller}
							boolean
						/>
						<CostsTable
							title="Custo de Desenvolvimento"
							data={technology?.technologyCosts?.costs?.development_costs}
							totalColor="green"
						/>
						<CostsTable
							title="Custos de Implantação"
							data={technology?.technologyCosts?.costs?.implementation_costs}
						/>
						<CostsTable
							title="Custos de Manutenção"
							data={technology?.technologyCosts?.costs?.maintenance_costs}
							totalColor="green"
						/>
					</Section>

					<Section title="Documentos" color="lightGray" hideWhenIsEmpty={false}>
						<UploadsTitle>Fotos da Tecnologia</UploadsTitle>
						{technology.attachments.images?.length ? (
							<UploadedImages>
								{technology.attachments.images?.map((element) => (
									<IconRow key={element.url}>
										<Media src={element.url} />
									</IconRow>
								))}
							</UploadedImages>
						) : (
							<p>Nenhuma foto cadastrada</p>
						)}

						<UploadsTitle>Vídeos da Tecnologia</UploadsTitle>
						{technology.videos?.length ? (
							<Videos data={technology.videos} />
						) : (
							<p>Nenhum vídeo cadastrado</p>
						)}

						<UploadsTitle>Documentos da Tecnologia</UploadsTitle>
						{technology.attachments.documents?.length ? (
							<UploadedDocuments>
								{technology.attachments.documents?.map((element) => (
									<IconRow row key={element.url}>
										<IconLink href={element.url}>
											<FaFilePdf size="2rem" /> {element.filename}
										</IconLink>
									</IconRow>
								))}
							</UploadedDocuments>
						) : (
							<p>Nenhum documento cadastrado</p>
						)}
					</Section>
				</Cell>

				<Cell col="2">
					<Section title="Objetivos" color="lightGray" hideWhenIsEmpty={false}>
						<TextValue title="Objetivo Principal" value={technology?.primary_purpose} />
						<TextValue
							title="Objetivos secundários"
							value={technology?.secondary_purpose}
						/>
					</Section>

					<Section title="Problematização" color="lightGray" hideWhenIsEmpty>
						<TextValue
							title="Problemas que a tecnologia soluciona"
							value={technology?.solves_problem}
						/>
						<TextValue
							title="Problemas que a tecnologia acarreta"
							value={technology?.entailes_problem}
						/>
					</Section>

					<Section title="Aplicação" color="lightGray" hideWhenIsEmpty={false}>
						<TextValue
							title="Onde é a Aplicação"
							value={technology?.taxonomies?.locale}
						/>
						<TextValue
							title="Forma de Aplicação"
							value={technology?.application_mode}
						/>
						<TextValue
							title="Exemplos de Aplicação"
							value={technology?.application_examples}
						/>
						<TextValue
							title="Pré-requisitos para a implantação"
							value={technology?.taxonomies?.prerequisites_for_deployment}
						/>
						<TextValue
							title="Duração do processo de instalação da tecnologia (em dias)"
							value={technology?.taxonomies?.installation_time}
						/>
					</Section>

					<Section title="Contribuição" color="lightGray" hideWhenIsEmpty={false}>
						<TextValue
							title="Contribuição para o semiárido"
							value={technology?.contribution}
						/>
					</Section>

					<Section title="Riscos" color="lightGray" hideWhenIsEmpty={false}>
						<TextValue
							title="Riscos associados à tecnologia"
							value={technology?.risks}
						/>
					</Section>

					<Section title="Mapas" color="lightGray" hideWhenIsEmpty={false}>
						<TechnologyProvider technology={technology}>
							<GeoLocation stacked />
						</TechnologyProvider>
					</Section>

					<Section title="Responsáveis" color="lightGray" hideWhenIsEmpty={false}>
						<ResponsiblesTable data={responsibles} hideLattesInfo />
					</Section>
				</Cell>
			</Row>

			<Row>
				<Cell>
					<Section title="Observações" color="lightGray" hideWhenIsEmpty={false}>
						<Editor
							config={{
								placeholder: 'Digite suas observações para o curador aqui',
								removePlugins: ['ImageUpload', 'Table', 'MediaEmbed'],
							}}
							form={form}
							name="comment"
						/>

						{technology.status !== statusEnum.DRAFT && (
							<RadioField
								label="Finalizar edição da tecnologia e enviar para análise do curador?"
								form={form}
								name="sendToReviewer"
								options={[
									{ id: 1, label: 'Sim', value: true },
									{ id: 2, label: 'Não', value: false },
								]}
								help="Ao confirmar o envio, a tecnologia será analisada por um curador especialista na área."
								validation={{ required: true }}
							/>
						)}
					</Section>
				</Cell>
			</Row>

			{technology?.status === statusEnum.DRAFT && (
				<Row>
					<Cell>
						<Section
							title="Termos de Aceitação"
							color="lightGray"
							hideWhenIsEmpty={false}
						>
							<Checkbox
								name="acceptTrueInformationTerms"
								value={acceptedTerms.true_information}
								onChange={() => handleAcceptedTerms('true_information')}
								label={
									<span>
										Declaro ciência de que devo fornecer apenas informações
										verdadeiras no cadastro das tecnologias. Veja mais nos{' '}
										<a
											href={internalPages.termsOfUse}
											rel="noreferrer"
											target="_blank"
										>
											Termos e Condições de Uso
										</a>
										.
									</span>
								}
								required
							/>
							<Checkbox
								name="acceptResponsibilityTerms"
								value={acceptedTerms.responsibility}
								onChange={() => handleAcceptedTerms('responsibility')}
								label={
									<span>
										Estou ciente de que as informações cadastradas são de minha
										inteira responsabilidade, e a Plataforma Sabiá não
										responderá por quaisquer violações ao Direito de Propriedade
										Intelectual e Direito Autoral de terceiros. Veja mais nos{' '}
										<a
											href={internalPages.termsOfUse}
											rel="noreferrer"
											target="_blank"
										>
											Termos e Condições de Uso
										</a>
										.
									</span>
								}
								required
							/>
							<Checkbox
								name="acceptRespectRightsTerms"
								value={acceptedTerms.respect_of_rights}
								onChange={() => handleAcceptedTerms('respect_of_rights')}
								label={
									<span>
										Estou ciente de que poderei ser penalizado com advertência,
										suspensão e encerramento da minha conta por eventuais
										violações a direitos de terceiros no cadastro das
										tecnologias, como o Direito de Propriedade Intelectual e
										Direito Autoral. Veja mais nos{' '}
										<a
											href={internalPages.termsOfUse}
											rel="noreferrer"
											target="_blank"
										>
											Termos e Condições de Uso
										</a>
										.
									</span>
								}
								required
							/>
							<Checkbox
								name="acceptJudicialAccountabilityTerms"
								value={acceptedTerms.judicial_accountability}
								onChange={() => handleAcceptedTerms('judicial_accountability')}
								label={
									<span>
										Declaro ciência de que as transgressões a direitos de
										terceiros no cadastro das tecnologias podem implicar em
										responsabilização na esfera jurisdicional cível e criminal.
										Veja mais nos{' '}
										<a
											href={internalPages.termsOfUse}
											rel="noreferrer"
											target="_blank"
										>
											Termos e Condições de Uso
										</a>
										.
									</span>
								}
								required
							/>
						</Section>
					</Cell>
				</Row>
			)}
		</Wrapper>
	);
}