bosonprotocol · albertfolch-redeemeum · May 21, 2024 · May 21, 2024 · May 21, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
  ]
  },
  "dependencies": {
- "@bosonprotocol/react-kit": "^0.30.0",
+ "@bosonprotocol/react-kit": "^0.30.1",
  "@krakenjs/zoid": "^10.3.3",
  "@svgr/webpack": "^8.1.0",
  "@testing-library/jest-dom": "^5.16.5",

diff --git a/public/scripts/commit-button-example.html b/public/scripts/commit-button-example.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 
 <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
  <script src="./zoid/zoid.min.js"></script>
  <script src="../../scripts/commit-button.js"></script>
  <style>
@@ -32,8 +34,8 @@ <h3>Commit button example</h3>
  };
  const argsThatDependOnEnv = {
  configId: "testing-80002-0",
- productUuid: "086b32-3fcd-00d1-0624-67513e85415c",
- sellerId: "138",
+ productUuid: "f4bb0f8-2f2c-d151-2801-0d3c6250461",
+ sellerId: "4",
  ...(isProd && prodData)
  };
  const instance = CommitButton({
@@ -55,6 +57,13 @@ <h3>Commit button example</h3>
  document.querySelector(
  "#container"
  ).style.minWidth = `${offsetWidth}px`;
+ },
+ onClickCommitButton: function () {
+ document.querySelector("body").style.overflow = "hidden";
+ console.log("you clicked on the commit button!");
+ },
+ onClickTagline: function () {
+ console.log("you clicked on the tagline!");
  }
  });
 

diff --git a/src/components/widgets/commit/Commit.tsx b/src/components/widgets/commit/Commit.tsx
@@ -5,6 +5,7 @@ import { CSSProperties } from "styled-components";
 import * as yup from "yup";
 
 import { CONFIG, getMetaTxConfig } from "../../../config";
+import { GlobalStyle } from "../styles";
 
 export const commitPath = "/commit";
 
@@ -58,53 +59,56 @@ export function Commit() {
  const modalMargin = getProp("modalMargin") as CSSProperties["margin"];
  const account = getProp("account") as string;
  const withExternalSigner = getProp("withExternalSigner");
-
+ const bodyOverflow = getProp("bodyOverflow");
  return (
- <CommitWidget
- withExternalSigner={withExternalSigner === "true"}
- configId={configId}
- forcedAccount={account}
- envName={CONFIG.envName}
- metaTx={getMetaTxConfig(configId)}
- productUuid={productUuid ?? ""}
- bundleUuid={bundleUuid ?? ""}
- sellerId={sellerId ?? ""}
- offerId={offerId ?? ""}
- lookAndFeel={lookAndFeel}
- modalMargin={modalMargin}
- dateFormat="YYYY/MM/DD"
- shortDateFormat="MMM DD, YYYY"
- minimumDisputePeriodInDays={CONFIG.minimumDisputePeriodInDays as number}
- minimumDisputeResolutionPeriodDays={
- CONFIG.minimumDisputeResolutionPeriodDays as number
- }
- contactSellerForExchangeUrl={CONFIG.contactSellerForExchange as string}
- buyerSellerAgreementTemplate={
- CONFIG.buyerSellerAgreementTemplate as string
- }
- licenseTemplate={CONFIG.licenseTemplate as string}
- defaultCurrencyTicker="USD"
- defaultCurrencySymbol="$"
- ipfsGateway={CONFIG.ipfsGateway as string}
- ipfsProjectId={CONFIG.ipfsProjectId}
- ipfsProjectSecret={CONFIG.ipfsProjectSecret}
- children={<></>}
- walletConnectProjectId={CONFIG.walletConnectProjectId as string}
- fairExchangePolicyRules={CONFIG.fairExchangePolicyRules as string}
- closeWidgetClick={() => {
- if (
- "close" in window.xprops &&
- typeof window.xprops.close === "function"
- ) {
- window.xprops.close();
+ <>
+ <GlobalStyle $bodyOverflow={bodyOverflow} />
+ <CommitWidget
+ withExternalSigner={withExternalSigner === "true"}
+ configId={configId}
+ forcedAccount={account}
+ envName={CONFIG.envName}
+ metaTx={getMetaTxConfig(configId)}
+ productUuid={productUuid ?? ""}
+ bundleUuid={bundleUuid ?? ""}
+ sellerId={sellerId ?? ""}
+ offerId={offerId ?? ""}
+ lookAndFeel={lookAndFeel}
+ modalMargin={modalMargin}
+ dateFormat="YYYY/MM/DD"
+ shortDateFormat="MMM DD, YYYY"
+ minimumDisputePeriodInDays={CONFIG.minimumDisputePeriodInDays as number}
+ minimumDisputeResolutionPeriodDays={
+ CONFIG.minimumDisputeResolutionPeriodDays as number
  }
-
- try {
- window.parent.postMessage("boson-close-iframe", "*");
- } catch (e) {
- console.error(`Unable to post message ${e}`);
+ contactSellerForExchangeUrl={CONFIG.contactSellerForExchange as string}
+ buyerSellerAgreementTemplate={
+ CONFIG.buyerSellerAgreementTemplate as string
  }
- }}
- ></CommitWidget>
+ licenseTemplate={CONFIG.licenseTemplate as string}
+ defaultCurrencyTicker="USD"
+ defaultCurrencySymbol="$"
+ ipfsGateway={CONFIG.ipfsGateway as string}
+ ipfsProjectId={CONFIG.ipfsProjectId}
+ ipfsProjectSecret={CONFIG.ipfsProjectSecret}
+ children={<></>}
+ walletConnectProjectId={CONFIG.walletConnectProjectId as string}
+ fairExchangePolicyRules={CONFIG.fairExchangePolicyRules as string}
+ closeWidgetClick={() => {
+ if (
+ "close" in window.xprops &&
+ typeof window.xprops.close === "function"
+ ) {
+ window.xprops.close();
+ }
+
+ try {
+ window.parent.postMessage("boson-close-iframe", "*");
+ } catch (e) {
+ console.error(`Unable to post message ${e}`);
+ }
+ }}
+ ></CommitWidget>
+ </>
  );
 }
diff --git a/src/components/widgets/commitButton/CommitButton.tsx b/src/components/widgets/commitButton/CommitButton.tsx
@@ -90,6 +90,10 @@ export function CommitButton() {
  `"context" must be either "iframe" or "popup", "${context}" given`
  );
  }, [context]);
