Refactor

cypress/e2e/fordeling/Annet.cy.js

@@ -48,7 +48,7 @@ describe(`Fordeling ${dokumenttype}`, { testIsolation: false }, () => {
 
         cy.get('[data-test-id="oppretteGosysOppgaveBtn"]').should('exist').should('not.be.disabled').click();
 
-        cy.get('[data-test-id="opprettIGosysOkModal"]').should('not.exist');
+        cy.get('[data-test-id="okGåTilLosModal"]').should('not.exist');
 
         cy.get('[data-test-id="opprettIGosysFeil"]').should('exist');
     });
@@ -63,10 +63,10 @@ describe(`Fordeling ${dokumenttype}`, { testIsolation: false }, () => {
 
         cy.get('[data-test-id="opprettIGosysFeil"]').should('not.exist');
 
-        cy.get('[data-test-id="opprettIGosysOkModal"]').should('exist');
-        cy.get('[data-test-id="opprettIGosysOkModalInfo"]').should('exist');
-        cy.get('[data-test-id="opprettIGosysOkModalOKBtn"]').should('exist').click();
+        cy.get('[data-test-id="okGåTilLosModal"]').should('exist');
+        cy.get('[data-test-id="okGåTilLosModalInfo"]').should('exist');
+        cy.get('[data-test-id="okGåTilLosModalOKBtn"]').should('exist').click();
 
-        cy.get('[data-test-id="opprettIGosysOkModal"]').should('not.exist');
+        cy.get('[data-test-id="okGåTilLosModal"]').should('not.exist');
     });
 });

src/app/components/ErDuSikkerModal.tsx

@@ -1,48 +1,49 @@
 import React from 'react';
 
 import { FormattedMessage } from 'react-intl';
-import { Button } from '@navikt/ds-react';
-import VerticalSpacer from './VerticalSpacer';
+import { Button, Modal } from '@navikt/ds-react';
+import VerticalSpacer from 'app/components/VerticalSpacer';
 
 interface Props {
     melding: string;
+    modalKey: string;
+    open: boolean;
     submitKnappText: string;
+    extraInfo?: string;
 
     onSubmit: () => void;
     onClose: () => void;
-
-    extraInfo?: string;
 }
 
-const ErDuSikkerModal: React.FC<Props> = ({ melding, submitKnappText, onSubmit, onClose, extraInfo }: Props) => {
-    return (
-        <div className="modal_content">
+const ErDuSikkerModal = ({ melding, modalKey, open, onSubmit, onClose, submitKnappText, extraInfo }: Props) => (
+    <Modal key={modalKey} onClose={onClose} aria-label={modalKey} open={open} data-testid="erdusikkermodal">
+        <Modal.Body>
             <FormattedMessage id={melding} />
-            <VerticalSpacer sixteenPx />
+
             {extraInfo && (
                 <div>
+                    <VerticalSpacer sixteenPx />
                     <FormattedMessage id={extraInfo} />
                 </div>
             )}
-            <div className="punch_mappemodal_knapperad">
-                <Button
-                    size="small"
-                    className="knapp1"
-                    onClick={() => {
-                        onSubmit();
-                        onClose();
-                    }}
-                    type="button"
-                >
-                    <FormattedMessage id={submitKnappText} />
-                </Button>
-
-                <Button variant="secondary" size="small" className="knapp2" onClick={() => onClose()}>
-                    <FormattedMessage id={'skjema.knapp.avbryt'} />
-                </Button>
-            </div>
-        </div>
-    );
-};
+        </Modal.Body>
+
+        <Modal.Footer>
+            <Button
+                size="small"
+                onClick={() => {
+                    onSubmit();
+                    onClose();
+                }}
+            >
+                <FormattedMessage id={submitKnappText} />
+            </Button>
+
+            <Button variant="secondary" size="small" onClick={() => onClose()}>
+                <FormattedMessage id="skjema.knapp.avbryt" />
+            </Button>
+        </Modal.Footer>
+    </Modal>
+);
 
 export default ErDuSikkerModal;

