feat: minor UI changes (#624)

* feat: add subtitle create profile modal * feat: add my transactions link in header and size variants only first letter capitalized * feat: add multivariant dropdown in preview
bosonprotocol · May 16, 2023 · fc0e451 · fc0e451
1 parent 5fc6616
commit fc0e451
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 59 deletions.
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -1,5 +1,5 @@
 import { X } from "phosphor-react";
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router-dom";
 import styled, { css } from "styled-components";
 import { useAccount } from "wagmi";
@@ -10,10 +10,15 @@ import { breakpoint } from "../../lib/styles/breakpoint";
 import { colors } from "../../lib/styles/colors";
 import { zIndex } from "../../lib/styles/zIndex";
 import { useBreakpoints } from "../../lib/utils/hooks/useBreakpoints";
+import { useCurrentSellers } from "../../lib/utils/hooks/useCurrentSellers";
+import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryParamsNavigate";
+import { getSellLink } from "../../lib/utils/link";
 import { useCustomStoreQueryParameter } from "../../pages/custom-store/useCustomStoreQueryParameter";
+import { UserRoles } from "../../router/routes";
+import useUserRoles, { checkIfUserHaveRole } from "../../router/useUserRoles";
 import { LinkWithQuery } from "../customNavigation/LinkWithQuery";
 import Layout from "../Layout";
-import ViewTxButton from "../transactions/ViewTxButton";
+import BosonButton from "../ui/BosonButton";
 import Grid from "../ui/Grid";
 import ConnectButton from "./ConnectButton";
 import HeaderLinks, { HEADER_HEIGHT } from "./HeaderLinks";
@@ -227,6 +232,9 @@ interface Props {
 const HeaderComponent = forwardRef<HTMLElement, Props>(
   ({ fluidHeader = false, withBanner = false }, ref) => {
     const { address } = useAccount();
+    const { sellers } = useCurrentSellers();
+    const navigate = useKeepQueryParamsNavigate();
+    const isSeller = !!sellers.length;
     const [isOpen, setOpen] = useState(false);
     const { pathname, search } = useLocation();
     const { isLteS, isLteM, isM } = useBreakpoints();
@@ -254,25 +262,55 @@ const HeaderComponent = forwardRef<HTMLElement, Props>(
         setOpen(true);
       }
     }, [isLteM, isM, isOpen, setOpen, isSideNavBar]);
+    const { roles } = useUserRoles({ role: [] });
+    const supportFunctionality = useCustomStoreQueryParameter<
+      ("buyer" | "seller" | "dr")[]
+    >("supportFunctionality", { parseJson: true });
+    const isCustomStoreFront =
+      useCustomStoreQueryParameter("isCustomStoreFront");
+    const onlyBuyer =
+      typeof supportFunctionality != "string" &&
+      supportFunctionality?.length === 1 &&
+      supportFunctionality?.[0] === "buyer";
+    const isSupportFunctionalityDefined = supportFunctionality !== "";
+    const showSellButton =
+      ((isSupportFunctionalityDefined && !onlyBuyer) ||
+        !isSupportFunctionalityDefined) &&
+      checkIfUserHaveRole(roles, [UserRoles.Guest, UserRoles.Seller], false) &&
+      !isCustomStoreFront;
 
+    const sellUrl = useMemo(() => {
+      return getSellLink({
+        isAccountSeller: isSeller,
+        address
+      });
+    }, [address, isSeller]);
     const Connect = useCallback(
       (props: Parameters<typeof ConnectButton>[0]) => {
         return (
           <>
             <ConnectButton {...props} showAddress={!address} />
-            {address && (
+            {address && showSellButton && (
               <Grid
                 flexBasis="content"
                 margin={isSideNavBar ? "0" : "0 0 0 1rem"}
                 {...(isSideNavBar && { justifyContent: "center" })}
               >
-                <ViewTxButton />
+                <BosonButton
+                  variant="accentInverted"
+                  style={{ height: "auto" }}
+                  onClick={() => {
+                    navigate({ pathname: sellUrl });
+                  }}
+                >
+                  {isSeller ? "Create products" : "Sell on Boson"}
+                </BosonButton>
               </Grid>
             )}
           </>
         );
       },
-      [address, isSideNavBar]
+      [address, isSideNavBar, isSeller, showSellButton, navigate, sellUrl]
     );
 
     return (

diff --git a/src/components/header/HeaderLinks.tsx b/src/components/header/HeaderLinks.tsx
@@ -12,6 +12,7 @@ import { useCustomStoreQueryParameter } from "../../pages/custom-store/useCustom
 import { UserRoles } from "../../router/routes";
 import useUserRoles, { checkIfUserHaveRole } from "../../router/useUserRoles";
 import { LinkWithQuery } from "../customNavigation/LinkWithQuery";
+import ViewTxButton from "../transactions/ViewTxButton";
 import Search from "./Search";
 
 export const HEADER_HEIGHT = "5.4rem";
@@ -28,7 +29,8 @@ const NavigationLinks = styled.div<{
     flex: 1;
   }
   height: 100%;
-  a {
+  a,
+  [data-anchor] {
     color: var(--headerTextColor, ${colors.black});
     :hover {
       background-color: ${colors.border};
@@ -55,7 +57,8 @@ const NavigationLinks = styled.div<{
           bottom: 0;
           height: 100vh;
           transform: ${isOpen ? "translateX(0%)" : "translateX(100%)"};
-          a {
+          a,
+          [data-anchor] {
             display: flex;
             align-items: center;
             cursor: pointer;
@@ -109,13 +112,14 @@ const NavigationLinks = styled.div<{
               width: 100%;
               align-items: stretch;
               justify-content: space-between;
-              a {
+              a,
+              [data-anchor] {
                 justify-content: center;
                 padding: 1rem;
               }
             `;
           }}
-          a {
+          a, [data-anchor] {
             display: flex;
             align-items: center;
             cursor: pointer;
@@ -198,16 +202,6 @@ export default function HeaderLinks({
         navigationBarPosition={navigationBarPosition}
       />
       <Links isMobile={isMobile} $navigationBarPosition={navigationBarPosition}>
-        {((isSupportFunctionalityDefined && !onlyBuyer) ||
-          !isSupportFunctionalityDefined) &&
-          checkIfUserHaveRole(
-            roles,
-            [UserRoles.Guest, UserRoles.Seller],
-            false
-          ) &&
-          !isCustomStoreFront && (
-            <LinkWithQuery to={sellUrl}>Sell</LinkWithQuery>
-          )}
         {!onlySeller && (
           <LinkWithQuery to={BosonRoutes.Explore}>
             Explore Products
@@ -225,6 +219,7 @@ export default function HeaderLinks({
               Dispute Admin
             </LinkWithQuery>
           )}
+        {address && <ViewTxButton />}
       </Links>
     </NavigationLinks>
   );

diff --git a/src/components/modal/components/Profile/Regular/RegularProfileForm.tsx b/src/components/modal/components/Profile/Regular/RegularProfileForm.tsx
@@ -32,9 +32,17 @@ export default function RegularProfileForm({
         margin="0 0 2rem 0"
         flex="1"
       >
-        <Typography $fontSize="2rem" fontWeight="600">
-          {isEdit ? "Regular profile" : "Create your profile"}
-        </Typography>
+        <Grid flexDirection="column" alignItems="flex-start">
+          <Typography $fontSize="2rem" fontWeight="600">
+            {isEdit ? "Regular profile" : "Create your profile"}
+          </Typography>
+          {!isEdit && (
+            <Typography>
+              To begin selling on the BosonApp, start by creating a profile and
+              seller account
+            </Typography>
+          )}
+        </Grid>
         <div>
           <SwitchButton />
         </div>

diff --git a/src/components/product/ConfirmProductDetails.tsx b/src/components/product/ConfirmProductDetails.tsx
@@ -458,6 +458,7 @@ export default function ConfirmProductDetails({
               justifyContent="flex-start"
               alignItems="flex-start"
               flexWrap="wrap"
+              flex="1 1"
             >
               {!isMultiVariant && (
                 <>
@@ -509,7 +510,11 @@ export default function ConfirmProductDetails({
                 </>
               )}
             </Grid>
-            <Grid justifyContent="flex-start" alignItems="flex-start">
+            <Grid
+              justifyContent="flex-start"
+              alignItems="flex-start"
+              flex="1 1"
+            >
               <GridBox $minWidth="16rem">
                 <FormFieldContainer
                   style={{

diff --git a/src/components/product/Preview.tsx b/src/components/product/Preview.tsx
@@ -9,10 +9,13 @@ import Image from "../../components/ui/Image";
 import SellerID from "../../components/ui/SellerID";
 import { CONFIG } from "../../lib/config";
 import { colors } from "../../lib/styles/colors";
+import { isTruthy } from "../../lib/types/helpers";
 import { Offer } from "../../lib/types/offer";
 import { useDisputeResolver } from "../../lib/utils/hooks/useDisputeResolver";
 import { fixformattedString } from "../../lib/utils/number";
 import { buildCondition } from "../../pages/create-product/utils/buildCondition";
+import { VariantV1 } from "../../pages/products/types";
+import VariationSelects from "../../pages/products/VariationSelects";
 import { Token } from "../convertion-rate/ConvertionRateContext";
 import {
   DarkerBackground,
@@ -252,7 +255,21 @@ export default function Preview({
     value: values.productType?.productType?.toUpperCase() || ""
   });
   const animationUrl = values.productAnimation?.[0]?.src;
-
+  const variant: VariantV1 = {
+    offer,
+    variations: [
+      ...(values.productVariants?.colors?.filter(isTruthy).map((color) => ({
+        id: color,
+        option: color,
+        type: "Color" as const
+      })) ?? []),
+      ...(values.productVariants?.sizes?.filter(isTruthy).map((size) => ({
+        id: size,
+        option: size,
+        type: "Size" as const
+      })) ?? [])
+    ]
+  };
   return (
     <PreviewWrapper>
       <PreviewWrapperContent>
@@ -289,6 +306,13 @@ export default function Preview({
                 >
                   {name}
                 </Typography>
+                {isMultiVariant && (
+                  <VariationSelects
+                    selectedVariant={variant as VariantV1}
+                    variants={[variant] as VariantV1[]}
+                    disabled
+                  />
+                )}
                 <DetailWidget
                   isPreview={true}
                   pageType="offer"

diff --git a/src/components/product/ProductVariants.tsx b/src/components/product/ProductVariants.tsx
@@ -72,7 +72,6 @@ const TBody = styled.tbody`
 `;
 
 const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
-const capitalizeAll = (str: string) => str.toUpperCase();
 const getColorSizeKey = (color: string, size?: string) =>
   size ? `${color}_${size}` : color;
 
@@ -264,7 +263,7 @@ export default function ProductVariants() {
               name={variantsSizesKey}
               onAddTag={(tag) => onAddTagType("size", [tag])}
               onRemoveTag={(tag) => onRemoveTagType("size", tag)}
-              transform={capitalizeAll}
+              transform={capitalize}
               label="Size:"
             />
           </Grid>

diff --git a/src/components/transactions/ViewTxButton.tsx b/src/components/transactions/ViewTxButton.tsx
@@ -4,7 +4,6 @@ import { usePendingTransactionsStore } from "../../lib/utils/hooks/transactions/
 import { useCoreSDK } from "../../lib/utils/useCoreSdk";
 import { Spinner } from "../loading/Spinner";
 import { useModal } from "../modal/useModal";
-import BosonButton from "../ui/BosonButton";
 import Grid from "../ui/Grid";
 
 export default function ViewTxButton() {
@@ -36,35 +35,29 @@ export default function ViewTxButton() {
   const numPendingTx = transactions.length;
 
   return (
-    <>
-      <BosonButton
-        variant="accentInverted"
-        onClick={(e) => {
-          e.stopPropagation();
-          showModal(
-            "RECENT_TRANSACTIONS",
-            {
-              title: "Recent Transactions"
-            },
-            "m"
-          );
-        }}
-      >
-        <Grid
-          $width="initial"
-          gap="0.5rem"
-          alignItems="center"
-          flexWrap="nowrap"
-        >
-          {numPendingTx ? (
-            <>
-              <span>{numPendingTx}</span> Pending <Spinner size={15} />
-            </>
-          ) : (
-            <>Transactions</>
-          )}
-        </Grid>
-      </BosonButton>
-    </>
+    <Grid
+      $width="initial"
+      gap="0.5rem"
+      alignItems="center"
+      flexWrap="nowrap"
+      data-anchor
+      onClick={() => {
+        showModal(
+          "RECENT_TRANSACTIONS",
+          {
+            title: "Recent Transactions"
+          },
+          "m"
+        );
+      }}
+    >
+      {numPendingTx ? (
+        <>
+          <span>{numPendingTx}</span> Pending <Spinner size={15} />
+        </>
+      ) : (
+        <>My Transactions</>
+      )}
+    </Grid>
   );
 }
diff --git a/src/lib/styles/GlobalStyle.tsx b/src/lib/styles/GlobalStyle.tsx
@@ -134,7 +134,7 @@ const GlobalStyle = createGlobalStyle<{
   button,
   input,
   select,
-  textarea {
+  textarea, [data-anchor] {
     text-decoration: none;
     &:focus,
     &:hover {
@@ -178,7 +178,7 @@ const GlobalStyle = createGlobalStyle<{
     line-height: 1.5;
     margin: 0 0 1rem 0;
   }
-  a, p, span, div {
+  a, p, span, div, [data-anchor] {
     font-size: 1rem;
     line-height: 1.5;
   }