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="15%" />
-      <SkeletonShimmer width={"30%"} />
+      <SkeletonShimmer width="30%" />
-      <SkeletonShimmer width={"40%"} />
+      <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="24px" width="130px" />
-            <SkeletonShimmer height={"20px"} width={"140px"} />
+            <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="100px" />
-            <SkeletonShimmer height={"20px"} width={"200px"} />
+            <SkeletonShimmer height="20px" width="200px" />
-            <SkeletonShimmer height={"20px"} width={"150px"} />
+            <SkeletonShimmer height="20px" width="150px" />
-            <SkeletonShimmer height={"20px"} width={"300px"} />
+            <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",

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx

@@ -194,7 +194,7 @@ export default function BookingCode() {
             >
               <Switch name="bookingCode.remember" className="mobile-switch">
                 <Typography
-                  variant={"Body/Supporting text (caption)/smRegular"}
+                  variant="Body/Supporting text (caption)/smRegular"
                 >
                   <span>
                     {intl.formatMessage({
@@ -232,7 +232,7 @@ function CodeRulesModal() {
   return (
     <Modal
       trigger={
-        <IconButton theme={"Black"} wrapping>
+        <IconButton theme="Black" wrapping>
           <MaterialIcon
             icon="info"
             color="Icon/Interactive/Placeholder"
@@ -242,7 +242,7 @@ function CodeRulesModal() {
       }
       title={codeVoucher}
     >
-      <Typography variant={"Body/Paragraph/mdRegular"}>
+      <Typography variant="Body/Paragraph/mdRegular">
         <p className={styles.bookingCodeTooltip}>{bookingCodeTooltipText}</p>
       </Typography>
     </Modal>
@@ -255,7 +255,7 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
   return (
     <>
       <Checkbox name="bookingCode.remember">
-        <Typography variant={"Body/Supporting text (caption)/smRegular"}>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
           <span>
             {intl.formatMessage({
               id: "bookingWidget.bookingCode.remember",
@@ -362,7 +362,7 @@ function TabletBookingCode({
   return (
     <div className={styles.container}>
       <DialogTrigger isOpen={isOpen} onOpenChange={toggleModal}>
-        <Button type="button" variant={"Text"}>
+        <Button type="button" variant="Text">
           {/* For some reason Checkbox click triggers twice modal state change, which returns the modal back to old state. So we are using overlay as trigger for modal */}
           <div className={styles.overlayTrigger}></div>
           <Checkbox
@@ -375,7 +375,7 @@ function TabletBookingCode({
               },
             })}
           >
-            <Typography variant={"Body/Supporting text (caption)/smBold"}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
               <span className={styles.colorSecondary}>{codeVoucher}</span>
             </Typography>
           </Checkbox>

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RemoveExtraRooms/RemoveExtraRooms.tsx

@@ -25,7 +25,7 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
       type="button"
       onClick={removeExtraRooms}
       size="Small"
-      variant={"Secondary"}
+      variant="Secondary"
       {...props}
     >
       {intl.formatMessage({

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx

@@ -94,14 +94,14 @@ export default function RewardNight() {
       >
         <div className={styles.rewardNightLabel}>
           <Typography
-            variant={"Body/Supporting text (caption)/smRegular"}
+            variant="Body/Supporting text (caption)/smRegular"
             className={styles.label}
           >
             <span>{reward}</span>
           </Typography>
           <Modal
             trigger={
-              <IconButton theme={"Black"} wrapping>
+              <IconButton theme="Black" wrapping>
                 <MaterialIcon
                   icon="info"
                   size={20}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/index.tsx

@@ -49,11 +49,11 @@ export function ListItemSkeleton() {
   return (
     <li className={classNames}>
       <div style={{ marginBottom: "0.25rem" }}>
-        <SkeletonShimmer width={"200px"} height="18px" display="block" />
+        <SkeletonShimmer width="200px" height="18px" display="block" />
       </div>
 
       <div>
-        <SkeletonShimmer width={"70px"} height="18px" display="block" />
+        <SkeletonShimmer width="70px" height="18px" display="block" />
       </div>
     </li>
   )

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx

@@ -259,7 +259,7 @@ export function SearchSkeleton() {
         </Typography>
       </div>
       <div>
-        <SkeletonShimmer width={"100%"} display="block" height="16px" />
+        <SkeletonShimmer width="100%" display="block" height="16px" />
       </div>
     </div>
   )

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx

@@ -141,8 +141,8 @@ export default function FormContent({
         <Button
           className={styles.button}
           form={formId}
-          variant={"Primary"}
+          variant="Primary"
-          size={"Medium"}
+          size="Medium"
           type="submit"
           isDisabled={isSearching}
         >
@@ -226,8 +226,8 @@ export function BookingWidgetFormContentSkeleton() {
       <div className={cx(styles.buttonContainer, styles.hideOnTablet)}>
         <Button
           className={styles.button}
-          variant={"Primary"}
+          variant="Primary"
-          size={"Medium"}
+          size="Medium"
           type="submit"
           isDisabled
         >

packages/booking-flow/lib/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidgetClient.tsx

@@ -56,7 +56,7 @@ export function FloatingBookingWidgetClient(props: Props) {
       ref={containerRef}
     >
       <div className={styles.floatingBackground}>
-        <BookingWidgetClient {...props} type={"compact"} />
+        <BookingWidgetClient {...props} type="compact" />
       </div>
     </div>
   )

packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/index.tsx

@@ -106,7 +106,7 @@ export default function MobileToggleButton({
       {!locationAndDateIsSet && (
         <>
           <span className={styles.block}>
-            <Typography variant={"Body/Supporting text (caption)/smBold"}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
               <span className={styles.blockLabel}>
                 {intl.formatMessage({
                   id: "bookingWidget.label.whereTo",
@@ -114,7 +114,7 @@ export default function MobileToggleButton({
                 })}
               </span>
             </Typography>
-            <Typography variant={"Body/Paragraph/mdRegular"}>
+            <Typography variant="Body/Paragraph/mdRegular">
               <span className={styles.placeholder}>
                 {searchTerm
                   ? searchTerm
@@ -128,10 +128,10 @@ export default function MobileToggleButton({
           {/* Button can't contain HR elements */}
           <Divider color="Border/Divider/Subtle" variant="vertical" />
           <span className={styles.block}>
-            <Typography variant={"Body/Supporting text (caption)/smBold"}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
               <span className={styles.blockLabel}>{totalNightsMsg}</span>
             </Typography>
-            <Typography variant={"Body/Paragraph/mdRegular"}>
+            <Typography variant="Body/Paragraph/mdRegular">
               <span className={styles.placeholder}>
                 {intl.formatMessage(
                   {
@@ -155,10 +155,10 @@ export default function MobileToggleButton({
       {locationAndDateIsSet && (
         <>
           <span className={styles.block}>
-            <Typography variant={"Body/Supporting text (caption)/smBold"}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
               <span className={styles.blockLabel}>{selectedSearchTerm}</span>
             </Typography>
-            <Typography variant={"Body/Supporting text (caption)/smRegular"}>
+            <Typography variant="Body/Supporting text (caption)/smRegular">
               <span className={styles.locationAndDate}>
                 {intl.formatMessage(
                   {
@@ -191,7 +191,7 @@ export function MobileToggleButtonSkeleton() {
   return (
     <div className={cx(styles.mobileToggleButton, styles.partial)}>
       <span className={styles.block}>
-        <Typography variant={"Body/Supporting text (caption)/smBold"}>
+        <Typography variant="Body/Supporting text (caption)/smBold">
           <span className={styles.blockLabel}>
             {intl.formatMessage({
               id: "bookingWidget.label.whereTo",
@@ -199,7 +199,7 @@ export function MobileToggleButtonSkeleton() {
             })}
           </span>
         </Typography>
-        <SkeletonShimmer display={"block"} height="20px" width="11ch" />
+        <SkeletonShimmer display="block" height="20px" width="11ch" />
       </span>
       <Divider color="Border/Divider/Subtle" variant="vertical" />
       <span className={styles.block}>
@@ -215,7 +215,7 @@ export function MobileToggleButtonSkeleton() {
             )}
           </span>
         </Typography>
-        <SkeletonShimmer display={"block"} height="20px" width="13ch" />
+        <SkeletonShimmer display="block" height="20px" width="13ch" />
       </span>
       <span className={styles.icon}>
         <MaterialIcon icon="search" color="Icon/Inverted" />

packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx

@@ -56,7 +56,7 @@ export default function MemberPriceModal() {
       <div className={styles.modalContent}>
         <div className={styles.innerModalContent}>
           <MagicWandIcon width="265px" />
-          <Typography variant={"Title/smLowCase"}>
+          <Typography variant="Title/smLowCase">
             <h3 className={styles.title}>
               {intl.formatMessage({
                 id: "enterDetails.memberPriceModal.title",

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

@@ -66,7 +66,7 @@ export default function HotelHeader({
               id: "destination.seeHotelDetails",
               defaultMessage: "See hotel details",
             })}
-            buttonVariant={"secondary"}
+            buttonVariant="secondary"
           />
         </div>
       </div>

packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx

@@ -248,7 +248,7 @@ export default function SummaryUI({
       {showSignupPromo && roomOneMemberPrice && !isUserLoggedIn ? (
         <SignupPromoDesktop
           memberPrice={roomOneMemberPrice}
-          badgeContent={"✌️"}
+          badgeContent="✌️"
           isEnterDetailsPage
         />
       ) : null}

packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.tsx

@@ -7,13 +7,13 @@ export function RoomCardSkeleton() {
     <article className={styles.card}>
       {/* image container */}
       <div className={styles.imageContainer}>
-        <SkeletonShimmer width={"100%"} height="100%" />
+        <SkeletonShimmer width="100%" height="100%" />
       </div>
 
       <div className={styles.priceVariants}>
         {/* price variants */}
         {Array.from({ length: 3 }).map((_, index) => (
-          <SkeletonShimmer key={index} height={"100px"} />
+          <SkeletonShimmer key={index} height="100px" />
         ))}
       </div>
     </article>

packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapSkeleton.tsx

@@ -21,7 +21,7 @@ export function SelectHotelMapSkeleton({ count = 2 }: Props) {
         </div>
       </div>
       <div className={styles.mapContainer}>
-        <SkeletonShimmer width={"100%"} height="100%" />
+        <SkeletonShimmer width="100%" height="100%" />
       </div>
     </div>
   )

packages/booking-flow/lib/components/SelectHotel/SelectHotelSkeleton.tsx

@@ -14,10 +14,10 @@ export function SelectHotelSkeleton({ count = 4 }: Props) {
         <div className={styles.headerContent}>
           <div className={styles.title}>
             <div className={styles.cityInformation}>
-              <SkeletonShimmer height={"25px"} width={"200px"} />
+              <SkeletonShimmer height="25px" width="200px" />
             </div>
             <div className={styles.sorter}>
-              <SkeletonShimmer height={"60px"} width={"100%"} />
+              <SkeletonShimmer height="60px" width="100%" />
             </div>
           </div>
         </div>
@@ -25,10 +25,10 @@ export function SelectHotelSkeleton({ count = 4 }: Props) {
       <main className={styles.main}>
         <div className={styles.sideBar}>
           <div className={styles.sideBarItem}>
-            <SkeletonShimmer height={"280px"} width={"340px"} />
+            <SkeletonShimmer height="280px" width="340px" />
           </div>
           <div className={styles.sideBarItem}>
-            <SkeletonShimmer height={"400px"} width={"340px"} />
+            <SkeletonShimmer height="400px" width="340px" />
           </div>
         </div>
         <div className={styles.hotelList}>

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx

@@ -348,7 +348,7 @@ export default function SummaryContent({
             amount: memberPrice.localPrice.pricePerStay,
             currency: memberPrice.localPrice.currency,
           }}
-          badgeContent={"✌️"}
+          badgeContent="✌️"
         />
       ) : null}
     </section>

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/index.tsx

@@ -71,7 +71,7 @@ export function BreakfastMessage({
     <div className={styles.message}>
       <Divider className={styles.divider} color="Border/Divider/Subtle" />
       <Typography
-        variant={"Body/Supporting text (caption)/smRegular"}
+        variant="Body/Supporting text (caption)/smRegular"
         className={styles.breakfastMessage}
       >
         <p>{breakfastMessage}</p>