feat. Skrive om LagreKnapp slik at den kan brukes på form (#1245)

navikt · Oct 21, 2024 · 4ebe37d · 4ebe37d
1 parent d182f8c
commit 4ebe37d
Show file tree

Hide file tree

Showing 28 changed files with 290 additions and 295 deletions.
diff --git a/src/AvtaleOversikt/EtterRegistrering/EtterRegistrering.tsx b/src/AvtaleOversikt/EtterRegistrering/EtterRegistrering.tsx
@@ -127,13 +127,14 @@ const EtterRegistrering: FunctionComponent = () => {
                                 <div className={cls.element('lagreKnapp')}>
                                     <LagreKnapp
                                         lagre={() => AvtaleKanEtterrgistreres()}
-                                        label={avtale.godkjentForEtterregistrering ? 'Fjern' : 'Godkjenn'}
                                         suksessmelding={
                                             avtale.godkjentForEtterregistrering
                                                 ? 'Fjernet etterregistrering på avtale'
                                                 : 'Avtalen er godkjent for etterregistrering'
                                         }
-                                    />
+                                    >
+                                        {avtale.godkjentForEtterregistrering ? 'Fjern' : 'Godkjenn'}
+                                    </LagreKnapp>
                                 </div>
                             </div>
                         )}

diff --git a/src/AvtaleOversikt/Taushetserklæring/Taushetserklæring.tsx b/src/AvtaleOversikt/Taushetserklæring/Taushetserklæring.tsx
@@ -69,11 +69,9 @@ const TaushetserklæringModal: FunctionComponent<TaushetserklæringProps> = ({
                         lovbestemmelsene som er listet opp over
                     </BekreftCheckboksPanel>
                     <div className={cls.element('knapper-container')}>
-                        <LagreKnapp
-                            className={'taushetserklæring__lagreKnapp'}
-                            label={'Signer Taushetserklæring'}
-                            lagre={godkjennTaushetserklæring}
-                        />
+                        <LagreKnapp className={'taushetserklæring__lagreKnapp'} lagre={godkjennTaushetserklæring}>
+                            Signer Taushetserklæring
+                        </LagreKnapp>
                     </div>
                 </div>
             </Modal.Body>

diff --git a/src/AvtaleSide/AvtaleStatus/VeilederAvtaleStatus.tsx b/src/AvtaleSide/AvtaleStatus/VeilederAvtaleStatus.tsx
@@ -135,11 +135,9 @@ function VeilederAvtaleStatus(props: Props) {
                             </>
                         )}
                         <VerticalSpacer rem={1.5} />
-                        <LagreKnapp
-                            lagre={() => overtaAvtale()}
-                            label="Overta avtale"
-                            suksessmelding="Avtale tildelt"
-                        />
+                        <LagreKnapp lagre={() => overtaAvtale()} suksessmelding="Avtale tildelt">
+                            Overta avtale
+                        </LagreKnapp>
                     </div>
                 }
             />

diff --git a/src/AvtaleSide/DelLenkeTilAvtalen/SendVarselModal.tsx b/src/AvtaleSide/DelLenkeTilAvtalen/SendVarselModal.tsx
@@ -51,11 +51,12 @@ const SendVarselModal: React.FunctionComponent<Props> = (props) => {
                 </Heading>
                 <VerticalSpacer rem={1} />
                 <LagreKnapp
-                    label="Send til mentor"
                     lagre={() => delAvtaleMedAvtalepart(avtale.id, 'MENTOR')}
                     suksessmelding="SMS sendt til mentor"
                     variant={'primary'}
-                />
+                >
+                    Send til mentor
+                </LagreKnapp>
                 <VerticalSpacer rem={1.5} />
 
                 <Heading level="2" size="small">

diff --git a/src/AvtaleSide/VarselModal/VarselModal.tsx b/src/AvtaleSide/VarselModal/VarselModal.tsx
@@ -72,7 +72,9 @@ const VarselModal: FunctionComponent = () => {
                         Se alle hendelser for denne avtalen
                     </Button>
                 )}
-                <LagreKnapp lagre={lukkOgLesVarsler} label="Lukk" variant="secondary" />
+                <LagreKnapp lagre={lukkOgLesVarsler} variant="secondary">
+                    Lukk
+                </LagreKnapp>
             </Modal.Footer>
         </Modal>
     );

