1430: Add query params to card self service form

[seluianova]

Short description

When the user taps the “Extend Card” button in the app, the self-service portal should open with the pre-filled data. In this PR, I added support for query parameters in the /erstellen route.

I feel a bit lost in React, so perhaps my implementation is not optimal, pls take a look.

Proposed changes

• query params in the card self service form: name, geburtsdatum, ref

Side effects

no?

Testing

Open url with query params http://localhost:3000/erstellen?name=Karla%20Koblenz&ref=123K&geburtsdatum=2003-06-10 localhost:3000/erstellen?Name=Karla%20Koblenz&Referenznummer=123K&Geburtsdatum=10.06.2003 The form should be pre-filled with the provided data

Resolved issues

Part of: #1430

[f1sh1918]

Some general ideas to your pr. Instead of updating the card in a hook in the form component, i would suggest to add this functionality in the existing useCardGeneratorSelfService hook where the card will be initialized. That also avoids unexpected rerendering.

You can just add a fkt handleQueryParams and return the needed values there and then initlialize them. Please also provide some Error handling if birthday can not be parsed and show a toast to the user.

if you add Nullish Coalescing in the handle query params fkt and return undefined you can even avoid null checking while initializing the card

const fullName = cardQueryParams.get('name') ?? undefined

Example useCardGeneratorSelfService.ts

  const [cardQueryParams] = useSearchParams()
  const {fullName, birthday, koblenzReferenceNumber} = handleQueryParams(cardQueryParams)
  const [selfServiceCard, setSelfServiceCard] = useState(
  initializeCard(projectConfig.card, undefined, { fullName, expirationDate: null, extensions: {birthday, koblenzReferenceNumber } })
  )
  )

After generating a card successfully the queryParams should be removed. You can get a set fkt from the useSearchParams hook and do sth like

setSearchParams(undefined, { replace: true })

[seluianova]

@f1sh1918 thanks for the feedback, I applied your suggestions, pls check if I understood you right.

[seluianova]

I think something is not quite right yet, when I open the URL as you suggested nothing happens except the query params being removed

Ah, sorry, I forgot to update the PR description. Param names should be the same as in card config now. Name=Karla Koblenz&Geburtsdatum=11.11.2000 (Don't remember the exact ref number name, Referenznummer or something?)