fix: preview of new products for new sellers

package.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/react-kit": "^0.30.0-alpha.0",
+    "@bosonprotocol/react-kit": "^0.30.0-alpha.7",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.7.0",

src/components/footer/Footer.tsx

@@ -89,18 +89,18 @@ const CustomGridContainer = styled.div`
 `;
 
 interface INavigationLinks {
-  flexDirection?: "row" | "column";
-  gap?: string;
+  $flexDirection?: "row" | "column";
+  $gap?: string;
 }
 
 const NavigationLinks = styled.nav<INavigationLinks>`
   display: flex;
-  gap: ${({ gap }) => gap || "16px"};
+  gap: ${({ $gap }) => $gap || "16px"};
   flex-wrap: wrap;
   align-items: self-start;
   max-width: 100%;
   justify-content: center;
-  flex-direction: ${({ flexDirection }) => flexDirection || "row"};
+  flex-direction: ${({ $flexDirection }) => $flexDirection || "row"};
 
   a {
     cursor: pointer;
@@ -163,7 +163,7 @@ function Socials() {
         </Typography>
       )}
       <NavigationLinks
-        gap={isLteS && !isXXS ? "16px" : "32px"}
+        $gap={isLteS && !isXXS ? "16px" : "32px"}
         style={{ justifyContent: "flex-start" }}
       >
         {renderSocialLinks}
@@ -228,8 +228,8 @@ function ContactInfoLinks() {
         GET IN TOUCH
       </Typography>
       <NavigationLinks
-        flexDirection="column"
-        gap={"0"}
+        $flexDirection="column"
+        $gap={"0"}
         style={{ alignItems: "center", justifyContent: "flex-end" }}
       >
         {renderContactInfoLinks}
@@ -266,8 +266,8 @@ function CustomStoreAdditionalLinks() {
         CLIENT SERVICE
       </Typography>
       <NavigationLinks
-        flexDirection="column"
-        gap={"0"}
+        $flexDirection="column"
+        $gap={"0"}
         style={{ alignItems: "flex-start", justifyContent: "flex-end" }}
       >
         {renderAdditionalLinks}
@@ -476,8 +476,8 @@ function FullFooter() {
                   <div>
                     <Typography tag="h5">Shop</Typography>
                     <NavigationLinks
-                      flexDirection="column"
-                      gap={"0"}
+                      $flexDirection="column"
+                      $gap={"0"}
                       style={{ width: "fit-content" }}
                     >
                       {shopLinks}
@@ -488,8 +488,8 @@ function FullFooter() {
                   <div>
                     <Typography tag="h5">Sell</Typography>
                     <NavigationLinks
-                      flexDirection="column"
-                      gap={"0"}
+                      $flexDirection="column"
+                      $gap={"0"}
                       style={{ width: "fit-content" }}
                     >
                       {sellLinks}
@@ -500,8 +500,8 @@ function FullFooter() {
                   <div>
                     <Typography tag="h5">Help</Typography>
                     <NavigationLinks
-                      flexDirection="column"
-                      gap={"0"}
+                      $flexDirection="column"
+                      $gap={"0"}
                       style={{ width: "fit-content" }}
                     >
                       {helpLinks}

src/components/header/DrCenterHeader.tsx

@@ -47,32 +47,32 @@ const Header = styled.header`
 `;
 
 const HeaderContainer = styled(Layout)<{
-  fluidHeader?: boolean;
+  $fluidHeader?: boolean;
 }>`
