fix: rebuilds/-styles (and -names) application (pre)view component #1452

vincit-matu · 2024-10-11T11:43:26Z

🛠️ Changelog

Restructures/-styles the application (re)view page
ViewInner.tsx becomes ViewApplication.tsx

🧪 Test plan

Go to "Omat hakemukset" and select any of your applications to get to the application view page
the new styling should match the one in figma
The same view should be at the final step when making an application

🎫 Tickets

TILA-3573

- All secondary buttons / link buttons use white background. - Remove overrides from buttons inside a Card. - Replace !important overrides with focus / hover vars.

- move criteria and search pages under the application round

- use `applications` base url for all application page - remove unnecessary intro page

- use SSR for query - include when the application was handled - remove unneccessary button section

- ViewInner.tsx becomes ViewApplication.tsx

joonatank · 2024-10-15T10:54:27Z

apps/ui/components/application/ApplicationEventList.tsx

@@ -51,112 +66,204 @@ const formatDurationSeconds = (seconds: number, t: TFunction): string => {
  )}`;
 };

+const getDuration = (begin: number, end: number, t: TFunction): string => {


getDuration -> formatDurationRange
begin -> beginSecs
end -> endSecs

apps/ui/components/application/ApplicationEventList.tsx

joonatank · 2024-10-15T10:59:52Z

apps/ui/components/application/ApplicationEventList.tsx


+  const sections = aes.map((applicationEvent, i) => {


Wrap the loop invariant into a component. No 100s lines of JSX inside map invariant

apps/ui/components/application/ApplicationEventList.tsx

joonatank · 2024-10-16T11:27:35Z

apps/ui/components/application/ApplicationEventList.tsx

+const InfoListItem = ({ label, value }: { label: string; value: string }) => (
+  <li>
+    {`${label}: `}
+    <span className="value">{value}</span>


joonatank · 2024-10-16T11:32:42Z

apps/ui/public/locales/fi/application.json

+      "status": {
+        "UNALLOCATED": "Vastaanotettu",
+        "IN_ALLOCATION": "Käsittelyssä",
+        "HANDLED": "Hyväksytty",
+        "REJECTED": "Hylätty"
+      }


move enum translations to top level of the json with a key that matches the enum type name, not a generic status key

joonatank · 2024-10-16T11:33:51Z

apps/ui/public/locales/fi/application.json

Where are the en and sv translations?

joonatank · 2024-10-16T11:34:27Z

apps/ui/public/locales/fi/common.json

where are the en and sv translations?

joonatank · 2024-10-16T11:35:57Z

apps/ui/components/application/ViewApplication.tsx

+        <Accordion heading={t("application:preview.reservationUnitTerms")} open>
+          <CompactTermsBox
+            id="preview.acceptServiceSpecificTerms"
+            heading=""


you made heading optional, why pass heading="" here?

joonatank · 2024-10-16T11:57:41Z

apps/ui/components/application/ApplicationEventList.tsx

+                {reservationUnits?.map((ru) => (
+                  <li key={ru?.pk}>
+                    {getTranslation(ru ?? {}, "name").trim()}
+                  </li>


filterNonNullable instead of ?. and ??

joonatank · 2024-10-16T12:03:55Z

apps/ui/components/application/ApplicationEventList.tsx

+    const reservationUnits =
+      applicationEvent.reservationUnitOptions?.map((eru, index) => ({
+        pk: eru.reservationUnit?.pk ?? 0,
+        priority: index,
+        nameFi: eru.reservationUnit?.nameFi ?? undefined,
+        nameSv: eru.reservationUnit?.nameSv ?? undefined,
+        nameEn: eru.reservationUnit?.nameEn ?? undefined,
+      })) ?? [];


why? why not use reservationUnitOptions.reservationUnit directly? ex

filterNonNullable(applicationEvent.reservationUnitOptions?.flatMap((x) => x. reservationUnit))

prefer filterNonNullable over ?? []

why is index turned into priority? looks wrong. why do we need priority? why isn't it gotten from the backend?

joonatank · 2024-10-16T12:04:54Z

apps/ui/components/application/ApplicationEventList.tsx

+    const primaryTimes =
+      applicationEvent.suitableTimeRanges
+        ?.filter(filterPrimary)
+        .map(convertApplicationSchedule) ?? [];
+    const secondaryTimes =
+      applicationEvent.suitableTimeRanges
+        ?.filter(filterSecondary)
+        .map(convertApplicationSchedule) ?? [];


filterNonNullable over ?? []

vincit-matu force-pushed the update-application-page branch 3 times, most recently from 23e07cb to ad7553d Compare October 11, 2024 14:52

vincit-matu requested a review from joonatank October 11, 2024 20:49

vincit-matu marked this pull request as ready for review October 11, 2024 20:49

vincit-matu force-pushed the update-application-page branch from ad7553d to 434f65d Compare October 14, 2024 23:54

joonatank added 2 commits October 15, 2024 08:47

fix: missing gap on seasonal search page

163a52d

fix: button styling

942f96f

- All secondary buttons / link buttons use white background. - Remove overrides from buttons inside a Card. - Replace !important overrides with focus / hover vars.

joonatank force-pushed the refactor-seasonal-reservation branch from c7b0105 to dfbf8be Compare October 15, 2024 05:47

joonatank added 11 commits October 15, 2024 08:55

gql type generate

1902b61

refactor: add url builders to customer ui

fa97cb2

fix: url builder refactor

4f47eb9

refactor: seasonal reservation urls

3766c86

- move criteria and search pages under the application round

refactor: move application pages

ba6e906

- use `applications` base url for all application page - remove unnecessary intro page

fix: broken urls from application page moves

4070451

refactor: remove koros from applications

efff030

refactor: application view page

d74433e

- use SSR for query - include when the application was handled - remove unneccessary button section

refactor: move application query

5a488f5

fix: invalid orderBy in applications query

f59b5e2

fix: application view hydration error

acdb5c3

joonatank force-pushed the refactor-seasonal-reservation branch from dfbf8be to acdb5c3 Compare October 15, 2024 05:55

fix: rebuilds/-styles (and -names) application (pre)view component

ca636b6

- ViewInner.tsx becomes ViewApplication.tsx

joonatank force-pushed the update-application-page branch from 434f65d to ca636b6 Compare October 15, 2024 05:58

joonatank requested changes Oct 16, 2024

View reviewed changes

joonatank reviewed Oct 16, 2024

View reviewed changes

joonatank force-pushed the refactor-seasonal-reservation branch 3 times, most recently from 22c0c11 to 9f54174 Compare October 22, 2024 06:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: rebuilds/-styles (and -names) application (pre)view component #1452

fix: rebuilds/-styles (and -names) application (pre)view component #1452

vincit-matu commented Oct 11, 2024 •

edited

Loading

joonatank Oct 15, 2024

joonatank Oct 15, 2024

joonatank Oct 16, 2024

joonatank Oct 16, 2024 •

edited

Loading

joonatank Oct 16, 2024

joonatank Oct 16, 2024

joonatank Oct 16, 2024 •

edited

Loading

joonatank Oct 16, 2024

joonatank Oct 16, 2024

joonatank Oct 16, 2024

fix: rebuilds/-styles (and -names) application (pre)view component #1452

Are you sure you want to change the base?

fix: rebuilds/-styles (and -names) application (pre)view component #1452

Conversation

vincit-matu commented Oct 11, 2024 • edited Loading

🛠️ Changelog

🧪 Test plan

🎫 Tickets

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joonatank Oct 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joonatank Oct 16, 2024 • edited Loading

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

vincit-matu commented Oct 11, 2024 •

edited

Loading

joonatank Oct 16, 2024 •

edited

Loading

joonatank Oct 16, 2024 •

edited

Loading