Merged in fix/SW-1971-close-mobile-menu-footer-link-click (pull request #1583)

fix(SW-1971): now closes mobile menu on clicking the find booking link

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/Header/HeaderLink/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import Link from "next/link"
 
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
@@ -12,11 +14,12 @@ export default function HeaderLink({
   href,
   iconName,
   iconSize = 20,
+  onClick = () => undefined,
 }: HeaderLinkProps) {
   const Icon = getIconByIconName(iconName)
   return (
     <Caption type="regular" color="textMediumContrast" asChild>
-      <Link href={href} className={styles.headerLink}>
+      <Link href={href} className={styles.headerLink} onClick={onClick}>
         {Icon ? (
           <Icon className={styles.icon} width={iconSize} height={iconSize} />
         ) : null}

apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx

@@ -5,6 +5,7 @@ import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { customerService } from "@/constants/currentWebHrefs"
 import { findMyBooking } from "@/constants/routes/findMyBooking"
 import useDropdownStore from "@/stores/main-menu"
 
@@ -86,11 +87,18 @@ export default function MobileMenu({
         >
           {children}
           <footer className={styles.footer}>
-            <HeaderLink href={findMyBooking[lang]} iconName={IconName.Search}>
+            <HeaderLink
+              href={findMyBooking[lang]}
+              iconName={IconName.Search}
+              onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
+            >
               {intl.formatMessage({ id: "Find booking" })}
             </HeaderLink>
             <TopLink isLoggedIn={isLoggedIn} topLink={topLink} iconSize={20} />
-            <HeaderLink href="#" iconName={IconName.Service}>
+            <HeaderLink
+              href={customerService[lang]}
+              iconName={IconName.Service}
+            >
               {intl.formatMessage({ id: "Customer service" })}
             </HeaderLink>
             <LanguageSwitcher type="mobileHeader" />

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -30,33 +30,31 @@ export default function LanguageSwitcherContent({
 
   return (
     <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
-      <div className={styles.languageSwitcherContent}>
+      <div className={styles.languageWrapper}>
-        <div className={styles.languageWrapper}>
+        <Subtitle className={styles.subtitle} type="two">
-          <Subtitle className={styles.subtitle} type="two">
+          {intl.formatMessage({ id: "Select your language" })}
-            {intl.formatMessage({ id: "Select your language" })}
+        </Subtitle>
-          </Subtitle>
+        <ul className={styles.list}>
-          <ul className={styles.list}>
+          {urlKeys.map((key) => {
-            {urlKeys.map((key) => {
+            const url = urls[key]?.url
-              const url = urls[key]?.url
+            const isActive = currentLanguage === key
-              const isActive = currentLanguage === key
+            if (url) {
-              if (url) {
+              return (
-                return (
+                <li key={key}>
-                  <li key={key}>
+                  <Link
-                    <Link
+                    className={`${styles.link} ${isActive ? styles.active : ""}`}
-                      className={`${styles.link} ${isActive ? styles.active : ""}`}
+                    href={replaceUrlPart(pathname, url)}
-                      href={replaceUrlPart(pathname, url)}
+                    onClick={onLanguageSwitch}
-                      onClick={onLanguageSwitch}
+                    keepSearchParams
-                      keepSearchParams
+                  >
-                    >
+                    {languages[key]}
-                      {languages[key]}
+                    {isActive ? <CheckIcon color="burgundy" /> : null}
-                      {isActive ? <CheckIcon color="burgundy" /> : null}
+                  </Link>
-                    </Link>
+                </li>
-                  </li>
+              )
-                )
+            }
-              }
+          })}
-            })}
+        </ul>
-          </ul>
-        </div>
       </div>
     </FocusTrap>
   )

apps/scandic-web/types/components/header/headerLink.ts

@@ -6,4 +6,5 @@ export interface HeaderLinkProps extends React.PropsWithChildren {
   href: LinkProps["href"]
   iconName: IconName | null
   iconSize?: number
+  onClick?: VoidFunction
 }