fix: pink terms box layout

City-of-Helsinki · Sep 16, 2024 · 61964b3 · 61964b3
1 parent 7d7864a
commit 61964b3
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 30 deletions.
diff --git a/apps/ui/components/reservation/EditStep0.tsx b/apps/ui/components/reservation/EditStep0.tsx
@@ -25,13 +25,19 @@ import {
 import { CalendarWrapper } from "../reservation-unit/ReservationUnitStyles";
 import { type UseFormReturn } from "react-hook-form";
 import { type PendingReservationFormType } from "@/components/reservation-unit/schema";
-import { fromUIDate } from "common/src/common/util";
+import {
+  convertLanguageCode,
+  fromUIDate,
+  getTranslationSafe,
+} from "common/src/common/util";
 import { useReservableTimes } from "@/hooks/useReservableTimes";
 import { ButtonLikeLink } from "../common/ButtonLikeLink";
 import { ReservationTimePicker } from "./ReservationTimePicker";
 import { QuickReservation } from "../reservation-unit/QuickReservation";
 import { getNextAvailableTime } from "../reservation-unit/utils";
 import { ReservationInfoCard } from "./ReservationInfoCard";
+import { Subheading } from "common/src/reservation-form/styles";
+import Sanitize from "@/components/common/Sanitize";
 
 type ReservationUnitNodeT = NonNullable<
   ReservationUnitPageQuery["reservationUnit"]
@@ -48,7 +54,12 @@ type Props = {
 };
 
 const StyledCalendarWrapper = styled(CalendarWrapper)`
+  grid-column: 1 / -1;
   margin-bottom: 0;
+  @media (min-width: ${breakpoints.l}) {
+    grid-column: span 1;
+    grid-row: 3 / span 2;
+  }
 `;
 
 const Actions = styled.div`
@@ -77,7 +88,18 @@ const StyledQuickReservation = styled(QuickReservation)`
   @media (min-width: ${breakpoints.m}) {
     grid-column-start: unset;
     grid-column-end: -1;
-    grid-row: 3 / -1;
+    grid-row: 3;
+  }
+`;
+
+const PinkBox = styled.div`
+  padding: 1px var(--spacing-m) var(--spacing-m);
+  background-color: var(--color-suomenlinna-light);
+  grid-column: 1 / -1;
+  grid-row: -1;
+  @media (min-width: ${breakpoints.l}) {
+    grid-column: span 1 / -1;
+    grid-row: unset;
   }
 `;
 
@@ -105,7 +127,7 @@ export function EditStep0({
   nextStep,
   isLoading,
 }: Props): JSX.Element {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const originalBegin = new Date(reservation.begin);
   const originalEnd = new Date(reservation.end);
@@ -189,13 +211,23 @@ export function EditStep0({
     activeApplicationRounds,
   });
 
+  const lang = convertLanguageCode(i18n.language);
+  const termsOfUse = getTranslationSafe(reservationUnit, "termsOfUse", lang);
+
   return (
     <>
       <StyledReservationInfoCard
         reservation={reservation}
         type="confirmed"
         disableImage
       />
+      {/* TODO on mobile in the design this is after the calendar but before action buttons */}
+      {termsOfUse !== "" && (
+        <PinkBox>
+          <Subheading>{t("reservations:reservationInfoBoxHeading")}</Subheading>
+          <Sanitize html={termsOfUse} />
+        </PinkBox>
+      )}
       <StyledQuickReservation
         reservationUnit={reservationUnit}
         reservationForm={reservationForm}
@@ -225,7 +257,7 @@ export function EditStep0({
         noValidate
         onSubmit={handleSubmit(submitReservation)}
         style={{
-          gridColumn: "1 / -2",
+          gridColumn: "1 / span 1",
         }}
       >
         <Actions>

diff --git a/apps/ui/pages/reservations/[id]/edit.tsx b/apps/ui/pages/reservations/[id]/edit.tsx
@@ -30,9 +30,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { errorToast } from "common/src/common/toast";
 import { reservationsPrefix } from "@/modules/const";
-import { Subheading } from "common/src/reservation-form/styles";
-import { getTranslation } from "@/modules/util";
-import Sanitize from "@/components/common/Sanitize";
 import { EditStep0 } from "@/components/reservation/EditStep0";
 import { EditStep1 } from "@/components/reservation/EditStep1";
 import {
@@ -62,20 +59,6 @@ const StyledStepper = styled(Stepper)`
   margin: var(--spacing-layout-m) 0 var(--spacing-layout-m);
 `;
 
-const PinkBox = styled.div`
-  padding: 1px var(--spacing-m) var(--spacing-m);
-  background-color: var(--color-suomenlinna-light);
-  grid-column: 1 / -1;
-  grid-row: -1;
-  @media (min-width: ${breakpoints.m}) {
-    grid-column: span 3;
-    grid-row: unset;
-  }
-  @media (min-width: ${breakpoints.l}) {
-    grid-column: -3 / span 2;
-  }
-`;
-
 // copy of ReservationCancellation but some changes to grid layoout
 // see if we can refactor cancellation to use the same heading
 const HeadingSection = styled.div`
@@ -168,8 +151,6 @@ function ReservationEditPage(props: PropsNarrowed): JSX.Element {
       ? "reservations:editReservationTime"
       : "reservationCalendar:heading.pendingReservation";
 
-  const termsOfUse = getTranslation(reservationUnit, "termsOfUse");
-
   const handleStepClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     const target = e.currentTarget;
     const s = target
@@ -230,13 +211,6 @@ function ReservationEditPage(props: PropsNarrowed): JSX.Element {
           steps={steps}
         />
       </StepperWrapper>
-      {/* TODO on mobile in the design this is after the calendar but before action buttons */}
-      {step === 0 && termsOfUse && (
-        <PinkBox>
-          <Subheading>{t("reservations:reservationInfoBoxHeading")}</Subheading>
-          <Sanitize html={termsOfUse} />
-        </PinkBox>
-      )}
       {step === 0 ? (
         <EditStep0
           reservation={reservation}