Merged in feat/sw-1732-trigger-tier-match (pull request #1408)

SW-1732 Trigger SAS tier match

* Add endpoint for SAS tier match

* Add comment about future fix

* Move tier match to background request on my-pages/*

* Log result from tier match

* Clean up name etc

* Fix tier matched toast

Approved-by: Joakim Jäderberg

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/LevelUpgradeButton.tsx

@@ -1,50 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import { trpc } from "@/lib/trpc/client"
-
-import Refresh from "@/components/Icons/Refresh"
-import { Loading } from "@/components/Loading"
-import Button from "@/components/TempDesignSystem/Button"
-import { toast } from "@/components/TempDesignSystem/Toasts"
-
-import styles from "./levelupgradebutton.module.css"
-
-export function LevelUpgradeButton() {
-  const intl = useIntl()
-
-  const { mutate, isPending } =
-    trpc.partner.sas.performLevelUpgrade.useMutation({
-      onSuccess() {
-        toast.success(intl.formatMessage({ id: "Level upgraded" }))
-      },
-      onError() {
-        toast.error(intl.formatMessage({ id: "Failed to upgrade level" }))
-      },
-    })
-
-  const handleClick = () => {
-    mutate()
-  }
-
-  return (
-    <>
-      <Button
-        intent="primary"
-        theme="primaryLight"
-        onClick={handleClick}
-        className={styles.button}
-      >
-        <div
-          className={styles.textContainer}
-          style={{ visibility: isPending ? "hidden" : "visible" }}
-        >
-          <Refresh color="currentColor" />
-          {intl.formatMessage({ id: "Check for level upgrade" })}
-        </div>
-        {isPending && <Loading color="white" className={styles.loading} />}
-      </Button>
-    </>
-  )
-}

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/levelupgradebutton.module.css

@@ -1,25 +0,0 @@
-.button {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-
-  & .textContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: var(--Spacing-x1);
-  }
-
-  @media screen and (min-width: 768px) {
-    width: fit-content;
-  }
-}
-
-.loading {
-  position: absolute;
-  &.hidden {
-    opacity: 0;
-  }
-}

apps/scandic-web/components/MyPages/SASLevelUpgradeCheck.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { useIntl } from "react-intl"
+
+import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels"
+import { trpc } from "@/lib/trpc/client"
+
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+export function SASLevelUpgradeCheck() {
+  const firedRef = useRef(false)
+  const intl = useIntl()
+
+  const { mutate } = trpc.partner.sas.performLevelUpgrade.useMutation({
+    onSuccess(result) {
+      switch (result.tierMatchState) {
+        case "matched":
+          toast.success(
+            intl.formatMessage(
+              {
+                id: "Your SAS level has upgraded you to {level}!",
+              },
+              {
+                level: TIER_TO_FRIEND_MAP[result.toLevel],
+              }
+            )
+          )
+          break
+        // TODO remove the logs, but keep for now to ease testing
+        case "notLinked":
+          console.log("[sas] not linked - this should never happen")
+          break
+        case "error":
+          console.log("[sas] something went wrong")
+          break
+        case "cached":
+          console.log("[sas] cached")
+          break
+        case "alreadyMatched":
+          console.log("[sas] already matched")
+          break
+      }
+    },
+    onError() {
+      console.log("[sas] something went wrong")
+    },
+  })
+
+  useEffect(() => {
+    // We must make sure this only runs once to avoid sending multiple notifications to the user.
+    // This aint great, but this entire thing is temporary until tier matching is event based on the server.
+    if (firedRef.current) {
+      return
+    }
+
+    mutate()
+    firedRef.current = true
+  }, [mutate])
+
+  return null
+}

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

@@ -1,16 +1,23 @@
 import { logout } from "@/constants/routes/handleAuth"
+import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
+import { SASLevelUpgradeCheck } from "@/components/MyPages/SASLevelUpgradeCheck"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
+import { getEurobonusMembership } from "@/utils/user"
 
 import styles from "./sidebar.module.css"
 
 export default async function SidebarMyPages() {
   const intl = await getIntl()
+  const profile = await getProfileSafely()
+  const eurobonusMembership = profile
+    ? getEurobonusMembership(profile.memberships)
+    : null
 
   return (
     <aside className={styles.sidebar}>
@@ -22,6 +29,7 @@ export default async function SidebarMyPages() {
         <PrimaryLinks />
         <SecondaryLinks />
       </nav>
+      {eurobonusMembership && <SASLevelUpgradeCheck />}
     </aside>
   )
 }