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

package/src/components/exchangeCard/ExchangeCard.tsx

@@ -9,28 +9,27 @@ import { IBaseImage, Image } from "../image/Image";
 import { ProductType } from "../productCard/const";
 import { IButton } from "../ui/ThemedButton";
 import {
-  CommittedBottomText,
+  CTAOnHoverContainerExchangeCard,
   CommittedButtonWrapper,
   ExchangeButtonWrapper,
   ExchangeCTAWrapper,
   ExchangeCarData,
   ExchangeCardBottom,
   ExchangeCardBottomContent,
-  ExchangeCardLabelWrapper,
-  ExchangeCardPrice,
   ExchangeCardPriceWrapper,
+  ExchangeCardTitle,
+  ExchangeCardTitleWrapper,
   ExchangeCardTop,
   ExchangeCardWrapper,
-  ExchangeCreator,
-  ExchangeCreatorAvatar,
-  ExchangeCreatorName,
   ExchangeImageWrapper,
   ExchangeStatus,
-  ExchangeTitle,
   RedeemButtonWrapper
 } from "./ExchangeCard.styles";
 import { ExchangeCardStatus } from "./types";
 import { subgraph } from "@bosonprotocol/core-sdk";
+
+import { Grid } from "../ui/Grid";
+import { PhygitalLabel } from "../productCard/ProductCard";
 export type { ExchangeCardStatus } from "./types";
 interface Base {
   id: string;
@@ -64,7 +63,6 @@ interface CancelledCard extends Base {
 interface CommittedCard extends Base {
   status: subgraph.ExchangeState.COMMITTED;
   redeemButtonConfig: IButton;
-  cancelButtonConfig: IButton;
   bottomText?: string;
 }
 
@@ -95,8 +93,6 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
     imageProps,
     price,
     currency,
-    avatar,
-    avatarName,
     onCardClick,
     status,
     isCTAVisible = true,
@@ -110,7 +106,7 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
   } = props;
 
   const [isImageLoaded, setIsImageLoaded] = useState(false);
-
+  const [isHovered, setIsHovered] = useState(false);
   const exchangeCardBottom = useMemo(() => {
     if (isCTAVisible) {
       switch (status) {
@@ -136,7 +132,7 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
           );
         }
         case subgraph.ExchangeState.COMMITTED: {
-          const { redeemButtonConfig, cancelButtonConfig, bottomText } = props;
+          const { redeemButtonConfig } = props;
           return (
             <ExchangeButtonWrapper>
               <CommittedButtonWrapper>
@@ -152,20 +148,7 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
                 >
                   Redeem
                 </Button>
-                <Button
-                  variant="secondaryInverted"
-                  {...cancelButtonConfig}
-                  onClick={(
-                    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
-                  ) => {
-                    e.stopPropagation();
-                    cancelButtonConfig?.onClick?.(e);
-                  }}
-                >
-                  Cancel
-                </Button>
               </CommittedButtonWrapper>
-              <CommittedBottomText>{bottomText}</CommittedBottomText>
             </ExchangeButtonWrapper>
           );
         }
@@ -183,6 +166,8 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
       data-card={dataCard}
       $isHoverDisabled={isHoverDisabled}
       data-testid={dataTestId}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       onClick={(e) => {
         e.preventDefault();
         onCardClick?.(id);
@@ -190,12 +175,22 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
     >
       <ExchangeCardTop $isNotImageLoaded={isNotImageLoaded}>
         <ExchangeImageWrapper>
-          {isPhygital && (
-            <ExchangeCardLabelWrapper>Phygital</ExchangeCardLabelWrapper>
-          )}
           <Image {...imageProps} onLoaded={() => setIsImageLoaded(true)} />
+          {isCTAVisible && isConnected && (
+            <CTAOnHoverContainerExchangeCard $isHovered={isHovered}>
+              {isCTAVisible && isConnected ? (
+                <ExchangeCTAWrapper data-cta-wrapper>
+                  {exchangeCardBottom}
+                </ExchangeCTAWrapper>
+              ) : isCTAVisible && !isConnected && CTAIfDisconnected ? (
+                CTAIfDisconnected
+              ) : null}
+            </CTAOnHoverContainerExchangeCard>
+          )}
         </ExchangeImageWrapper>
-        <ExchangeStatus $status={status}>{status.toLowerCase()}</ExchangeStatus>
+        <ExchangeStatus $status={status} $side="left">
+          {status.toLowerCase()}
+        </ExchangeStatus>
       </ExchangeCardTop>
       <div style={{ height: height + "px" }} />
       <ExchangeCardBottom>
@@ -209,41 +204,42 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
           }}
         >
           <ExchangeCarData>
-            <ExchangeCreator
+            <Grid
+              flexDirection="column"
+              alignItems="flex-start"
               onClick={(e) => {
                 e.stopPropagation();
                 onAvatarNameClick?.();
               }}
             >
-              <ExchangeCreatorAvatar>
-                <img src={avatar} alt="avatar" />
-              </ExchangeCreatorAvatar>
-              <ExchangeCreatorName data-avatarname="exchange-card">
-                {avatarName}
-              </ExchangeCreatorName>
-            </ExchangeCreator>
-            <ExchangeTitle>{title}</ExchangeTitle>
+              <ExchangeCardTitleWrapper>
+                <ExchangeCardTitle fontSize={"0.75rem"} fontWeight={"600"}>
+                  {title}
+                </ExchangeCardTitle>
+                <ExchangeCardPriceWrapper
+                  justifyContent="flex-end"
+                  alignItems="center"
+                  width="40%"
+                >
+                  <CurrencyDisplay
+                    value={price}
+                    currency={currency}
+                    fontSize={"0.875rem"}
+                    iconSize={16}
+                    gap={"0.3125rem"}
+                    style={{
+                      wordBreak: "break-all",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontWeight: "600"
+                    }}
+                  />
+                </ExchangeCardPriceWrapper>
+              </ExchangeCardTitleWrapper>
+              {isPhygital && <PhygitalLabel />}
+            </Grid>
           </ExchangeCarData>
-          <ExchangeCardPriceWrapper>
-            <ExchangeCardPrice>Price</ExchangeCardPrice>
-            <CurrencyDisplay
-              value={price}
-              currency={currency}
-              style={{
-                wordBreak: "break-all",
-                alignItems: "flex-start",
-                justifyContent: "flex-end"
-              }}
-            />
-          </ExchangeCardPriceWrapper>
         </ExchangeCardBottomContent>
-        {isCTAVisible && isConnected ? (
-          <ExchangeCTAWrapper data-cta-wrapper>
-            {exchangeCardBottom}
-          </ExchangeCTAWrapper>
-        ) : isCTAVisible && !isConnected && CTAIfDisconnected ? (
-          CTAIfDisconnected
-        ) : null}
       </ExchangeCardBottom>
     </ExchangeCardWrapper>
   );

package/src/components/modal/components/Commit/DetailView/InnerCommitDetailView.tsx

@@ -355,7 +355,10 @@ export default function InnerCommitDetailView(
           priceSibling={
             status === "success" ? (
               // TODO: if exchange is in a different state what do we do?
-              <ExchangeStatus $status={subgraph.ExchangeState.COMMITTED}>
+              <ExchangeStatus
+                $status={subgraph.ExchangeState.COMMITTED}
+                $side="right"
+              >
                 {labelValueToText[LabelType.purchased]}
               </ExchangeStatus>
             ) : (

package/src/components/modal/components/Redeem/MyItems/Exchange.tsx

@@ -4,7 +4,10 @@ import { useMemo } from "react";
 import styled from "styled-components";
 import mockedAvatar from "../../../../../assets/frame.png";
 
-import { ExchangeCard } from "../../../../exchangeCard/ExchangeCard";
+import {
+  ExchangeCard,
+  ExchangeCardProps
+} from "../../../../exchangeCard/ExchangeCard";
 import { Currencies } from "../../../../currencyDisplay/CurrencyDisplay";
 import { exchanges } from "@bosonprotocol/core-sdk";
 import { colors } from "../../../../../theme";
@@ -31,7 +34,6 @@ interface Props {
   exchange: ExtendedExchange;
   onCardClick: (exchange: IExchange) => void;
   onRedeemClick: (exchange: IExchange) => void;
-  onCancelExchangeClick: (exchange: IExchange) => void;
   onRaiseDisputeClick: (exchange: IExchange) => void;
   onAvatarClick: (exchange: IExchange) => void;
 }
@@ -56,7 +58,6 @@ export default function Exchange({
   exchange,
   onRedeemClick,
   onCardClick,
-  onCancelExchangeClick,
   onRaiseDisputeClick,
   onAvatarClick
 }: Props) {
@@ -122,12 +123,6 @@ export default function Exchange({
         const handleRedeem = () => {
           onRedeemClick(exchange);
         };
-        const handleCancel = () => {
-          if (!exchange) {
-            return;
-          }
-          onCancelExchangeClick(exchange);
-        };
         return {
           status: "COMMITTED" as Extract<ExchangeCardStatus, "COMMITTED">,
           isCTAVisible: isBuyer,
@@ -136,13 +131,10 @@ export default function Exchange({
             onClick: handleRedeem,
             type: "button",
             disabled: isInWrongChain
-          } as const,
-          cancelButtonConfig: {
-            onClick: handleCancel,
-            type: "button",
-            disabled: isInWrongChain
           } as const
-        };
+        } satisfies Partial<
+          Extract<ExchangeCardProps, { status: "COMMITTED" }>
+        >;
       }
       default:
         return {

package/src/components/modal/components/Redeem/MyItems/Exchanges.tsx

@@ -6,7 +6,6 @@ import { ProductGridContainer } from "./ProfilePage.styles";
 interface Props {
   onCardClick: (exchange: IExchange) => void;
   onRedeemClick: (exchange: IExchange) => void;
-  onCancelExchangeClick: (exchange: IExchange) => void;
   onRaiseDisputeClick: (exchange: IExchange) => void;
   onAvatarClick: (exchange: IExchange) => void;
   exchanges: ExtendedExchange[];
@@ -15,7 +14,6 @@ interface Props {
 export default function Exchanges({
   onRedeemClick,
   exchanges,
-  onCancelExchangeClick,
   onRaiseDisputeClick,
   onCardClick,
   onAvatarClick
@@ -38,7 +36,6 @@ export default function Exchanges({
             exchange={exchange}
             onRedeemClick={onRedeemClick}
             onCardClick={onCardClick}
-            onCancelExchangeClick={onCancelExchangeClick}
             onRaiseDisputeClick={onRaiseDisputeClick}
             onAvatarClick={onAvatarClick}
           />

package/src/components/modal/components/Redeem/MyItems/MyItems.tsx

@@ -16,7 +16,6 @@ import { BosonLogo } from "../../common/BosonLogo";
 export type MyItemsProps = {
   onExchangeCardClick: (exchange: Exchange) => void;
   onRedeemClick: (exchange: Exchange) => void;
-  onCancelExchange: (exchange: Exchange) => void;
   onRaiseDisputeClick: (exchange: Exchange) => void;
   onAvatarClick: (exchange: Exchange) => void;
   isValid: boolean;
@@ -30,7 +29,6 @@ const ExchangesWithData = WithExchangesData(Exchanges);
 export function MyItems({
   onRedeemClick,
   onExchangeCardClick,
-  onCancelExchange,
   onRaiseDisputeClick,
   onAvatarClick,
   sellerIds,
@@ -100,7 +98,6 @@ export function MyItems({
                   {...values}
                   onCardClick={onExchangeCardClick}
                   onRedeemClick={onRedeemClick}
-                  onCancelExchangeClick={onCancelExchange}
                   onRaiseDisputeClick={onRaiseDisputeClick}
                   onAvatarClick={onAvatarClick}
                 />

package/src/components/modal/components/Redeem/MyItems/WithExchangesData.tsx

@@ -20,7 +20,6 @@ const orderProps = {
 interface CommonProps {
   onCardClick: (exchange: Exchange) => void;
   onRedeemClick: (exchange: Exchange) => void;
-  onCancelExchangeClick: (exchange: Exchange) => void;
   onRaiseDisputeClick: (exchange: Exchange) => void;
   onAvatarClick: (exchange: Exchange) => void;
 }

package/src/components/modal/components/Redeem/RedeemNonModal.tsx

@@ -87,7 +87,6 @@ export type RedeemNonModalProps = Pick<
     hideModal?: NonModalProps["hideModal"];
     myItemsOnExchangeCardClick?: MyItemsProps["onExchangeCardClick"];
     myItemsOnRedeemClick?: MyItemsProps["onRedeemClick"];
-    myItemsOnCancelExchange?: MyItemsProps["onCancelExchange"];
     myItemsOnRaiseDisputeClick?: MyItemsProps["onRaiseDisputeClick"];
     myItemsOnAvatarClick?: MyItemsProps["onAvatarClick"];
     onExchangePolicyClick?: ExchangeViewProps["onExchangePolicyClick"];
@@ -161,7 +160,6 @@ function RedeemNonModal({
   raiseDisputeForExchangeUrl,
   myItemsOnExchangeCardClick,
   myItemsOnRedeemClick,
-  myItemsOnCancelExchange,
   myItemsOnRaiseDisputeClick,
   myItemsOnAvatarClick,
   onExchangePolicyClick,
@@ -403,11 +401,6 @@ function RedeemNonModal({
                     setExchange(exchange);
                     myItemsOnRedeemClick?.(exchange);
                   }}
-                  onCancelExchange={(exchange) => {
-                    setActiveStep(ActiveStep.CANCELLATION_VIEW);
-                    setExchange(exchange);
-                    myItemsOnCancelExchange?.(exchange);
-                  }}
                   isValid={isRedeemFormOK}
                   onRaiseDisputeClick={(exchange) => {
                     setExchange(exchange);

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: () => {