From a6f24a6992ce83bab14aec9068b7da4e0b01981a Mon Sep 17 00:00:00 2001
From: Joonatan Kuosa <joonatan.kuosa@gmail.com>
Date: Tue, 4 Feb 2025 10:26:02 +0200
Subject: [PATCH] fix: submit / cancel button labels more consistent

---
 apps/ui/components/CancellationForm.tsx        |  2 +-
 apps/ui/components/application/Page2.tsx       |  2 ++
 apps/ui/components/reservation/EditStep0.tsx   |  4 ++--
 apps/ui/components/reservation/EditStep1.tsx   |  5 ++++-
 apps/ui/components/reservation/Step0.tsx       |  8 ++++----
 apps/ui/components/reservation/Step1.tsx       | 12 ++----------
 apps/ui/pages/applications/[id]/page3.tsx      |  6 ++++--
 apps/ui/pages/applications/[id]/preview.tsx    |  3 ++-
 apps/ui/pages/reservation-unit/[...params].tsx |  3 ---
 apps/ui/public/locales/en/common.json          |  1 +
 apps/ui/public/locales/fi/common.json          |  1 +
 apps/ui/public/locales/sv/common.json          |  1 +
 12 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/apps/ui/components/CancellationForm.tsx b/apps/ui/components/CancellationForm.tsx
