Merged in chore/apply-lint-fix (pull request #3312)

chore: Apply lint:fix on booking-flow

* run lint:fix


Approved-by: Bianca Widstam

packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx

@@ -57,7 +57,7 @@ export function Header({
   return (
     <header className={styles.header}>
       <hgroup className={styles.hgroup}>
-        <Typography variant={"Title/md"}>
+        <Typography variant="Title/md">
           <h2 className={styles.confirmTitle}>
             {intl.formatMessage({
               id: "bookingConfirmation.title",
@@ -65,7 +65,7 @@ export function Header({
             })}
           </h2>
         </Typography>
-        <Typography variant={"Title/md"}>
+        <Typography variant="Title/md">
           <h2 className={styles.hotelTitle}>{hotel.name}</h2>
         </Typography>
       </hgroup>

packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/index.tsx

@@ -18,7 +18,7 @@ export function HotelDetails({
   return (
     <div className={styles.container}>
       <div className={styles.details}>
-        <Typography variant={"Title/Subtitle/md"}>
+        <Typography variant="Title/Subtitle/md">
           <h3>
             {intl.formatMessage({
               id: "bookingConfirmation.hotelDetails",
@@ -26,7 +26,7 @@ export function HotelDetails({
             })}
           </h3>
         </Typography>
-        <Typography variant={"Body/Paragraph/mdRegular"}>
+        <Typography variant="Body/Paragraph/mdRegular">
           <div className={styles.hotel}>
             <p>{hotel.name}</p>
             <p>
@@ -58,7 +58,7 @@ export function HotelDetails({
           className={styles.link}
           color="Text/Interactive/Secondary"
           href={`mailto:${hotel.contactInformation.email}`}
-          textDecoration={"underline"}
+          textDecoration="underline"
         >
           {hotel.contactInformation.email}
         </Link>
@@ -66,7 +66,7 @@ export function HotelDetails({
           className={styles.link}
           color="Text/Interactive/Secondary"
           href={hotel.contactInformation.websiteUrl}
-          textDecoration={"underline"}
+          textDecoration="underline"
         >
           {hotel.contactInformation.websiteUrl}
         </Link>

packages/booking-flow/lib/components/BookingConfirmation/PaymentDetails/index.tsx

@@ -22,7 +22,7 @@ export function PaymentDetails() {
   const hasAllRoomsLoaded = rooms.every((room) => room)
   return (
     <div className={styles.details}>
-      <Typography variant={"Title/Subtitle/md"}>
+      <Typography variant="Title/Subtitle/md">
         <h2>
           {intl.formatMessage({
             id: "bookingConfirmation.paymentDetails",
@@ -32,7 +32,7 @@ export function PaymentDetails() {
       </Typography>
       <div className={styles.payment}>
         {hasAllRoomsLoaded ? (
-          <Typography variant={"Body/Paragraph/mdRegular"}>
+          <Typography variant="Body/Paragraph/mdRegular">
             <p>
               {intl.formatMessage(
                 {
@@ -46,7 +46,7 @@ export function PaymentDetails() {
             </p>
           </Typography>
         ) : (
-          <SkeletonShimmer width={"100%"} />
+          <SkeletonShimmer width="100%" />
         )}
       </div>
     </div>

packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/index.tsx

@@ -20,13 +20,13 @@ export function Promo({ buttonText, href, text, title }: PromoProps) {
   return (
     <Link className={styles.link} color="none" href={href}>
       <article className={styles.promo}>
-        <Typography variant={"Title/smLowCase"}>
+        <Typography variant="Title/smLowCase">
           <h4>{title}</h4>
         </Typography>
-        <Typography variant={"Body/Paragraph/mdRegular"}>
+        <Typography variant="Body/Paragraph/mdRegular">
           <p className={styles.text}>{text}</p>
         </Typography>
-        <Button size="Small" variant={"Secondary"} color={"Inverted"} wrapping>
+        <Button size="Small" variant="Secondary" color="Inverted" wrapping>
           <div>{buttonText}</div>
         </Button>
       </article>

packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/RoomSkeletonLoader.tsx

@@ -6,9 +6,9 @@ export default function RoomSkeletonLoader() {
   return (
     <div className={styles.room}>
       <SkeletonShimmer />
-      <SkeletonShimmer width={"15%"} />
-      <SkeletonShimmer width={"30%"} />
-      <SkeletonShimmer width={"40%"} />
+      <SkeletonShimmer width="15%" />
+      <SkeletonShimmer width="30%" />
+      <SkeletonShimmer width="40%" />
       <SkeletonShimmer />
       <SkeletonShimmer />
       <SkeletonShimmer />

packages/booking-flow/lib/components/BookingConfirmation/Receipt/TotalPrice/index.tsx

@@ -62,7 +62,7 @@ export default function TotalPrice() {
                 </span>
               </Typography>
             ) : (
-              <SkeletonShimmer width={"25%"} />
+              <SkeletonShimmer width="25%" />
             )}
           </div>
         </div>
@@ -71,7 +71,7 @@ export default function TotalPrice() {
         {hasAllRoomsLoaded ? (
           <PriceDetails />
         ) : (
-          <SkeletonShimmer width={"100%"} />
+          <SkeletonShimmer width="100%" />
         )}
       </div>
     </>

packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/LinkedReservationCardSkeleton.tsx

@@ -7,24 +7,24 @@ export function LinkedReservationCardSkeleton() {
     <div className={styles.card}>
       <div className={styles.content}>
         <div className={styles.img}>
-          <SkeletonShimmer height={"204px"} width={"100%"} />
+          <SkeletonShimmer height="204px" width="100%" />
         </div>
         <div className={styles.roomDetails}>
           <div className={styles.roomName}>
-            <SkeletonShimmer height={"24px"} width={"130px"} />
-            <SkeletonShimmer height={"20px"} width={"140px"} />
+            <SkeletonShimmer height="24px" width="130px" />
+            <SkeletonShimmer height="20px" width="140px" />
           </div>
           <div className={styles.details}>
-            <SkeletonShimmer height={"20px"} width={"300px"} />
-            <SkeletonShimmer height={"20px"} width={"300px"} />
-            <SkeletonShimmer height={"20px"} width={"300px"} />
-            <SkeletonShimmer height={"20px"} width={"300px"} />
+            <SkeletonShimmer height="20px" width="300px" />
+            <SkeletonShimmer height="20px" width="300px" />
+            <SkeletonShimmer height="20px" width="300px" />
+            <SkeletonShimmer height="20px" width="300px" />
           </div>
           <div className={styles.guest}>
-            <SkeletonShimmer height={"20px"} width={"100px"} />
-            <SkeletonShimmer height={"20px"} width={"200px"} />
-            <SkeletonShimmer height={"20px"} width={"150px"} />
-            <SkeletonShimmer height={"20px"} width={"300px"} />
+            <SkeletonShimmer height="20px" width="100px" />
+            <SkeletonShimmer height="20px" width="200px" />
+            <SkeletonShimmer height="20px" width="150px" />
+            <SkeletonShimmer height="20px" width="300px" />
           </div>
         </div>
       </div>

packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx

@@ -15,7 +15,7 @@ export default function Retry({ handleRefetch }: RetryProps) {
   const intl = useIntl()
   return (
     <div className={styles.retry}>
-      <Typography variant={"Body/Paragraph/mdRegular"}>
+      <Typography variant="Body/Paragraph/mdRegular">
         <p>
           {intl.formatMessage({
             id: "errorMessage.somethingWentWrong",
@@ -24,7 +24,7 @@ export default function Retry({ handleRefetch }: RetryProps) {
         </p>
       </Typography>
 
-      <Button size={"Small"} onPress={handleRefetch}>
+      <Button size="Small" onPress={handleRefetch}>
         {intl.formatMessage({
           id: "bookingConfirmation.linkedReservation.tryAgain",
           defaultMessage: "Try again",