diff --git a/src/AvtaleSide/steg/ArbeidsoppgaverSteg/ArbeidsoppgaverSteg.tsx b/src/AvtaleSide/steg/ArbeidsoppgaverSteg/ArbeidsoppgaverSteg.tsx
@@ -25,7 +25,9 @@ const ArbeidsoppgaverSteg: FunctionComponent = (props) => {
                 feilmelding="Beskrivelse av arbeidsoppgaver er påkrevd"
             />
             <VerticalSpacer rem={2} />
-            <LagreKnapp lagre={avtaleContext.lagreAvtale} label={'Lagre'} suksessmelding={'Avtale lagret'} />
+            <LagreKnapp lagre={avtaleContext.lagreAvtale} suksessmelding={'Avtale lagret'}>
+                Lagre
+            </LagreKnapp>
         </Innholdsboks>
     );
 };

diff --git a/src/AvtaleSide/steg/BeregningTilskudd/BeregningTilskuddSteg.tsx b/src/AvtaleSide/steg/BeregningTilskudd/BeregningTilskuddSteg.tsx
@@ -68,7 +68,9 @@ const BeregningTilskuddSteg: FunctionComponent = () => {
                 <VerticalSpacer rem={2} />
                 <VisningTilskuddsperioder />
                 <VerticalSpacer rem={2} />
-                <LagreKnapp lagre={lagreAvtale} label={'Lagre'} suksessmelding={'Avtale lagret'} />
+                <LagreKnapp lagre={lagreAvtale} suksessmelding={'Avtale lagret'}>
+                    Lagre
+                </LagreKnapp>
             </Innholdsboks>
         </>
     );

diff --git a/src/AvtaleSide/steg/BeregningTilskudd/BeregningVTAOTilskuddSteg.tsx b/src/AvtaleSide/steg/BeregningTilskudd/BeregningVTAOTilskuddSteg.tsx
@@ -50,7 +50,9 @@ const BeregningTilskuddSteg: FunctionComponent = () => {
                     </Column>
                 </Row>
                 <VerticalSpacer rem={2} />
-                <LagreKnapp lagre={lagreAvtale} label={'Lagre'} suksessmelding={'Avtale lagret'} />
+                <LagreKnapp lagre={lagreAvtale} suksessmelding="Avtale lagret">
+                    Lagre
+                </LagreKnapp>
             </Innholdsboks>
         </>
     );

diff --git a/src/AvtaleSide/steg/GodkjenningSteg/FordelAvtaleVeileder.tsx b/src/AvtaleSide/steg/GodkjenningSteg/FordelAvtaleVeileder.tsx
@@ -16,7 +16,9 @@ export const FordelAvtaleVeileder: FunctionComponent = () => {
                     Avtalen er opprettet av arbeidsgiver. Den er ikke tildelt en veileder ennå.
                 </BodyShort>
                 <VerticalSpacer rem={1.5} />
-                <LagreKnapp lagre={() => overtaAvtale()} label="Overta avtale" suksessmelding="Avtale tildelt" />
+                <LagreKnapp lagre={() => overtaAvtale()} suksessmelding="Avtale tildelt">
+                    Overta avtale
+                </LagreKnapp>
                 <VerticalSpacer rem={1.5} />
 
                 <div style={{ borderBottom: '1px solid #c6c2bf' }} />

diff --git a/...e/steg/GodkjenningSteg/Godkjenning/godkjenningEksterneAktører/GodkjenningArbeidsgiver.tsx b/...e/steg/GodkjenningSteg/Godkjenning/godkjenningEksterneAktører/GodkjenningArbeidsgiver.tsx
@@ -72,7 +72,7 @@ const GodkjenningArbeidsgiver: FunctionComponent = () => {
             />
             <VerticalSpacer rem={1.5} />
 
-            <LagreKnapp lagre={godkjennAvtalen} label="Godkjenn avtalen" />
+            <LagreKnapp lagre={godkjennAvtalen}>Godkjenn avtalen</LagreKnapp>
         </Innholdsboks>
     );
 };

diff --git a/...eSide/steg/GodkjenningSteg/Godkjenning/godkjenningEksterneAktører/GodkjenningDeltaker.tsx b/...eSide/steg/GodkjenningSteg/Godkjenning/godkjenningEksterneAktører/GodkjenningDeltaker.tsx
@@ -34,7 +34,7 @@ const GodkjenningDeltaker: FunctionComponent = () => {
             />
             <VerticalSpacer rem={1.5} />
 
-            <LagreKnapp lagre={godkjennAvtalen} label="Godkjenn avtalen" />
+            <LagreKnapp lagre={godkjennAvtalen}>Godkjenn avtalen</LagreKnapp>
         </Innholdsboks>
     );
 };

