fix(SW-236): properly handle expired token in webviews

Trying out a new pattern for errors in data fetching.

Next.js is not a fan of throwing errors. Instead it recommends returning
different shapes for each state. Ref:
https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-expected-errors-from-server-components

It requires some more detailing and a bit more refactoring in non webview part,
but it is a start. This webview specific implementation should not break web.

components/Loyalty/Sidebar/MyPagesNavigation/index.tsx

@@ -1,16 +0,0 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import MyPagesSidebar from "@/components/MyPages/Sidebar"
-
-import { LangParams } from "@/types/params"
-
-export default async function MyPagesNavigation({ lang }: LangParams) {
-  const user = await serverClient().user.name()
-
-  // Check if we have user, that means we are logged in.
-  if (!user) {
-    return null
-  }
-
-  return <MyPagesSidebar lang={lang} />
-}

components/Loyalty/Sidebar/index.tsx

@@ -1,7 +1,7 @@
 import JsonToHtml from "@/components/JsonToHtml"
+import SidebarMyPages from "@/components/MyPages/Sidebar"
 
 import JoinLoyaltyContact from "./JoinLoyalty"
-import MyPagesNavigation from "./MyPagesNavigation"
 
 import styles from "./sidebar.module.css"
 
@@ -44,7 +44,7 @@ export default function SidebarLoyalty({
             switch (block.dynamic_content.component) {
               case LoyaltySidebarDynamicComponentEnum.my_pages_navigation:
                 return (
-                  <MyPagesNavigation
+                  <SidebarMyPages
                     key={`${block.__typename}-${idx}`}
                     lang={lang}
                   />

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -24,7 +24,7 @@ export default async function CurrentBenefitsBlock({
   // TAKE NOTE: we need clarification on how benefits stack from different levels
   // in order to determine if a benefit is specific to a level or if it is a cumulative benefit
   // we might have to add a new boolean property "exclusive" or similar
-  if (!user) {
+  if (!user || "error" in user) {
     return null
   }
   const membership = getMembership(user.memberships)

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -25,7 +25,7 @@ export default async function NextLevelBenefitsBlock({
 }: AccountPageComponentProps) {
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.get()
-  if (!user) {
+  if (!user || "error" in user) {
     return null
   }
   const nextLevel = getMembershipLevelObject(

components/MyPages/Blocks/Overview/index.tsx

@@ -21,7 +21,7 @@ export default async function Overview({
   lang,
 }: AccountPageComponentProps & LangParams) {
   const user = await serverClient().user.get()
-  if (!user) {
+  if (!user || "error" in user) {
     return null
   }
 

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

@@ -21,7 +21,7 @@ export default async function PointsOverview({
   lang,
 }: AccountPageComponentProps & LangParams) {
   const user = await serverClient().user.get()
-  if (!user) {
+  if (!user || "error" in user) {
     return null
   }
 

components/MyPages/Sidebar/index.tsx

@@ -12,7 +12,7 @@ import styles from "./sidebar.module.css"
 
 import type { LangParams } from "@/types/params"
 
-export default async function Sidebar({ lang }: LangParams) {
+export default async function SidebarMyPages({ lang }: LangParams) {
   const navigation = await serverClient().contentstack.myPages.navigation.get()
   const { formatMessage } = await getIntl()
   if (!navigation) {