@bosonprotocol/react-kit 0.37.0-alpha.1 → 0.37.0-alpha.3

package/src/components/productCard/ProductCard.styles.ts

@@ -3,15 +3,22 @@ import { colors, getCssVar } from "../../theme";
 import { cardWrapperStyles } from "./commonStyles";
 import { Typography } from "../ui/Typography";
 import { zIndex } from "../ui/zIndex";
+import { buttonBorderRadius } from "../../borders";
+import { ExchangeCardStatus } from "../exchangeCard/types";
 
 export const ProductCardLabelWrapper = styled.div`
-  position: absolute;
-  top: 0.5rem;
-  left: 0.5rem;
-  background: white;
-  font-weight: 600;
-  color: ${colors.greyDark};
   z-index: 1;
+  position: relative;
+  background-color: ${getCssVar("--main-text-color")};
+  color: ${getCssVar("--background-accent-color")};
+  border-radius: ${buttonBorderRadius["mid"]};
+  padding: 0.125rem 0.5rem 0.125rem 0.25rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+  left: 0;
 `;
 
 export const ProductCardCreator = styled.div`
@@ -53,15 +60,7 @@ export const ProductCardCreatorName = styled.div`
 export const ProductCardTitle = styled(Typography).attrs({
   className: "title"
 })`
-  word-break: break-word;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-height: 1.5em;
   max-height: calc(1.5em * 2);
-  white-space: nowrap;
-  text-overflow: ellipsis;
 `;
 
 export const ProductCardPriceWrapper = styled.div`
@@ -105,6 +104,7 @@ export const ProductCardBottomContent = styled.div`
 export const ProductCardTitleWrapper = styled.div`
   width: 100%;
   box-sizing: border-box;
+  align-items: flex-start;
 `;
 
 export const ProductCardWrapper = styled.div<{
@@ -121,15 +121,12 @@ export const ProductCardWrapper = styled.div<{
   flex-direction: column;
   min-height: 286px;
   height: 286px;
-  padding: 0 1rem 1rem 1rem;
   ${({ $isHoverDisabled }) =>
     $isHoverDisabled
       ? ""
       : css`
           transition: all 300ms ease-in-out;
           &:hover {
-            border: 2px solid ${colors.border};
-
             [data-image-wrapper] {
               width: 110%;
               img {
@@ -235,10 +232,52 @@ export const CTAOnHoverContainer = styled.div<{ $isHovered: boolean }>`
 export const ProductTypeWrapper = styled.div`
   background-color: ${colors.black};
   color: ${colors.white};
-  display: flex;
   align-items: center;
   gap: 0.25rem;
-  padding: 0.1563rem 0.25rem;
   border-radius: ${getCssVar("--button-border-radius")};
   margin-top: 0.5rem;
+  padding: 0.125rem 0.5rem 0.125rem 0.25rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+  left: 0;
+`;
+
+export const ProductExchangeStatus = styled.div<{
+  $status: ExchangeCardStatus;
+}>`
+  position: absolute;
+  z-index: 10;
+  letter-spacing: 0.5px;
+  line-height: 16px;
+  font-weight: 600;
+  font-size: 0.75rem;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  &:first-letter {
+    text-transform: uppercase;
+  }
+  background: ${({ $status }) => {
+    switch ($status) {
+      case "REDEEMED":
+      case "CANCELLED":
+        return colors.green;
+      case "COMMITTED":
+        return colors.violet;
+      default:
+        return colors.white;
+    }
+  }};
+  color: ${({ $status }) => {
+    switch ($status) {
+      case "COMMITTED":
+        return colors.white;
+      default:
+        return colors.black;
+    }
+  }};
+  left: 0.5rem;
+  top: 24px;
 `;

package/src/components/productCard/ProductCard.tsx

@@ -22,12 +22,17 @@ import { ProductType } from "./const";
 import { Grid } from "../ui/Grid";
 import { CircleHalf } from "phosphor-react";
 import { isMobile } from "../../lib/userAgent/userAgent";
+import { Typography } from "../ui/Typography";
+import { getCssVar } from "../../theme";
+import { ExchangeCardStatus } from "../exchangeCard/types";
 
 export const PhygitalLabel = () => {
   return (
     <ProductTypeWrapper>
       <CircleHalf />
-      Phygital
+      <Typography fontSize={"0.75rem"} fontWeight={600}>
+        Phygital
+      </Typography>
     </ProductTypeWrapper>
   );
 };
@@ -54,6 +59,7 @@ export interface IProductCard {
   isImageFitCover?: boolean;
   className?: string;
   currencyColor?: CurrencyDisplayProps["color"];
+  status?: ExchangeCardStatus;
 }
 
 const Wrapper = ({
@@ -89,7 +95,7 @@ export const ProductCard = (props: IProductCard) => {
     tooltip = "",
     tooltipProps = {},
     CTAOnHover,
-    hideCreatorName = false,
+    hideCreatorName = true,
     isImageFitCover = false,
     className,
     productType,
@@ -121,12 +127,15 @@ export const ProductCard = (props: IProductCard) => {
           </CTAOnHoverContainer>
         )}
       </ProductCardImageWrapper>
-
       <ProductCardBottom>
         <ProductCardBottomContent>
-          <Grid flexDirection="column">
+          <Grid flexDirection="row" alignItems="flex-start">
             <ProductCardTitleWrapper>
-              <ProductCardTitle fontSize={"0.75rem"} fontWeight={"600"}>
+              <ProductCardTitle
+                fontSize={"0.75rem"}
+                color={getCssVar("--main-text-color")}
+                fontWeight={"600"}
+              >
                 {title}
               </ProductCardTitle>
             </ProductCardTitleWrapper>
@@ -135,29 +144,23 @@ export const ProductCard = (props: IProductCard) => {
                 {avatarName}
               </ProductCardCreatorName>
             )}
+            <Wrapper tooltip={tooltip} tooltipProps={tooltipProps}>
+              <CurrencyDisplay
+                value={price}
+                currency={currency}
+                fontSize={"0.875rem"}
+                color={currencyColor}
+                iconSize={16}
+                gap={"0.3125rem"}
+                style={{
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+              />
+            </Wrapper>
           </Grid>
-          <Wrapper tooltip={tooltip} tooltipProps={tooltipProps}>
-            <CurrencyDisplay
-              value={price}
-              currency={currency}
-              fontSize={"0.875rem"}
-              color={currencyColor}
-              iconSize={16}
-              gap={"0.3125rem"}
-              style={{
-                wordBreak: "break-all",
-                alignItems: "center",
-                justifyContent: "center",
-                paddingTop: "0.25rem"
-              }}
-            />
-          </Wrapper>
-          {productType === ProductType.phygital && (
-            <ProductTypeWrapper>
-              <CircleHalf />
-              Phygital
-            </ProductTypeWrapper>
-          )}
+
+          {productType === ProductType.phygital && <PhygitalLabel />}
         </ProductCardBottomContent>
       </ProductCardBottom>
     </ProductCardWrapper>

package/src/components/productCard/commonStyles.ts

@@ -5,6 +5,5 @@ export const cardWrapperStyles = css`
   padding: 0px;
   isolation: isolate;
   width: 100%;
-  box-shadow: 0px 4.31783px 107.946px rgba(21, 30, 52, 0.1);
   background: ${getCssVar("--background-accent-color")};
 `;

package/src/components/widgets/roblox/components/ProductsRoblox.tsx

@@ -115,7 +115,6 @@ export const ProductsRoblox = ({
 
   const {
     data: purchasedProductsInPage,
-    isLoading: purchasedProductsLoading,
     fetchNextPage: fetchNextPagePurchasedProducts,
     hasNextPage: hasNextPagePurchasedProducts,
     refetch: refetchPurchasedProducts
@@ -257,7 +256,20 @@ export const ProductsRoblox = ({
                     });
                   }
                 }}
-                isLoading={purchasedProductsLoading}
+                handleOnCardClick={(robloxExchange) => {
+                  const { offer } = robloxExchange;
+                  if (isProductV1(offer)) {
+                    handleSetProductUuid({
+                      selectedProductUuid: offer.metadata.product.uuid,
+                      exchange: robloxExchange
+                    });
+                  } else if (isBundle(offer)) {
+                    handleSetBundleUuid({
+                      selectedBundleUuid: offer.metadata.bundleUuid,
+                      exchange: robloxExchange
+                    });
+                  }
+                }}
               />
             </Grid>
             <Grid flexDirection="column" alignItems="flex-start">

package/src/components/widgets/roblox/components/RobloxExchangesGrid.tsx

@@ -54,12 +54,12 @@ const TransparentSkeletonProductCard = styled(ProductCardSkeleton)`
 `;
 
 export type RobloxExchangesGridProps = {
-  isLoading: boolean;
   numProducts?: number;
   itemsPerRow: GridContainerProps["itemsPerRow"];
   raiseDisputeForExchangeUrl: string;
   handleRequestShipment: (robloxExchange: BosonRobloxExchange) => void;
   handleCancellation: (robloxExchange: BosonRobloxExchange) => void;
+  handleOnCardClick: (robloxExchange: BosonRobloxExchange) => void;
   exchanges: BosonRobloxExchange[] | undefined;
   fetchNextPage: (
     options?: FetchNextPageOptions
@@ -73,12 +73,12 @@ export type RobloxExchangesGridProps = {
 };
 const gap = "2rem";
 export const RobloxExchangesGrid = ({
-  isLoading,
   numProducts,
   itemsPerRow,
   raiseDisputeForExchangeUrl,
   exchanges,
   handleRequestShipment,
+  handleOnCardClick,
   handleCancellation,
   fetchNextPage,
   refetch,
@@ -189,14 +189,9 @@ export const RobloxExchangesGrid = ({
                           type: "button"
                         } as const
                       }
-                      cancelButtonConfig={
-                        {
-                          onClick: () => {
-                            handleCancellation(robloxExchange);
-                          },
-                          type: "button"
-                        } as const
-                      }
+                      onCardClick={() => {
+                        handleOnCardClick(robloxExchange);
+                      }}
                       disputeButtonConfig={
                         {
                           onClick: () => {