@bosonprotocol/react-kit 0.36.0-alpha.1 → 0.36.0-alpha.10

package/src/components/modal/ModalProvider.tsx

@@ -32,10 +32,6 @@ const RenderModalComponent = ({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       size={store.modalSize || initalState.store.modalSize!}
       maxWidths={store.modalMaxWidth || initalState.store.modalMaxWidth}
-      theme={
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        store.theme || initalState.store.theme!
-      }
       hideModal={hideModal}
       title={store.modalProps?.title}
       headerComponent={store.modalProps?.headerComponent}
@@ -64,7 +60,6 @@ export function ModalProvider({ children }: Props) {
       modalType: ModalType,
       modalProps?: Store["modalProps"],
       modalSize?: Store["modalSize"],
-      theme?: Store["theme"],
       modalMaxWidth?: Store["modalMaxWidth"]
     ) => {
       setStore({
@@ -72,8 +67,7 @@ export function ModalProvider({ children }: Props) {
         modalType,
         modalProps,
         modalSize,
-        modalMaxWidth,
-        theme
+        modalMaxWidth
       });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/ModalTypes.ts

@@ -4,5 +4,6 @@ export const MODAL_TYPES = {
   TRANSACTION_FAILED: "TRANSACTION_FAILED",
   TRANSACTION_SUBMITTED: "TRANSACTION_SUBMITTED",
   WAITING_FOR_CONFIRMATION: "WAITING_FOR_CONFIRMATION",
-  IMAGE_EDITOR: "IMAGE_EDITOR"
+  IMAGE_EDITOR: "IMAGE_EDITOR",
+  REQUEST_SHIPMENT: "REQUEST_SHIPMENT"
 } as const;

package/src/components/modal/components/Commit/CommitNonModal.tsx

@@ -1,29 +1,23 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { useAccount } from "../../../../hooks/connection/connection";
 import { useDisconnect } from "../../../../hooks/connection/useDisconnect";
-import { theme } from "../../../../theme";
-import { Exchange } from "../../../../types/exchange";
+import { getCssVar } from "../../../../theme";
 import { VariantV1 } from "../../../../types/variants";
 import Loading from "../../../ui/loading/LoadingWrapper";
 import NonModal, { NonModalProps } from "../../nonModal/NonModal";
-import { BosonLogo } from "../common/BosonLogo";
-import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
 import {
   DetailContextProps,
   DetailViewProvider
 } from "../common/detail/DetailViewProvider";
-import { CommitSuccess } from "./CommitSuccess/CommitSuccess";
 import { ContractualAgreementView } from "./ContractualAgreementView/ContractualAgreementView";
 import { LicenseAgreementView } from "./LicenseAgreementView/LicenseAgreementView";
 import { OfferFullDescriptionView } from "./OfferFullDescriptionView/OfferFullDescriptionView";
 import { CommitOfferPolicyView } from "./OfferPolicyView/CommitOfferPolicyView";
 import { OfferVariantView, OfferVariantViewProps } from "./OfferVariantView";
 
-const colors = theme.colors.light;
 enum CommitStep {
   OFFER_VIEW,
   PURCHASE_OVERVIEW,
-  COMMIT_SUCESS,
   EXCHANGE_POLICY,
   CONTRACTUAL_AGREEMENT,
   LICENSE_AGREEMENT,
@@ -32,76 +26,89 @@ enum CommitStep {
 
 export type CommitNonModalProps = Pick<
   OfferVariantViewProps,
-  "onClickBuyOrSwap" | "onAlreadyOwnOfferClick"
+  "onClickBuyOrSwap" | "onAlreadyOwnOfferClick" | "exchange"
 > & {
   variants?: VariantV1[];
   showBosonLogo?: boolean;
+  showBosonLogoInHeader?: boolean;
   defaultSelectedOfferId?: string;
   disableVariationsSelects?: boolean;
   isLoading: boolean;
   hideModal?: NonModalProps["hideModal"];
   onExchangePolicyClick?: OfferVariantViewProps["onExchangePolicyClick"];
-  offerViewOnPurchaseOverview?: OfferVariantViewProps["onPurchaseOverview"];
   offerViewOnViewFullDescription?: OfferVariantViewProps["onViewFullDescription"];
   forcedAccount?: string;
-  withExternalSigner: boolean | undefined | null;
+  withExternalSigner?: boolean | null;
+  showConnectButton?: boolean;
   lookAndFeel: "regular" | "modal";
-};
+  withLeftArrowButton?: boolean;
+} & OfferVariantViewProps["requestShipmentProps"];
 
-export function CommitWrapper({ hideModal, ...props }: CommitNonModalProps) {
+export function CommitWrapper({
+  hideModal,
+  showBosonLogoInHeader = true,
+  ...props
+}: CommitNonModalProps) {
   return (
     <NonModal
       hideModal={hideModal}
-      footerComponent={<BosonLogo />}
       contentStyle={{
-        background: colors.white
+        background: getCssVar("--background-accent-color")
       }}
+      withLeftArrowButton={props.withLeftArrowButton}
       lookAndFeel={props.lookAndFeel}
-      showConnectButton={!props.withExternalSigner}
+      showConnectButton={
+        props.withExternalSigner === undefined ||
+        props.withExternalSigner === null
+          ? props.showConnectButton === undefined
+            ? false
+            : props.showConnectButton
+          : !props.withExternalSigner
+      }
     >
-      <CommitNonModal {...props} />
+      <CommitNonModal
+        {...props}
+        showBosonLogoInHeader={showBosonLogoInHeader}
+      />
     </NonModal>
   );
 }
 
 function CommitNonModal({
   variants,
-  showBosonLogo,
+  showBosonLogo = false,
+  showBosonLogoInHeader = true,
   defaultSelectedOfferId,
   disableVariationsSelects,
   isLoading,
+  exchange,
   onExchangePolicyClick,
   onAlreadyOwnOfferClick,
-  offerViewOnPurchaseOverview,
   offerViewOnViewFullDescription,
   onClickBuyOrSwap,
-  forcedAccount
+  forcedAccount,
+  parentOrigin,
+  signatures
 }: CommitNonModalProps) {
   const firstVariant = variants?.[0];
   const firstNotVoidedVariant = variants?.find(
     (variant) => !variant.offer.voided
   );
   const defaultVariant = defaultSelectedOfferId
-    ? variants?.find(
+    ? (variants?.find(
         (variant) => variant.offer.id === defaultSelectedOfferId
       ) ??
       firstNotVoidedVariant ??
-      firstVariant
-    : firstNotVoidedVariant ?? firstVariant;
-
-  const [exchangeInfo, setExchangeInfo] = useState<{
-    exchangeId: Exchange["id"];
-    txHash: string;
-  } | null>(null);
+      firstVariant)
+    : (firstNotVoidedVariant ?? firstVariant);
 
   const [selectedVariant, setSelectedVariant] = useState<VariantV1 | undefined>(
     defaultVariant
   );
-  useEffect(() => {
-    if (defaultVariant) {
-      setSelectedVariant(defaultVariant);
-    }
-  }, [defaultVariant]);
+
+  if (defaultVariant && defaultVariant !== selectedVariant) {
+    setSelectedVariant(defaultVariant);
+  }
 
   const [{ currentStep }, setStep] = useState<{
     previousStep: CommitStep[];
@@ -157,7 +164,7 @@ function CommitNonModal({
   if (!address && forcedAccount) {
     return (
       <>
-        <p>Please connect your wallet</p>
+        <p>Please connect your account</p>
         {forcedAccount && <p>(expected account: {forcedAccount})</p>}
       </>
     );
@@ -174,6 +181,13 @@ function CommitNonModal({
     <>
       {currentStep === CommitStep.OFFER_VIEW ? (
         <OfferVariantView
+          requestShipmentProps={{
+            forcedAccount,
+            parentOrigin,
+            signatures
+          }}
+          exchange={exchange}
+          showBosonLogoInHeader={showBosonLogoInHeader}
           showBosonLogo={showBosonLogo}
           allVariants={variants ?? [selectedVariant]}
           selectedVariant={selectedVariant}
@@ -184,10 +198,6 @@ function CommitNonModal({
             setActiveStep(CommitStep.EXCHANGE_POLICY);
             onExchangePolicyClick?.(...args);
           }}
-          onPurchaseOverview={() => {
-            setActiveStep(CommitStep.PURCHASE_OVERVIEW);
-            offerViewOnPurchaseOverview?.();
-          }}
           onViewFullDescription={() => {
             setActiveStep(CommitStep.OFFER_FULL_DESCRIPTION);
             offerViewOnViewFullDescription?.();
@@ -195,10 +205,6 @@ function CommitNonModal({
           onLicenseAgreementClick={() =>
             setActiveStep(CommitStep.LICENSE_AGREEMENT)
           }
-          onCommit={(exchangeId, txHash) => {
-            setActiveStep(CommitStep.COMMIT_SUCESS);
-            setExchangeInfo({ exchangeId, txHash });
-          }}
           onGetDetailViewProviderProps={onGetDetailViewProviderProps}
           onClickBuyOrSwap={onClickBuyOrSwap}
           onAlreadyOwnOfferClick={onAlreadyOwnOfferClick}
@@ -207,6 +213,7 @@ function CommitNonModal({
         providerPropsRef.current ? (
         <DetailViewProvider {...providerPropsRef.current}>
           <OfferFullDescriptionView
+            showBosonLogoInHeader={showBosonLogoInHeader}
             onBackClick={goToPreviousStep}
             onExchangePolicyClick={(...args) => {
               setActiveStep(CommitStep.EXCHANGE_POLICY);
@@ -216,10 +223,9 @@ function CommitNonModal({
             onClickBuyOrSwap={onClickBuyOrSwap}
           />
         </DetailViewProvider>
-      ) : currentStep === CommitStep.PURCHASE_OVERVIEW ? (
-        <PurchaseOverviewView onBackClick={goToPreviousStep} />
       ) : currentStep === CommitStep.EXCHANGE_POLICY ? (
         <CommitOfferPolicyView
+          showBosonLogoInHeader={showBosonLogoInHeader}
           offer={selectedVariant.offer}
           onBackClick={goToPreviousStep}
           onContractualAgreementClick={() =>
@@ -231,20 +237,16 @@ function CommitNonModal({
         />
       ) : currentStep === CommitStep.CONTRACTUAL_AGREEMENT ? (
         <ContractualAgreementView
+          showBosonLogoInHeader={showBosonLogoInHeader}
           offer={selectedVariant.offer}
           onBackClick={goToPreviousStep}
         />
       ) : currentStep === CommitStep.LICENSE_AGREEMENT ? (
         <LicenseAgreementView
+          showBosonLogoInHeader={showBosonLogoInHeader}
           offer={selectedVariant.offer}
           onBackClick={goToPreviousStep}
         />
-      ) : currentStep === CommitStep.COMMIT_SUCESS ? (
-        <CommitSuccess
-          onHouseClick={() => setActiveStep(CommitStep.OFFER_VIEW)}
-          exchangeId={exchangeInfo?.exchangeId ?? ""}
-          commitHash={exchangeInfo?.txHash}
-        />
       ) : (
         <p>Something went wrong...please try again</p>
       )}

package/src/components/modal/components/Commit/ContractualAgreementView/ContractualAgreementView.tsx

@@ -1,43 +1,40 @@
 import React, { useEffect } from "react";
-import { Grid } from "../../../../ui/Grid";
-import { Typography } from "../../../../ui/Typography";
-import { ArrowLeft } from "phosphor-react";
 import ContractualAgreement from "../../../../contractualAgreement/ContractualAgreement";
 import { useNonModalContext } from "../../../nonModal/NonModal";
-import { theme } from "../../../../../theme";
+import { getCssVar } from "../../../../../theme";
 import { Offer } from "../../../../../types/offer";
-import { BosonLogo } from "../../common/BosonLogo";
+import { HeaderView } from "../../../nonModal/headers/HeaderView";
 
-const colors = theme.colors.light;
 interface Props {
   onBackClick: () => void;
   offer: Offer | null;
+  showBosonLogoInHeader: boolean;
 }
 
-export function ContractualAgreementView({ onBackClick, offer }: Props) {
+export function ContractualAgreementView({
+  onBackClick,
+  offer,
+  showBosonLogoInHeader
+}: Props) {
   const offerId = offer?.id;
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
+        onArrowLeftClick: onBackClick,
         headerComponent: (
-          <Grid gap="1rem" justifyContent="flex-start" style={{ flex: "1 1" }}>
-            <ArrowLeft
-              onClick={onBackClick}
-              size={32}
-              style={{ cursor: "pointer" }}
-            />
-            <Typography tag="h3">Contractual Agreement</Typography>
-          </Grid>
+          <HeaderView
+            text={"Contractual Agreement"}
+            showBosonLogoInHeader={showBosonLogoInHeader}
+          />
         ),
         contentStyle: {
-          background: colors.white
+          background: getCssVar("--background-accent-color")
         },
-        footerComponent: <BosonLogo />
+        footerComponent: null
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch]);
+  }, [dispatch, onBackClick, showBosonLogoInHeader]);
   return (
     <>
       {offer ? (

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

@@ -0,0 +1,112 @@
+import { css, CSSProperties, styled } from "styled-components";
+import { Grid } from "../../../../ui/Grid";
+import React, { ReactNode } from "react";
+import { Checks, Package, ShoppingCartSimple } from "phosphor-react";
+import { Typography } from "../../../../ui/Typography";
+import { getCssVar } from "../../../../../theme";
+
+const IconWrapper = styled.div<{
+  $isDisabled?: boolean;
+  $backgroundColor: CSSProperties["backgroundColor"];
+}>`
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  min-width: 40px;
+  min-height: 40px;
+  border-radius: 8px;
+  ${({ $isDisabled, $backgroundColor }) => {
+    return $isDisabled
+      ? css``
+      : css`
+          background-color: ${$backgroundColor};
+        `;
+  }};
+`;
+const Wrapper = styled(Grid)`
+  > *:first-child > *:first-child {
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      background-color: ${getCssVar("--background-color")};
+      bottom: -62%;
+      left: 50%;
+      height: 18px;
+      width: 3px;
+      flex-shrink: 0;
+    }
+  }
+`;
+
+const iconSize = 24;
+export type CommitRedeemStepsProps = {
+  status: "pending-transaction" | "pending-signature" | "success";
+  children?: ReactNode;
+};
+export const CommitRedeemSteps = ({
+  status,
+  children
+}: CommitRedeemStepsProps) => {
+  return (
+    <Wrapper flexDirection="column" alignItems="flex-start" gap="2rem">
+      {status === "pending-signature" ? (
+        <Grid justifyContent="flex-start" gap="1rem">
+          <IconWrapper $backgroundColor={getCssVar("--main-text-color")}>
+            <ShoppingCartSimple
+              color={getCssVar("--background-accent-color")}
+              size={iconSize}
+            />
+          </IconWrapper>
+          <Typography fontSize="0.875rem" fontWeight={600}>
+            Confirm transaction to buy this product
+          </Typography>
+        </Grid>
+      ) : status === "success" ? (
+        <Grid justifyContent="flex-start" gap="1rem">
+          <IconWrapper $backgroundColor="transparent">
+            <Checks color="black" size={iconSize} />
+          </IconWrapper>
+          <Typography fontSize="0.875rem" fontWeight={600}>
+            You've successfully purchased this item.
+          </Typography>
+        </Grid>
+      ) : null}
+      {status === "pending-signature" ? (
+        <Grid justifyContent="flex-start" gap="1rem" style={{ opacity: 0.5 }}>
+          <IconWrapper
+            $isDisabled={true}
+            $backgroundColor={getCssVar("--background-color")}
+          >
+            <Package color={getCssVar("--sub-text-color")} size={iconSize} />
+          </IconWrapper>
+          <Grid flexDirection="column" alignItems="flex-start">
+            <Typography fontSize="0.875rem" fontWeight={600}>
+              Request shipment (redeem)
+            </Typography>
+            <Typography
+              fontSize="0.75rem"
+              fontWeight={400}
+              color={getCssVar("--sub-text-color")}
+            >
+              You can redeem your product now or later.
+            </Typography>
+          </Grid>
+        </Grid>
+      ) : status === "success" ? (
+        <Grid justifyContent="flex-start" gap="1rem">
+          <IconWrapper $backgroundColor={getCssVar("--main-text-color")}>
+            <Package
+              color={getCssVar("--background-accent-color")}
+              size={iconSize}
+            />
+          </IconWrapper>
+          <Typography fontSize="0.875rem" fontWeight={600}>
+            Ship, Trade or Hold
+          </Typography>
+        </Grid>
+      ) : null}
+      {children}
+    </Wrapper>
+  );
+};

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

@@ -15,14 +15,17 @@ export {
 
 export type ExternalCommitDetailViewProps =
   CommitDetailViewWithProviderProps & {
-    providerProps: Omit<CommitWidgetProvidersProps, "children">;
+    providerProps: Omit<
+      CommitWidgetProvidersProps,
+      "children" | "withGlobalStyle"
+    >;
   };
 export const ExternalCommitDetailView: React.FC<
   ExternalCommitDetailViewProps
 > = (props) => {
   return (
     <ResetStylesForNonWidgets>
-      <CommitWidgetProviders {...props.providerProps}>
+      <CommitWidgetProviders {...props.providerProps} withGlobalStyle={false}>
         <CommitDetailViewWithProvider {...props} />
       </CommitWidgetProviders>
     </ResetStylesForNonWidgets>