refactor: separate page queries

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

@@ -5520,6 +5520,51 @@ export type ReserveeBillingFieldsFragment = {
   billingAddressZip?: string | null;
 };
 
+export type MetaFieldsFragment = {
+  applyingForFreeOfCharge?: boolean | null;
+  freeOfChargeReason?: string | null;
+  description?: string | null;
+  numPersons?: number | null;
+  reserveeFirstName?: string | null;
+  reserveeLastName?: string | null;
+  reserveeEmail?: string | null;
+  reserveePhone?: string | null;
+  reserveeType?: CustomerTypeChoice | null;
+  reserveeOrganisationName?: string | null;
+  reserveeId?: string | null;
+  reserveeIsUnregisteredAssociation?: boolean | null;
+  reserveeAddressStreet?: string | null;
+  reserveeAddressCity?: string | null;
+  reserveeAddressZip?: string | null;
+  billingFirstName?: string | null;
+  billingLastName?: string | null;
+  billingPhone?: string | null;
+  billingEmail?: string | null;
+  billingAddressStreet?: string | null;
+  billingAddressCity?: string | null;
+  billingAddressZip?: string | null;
+  ageGroup?: {
+    id: string;
+    pk?: number | null;
+    maximum?: number | null;
+    minimum: number;
+  } | null;
+  purpose?: {
+    id: string;
+    pk?: number | null;
+    nameFi?: string | null;
+    nameEn?: string | null;
+    nameSv?: string | null;
+  } | null;
+  homeCity?: {
+    id: string;
+    pk?: number | null;
+    nameFi?: string | null;
+    nameSv?: string | null;
+    nameEn?: string | null;
+  } | null;
+};
+
 export type TermsOfUseNameFieldsFragment = {
   nameFi?: string | null;
   nameEn?: string | null;
@@ -5990,8 +6035,6 @@ export type UnitQuery = {
       } | null;
     }>;
     location?: {
-      longitude?: string | null;
-      latitude?: string | null;
       id: string;
       addressStreetFi?: string | null;
       addressZip: string;
@@ -8552,6 +8595,65 @@ export type SpaceQuery = {
   } | null;
 };
 
+export const ReserveeNameFieldsFragmentDoc = gql`
+  fragment ReserveeNameFields on ReservationNode {
+    reserveeFirstName
+    reserveeLastName
+    reserveeEmail
+    reserveePhone
+    reserveeType
+    reserveeOrganisationName
+    reserveeId
+  }
+`;
+export const ReserveeBillingFieldsFragmentDoc = gql`
+  fragment ReserveeBillingFields on ReservationNode {
+    reserveeId
+    reserveeIsUnregisteredAssociation
+    reserveeAddressStreet
+    reserveeAddressCity
+    reserveeAddressZip
+    billingFirstName
+    billingLastName
+    billingPhone
+    billingEmail
+    billingAddressStreet
+    billingAddressCity
+    billingAddressZip
+  }
+`;
+export const MetaFieldsFragmentDoc = gql`
+  fragment MetaFields on ReservationNode {
+    ...ReserveeNameFields
+    ...ReserveeBillingFields
+    applyingForFreeOfCharge
+    freeOfChargeReason
+    description
+    numPersons
+    ageGroup {
+      id
+      pk
+      maximum
+      minimum
+    }
+    purpose {
+      id
+      pk
+      nameFi
+      nameEn
+      nameSv
+    }
+    homeCity {
+      id
+      pk
+      nameFi
+      nameSv
+      nameEn
+    }
+  }
+  ${ReserveeNameFieldsFragmentDoc}
+  ${ReserveeBillingFieldsFragmentDoc}
+`;
 export const TermsOfUseNameFieldsFragmentDoc = gql`
   fragment TermsOfUseNameFields on TermsOfUseNode {
     nameFi
@@ -9054,33 +9156,6 @@ export const ReservationsInIntervalFragmentDoc = gql`
     }
   }
 `;
-export const ReserveeNameFieldsFragmentDoc = gql`
-  fragment ReserveeNameFields on ReservationNode {
-    reserveeFirstName
-    reserveeLastName
-    reserveeEmail
-    reserveePhone
-    reserveeType
-    reserveeOrganisationName
-    reserveeId
-  }
-`;
-export const ReserveeBillingFieldsFragmentDoc = gql`
-  fragment ReserveeBillingFields on ReservationNode {
-    reserveeId
-    reserveeIsUnregisteredAssociation
-    reserveeAddressStreet
-    reserveeAddressCity
-    reserveeAddressZip
-    billingFirstName
-    billingLastName
-    billingPhone
-    billingEmail
-    billingAddressStreet
-    billingAddressCity
-    billingAddressZip
-  }
-`;
 export const ReservationMetaFieldsFragmentDoc = gql`
   fragment ReservationMetaFields on ReservationNode {
     ageGroup {
@@ -9530,8 +9605,6 @@ export const UnitDocument = gql`
       }
       location {
         ...LocationFields
-        longitude
-        latitude
       }
     }
   }

apps/admin-ui/src/common/queries.tsx

@@ -43,8 +43,6 @@ export const UNIT_QUERY = gql`
       }
       location {
         ...LocationFields
-        longitude
-        latitude
       }
     }
   }