-  ${({ fluidHeader }) => {
+  ${({ $fluidHeader }) => {
     return css`
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: ${HEADER_HEIGHT};
       ${breakpoint.xs} {
-        max-width: ${fluidHeader ? "none" : "93.75rem;"};
+        max-width: ${$fluidHeader ? "none" : "93.75rem;"};
       }
     `;
   }}
 `;
 
 const HeaderItems = styled.nav<{
-  fluidHeader?: boolean;
+  $fluidHeader?: boolean;
 }>`
   gap: 1rem;
-  ${({ fluidHeader }) => {
+  ${({ $fluidHeader }) => {
     return css`
       display: flex;
       align-items: center;
       justify-content: end;
       width: 100%;
-      margin-left: ${fluidHeader ? "2.3rem" : "0"};
+      margin-left: ${$fluidHeader ? "2.3rem" : "0"};
     `;
   }}
 `;
@@ -103,7 +103,7 @@ export const DrCenterHeader = forwardRef<HTMLElement, DrCenterHeaderProps>(
     return (
       <>
         <Header ref={ref}>
-          <HeaderContainer fluidHeader={fluidHeader}>
+          <HeaderContainer $fluidHeader={fluidHeader}>
             <>
               <Grid flexDirection="row" alignItems="center" width="initial">
                 <LinkWithQuery
@@ -119,7 +119,7 @@ export const DrCenterHeader = forwardRef<HTMLElement, DrCenterHeaderProps>(
                   />
                 </LinkWithQuery>
               </Grid>
-              <HeaderItems fluidHeader={fluidHeader}>
+              <HeaderItems $fluidHeader={fluidHeader}>
                 {burgerMenuBreakpoint && (
                   <>
                     <ChainSelector />

src/components/header/Header.tsx

@@ -146,10 +146,10 @@ const Header = styled.header<{
 `;
 
 const HeaderContainer = styled(Layout)<{
-  fluidHeader?: boolean;
+  $fluidHeader?: boolean;
   $navigationBarPosition: string;
 }>`
-  ${({ $navigationBarPosition, fluidHeader }) => {
+  ${({ $navigationBarPosition, $fluidHeader }) => {
     if (["left", "right"].includes($navigationBarPosition)) {
       return css`
         display: flex;
@@ -170,7 +170,7 @@ const HeaderContainer = styled(Layout)<{
       align-items: center;
       height: ${HEADER_HEIGHT};
       ${breakpoint.xs} {
-        max-width: ${fluidHeader ? "none" : "93.75rem;"};
+        max-width: ${$fluidHeader ? "none" : "93.75rem;"};
       }
     `;
   }}
@@ -340,7 +340,7 @@ export const HeaderComponent = forwardRef<HTMLElement, Props>(
         >
           {!isCustomStoreFront && <AnnouncementBanner />}
           <HeaderContainer
-            fluidHeader={fluidHeader}
+            $fluidHeader={fluidHeader}
             $navigationBarPosition={navigationBarPosition}
           >
             {isSideBurgerVisible ? (

src/components/header/HeaderLinks.tsx

@@ -21,8 +21,8 @@ import Search from "./Search";
 export const HEADER_HEIGHT = "5.4rem";
 
 const NavigationLinks = styled.div<{
-  isMobile: boolean;
-  isOpen: boolean;
+  $isMobile: boolean;
+  $isOpen: boolean;
   $navigationBarPosition?: string;
   $hoverHeaderTextColor: string;
 }>`
@@ -40,16 +40,16 @@ const NavigationLinks = styled.div<{
       color: ${({ $hoverHeaderTextColor }) => $hoverHeaderTextColor};
     }
   }
-  ${({ isMobile, isOpen, $navigationBarPosition }) =>
-    isMobile
+  ${({ $isMobile, $isOpen, $navigationBarPosition }) =>
+    $isMobile
       ? css`
           position: absolute;
           top: calc(${HEADER_HEIGHT} + 1px);
           left: 0;
           right: 0;
           bottom: 0;
           height: 100vh;
-          transform: ${isOpen ? "translateX(0%)" : "translateX(100%)"};
+          transform: ${$isOpen ? "translateX(0%)" : "translateX(100%)"};
 
           a,
           [data-anchor] {
@@ -131,22 +131,22 @@ const NavigationLinks = styled.div<{
 `;
 
 const ItemsList = styled.div<{
-  isMobile: boolean;
+  $isMobile: boolean;
   $navigationBarPosition?: string;
 }>`
   display: flex;
   justify-content: end;
-  flex-direction: ${({ isMobile, $navigationBarPosition }) =>
-    isMobile || ["left", "right"].includes($navigationBarPosition ?? "")
+  flex-direction: ${({ $isMobile, $navigationBarPosition }) =>
+    $isMobile || ["left", "right"].includes($navigationBarPosition ?? "")
       ? "column"
       : "row"};
   align-items: ${({ $navigationBarPosition }) =>
     ["left", "right"].includes($navigationBarPosition ?? "") ? "center" : ""};
   > * {
     padding: 2rem;
   }
-  ${({ isMobile }) =>
-    !isMobile &&
+  ${({ $isMobile }) =>
+    !$isMobile &&
     css`
       gap: 1rem;
     `}
@@ -191,8 +191,8 @@ export default function HeaderLinks({
 
   return (
     <NavigationLinks
-      isMobile={isMobile}
-      isOpen={isOpen}
+      $isMobile={isMobile}
+      $isOpen={isOpen}
       $navigationBarPosition={navigationBarPosition}
       $hoverHeaderTextColor={getColor1OverColor2WithContrast({
         color2: useCSSVariable("--headerBgColor") || colors.white,
@@ -206,7 +206,7 @@ export default function HeaderLinks({
         />
       )}
       <ItemsList
-        isMobile={isMobile}
+        $isMobile={isMobile}
         $navigationBarPosition={navigationBarPosition}
       >
         {!onlySeller && withExploreProducts && (

src/components/header/Search.tsx

@@ -10,7 +10,7 @@ import BosonButton from "../ui/BosonButton";
 import { Grid } from "../ui/Grid";
 
 const InputWrapper = styled(Grid)<{
-  isMobile: boolean;
+  $isMobile: boolean;
   $navigationBarPosition?: string;
 }>`
   flex: 1;
@@ -22,8 +22,8 @@ const InputWrapper = styled(Grid)<{
 
   margin: 0rem;
 
-  ${({ isMobile, $navigationBarPosition }) =>
-    isMobile
+  ${({ $isMobile, $navigationBarPosition }) =>
+    $isMobile
       ? ""
       : ["left", "right"].includes($navigationBarPosition ?? "")
         ? css`
@@ -82,7 +82,7 @@ export default function Search({ isMobile, navigationBarPosition }: Props) {
 
   return (
     <InputWrapper
-      isMobile={isMobile}
+      $isMobile={isMobile}
       $navigationBarPosition={navigationBarPosition}
     >
       {!isMobile && <MagnifyingGlass size={24} style={{ minWidth: "24px" }} />}

src/components/header/accountDrawer/miniPortfolio/index.tsx

@@ -23,7 +23,7 @@ const Nav = styled(Grid)`
   gap: 20px;
 `;
 
-const NavItem = styled(Typography)<{ active?: boolean }>`
+const NavItem = styled(Typography)`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -65,11 +65,7 @@ export default function MiniPortfolio({ account }: { account: string }) {
             setCurrentPage(index);
           };
           return (
-            <NavItem
-              onClick={handleNavItemClick}
-              active={currentPage === index}
-              key={key}
-            >
+            <NavItem onClick={handleNavItemClick} key={key}>
               <span>{title}</span>
             </NavItem>
           );

src/components/header/identicon/index.tsx

@@ -4,9 +4,9 @@ import useENSAvatar from "lib/utils/hooks/useENSAvatar";
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
-const StyledIdenticon = styled.div<{ iconSize: number }>`
-  height: ${({ iconSize }) => `${iconSize}px`};
-  width: ${({ iconSize }) => `${iconSize}px`};
+const StyledIdenticon = styled.div<{ $iconSize: number }>`
+  height: ${({ $iconSize }) => `${$iconSize}px`};
+  width: ${({ $iconSize }) => `${$iconSize}px`};
   border-radius: 50%;
   background-color: ${colors.lightGrey};
   font-size: initial;
@@ -52,7 +52,7 @@ export default function Identicon({
   const handleError = useCallback(() => setFetchable(false), []);
 
   return (
-    <StyledIdenticon iconSize={iconSize}>
+    <StyledIdenticon $iconSize={iconSize}>
       {avatar && fetchable ? (
         <StyledAvatar
           alt="avatar"

src/components/layout/Layout.tsx

@@ -21,10 +21,10 @@ const layoutPadding = css`
   }
 `;
 
-export const LayoutRoot = styled.div<{ fullWidth?: boolean }>`
+export const LayoutRoot = styled.div<{ $fullWidth?: boolean }>`
   position: relative;
-  ${({ fullWidth }) => {
-    if (fullWidth) {
+  ${({ $fullWidth }) => {
+    if ($fullWidth) {
       return css``;
     }
     return css`
@@ -55,7 +55,7 @@ export default function Layout({
   const [fullWidth, setFullWidth] = useState<boolean>(!!initialFullWidth);
   return (
     <LayoutContext.Provider value={{ fullWidth: fullWidth, setFullWidth }}>
-      <LayoutRoot {...props} fullWidth={fullWidth} data-layout>
+      <LayoutRoot {...props} $fullWidth={fullWidth} data-layout>
         {children}
       </LayoutRoot>
     </LayoutContext.Provider>

src/components/product/Preview.tsx

@@ -1,6 +1,7 @@
 import { Grid, subgraph } from "@bosonprotocol/react-kit";
 import { CommitDetailWidget } from "components/detail/DetailWidget/CommitDetailWidget";
 import { Spinner } from "components/loading/Spinner";
+import Loading from "components/ui/Loading";
 import { ChatInitializationStatus } from "lib/utils/hooks/chat/useChatStatus";
 import map from "lodash/map";
 import { useChatContext } from "pages/chat/ChatProvider/ChatContext";
@@ -25,7 +26,7 @@ import BosonButton from "../ui/BosonButton";
 import { Typography } from "../ui/Typography";
 import Video from "../ui/Video";
 import { ConfirmProductDetailsButtonGroup } from "./confirmProductDetailsPage/ConfirmProductDetails.styles";
-import { usePreviewOffers } from "./utils/usePreviewOffer";
+import { usePreviewOffers } from "./utils/usePreviewOffers";
 const ObjectContainImage = styled(Image)`
   > * {
     object-fit: contain;
@@ -88,6 +89,20 @@ export default function Preview({
   });
   // Build the Offer structure (in the shape of SubGraph request), based on temporary data (values)
   const [offer] = previewOffers;
+  if (!offer.seller) {
+    return (
+      <>
+        <Loading />
+        <BosonButton
+          variant="accentInverted"
+          type="button"
+          onClick={handleClosePreview}
+        >
+          Back to overview
+        </BosonButton>
+      </>
+    );
+  }
   /*
   // TODO: hidden for now
   const redemptionPointUrl =