TILA-1851 reservation unit redux (#379)

* TILA-1851 reservation unit redux * TILA-1851 cleanup * TILA-1851 additional tests
City-of-Helsinki · Aug 29, 2022 · 51bb9d2 · 51bb9d2
1 parent b5fdb9d
commit 51bb9d2
Show file tree

Hide file tree

Showing 39 changed files with 2,108 additions and 2,379 deletions.
diff --git a/ui/components/Carousel.tsx b/ui/components/Carousel.tsx
@@ -42,6 +42,7 @@ const Button = styled(MediumButton).attrs({
 
 const StyledCarousel = styled(NukaCarousel)<{ $showCenterControls: boolean }>`
   width: calc(100% + var(--spacing-xs) * 2) !important;
+  height: fit-content !important;
   margin-right: calc(var(--spacing-xs) * -1);
   margin-left: calc(var(--spacing-xs) * -1);
 
@@ -53,18 +54,17 @@ const StyledCarousel = styled(NukaCarousel)<{ $showCenterControls: boolean }>`
     transform: unset !important;
 
     ul {
-      top: var(--spacing-m) !important;
-      gap: var(--spacing-s);
+      gap: var(--spacing-3-xs);
       flex-wrap: wrap;
       width: 100%;
       justify-content: center;
+      position: static !important;
     }
 
     .paging-item {
       button {
         svg {
           transform: scale(1.9);
-          border: 1px solid var(--color-black-50);
           border-radius: 50%;
           fill: var(--color-black-20);
         }
@@ -74,6 +74,7 @@ const StyledCarousel = styled(NukaCarousel)<{ $showCenterControls: boolean }>`
 
   @media (min-width: ${breakpoint.m}) {
     width: 100% !important;
+    height: fit-content !important;
     margin: 0 !important;
   }
 `;

diff --git a/ui/components/Map.tsx b/ui/components/Map.tsx
@@ -1,10 +1,6 @@
 import React, { useState } from "react";
 import Image from "next/image";
-import ReactMapGL, {
-  Marker,
-  NavigationControl,
-  GeolocateControl,
-} from "react-map-gl";
+import ReactMapGL, { Marker, NavigationControl } from "react-map-gl";
 import { mapboxToken, mapStyle } from "../modules/const";
 
 type State = Record<string, number>;
@@ -21,11 +17,6 @@ const navControlStyle = {
   bottom: 10,
 };
 
-const geolocateControlStyle = {
-  right: 10,
-  bottom: 72,
-};
-
 const Map = ({
   title,
   latitude,
@@ -59,10 +50,6 @@ const Map = ({
       <Marker key={title} longitude={longitude} latitude={latitude}>
         <Image src="/icons/map_marker_icon.svg" height="42" width="32" alt="" />
       </Marker>
-      <GeolocateControl
-        style={geolocateControlStyle}
-        positionOptions={{ enableHighAccuracy: true }}
-      />
     </ReactMapGL>
   );
 };

diff --git a/ui/components/calendar/Calendar.tsx b/ui/components/calendar/Calendar.tsx
@@ -266,6 +266,10 @@ const StyledCalendar = styled(BigCalendar)<{
     .rbc-month-row {
       min-width: 800px;
       overflow: visible;
+
+      @media (min-width: ${(props) => props.overflowBreakpoint}) {
+        min-width: unset;
+      }
     }
   }
 

diff --git a/ui/components/calendar/ReservationInfo.tsx b/ui/components/calendar/ReservationInfo.tsx
@@ -149,9 +149,7 @@ const ReservationInfo = ({
           price: data.createReservation.price,
         });
         setIsRedirecting(true);
-        router.push(
-          `/reservation-unit/single/${reservationUnit.pk}/reservation`
-        );
+        router.push(`/reservation-unit/${reservationUnit.pk}/reservation`);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/ui/components/calendar/Toolbar.tsx b/ui/components/calendar/Toolbar.tsx
@@ -9,7 +9,6 @@ import { breakpoint } from "../../modules/style";
 
 export type ToolbarProps = {
   onNavigate: (n: string) => void;
-  onNavigateToNextAvailableDate?: () => void;
   onView: (n: string) => void;
   view: string;
   date: Date;
@@ -23,7 +22,6 @@ const Wrapper = styled.div`
   &:before {
     content: "";
     display: block;
-    background-color: var(--tilavaraus-gray);
     position: absolute;
     top: 0;
     right: 0;
@@ -137,8 +135,7 @@ const ButtonWrapper = styled.div`
 // eslint-disable-next-line react/prefer-stateless-function
 export default class Toolbar extends React.Component<ToolbarProps> {
   render(): JSX.Element {
-    const { onNavigate, onNavigateToNextAvailableDate, onView, view, date } =
-      this.props;
+    const { onNavigate, onView, view, date } = this.props;
 
     const culture = { locale: locales[i18n.language] };
 
@@ -165,17 +162,17 @@ export default class Toolbar extends React.Component<ToolbarProps> {
         const end = endOfWeek(date, culture);
         const startDay = format(start, "d", culture);
         const endDay = format(end, "d", culture);
-        const startMonth = format(start, "MMMM", culture);
-        const endMonth = format(end, "MMMM", culture);
+        const startMonth = format(start, "M", culture);
+        const endMonth = format(end, "M", culture);
         const startYear = format(start, "yyyy", culture);
         const endYear = format(end, "yyyy", culture);
         const currentYear = format(new Date(), "yyyy", culture);
         title = `${startDay}.${
-          startMonth !== endMonth ? ` ${startMonth}` : ""
-        } ${
-          startYear !== endYear ? ` ${startYear}` : ""
-        }–${endDay}. ${endMonth} ${
-          startYear !== endYear || endYear !== currentYear ? ` ${endYear}` : ""
+          startMonth !== endMonth ? `${startMonth}.` : ""
+        }${
+          startYear !== endYear ? `${startYear}` : ""
+        } – ${endDay}.${endMonth}.${
+          startYear !== endYear || endYear !== currentYear ? `${endYear}` : ""
         }`;
       }
     }
@@ -190,14 +187,6 @@ export default class Toolbar extends React.Component<ToolbarProps> {
           >
             {i18n.t("common:today")}
           </button>
-          <button
-            type="button"
-            onClick={() => onNavigateToNextAvailableDate()}
-            aria-label={i18n.t("reservationCalendar:nextAvailableTime")}
-            disabled={!onNavigateToNextAvailableDate}
-          >
-            {i18n.t("reservationCalendar:nextAvailableTime")}
-          </button>
         </ButtonWrapper>
         <div className="rbc-toolbar-navigation-hz">
           <button

diff --git a/ui/components/common/Accordion.tsx b/ui/components/common/Accordion.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Button, IconAngleDown, IconAngleUp, useAccordion } from "hds-react";
 import styled from "styled-components";
+import { H4 } from "../../modules/style/typography";
 
 type Theme = "default" | "thin";
 
@@ -31,7 +32,7 @@ const HeadingButton = styled(Button).attrs({
     width: 100%;
     padding-left: 0;
     border-left: 0;
-    border-bottom: 1px solid var(--color-black-60) !important;
+    border-bottom: 1px solid var(--color-black-50) !important;
 
     span {
       ${({ theme }) => {
@@ -76,6 +77,8 @@ const Content = styled.div<{ $open: boolean }>`
   display: ${({ $open }) => ($open ? "block" : "none")};
 `;
 
+const Heading = styled(H4).attrs({ as: "div" })``;
+
 const Accordion = ({
   heading,
   open = false,
@@ -111,7 +114,7 @@ const Accordion = ({
         onClick={onToggle}
         theme={theme}
       >
-        {heading}
+        <Heading>{heading}</Heading>
       </HeadingButton>
       <Content $open={isOpen}>{children}</Content>
     </AccordionElement>

diff --git a/ui/components/index/Recommendations.tsx b/ui/components/index/Recommendations.tsx
@@ -26,7 +26,7 @@ const Recommendations = ({ recommendations }: Props): JSX.Element => {
     <Wrapper>
       <Container>
         <Heading>{t("recommendations")}</Heading>
-        <RelatedUnits units={recommendations} viewType="single" />
+        <RelatedUnits units={recommendations} />
       </Container>
     </Wrapper>
   );

diff --git a/ui/components/reservation-unit/Address.tsx b/ui/components/reservation-unit/Address.tsx
@@ -19,15 +19,10 @@ const Container = styled.div`
   margin-bottom: var(--spacing-layout-l);
 `;
 
-const Name = styled(H4).attrs({ as: "h3" })`
-  margin-top: 0;
-`;
+const Name = styled(H4).attrs({ as: "h3" })``;
 
-const AddressLine = styled.div`
-  font-family: var(--font-medium);
-  font-weight: 500;
-  font-size: var(--fontsize-body-m);
-  margin-top: var(--spacing-2-xs);
+const AddressSpan = styled.span`
+  font-size: var(--fontsize-body-l);
 `;
 
 const Links = styled.div`
@@ -36,7 +31,7 @@ const Links = styled.div`
   font-weight: 500;
 
   a {
-    color: var(--color-bus);
+    color: var(--color-black-90);
   }
 `;
 
@@ -85,9 +80,9 @@ const Address = ({ reservationUnit }: Props): JSX.Element => {
   return (
     <Container data-testid="reservation-unit__address--container">
       <Name>{getTranslation(reservationUnit, "name")}</Name>
-      {addressStreet && <AddressLine>{addressStreet}</AddressLine>}
+      {addressStreet && <AddressSpan>{addressStreet}</AddressSpan>}
       {location?.addressZip && addressCity && (
-        <AddressLine>{`${location?.addressZip} ${addressCity}`}</AddressLine>
+        <AddressSpan>{`, ${location?.addressZip} ${addressCity}`}</AddressSpan>
       )}
       <Links>
         <ExternalLink

diff --git a/ui/components/reservation-unit/EquipmentList.tsx b/ui/components/reservation-unit/EquipmentList.tsx
@@ -0,0 +1,72 @@
+import { Button, IconAngleDown, IconAngleUp } from "hds-react";
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { EquipmentType } from "../../modules/gql-types";
+import { getEquipmentList } from "../../modules/reservationUnit";
+import { breakpoint } from "../../modules/style";
+
+type Props = {
+  equipment: EquipmentType[];
+  itemsToShow?: number;
+};
+
+const Wrapper = styled.div``;
+
+const List = styled.ul`
+  list-style: none;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-2-xs) var(--spacing-m);
+  padding: 0;
+
+  @media (min-width: ${breakpoint.s}) {
+    grid-template-columns: 1fr 1fr;
+    row-gap: var(--spacing-s);
+  }
+`;
+
+const EquipmentItem = styled.li`
+  font-size: var(--fontsize-body-m);
+
+  @media (min-width: ${breakpoint.s}) {
+    font-size: var(--fontsize-body-l);
+  }
+`;
+
+const ToggleButton = styled(Button)`
+  font-size: var(--fontsize-body-m);
+`;
+
+const EquipmentList = ({ equipment, itemsToShow = 6 }: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  const [showAll, setShowAll] = useState(false);
+
+  const equipmentList = useMemo(() => {
+    const items = showAll ? equipment : equipment.slice(0, itemsToShow);
+    return getEquipmentList(items);
+  }, [equipment, showAll, itemsToShow]);
+
+  return (
+    <Wrapper>
+      <List>
+        {equipmentList.map((item) => (
+          <EquipmentItem key={item}>{item}</EquipmentItem>
+        ))}
+      </List>
+      {itemsToShow < equipment.length && (
+        <ToggleButton
+          variant="supplementary"
+          size="small"
+          onClick={() => setShowAll(!showAll)}
+          iconRight={showAll ? <IconAngleUp /> : <IconAngleDown />}
+        >
+          {t(`common:show${showAll ? "Less" : "More"}`)}
+        </ToggleButton>
+      )}
+    </Wrapper>
+  );
+};
+
+export default EquipmentList;
diff --git a/ui/components/reservation-unit/ExternalLink.tsx b/ui/components/reservation-unit/ExternalLink.tsx
@@ -11,10 +11,9 @@ const Container = styled.div`
   margin-top: var(--spacing-s);
   display: flex;
   align-items: center;
-
-  & svg {
-    margin-left: var(--spacing-xs);
-  }
+  color: inherit;
+  text-decoration: underline;
+  gap: var(--spacing-3-xs);
 `;
 
 const Name = styled.span`