feat(SW-644): add book parking button

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/types/components/hotelPage/sidepeek/parking"
 
 export default async function ParkingPrices({
-  data,
+  pricing,
   currency,
   freeParking,
 }: ParkingPricesProps) {
@@ -31,7 +31,7 @@ export default async function ParkingPrices({
     }
   }
 
-  const filteredPeriods = data?.filter((filter) => filter.period !== "Hour")
+  const filteredPeriods = pricing?.filter((filter) => filter.period !== "Hour")
 
   return (
     <div className={styles.wrapper}>

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx

@@ -1,5 +1,8 @@
+import { ExternalLinkIcon } from "@/components/Icons"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
@@ -12,7 +15,10 @@ import styles from "./parkingAmenity.module.css"
 import type { ParkingAmenityProps } from "@/types/components/hotelPage/sidepeek/parking"
 import { IconName } from "@/types/components/icon"
 
-export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
+export default async function ParkingAmenity({
+  parking,
+  contentPageLink,
+}: ParkingAmenityProps) {
   const intl = await getIntl()
 
   return (
@@ -43,7 +49,7 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
                 </Caption>
                 <Divider color="baseSurfaceSubtleHover" />
                 <ParkingPrices
-                  data={data.pricing.localCurrency.ordinary}
+                  pricing={data.pricing.localCurrency.ordinary}
                   currency={data.pricing.localCurrency.currency}
                   freeParking={data.pricing.freeParking}
                 />
@@ -54,15 +60,40 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
                 </Caption>
                 <Divider color="baseSurfaceSubtleHover" />
                 <ParkingPrices
-                  data={data.pricing.localCurrency.weekend}
+                  pricing={data.pricing.localCurrency.weekend}
                   currency={data.pricing.localCurrency.currency}
                   freeParking={data.pricing.freeParking}
                 />
               </div>
             </div>
+            {data.externalParkingUrl && (
+              <Button theme="base" intent="primary" asChild>
+                <Link
+                  href={data.externalParkingUrl}
+                  color="white"
+                  weight="bold"
+                  target="_blank"
+                >
+                  {intl.formatMessage({ id: "Book parking" })}
+                  <ExternalLinkIcon color="white" />
+                </Link>
+              </Button>
+            )}
           </div>
         ))}
       </div>
+      {contentPageLink && (
+        <Button
+          className={styles.contentPageLink}
+          theme="base"
+          intent="secondary"
+          asChild
+        >
+          <Link href={contentPageLink} color="burgundy" weight="bold">
+            {intl.formatMessage({ id: "About parking" })}
+          </Link>
+        </Button>
+      )}
     </AccordionItem>
   )
 }

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css

@@ -1,9 +1,9 @@
-.wrapper {
+.wrapper,
+.information {
   display: grid;
   gap: var(--Spacing-x3);
 }
 
-.information,
 .list,
 .prices {
   display: grid;
@@ -18,3 +18,7 @@
   display: grid;
   gap: var(--Spacing-x1);
 }
+
+.contentPageLink {
+  margin-top: var(--Spacing-x2);
+}

components/Icons/ExternalLink.tsx

@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ExternalLinkIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M5.59998 20.775C5.08434 20.775 4.64293 20.5914 4.27575 20.2242C3.90857 19.857 3.72498 19.4156 3.72498 18.9V5.09998C3.72498 4.58434 3.90857 4.14293 4.27575 3.77575C4.64293 3.40857 5.08434 3.22498 5.59998 3.22498H11.4875C11.7458 3.22498 11.9666 3.31664 12.15 3.49998C12.3333 3.68331 12.425 3.90414 12.425 4.16248C12.425 4.42081 12.3333 4.64164 12.15 4.82498C11.9666 5.00831 11.7458 5.09998 11.4875 5.09998H5.59998V18.9H19.4V13.0125C19.4 12.7541 19.4916 12.5333 19.675 12.35C19.8583 12.1666 20.0791 12.075 20.3375 12.075C20.5958 12.075 20.8166 12.1666 21 12.35C21.1833 12.5333 21.275 12.7541 21.275 13.0125V18.9C21.275 19.4156 21.0914 19.857 20.7242 20.2242C20.357 20.5914 19.9156 20.775 19.4 20.775H5.59998ZM19.4 6.41248L10.8875 14.925C10.7125 15.1 10.4979 15.1875 10.2437 15.1875C9.98956 15.1875 9.77081 15.0958 9.58748 14.9125C9.40414 14.7291 9.31248 14.5104 9.31248 14.2562C9.31248 14.0021 9.40311 13.7843 9.58438 13.6031L18.0875 5.09998H15.2375C14.9791 5.09998 14.7583 5.00831 14.575 4.82498C14.3916 4.64164 14.3 4.42081 14.3 4.16248C14.3 3.90414 14.3916 3.68331 14.575 3.49998C14.7583 3.31664 14.9791 3.22498 15.2375 3.22498H21.275V9.26248C21.275 9.52081 21.1833 9.74164 21 9.92498C20.8166 10.1083 20.5958 10.2 20.3375 10.2C20.0791 10.2 19.8583 10.1083 19.675 9.92498C19.4916 9.74164 19.4 9.52081 19.4 9.26248V6.41248Z"
+        fill="white"
+      />
+    </svg>
+  )
+}