diff --git a/...aleSide/steg/GodkjenningSteg/Godkjenning/godkjenningEksterneAktører/GodkjenningMentor.tsx b/...aleSide/steg/GodkjenningSteg/Godkjenning/godkjenningEksterneAktører/GodkjenningMentor.tsx
@@ -34,7 +34,7 @@ const GodkjenningMentor: FunctionComponent = () => {
             />
             <VerticalSpacer rem={1.5} />
 
-            <LagreKnapp lagre={godkjennAvtalen} label="Godkjenn avtalen" />
+            <LagreKnapp lagre={godkjennAvtalen}>Godkjenn avtalen</LagreKnapp>
         </Innholdsboks>
     );
 };

diff --git a/...leSide/steg/GodkjenningSteg/Godkjenning/godkjenningVeileder/GodkjennPaVegneAvDeltaker.tsx b/...leSide/steg/GodkjenningSteg/Godkjenning/godkjenningVeileder/GodkjennPaVegneAvDeltaker.tsx
@@ -1,19 +1,20 @@
 import React, { useState } from 'react';
 import * as z from 'zod';
-import { Alert, Checkbox, CheckboxGroup } from '@navikt/ds-react';
+import { Alert, Button, Checkbox, CheckboxGroup } from '@navikt/ds-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 
 import BEMHelper from '@/utils/bem';
 import GodkjennAvtaleMedAlleredeOpprettetTiltak from '@/komponenter/alleredeOpprettetTiltak/GodkjennAvtaleMedAlleredeOpprettetTiltak';
 import GodkjenningInstruks from '@/AvtaleSide/steg/GodkjenningSteg/Oppsummering/instruks/GodkjenningInstruks';
 import Innholdsboks from '@/komponenter/Innholdsboks/Innholdsboks';
-import LagreKnapp from '@/komponenter/LagreKnapp/LagreKnapp';
+import LagreKnapp, { useLagreKnapp } from '@/komponenter/LagreKnapp/LagreKnappBase';
 import SkjemaTittel from '@/komponenter/form/SkjemaTittel';
 import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
 import { sjekkOmDeltakerAlleredeErRegistrertPaaTiltak } from '@/services/rest-service';
 import { useAlleredeOpprettetAvtale } from '@/komponenter/alleredeOpprettetTiltak/api/AlleredeOpprettetAvtaleProvider';
 import { useAvtale } from '@/AvtaleProvider';
