rework: reservation series mutation

Use fast single mutation to create a recurring reservation.

Author: joonatank

apps/admin-ui/gql/gql-types.ts

@@ -8235,12 +8235,12 @@ export type ReservationUnitCalendarQuery = {
   }> | null;
 };
 
-export type CreateRecurringReservationMutationVariables = Exact<{
-  input: RecurringReservationCreateMutationInput;
+export type CreateReservationSeriesMutationVariables = Exact<{
+  input: ReservationSeriesCreateMutationInput;
 }>;
 
-export type CreateRecurringReservationMutation = {
-  createRecurringReservation?: { pk?: number | null } | null;
+export type CreateReservationSeriesMutation = {
+  createReservationSeries?: { pk?: number | null } | null;
 };
 
 export type ReservationsInIntervalFragment = {
@@ -14670,59 +14670,58 @@ export type ReservationUnitCalendarQueryResult = Apollo.QueryResult<
   ReservationUnitCalendarQuery,
   ReservationUnitCalendarQueryVariables
 >;
-export const CreateRecurringReservationDocument = gql`
-  mutation CreateRecurringReservation(
-    $input: RecurringReservationCreateMutationInput!
+export const CreateReservationSeriesDocument = gql`
+  mutation CreateReservationSeries(
+    $input: ReservationSeriesCreateMutationInput!
   ) {
-    createRecurringReservation(input: $input) {
+    createReservationSeries(input: $input) {
       pk
     }
   }
 `;
-export type CreateRecurringReservationMutationFn = Apollo.MutationFunction<
-  CreateRecurringReservationMutation,
-  CreateRecurringReservationMutationVariables
+export type CreateReservationSeriesMutationFn = Apollo.MutationFunction<
+  CreateReservationSeriesMutation,
+  CreateReservationSeriesMutationVariables
 >;
 
 /**
- * __useCreateRecurringReservationMutation__
+ * __useCreateReservationSeriesMutation__
  *
- * To run a mutation, you first call `useCreateRecurringReservationMutation` within a React component and pass it any options that fit your needs.
- * When your component renders, `useCreateRecurringReservationMutation` returns a tuple that includes:
+ * To run a mutation, you first call `useCreateReservationSeriesMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateReservationSeriesMutation` returns a tuple that includes:
  * - A mutate function that you can call at any time to execute the mutation
  * - An object with fields that represent the current status of the mutation's execution
  *
  * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
  *
  * @example
- * const [createRecurringReservationMutation, { data, loading, error }] = useCreateRecurringReservationMutation({
+ * const [createReservationSeriesMutation, { data, loading, error }] = useCreateReservationSeriesMutation({
  *   variables: {
  *      input: // value for 'input'
  *   },
  * });
  */
-export function useCreateRecurringReservationMutation(
+export function useCreateReservationSeriesMutation(
   baseOptions?: Apollo.MutationHookOptions<
-    CreateRecurringReservationMutation,
-    CreateRecurringReservationMutationVariables
+    CreateReservationSeriesMutation,
+    CreateReservationSeriesMutationVariables
   >
 ) {
   const options = { ...defaultOptions, ...baseOptions };
   return Apollo.useMutation<
-    CreateRecurringReservationMutation,
-    CreateRecurringReservationMutationVariables
-  >(CreateRecurringReservationDocument, options);
+    CreateReservationSeriesMutation,
+    CreateReservationSeriesMutationVariables
+  >(CreateReservationSeriesDocument, options);
 }
-export type CreateRecurringReservationMutationHookResult = ReturnType<
-  typeof useCreateRecurringReservationMutation
+export type CreateReservationSeriesMutationHookResult = ReturnType<
+  typeof useCreateReservationSeriesMutation
+>;
+export type CreateReservationSeriesMutationResult =
+  Apollo.MutationResult<CreateReservationSeriesMutation>;
+export type CreateReservationSeriesMutationOptions = Apollo.BaseMutationOptions<
+  CreateReservationSeriesMutation,
+  CreateReservationSeriesMutationVariables
 >;
-export type CreateRecurringReservationMutationResult =
-  Apollo.MutationResult<CreateRecurringReservationMutation>;
-export type CreateRecurringReservationMutationOptions =
-  Apollo.BaseMutationOptions<
-    CreateRecurringReservationMutation,
-    CreateRecurringReservationMutationVariables
-  >;
 export const ReservationTimesInReservationUnitDocument = gql`
   query ReservationTimesInReservationUnit(
     $id: ID!

apps/admin-ui/src/common/util.ts

@@ -203,18 +203,24 @@ export function getTranslatedError(
   return t(`Notifications.form.errors.${error}`);
 }
 
+// TODO this should be typed
+// some mutations expect purpose others purposePk
+// but because this isn't typed we have to check runtime errors for each mutation
 export function flattenMetadata(
   values:
     | ReservationFormType
     | RecurringReservationForm
     | ReservationChangeFormType,
-  metadataSetFields: Pick<ReservationMetadataFieldNode, "fieldName">[]
+  metadataSetFields: Pick<ReservationMetadataFieldNode, "fieldName">[],
+  shouldRenamePkFields = true
 ) {
   const fieldNames = metadataSetFields.map((f) => f.fieldName).map(camelCase);
   // TODO don't use pick
   const metadataSetValues = pick(values, fieldNames);
 
-  const renamePkFields = ["ageGroup", "homeCity", "purpose"];
+  const renamePkFields = shouldRenamePkFields
+    ? ["ageGroup", "homeCity", "purpose"]
+    : [];
 
   return zipObject(
     Object.keys(metadataSetValues).map((k) =>

apps/admin-ui/src/component/reservations/EditTimeModal.tsx

@@ -230,7 +230,9 @@ function DialogContent({
             ? t(`errors.descriptive.${message}`)
             : t("errors.descriptive.genericError");
           errorToast({
-            text: t("ReservationDialog.saveFailed", { error: translatedError }),
+            text: t("ReservationDialog.saveFailedWithError", {
+              error: translatedError,
+            }),
           });
         } else {
           errorToast({ text: t("ReservationDialog.saveFailed") });

apps/admin-ui/src/i18n/messages.ts

@@ -415,6 +415,9 @@ const translations: ITranslations = {
       reservationsList_one: ["Olet tekemässä yhden varauksen"],
       reservationsList_other: ["Olet tekemässä {{count}} varausta"],
       name: ["Varaussarjan nimi"],
+      newOverlapError: [
+        "Varausta ei pystytty tekemään, koska siinä on uusia päällekkäistä varauksia ({{ count }}). Tarkista lista ja yritä uudelleen.",
+      ],
     },
   },
   Application: {
@@ -1152,7 +1155,8 @@ const translations: ITranslations = {
     // dialog specific
     title: ["Varaa {{reservationUnit}}"],
     accept: ["Varaa"],
-    saveFailed: ["Tallennus ei onnistunut. {{error}}"],
+    saveFailedWithError: ["Tallennus ei onnistunut. {{error}}"],
+    saveFailed: ["Tallennus ei onnistunut."],
     saveSuccess: ["Varaus tehty kohteeseen {{reservationUnit}}"],
   },
   ReservationUnits: {

apps/admin-ui/src/spa/my-units/[id]/CreateReservationModal.tsx

@@ -278,7 +278,7 @@ function DialogContent({
       ? t(`errors.descriptive.${errorMsg}`)
       : t("errors.descriptive.genericError");
     errorToast({
-      text: t("ReservationDialog.saveFailed", {
+      text: t("ReservationDialog.saveFailedWithError", {
         error: translatedError,
       }),
     });

apps/admin-ui/src/spa/my-units/recurring/RecurringReservationDone.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
-import { Container, Button } from "hds-react";
+import { Container } from "hds-react";
 import { ErrorBoundary } from "react-error-boundary";
-import { z } from "zod";
 import { H1, H6 } from "common/src/common/typography";
 import { breakpoints } from "common/src/common/style";
 import { RecurringReservationsView } from "@/component/reservations/requested/RecurringReservationsView";
 import { ActionsWrapper } from "./commonStyling";
-import { ReservationList } from "@/component/ReservationsList";
+import Error404 from "@/common/Error404";
+import { useRecurringReservationQuery } from "@gql/gql-types";
+import { base64encode, filterNonNullable } from "common/src/helpers";
+import { ButtonLikeLink } from "@/component/ButtonLikeLink";
+import { errorToast } from "common/src/common/toast";
 
 const InfoSection = styled.p`
   margin: var(--spacing-l) 0;
@@ -27,96 +30,55 @@ const StyledContainer = styled(Container)`
   }
 `;
 
-const ReservationMadeSchema = z.object({
-  reservationPk: z.number().optional(),
-  startTime: z.string(),
-  endTime: z.string(),
-  date: z.date(),
-  error: z.string().or(z.unknown()).optional(),
-});
-export type ReservationMade = z.infer<typeof ReservationMadeSchema>;
-
-const RecurringReservationDoneParamsSchema = z.object({
-  reservations: z.array(ReservationMadeSchema),
-  recurringPk: z.number(),
-});
-
-function RecurringReservationDoneInner() {
-  const location = useLocation();
+function RecurringReservationDoneInner({
+  recurringPk,
+}: {
+  recurringPk: number;
+}) {
   const { t } = useTranslation("translation", {
     keyPrefix: "MyUnits.RecurringReservation.Confirmation",
   });
-  const navigate = useNavigate();
-
-  const props = RecurringReservationDoneParamsSchema.parse(location.state);
 
-  const handleGoToReservation = (id: number) => {
-    const url = `/reservations/${id}`;
-    navigate(url);
-  };
-
-  const failed = props.reservations
-    .filter(({ error }) => error != null)
-    .map(({ error, ...x }) => ({ ...x, error: String(error) }));
+  const id = base64encode(`RecurringReservationNode:${recurringPk}`);
+  const { data } = useRecurringReservationQuery({
+    skip: !recurringPk,
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-first",
+    variables: { id },
+    onError: () => {
+      errorToast({ text: t("errors.errorFetchingData") });
+    },
+  });
 
-  const successes = props.reservations.filter((x) => x.error == null);
+  const { recurringReservation } = data ?? {};
+  const reservations = filterNonNullable(recurringReservation?.reservations);
 
-  const reservationId = successes.map((x) => x.reservationPk).find(() => true);
+  // TODO use urlbuilder
+  const reservationPk = reservations[0]?.pk;
+  const reservationUrl = reservationPk ? `/reservations/${reservationPk}` : "";
 
-  // TODO holidays not implemented
-  const holidays = 0;
+  const successes = reservations;
 
   return (
     <StyledContainer>
-      <H1 $legacy>{successes.length > 0 ? t(`title`) : t("allFailedTitle")}</H1>
-      <InfoSection>
-        <span>
-          {failed.length === 0
-            ? t(`successInfo`)
-            : t(`failureInfo`, {
-                total: props.reservations.length,
-                conflicts: failed.length,
-              })}
-        </span>
-        {holidays > 0 && (
-          <span>
-            {t(`holidayInfo`, {
-              total: props.reservations.length,
-              holidays: 0,
-            })}
-          </span>
-        )}
-      </InfoSection>
-      {failed.length > 0 && (
-        <InfoSection>{t(`failureInfoSecondParagraph`)}</InfoSection>
-      )}
-      {failed.length > 0 && (
-        <StyledH6 as="h2">
-          {t("failedSubtitle")} ({failed.length})
-        </StyledH6>
-      )}
-      <ReservationList items={failed} hasPadding />
+      <H1 $legacy>
+        {reservations.length > 0 ? t(`title`) : t("allFailedTitle")}
+      </H1>
+      <InfoSection>{t(`successInfo`)}</InfoSection>
       <StyledH6 as="h2">
         {t("successSubtitle")} ({successes.length})
       </StyledH6>
-      <RecurringReservationsView recurringPk={props.recurringPk} />
+      <RecurringReservationsView recurringPk={recurringPk} />
       <ActionsWrapper>
-        <Button
-          variant="secondary"
-          onClick={() => navigate("../..", { relative: "path" })}
-          theme="black"
-        >
+        <ButtonLikeLink to="../../.." relative="path">
           {t(`buttonToUnit`)}
-        </Button>
-        {reservationId != null && (
-          <Button
-            variant="secondary"
-            onClick={() => handleGoToReservation(reservationId)}
-            theme="black"
-          >
-            {t(`buttonToReservation`)}
-          </Button>
-        )}
+        </ButtonLikeLink>
+        <ButtonLikeLink
+          disabled={reservations[0]?.pk == null}
+          to={reservationUrl}
+        >
+          {t(`buttonToReservation`)}
+        </ButtonLikeLink>
       </ActionsWrapper>
     </StyledContainer>
   );
@@ -128,9 +90,17 @@ function ErrorComponent() {
 }
 
 export function RecurringReservationDone() {
+  const { pk } = useParams() as { pk: string };
+  const recurringPk = Number(pk);
+  const isValid = recurringPk > 0;
+
+  if (!isValid) {
+    return <Error404 />;
+  }
+
   return (
     <ErrorBoundary FallbackComponent={ErrorComponent}>
-      <RecurringReservationDoneInner />
+      <RecurringReservationDoneInner recurringPk={recurringPk} />
     </ErrorBoundary>
   );
 }