Merged in feat/SW-826-sidebar-updates (pull request #888)

Feat/SW-826 sidebar updates

Approved-by: Niclas Edenvin

components/HotelReservation/Contact/contact.module.css

@@ -46,3 +46,9 @@
   flex-direction: column;
   justify-content: center;
 }
+
+.googleMaps {
+  text-decoration: none;
+  font-family: var(--typography-Body-Regular-fontFamily);
+  color: var(--Base-Text-Medium-contrast);
+}

components/HotelReservation/Contact/index.tsx

@@ -32,9 +32,13 @@ export default function Contact({ hotel }: ContactProps) {
             <span className={styles.heading}>
               {intl.formatMessage({ id: "Driving directions" })}
             </span>
-            <Link href="#" color="peach80">
+            <a
+              href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
+              className={styles.googleMaps}
+              target="_blank"
+            >
               Google Maps
-            </Link>
+            </a>
           </li>
           <li>
             <span className={styles.heading}>

components/HotelReservation/HotelCard/index.tsx

@@ -108,6 +108,7 @@ export default function HotelCard({
           label={intl.formatMessage({ id: "See hotel details" })}
           hotelId={hotelData.operaId}
           hotel={hotelData}
+          showCTA={true}
         />
       </section>
       <section className={styles.prices}>

components/HotelReservation/ReadMore/index.tsx

@@ -10,12 +10,12 @@ import styles from "./readMore.module.css"
 import { ReadMoreProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 
-export default function ReadMore({ label, hotelId }: ReadMoreProps) {
+export default function ReadMore({ label, hotelId, showCTA }: ReadMoreProps) {
   const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
   return (
     <Button
       onPress={() => {
-        openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })
+        openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId, showCTA })
       }}
       intent="text"
       theme="base"

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -81,6 +81,7 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
                 label={intl.formatMessage({ id: "Show all amenities" })}
                 hotelId={hotelAttributes.operaId}
                 hotel={hotelAttributes}
+                showCTA={false}
               />
             </div>
           </div>

components/HotelReservation/SidePeek/index.tsx

@@ -17,6 +17,7 @@ export default function HotelReservationSidePeek({
   const activeSidePeek = useSidePeekStore((state) => state.activeSidePeek)
   const hotelId = useSidePeekStore((state) => state.hotelId)
   const roomTypeCode = useSidePeekStore((state) => state.roomTypeCode)
+  const showCTA = useSidePeekStore((state) => state.showCTA)
   const close = useSidePeekStore((state) => state.closeSidePeek)
   const lang = useLang()
 
@@ -43,6 +44,7 @@ export default function HotelReservationSidePeek({
             hotel={hotelData.data?.attributes}
             activeSidePeek={activeSidePeek}
             close={close}
+            showCTA={showCTA}
           />
         )}
         {selectedRoom && (

components/SidePeeks/HotelSidePeek/index.tsx

@@ -27,6 +27,7 @@ export default function HotelSidePeek({
   hotel,
   activeSidePeek,
   close,
+  showCTA,
 }: HotelSidePeekProps) {
   const intl = useIntl()
   const amenitiesList = getAmenitiesList(hotel)
@@ -51,9 +52,9 @@ export default function HotelSidePeek({
               ))}
             </AccordionItem>
           ) : null}
-          <AccordionItem title={intl.formatMessage({ id: "Accessibility" })}>
+          <div className={styles.amenity}>
-            TODO: What content should be in the accessibility section?
+            {intl.formatMessage({ id: "Accessibility" })}
-          </AccordionItem>
+          </div>
           {amenitiesList.map((amenity) => {
             return (
               <div key={amenity.id} className={styles.amenity}>
@@ -62,8 +63,10 @@ export default function HotelSidePeek({
             )
           })}
         </Accordion>
-        {/* TODO: handle linking to Hotel Page */}
+        {showCTA && (
-        <Button theme={"base"}>To the hotel</Button>
+          /* TODO: handle linking to Hotel Page */
+          <Button theme={"base"}>To the hotel</Button>
+        )}
       </div>
     </SidePeek>
   )

stores/sidepeek.ts

@@ -6,14 +6,17 @@ interface SidePeekState {
   activeSidePeek: SidePeekEnum | null
   hotelId: string | null
   roomTypeCode: string | null
+  showCTA: boolean
   openSidePeek: ({
     key,
     hotelId,
     roomTypeCode,
+    showCTA,
   }: {
     key: SidePeekEnum | null
     hotelId: string
     roomTypeCode?: string
+    showCTA?: boolean
   }) => void
   closeSidePeek: () => void
 }
@@ -22,8 +25,9 @@ const useSidePeekStore = create<SidePeekState>((set) => ({
   activeSidePeek: null,
   hotelId: null,
   roomTypeCode: null,
-  openSidePeek: ({ key, hotelId, roomTypeCode }) =>
+  showCTA: true,
-    set({ activeSidePeek: key, hotelId, roomTypeCode }),
+  openSidePeek: ({ key, hotelId, roomTypeCode, showCTA }) =>
+    set({ activeSidePeek: key, hotelId, roomTypeCode, showCTA }),
   closeSidePeek: () =>
     set({ activeSidePeek: null, hotelId: null, roomTypeCode: null }),
 }))

types/components/hotelReservation/hotelSidePeek.ts

@@ -5,4 +5,5 @@ export type HotelSidePeekProps = {
   hotel: Hotel
   activeSidePeek: SidePeekEnum
   close: () => void
+  showCTA: boolean
 }

types/components/hotelReservation/selectHotel/selectHotel.ts

@@ -9,6 +9,7 @@ export interface ReadMoreProps {
   label: string
   hotelId: string
   hotel: Hotel
+  showCTA: boolean
 }
 
 export interface ContactProps {