Merged in fix/SW-2485-hotel-directions-name (pull request #2641)

fix(SW-2485): add name and address to hotel directions

* fix(SW-2485): add name and address to hotel directions

* fix(SW-2485): use name and address instead of coordinates


Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx

@@ -14,16 +14,16 @@ import type { ContactInformationProps } from "@/types/components/hotelPage/sidep
 
 export default async function ContactInformation({
   hotelAddress,
-  coordinates,
   contact,
   socials,
   ecoLabels,
+  hotelName,
 }: ContactInformationProps) {
   const intl = await getIntl()
   const lang = await getLang()
-  const { latitude, longitude } = coordinates
-  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`
-
+  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
+    `${hotelName}, ${hotelAddress.streetAddress}, ${hotelAddress.zipCode} ${hotelAddress.city}`
+  )}`
   return (
     <div className={styles.wrapper}>
       <Typography variant="Title/Subtitle/lg">

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/index.tsx

@@ -13,11 +13,11 @@ import type { AboutTheHotelSidePeekProps } from "@/types/components/hotelPage/si
 
 export default async function AboutTheHotelSidePeek({
   hotelAddress,
-  coordinates,
   contact,
   socials,
   ecoLabels,
   descriptions,
+  hotelName,
 }: AboutTheHotelSidePeekProps) {
   const intl = await getIntl()
 
@@ -34,10 +34,10 @@ export default async function AboutTheHotelSidePeek({
       <section className={styles.wrapper}>
         <ContactInformation
           hotelAddress={hotelAddress}
-          coordinates={coordinates}
           contact={contact}
           socials={socials}
           ecoLabels={ecoLabels}
+          hotelName={hotelName}
         />
         <Divider />
 

apps/scandic-web/components/ContentType/HotelPage/index.tsx

@@ -261,11 +261,11 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
         />
         <AboutTheHotelSidePeek
           hotelAddress={address}
-          coordinates={location}
           contact={contactInformation}
           socials={socialMedia}
           ecoLabels={hotelFacts.ecoLabels}
           descriptions={hotelContent.texts}
+          hotelName={name}
         />
         {pageSections.wellness ? (
           <WellnessAndExerciseSidePeek

apps/scandic-web/components/HotelReservation/Contact/index.tsx

@@ -44,7 +44,9 @@ export default function Contact({ hotel }: ContactProps) {
               })}
             </Body>
             <Link
-              href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
+              href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
+                `${hotel.name}, ${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`
+              )}`}
             >
               <span className={styles.link}>
                 {intl.formatMessage({

apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx

@@ -21,8 +21,9 @@ interface BookingSummaryProps {
 export default function BookingSummary({ hotel }: BookingSummaryProps) {
   const intl = useIntl()
 
-  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`
-
+  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
+    `${hotel.name}, ${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`
+  )}`
   return (
     <div className={styles.bookingSummary}>
       <Typography variant="Title/sm">

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/index.tsx

@@ -13,9 +13,11 @@ import styles from "./notCancelled.module.css"
 
 export default function NotCancelled() {
   const intl = useIntl()
-  const location = useMyStayStore((state) => state.hotel.location)
+  const { hotel } = useMyStayStore((state) => state)
 
-  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${location.latitude},${location.longitude}`
+  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
+    `${hotel.name}, ${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`
+  )}`
   return (
     <>
       <ManageStay />

apps/scandic-web/types/components/hotelPage/sidepeek/aboutTheHotel.ts

@@ -1,16 +1,12 @@
-import type {
-  Hotel,
-  HotelAddress,
-  HotelLocation,
-} from "@scandic-hotels/trpc/types/hotel"
+import type { Hotel, HotelAddress } from "@scandic-hotels/trpc/types/hotel"
 
 export type AboutTheHotelSidePeekProps = {
   hotelAddress: HotelAddress
-  coordinates: HotelLocation
   contact: Hotel["contactInformation"]
   socials: Hotel["socialMedia"]
   ecoLabels: Hotel["hotelFacts"]["ecoLabels"]
   descriptions: Hotel["hotelContent"]["texts"]
+  hotelName: Hotel["name"]
 }
 
 export type ContactInformationProps = Omit<