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

2024-08-28 10:47:57 +02:00
parent b9dbcf7d90
commit af850c90e7
437 changed files with 7663 additions and 9881 deletions
--- a/components/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Sidebar/JoinLoyalty/index.tsx
@@ -0,0 +1,73 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import LoginButton from "@/components/Current/Header/LoginButton"
+import ArrowRight from "@/components/Icons/ArrowRight"
+import { ScandicFriends } from "@/components/Levels"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import Contact from "./Contact"
+
+import styles from "./joinLoyalty.module.css"
+
+import type { JoinLoyaltyContactProps } from "@/types/components/sidebar/joinLoyaltyContact"
+
+export default async function JoinLoyaltyContact({
+  block,
+}: JoinLoyaltyContactProps) {
+  const intl = await getIntl()
+  const user = await serverClient().user.name()
+
+  // Check if we have user, that means we are logged in.
+  if (user) {
+    return null
+  }
+  return (
+    <section>
+      <article className={styles.wrapper}>
+        <Title as="h4" level="h3" textTransform="capitalize">
+          {block.title}
+        </Title>
+        <ScandicFriends color="red" />
+        {block.preamble ? <Body>{block.preamble}</Body> : null}
+        {block.button ? (
+          <Button
+            asChild
+            intent="primary"
+            theme="base"
+            className={styles.button}
+          >
+            <Link
+              href={block.button.href}
+              color="white"
+              target={block.button.openInNewTab ? "_blank" : "_self"}
+            >
+              {block.button.title}
+            </Link>
+          </Button>
+        ) : null}
+        <section className={styles.loginContainer}>
+          <Body>{intl.formatMessage({ id: "Already a friend?" })}</Body>
+          <LoginButton
+            className={styles.link}
+            trackingId="loginJoinLoyalty"
+            position="join scandic friends sidebar"
+            color="burgundy"
+          >
+            <ArrowRight
+              color="burgundy"
+              className={styles.icon}
+              height="20"
+              width="20"
+            />
+            {intl.formatMessage({ id: "Log in here" })}
+          </LoginButton>
+        </section>
+      </article>
+      {block.contact ? <Contact contactBlock={block.contact} /> : null}
+    </section>
+  )
+}