src/app/components/brev/BrevComponent.tsx

@@ -3,7 +3,7 @@ import { Formik, Form } from 'formik';
 import { useNavigate } from 'react-router-dom';
 import hash from 'object-hash';
 import { FormattedMessage } from 'react-intl';
-import { Alert, Button, ErrorMessage, Modal } from '@navikt/ds-react';
+import { Alert, Button, ErrorMessage } from '@navikt/ds-react';
 import { FileSearchIcon, PaperplaneIcon } from '@navikt/aksel-icons';
 import { ApiPath } from 'app/apiConfig';
 import BrevFormKeys from 'app/models/enums/BrevFormKeys';
@@ -173,23 +173,17 @@ const BrevComponent: React.FC<BrevProps> = ({
                 return (
                     <>
                         {!sendBrevUtenModal && (
-                            <Modal
-                                className="modalContainer"
-                                key="erdusikkerpåatsendebrevmodal"
-                                onClose={() => setVisErDuSikkerModal(false)}
-                                aria-label="erdusikkerpåatsendebrevmodal"
+                            <ErDuSikkerModal
+                                melding="modal.erdusikker.sendebrev"
+                                modalKey="erdusikkerpåatsendebrevmodal"
                                 open={visErDuSikkerModal}
-                            >
-                                <ErDuSikkerModal
-                                    submitKnappText="modal.erdusikker.fortsett"
-                                    melding="modal.erdusikker.sendebrev"
-                                    onSubmit={() => {
-                                        setVisErDuSikkerModal(false);
-                                        handleSubmit();
-                                    }}
-                                    onClose={() => setVisErDuSikkerModal(false)}
-                                />
-                            </Modal>
+                                submitKnappText="modal.erdusikker.fortsett"
+                                onSubmit={() => {
+                                    setVisErDuSikkerModal(false);
+                                    handleSubmit();
+                                }}
+                                onClose={() => setVisErDuSikkerModal(false)}
+                            />
                         )}
 
                         <Form>

src/app/components/okGåTilLosModal/OkGåTilLosModal.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { FormattedMessage } from 'react-intl';
+import { Button, Modal } from '@navikt/ds-react';
+import CheckCircleSvg from '../../assets/SVG/CheckCircleSVG';
+import { getEnvironmentVariable } from '../../utils';
+import { initializeDate } from '../../utils/timeUtils';
+
+import './okGåTilLosModal.less';
+
+interface Props {
+    melding: string;
+    onClose: () => void;
+}
+
+const getDate = () => initializeDate().add(21, 'days').format('DD.MM.YYYY');
+
+const utledMelding = (mld: string) => {
+    if (mld === 'modal.settpaavent.til') {
+        return <FormattedMessage id={mld} values={{ dato: getDate() }} />;
+    }
+    return <FormattedMessage id={mld} />;
+};
+
+const OkGåTilLosModal = ({ melding, onClose }: Props) => {
+    return (
+        <Modal
+            key="settpaaventokmodal"
+            onClose={onClose}
+            aria-label="settpaaventokmodal"
+            data-test-id="okGåTilLosModal"
+            open
+        >
+            <Modal.Body>
+                <div className="ok-gaa-til-los" data-testid="ok-gaa-til-los-modal">
+                    <CheckCircleSvg title="check" />
+
+                    <div className="vl" />
+
+                    <div className="info" data-test-id="okGåTilLosModalInfo">
+                        <div className="flex flex-wrap">{utledMelding(melding)}</div>
+
+                        <div className="flex flex-wrap">
+                            <FormattedMessage id="modal.okgaatillos.tillos" />
+                        </div>
+                    </div>
+
+                    <Button
+                        className="okknapp"
+                        size="small"
+                        onClick={() => {
+                            window.location.href = getEnvironmentVariable('K9_LOS_URL');
+                        }}
+                        data-test-id="okGåTilLosModalOKBtn"
+                    >
+                        <FormattedMessage id="modal.okgaatillos.ok" />
+                    </Button>
+                </div>
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+export default OkGåTilLosModal;