show-certificate.component.tsx 6.21 KB
Newer Older
ggrund's avatar
ggrund committed
1
/*
2
 * eu-digital-green-certificates/ dgca-issuance-web
ggrund's avatar
ggrund committed
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
 *
 * (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 { Button, Card, Col, Container, Row } from 'react-bootstrap'

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

import useNavigation from '../misc/navigation';

import QRCode from 'qrcode.react';

32
import Spinner from './spinner/spinner.component';
33
import { EUDGC } from '../generated-files/dgc-combined-schema';
Kay Kleinvogel's avatar
Kay Kleinvogel committed
34
import genEDGCQR, { CertResult } from '../misc/edgcQRGenerator';
35
36

import ShowCertificateData from '../misc/ShowCertificateData';
Artur T's avatar
Artur T committed
37

38
// import { usePostPatient } from '../api';
ggrund's avatar
ggrund committed
39

40
const ShowCertificate = (props: any) => {
ggrund's avatar
ggrund committed
41
42
43
44
45

    const navigation = useNavigation();
    const { t } = useTranslation();

    const [isInit, setIsInit] = React.useState(false)
46
    const [eudgc, setEudgc] = React.useState<EUDGC>();
ggrund's avatar
ggrund committed
47
    const [qrCodeValue, setQrCodeValue] = React.useState('');
48

Artur T's avatar
Artur T committed
49
    const [tan, setTAN] = React.useState('');
ggrund's avatar
ggrund committed
50
51
52

    // set patient data on mount and set hash from uuid
    React.useEffect(() => {
53
54
55
        if (isInit) {
            if (props.eudgc) {
                setEudgc(props.eudgc)
fOppenheimer's avatar
fOppenheimer committed
56
57
58
            }
            else
                props.setError({ error: '', message: t('translation:error-patient-data-load'), onCancel: navigation!.toLanding });
59
        }
ggrund's avatar
ggrund committed
60
        // eslint-disable-next-line react-hooks/exhaustive-deps
fOppenheimer's avatar
fOppenheimer committed
61
    }, [isInit])
ggrund's avatar
ggrund committed
62
63

    React.useEffect(() => {
64
        if (eudgc) {
ggrund-tsi's avatar
ggrund-tsi committed
65

Artur T's avatar
Artur T committed
66
            // TODO catch errors and handle them du to possible server connection problems
ggrund-tsi's avatar
ggrund-tsi committed
67
68
69
70
71
72
73
74
75
            genEDGCQR(eudgc)
                .then((certResult: CertResult) => {
                    //console.log("qrcode: " + certResult.qrCode);
                    setQrCodeValue(certResult.qrCode);
                    setTAN(certResult.tan);
                })
                .catch(error => {
                    handleError(error);
                });
ggrund's avatar
ggrund committed
76
        }
ggrund-tsi's avatar
ggrund-tsi committed
77
        // eslint-disable-next-line react-hooks/exhaustive-deps
78
79
    }, [eudgc])

ggrund's avatar
ggrund committed
80
81
82

    // set ready state for spinner
    React.useEffect(() => {
83
        if (navigation) {
ggrund's avatar
ggrund committed
84
85
            setTimeout(setIsInit, 200, true);
        }
86
    }, [navigation]);
ggrund's avatar
ggrund committed
87
88

    const finishProcess = () => {
89
        props.setEudgc(undefined);
ggrund's avatar
ggrund committed
90
91
92
93
94
95
96
97
98
99
100
101
        navigation!.toLanding();
    }

    const handleError = (error: any) => {
        let msg = '';

        if (error) {
            msg = error.message
        }
        props.setError({ error: error, message: msg, onCancel: navigation!.toLanding });
    }

102
    const handleBack = () => {
ggrund-tsi's avatar
ggrund-tsi committed
103
104
105
106
107
108
109
110
        if (eudgc) {
            if (eudgc.v) {
                navigation!.toRecordVac();
            }
            if (eudgc.t) {
                navigation!.toRecordTest();
            }
            if (eudgc.r) {
111
                navigation!.toRecordRecovery();
ggrund-tsi's avatar
ggrund-tsi committed
112
113
            }
        }
114
        else {
ggrund-tsi's avatar
ggrund-tsi committed
115
116
117
118
            navigation!.toLanding();
        }
    }

ggrund's avatar
ggrund committed
119
    return (
ggrund-tsi's avatar
ggrund-tsi committed
120
        !(isInit && eudgc && qrCodeValue) ? <Spinner /> :
ggrund's avatar
ggrund committed
121
122
            <>
                <Card id='data-card'>
Kay Kleinvogel's avatar
Kay Kleinvogel committed
123
                    {/*    content area with patient inputs and check box    */}
