@bosonprotocol/react-kit 0.29.1 → 0.30.0-alpha.1

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

@@ -22,6 +22,7 @@ import { SellerAndDescription } from "../../common/detail/SellerAndDescription";
 import { SlickSlider, initialSettings } from "../../common/detail/SlickSlider";
 import { UseGetOfferDetailDataProps } from "../../common/detail/useGetOfferDetailData";
 import { getOfferVariations } from "../../../../../lib/offer/getOfferVariations";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 
@@ -144,7 +145,8 @@ export function ExchangeView({
         ),
         contentStyle: {
           background: colors.lightGrey
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx

@@ -17,6 +17,7 @@ import { GridContainer } from "../../../../ui/GridContainer";
 import { useRedemptionContext } from "../../../../widgets/redemption/provider/RedemptionContext";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { RedeemHeader } from "../RedeemHeader";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 
@@ -72,7 +73,8 @@ export function RedeemSuccess({
         ),
         contentStyle: {
           background: colors.lightGrey
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx

@@ -11,6 +11,7 @@ import {
   RedemptionWidgetAction,
   useRedemptionContext
 } from "../../../../../widgets/redemption/provider/RedemptionContext";
+import { BosonLogo } from "../../../common/BosonLogo";
 
 const colors = theme.colors.light;
 export interface CancellationViewProps {
@@ -50,11 +51,11 @@ export const CancellationView: React.FC<CancellationViewProps> = ({
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, isCancelModeOnly]);
+  }, [dispatch, isCancelModeOnly, onBackClick]);
   return (
     <>
       {!exchange ? (

package/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx

@@ -5,6 +5,7 @@ import ExpireVoucher, { ExpireVoucherProps } from "./ExpireVoucher";
 import { useNonModalContext } from "../../../../nonModal/NonModal";
 import { theme } from "../../../../../../theme";
 import { Grid } from "../../../../../ui/Grid";
+import { BosonLogo } from "../../../common/BosonLogo";
 
 const colors = theme.colors.light;
 export interface ExpireVoucherViewProps {
@@ -34,7 +35,8 @@ export const ExpireVoucherView: React.FC<ExpireVoucherViewProps> = ({
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -5,6 +5,7 @@ import { Exchange } from "../../../../../types/exchange";
 import License from "../../../../license/License";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 interface Props {
@@ -29,7 +30,8 @@ export function LicenseAgreementView({ onBackClick, offer }: Props) {
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -11,6 +11,7 @@ import { GridContainer } from "../../../../ui/GridContainer";
 import { subgraph } from "@bosonprotocol/core-sdk";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { useAccount } from "../../../../../hooks/connection/connection";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 
@@ -50,7 +51,8 @@ export function MyItems({
         ),
         contentStyle: {
           background: colors.lightGrey
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
   }, [dispatch]);

package/src/components/modal/components/Redeem/OfferPolicyView/RedeemOfferPolicyView.tsx

@@ -8,6 +8,7 @@ import OfferPolicyDetails, {
 } from "../../../../offerPolicy/OfferPolicyDetails";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 interface Props {
@@ -42,7 +43,8 @@ export function RedeemOfferPolicyView({
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx

@@ -5,6 +5,7 @@ import { Exchange } from "../../../../../types/exchange";
 import { theme } from "../../../../../theme";
 import { useAccount } from "../../../../../hooks/connection/connection";
 import { RedeemHeader } from "../RedeemHeader";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 
@@ -29,7 +30,8 @@ export default function RedeemFormView({
         headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
   }, [dispatch]);

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

@@ -37,7 +37,7 @@ import {
   useRedemptionContext
 } from "../../../widgets/redemption/provider/RedemptionContext";
 import NonModal, { NonModalProps } from "../../nonModal/NonModal";
-import { BosonFooter } from "../common/BosonFooter";
+import { BosonLogo } from "../common/BosonLogo";
 import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
 import StepsOverview from "../common/StepsOverview/StepsOverview";
 import { ExchangeFullDescriptionView } from "./ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView";
@@ -240,7 +240,7 @@ export function PublicRedeemNonModal({
           Redeem your item
         </Typography>
       }
-      footerComponent={<BosonFooter />}
+      footerComponent={<BosonLogo />}
       showConnectButton={!props.withExternalSigner}
       contentStyle={{
         background: colors.white

package/src/components/modal/components/common/BosonLogo.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import ReactComponent from "../../../../assets/logo.svg";
+import { Grid, GridProps } from "../../../ui/Grid";
+import { SvgImage, SvgImageProps } from "../../../ui/SvgImage";
+
+export function BosonLogo({
+  gridProps,
+  svgImageProps
+}: {
+  gridProps?: GridProps;
+  svgImageProps?: Omit<SvgImageProps, "src">;
+} = {}) {
+  return (
+    <Grid justifyContent="center" padding="1.5rem 0" {...gridProps}>
+      <SvgImage
+        src={ReactComponent}
+        height="24px"
+        {...svgImageProps}
+        style={{ maxWidth: "100%", ...svgImageProps?.style }}
+      />
+    </Grid>
+  );
+}

package/src/components/modal/components/common/StepsOverview/PurchaseOverview.tsx

@@ -13,6 +13,12 @@ import { CommitStep } from "./style";
 import styled from "styled-components";
 import { breakpoint } from "../../../../../lib/ui/breakpoint";
 
+const Wrapper = styled.div`
+  p {
+    text-wrap: pretty;
+  }
+`;
+
 const CommitStepWrapper = styled.div`
   overflow: hidden;
   margin: 1rem 0;
@@ -53,30 +59,11 @@ const COMMIT_STEPS = [
   }
 ];
 
-export default function PurchaseOverview() {
+export function PurchaseOverviewInner() {
   const { isLteXS } = useBreakpoints();
 
   return (
-    <>
-      <Grid flexDirection="column" alignItems="flex-start">
-        <Typography tag="h4" style={{ margin: 0 }}>
-          <b>How does the purchase process work?</b>
-        </Typography>
-        <Typography tag="p">
-          When Committing to Buy, the item price will be transferred into escrow
-          and you will receive a redeemable NFT (rNFT) that can be exchanged for
-          the real-world item it represents.
-        </Typography>
-      </Grid>
-      <CommitStepWrapper>
-        {COMMIT_STEPS.map(({ icon: Icon, header, description }, key) => (
-          <CommitStep key={`commit_step_${key}`}>
-            <Icon size={24} />
-            <Typography tag="h6">{header}</Typography>
-            <Typography tag="p">{description}</Typography>
-          </CommitStep>
-        ))}
-      </CommitStepWrapper>
+    <Wrapper>
       <ModalBackground>
         <Grid flexDirection={isLteXS ? "column" : "row"}>
           <div>
@@ -101,6 +88,27 @@ export default function PurchaseOverview() {
           </div>
         </Grid>
       </ModalBackground>
-    </>
+      <Grid flexDirection="column" alignItems="flex-start">
+        <Grid flexDirection="column" alignItems="flex-start">
+          <Typography tag="h4" style={{ margin: 0 }}>
+            <b>How does the purchase process work?</b>
+          </Typography>
+          <Typography tag="p">
+            When Committing to Buy, the item price will be transferred into
+            escrow and you will receive a redeemable NFT (rNFT) that can be
+            exchanged for the real-world item it represents.
+          </Typography>
+        </Grid>
+      </Grid>
+      <CommitStepWrapper>
+        {COMMIT_STEPS.map(({ icon: Icon, header, description }, key) => (
+          <CommitStep key={`commit_step_${key}`}>
+            <Icon size={24} />
+            <Typography tag="h6">{header}</Typography>
+            <Typography tag="p">{description}</Typography>
+          </CommitStep>
+        ))}
+      </CommitStepWrapper>
+    </Wrapper>
   );
 }

package/src/components/modal/components/common/StepsOverview/PurchaseOverviewView.tsx

@@ -1,9 +1,10 @@
 import { ArrowLeft } from "phosphor-react";
 import React, { useEffect } from "react";
-import PurchaseOverview from "./PurchaseOverview";
+import { PurchaseOverviewInner } from "./PurchaseOverview";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
 import { Grid } from "../../../../ui/Grid";
+import { BosonLogo } from "../BosonLogo";
 
 const colors = theme.colors.light;
 type Props = {
@@ -15,23 +16,31 @@ export function PurchaseOverviewView({ onBackClick }: Props) {
     dispatch({
       payload: {
         headerComponent: (
-          <Grid style={{ flex: "1" }}>
+          <Grid style={{ flex: "1" }} justifyContent="flex-start" gap="1rem">
             {onBackClick && (
               <ArrowLeft
                 onClick={() => {
                   onBackClick();
                 }}
                 size={32}
-                style={{ cursor: "pointer" }}
+                style={{ cursor: "pointer", minWidth: "32px" }}
               />
             )}
+            <BosonLogo
+              gridProps={{ justifyContent: "flex-start" }}
+              svgImageProps={{
+                width: undefined,
+                style: { width: "min-content" }
+              }}
+            />
           </Grid>
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: null
       }
     });
   }, [dispatch, onBackClick]);
-  return <PurchaseOverview />;
+  return <PurchaseOverviewInner />;
 }

package/src/components/modal/components/common/StepsOverview/StepsOverview.tsx

@@ -9,6 +9,7 @@ import { breakpoint } from "../../../../../lib/ui/breakpoint";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
 import { RedeemHeader } from "../../Redeem/RedeemHeader";
+import { BosonLogo } from "../BosonLogo";
 
 const colors = theme.colors.light;
 const CommitStepWrapper = styled.div`
@@ -53,7 +54,8 @@ export default function StepsOverview({ onNextClick }: Props) {
         headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
   }, [dispatch]);

package/src/components/modal/components/common/detail/Detail.style.tsx

@@ -138,7 +138,7 @@ export const LearnMore = styled.a`
 
 export const ModalBackground = styled.div`
   overflow: hidden;
-  margin: 2rem -2rem -2rem -2rem;
+  margin: -2rem -2rem 2rem -2rem;
   padding: 2rem;
   background-color: ${colors.black};
   background-image: url(${frameImage});

package/src/components/modal/nonModal/NonModal.tsx

@@ -173,7 +173,10 @@ type Action = {
   payload: State;
 };
 
-type State = Pick<NonModalProps, "headerComponent" | "contentStyle">;
+type State = Pick<
+  NonModalProps,
+  "headerComponent" | "contentStyle" | "footerComponent"
+>;
 
 const reducer = (state: State, action: Action): State => {
   const { payload } = action;
@@ -212,7 +215,7 @@ export default function NonModal({
   children,
   hideModal,
   headerComponent,
-  footerComponent: FooterComponent,
+  footerComponent,
   size = "auto",
   maxWidths = null,
   theme = "light",
@@ -226,11 +229,18 @@ export default function NonModal({
       hideModal();
     }
   };
-  const [{ headerComponent: HeaderComponent, contentStyle }, dispatch] =
-    useReducer(reducer, {
-      headerComponent,
-      contentStyle: _contentStyle
-    });
+  const [
+    {
+      headerComponent: HeaderComponent,
+      footerComponent: FooterComponent,
+      contentStyle
+    },
+    dispatch
+  ] = useReducer(reducer, {
+    headerComponent,
+    footerComponent,
+    contentStyle: _contentStyle
+  });
   const Container = useMemo(() => {
     return ({ children }: { children: ReactNode }) => {
       return lookAndFeel === "modal" ? (

package/src/components/ui/SvgImage.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { CSSProperties } from "styled-components";
 
-type SvgImageProps = Pick<CSSProperties, "width" | "height"> & {
+export type SvgImageProps = Pick<CSSProperties, "width" | "height"> & {
   src: string | React.FC;
+  style?: CSSProperties;
   id?: string;
 };
 

package/src/index.tsx

@@ -51,6 +51,7 @@ export * from "./components/magicLink/UserContext";
 export * from "./components/modal/components/common/OfferFullDescription/ExternalOfferFullDescription";
 export * from "./components/modal/components/common/detail/useGetOfferDetailData";
 export * from "./components/modal/components/PurchaseOverview/PurchaseOverview";
+export * from "./components/modal/components/common/StepsOverview/PurchaseOverview";
 export * from "./components/modal/components/Commit/DetailView/ExternalCommitDetailView";
 export * from "./components/modal/components/Redeem/DetailView/ExternalExchangeDetailView";
 export * from "./components/ui/Grid";

package/src/stories/buttons/CommitButtonView.stories.tsx

@@ -38,7 +38,6 @@ Base.args = {
   minWidth: "200px",
   minHeight: "300px",
   layout: "horizontal",
-  tagline: true,
   color: "green",
   shape: "sharp"
 };

package/dist/cjs/components/modal/components/common/BosonFooter.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function BosonFooter(): JSX.Element;
-//# sourceMappingURL=BosonFooter.d.ts.map

package/dist/cjs/components/modal/components/common/BosonFooter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BosonFooter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/modal/components/common/BosonFooter.tsx"],"names":[],"mappings":";AAKA,wBAAgB,WAAW,gBAM1B"}

package/dist/cjs/components/modal/components/common/BosonFooter.js

@@ -1,16 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BosonFooter = void 0;
-const react_1 = __importDefault(require("react"));
-const logo_svg_1 = __importDefault(require("../../../../assets/logo.svg"));
-const Grid_1 = require("../../../ui/Grid");
-const SvgImage_1 = require("../../../ui/SvgImage");
-function BosonFooter() {
-    return (react_1.default.createElement(Grid_1.Grid, { justifyContent: "center", padding: "1.5rem 0" },
-        react_1.default.createElement(SvgImage_1.SvgImage, { src: logo_svg_1.default, height: "24px" })));
-}
-exports.BosonFooter = BosonFooter;
-//# sourceMappingURL=BosonFooter.js.map

package/dist/cjs/components/modal/components/common/BosonFooter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BosonFooter.js","sourceRoot":"","sources":["../../../../../../src/components/modal/components/common/BosonFooter.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,2EAAyD;AACzD,2CAAwC;AACxC,mDAAgD;AAEhD,SAAgB,WAAW;IACzB,OAAO,CACL,8BAAC,WAAI,IAAC,cAAc,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU;QAC9C,8BAAC,mBAAQ,IAAC,GAAG,EAAE,kBAAc,EAAE,MAAM,EAAC,MAAM,GAAG,CAC1C,CACR,CAAC;AACJ,CAAC;AAND,kCAMC"}

package/dist/esm/components/modal/components/common/BosonFooter.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function BosonFooter(): JSX.Element;
-//# sourceMappingURL=BosonFooter.d.ts.map

package/dist/esm/components/modal/components/common/BosonFooter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BosonFooter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/modal/components/common/BosonFooter.tsx"],"names":[],"mappings":";AAKA,wBAAgB,WAAW,gBAM1B"}

package/dist/esm/components/modal/components/common/BosonFooter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BosonFooter.js","sourceRoot":"","sources":["../../../../../../src/components/modal/components/common/BosonFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,MAAM,UAAU,WAAW;IACzB,OAAO,CACL,oBAAC,IAAI,IAAC,cAAc,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU;QAC9C,oBAAC,QAAQ,IAAC,GAAG,EAAE,cAAc,EAAE,MAAM,EAAC,MAAM,GAAG,CAC1C,CACR,CAAC;AACJ,CAAC"}

package/src/components/modal/components/common/BosonFooter.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import ReactComponent from "../../../../assets/logo.svg";
-import { Grid } from "../../../ui/Grid";
-import { SvgImage } from "../../../ui/SvgImage";
-
-export function BosonFooter() {
-  return (
-    <Grid justifyContent="center" padding="1.5rem 0">
-      <SvgImage src={ReactComponent} height="24px" />
-    </Grid>
-  );
-}