Merge pull request #3311 from navikt/feature/dolly-konfetti

Konfetti på vellykket bestilling og refaktorert flere komponenter

apps/dolly-frontend/src/main/js/cypress/support/e2e.ts

@@ -47,7 +47,8 @@ const hentGrupper = new RegExp(/api\/v1\/gruppe\?pageNo/)
 const histark = new RegExp(/testnav-histark-proxy\/api\//)
 const personFragmentSearch = new RegExp(/\/testnav-pdl-forvalter\/api\/v1\/identiteter\?fragment/)
 const personFragmentNaviger = new RegExp(/dolly-backend\/api\/v1\/ident\/naviger\/12345678912/)
-const hentGruppe = new RegExp(/\/api\/v1\/gruppe\/1/)
+const hentGruppeEn = new RegExp(/\/api\/v1\/gruppe\/1/)
+const hentGruppeTo = new RegExp(/\/api\/v1\/gruppe\/2/)
 const hentGruppeBestilling = new RegExp(/dolly-backend\/api\/v1\/bestilling\/gruppe\/1/)
 const pdlPersonBolk = new RegExp(/\/api\/v2\/personer\/identer/)
 const pdlPersonEnkelt = new RegExp(/person-service\/api\/v2\/personer\/ident/)
@@ -102,7 +103,8 @@ beforeEach(() => {
 	cy.intercept({ method: 'GET', url: personFragmentNaviger }, personFragmentNavigerMock)
 	cy.intercept({ method: 'GET', url: hentGrupper }, paginerteGrupperMock)
 	cy.intercept({ method: 'GET', url: histark }, histarkMock)
-	cy.intercept({ method: 'GET', url: hentGruppe }, eksisterendeGruppeMock)
+	cy.intercept({ method: 'GET', url: hentGruppeEn }, eksisterendeGruppeMock)
+	cy.intercept({ method: 'GET', url: hentGruppeTo }, nyGruppeMock)
 	cy.intercept({ method: 'GET', url: hentGruppeBestilling }, backendBestillingerMock)
 	cy.intercept({ method: 'POST', url: lagNyGruppe }, { statusCode: 201, body: nyGruppeMock })
 	cy.intercept({ method: 'GET', url: pdlPersonBolk }, pdlBulkpersonerMock)

apps/dolly-frontend/src/main/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dolly",
-  "version": "2.5.21",
+  "version": "2.5.23",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -39,6 +39,7 @@
     "rc-progress": "^3.4.0",
     "rc-tooltip": "^6.0.1",
     "react": "^18.2.0",
+    "react-confetti-explosion": "^2.1.2",
     "react-datepicker": "^4.8.0",
     "react-day-picker": "^8.1.0",
     "react-dom": "^18.2.0",

apps/dolly-frontend/src/main/js/src/components/bestilling/gjenopprett/GjenopprettGruppe.tsx

@@ -6,19 +6,20 @@ import { GjenopprettModal } from '@/components/bestilling/gjenopprett/Gjenoppret
 import { DollyApi } from '@/service/Api'
 import { useCurrentBruker } from '@/utils/hooks/useBruker'
 import { useBestilteMiljoerForGruppe } from '@/utils/hooks/useBestilling'
-import { Gruppe } from '@/utils/hooks/useGruppe'
+import { useGruppeById } from '@/utils/hooks/useGruppe'
 import { setUpdateNow } from '@/ducks/finnPerson'
 import Loading from '@/components/ui/loading/Loading'
 import React from 'react'
 
 type GjenopprettGruppeProps = {
 	onClose: any
-	gruppe: Gruppe
+	gruppeId: string
 }
 
-export const GjenopprettGruppe = ({ onClose, gruppe }: GjenopprettGruppeProps) => {
+export const GjenopprettGruppe = ({ onClose, gruppeId }: GjenopprettGruppeProps) => {
 	const dispatch = useDispatch()
 	const { currentBruker } = useCurrentBruker()
+	const { gruppe } = useGruppeById(gruppeId)
 	const { miljoer, loading } = useBestilteMiljoerForGruppe(gruppe.id)
 	const brukertype = currentBruker?.brukertype
 

apps/dolly-frontend/src/main/js/src/components/bestilling/sammendrag/BestillingSammendrag.tsx

@@ -3,7 +3,7 @@ import React, { Suspense } from 'react'
 import Loading from '@/components/ui/loading/Loading'
 
 const Bestillingskriterier = React.lazy(
-	() => import('@/components/bestilling/sammendrag/kriterier/Bestillingskriterier')
+	() => import('@/components/bestilling/sammendrag/kriterier/Bestillingskriterier'),
 )
 
 export default function BestillingSammendrag({ bestilling }) {

apps/dolly-frontend/src/main/js/src/components/bestilling/sammendrag/miljoeStatus/MiljoeStatus.cy.tsx

@@ -1,6 +1,16 @@
 import React from 'react'
 import MiljoeStatus from './MiljoeStatus'
 import { gjeldendeBrukerMock } from '../../../../../cypress/mocks/BasicMocks'
+import styled from 'styled-components'
+import ConfettiExplosion from 'react-confetti-explosion'
+
+const StyledConfettiExplosion = styled(ConfettiExplosion)`
+	display: unset;
+	align-items: center;
+	align-content: center;
+	align-self: center;
+	text-align: center;
+`
 
 const mockedBestilling = {
 	id: 123,
@@ -81,6 +91,11 @@ const mockedBestilling = {
 
 describe('<MiljoeStatus />', () => {
 	it('renders', () => {
-		cy.mount(<MiljoeStatus bestilling={mockedBestilling} />)
+		cy.mount(
+			<div style={{ display: 'flex', flexDirection: 'column' }}>
+				<MiljoeStatus bestilling={mockedBestilling} />
+				<StyledConfettiExplosion particleCount={70} force={0.3} duration={2800} />
+			</div>,
+		)
 	})
 })

apps/dolly-frontend/src/main/js/src/components/bestilling/sammendrag/miljoeStatus/MiljoeStatus.tsx

@@ -3,6 +3,7 @@ import FagsystemStatus from './fagsystemStatus/FagsystemStatus'
 import ApiFeilmelding from '@/components/ui/apiFeilmelding/ApiFeilmelding'
 import antallIdenterOpprettet from '@/components/bestilling/utils/antallIdenterOpprettet'
 import * as _ from 'lodash-es'
+import React from 'react'
 
 export type Miljostatus = {
 	bestilling: {

apps/dolly-frontend/src/main/js/src/components/bestilling/statusListe/BestillingProgresjon/BestillingProgresjon.tsx

@@ -35,7 +35,6 @@ export const BestillingProgresjon = ({
 			setOrgStatus(detaljertStatus)
 		}
 	}
-
 	const harBestillingFeilet = (sistOppdatertState: Date) => {
 		const liveTimeStamp = new Date().getTime()
 		const oldTimeStamp = new Date(sistOppdatertState).getTime()

apps/dolly-frontend/src/main/js/src/components/bestilling/statusListe/BestillingResultat/BestillingResultat.tsx

@@ -11,13 +11,30 @@ import { REGEX_BACKEND_GRUPPER, useMatchMutate } from '@/utils/hooks/useMutate'
 import { Bestillingsstatus } from '@/utils/hooks/useOrganisasjoner'
 import { BestillingStatus } from '@/components/bestilling/statusListe/BestillingProgresjon/BestillingStatus'
 import { CypressSelector } from '../../../../../cypress/mocks/Selectors'
+import ConfettiExplosion from 'react-confetti-explosion'
+import React from 'react'
+import styled from 'styled-components'
+
+const StyledConfettiExplosion = styled(ConfettiExplosion)`
+	align-items: center;
+	align-content: center;
+	align-self: center;
+	text-align: center;
+`
 
 type ResultatProps = {
 	bestilling: Bestillingsstatus
 	lukkBestilling: Function
 	erOrganisasjon: boolean
 }
 
+const bestillingHarFeil = (bestilling: Bestillingsstatus) => {
+	const statuser = bestilling?.status?.map(
+		(fagsystem) => fagsystem.statuser?.some((status) => status?.melding !== 'OK'),
+	)
+	return statuser?.some((value) => value)
+}
+
 export default function BestillingResultat({
 	bestilling,
 	lukkBestilling,
@@ -55,6 +72,11 @@ export default function BestillingResultat({
 					label="Hvordan var din opplevelse med bruk av Dolly?"
 					feedbackFor="Bruk av Dolly etter bestilling"
 				/>
+				{bestilling.ferdig && !bestillingHarFeil(bestilling) && (
+					<div style={{ display: 'flex', flexDirection: 'column' }}>
+						<StyledConfettiExplosion particleCount={70} force={0.3} duration={2800} />
+					</div>
+				)}
 				<div className="flexbox--all-center">
 					<BestillingSammendragModal bestilling={bestilling} />
 					{harIdenterOpprettet && (

apps/dolly-frontend/src/main/js/src/components/bestilling/statusListe/StatusListe.tsx

@@ -21,7 +21,7 @@ const StatusListe = ({ bestillingListe, cancelBestilling, isCanceling }: StatusP
 		const nyBestillingListe = Object.values(bestillinger).filter(
 			(bestilling) =>
 				!bestilling?.ferdig ||
-				(bestilling?.ferdig && nyeBestillinger.some((best) => best?.id === bestilling?.id))
+				(bestilling?.ferdig && nyeBestillinger.some((best) => best?.id === bestilling?.id)),
 		)
 		setNyeBestillinger(nyBestillingListe)
 	}
@@ -56,7 +56,7 @@ const StatusListe = ({ bestillingListe, cancelBestilling, isCanceling }: StatusP
 			bestillingID={bestilling.id}
 			erOrganisasjon={_has(bestilling, 'organisasjonNummer')}
 			cancelBestilling={cancelBestilling}
-			onFinishBestilling={(bestilling) => setTimeout(() => onFinishBestilling(bestilling), 200)}
+			onFinishBestilling={onFinishBestilling}
 		/>
 	))
 

apps/dolly-frontend/src/main/js/src/components/redigerGruppe/RedigerGruppe.tsx

@@ -9,13 +9,10 @@ import './RedigerGruppe.less'
 import { useNavigate } from 'react-router-dom'
 import { REGEX_BACKEND_GRUPPER, useMatchMutate } from '@/utils/hooks/useMutate'
 import { CypressSelector } from '../../../cypress/mocks/Selectors'
+import { useGruppeById } from '@/utils/hooks/useGruppe'
 
 type Props = {
-	gruppe: {
-		id: number
-		navn: string
-		hensikt: string
-	}
+	gruppeId?: string
 	createGruppe: (arg0: any) => any
 	createOrUpdateFetching: boolean
 	updateGruppe: (arg0: number, arg1: any) => any
@@ -25,14 +22,15 @@ type Props = {
 	}
 }
 const RedigerGruppe = ({
-	gruppe,
+	gruppeId,
 	createGruppe,
 	createOrUpdateFetching,
 	updateGruppe,
 	onCancel,
 	error,
 }: Props): JSX.Element => {
 	const navigate = useNavigate()
+	const { gruppe } = useGruppeById(gruppeId)
 	const erRedigering = Boolean(getIn(gruppe, 'id', false))
 	const mutate = useMatchMutate()
 

apps/dolly-frontend/src/main/js/src/pages/gruppe/BestillingListe/BestillingListe.tsx

@@ -9,6 +9,7 @@ import Spinner from '@/components/ui/loading/Spinner'
 import { ErrorBoundary } from '@/components/ui/appError/ErrorBoundary'
 import bestillingStatusMapper from '@/ducks/bestillingStatus/bestillingStatusMapper'
 import { CypressSelector } from '../../../../cypress/mocks/Selectors'
+import { useGruppeById } from '@/utils/hooks/useGruppe'
 
 const ikonTypeMap = {
 	Ferdig: 'feedback-check-circle',
@@ -25,12 +26,13 @@ export default function BestillingListe({
 	navigerBestillingId,
 	visBestilling,
 	sidetall,
-	gruppeInfo,
+	gruppeId,
 	sideStoerrelse,
 }) {
 	if (!bestillingerById) {
 		return null
 	}
+	const { gruppe: gruppeInfo } = useGruppeById(gruppeId)
 	const bestillingListe = Object.values(bestillingerById)
 
 	if (bestillingListe.length === 0) {

apps/dolly-frontend/src/main/js/src/pages/gruppe/Gruppe.tsx

@@ -100,7 +100,7 @@ export default ({
 	const erLaast = gruppe.erLaast
 	return (
 		<div className="gruppe-container">
-			<GruppeHeaderConnector gruppe={gruppe} />
+			<GruppeHeaderConnector gruppeId={gruppe.id} />
 			{ikkeFerdigBestillinger && (
 				// @ts-ignore
 				<StatusListeConnector gruppeId={gruppe.id} bestillingListe={ikkeFerdigBestillinger} />
@@ -186,7 +186,7 @@ export default ({
 				<PersonListeConnector
 					iLaastGruppe={erLaast}
 					brukertype={brukertype}
-					gruppeInfo={gruppe}
+					gruppeId={gruppeId}
 					identer={identer}
 					bestillingerById={bestillingerById}
 				/>
@@ -196,7 +196,7 @@ export default ({
 					iLaastGruppe={erLaast}
 					brukertype={brukertype}
 					bestillingerById={bestillingerById}
-					gruppeInfo={gruppe}
+					gruppeId={gruppeId}
 				/>
 			)}
 		</div>

apps/dolly-frontend/src/main/js/src/pages/gruppe/GruppeHeader/GruppeHeader.tsx

@@ -14,16 +14,17 @@ import { TagsButton } from '@/components/ui/button/Tags/TagsButton'
 import { GjenopprettGruppe } from '@/components/bestilling/gjenopprett/GjenopprettGruppe'
 import { Hjelpetekst } from '@/components/hjelpetekst/Hjelpetekst'
 import { bottom } from '@popperjs/core'
-import { Gruppe } from '@/utils/hooks/useGruppe'
+import { useGruppeById } from '@/utils/hooks/useGruppe'
 import { useCurrentBruker } from '@/utils/hooks/useBruker'
 import { FlyttPersonButton } from '@/components/ui/button/FlyttPersonButton/FlyttPersonButton'
 import { LeggTilPaaGruppe } from '@/pages/gruppe/LeggTilPaaGruppe/LeggTilPaaGruppe'
 import cn from 'classnames'
 import Icon from '@/components/ui/icon/Icon'
 import { CypressSelector } from '../../../../cypress/mocks/Selectors'
+import Loading from '@/components/ui/loading/Loading'
 
 type GruppeHeaderProps = {
-	gruppe: Gruppe
+	gruppeId: string
 	laasGruppe: Function
 	isLockingGruppe: boolean
 	deleteGruppe: Function
@@ -35,7 +36,7 @@ type GruppeHeaderProps = {
 }
 
 const GruppeHeader = ({
-	gruppe,
+	gruppeId,
 	deleteGruppe,
 	isDeletingGruppe,
 	getGruppeExcelFil,
@@ -50,7 +51,11 @@ const GruppeHeader = ({
 	const {
 		currentBruker: { brukertype },
 	} = useCurrentBruker()
+	const { gruppe, loading } = useGruppeById(gruppeId)
 
+	if (loading) {
+		return <Loading label={'Laster gruppe...'} />
+	}
 	const erLaast = gruppe.erLaast
 
 	const headerClass = erLaast ? 'gruppe-header-laast' : 'gruppe-header'
@@ -147,9 +152,9 @@ const GruppeHeader = ({
 				</div>
 			</header>
 
-			{visRedigerState && <RedigerGruppeConnector gruppe={gruppe} onCancel={skjulRediger} />}
+			{visRedigerState && <RedigerGruppeConnector gruppeId={gruppeId} onCancel={skjulRediger} />}
 			{viserGjenopprettModal && (
-				<GjenopprettGruppe onClose={skjulGjenopprettModal} gruppe={gruppe} />
+				<GjenopprettGruppe onClose={skjulGjenopprettModal} gruppeId={gruppeId} />
 			)}
 		</Fragment>
 	)

apps/dolly-frontend/src/main/js/src/pages/gruppe/PersonListe/PersonListe.tsx

@@ -18,6 +18,7 @@ import { useBestillingerGruppe } from '@/utils/hooks/useBestilling'
 import { CypressSelector } from '../../../../cypress/mocks/Selectors'
 import PersonVisningConnector from '@/pages/gruppe/PersonVisning/PersonVisningConnector'
 import { DollyCopyButton } from '@/components/ui/button/CopyButton/DollyCopyButton'
+import { useGruppeById } from '@/utils/hooks/useGruppe'
 
 const PersonIBrukButtonConnector = React.lazy(
 	() => import('@/components/ui/button/PersonIBrukButton/PersonIBrukButtonConnector'),
@@ -33,7 +34,7 @@ const ikonTypeMap = {
 export default function PersonListe({
 	isFetching,
 	search,
-	gruppeInfo,
+	gruppeId,
 	identer,
 	sidetall,
 	sideStoerrelse,
@@ -51,7 +52,8 @@ export default function PersonListe({
 	const [selectedIdent, setSelectedIdent] = useState(null)
 	const [identListe, setIdentListe] = useState([])
 	const dispatch = useDispatch()
-	const { bestillingerById: bestillingStatuser } = useBestillingerGruppe(gruppeInfo.id)
+	const { bestillingerById: bestillingStatuser } = useBestillingerGruppe(gruppeId)
+	const { gruppe: gruppeInfo } = useGruppeById(gruppeId)
 
 	const personListe = useMemo(
 		() => sokSelector(selectPersonListe(identer, bestillingStatuser, fagsystem), search),

apps/dolly-frontend/src/main/js/src/utils/hooks/useBruker.tsx

@@ -92,7 +92,7 @@ export const useOrganisasjonTilgang = () => {
 
 	const { data, isLoading, error } = useSWR<OrganisasjonMiljoe, Error>(
 		getOrganisasjonTilgangUrl(orgnummer),
-		fetcher
+		fetcher,
 	)
 
 	return {

apps/dolly-frontend/src/main/js/src/utils/hooks/useOrganisasjoner.tsx

@@ -82,8 +82,9 @@ const fasteDataFallback = [
 export type Bestillingsstatus = {
 	id: number
 	environments: string[]
-	antallIdenter: number
-	antallLevert: number
+	antallIdenter?: number
+	antallIdenterOpprettet?: number
+	antallLevert?: number
 	bestilling: any
 	bruker: any
 	gruppeId: number