TILA-1969 reservation success processing (#554)

* TILA-1969 reservation success processing

* TILA-1969 remote logout

* TILA-1969 force login

* TILA-1969 show receipt in reservation view

* TILA-1969 cleanup

* TILA-1969 route confirmed reservation

* TILA-1969 use linkbutton

* TILA-1969 incomplete return

* TILA-1969 cleanup

Author: kieferbonk

tilavaraus.graphql

@@ -3384,7 +3384,9 @@ type ReservationStaffCreateMutationPayload {
   clientMutationId: String
 }
 
-"""An enumeration."""
+"""
+An enumeration.
+"""
 enum ReservationState {
   SCHEDULED_RESERVATION
   SCHEDULED_PERIOD

ui/components/common/Navigation/NavigationUserMenu/NavigationUserMenu.tsx

@@ -1,15 +1,13 @@
 import React from "react";
 import { IconSignout, Navigation as HDSNavigation } from "hds-react";
-import { signIn, signOut, useSession } from "next-auth/react";
+import { signIn, useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
 import styled, { css } from "styled-components";
 import { NavigationUserMenuUserCard } from "./NavigationUserMenuUserCard";
-import {
-  authenticationIssuer,
-  authenticationLogoutApiRoute,
-} from "../../../../modules/const";
+import { authenticationIssuer } from "../../../../modules/const";
 import { MenuItem } from "../types";
+import { useLogout } from "../../../../hooks/useLogout";
 
 const StyledUserMenu = styled(HDSNavigation.User)<{
   $active?: boolean;
@@ -103,6 +101,7 @@ const NavigationUserMenu = () => {
   const router = useRouter();
   const session = useSession();
   const { t } = useTranslation();
+  const { logout } = useLogout();
 
   const user = session.data?.user;
   const isActive = userMenuItems
@@ -116,7 +115,7 @@ const NavigationUserMenu = () => {
   };
 
   const handleSignOut = () => {
-    signOut({ redirect: true, callbackUrl: authenticationLogoutApiRoute });
+    logout();
   };
 
   return (
@@ -125,6 +124,7 @@ const NavigationUserMenu = () => {
       authenticated={session.status === "authenticated"}
       label={t("common:login")}
       onSignIn={handleSignIn}
+      closeOnItemClick
       $active={isActive}
     >
       {user ? (

ui/components/reservation/ReservationConfirmation.tsx

@@ -1,5 +1,10 @@
 import { ReservationState } from "common/types/common";
-import { IconArrowRight, IconCalendar, IconSignout } from "hds-react";
+import {
+  IconArrowRight,
+  IconCalendar,
+  IconLinkExternal,
+  IconSignout,
+} from "hds-react";
 import { useRouter } from "next/router";
 import React, { useMemo } from "react";
 import { Trans, useTranslation } from "next-i18next";
@@ -8,19 +13,24 @@ import styled from "styled-components";
 import { fontMedium, fontRegular, H2 } from "common/src/common/typography";
 import { Reservation } from "common/src/reservation-form/types";
 import {
+  PaymentOrderType,
   ReservationsReservationStateChoices,
+  ReservationType,
   ReservationUnitType,
 } from "common/types/gql-types";
 import { Subheading } from "common/src/reservation-form/styles";
+import { breakpoints } from "common/src/common/style";
 import { getReservationUnitInstructionsKey } from "../../modules/reservationUnit";
 import { getTranslation, reservationsUrl } from "../../modules/util";
-import { BlackButton } from "../../styles/util";
+import { BlackButton, LinkButton } from "../../styles/util";
 import { Paragraph } from "./styles";
 import { reservationUnitPath } from "../../modules/const";
+import { useLogout } from "../../hooks/useLogout";
 
 type Props = {
-  reservation: Reservation;
+  reservation: Reservation | ReservationType;
   reservationUnit: ReservationUnitType;
+  order?: PaymentOrderType;
 };
 
 const Wrapper = styled.div`
@@ -33,6 +43,15 @@ const ActionContainer1 = styled.div`
   margin: var(--spacing-m) 0 var(--spacing-l);
   display: flex;
   gap: var(--spacing-m);
+  flex-direction: column;
+
+  > button {
+    max-width: 20rem;
+  }
+
+  @media (min-width: ${breakpoints.l}) {
+    flex-direction: row;
+  }
 `;
 
 const ActionContainer2 = styled.div`
@@ -63,9 +82,11 @@ const InlineStyledLink = styled(Link)`
 const ReservationConfirmation = ({
   reservation,
   reservationUnit,
+  order,
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const router = useRouter();
+  const { logout } = useLogout();
 
   const instructionsKey = useMemo(
     () =>
@@ -94,7 +115,7 @@ const ReservationConfirmation = ({
               requiresHandling ? "Handling" : ""
             }`}
             t={t}
-            values={{ user: reservation?.user.email }}
+            values={{ user: reservation?.user?.email }}
             components={{
               br: <br />,
               lnk: (
@@ -118,6 +139,16 @@ const ReservationConfirmation = ({
             >
               {t("reservations:saveToCalendar")}
             </BlackButton>
+            {order?.receiptUrl && (
+              <BlackButton
+                data-testid="reservation__confirmation--button__receipt-link"
+                onClick={() => window.open(order.receiptUrl, "_blank")}
+                variant="secondary"
+                iconRight={<IconLinkExternal aria-hidden />}
+              >
+                {t("reservations:downloadReceipt")}
+              </BlackButton>
+            )}
           </ActionContainer1>
         )}
         {getTranslation(reservationUnit, instructionsKey) && (
@@ -141,9 +172,9 @@ const ReservationConfirmation = ({
             {t("common:gotoFrontpage")}
             <IconArrowRight aria-hidden size="m" />
           </StyledLink>
-          <StyledLink href={reservationsUrl}>
+          <LinkButton onClick={() => logout()}>
             {t("common:logout")} <IconSignout size="m" aria-hidden />
-          </StyledLink>
+          </LinkButton>
         </ActionContainer2>
       </div>
     </Wrapper>

ui/components/reservation/ReservationFail.tsx

@@ -0,0 +1,93 @@
+import { breakpoints } from "common/src/common/style";
+import { fontMedium, H2 } from "common/src/common/typography";
+import { IconArrowRight, IconSignout } from "hds-react";
+import Link from "next/link";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Container from "../common/Container";
+import { Paragraph } from "./styles";
+import { singleSearchUrl } from "../../modules/util";
+import { useLogout } from "../../hooks/useLogout";
+import { LinkButton } from "../../styles/util";
+
+type Props = {
+  type: "reservation" | "order";
+};
+
+const StyledContainer = styled(Container)`
+  padding: var(--spacing-m) var(--spacing-m) var(--spacing-layout-m);
+
+  @media (min-width: ${breakpoints.m}) {
+    max-width: 1000px;
+    margin-bottom: var(--spacing-layout-l);
+  }
+`;
+
+const Wrapper = styled.div`
+  align-items: flex-start;
+`;
+
+const Heading = styled(H2).attrs({ as: "h1" })``;
+
+const ActionContainer = styled.div`
+  display: flex;
+  gap: var(--spacing-m);
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const StyledLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2-xs);
+  text-decoration: underline;
+  color: var(--color-black) !important;
+  ${fontMedium}
+`;
+
+const ReservationFail = ({ type }: Props) => {
+  const { t } = useTranslation();
+  const { logout } = useLogout();
+
+  const headingKey =
+    type === "reservation"
+      ? "reservationExpired"
+      : type === "order"
+      ? "orderInvalid"
+      : null;
+
+  return (
+    <StyledContainer>
+      <Wrapper>
+        <div>
+          <Heading>{t(`reservations:${headingKey}`)}</Heading>
+          {type === "reservation" && (
+            <Paragraph style={{ margin: "var(--spacing-xl) 0" }}>
+              {t("reservations:reservationExpiredDescription")}
+            </Paragraph>
+          )}
+          <ActionContainer
+            style={{
+              marginTop: "var(--spacing-3-xl)",
+            }}
+          >
+            <StyledLink href={singleSearchUrl({})}>
+              {t("reservations:backToSearch")}
+              <IconArrowRight aria-hidden size="m" />
+            </StyledLink>
+            <StyledLink href="/">
+              {t("common:gotoFrontpage")}
+              <IconArrowRight aria-hidden size="m" />
+            </StyledLink>
+            <LinkButton onClick={() => logout()}>
+              {t("common:logout")} <IconSignout size="m" aria-hidden />
+            </LinkButton>
+          </ActionContainer>
+        </div>
+      </Wrapper>
+    </StyledContainer>
+  );
+};
+
+export default ReservationFail;

ui/components/reservation/ReservationInfoCard.tsx

@@ -152,6 +152,8 @@ const ReservationInfoCard = ({
     [i18n.language]
   );
 
+  if (!reservation || !reservationUnit) return null;
+
   return (
     <Wrapper $type={type}>
       {mainImage?.mediumUrl && (
@@ -168,7 +170,7 @@ const ReservationInfoCard = ({
         </Heading>
         {["confirmed", "complete"].includes(type) && (
           <Subheading>
-            {t("reservations:reservationNumber")}: {reservation?.pk}
+            {t("reservations:reservationNumber")}: {reservation.pk}
           </Subheading>
         )}
         <Subheading>{getTranslation(reservationUnit.unit, "name")}</Subheading>
@@ -177,11 +179,11 @@ const ReservationInfoCard = ({
             {capitalize(timeString)}, {formatDurationMinutes(duration)}
           </Strong>
         </Value>
-        {reservation?.description &&
+        {reservation.description &&
           ["confirmed", "complete"].includes(type) && (
             <Value>
               {t("reservationCalendar:label.description")}:{" "}
-              {reservation?.description}
+              {reservation.description}
             </Value>
           )}
         <Value>
@@ -190,7 +192,7 @@ const ReservationInfoCard = ({
             shouldDisplayTaxPercentage &&
             `(${t("common:inclTax", {
               taxPercentage: formatters.strippedDecimal.format(
-                reservation?.taxPercentageValue
+                reservation.taxPercentageValue
               ),
             })})`}
         </Value>
@@ -204,9 +206,9 @@ const ReservationInfoCard = ({
             {t("reservations:ageGroup")}: {ageGroup}
           </Value>
         )}
-        {reservation?.numPersons > 0 && ["complete"].includes(type) && (
+        {reservation.numPersons > 0 && ["complete"].includes(type) && (
           <Value>
-            {t("reservations:numPersons")}: {reservation?.numPersons}
+            {t("reservations:numPersons")}: {reservation.numPersons}
           </Value>
         )}
       </Content>

ui/cypress/e2e/reservations.cy.ts

@@ -152,9 +152,7 @@ describe("Tilavaraus user reservations", () => {
     cy.contains("div", "Payment terms FI").should("be.visible");
     cy.contains("div", "Cancellation terms FI").should("be.visible");
 
-    cy.contains("div", "Pricing terms FI").should("not.be.visible");
-    accordionToggler("reservation__pricing-terms").click();
-    cy.contains("div", "Pricing terms FI").should("be.visible");
+    cy.contains("div", "Pricing terms FI").should("not.exist");
 
     cy.contains("div", "Sopparijuttuja").should("not.be.visible");
     cy.contains("div", "Toinen rivi").should("not.be.visible");

ui/hooks/useLogout.tsx

@@ -0,0 +1,24 @@
+import { useRouter } from "next/router";
+import { useLocalStorage } from "react-use";
+import { authenticationLogoutApiRoute } from "../modules/const";
+
+type Output = {
+  shouldLogout: boolean;
+  removeShouldLogout: () => void;
+  logout: () => void;
+};
+
+export const useLogout = (): Output => {
+  const router = useRouter();
+  const [shouldLogout, setShouldLogout, removeShouldLogout] = useLocalStorage(
+    "shouldLogout",
+    false
+  );
+
+  const logout = () => {
+    setShouldLogout(true);
+    router.push(authenticationLogoutApiRoute);
+  };
+
+  return { shouldLogout, removeShouldLogout, logout };
+};

ui/mocks/handlers/reservation.ts

@@ -456,9 +456,10 @@ const reservationByPk = graphql.query<Query, QueryReservationUnitByPkArgs>(
 
     if (pk === 4) {
       data.price = 0;
-      data.begin = addDays(new Date(), 10).toISOString();
-      data.end = addHours(addDays(new Date(), 10), 2).toISOString();
+      data.begin = addDays(new Date(), 11).toISOString();
+      data.end = addHours(addDays(new Date(), 11), 2).toISOString();
       data.reservationUnits[0].pk = 888;
+      data.reservationUnits[0].canApplyFreeOfCharge = true;
       data.reservationUnits[0].cancellationRule = {
         id: "234",
         canBeCancelledTimeBefore: 0,

ui/modules/queries/reservation.ts

@@ -205,6 +205,7 @@ export const GET_RESERVATION = gql`
       priceNet
       taxPercentageValue
       orderStatus
+      orderUuid
       reservationUnits {
         pk
         nameFi
@@ -362,3 +363,22 @@ export const ADJUST_RESERVATION_TIME = gql`
     }
   }
 `;
+
+export const GET_ORDER = gql`
+  query order($orderUuid: String!) {
+    order(orderUuid: $orderUuid) {
+      reservationPk
+      status
+      paymentType
+    }
+  }
+`;
+
+export const REFRESH_ORDER = gql`
+  mutation refreshOrder($input: RefreshOrderMutationInput!) {
+    refreshOrder(input: $input) {
+      orderUuid
+      status
+    }
+  }
+`;

ui/modules/util.ts

@@ -322,7 +322,7 @@ const imagePriority = ["main", "map", "ground_plan", "other"].map((n) =>
 export const getMainImage = (
   ru: ReservationUnit | ReservationUnitType | ReservationUnitByPkType
 ): Image | ReservationUnitImageType | null => {
-  if (!ru.images || ru.images.length === 0) {
+  if (!ru || !ru.images || ru.images.length === 0) {
     return null;
   }
   const images = [...ru.images].sort((a, b) => {