feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/Points/Overview/Points/index.tsx

@@ -0,0 +1,59 @@
+import { MembershipLevelEnum } from "@/constants/membershipLevels"
+
+import { getIntl } from "@/i18n"
+import { getMembershipLevelObject } from "@/utils/membershipLevel"
+import { getMembership } from "@/utils/user"
+
+import PointsContainer from "../../../Overview/Stats/Points/Container"
+import {
+  NextLevelNightsColumn,
+  NextLevelPointsColumn,
+  StayOnLevelColumn,
+  YourPointsColumn,
+} from "../../../Overview/Stats/Points/PointsColumn"
+
+import { UserProps } from "@/types/components/myPages/user"
+import { LangParams } from "@/types/params"
+
+/* TODO */
+export default async function Points({ user, lang }: UserProps & LangParams) {
+  const { formatMessage } = await getIntl()
+
+  const membership = getMembership(user.memberships)
+  const nextLevel = getMembershipLevelObject(
+    membership?.nextLevel as MembershipLevelEnum,
+    lang
+  )
+
+  return (
+    <PointsContainer>
+      <YourPointsColumn points={membership?.currentPoints} />
+      {nextLevel && (
+        <>
+          {membership?.currentPoints ? (
+            <StayOnLevelColumn
+              points={membership?.currentPoints} //TODO
+              subtitle={`${formatMessage({ id: "by" })} ${membership?.expirationDate}`}
+            />
+          ) : (
+            <>
+              <NextLevelPointsColumn
+                points={membership?.pointsRequiredToNextlevel}
+                subtitle={`${formatMessage({ id: "next level:" })} ${nextLevel.name}`}
+              />
+              {membership?.nightsToTopTier && (
+                <NextLevelNightsColumn
+                  nights={membership.nightsToTopTier}
+                  subtitle={
+                    membership.tierExpirationDate &&
+                    `by ${membership.tierExpirationDate}`
+                  }
+                />
+              )}
+            </>
+          )}
+        </>
+      )}
+    </PointsContainer>
+  )
+}

components/Blocks/DynamicContent/Points/Overview/index.tsx

@@ -0,0 +1,40 @@
+import { getProfile } from "@/lib/trpc/memoizedRequests"
+
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import Friend from "../../Overview/Friend"
+import Hero from "../../Overview/Friend/Hero"
+import MembershipNumber from "../../Overview/Friend/MembershipNumber"
+import Stats from "../../Overview/Stats"
+
+import styles from "./overview.module.css"
+
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function PointsOverview({
+  link,
+  subtitle,
+  title,
+}: AccountPageComponentProps) {
+  const user = await getProfile()
+  if (!user || "error" in user) {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionHeader link={link} preamble={subtitle} title={title} topTitle />
+      <Hero color="burgundy">
+        <Friend membership={user.membership} name={user.name}>
+          <MembershipNumber color="red" membership={user.membership} />
+        </Friend>
+        <Divider className={styles.divider} color="peach" />
+        <Stats user={user} />
+      </Hero>
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}

components/Blocks/DynamicContent/Points/Overview/overview.module.css

@@ -0,0 +1,9 @@
+.divider {
+  padding-top: var(--Spacing-x2);
+}
+
+@media screen and (min-width: 768px) {
+  .divider {
+    display: none;
+  }
+}