|
1 | 1 | import React, { RefObject, useEffect, useState } from 'react'; |
| 2 | +import { AiOutlineQuestionCircle } from 'react-icons/ai'; |
| 3 | +import Link from 'next/link'; |
2 | 4 | import ReactMarkdown from 'react-markdown'; |
3 | 5 | import SelectBBs, { IRSCFormRef } from '../shared/combined/SelectBBs'; |
4 | 6 | import { getComplianceRequirements } from '../../service/serviceAPI'; |
5 | 7 | import { ComplianceRequirementsType } from '../../service/types'; |
6 | 8 | import useTranslations from '../../hooks/useTranslation'; |
| 9 | +import { CONFLUENCE_INSTRUCTIONS_LINK } from '../../service/constants'; |
7 | 10 |
|
8 | 11 | type InterfaceComplianceFormProps = { |
9 | 12 | setUpdatedBBs: (data: ComplianceRequirementsType[] | undefined) => void; |
@@ -40,25 +43,37 @@ const InterfaceComplianceForm = ({ |
40 | 43 |
|
41 | 44 | return ( |
42 | 45 | <div style={{ display: display ? 'block' : 'none' }}> |
| 46 | + <div className="question-line"> |
| 47 | + <AiOutlineQuestionCircle className="form-question-mark-icon" /> |
| 48 | + <p className="question-line-text"> |
| 49 | + {format('form.question_line.not_sure_how_to_start')} |
| 50 | + {format('form.question_line.click')} |
| 51 | + <Link |
| 52 | + className="question-line-link" |
| 53 | + href={CONFLUENCE_INSTRUCTIONS_LINK} |
| 54 | + target="_blank" |
| 55 | + > |
| 56 | + {format('form.question_line.here')} |
| 57 | + </Link> |
| 58 | + {format( |
| 59 | + 'form.question_line.and_see_instructions_on_how_to_configure_interface_compliance' |
| 60 | + )} |
| 61 | + </p> |
| 62 | + </div> |
43 | 63 | <div className="interface-bb-selector"> |
| 64 | + {/* @ts-ignore */} |
44 | 65 | <ReactMarkdown className="definition-description" linkTarget="_blank"> |
45 | | - {`${format('form.select_building_blocks.api.top.label.part_1')}`} |
46 | | - </ReactMarkdown> |
47 | | - <ReactMarkdown className="definition-description" linkTarget="_blank"> |
48 | | - {`${format('form.select_building_blocks.api.top.label.part_2')}`} |
| 66 | + {format('form.select_building_blocks.top.label')} |
49 | 67 | </ReactMarkdown> |
50 | 68 | <ol> |
51 | 69 | <li> |
52 | | - <p className="definition-description">{format('form.select_building_blocks.api.list.first.label')}</p> |
53 | | - </li> |
54 | | - <li> |
55 | | - <p className="definition-description">{format('form.select_building_blocks.api.list.second.label')}</p> |
| 70 | + <p className="definition-description">{format('form.select_building_blocks.list.first.label')}</p> |
56 | 71 | </li> |
57 | 72 | <li> |
58 | | - <p className="definition-description">{format('form.select_building_blocks.api.list.third.label')}</p> |
| 73 | + <p className="definition-description">{format('form.select_building_blocks.list.second.label')}</p> |
59 | 74 | </li> |
60 | 75 | <li> |
61 | | - <p className="definition-description">{format('form.select_building_blocks.api.list.fourth.label')}</p> |
| 76 | + <p className="definition-description">{format('form.select_building_blocks.list.third.label')}</p> |
62 | 77 | </li> |
63 | 78 | </ol> |
64 | 79 | <p className="definition-description">{format('form.select_building_blocks.bottom.label')}</p> |
|
0 commit comments