fix(Booking): locations from booking

src/features/booking/api/queries/queries.ts

@@ -20,6 +20,10 @@ export const GET_BOOKING = gql`
       createdAt
       qrUrl
       iCalUrl
+      locations {
+        locationId
+        title
+      }
     }
   }
 `;

src/features/booking/api/subscriptions/booking.ts

@@ -27,6 +27,10 @@ export const BOOKING_SUBSCRIPTION = gql`
         dateTimeFrom
         dateTimeTo
       }
+      locations {
+        locationId
+        title
+      }
     }
   }
 `;

src/features/booking/components/BookingCard/BookingCardBottom/BackToServiceButton.tsx

@@ -5,27 +5,30 @@ import { getPath } from "helpers/functions";
 import { useIsEmbeddedPage } from "helpers/hooks/useIsEmbeddedPage";
 import { useTranslation } from "react-i18next";
 import { createSearchParams, useNavigate } from "react-router-dom";
-import { useRecoilValue } from "recoil";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 import { bookingAtom } from "state/atoms/booking";
+import { serviceAtom } from "state/atoms/service";
 
 const BackToServiceButton = () => {
   const { t } = useTranslation(["booking"]);
   const navigate = useNavigate();
-  const bookingValue = useRecoilValue(bookingAtom);
   const lang = useLangParam();
   const { PAGES } = useIsEmbeddedPage();
+  const setBooking = useSetRecoilState(bookingAtom);
+  const service = useRecoilValue(serviceAtom);
 
-  if (bookingValue === undefined) return null;
+  if (service === undefined) return null;
 
   return (
     <ContextButton
       colorType="primary"
       onClick={() => {
+        setBooking(undefined);
         navigate(
           getPath({
             url: `${PAGES.SERVICE}:query`,
             params: {
-              id: bookingValue.service.serviceId,
+              id: service.serviceId,
               query: lang ? `?${createSearchParams({ locale: lang }).toString()}` : "",
             },
           }),

src/features/service/api/queries/models.ts

@@ -18,6 +18,7 @@ export interface ServiceQueryResult {
   promoPrice: number | null;
   currency: string;
   locations: Array<{
+    locationId: string;
     title: string;
   }>;
   dateTimeTo: string;

src/features/service/api/queries/queries.ts

@@ -18,6 +18,7 @@ export const GET_SERVICE = gql`
       promoPrice
       currency
       locations {
+        locationId
         title
       }
       dateTimeTo

src/features/service/components/Service/ServiceDetails.tsx

@@ -6,9 +6,12 @@ import { Box } from "components/layout/Box";
 import { Column } from "components/layout/Column";
 import { Row } from "components/layout/Row";
 import { SkeletonBox } from "components/layout/SkeletonBox";
+import { Booking } from "models/booking";
+import { Service } from "models/service";
 import ReactMarkdown from "react-markdown";
 import { useRecoilState, useRecoilValue } from "recoil";
 import rehypeRaw from "rehype-raw";
+import { bookingAtom } from "state/atoms/booking";
 import { locationAtom } from "state/atoms/location";
 import { serviceAtom } from "state/atoms/service";
 import styled, { css } from "styled-components";
@@ -91,12 +94,67 @@ const DetailsRow: React.FC<DetailsRowProps> = ({ name, value, icon }) => {
   );
 };
 
+interface LocationDetailsRowProps {
+  booking?: Booking;
+  location?: string;
+  serviceData?: Service;
+  setLocation: (location: string) => void;
+  locationsOptions: Record<string, string>;
+}
+
+const LocationDetailsRow: React.FC<LocationDetailsRowProps> = ({
+  booking,
+  location,
+  serviceData,
+  setLocation,
+  locationsOptions,
+}) => {
+  const hasBookingLocations = booking && booking?.locations?.length;
+  const hasServiceLocations = location && serviceData?.serviceLocations?.length;
+  const hasOneServiceLocation = serviceData?.serviceLocations?.length === 1;
+
+  if (hasBookingLocations) {
+    return <DetailsRow name="Location" value={booking.locations[0].title} icon={<IconMapPin />} />;
+  }
+
+  if (hasServiceLocations) {
+    if (hasOneServiceLocation) {
+      return (
+        <DetailsRow
+          name="Location"
+          value={serviceData === undefined ? null : serviceData.serviceLocations[0].title}
+          icon={<IconMapPin />}
+        />
+      );
+    }
+
+    return (
+      <StyledDetailsRowSelect>
+        <IconWrapper>
+          <IconMapPin />
+        </IconWrapper>
+        <StyledContextSelect
+          label={""}
+          value={location}
+          options={locationsOptions}
+          onChange={(value) => {
+            setLocation(value as string);
+          }}
+        />
+      </StyledDetailsRowSelect>
+    );
+  }
+
+  return null;
+};
+
 const ServiceDetails = () => {
   const serviceData = useRecoilValue(serviceAtom);
   const [location, setLocation] = useRecoilState(locationAtom);
+  const booking = useRecoilValue(bookingAtom);
 
   useEffect(() => {
-    setLocation(serviceData?.locations[0] ?? "");
+    setLocation(serviceData?.serviceLocations[0]?.locationId ?? "");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [serviceData]);
 
@@ -124,8 +182,8 @@ const ServiceDetails = () => {
     );
 
   const locationsOptions =
-    serviceData?.locations.reduce((acc, location) => {
-      acc[location] = location;
+    serviceData?.serviceLocations.reduce((acc, { title, locationId }) => {
+      acc[locationId] = title;
       return acc;
     }, {} as Record<string, string>) ?? {};
 
@@ -145,29 +203,13 @@ const ServiceDetails = () => {
             icon={<IconCreditCard />}
           />
         )}
-        {location && serviceData?.locations?.length ? (
-          serviceData?.locations?.length === 1 ? (
-            <DetailsRow
-              name="Location"
-              value={serviceData === undefined ? null : serviceData.locations[0]}
-              icon={<IconMapPin />}
-            />
-          ) : (
-            <StyledDetailsRowSelect>
-              <IconWrapper>
-                <IconMapPin />
-              </IconWrapper>
-              <StyledContextSelect
-                label={""}
-                value={location}
-                options={locationsOptions}
-                onChange={(value) => {
-                  setLocation(value as string);
-                }}
-              />
-            </StyledDetailsRowSelect>
-          )
-        ) : null}
+        <LocationDetailsRow
+          booking={booking}
+          location={location}
+          serviceData={serviceData}
+          setLocation={setLocation}
+          locationsOptions={locationsOptions}
+        />
         {serviceData?.hostedBy && serviceData?.hostedBy !== "-" && (
           <DetailsRow
             name="Hosted by"

src/features/service/hooks/useService.ts

@@ -138,6 +138,7 @@ export const useServiceState = (serviceId: string, lang: string | null) => {
         promoPrice: service.promoPrice,
         currency: service.currency,
         locations: (service.locations ?? [{ title: "" }]).map((item) => item.title),
+        serviceLocations: service.locations,
         hostedBy:
           service.hosts.length > 1
             ? `${service.hosts[0].fullName} +${service.hosts.length - 1}`

src/models/booking.ts

@@ -45,4 +45,5 @@ export interface Booking {
     dateTimeFrom: string;
     dateTimeTo: string;
   }> | null;
+  locations: Array<{ locationId: string; title: string }>;
 }

src/models/service.ts

@@ -83,6 +83,7 @@ export interface Service {
   promoPrice: number | null;
   currency: string;
   locations: Array<string>;
+  serviceLocations: Array<{ locationId: string; title: string }>;
   hostedBy: string;
   dateTimeTo: string;
   dateTimeFrom: string;