TILA-2689: sticky header styling and less buttons (#684)

* Add: translate common error message

* Fix: show only the primary buttons in sticky header

* Fix: sticky header styling

* Fix: reverse sticky header buttons order

Author: joonatank

admin-ui/src/component/StickyHeader.tsx

@@ -1,9 +1,10 @@
+import { ButtonContainer } from "app/styles/layout";
 import { breakpoints } from "common/src/common/style";
 import React from "react";
 import styled from "styled-components";
 
 const Sticky = styled.div`
-  z-index: 101;
+  z-index: var(--tilavaraus-admin-stack-sticky-reservation-header);
   position: sticky;
   top: 0px;
   width: 100%;
@@ -13,39 +14,73 @@ const Sticky = styled.div`
 
 const StickyContent = styled.div`
   color: var(--color-white);
-  background: var(--color-bus);
-  border-width: 1px 0;
+  background: var(--color-bus-dark);
+  border-width: 0px;
   border-style: solid;
   border-color: var(--color-black-20);
-  padding: var(--spacing-2-xs) var(--spacing-s) var(--spacing-2-xs) 48px;
+  padding: 10px;
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   gap: var(--spacing-s);
   line-height: 1.5;
-  button,
-  a {
-    border-color: var(--color-white) !important;
-    color: var(--color-white) !important;
+  && button,
+  && a {
+    border-color: var(--color-white);
+    color: var(--color-white);
+    &:hover,
+    &:focus-within {
+      background-color: unset;
+      color: var(--color-black-10);
+      border-color: var(--color-black-10);
+    }
   }
-  @media (max-width: ${breakpoints.s}) {
-    padding: var(--spacing-xs) var(--spacing-s);
-    flex-direction: column;
+  flex-direction: column;
+  @media (min-width: ${breakpoints.l}) {
+    flex-direction: row;
   }
 `;
 
-const AlignVertically = styled.div`
-  display: flex;
-  gap: var(--spacing-m);
-  flex-direction: row;
-  align-items: center;
-`;
+const Name = styled.h2`
+  font-weight: 500;
+  font-family: var(--tilavaraus-admin-font-medium);
+  margin-top: 0;
 
-const Name = styled.div`
-  font-size: var(--fontsize-body-xl);
+  font-size: var(--fontsize-heading-xs);
+  margin-bottom: var(--spacing-2-xs);
+  @media (min-width: ${breakpoints.s}) {
+    font-size: var(--fontsize-heading-m);
+    margin-bottom: var(--spacing-s);
+  }
 `;
 const Tagline = styled.div`
-  font-size: var(--fontsize-body-l);
+  font-size: var(--fontsize-body-m);
+`;
+
+const StyledButtonContainer = styled(ButtonContainer)`
+  margin: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: auto;
+  align-items: center;
+  flex-direction: row-reverse;
+
+  justify-content: space-between;
+  & > button {
+    flex: 1;
+    max-width: 50%;
+  }
+  @media (min-width: ${breakpoints.s}) {
+    justify-content: flex-end;
+    & > button {
+      flex: unset;
+      max-width: unset;
+    }
+  }
+`;
+
+const TagContainer = styled.div`
+  flex-grow: 1;
+  flex-shrink: 1;
 `;
 
 type Props = {
@@ -57,11 +92,11 @@ type Props = {
 const StickyHeader = ({ name, tagline, buttons }: Props): JSX.Element => (
   <Sticky>
     <StickyContent>
-      <div>
+      <TagContainer>
         <Name>{name}</Name>
         <Tagline>{tagline}</Tagline>
-      </div>
-      <AlignVertically>{buttons}</AlignVertically>
+      </TagContainer>
+      <StyledButtonContainer>{buttons}</StyledButtonContainer>
     </StickyContent>
   </Sticky>
 );

admin-ui/src/component/reservations/requested/ApprovalButtons.tsx

@@ -6,7 +6,6 @@ import {
 import { useTranslation } from "react-i18next";
 import { addHours, isToday } from "date-fns";
 import { Button } from "hds-react";
-import { ButtonContainer } from "app/styles/layout";
 import DenyDialog from "./DenyDialog";
 import ApproveDialog from "./ApproveDialog";
 import ReturnToRequiredHandlingDialog from "./ReturnToRequiresHandlingDialog";
@@ -66,12 +65,14 @@ const ApprovalButtons = ({
   reservation,
   handleClose,
   handleAccept,
+  disableNonEssentialButtons,
 }: {
   state: ReservationsReservationStateChoices;
   isFree: boolean;
   reservation: ReservationType;
   handleClose: () => void;
   handleAccept: () => void;
+  disableNonEssentialButtons?: boolean;
 }) => {
   const { setModalContent } = useModal();
   const { t } = useTranslation();
@@ -124,7 +125,7 @@ const ApprovalButtons = ({
     !reservation.recurringReservation && isPossibleToEdit(state, endTime);
 
   return (
-    <ButtonContainer>
+    <>
       {endTime > new Date() && isPossibleToApprove(state, endTime) && (
         <Button {...btnCommon} onClick={handleApproveClick}>
           {t("RequestedReservation.approve")}
@@ -140,10 +141,10 @@ const ApprovalButtons = ({
           {t("RequestedReservation.returnToHandling")}
         </Button>
       )}
-      {isAllowedToModify && (
+      {!disableNonEssentialButtons && isAllowedToModify && (
         <ButtonLikeLink to="edit">{t("ApprovalButtons.edit")}</ButtonLikeLink>
       )}
-    </ButtonContainer>
+    </>
   );
 };
 

admin-ui/src/component/reservations/requested/ApprovalButtonsRecurring.tsx

@@ -6,7 +6,6 @@ import {
 import { useTranslation } from "react-i18next";
 import { Button } from "hds-react";
 import { ButtonLikeLink } from "app/styles/util";
-import { ButtonContainer } from "app/styles/layout";
 import DenyDialog from "./DenyDialog";
 import { useModal } from "../../../context/ModalContext";
 import { useRecurringReservations } from "./hooks";
@@ -17,10 +16,12 @@ const ApprovalButtonsRecurring = ({
   recurringReservation,
   handleClose,
   handleAccept,
+  disableNonEssentialButtons,
 }: {
   recurringReservation: RecurringReservationType;
   handleClose: () => void;
   handleAccept: () => void;
+  disableNonEssentialButtons?: boolean;
 }) => {
   const { setModalContent } = useModal();
   const { t } = useTranslation();
@@ -82,12 +83,14 @@ const ApprovalButtonsRecurring = ({
   }
 
   return (
-    <ButtonContainer>
+    <>
       <Button {...btnCommon} onClick={handleDenyClick}>
         {t("ApprovalButtons.recurring.rejectAllButton")}
       </Button>
-      <ButtonLikeLink to="edit">{t("ApprovalButtons.edit")}</ButtonLikeLink>
-    </ButtonContainer>
+      {!disableNonEssentialButtons && (
+        <ButtonLikeLink to="edit">{t("ApprovalButtons.edit")}</ButtonLikeLink>
+      )}
+    </>
   );
 };
 

admin-ui/src/component/reservations/requested/ApproveDialog.tsx

@@ -54,8 +54,32 @@ const DialogContent = ({
   onClose: () => void;
   onAccept: () => void;
 }) => {
-  const [approveReservationMutation] =
-    useMutation<Mutation>(APPROVE_RESERVATION);
+  const { notifyError, notifySuccess } = useNotification();
+  const { t, i18n } = useTranslation();
+
+  const [approveReservationMutation] = useMutation<Mutation>(
+    APPROVE_RESERVATION,
+    {
+      onCompleted: () => {
+        notifySuccess(t("RequestedReservation.ApproveDialog.approved"));
+        onAccept();
+      },
+      onError: (err) => {
+        const { message } = err;
+        const hasTranslatedErrorMsg = i18n.exists(
+          `errors.descriptive.${message}`
+        );
+        const errorTranslated = hasTranslatedErrorMsg
+          ? `errors.descriptive.${message}`
+          : `errors.descriptive.genericError`;
+        notifyError(
+          t("RequestedReservation.ApproveDialog.errorSaving", {
+            error: t(errorTranslated),
+          })
+        );
+      },
+    }
+  );
 
   const approveReservation = (input: ReservationApproveMutationInput) =>
     approveReservationMutation({ variables: { input } });
@@ -64,36 +88,16 @@ const DialogContent = ({
   const [handlingDetails, setHandlingDetails] = useState<string>(
     reservation.workingMemo || ""
   );
-  const { notifyError, notifySuccess } = useNotification();
-  const { t } = useTranslation();
-
   const hasPrice = Boolean(reservation.price !== undefined);
   const priceIsValid = !hasPrice || !Number.isNaN(parseNumber(price));
 
-  const handleApprove = async () => {
-    try {
-      const res = await approveReservation({
-        pk: reservation.pk,
-        price: parseNumber(price),
-        priceNet: calcPriceNet(price, reservation.taxPercentageValue),
-        handlingDetails,
-      });
-
-      if (res.data?.approveReservation?.errors) {
-        notifyError(
-          t("RequestedReservation.ApproveDialog.errorSaving", {
-            error: res.data?.approveReservation?.errors
-              .map((e) => `${e?.field}: ${e?.messages}`)
-              .join(", "),
-          })
-        );
-      } else {
-        notifySuccess(t("RequestedReservation.ApproveDialog.approved"));
-        onAccept();
-      }
-    } catch (e) {
-      notifyError(t("RequestedReservation.ApproveDialog.errorSaving"));
-    }
+  const handleApprove = () => {
+    approveReservation({
+      pk: reservation.pk,
+      price: parseNumber(price),
+      priceNet: calcPriceNet(price, reservation.taxPercentageValue),
+      handlingDetails,
+    });
   };
 
   return (

admin-ui/src/component/reservations/requested/RequestedReservation.tsx

@@ -34,7 +34,11 @@ import {
 import { useModal } from "../../../context/ModalContext";
 import { UPDATE_WORKING_MEMO } from "./queries";
 import BreadcrumbWrapper from "../../BreadcrumbWrapper";
-import { Container, HorisontalFlex } from "../../../styles/layout";
+import {
+  ButtonContainer,
+  Container,
+  HorisontalFlex,
+} from "../../../styles/layout";
 import { publicUrl } from "../../../common/const";
 import ShowWhenTargetInvisible from "../../ShowWhenTargetInvisible";
 import StickyHeader from "../../StickyHeader";
@@ -109,11 +113,13 @@ const ButtonsWithPermChecks = ({
   reservation,
   isFree,
   onReservationUpdated,
+  disableNonEssentialButtons,
 }: {
   reservation: ReservationType;
   isFree: boolean;
   // Hack to deal with reservation query not being cached so we need to refetch
   onReservationUpdated: () => void;
+  disableNonEssentialButtons?: boolean;
 }) => {
   const { setModalContent } = useModal();
 
@@ -134,6 +140,7 @@ const ButtonsWithPermChecks = ({
             onReservationUpdated();
             closeDialog();
           }}
+          disableNonEssentialButtons={disableNonEssentialButtons}
         />
       ) : (
         <ApprovalButtons
@@ -145,6 +152,7 @@ const ButtonsWithPermChecks = ({
             onReservationUpdated();
             closeDialog();
           }}
+          disableNonEssentialButtons={disableNonEssentialButtons}
         />
       )}
     </VisibleIfPermission>
@@ -447,6 +455,7 @@ const RequestedReservation = ({
               reservation={reservation}
               isFree={!isNonFree}
               onReservationUpdated={refetch}
+              disableNonEssentialButtons
             />
           }
         />
@@ -457,11 +466,13 @@ const RequestedReservation = ({
           reservation={reservation}
           tagline={reservationTagline}
         />
-        <ButtonsWithPermChecks
-          reservation={reservation}
-          onReservationUpdated={refetch}
-          isFree={!isNonFree}
-        />
+        <ButtonContainer>
+          <ButtonsWithPermChecks
+            reservation={reservation}
+            onReservationUpdated={refetch}
+            isFree={!isNonFree}
+          />
+        </ButtonContainer>
         <ReservationSummary reservation={reservation} isFree={!isNonFree} />
         <div>
           <VisibleIfPermission