Skip to content
This repository has been archived by the owner on May 16, 2023. It is now read-only.

Commit

Permalink
Feat/disclamer (#260)
Browse files Browse the repository at this point in the history
* set default value of searchPortalConsent to true

* change success notification to toast w/o backdrop

* add notification

* fix bool error
  • Loading branch information
ggrund-tsi authored Nov 23, 2021
1 parent 5c71a49 commit 8a6b2e8
Show file tree
Hide file tree
Showing 11 changed files with 282 additions and 29 deletions.
38 changes: 33 additions & 5 deletions src/assets/SCSS/custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ body {
overflow-y: scroll;
}

.ff-fa{
.ff-fa {
font-family: "Font Awesome 5 Free", "TeleNeo";
}

Expand Down Expand Up @@ -364,12 +364,30 @@ hr {
align-self: center;
padding-left: 0.5rem;
}
.toast-container{
display: flex;
position: absolute;
justify-content: center;
z-index: 99999;
bottom: 0px;
width: 100%;
}
.qt-notification {
padding: 0.75rem 1.25rem;
margin-bottom: 20%;
border-radius: 6px;
border-color: #46a800;
color: black;
display: flex;
border: #46a800 1px solid;
background: #d4edda;
display: inline-flex !important;
flex-basis: auto;
max-width: none;
}
.qt-notification-header {
border: none;
background: #d4edda;
padding: 0%;
color: #155724;

}

.qt-notification-text {
Expand Down Expand Up @@ -470,7 +488,17 @@ td {
border: 1px solid #7e7e7e;
font-size: 1rem;
}
.rat-list-info-link{
.rat-list-info-link {
text-decoration: underline !important;
font-weight: bolder;
}
.disclaimer-text{
text-align: justify;
white-space: pre-line;
margin: 0%;
}
.speech-bubble{
display: flex;
align-self: baseline;
margin-left: 0.1rem;
}
11 changes: 9 additions & 2 deletions src/assets/i18n/de/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -131,10 +131,17 @@
"searchPortalAppointmentRequired": "Terminvereinbarung notwendig",
"RAT-list-info": "Die in der DCC-Auswahl gelisteten Tests beruhen auf einer auf EU-Ebene abgestimmten Liste und beinhalten auch Tests, die in Deutschland nicht erstattungsfähig sind. Die Erstattungsfähigkeit muss vom Betreiber selbst geprüft werden. Abgleich mit ",
"RAT-list-info-link": "https://antigentest.bfarm.de/ords/f?p=110:100:12807215185840:::::&tz=2:00",
"RAT-list-info-link-text":"BfArM-Liste",
"RAT-list-info-link-text": "BfArM-Liste",
"no-group-tooltip": "Dieser Benutzer*in kann das Schnelltestportal nicht mehr verwenden, da diesem Benutzer*in keine Teststelle zugewiesen wurde.",
"no-group-error": "Sie sind keiner Teststelle zugeordnet. Bitte kontaktieren Sie ihren Teststellen Administrator.",
"bsnr": "Betriebsstätten- nummer",
"bsnr-tooltip": "Die Betriebsstättennummer, kurz BSNR, ist eine neunstellige Nummer, die im Rahmen der vertragsärztlichen bzw. vertragspsychotherapeutischen Versorgung den Ort der Leistungserbringung (Betriebsstätte) eindeutig identifiziert.",
"bsnr-placeholder": "Betriebsstättennummer"
"bsnr-placeholder": "Betriebsstättennummer",
"disclaimer-title": "Benachrichtigung",
"disclaimer-text1-part1": "Bitte schalten Sie Ihre Teststellen im Bereich Benutzerverwaltung für unser Schnelltestsuchportal frei.\n\nSo ermöglichen Sie Ihren Kunden, die Teststelle einfach unter ",
"disclaimer-text1-part2": " zu finden.",
"disclaimer-link": "https://map.schnelltestportal.de",
"disclaimer-text2-part1": "Um eine Teststelle für unser Schnelltestsuchportal freizuschalten, klicken Sie auf das Bearbeiten-Icon und aktivieren Sie das Kästchen <strong>Im Schnelltestsuchportal anzeigen</strong>.\n\nSo ermöglichen Sie Ihren Kunden, die Teststelle einfach unter ",
"disclaimer-text2-part2": " zu finden.\n\nSie können auch zusätzliche Informationen wie Öffnungszeiten oder Ihre Website hinterlegen.",
"disclaimer-do-not-show": "Benachrichtigung nicht mehr anzeigen."
}
11 changes: 9 additions & 2 deletions src/assets/i18n/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,17 @@
"searchPortalAppointmentRequired": "Appointment Required",
"RAT-list-info": "The tests listed in the DCC selection are based on a list agreed at EU level and also include tests that are not reimbursable in Germany. The operator himself has to check the eligibility for reimbursement. Comparison with ",
"RAT-list-info-link": "https://antigentest.bfarm.de/ords/f?p=110:100:12807215185840:::::&tz=2:00",
"RAT-list-info-link-text":"BfArM list",
"RAT-list-info-link-text": "BfArM list",
"no-group-tooltip": "This user can no longer use Schnelltestportal until a new testing facility has been assigned.",
"no-group-error": "User has no testing facility assigned",
"bsnr": "Permanent establishment number",
"bsnr-tooltip": "The permanent establishment number, or BSNR for short, is a nine-digit number that uniquely identifies the place where the service is provided (permanent establishment) within the framework of contractual medical or contractual psychotherapeutic care.",
"bsnr-placeholder": "Permanent establishment number"
"bsnr-placeholder": "Permanent establishment number",
"disclaimer-title": "Notification",
"disclaimer-text1-part1": "Please activate your test sites in the user administration area for our quick test search portal.\n\nThis enables your customers to easily find the test site at ",
"disclaimer-text1-part2": ".",
"disclaimer-link": "https://map.schnelltestportal.de",
"disclaimer-text2-part1": "To activate a test site for our rapid test search portal, click on the edit icon and activate the Show in the rapid test search portal box\n\nThis enables your customers to easily find the test site at ",
"disclaimer-text2-part2":".\n\nYou can also store additional information such as opening times or your website.",
"disclaimer-do-not-show": "Don't show notification again."
}
3 changes: 3 additions & 0 deletions src/assets/images/Sprechblase_i.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 40 additions & 13 deletions src/components/landing-page.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,45 +25,72 @@ import { Button, Container, Fade } from 'react-bootstrap'
import '../i18n';
import { useTranslation } from 'react-i18next';

import useNavigation from '../misc/useNavigation';
import CwaSpinner from './spinner/spinner.component';
import { useKeycloak } from '@react-keycloak/web';
import DisclamerButton from './modules/disclamer-btn.component';
import AppContext from '../misc/appContext';
import useLocalStorage from '../misc/useLocalStorage';

const LandingPage = (props: any) => {

const navigation = useNavigation();
const context = React.useContext(AppContext);
const { t } = useTranslation();

const { keycloak } = useKeycloak();

const [isInit, setIsInit] = React.useState(false)
const [storedLandingDisclaimerShow, setStoredLandingDisclaimerShow] = useLocalStorage('landingDisclaimerShow', true);

React.useEffect(() => {
if (navigation)
if (context) {
setIsInit(true);
}, [navigation])
}
}, [context])

const hasRole = (role: string) => keycloak && (keycloak.hasRealmRole(role) || keycloak.hasRealmRole(role));

return (!isInit ? <CwaSpinner /> :
return (!(isInit && context && context.navigation) ? <CwaSpinner /> :
<Fade appear={true} in={true} >
<Container className='center-content'>

<h1 className='mx-auto mb-5'>{t('translation:welcome')}</h1>
<h1 className='mx-auto mb-5 d-flex'>
{t('translation:welcome')}
{hasRole('c19_quick_test_admin')
? <DisclamerButton
firstTimeShow={props.disclaimerShow}
checked={!storedLandingDisclaimerShow}
onInit={() => { props.setDisclaimerShow(false) }}
onCheckChange={(checked: boolean) => { setStoredLandingDisclaimerShow(!checked) }}
disclaimerText={
<>
{t('translation:disclaimer-text1-part1')}
<a
href={t('translation:disclaimer-link')}
target='blank'
>
{t('translation:disclaimer-link')}
</a>
{t('translation:disclaimer-text1-part2')}
</>
}
/>
: <></>
}
</h1>

{hasRole('c19_quick_test_counter') ?
<Button block className='landing-btn' onClick={navigation!.toRecordPatient}>{t('translation:record-patient-data')}</Button> : null}
<Button block className='landing-btn' onClick={context.navigation.toRecordPatient}>{t('translation:record-patient-data')}</Button> : null}
{hasRole('c19_quick_test_lab') ?
<Button block className='landing-btn' onClick={navigation!.toRecordTestResult}>{t('translation:record-result')}</Button> : null}
<Button block className='landing-btn' onClick={context.navigation.toRecordTestResult}>{t('translation:record-result')}</Button> : null}
{hasRole('c19_quick_test_counter') ?
<Button block className='landing-btn' onClick={navigation!.toQRScan}>{t('translation:record-qr-scan')}</Button> : null}
<Button block className='landing-btn' onClick={context.navigation.toQRScan}>{t('translation:record-qr-scan')}</Button> : null}
{hasRole('c19_quick_test_lab') ?
<><Button block className='landing-btn' onClick={navigation!.toReports}>{t('translation:failed-report')}</Button>
<Button block className='landing-btn' onClick={navigation!.toStatistics}>{t('translation:statistics-menu-item')}</Button></> : null}
<><Button block className='landing-btn' onClick={context.navigation.toReports}>{t('translation:failed-report')}</Button>
<Button block className='landing-btn' onClick={context.navigation.toStatistics}>{t('translation:statistics-menu-item')}</Button></> : null}
{hasRole('c19_quick_test_admin') ?
<Button block className='landing-btn' onClick={navigation!.toUserManagement}>{t('translation:user-management')}</Button> : null}
<Button block className='landing-btn' onClick={context.navigation.toUserManagement}>{t('translation:user-management')}</Button> : null}
</Container>
</Fade>
</Fade >
)
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/modals/group-modal.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const emptyGroup: IGroupDetails = {
pocId: '',
name: '',
pocDetails: '',
searchPortalConsent: false,
searchPortalConsent: true,
parentGroup: '',
website: '',
email: '',
Expand Down
54 changes: 54 additions & 0 deletions src/components/modals/notification-toast.component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/*
* Corona-Warn-App / cwa-quick-test-frontend
*
* (C) 2021, T-Systems International GmbH
*
* Deutsche Telekom AG and all other contributors /
* copyright owners license this file to you under the Apache
* License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React from 'react';
import { Image, Toast, ToastHeader } from 'react-bootstrap'

import '../../i18n';
import { useTranslation } from 'react-i18next';

import successIcon from '../../assets/images/icon_success.svg';


const NotificationToast = (props: any) => {

const { t } = useTranslation();

return (
<div className='toast-container'>
<Toast className='qt-notification'
show={props.show}
delay={3000}
autohide
onClose={() => props.setNotificationShow(false)}
>
<ToastHeader closeButton={false} className='qt-notification-header'>
<Image src={successIcon} className='mr-3 my-3' />
<p className='qt-notification-text my-auto mx-1'>
{t('translation:successfull-transferred')}
</p>
</ToastHeader>
</Toast>
</div>
)
}

export default NotificationToast;
13 changes: 12 additions & 1 deletion src/components/modules/card-header.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Card, Row, Col } from "react-bootstrap";

import '../../i18n';
import { useTranslation } from 'react-i18next';
import DisclamerButton from "./disclamer-btn.component";

const CardHeader = (props: any) => {

Expand All @@ -12,7 +13,17 @@ const CardHeader = (props: any) => {
<Card.Header id='data-header' className='px-3 pt-3 pb-0'>
<Row>
<Col md='6' className='px-3'>
<Card.Title className='m-md-0 tac-xs-tal-md jcc-xs-jcfs-md' as={'h2'} >{props.title}</Card.Title>
<Card.Title className='m-md-0 tac-xs-tal-md jcc-xs-jcfs-md' as={'h2'} >{props.title}
{props.disclaimerText
? <DisclamerButton
firstTimeShow={props.firstTimeShow}
checked={props.checked}
onInit={props.onInit}
onCheckChange={props.onCheckChange}
disclaimerText={props.disclaimerText}
/>
: <></>}
</Card.Title>
</Col>
{!props.idCard
? <></>
Expand Down
82 changes: 82 additions & 0 deletions src/components/modules/disclamer-btn.component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from 'react';
import { Button, Card, Col, Modal, Row, Image, Container } from 'react-bootstrap';

import '../../i18n';
import { Trans, useTranslation } from 'react-i18next';

import SpeechBubbleImage from '../../assets/images/Sprechblase_i.svg';
import { FormGroupConsentCkb } from './form-group.component';


const DisclamerButton = (props: any) => {

const { t } = useTranslation();
const [show, setShow] = React.useState(false);

React.useEffect(() => {
setShow(props.firstTimeShow);
props.onInit();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

return (
<>
<Image
src={SpeechBubbleImage}
className='speech-bubble'
onClick={() => { setShow(true) }}
/>

<Modal
contentClassName='data-modal'
show={show}
backdrop={true}
onHide={() => { setShow(false) }}
keyboard={false}
centered
>
<Modal.Header id='data-header' className='pb-0' >
<Row>
<Col >
<Card.Title className='m-0 jcc-xs-jcfs-md' as={'h2'} >
{t('translation:disclaimer-title')}</Card.Title>
</Col>
</Row>
</Modal.Header>

<Modal.Body className='bg-light py-0'>
<hr />
<h5 className='disclaimer-text'>
<Trans>{props.disclaimerText}</Trans>
</h5>

<hr />

<FormGroupConsentCkb controlId='formDoNotShowCheckbox' title={t('translation:disclaimer-do-not-show')}
onChange={(evt: any) => props.onCheckChange(evt.currentTarget.checked)}
type='checkbox'
checked={props.checked}
/>
</Modal.Body>

<Modal.Footer id='data-footer'>
<Container className='p-0'>
<Row className='justify-content-end'>
<Col xs='6' className='p-0'>
<Button
className='py-0'
block
onClick={() => { setShow(false) }}
>
{t('translation:ok')}
</Button>
</Col>
</Row>
</Container>
</Modal.Footer>
</Modal>
</>
)
}

export default DisclamerButton;
Loading

0 comments on commit 8a6b2e8

Please sign in to comment.