Merged in chore/SW-3381-move-loginbutton-to-ds- (pull request #2752)

chore(SW-3381) Moved LoginButton to design system

* chore(SW-3381) Moved LoginButton to design system


Approved-by: Anton Gunnarsson

apps/scandic-web/app/[lang]/(live)/error.tsx

@@ -5,10 +5,10 @@ import { useParams, useRouter, useSearchParams } from "next/navigation"
 import { startTransition, useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { logger } from "@scandic-hotels/common/logger"
 import { SESSION_EXPIRED } from "@scandic-hotels/trpc/errors"
 
-import { login } from "@/constants/routes/handleAuth"
 import { env } from "@/env/client"
 
 import styles from "./error.module.css"

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

@@ -5,20 +5,21 @@ import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { findMyBookingCurrentWebPath } from "@scandic-hotels/common/constants/routes/findMyBooking"
+import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { myPages } from "@scandic-hotels/common/constants/routes/myPages"
 import { getCurrentWebUrl } from "@scandic-hotels/common/utils/url"
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
+import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
-import { logout } from "@/constants/routes/handleAuth"
 import { env } from "@/env/client"
 import useDropdownStore from "@/stores/main-menu"
 
-import LoginButton from "@/components/LoginButton"
 import Avatar from "@/components/MyPages/Avatar"
 import useLang from "@/hooks/useLang"
-import { trackClick } from "@/utils/tracking"
+import { useLazyPathname } from "@/hooks/useLazyPathname"
+import { trackClick, trackLoginClick } from "@/utils/tracking"
 
 import BookingButton from "../BookingButton"
 
@@ -42,6 +43,7 @@ export function MainMenu({
   const lang = useLang()
   const pathname = usePathname()
   const baseUrl = env.NEXT_PUBLIC_PUBLIC_URL || "https://www.scandichotels.com"
+  const loginPathname = useLazyPathname()
 
   const isThreeStaticPagesPathnames = [
     "/de/sponsoring",
@@ -149,9 +151,13 @@ export function MainMenu({
                   </li>
                   <li className={styles.mobileLinkRow}>
                     <LoginButton
-                      position="hamburger menu"
+                      lang={lang}
+                      pathName={loginPathname}
                       trackingId="loginStartHamburgerMenu"
                       className={styles.mobileLinkButton}
+                      onClick={() => {
+                        trackLoginClick("hamburger menu")
+                      }}
                     >
                       {intl.formatMessage({
                         defaultMessage: "Log in",

apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -2,12 +2,12 @@
 
 import { useIntl } from "react-intl"
 
+import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import Title from "@scandic-hotels/design-system/Title"
 
-import { logout } from "@/constants/routes/handleAuth"
 import useDropdownStore from "@/stores/main-menu"
 
 import { useMyPagesNavigation } from "@/components/Header/MainMenu/MyPagesMenuContent"

apps/scandic-web/components/Current/Header/TopMenu/index.tsx

@@ -1,13 +1,15 @@
+import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { overview } from "@scandic-hotels/common/constants/routes/myPages"
 import Link from "@scandic-hotels/design-system/Link"
+import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
-import { logout } from "@/constants/routes/handleAuth"
 import { getName } from "@/lib/trpc/memoizedRequests"
 
-import LoginButton from "@/components/LoginButton"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
+import { getPathname } from "@/utils/getPathname"
+import { trackLoginClick } from "@/utils/tracking"
 
 import styles from "./topMenu.module.css"
 
@@ -26,6 +28,7 @@ export default async function TopMenu({
   const intl = await getIntl()
   const user = await getName()
   const lang = await getLang()
+  const pathname = await getPathname()
 
   return (
     <div className={styles.topMenu}>
@@ -71,10 +74,14 @@ export default async function TopMenu({
               </>
             ) : (
               <LoginButton
-                position="hamburger menu"
+                lang={lang}
+                pathName={pathname}
                 trackingId="loginStartTopMenu"
                 className={`${styles.sessionLink} ${styles.loginLink}`}
                 size="small"
+                onClick={() => {
+                  trackLoginClick("hamburger menu")
+                }}
               >
                 {intl.formatMessage({
                   defaultMessage: "Log in",
@@ -91,6 +98,8 @@ export default async function TopMenu({
 export async function TopMenuSkeleton() {
   const intl = await getIntl()
   const links = new Array(5).fill("")
+  const lang = await getLang()
+  const pathname = await getPathname()
   return (
     <div className={styles.topMenu}>
       <div className={styles.container}>
@@ -102,10 +111,14 @@ export async function TopMenuSkeleton() {
           ))}
           <li className={styles.sessionContainer}>
             <LoginButton
-              position="hamburger menu"
+              lang={lang}
+              pathName={pathname}
               trackingId="loginStartTopMenu"
               className={`${styles.sessionLink} ${styles.loginLink}`}
               size="small"
+              onClick={() => {
+                trackLoginClick("hamburger menu")
+              }}
             >
               {intl.formatMessage({
                 defaultMessage: "Log in",

apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/AuthCard/index.tsx

@@ -1,7 +1,6 @@
+import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { signup } from "@scandic-hotels/common/constants/routes/signup"
 
-import { login } from "@/constants/routes/handleAuth"
-
 import Card from "@/components/TempDesignSystem/Card"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"

apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 
+import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { signup } from "@scandic-hotels/common/constants/routes/signup"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { dtmcLogin } from "@/constants/routes/dtmc"
-import { login } from "@/constants/routes/handleAuth"
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
 import { TeamMemberCardTrigger } from "@/components/DigitalTeamMemberCard/Trigger"

apps/scandic-web/components/Forms/Edit/Profile/index.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { profile } from "@scandic-hotels/common/constants/routes/myPages"
 import { logger } from "@scandic-hotels/common/logger"
 import {
@@ -17,8 +18,6 @@ import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { langToApiLang } from "@scandic-hotels/trpc/constants/apiLang"
 
-import { logout } from "@/constants/routes/handleAuth"
-
 import { editProfile } from "@/actions/editProfile"
 import Dialog from "@/components/Dialog"
 import ChangeNameDisclaimer from "@/components/MyPages/Profile/ChangeNameDisclaimer"

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

@@ -3,6 +3,7 @@
 import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
+import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -10,8 +11,6 @@ import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import { logout } from "@/constants/routes/handleAuth"
-
 import useLang from "@/hooks/useLang"
 
 import styles from "./myPagesMenuContent.module.css"

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

@@ -5,11 +5,14 @@ import { useIntl } from "react-intl"
 
 import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
 import { Avatar } from "@scandic-hotels/design-system/Avatar"
+import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import LoginButton from "@/components/LoginButton"
 import useLang from "@/hooks/useLang"
+import { useLazyPathname } from "@/hooks/useLazyPathname"
 import { isValidClientSession } from "@/utils/clientSession"
+import { trackLoginClick } from "@/utils/tracking"
 
 import MyPagesMenu, { MyPagesMenuSkeleton } from "../MyPagesMenu"
 import MyPagesMobileMenu, {
@@ -21,6 +24,7 @@ import styles from "./myPagesMenuWrapper.module.css"
 export default function MyPagesMenuWrapper() {
   const intl = useIntl()
   const lang = useLang()
+  const loginPathname = useLazyPathname()
 
   const { data: session } = useSession()
   const isUserLoggedIn = isValidClientSession(session)
@@ -61,19 +65,25 @@ export default function MyPagesMenuWrapper() {
         </>
       ) : (
         <LoginButton
-          className={styles.loginLink}
           aria-label={intl.formatMessage({
             defaultMessage: "Log in/Join",
           })}
-          position="top menu"
+          className={styles.loginLink}
+          lang={lang}
+          onClick={() => {
+            trackLoginClick("top menu")
+          }}
+          pathName={loginPathname}
           trackingId="loginStartNewTopMenu"
         >
           <Avatar />
-          <span className={styles.loginText}>
-            {intl.formatMessage({
-              defaultMessage: "Log in/Join",
-            })}
-          </span>
+          <Typography variant={"Body/Paragraph/mdRegular"}>
+            <span className={styles.loginText}>
+              {intl.formatMessage({
+                defaultMessage: "Log in/Join",
+              })}
+            </span>
+          </Typography>
         </LoginButton>
       )}
     </>

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx

@@ -6,14 +6,16 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import Link from "@scandic-hotels/design-system/Link"
+import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { membershipTermsAndConditions } from "@/constants/webHrefs"
 
-import LoginButton from "@/components/LoginButton"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
+import { useLazyPathname } from "@/hooks/useLazyPathname"
+import { trackLoginClick } from "@/utils/tracking"
 
 import styles from "./joinScandicFriendsCard.module.css"
 
@@ -24,6 +26,7 @@ export default function JoinScandicFriendsCard({
 }: JoinScandicFriendsCardProps) {
   const lang = useLang()
   const intl = useIntl()
+  const loginPathname = useLazyPathname()
   const {
     room,
     actions: { updateJoin },
@@ -74,7 +77,11 @@ export default function JoinScandicFriendsCard({
         <LoginButton
           className={styles.login}
           color="white"
-          position="enter details"
+          lang={lang}
+          onClick={() => {
+            trackLoginClick("enter details")
+          }}
+          pathName={loginPathname}
           trackingId="join-scandic-friends-enter-details"
         >
           {intl.formatMessage({

apps/scandic-web/components/LoginButton/index.tsx

@@ -1,43 +0,0 @@
-"use client"
-
-import Link, { type LinkProps } from "@scandic-hotels/design-system/Link"
-
-import { login } from "@/constants/routes/handleAuth"
-
-import useLang from "@/hooks/useLang"
-import { useLazyPathname } from "@/hooks/useLazyPathname"
-import { trackLoginClick } from "@/utils/tracking"
-
-import type { TrackingPosition } from "@scandic-hotels/common/tracking/types"
-import type { PropsWithChildren } from "react"
-
-export default function LoginButton({
-  position,
-  trackingId,
-  children,
-  ...props
-}: PropsWithChildren<
-  {
-    trackingId: string
-    position: TrackingPosition
-  } & Omit<LinkProps, "href">
->) {
-  const lang = useLang()
-  const pathName = useLazyPathname({ includeSearchParams: true })
-
-  const href = pathName
-    ? `${login[lang]}?redirectTo=${encodeURIComponent(pathName)}`
-    : login[lang]
-
-  return (
-    <Link
-      id={trackingId}
-      href={href}
-      prefetch={false}
-      onClick={() => trackLoginClick(position)}
-      {...props}
-    >
-      {children}
-    </Link>
-  )
-}

apps/scandic-web/components/Sidebar/JoinLoyalty/LoyaltyLoginButton.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import useLang from "@/hooks/useLang"
+import { useLazyPathname } from "@/hooks/useLazyPathname"
+import { trackLoginClick } from "@/utils/tracking"
+
+export function LoyaltyLoginButton() {
+  const intl = useIntl()
+  const lang = useLang()
+  const loginPathname = useLazyPathname()
+
+  return (
+    <LoginButton
+      lang={lang}
+      onClick={() => {
+        trackLoginClick("join scandic friends sidebar")
+      }}
+      pathName={loginPathname}
+      trackingId="loginJoinLoyalty"
+    >
+      <MaterialIcon icon="arrow_forward" color="CurrentColor" size={20} />
+      <Typography variant={"Body/Paragraph/mdRegular"}>
+        <span>
+          {intl.formatMessage({
+            defaultMessage: "Log in here",
+          })}
+        </span>
+      </Typography>
+    </LoginButton>
+  )
+}

apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx

@@ -1,15 +1,12 @@
-import Body from "@scandic-hotels/design-system/Body"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Title from "@scandic-hotels/design-system/Title"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { ScandicFriends } from "@/components/Levels"
-import LoginButton from "@/components/LoginButton"
 import { getIntl } from "@/i18n"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 
 import Contact from "./Contact"
+import { LoyaltyLoginButton } from "./LoyaltyLoginButton"
 import ReadMore from "./ReadMore"
 
 import styles from "./joinLoyalty.module.css"
@@ -28,50 +25,39 @@ export default async function JoinLoyaltyContact({
   return (
     <section className={styles.joinLoyaltyContainer}>
       <article className={styles.wrapper}>
-        <Title as="h4" level="h3" textTransform="capitalize">
-          {block.title}
-        </Title>
+        {block.title ? (
+          <Typography variant={"Title/Subtitle/md"}>
+            <h4 className={styles.title}>{block.title}</h4>
+          </Typography>
+        ) : null}
         <ScandicFriends color="red" />
         {block.preamble ? (
-          <Body className={styles.preamble}>{block.preamble}</Body>
+          <Typography variant={"Body/Paragraph/mdRegular"}>
+            <p className={styles.preamble}>{block.preamble}</p>
+          </Typography>
         ) : null}
         {block.button ? (
-          <Button
-            asChild
-            intent="primary"
-            theme="base"
-            className={styles.button}
-          >
-            <Link
+          <Typography variant={"Body/Paragraph/mdBold"}>
+            <ButtonLink
+              className={styles.button}
+              size={"Small"}
+              wrapping
               href={block.button.href}
-              color="white"
               target={block.button.openInNewTab ? "_blank" : "_self"}
             >
               {block.button.title}
-            </Link>
-          </Button>
+            </ButtonLink>
+          </Typography>
         ) : null}
         <section className={styles.loginContainer}>
-          <Body>
-            {intl.formatMessage({
-              defaultMessage: "Already a friend?",
-            })}
-          </Body>
-          <LoginButton
-            className={styles.link}
-            trackingId="loginJoinLoyalty"
-            position="join scandic friends sidebar"
-          >
-            <MaterialIcon
-              icon="arrow_forward"
-              color="CurrentColor"
-              className={styles.icon}
-              size={20}
-            />
-            {intl.formatMessage({
-              defaultMessage: "Log in here",
-            })}
-          </LoginButton>
+          <Typography variant={"Body/Paragraph/mdRegular"}>
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Already a friend?",
+              })}
+            </p>
+          </Typography>
+          <LoyaltyLoginButton />
         </section>
       </article>
       {block.contact ? <Contact contactBlock={block.contact} /> : null}

apps/scandic-web/components/UserExists.tsx

@@ -3,10 +3,10 @@
 import { redirect } from "next/navigation"
 import { useSession } from "next-auth/react"
 
+import { logoutSafely } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { userNotFound } from "@/constants/routes/errorPages"
-import { logoutSafely } from "@/constants/routes/handleAuth"
 
 import useLang from "@/hooks/useLang"
 import { isValidClientSession } from "@/utils/clientSession"

apps/scandic-web/lib/trpc/Provider.tsx

@@ -2,12 +2,11 @@
 
 import { TRPCClientError } from "@trpc/client"
 
+import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { logger } from "@scandic-hotels/common/logger"
 import { SessionExpiredError } from "@scandic-hotels/trpc/errors"
 import { TrpcProvider as InternalTrpcProvider } from "@scandic-hotels/trpc/Provider"
 
-import { login } from "@/constants/routes/handleAuth"
-
 import useLang from "@/hooks/useLang"
 
 import type { AnyTRPCRouter } from "@trpc/server"

apps/scandic-web/lib/trpc/server.ts

@@ -3,6 +3,7 @@ import { cookies, headers } from "next/headers"
 import { redirect } from "next/navigation"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
+import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { createLogger } from "@scandic-hotels/common/logger/createLogger"
 import { createContext } from "@scandic-hotels/trpc/context"
 import {
@@ -10,7 +11,6 @@ import {
   configureServerClient,
 } from "@scandic-hotels/trpc/serverClient"
 
-import { login } from "@/constants/routes/handleAuth"
 import { webviews } from "@/constants/routes/webviews"
 
 import { auth } from "@/auth"

apps/scandic-web/middlewares/authRequired.ts

@@ -1,10 +1,10 @@
 import { type NextMiddleware, NextResponse } from "next/server"
 
+import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { logger } from "@scandic-hotels/common/logger"
 import { findLang } from "@scandic-hotels/common/utils/languages"
 
 import { authRequired, mfaRequired } from "@/constants/routes/authRequired"
-import { login } from "@/constants/routes/handleAuth"
 import { getInternalNextURL, getPublicNextURL } from "@/server/utils"
 
 import { auth } from "@/auth"

apps/scandic-web/middlewares/bookingFlow.ts

@@ -1,11 +1,11 @@
 import { type NextMiddleware, NextResponse } from "next/server"
 
+import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { findLang } from "@scandic-hotels/common/utils/languages"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 import { isValidSession } from "@scandic-hotels/trpc/utils/session"
 
 import { SEARCHTYPE } from "@/constants/booking"
-import { login } from "@/constants/routes/handleAuth"
 import { getPublicNextURL } from "@/server/utils"
 
 import { auth } from "@/auth"

apps/scandic-web/middlewares/handleAuth.ts

@@ -1,6 +1,6 @@
 import { type NextMiddleware, NextResponse } from "next/server"
 
-import { handleAuth } from "@/constants/routes/handleAuth"
+import { handleAuth } from "@scandic-hotels/common/constants/routes/handleAuth"
 
 import type { MiddlewareMatcher } from "@/types/middleware"
 

apps/scandic-web/next.config.ts

@@ -4,13 +4,16 @@ import * as Sentry from "@sentry/nextjs"
 import createJiti from "jiti"
 
 import { findMyBooking } from "@scandic-hotels/common/constants/routes/findMyBooking"
+import {
+  login,
+  logout,
+} from "@scandic-hotels/common/constants/routes/handleAuth"
 import { myPages } from "@scandic-hotels/common/constants/routes/myPages"
 import {
   myStay,
   preliminaryReceipt,
 } from "@scandic-hotels/common/constants/routes/myStay"
 
-import { login, logout } from "./constants/routes/handleAuth.js"
 import {
   myStay as myStayWebview,
   preliminaryReceipt as preliminaryReceiptWebview,

packages/design-system/lib/components/LoginButton/index.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import Link, { type LinkProps } from '../Link'
+import { login } from '@scandic-hotels/common/constants/routes/handleAuth'
+
+import type { PropsWithChildren } from 'react'
+import type { Lang } from '@scandic-hotels/common/constants/language'
+
+export function LoginButton({
+  lang,
+  pathName,
+  trackingId,
+  children,
+  ...props
+}: PropsWithChildren<
+  {
+    lang: Lang
+    pathName: string | null
+    trackingId: string
+  } & Omit<LinkProps, 'href'>
+>) {
+  const href = pathName
+    ? `${login[lang]}?redirectTo=${encodeURIComponent(pathName)}`
+    : login[lang]
+
+  return (
+    <Link id={trackingId} href={href} prefetch={false} {...props}>
+      {children}
+    </Link>
+  )
+}

packages/design-system/package.json

@@ -133,6 +133,7 @@
     "./Lightbox": "./lib/components/Lightbox/index.tsx",
     "./Link": "./lib/components/Link/index.tsx",
     "./LoadingSpinner": "./lib/components/LoadingSpinner/index.tsx",
+    "./LoginButton": "./lib/components/LoginButton/index.tsx",
     "./Map/InteractiveMap": "./lib/components/Map/InteractiveMap/index.tsx",
     "./Map/mapConstants": "./lib/components/Map/mapConstants.ts",
     "./Map/Markers/HotelMarkerByType": "./lib/components/Map/Markers/HotelMarkerByType.tsx",