Merged in feat/LOY-400-create-spend-points-modal (pull request #3131)

Feat/LOY-400 create spend points modal

* feat(LOY-400): Added custom button to my pages overview and skeleton file to custom modal for my points.

* feat(LOY-400): Added custom button to my pages overview and components for custom modal for my points.

* feat(LOY-400): Changed some style and infogridcardover

* feat(LOY-400):Removed custom card components and changed in infoCard: Added imagePosition top, added optional height prop. In Card: Changed Text-wrap styling, added min-width styling to buttons, added optional Icon prop, added optional height prop

* feat(LOY-400):Added linkList, LinkListItem component and messageBanner component. Added granola illustration.

* feat(LOY-400): Removed background in several illustrations. Added component for illustration. Fixed LinkedList and styling for UsePointsButton.

* feat(LOY-400): Added modal to PointsToSpendCard and fixed UsePointsButton.

* fix(LOY-400):added some styling

* feat(LOY-400): Linked Modal to contentstack and fetch the data in cards with UsePointsModal for now

* feat(LOY-400): changed link to aria-component, cleaned up a bit

* feat(LOY-400): Changed height for larger modals in mobile, fixed zod schema for no illustration input, cleaned up

* fix(LOY-400): fixed graphql after rebase

* fix(LOY-400): mini fix

* fix(LOY-400): fixed pr-comments

* fix(LOY-400): fixed some PR-comments

* fix(LOY-400): fixed a PR-comment

* feat(LOY-400): added size prop to ilustration in LinkListItem to be able to use illustrations in IllustrationByIconName

* fix(LOY-400): fixed pr-comments

* Merged in feat/LOY-402-pre-ticked-book-reward-night-in-booking-flow (pull request #3210)

Feat/LOY-402 pre ticked book reward night in booking flow

* feat(LOY-402): Changed UsePointsModal structure to handle button actions in card.

* feat(LOY-402): added functionality for book now button

* feat(LOY-400): pr comment fix

* feat(LOY-402): transformed the contentstack data

* fix(LOY-402): fixed pr comments

Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström

* Merged in feat/LOY-404-add-tracking-for-spend-points-modal (pull request #3229)

Feat/LOY-404 add tracking for spend points modal

* feat(LOY-402): Changed UsePointsModal structure to handle button actions in card.

* feat(LOY-402): added functionality for book now button

* feat(LOY-400): pr comment fix

* feat(LOY-402): transformed the contentstack data

* feat(LOY-404): added tracking

* fix(LOY-404): fix for session storage removal of bookNowFromPointsModal

* feat(LOY-404): added consts

* fix(LOY-404): moved foxusWidget const

* fix(LOY-404): moved BOOKING_WIDGET_STATE const

* fix(LOY-404):fix


Approved-by: Matilda Landström

* fix(LOY-400): some fixes

* feat(LOY-400): created linkList storybook


Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Matilda Landström

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

@@ -1,7 +1,8 @@
 "use client"
 
 import { cx } from "class-variance-authority"
-import { usePathname } from "next/navigation"
+import { usePathname, useSearchParams } from "next/navigation"
+import { useEffect } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -16,6 +17,7 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 import { useBookingFlowConfig } from "../../../../bookingFlowConfig/bookingFlowConfigContext"
 import useLang from "../../../../hooks/useLang"
 import GuestsRoomsPickerForm from "../../../BookingWidget/GuestsRoomsPicker"
+import { type BookingWidgetSchema, FOCUS_WIDGET } from "../../Client"
 import DatePicker from "../../DatePicker"
 import { RemoveExtraRooms } from "./RemoveExtraRooms/RemoveExtraRooms"
 import { Search, SearchSkeleton } from "./Search"
@@ -25,8 +27,6 @@ import Voucher, { VoucherSkeleton } from "./Voucher"
 
 import styles from "./formContent.module.css"
 
-import type { BookingWidgetSchema } from "../../Client"
-
 type BookingWidgetFormContentProps = {
   formId: string
   onSubmit: () => void
@@ -42,6 +42,15 @@ export default function FormContent({
     formState: { errors, isDirty },
   } = useFormContext<BookingWidgetSchema>()
   const { bookingCodeEnabled, redemptionEnabled } = useBookingFlowConfig()
+  const searchParams = useSearchParams()
+  const focusWidget = searchParams.get(FOCUS_WIDGET) === "true"
+  useEffect(() => {
+    if (!focusWidget) return
+
+    const url = new URL(window.location.href)
+    url.searchParams.delete(FOCUS_WIDGET)
+    window.history.replaceState({}, "", url.toString())
+  }, [focusWidget])
 
   const lang = useLang()
   const pathName = usePathname()
@@ -60,6 +69,7 @@ export default function FormContent({
             selectOnBlur={true}
             inputName="search"
             includeTypes={["cities", "hotels"]}
+            autoFocus={focusWidget}
           />
           {errors.search && <ValidationError />}
         </div>

packages/booking-flow/lib/components/BookingWidget/Client.tsx

@@ -44,12 +44,17 @@ export type BookingWidgetClientProps = {
   data: BookingWidgetSearchData
   pageSettingsBookingCodePromise: Promise<string> | null
 }
+export const FOCUS_WIDGET = "focusWidget"
+
 export default function BookingWidgetClient({
   type,
   data,
   pageSettingsBookingCodePromise,
 }: BookingWidgetClientProps) {
-  const [isOpen, setIsOpen] = useState(false)
+  const searchParams = useSearchParams()
+  const focusWidget = searchParams.get(FOCUS_WIDGET) === "true"
+
+  const [isOpen, setIsOpen] = useState(focusWidget)
   const bookingWidgetRef = useRef(null)
   const lang = useLang()
   const bookingFlowConfig = useBookingFlowConfig()
@@ -142,7 +147,6 @@ export default function BookingWidgetClient({
     reValidateMode: "onSubmit",
   })
 
-  const searchParams = useSearchParams()
   const bookingCodeFromSearchParams = searchParams.get("bookingCode") || ""
   const [bookingCode, setBookingCode] = useState(bookingCodeFromSearchParams)
 

packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css

@@ -13,12 +13,13 @@
       width: 100%;
       z-index: 1;
     }
-
-    .backdrop {
-      position: fixed;
-      inset: 0;
-      background-color: rgba(0, 0, 0, 0.4);
-      z-index: 0;
+    @media screen and (max-width: 767px) {
+      .backdrop {
+        position: fixed;
+        inset: 0;
+        background-color: rgba(0, 0, 0, 0.4);
+        z-index: 0;
+      }
     }
   }
 

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

@@ -30,6 +30,7 @@ export type BookingWidgetSearchData = {
   rooms?: GuestsRoom[]
   bookingCode?: string
   searchType?: BookingSearchType
+  focusWidget?: boolean
 }
 
 export type BookingWidgetType = VariantProps<