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);
+}