components/Icons/get-icon-by-icon-name.ts

@@ -36,6 +36,7 @@ import {
   ElectricBikeIcon,
   ElectricCarIcon,
   EmailIcon,
+  ExternalLinkIcon,
   EyeHideIcon,
   EyeShowIcon,
   FacebookIcon,
@@ -176,6 +177,8 @@ export function getIconByIconName(
       return ElectricCarIcon
     case IconName.Email:
       return EmailIcon
+    case IconName.ExternalLink:
+      return ExternalLinkIcon
     case IconName.EyeHide:
       return EyeHideIcon
     case IconName.EyeShow:

components/Icons/index.tsx

@@ -61,6 +61,7 @@ export { default as ElectricBikeIcon } from "./ElectricBike"
 export { default as ElectricCarIcon } from "./ElectricCar"
 export { default as EmailIcon } from "./Email"
 export { default as ErrorCircleIcon } from "./ErrorCircle"
+export { default as ExternalLinkIcon } from "./ExternalLink"
 export { default as EyeHideIcon } from "./EyeHide"
 export { default as EyeShowIcon } from "./EyeShow"
 export { default as FacebookIcon } from "./Facebook"

i18n/dictionaries/da.json

@@ -8,6 +8,7 @@
   "ALLG": "Allergi",
   "About accessibility": "Om tilgængelighed",
   "About meetings & conferences": "About meetings & conferences",
+  "About parking": "Om parkering",
   "About the hotel": "Om hotellet",
   "Accept new price": "Accepter ny pris",
   "Accessibility": "Tilgængelighed",
@@ -47,6 +48,7 @@
   "Bed type": "Seng type",
   "Birth date": "Fødselsdato",
   "Book": "Book",
+  "Book parking": "Book parkering",
   "Book reward night": "Book bonusnat",
   "Booking number": "Bookingnummer",
   "Breakfast": "Morgenmad",

i18n/dictionaries/de.json

@@ -8,6 +8,7 @@
   "ALLG": "Allergie",
   "About accessibility": "Über Barrierefreiheit",
   "About meetings & conferences": "About meetings & conferences",
+  "About parking": "Über das Parken",
   "About the hotel": "Über das Hotel",
   "Accept new price": "Neuen Preis akzeptieren",
   "Accessibility": "Zugänglichkeit",
@@ -47,6 +48,7 @@
   "Bed type": "Bettentyp",
   "Birth date": "Geburtsdatum",
   "Book": "Buchen",
+  "Book parking": "Parkplatz buchen",
   "Book reward night": "Bonusnacht buchen",
   "Booking number": "Buchungsnummer",
   "Breakfast": "Frühstück",

i18n/dictionaries/en.json

@@ -8,6 +8,7 @@
   "ALLG": "Allergy",
   "About accessibility": "About accessibility",
   "About meetings & conferences": "About meetings & conferences",
+  "About parking": "About parking",
   "About the hotel": "About the hotel",
   "Accept new price": "Accept new price",
   "Accessibility": "Accessibility",
@@ -49,6 +50,7 @@
   "Birth date": "Birth date",
   "Book": "Book",
   "Book another stay": "Book another stay",
+  "Book parking": "Book parking",
   "Book reward night": "Book reward night",
   "Book your next stay": "Book your next stay",
   "Booking": "Booking",

i18n/dictionaries/fi.json

@@ -8,6 +8,7 @@
   "ALLG": "Allergia",
   "About accessibility": "Tietoja saavutettavuudesta",
   "About meetings & conferences": "About meetings & conferences",
+  "About parking": "Tietoja pysäköinnistä",
   "About the hotel": "Tietoja hotellista",
   "Accept new price": "Hyväksy uusi hinta",
   "Accessibility": "Saavutettavuus",
@@ -47,6 +48,7 @@
   "Bed type": "Vuodetyyppi",
   "Birth date": "Syntymäaika",
   "Book": "Varaa",
+  "Book parking": "Varaa pysäköinti",
   "Book reward night": "Kirjapalkinto-ilta",
   "Booking number": "Varausnumero",
   "Breakfast": "Aamiainen",

i18n/dictionaries/no.json

@@ -8,6 +8,7 @@
   "ALLG": "Allergi",
   "About accessibility": "Om tilgjengelighet",
   "About meetings & conferences": "About meetings & conferences",
+  "About parking": "Om parkering",
   "About the hotel": "Om hotellet",
   "Accept new price": "Aksepterer ny pris",
   "Accessibility": "Tilgjengelighet",
@@ -47,6 +48,7 @@
   "Bed type": "Seng type",
   "Birth date": "Fødselsdato",
   "Book": "Bestill",
+  "Book parking": "Bestill parkering",
   "Book reward night": "Bestill belønningskveld",
   "Booking number": "Bestillingsnummer",
   "Breakfast": "Frokost",

i18n/dictionaries/sv.json

@@ -8,6 +8,7 @@
   "ALLG": "Allergi",
   "About accessibility": "Om tillgänglighet",
   "About meetings & conferences": "About meetings & conferences",
+  "About parking": "Om parkering",
   "About the hotel": "Om hotellet",
   "Accept new price": "Accepter ny pris",
   "Accessibility": "Tillgänglighet",
@@ -47,6 +48,7 @@
   "Bed type": "Sängtyp",
   "Birth date": "Födelsedatum",
   "Book": "Boka",
+  "Book parking": "Boka parkering",
   "Book reward night": "Boka frinatt",
   "Booking number": "Bokningsnummer",
   "Breakfast": "Frukost",

server/routers/hotels/output.ts

@@ -298,6 +298,7 @@ export const parkingSchema = z.object({
   numberOfChargingSpaces: z.number().optional(),
   distanceToHotel: z.number().optional(),
   canMakeReservation: z.boolean(),
+  externalParkingUrl: z.string().optional(),
   pricing: parkingPricingSchema,
 })
 

types/components/hotelPage/sidepeek/parking.ts

@@ -8,6 +8,7 @@ export enum Periods {
 
 export type ParkingAmenityProps = {
   parking: Hotel["parking"]
+  contentPageLink?: string
 }
 
 export type ParkingListProps = {
@@ -19,7 +20,7 @@ export type ParkingListProps = {
 }
 
 export type ParkingPricesProps = {
-  data: Hotel["parking"][number]["pricing"]["localCurrency"]["ordinary"]
+  pricing: Hotel["parking"][number]["pricing"]["localCurrency"]["ordinary"]
   currency: Hotel["parking"][number]["pricing"]["localCurrency"]["currency"]
   freeParking: Hotel["parking"][number]["pricing"]["freeParking"]
 }

types/components/icon.ts

@@ -42,6 +42,7 @@ export enum IconName {
   ElectricBike = "ElectricBike",
   ElectricCar = "ElectricCar",
   Email = "Email",
+  ExternalLink = "ExternalLink",
   EyeHide = "EyeHide",
   EyeShow = "EyeShow",
   Facebook = "Facebook",