ggrund-tsi's avatar
ggrund-tsi committed
124
                    <Card.Header id='data-header' className='p-3'>
ggrund's avatar
ggrund committed
125
                        <Row>
ggrund-tsi's avatar
ggrund-tsi committed
126
127
128
129
130
131
132
133
134
                            <Col md='6' className='pl-0'>
                                <Card.Title className='m-md-0 tac-xs-tal-md jcc-xs-jcfs-md' as={'h3'} >{t('translation:your-certificate')}</Card.Title>
                            </Col>
                        </Row>
                    </Card.Header>
                    <Card.Body id='data-body' className='p-3'>
                        <Row>
                            <Col sm='6' className='p-3'>
                                
135
136
                                <ShowCertificateData eudgc={eudgc} />

ggrund's avatar
ggrund committed
137
                            </Col>
ggrund-tsi's avatar
ggrund-tsi committed
138
                            <Col sm='6' className='p-3'>
ggrund's avatar
ggrund committed
139
140
141
142
143
                                <Container id='qr-code-container'>
                                    {qrCodeValue ? <><QRCode id='qr-code' size={256} renderAs='svg' value={qrCodeValue} />
                                        {/* <Card.Text className='input-label' >{qrCodeValue}</Card.Text> */}
                                    </> : <></>}
                                </Container>
ggrund-tsi's avatar
ggrund-tsi committed
144
                                <Card.Text className='input-label jcc-xs-sm m-3 text-center' >TAN: {tan}</Card.Text>
ggrund's avatar
ggrund committed
145
146
147
148
                            </Col>
                        </Row>
                    </Card.Body>

Kay Kleinvogel's avatar
Kay Kleinvogel committed
149
                    {/*    footer with correction and finish button    */}
ggrund's avatar
ggrund committed
150
151
                    <Card.Footer id='data-footer'>
                        <Row>
ggrund-tsi's avatar
ggrund-tsi committed
152
                            <Col xs='6' md='4' className='pl-0 pr-2'>
ggrund's avatar
ggrund committed
153
                                <Button
ggrund-tsi's avatar
ggrund-tsi committed
154
                                    className=''
ggrund's avatar
ggrund committed
155
                                    block
ggrund-tsi's avatar
ggrund-tsi committed
156
                                    onClick={handleBack}
ggrund's avatar
ggrund committed
157
158
159
160
                                >
                                    {t('translation:patient-data-correction')}
                                </Button>
                            </Col>
ggrund-tsi's avatar
ggrund-tsi committed
161
                            <Col xs='6' md='3' className='pr-0 pl-2'>
ggrund's avatar
ggrund committed
162
                                <Button
ggrund-tsi's avatar
ggrund-tsi committed
163
                                    className=''
ggrund-tsi's avatar
ggrund-tsi committed
164
                                    variant='info'
ggrund's avatar
ggrund committed
165
                                    block
166
                                    onClick={finishProcess}
ggrund's avatar
ggrund committed
167
168
169
170
171
172
173
174
175
176
177
178
                                >
                                    {t('translation:process-finish')}
                                </Button>
                            </Col>
                        </Row>
                    </Card.Footer>
                </Card>
            </>

    )
}

179
export default ShowCertificate;