+import LagreKnappVarsel from '@/komponenter/LagreKnapp/LagreKnappVarsel';
 
 const schema = z.discriminatedUnion('isSkalGodkjennesPaVegne', [
     z.object({
@@ -53,7 +54,7 @@ function GodkjennPaVegneAvDeltaker() {
         resolver: zodResolver(schema),
     });
 
-    const onGodkjenn = async () => {
+    const [onSubmit, lagreKnappProps] = useLagreKnapp(async () => {
         const listeAvtalerDeltakerAlleredeRegistrert = await sjekkOmDeltakerAlleredeErRegistrertPaaTiltak(
             deltakerFnr,
             tiltakstype,
@@ -72,7 +73,7 @@ function GodkjennPaVegneAvDeltaker() {
         } else {
             await onLagre();
         }
-    };
+    });
 
     const onLagre = async () => {
         const { isSkalGodkjennesPaVegne, godkjentPaVegneAvGrunner } = getValues();
@@ -90,64 +91,65 @@ function GodkjennPaVegneAvDeltaker() {
     };
 
     return (
-        <Innholdsboks className={cls.className} ariaLabel={'Godkjenn avtalen'}>
-            <SkjemaTittel>Godkjenn avtalen</SkjemaTittel>
-            <GodkjenningInstruks />
-            {isKanGodkjennesPaVegneAv && (
-                <div className={cls.element('godkjenn-pa-vegne-av')}>
-                    <Checkbox {...register('isSkalGodkjennesPaVegne')}>
-                        Jeg skal godkjenne på vegne av deltakeren
-                    </Checkbox>
-                    {watch('isSkalGodkjennesPaVegne') && (
-                        <>
-                            <div className={cls.element('checkbox-wrapper')}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <Innholdsboks className={cls.className} ariaLabel={'Godkjenn avtalen'}>
+                <SkjemaTittel>Godkjenn avtalen</SkjemaTittel>
+                <GodkjenningInstruks />
+                {isKanGodkjennesPaVegneAv && (
+                    <div className={cls.element('godkjenn-pa-vegne-av')}>
+                        <Checkbox {...register('isSkalGodkjennesPaVegne')}>
+                            Jeg skal godkjenne på vegne av deltakeren
+                        </Checkbox>
+                        {watch('isSkalGodkjennesPaVegne') && (
+                            <>
+                                <div className={cls.element('checkbox-wrapper')}>
+                                    <CheckboxGroup
+                                        legend="Godkjenn på vegne av deltaker valg"
+                                        error={formState.errors.godkjentPaVegneAvGrunner?.message}
+                                    >
+                                        <Checkbox {...register('godkjentPaVegneAvGrunner')} value="ikkeBankId">
+                                            har ikke BankID
+                                        </Checkbox>
+                                        <Checkbox {...register('godkjentPaVegneAvGrunner')} value="reservert">
+                                            har reservert seg mot digitale tjenester
+                                        </Checkbox>
+                                        <Checkbox {...register('godkjentPaVegneAvGrunner')} value="digitalKompetanse">
+                                            mangler digital kompetanse
+                                        </Checkbox>
+                                    </CheckboxGroup>
+                                </div>
                                 <CheckboxGroup
-                                    legend="Godkjenn på vegne av deltaker valg"
-                                    error={formState.errors.godkjentPaVegneAvGrunner?.message}
+                                    legend="Bekreftelse på at kravene og innholdet i avtalen er informert om"
+                                    className={cls.element('skjema-gruppe')}
+                                    error={formState.errors.isInformert?.message}
                                 >
-                                    <Checkbox {...register('godkjentPaVegneAvGrunner')} value="ikkeBankId">
-                                        har ikke BankID
-                                    </Checkbox>
-                                    <Checkbox {...register('godkjentPaVegneAvGrunner')} value="reservert">
-                                        har reservert seg mot digitale tjenester
-                                    </Checkbox>
-                                    <Checkbox {...register('godkjentPaVegneAvGrunner')} value="digitalKompetanse">
-                                        mangler digital kompetanse
+                                    <Checkbox value={true} {...register('isInformert')}>
+                                        Deltakeren er informert om kravene og godkjenner innholdet i avtalen.
                                     </Checkbox>
                                 </CheckboxGroup>
-                            </div>
-                            <CheckboxGroup
-                                legend="Bekreftelse på at kravene og innholdet i avtalen er informert om"
-                                className={cls.element('skjema-gruppe')}
-                                error={formState.errors.isInformert?.message}
-                            >
-                                <Checkbox value={true} {...register('isInformert')}>
-                                    Deltakeren er informert om kravene og godkjenner innholdet i avtalen.
-                                </Checkbox>
-                            </CheckboxGroup>
-                        </>
-                    )}
-                </div>
-            )}
-            {harFamilietilknytning && (
-                <>
-                    <Alert variant="warning">OBS! Det er oppgitt at deltaker har en relasjon med arbeidsgiver</Alert>
-                    <VerticalSpacer rem={1} />
-                </>
-            )}
-            <LagreKnapp
-                type="submit"
-                className={cls.element('lagreKnapp')}
-                lagre={handleSubmit(onGodkjenn)}
-                label="Godkjenn avtalen"
-            />
-            <GodkjennAvtaleMedAlleredeOpprettetTiltak
-                alleredeRegistrertAvtale={alleredeRegistrertAvtale.avtaler}
-                isApen={isGodkjenningsModalApen}
-                onLagre={onLagre}
-                onLukk={() => setGodkjenningsModalApen(false)}
-            />
-        </Innholdsboks>
+                            </>
+                        )}
+                    </div>
+                )}
+                {harFamilietilknytning && (
+                    <>
+                        <Alert variant="warning">
+                            OBS! Det er oppgitt at deltaker har en relasjon med arbeidsgiver
+                        </Alert>
+                        <VerticalSpacer rem={1} />
+                    </>
+                )}
+                <LagreKnapp type="submit" className={cls.element('lagreKnapp')} {...lagreKnappProps}>
+                    Godkjenn avtalen
+                </LagreKnapp>
+                <GodkjennAvtaleMedAlleredeOpprettetTiltak
+                    alleredeRegistrertAvtale={alleredeRegistrertAvtale.avtaler}
+                    isApen={isGodkjenningsModalApen}
+                    onLagre={onLagre}
+                    onLukk={() => setGodkjenningsModalApen(false)}
+                />
+            </Innholdsboks>
+        </form>
     );
 }