1430: Add query params to card self service form #1749

seluianova · 2024-11-06T12:15:39Z

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 · 2024-11-07T10:49:09Z

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 · 2024-11-11T12:28:44Z

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

administration/src/bp-modules/self-service/hooks/useCardGeneratorSelfService.ts

…param

administration/src/cards/extensions/BirthdayExtension.tsx

administration/src/bp-modules/self-service/hooks/useCardGeneratorSelfService.ts

# Conflicts: # administration/src/bp-modules/self-service/CardSelfServiceForm.tsx # administration/src/bp-modules/self-service/hooks/useCardGeneratorSelfService.tsx

steffenkleinle

I think something is not quite right yet, when I open the URL as you suggested nothing happens except the query params being removed. None of the supplied properties is used to initialize the card.

steffenkleinle · 2024-11-21T07:56:52Z

administration/src/bp-modules/self-service/hooks/useCardGeneratorSelfService.tsx

-  const [selfServiceCard, setSelfServiceCard] = useState(
-    initializeCard(projectConfig.card, undefined, { expirationDate: null })
-  )
+  const [cardQueryParams, setSearchParams] = useSearchParams()


🔧

Suggested change

const [cardQueryParams, setSearchParams] = useSearchParams()

const [searchParams, setSearchParams] = useSearchParams()

steffenkleinle · 2024-11-21T08:00:18Z

administration/src/bp-modules/self-service/hooks/useCardGeneratorSelfService.tsx

  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [selfServiceState, setSelfServiceState] = useState<CardSelfServiceStep>(CardSelfServiceStep.form)
  const [deepLink, setDeepLink] = useState<string>('')
  const [code, setCode] = useState<CreateCardsResult | null>(null)
+
+  useEffect(() => {
+    setSearchParams(undefined, { replace: true })


🔧
Could you perhaps move this inside the initializing method to avoid the extra use effect and possible side effects?

i think its better to move this to the createKoblenzPass function to only remove them if the card was created successfully, so the params will not be removed if there is a page refresh (maybe by accident)

@f1sh1918 pls check if that's what you mean

i think you can just reuse the hook in CardSelfServiceForm @seluianova

const [_, setSearchParams] = useSearchParams()

and execute the function as you did. Then you don't have to pass down the function neither to CardSelfServiceForm nor adjust the useCardSelfService hook

hopefully, it's good to go now, thx 🙈

seluianova · 2024-11-21T08:17:39Z

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?)

steffenkleinle

Tested on firefox, works with the correct link with correctly set query params. I updated the PR description.
Works as expected that way :)

steffenkleinle · 2024-11-22T10:28:10Z

administration/src/bp-modules/self-service/hooks/useCardGeneratorSelfService.tsx

+  const [cardQueryParams, setSearchParams] = useSearchParams()
+  const [selfServiceCard, setSelfServiceCard] = useState(() => {
+    const headers = getHeaders(projectConfig)
+    const values = headers.map(header => cardQueryParams.get(header))
+    return initializeCardFromCSV(projectConfig.card, values, headers, undefined, true)
+  })


🙃 I really like your implementation. If you feel motivated, feel free to add the same functionality to the useCardGenerator hook and remove the old implementation from AddCardsFrom

i think we should merge this soon to create the next beta artifact and i would prefer to implement this in a separate task

I have created a new ticket for that #1799
@steffenkleinle could you please check and adjust the description (if needed), because I'm not sure I could describe this task nicely, and wouldn't want to mislead with the description.

f1sh1918

Nicely done 👍

One small comment should be resolved before merging

f1sh1918 · 2024-11-23T08:32:51Z

administration/src/bp-modules/self-service/hooks/useCardGeneratorSelfService.tsx

+  const [cardQueryParams, setSearchParams] = useSearchParams()
+  const [selfServiceCard, setSelfServiceCard] = useState(() => {
+    const headers = getHeaders(projectConfig)
+    const values = headers.map(header => cardQueryParams.get(header))
+    return initializeCardFromCSV(projectConfig.card, values, headers, undefined, true)
+  })


i think we should merge this soon to create the next beta artifact and i would prefer to implement this in a separate task

f1sh1918 · 2024-11-23T08:34:42Z

administration/src/bp-modules/self-service/hooks/useCardGeneratorSelfService.tsx

  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [selfServiceState, setSelfServiceState] = useState<CardSelfServiceStep>(CardSelfServiceStep.form)
  const [deepLink, setDeepLink] = useState<string>('')
  const [code, setCode] = useState<CreateCardsResult | null>(null)