apps/ui/components/Instructions.tsx

@@ -1,8 +1,9 @@
 import {
+  type InstructionsFragment,
   type Maybe,
-  type ReservationQuery,
   ReservationStateChoice,
 } from "@/gql/gql-types";
+import { gql } from "@apollo/client";
 import { H4 } from "common";
 import {
   convertLanguageCode,
@@ -11,12 +12,28 @@ import {
 import { Sanitize } from "common/src/components/Sanitize";
 import { useTranslation } from "next-i18next";
 
-// TODO replace with a fragment
-type NodeT = NonNullable<ReservationQuery["reservation"]>;
+export const INSTRUCTIOSN_FRAGMENT = gql`
+  fragment Instructions on ReservationNode {
+    id
+    state
+    reservationUnits {
+      id
+      reservationPendingInstructionsFi
+      reservationPendingInstructionsEn
+      reservationPendingInstructionsSv
+      reservationConfirmedInstructionsFi
+      reservationConfirmedInstructionsEn
+      reservationConfirmedInstructionsSv
+      reservationCancelledInstructionsFi
+      reservationCancelledInstructionsEn
+      reservationCancelledInstructionsSv
+    }
+  }
+`;
+
 type Props = {
-  reservation: Pick<NodeT, "reservationUnits" | "state">;
+  reservation: InstructionsFragment;
 };
-
 export function Instructions({ reservation }: Props): JSX.Element | null {
   const { t, i18n } = useTranslation();
 

apps/ui/components/reservation-unit/Address.tsx

@@ -5,7 +5,7 @@ import { fontMedium, H4 } from "common/src/common/typography";
 import type {
   Maybe,
   LocationFieldsI18nFragment,
-  UnitFieldsFragment,
+  AddressFieldsFragment,
 } from "@gql/gql-types";
 import { IconLinkExternal } from "hds-react";
 import { IconButton } from "common/src/components";
@@ -16,6 +16,7 @@ import {
   getTranslationSafe,
 } from "common/src/common/util";
 import { type LocalizationLanguages } from "common/src/helpers";
+import { gql } from "@apollo/client";
 
 const AddressSpan = styled.span`
   font-size: var(--fontsize-body-l);
@@ -39,7 +40,7 @@ type UrlReturn = string;
 
 function createHslUrl(
   locale: LocalizationLanguages,
-  location?: Maybe<LocationFieldsI18nFragment>
+  location: Maybe<LocationFieldsI18nFragment> | undefined
 ): UrlReturn {
   if (!location) {
     return "";
@@ -61,18 +62,14 @@ function createHslUrl(
 
 function createGoogleUrl(
   locale: LocalizationLanguages,
-  location?: Maybe<LocationFieldsI18nFragment>
+  location: Maybe<LocationFieldsI18nFragment> | undefined
 ): UrlReturn {
   if (!location) {
     return "";
   }
 
-  const addressStreet =
-    getTranslationSafe(location, "addressStreet", locale) ||
-    location.addressStreetFi;
-  const addressCity =
-    getTranslationSafe(location, "addressCity", locale) ||
-    location.addressCityFi;
+  const addressStreet = getTranslationSafe(location, "addressStreet", locale);
+  const addressCity = getTranslationSafe(location, "addressCity", locale);
 
   const destination = addressStreet
     ? encodeURI(`${addressStreet},${addressCity}`)
@@ -83,7 +80,7 @@ function createGoogleUrl(
 
 function createMapUrl(
   locale: LocalizationLanguages,
-  unit?: Maybe<Pick<UnitFieldsFragment, "tprekId">>
+  unit: Maybe<Pick<AddressFieldsFragment, "tprekId">> | undefined
 ): string {
   if (!unit?.tprekId) {
     return "";
@@ -94,7 +91,7 @@ function createMapUrl(
 
 function createAccessibilityUrl(
   locale: LocalizationLanguages,
-  unit?: Maybe<Pick<UnitFieldsFragment, "tprekId">>
+  unit: Maybe<Pick<AddressFieldsFragment, "tprekId">> | undefined
 ): UrlReturn {
   if (!unit?.tprekId) {
     return "";
@@ -105,7 +102,7 @@ function createAccessibilityUrl(
 
 type Props = {
   title: string;
-  unit?: Maybe<UnitFieldsFragment> | undefined;
+  unit: Maybe<AddressFieldsFragment> | undefined;
 };
 
 export function AddressSection({ title, unit }: Props): JSX.Element {
@@ -114,12 +111,12 @@ export function AddressSection({ title, unit }: Props): JSX.Element {
   const { location } = unit ?? {};
   const lang = convertLanguageCode(i18n.language);
 
-  const addressStreet =
-    (location && getTranslationSafe(location, "addressStreet", lang)) ||
-    location?.addressStreetFi;
-  const addressCity =
-    (location && getTranslationSafe(location, "addressCity", lang)) ||
-    location?.addressCityFi;
+  const addressStreet = location
+    ? getTranslationSafe(location, "addressStreet", lang)
+    : undefined;
+  const addressCity = location
+    ? getTranslationSafe(location, "addressCity", lang)
+    : undefined;
 
   const unitMapUrl = createMapUrl(lang, unit);
   const googleUrl = createGoogleUrl(lang, location);
@@ -137,24 +134,32 @@ export function AddressSection({ title, unit }: Props): JSX.Element {
         <IconButton
           href={unitMapUrl}
           label={t("reservationUnit:linkMap")}
-          icon={<IconLinkExternal aria-hidden />}
+          icon={<IconLinkExternal aria-hidden="true" />}
         />
         <IconButton
           href={googleUrl}
           label={t("reservationUnit:linkGoogle")}
-          icon={<IconLinkExternal aria-hidden />}
+          icon={<IconLinkExternal aria-hidden="true" />}
         />
         <IconButton
           href={hslUrl}
           label={t("reservationUnit:linkHSL")}
-          icon={<IconLinkExternal aria-hidden />}
+          icon={<IconLinkExternal aria-hidden="true" />}
         />
         <IconButton
           href={accessibilityUrl}
           label={t("reservationUnit:linkAccessibility")}
-          icon={<IconLinkExternal aria-hidden />}
+          icon={<IconLinkExternal aria-hidden="true" />}
         />
       </Links>
     </div>
   );
 }
+
+export const ADDRESS_FIELDS = gql`
+  fragment AddressFields on UnitNode {
+    ...UnitNameFieldsI18N
+    id
+    tprekId
+  }
+`;

apps/ui/components/reservation-unit/ReservationInfoContainer.tsx

@@ -58,14 +58,18 @@ function getStatus(
 export function ReservationInfoContainer({
   reservationUnit,
   reservationUnitIsReservable,
-}: Props): JSX.Element {
+}: Props): JSX.Element | null {
   const { t } = useTranslation();
 
   const isReservable =
     reservationUnitIsReservable &&
     (reservationUnit.reservationsMaxDaysBefore != null ||
       reservationUnit.reservationsMinDaysBefore != null);
 
+  if (!reservationUnitIsReservable) {
+    return null;
+  }
+
   // TODO this should be a list
   return (
     <div data-testid="reservation-unit__reservation-info">

apps/ui/components/reservation/AcceptTerms.tsx

@@ -3,19 +3,16 @@ import TermsBox from "common/src/termsbox/TermsBox";
 import { useTranslation } from "next-i18next";
 import { getTranslation } from "@/modules/util";
 import { Sanitize } from "common/src/components/Sanitize";
-import { type ReservationUnitPageQuery } from "@/gql/gql-types";
+import { type TermsOfUseFragment } from "@/gql/gql-types";
 import { Flex } from "common/styles/util";
 
-type ReservationUnitNodeT = NonNullable<
-  ReservationUnitPageQuery["reservationUnit"]
->;
 export function AcceptTerms({
   reservationUnit,
   isTermsAccepted,
   setIsTermsAccepted,
 }: {
   reservationUnit: Pick<
-    ReservationUnitNodeT,
+    TermsOfUseFragment,
     "cancellationTerms" | "paymentTerms" | "serviceSpecificTerms"
   >;
   isTermsAccepted: { space: boolean; service: boolean };