+ const renderToValue = renderToSelector || "body";
+ const bodyOverflow = useMemo(() => {
+ return renderToValue === "body" ? "hidden" : undefined;
+ }, [renderToValue]);
  return (
  <>
  <GlobalStyle />
@@ -101,20 +105,29 @@ export function CommitButton() {
  ref={ref}
  disabled={"disabled" in props && !!props.disabled}
  onClick={() => {
- CommitWidgetModal({ ...commitWidgetProps, modalMargin }).renderTo(
- window.parent,
- renderToSelector || "body",
- validatedContext
- );
+ CommitWidgetModal({
+ bodyOverflow,
+ ...commitWidgetProps,
+ modalMargin
+ }).renderTo(window.parent, renderToValue, validatedContext);
+ if (
+ typeof props.onClickCommitButton === "function" &&
+ props.onClickCommitButton
+ ) {
+ props.onClickCommitButton();
+ }
  }}
  onTaglineClick={() => {
  PurchaseOverviewModal({
+ bodyOverflow,
  modalMargin
- }).renderTo(
- window.parent,
- renderToSelector || "body",
- validatedContext
- );
+ }).renderTo(window.parent, renderToValue, validatedContext);
+ if (
+ typeof props.onClickTagline === "function" &&
+ props.onClickTagline
+ ) {
+ props.onClickTagline();
+ }
  }}
  />
  </>

diff --git a/src/components/widgets/purchaseOverview/PurchaseOverview.tsx b/src/components/widgets/purchaseOverview/PurchaseOverview.tsx
@@ -30,7 +30,13 @@ export const PurchaseOverview = () => {
  }, [props]);
  return (
  <>
- <GlobalStyle />
+ <GlobalStyle
+ $bodyOverflow={
+ typeof props.bodyOverflow === "string"
+ ? props.bodyOverflow
+ : undefined
+ }
+ />
  <PurchaseOverviewReactKit
  lookAndFeel="modal"
  modalMargin={validatedProps.modalMargin}

diff --git a/src/components/widgets/styles.tsx b/src/components/widgets/styles.tsx
@@ -1,4 +1,8 @@
-import styled, { createGlobalStyle } from "styled-components";
+import styled, {
+ createGlobalStyle,
+ css,
+ CSSProperties
+} from "styled-components";
 
 export const Pre = styled.pre`
  all: unset;
@@ -17,7 +21,9 @@ export const Widget = styled.div`
  flex-direction: column;
 `;
 
-export const GlobalStyle = createGlobalStyle`
+export const GlobalStyle = createGlobalStyle<{
+ $bodyOverflow?: CSSProperties["overflow"] | null | undefined;
+}>`
  html, body, #root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
@@ -28,14 +34,15 @@ export const GlobalStyle = createGlobalStyle`
  margin: 0;
  padding: 0;
  font-style: normal;
-
- height: unset;
  }
- #root{
- display: flex;
+ body {
+ ${({ $bodyOverflow }) =>
+ $bodyOverflow &&
+ css`
+ overflow: ${$bodyOverflow};
+ `}
  }
 
-
  a,
  button,
  input,

diff --git a/src/globalStyles.tsx b/src/globalStyles.tsx
@@ -11,7 +11,5 @@ export const GlobalStyle = createGlobalStyle`
  margin: 0;
  padding: 0;
  font-style: normal;
-
- height: 100vh;
  }
 `;