Merged in chore(LOY-531)-cleanup-old-stays (pull request #3498)

chore(LOY-531): cleanup old stays

* chore(LOY-531): cleanup old stays


Approved-by: Emma Zettervall
Approved-by: Anton Gunnarsson

apps/scandic-web/.env.local.example

@@ -52,4 +52,3 @@ DTMC_ENTRA_ID_CLIENT=""
 DTMC_ENTRA_ID_ISSUER=""
 DTMC_ENTRA_ID_SECRET=""
 
-NEW_STAYS_ON_MY_PAGES="true"

apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/index.tsx

@@ -1,4 +1,3 @@
-import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
 import { Section } from "@/components/Section"
@@ -17,7 +16,7 @@ export default async function NextStay({ title, link }: NextStayProps) {
   const nextStay = await caller.user.stays.next()
 
   if (!nextStay) {
-    return env.NEW_STAYS_ON_MY_PAGES ? <EmptyUpcomingStays /> : null
+    return <EmptyUpcomingStays />
   }
 
   return (

apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx

@@ -1,76 +0,0 @@
-"use client"
-
-import { dt } from "@scandic-hotels/common/dt"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/OldDSLink"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import useLang from "@/hooks/useLang"
-
-import styles from "./stay.module.css"
-
-import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
-
-export default function OldStayCard({ stay }: StayCardProps) {
-  const { bookingUrl, isWebAppOrigin } = stay.attributes
-
-  const shouldLinkToMyStay = isWebAppOrigin
-
-  if (!shouldLinkToMyStay) {
-    return <CardContent stay={stay} />
-  }
-
-  return (
-    <Link href={bookingUrl} className={styles.link}>
-      <CardContent stay={stay} />
-    </Link>
-  )
-}
-
-function CardContent({ stay }: StayCardProps) {
-  const lang = useLang()
-
-  const { checkinDate, checkoutDate, hotelInformation } = stay.attributes
-
-  const arrival = dt(checkinDate).locale(lang)
-  const arrivalDate = arrival.format("DD MMM")
-  const arrivalDateTime = arrival.format("YYYY-MM-DD")
-  const depart = dt(checkoutDate).locale(lang)
-  const departDate = depart.format("DD MMM YYYY")
-  const departDateTime = depart.format("YYYY-MM-DD")
-
-  return (
-    <article className={styles.stay}>
-      <Image
-        className={styles.image}
-        alt={
-          hotelInformation.hotelContent.images.altText ||
-          hotelInformation.hotelContent.images.altText_En
-        }
-        src={hotelInformation.hotelContent.images.src}
-        width={420}
-        height={240}
-      />
-      <footer className={styles.footer}>
-        <Typography variant="Title/xs" className={styles.hotel}>
-          <h3>{hotelInformation.hotelName}</h3>
-        </Typography>
-        <div className={styles.date}>
-          <MaterialIcon
-            icon="calendar_month"
-            color="Icon/Interactive/Default"
-          />
-          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <p>
-              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-              {" - "}
-              <time dateTime={departDateTime}>{departDate}</time>
-            </p>
-          </Typography>
-        </div>
-      </footer>
-    </article>
-  )
-}

apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/stay.module.css

@@ -1,44 +0,0 @@
-.link {
-  outline: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-Radius-md);
-  overflow: hidden;
-
-  &:focus,
-  &:hover {
-    outline-offset: 0;
-    outline: 1.5px solid var(--Base-Border-Hover);
-  }
-}
-
-.stay {
-  background-color: var(--Main-Grey-White);
-}
-
-.image {
-  min-height: 220px;
-  object-fit: cover;
-  overflow: hidden;
-  width: 100%;
-}
-
-.footer {
-  color: var(--Scandic-Brand-Burgundy);
-  display: grid;
-  gap: var(--Space-x2);
-  margin-top: auto;
-  overflow: hidden;
-  padding: var(--Space-x2);
-  width: 100%;
-}
-
-.hotel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-wrap: nowrap;
-}
-
-.date {
-  align-items: center;
-  display: flex;
-  gap: var(--Space-x05);
-}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/OldClient.tsx

@@ -1,65 +0,0 @@
-"use client"
-
-import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
-import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
-import { trpc } from "@scandic-hotels/trpc/client"
-
-import Grids from "@/components/TempDesignSystem/Grids"
-import useLang from "@/hooks/useLang"
-
-import ListContainer from "../ListContainer"
-import OldStayCard from "../OldStayCard"
-
-import type {
-  PreviousStaysClientProps,
-  PreviousStaysNonNullResponseObject,
-} from "@/types/components/myPages/stays/previous"
-
-export function ClientPreviousStays({
-  initialPreviousStays,
-}: PreviousStaysClientProps) {
-  const lang = useLang()
-  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
-    trpc.user.stays.previous.useInfiniteQuery(
-      {
-        limit: 6,
-        lang,
-      },
-      {
-        getNextPageParam: (lastPage) => {
-          return lastPage?.nextCursor
-        },
-        initialData: {
-          pageParams: [undefined, 1],
-          pages: [initialPreviousStays],
-        },
-      }
-    )
-
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
-  function loadMoreData() {
-    if (hasNextPage) {
-      fetchNextPage()
-    }
-  }
-
-  const stays = data.pages
-    .filter((page): page is PreviousStaysNonNullResponseObject => !!page?.data)
-    .flatMap((page) => page.data)
-
-  return (
-    <ListContainer>
-      <Grids.Stackable>
-        {stays.map((stay) => (
-          <OldStayCard key={stay.attributes.confirmationNumber} stay={stay} />
-        ))}
-      </Grids.Stackable>
-      {hasNextPage ? (
-        <ShowMoreButton isPending={isFetching} loadMoreData={loadMoreData} />
-      ) : null}
-    </ListContainer>
-  )
-}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx

@@ -1,4 +1,3 @@
-import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
 import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints"
@@ -9,7 +8,6 @@ import SectionLink from "@/components/Section/Link"
 import { Cards } from "./Cards"
 import { INITIAL_STAYS_FETCH_LIMIT } from "./data"
 import { L6Progress } from "./L6Progress"
-import { ClientPreviousStays } from "./OldClient"
 
 import styles from "./previous.module.css"
 
@@ -28,16 +26,14 @@ export default async function PreviousStays({
     return null
   }
 
-  const StaysComponent = env.NEW_STAYS_ON_MY_PAGES ? Cards : ClientPreviousStays
-
   return (
     <Section>
       <div className={styles.header}>
         <SectionHeader heading={title ?? undefined} link={link} />
         <ClaimPoints />
       </div>
-      {env.NEW_STAYS_ON_MY_PAGES ? <L6Progress /> : null}
+      <L6Progress />
-      <StaysComponent initialPreviousStays={initialPreviousStays} />
+      <Cards initialPreviousStays={initialPreviousStays} />
       <SectionLink link={link} variant="mobile" />
     </Section>
   )

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -1,10 +1,6 @@
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { env } from "@/env/server"
-
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
@@ -16,40 +12,6 @@ export default async function EmptyUpcomingStays() {
 
   const href = `/${lang}`
 
-  if (!env.NEW_STAYS_ON_MY_PAGES) {
-    return (
-      <section className={styles.container}>
-        <div className={styles.titleContainer}>
-          <Typography variant="Title/sm" className={styles.title}>
-            <h3>
-              {intl.formatMessage({
-                id: "stays.noUpcomingStays",
-                defaultMessage: "You have no upcoming stays.",
-              })}
-              <span className={styles.burgundyTitle}>
-                {intl.formatMessage({
-                  id: "stays.whereToGoNext",
-                  defaultMessage: "Where should you go next?",
-                })}
-              </span>
-            </h3>
-          </Typography>
-        </div>
-        <Link
-          href={href}
-          className={styles.link}
-          color="Text/Interactive/Secondary"
-        >
-          {intl.formatMessage({
-            id: "stays.getInspired",
-            defaultMessage: "Get inspired",
-          })}
-          <MaterialIcon icon="arrow_forward" color="CurrentColor" />
-        </Link>
-      </section>
-    )
-  }
-
   return (
     <section className={styles.emptyUpcomingStaysContainer}>
       <Typography variant="Title/Subtitle/md">

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/OldClient.tsx

@@ -1,65 +0,0 @@
-"use client"
-
-import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
-import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
-import { trpc } from "@scandic-hotels/trpc/client"
-
-import Grids from "@/components/TempDesignSystem/Grids"
-import useLang from "@/hooks/useLang"
-
-import ListContainer from "../ListContainer"
-import OldStayCard from "../OldStayCard"
-
-import type {
-  UpcomingStaysClientProps,
-  UpcomingStaysNonNullResponseObject,
-} from "@/types/components/myPages/stays/upcoming"
-
-export default function ClientUpcomingStays({
-  initialUpcomingStays,
-}: UpcomingStaysClientProps) {
-  const lang = useLang()
-  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
-    trpc.user.stays.upcoming.useInfiniteQuery(
-      {
-        limit: 6,
-        lang,
-      },
-      {
-        getNextPageParam: (lastPage) => {
-          return lastPage?.nextCursor
-        },
-        initialData: {
-          pageParams: [undefined, 1],
-          pages: [initialUpcomingStays],
-        },
-      }
-    )
-
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
-  function loadMoreData() {
-    if (hasNextPage) {
-      fetchNextPage()
-    }
-  }
-
-  const stays = data.pages
-    .filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
-    .flatMap((page) => page.data)
-
-  return stays.length ? (
-    <ListContainer>
-      <Grids.Stackable>
-        {stays.map((stay) => (
-          <OldStayCard key={stay.attributes.confirmationNumber} stay={stay} />
-        ))}
-      </Grids.Stackable>
-      {hasNextPage ? (
-        <ShowMoreButton isPending={isFetching} loadMoreData={loadMoreData} />
-      ) : null}
-    </ListContainer>
-  ) : null
-}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx

@@ -1,4 +1,3 @@
-import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
 import { Section } from "@/components/Section"
@@ -6,8 +5,6 @@ import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import UpcomingStaysCarousel from "./Carousel"
-import EmptyUpcomingStays from "./EmptyUpcomingStays"
-import ClientUpcomingStays from "./OldClient"
 
 import styles from "./upcoming.module.css"
 
@@ -25,7 +22,6 @@ export default async function UpcomingStays({
   const hasStays =
     initialUpcomingStays?.data && initialUpcomingStays.data.length > 0
 
-  if (env.NEW_STAYS_ON_MY_PAGES) {
   if (!hasStays) return null
 
   return (
@@ -36,16 +32,3 @@ export default async function UpcomingStays({
     </Section>
   )
 }
-
-  return (
-    <Section className={styles.container}>
-      {title && <SectionHeader heading={title} link={link} />}
-      {hasStays ? (
-        <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
-      ) : (
-        <EmptyUpcomingStays />
-      )}
-      <SectionLink link={link} variant="mobile" />
-    </Section>
-  )
-}

apps/scandic-web/env/server.ts

@@ -91,13 +91,6 @@ export const env = createEnv({
       .string()
       .optional()
       .transform((s) => s?.split(",") || []),
-    NEW_STAYS_ON_MY_PAGES: z
-      .string()
-      // only allow "true" or "false"
-      .refine((s) => s === "true" || s === "false")
-      // transform to boolean
-      .transform((s) => s === "true")
-      .default("false"),
     SEO_INERT: z
       .string()
       .refine((s) => s === "1" || s === "0")
@@ -166,7 +159,6 @@ export const env = createEnv({
     DTMC_ENTRA_ID_ISSUER: process.env.DTMC_ENTRA_ID_ISSUER,
     DTMC_ENTRA_ID_SECRET: process.env.DTMC_ENTRA_ID_SECRET,
     CHATBOT_LIVE_LANGS: process.env.CHATBOT_LIVE_LANGS,
-    NEW_STAYS_ON_MY_PAGES: process.env.NEW_STAYS_ON_MY_PAGES,
     SEO_INERT: process.env.SEO_INERT,
     ENABLE_PROFILE_CONSENT: process.env.ENABLE_PROFILE_CONSENT,
     RELEASE_TAG: process.env.NEXT_PUBLIC_RELEASE_TAG,

packages/trpc/env/server.ts

@@ -36,13 +36,6 @@ export const env = createEnv({
     SENTRY_ENVIRONMENT: z.string().default("development"),
     PUBLIC_URL: z.string().default(""),
     SALESFORCE_PREFERENCE_BASE_URL: z.string(),
-    NEW_STAYS_ON_MY_PAGES: z
-      .string()
-      // only allow "true" or "false"
-      .refine((s) => s === "true" || s === "false")
-      // transform to boolean
-      .transform((s) => s === "true")
-      .default("false"),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
@@ -63,6 +56,5 @@ export const env = createEnv({
     SENTRY_ENVIRONMENT: process.env.SENTRY_ENVIRONMENT,
     PUBLIC_URL: process.env.NEXT_PUBLIC_PUBLIC_URL,
     SALESFORCE_PREFERENCE_BASE_URL: process.env.SALESFORCE_PREFERENCE_BASE_URL,
-    NEW_STAYS_ON_MY_PAGES: process.env.NEW_STAYS_ON_MY_PAGES,
   },
 })

packages/trpc/lib/routers/user/query/index.ts

@@ -2,7 +2,6 @@ import { BALFWD } from "@scandic-hotels/common/constants/transactionType"
 import { createCounter } from "@scandic-hotels/common/telemetry"
 import { safeTry } from "@scandic-hotels/common/utils/safeTry"
 
-import { env } from "../../../../env/server"
 import { router } from "../../.."
 import * as api from "../../../api"
 import { Transactions } from "../../../enums/transactions"
@@ -186,7 +185,6 @@ export const userQueryRouter = router({
             language
           )
 
-          if (env.NEW_STAYS_ON_MY_PAGES) {
           // When includeFirstStay is true (used by SidePeek), return all stays
           if (includeFirstStay) {
             return {
@@ -207,12 +205,6 @@ export const userQueryRouter = router({
             nextCursor,
           }
         }
-
-          return {
-            data: updatedData,
-            nextCursor,
-          }
-        }
         return null
       }),