index 0db001cb60..eef52c19e5 100644
--- a/apps/ui/components/CancellationForm.tsx
+++ b/apps/ui/components/CancellationForm.tsx
@@ -101,7 +101,7 @@ export function CancellationForm(props: {
               size="large"
             >
               <IconCross aria-hidden="true" />
-              {t("reservations:cancelButton")}
+              {t("common:stop")}
             </ButtonLikeLink>
             <Button
               type="submit"
diff --git a/apps/ui/components/application/Page2.tsx b/apps/ui/components/application/Page2.tsx
index 369d5a9868..bcf33b22a9 100644
--- a/apps/ui/components/application/Page2.tsx
+++ b/apps/ui/components/application/Page2.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import {
   Button,
   ButtonVariant,
+  IconArrowLeft,
   IconArrowRight,
   Notification,
   NotificationSize,
@@ -493,6 +494,7 @@ function Page2({ application, onNext }: Props): JSX.Element {
         <Button
           variant={ButtonVariant.Secondary}
           onClick={() => router.push(`${application.pk}/page1`)}
+          iconStart={<IconArrowLeft />}
         >
           {t("common:prev")}
         </Button>
diff --git a/apps/ui/components/reservation/EditStep0.tsx b/apps/ui/components/reservation/EditStep0.tsx
index 3d4bedd4d8..4d73dfb2dc 100644
--- a/apps/ui/components/reservation/EditStep0.tsx
+++ b/apps/ui/components/reservation/EditStep0.tsx
@@ -267,7 +267,7 @@ export function EditStep0({
             data-testid="reservation-edit__button--cancel"
           >
             <IconCross aria-hidden="true" />
-            {t("reservations:cancelButton")}
+            {t("common:stop")}
           </ButtonLikeLink>
           <Button
             type="submit"
@@ -282,7 +282,7 @@ export function EditStep0({
             disabled={!focusSlot.isReservable || !isDirty || isLoading}
             data-testid="reservation__button--continue"
           >
-            {t("reservationCalendar:nextStep")}
+            {t("common:next")}
           </Button>
         </Actions>
       </Form>
diff --git a/apps/ui/components/reservation/EditStep1.tsx b/apps/ui/components/reservation/EditStep1.tsx
index 0081ae1d26..9d3b78e57f 100644
--- a/apps/ui/components/reservation/EditStep1.tsx
+++ b/apps/ui/components/reservation/EditStep1.tsx
@@ -83,6 +83,9 @@ const StyledReservationInfoCard = styled(ReservationInfoCard)`
 `;
 
 const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
   @media (min-width: ${breakpoints.m}) {
     grid-row: 2 / -1;
     grid-column: 1 / span 1;
@@ -185,7 +188,7 @@ export function EditStep1({
             data-testid="reservation-edit__button--cancel"
           >
             <IconCross aria-hidden="true" />
-            {t("reservations:cancelButton")}
+            {t("common:stop")}
           </ButtonLikeLink>
           <Button
             type="submit"
diff --git a/apps/ui/components/reservation/Step0.tsx b/apps/ui/components/reservation/Step0.tsx
index cd3051e7a9..5f5e0238b6 100644
--- a/apps/ui/components/reservation/Step0.tsx
+++ b/apps/ui/components/reservation/Step0.tsx
@@ -5,11 +5,11 @@
 import type { OptionType } from "common/types/common";
 import {
   Notification,
-  IconArrowLeft,
   IconArrowRight,
   Button,
   ButtonVariant,
   LoadingSpinner,
+  IconCross,
 } from "hds-react";
 import { useFormContext, UseFormReturn } from "react-hook-form";
 import React, { useState } from "react";
@@ -131,17 +131,17 @@ export function Step0({
           disabled={submitDisabled || isSubmitting}
           data-testid="reservation__button--continue"
         >
-          {t("reservationCalendar:nextStep")}
+          {t("common:next")}
         </Button>
         <Button
           type="button"
           variant={ButtonVariant.Secondary}
-          iconStart={<IconArrowLeft aria-hidden="true" />}
+          iconStart={<IconCross aria-hidden="true" />}
           disabled={isSubmitting}
           onClick={cancelReservation}
           data-testid="reservation__button--cancel"
         >
-          {t("common:cancel")}
+          {t("common:stop")}
         </Button>
       </ActionContainer>
     </>
diff --git a/apps/ui/components/reservation/Step1.tsx b/apps/ui/components/reservation/Step1.tsx
index a9b7ef4551..e7c26cfd80 100644
--- a/apps/ui/components/reservation/Step1.tsx
+++ b/apps/ui/components/reservation/Step1.tsx
@@ -5,7 +5,6 @@ import {
   Button,
   ButtonVariant,
   IconArrowLeft,
-  IconArrowRight,
   LoadingSpinner,
   Notification,
 } from "hds-react";
@@ -24,7 +23,6 @@ type Props = {
   reservation: NodeT;
   supportedFields: FieldName[];
   options: OptionsRecord;
-  requiresHandling: boolean;
   setStep: React.Dispatch<React.SetStateAction<number>>;
 };
 
@@ -32,7 +30,6 @@ export function Step1({
   reservation,
   supportedFields,
   options,
-  requiresHandling,
   setStep,
 }: Props): JSX.Element {
   const { t } = useTranslation();
@@ -55,9 +52,6 @@ export function Step1({
   const reservationUnit = reservation?.reservationUnits?.find(() => true);
 
   const areTermsAccepted = isTermsAccepted.space && isTermsAccepted.service;
-  const submitText = t(
-    `reservationCalendar:${requiresHandling ? "nextStep" : "makeReservation"}`
-  );
 
   if (!reservationUnit) {
     return (
@@ -88,20 +82,18 @@ export function Step1({
           iconEnd={
             isSubmitting ? (
               <LoadingSpinner small />
-            ) : requiresHandling ? (
-              <IconArrowRight aria-hidden="true" />
             ) : undefined
           }
           data-testid="reservation__button--continue"
           disabled={!areTermsAccepted || isSubmitting}
         >
-          {submitText}
+          {t("reservationCalendar:makeReservation")}
         </Button>
         <Button
           variant={ButtonVariant.Secondary}
           iconStart={<IconArrowLeft aria-hidden="true" />}
           onClick={() => setStep(0)}
-          data-testid="reservation__button--cancel"
+          data-testid="reservation__button--prev"
         >
           {t("common:prev")}
         </Button>
diff --git a/apps/ui/pages/applications/[id]/page3.tsx b/apps/ui/pages/applications/[id]/page3.tsx
index 032b68442a..064b7a387d 100644
--- a/apps/ui/pages/applications/[id]/page3.tsx
+++ b/apps/ui/pages/applications/[id]/page3.tsx
@@ -33,7 +33,7 @@ import { getCommonServerSideProps } from "@/modules/serverUtils";
 import { base64encode, toNumber } from "common/src/helpers";
 import { errorToast } from "common/src/common/toast";
 import { getApplicationPath } from "@/modules/urls";
-import { Button, ButtonVariant, IconArrowRight } from "hds-react";
+import { Button, ButtonVariant, IconArrowLeft, IconArrowRight } from "hds-react";
 import { ButtonContainer } from "common/styles/util";
 import styled from "styled-components";
 
@@ -51,7 +51,9 @@ function Buttons({
 
   return (
     <ButtonContainer>
-      <Button variant={ButtonVariant.Secondary} onClick={onPrev}>
+      <Button
+        iconStart={<IconArrowLeft aria-hidden="true" />}
+        variant={ButtonVariant.Secondary} onClick={onPrev}>
         {t("common:prev")}
       </Button>
       <Button
diff --git a/apps/ui/pages/applications/[id]/preview.tsx b/apps/ui/pages/applications/[id]/preview.tsx
index ba0ac04d25..6b98ef32cc 100644
--- a/apps/ui/pages/applications/[id]/preview.tsx
+++ b/apps/ui/pages/applications/[id]/preview.tsx
@@ -21,7 +21,7 @@ import { errorToast } from "common/src/common/toast";
 import { getApplicationPath } from "@/modules/urls";
 import { ButtonLikeLink } from "@/components/common/ButtonLikeLink";
 import { ButtonContainer, Flex } from "common/styles/util";
-import { Button, ButtonVariant, LoadingSpinner } from "hds-react";
+import { Button, ButtonVariant, IconArrowLeft, LoadingSpinner } from "hds-react";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
 type PropsNarrowed = Exclude<Props, { notFound: boolean }>;
@@ -102,6 +102,7 @@ function Preview(props: PropsNarrowed): JSX.Element {
         />
         <ButtonContainer>
           <ButtonLikeLink size="large" href={getApplicationPath(pk, "page3")}>
+            {<IconArrowLeft aria-hidden="true" />}
             {t("common:prev")}
           </ButtonLikeLink>
           <Button
diff --git a/apps/ui/pages/reservation-unit/[...params].tsx b/apps/ui/pages/reservation-unit/[...params].tsx
index ab722e4e29..94504f9136 100644
--- a/apps/ui/pages/reservation-unit/[...params].tsx
+++ b/apps/ui/pages/reservation-unit/[...params].tsx
@@ -412,9 +412,6 @@ function NewReservation(props: PropsNarrowed): JSX.Element | null {
               reservation={reservation}
               supportedFields={supportedFields}
               options={options}
-              // TODO this is correct but confusing.
-              // There used to be 5 steps for payed reservations but the stepper is hidden for them now.
-              requiresHandling={steps.length > 2}
               setStep={setStep}
             />
           )}
diff --git a/apps/ui/public/locales/en/common.json b/apps/ui/public/locales/en/common.json
index 89d49731ab..a80141c569 100644
--- a/apps/ui/public/locales/en/common.json
+++ b/apps/ui/public/locales/en/common.json
@@ -84,6 +84,7 @@
   "loginAlt": "Sign in",
   "logout": "Sign out",
   "cancel": "Cancel",
+  "stop": "Cancel",
   "imgAltForSpace": "Image of the spaces {{name}}",
   "address": {
     "streetAddress": "Address",
diff --git a/apps/ui/public/locales/fi/common.json b/apps/ui/public/locales/fi/common.json
index 26b597dc02..5156447e69 100644
--- a/apps/ui/public/locales/fi/common.json
+++ b/apps/ui/public/locales/fi/common.json
@@ -84,6 +84,7 @@
   "loginAlt": "Kirjaudu sisään",
   "logout": "Kirjaudu ulos",
   "cancel": "Peru",
+  "stop": "Keskeytä",
   "imgAltForSpace": "Kuva tilasta {{name}}",
   "address": {
     "streetAddress": "Katuosoite",
diff --git a/apps/ui/public/locales/sv/common.json b/apps/ui/public/locales/sv/common.json
index c5e3e5c976..34781a0890 100644
--- a/apps/ui/public/locales/sv/common.json
+++ b/apps/ui/public/locales/sv/common.json
@@ -84,6 +84,7 @@
   "loginAlt": "Logga in",
   "logout": "Logga ut",
   "cancel": "Avboka",
+  "stop": "Avbryt",
   "imgAltForSpace": "Bild på lokalen {{name}}",
   "address": {
     "streetAddress": "Adress",