+
+  useEffect(() => {
+    setSearchParams(undefined, { replace: true })


i think its better to move this to the createKoblenzPass function to only remove them if the card was created successfully, so the params will not be removed if there is a page refresh (maybe by accident)

* 1430: Add query params to card self service form

1430: Add query params to card self service form

bf49cd7

seluianova requested review from steffenkleinle, f1sh1918 and ztefanie as code owners November 6, 2024 12:15

seluianova linked an issue Nov 6, 2024 that may be closed by this pull request

Extend card #1430

Open

4 tasks

1430: Init card from query params in useCardGeneratorSelfService

34cb958

seluianova commented Nov 11, 2024

View reviewed changes

administration/src/bp-modules/self-service/hooks/useCardGeneratorSelfService.ts Outdated Show resolved Hide resolved

seluianova force-pushed the 1430-create-card-query-params branch from 3cf521b to 0922e1b Compare November 11, 2024 13:11

1430: Use PlainDate.safeFrom() function to parse birthday from query …

6224bbb

…param

seluianova force-pushed the 1430-create-card-query-params branch from 0922e1b to 6224bbb Compare November 11, 2024 13:46

steffenkleinle reviewed Nov 11, 2024

View reviewed changes

1430: Fix code style

de0acba

seluianova mentioned this pull request Nov 13, 2024

1430: Extend card #1772

Open

seluianova added 3 commits November 20, 2024 16:36

Merge branch 'refs/heads/main' into 1430-create-card-query-params

654280a

# Conflicts: # administration/src/bp-modules/self-service/CardSelfServiceForm.tsx # administration/src/bp-modules/self-service/hooks/useCardGeneratorSelfService.tsx

1430: Resolve merge conflicts

64eba61

1430: Refactor card initialization

ee12261

seluianova force-pushed the 1430-create-card-query-params branch from 1eb8192 to ee12261 Compare November 20, 2024 20:57

steffenkleinle reviewed Nov 21, 2024

View reviewed changes

steffenkleinle approved these changes Nov 22, 2024

View reviewed changes

steffenkleinle reviewed Nov 22, 2024

View reviewed changes

f1sh1918 approved these changes Nov 23, 2024

View reviewed changes

seluianova added 2 commits November 23, 2024 12:45

1430: Draft

db61b23

Merge branch 'refs/heads/main' into 1430-create-card-query-params

26bc352

seluianova force-pushed the 1430-create-card-query-params branch from 78babd9 to d884657 Compare November 25, 2024 10:02

seluianova mentioned this pull request Nov 25, 2024

Extend card #1430

Open

4 tasks

1430: Remove card creation params only after the form submission

0dbdae9

seluianova force-pushed the 1430-create-card-query-params branch from d884657 to 0dbdae9 Compare November 25, 2024 10:07

seluianova merged commit 35e550b into main Nov 25, 2024
1 check passed

seluianova deleted the 1430-create-card-query-params branch November 25, 2024 10:13

seluianova mentioned this pull request Nov 25, 2024

Adjust useCardGenerator hook #1799

Open

seluianova added a commit that referenced this pull request Nov 27, 2024

1430: Add query params to card self service form (#1749)

394c2a3

* 1430: Add query params to card self service form

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1430: Add query params to card self service form #1749

1430: Add query params to card self service form #1749

seluianova commented Nov 6, 2024 •

edited by steffenkleinle

Loading

f1sh1918 commented Nov 7, 2024 •

edited

Loading

seluianova commented Nov 11, 2024

steffenkleinle left a comment

steffenkleinle Nov 21, 2024

steffenkleinle Nov 21, 2024

f1sh1918 Nov 23, 2024 •

edited

Loading

seluianova Nov 23, 2024

f1sh1918 Nov 23, 2024 •

edited

Loading

seluianova Nov 25, 2024

seluianova commented Nov 21, 2024 •

edited

Loading

steffenkleinle left a comment

steffenkleinle Nov 22, 2024

f1sh1918 Nov 23, 2024

seluianova Nov 25, 2024

f1sh1918 left a comment

f1sh1918 Nov 23, 2024

f1sh1918 Nov 23, 2024 •

edited

Loading

	const [cardQueryParams, setSearchParams] = useSearchParams()
	const [searchParams, setSearchParams] = useSearchParams()

1430: Add query params to card self service form #1749

1430: Add query params to card self service form #1749

Conversation

seluianova commented Nov 6, 2024 • edited by steffenkleinle Loading

Short description

Proposed changes

Side effects

Testing

Resolved issues

f1sh1918 commented Nov 7, 2024 • edited Loading

seluianova commented Nov 11, 2024

steffenkleinle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f1sh1918 Nov 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f1sh1918 Nov 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seluianova commented Nov 21, 2024 • edited Loading

steffenkleinle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f1sh1918 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f1sh1918 Nov 23, 2024 • edited Loading

Choose a reason for hiding this comment

seluianova commented Nov 6, 2024 •

edited by steffenkleinle

Loading

f1sh1918 commented Nov 7, 2024 •

edited

Loading

f1sh1918 Nov 23, 2024 •

edited

Loading

f1sh1918 Nov 23, 2024 •

edited

Loading

seluianova commented Nov 21, 2024 •

edited

Loading

f1sh1918 Nov 23, 2024 •

edited

Loading