feat: add callbacks after you click on commit/tagline and also make b…

…ody overflow hidden when you click on them
bosonprotocol · May 21, 2024 · 4630380 · 4630380
1 parent de5cfd8
commit 4630380
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 80 deletions.
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;
@@ -31,6 +37,13 @@ export const GlobalStyle = createGlobalStyle`
 
     height: unset;
   }
+  body{
+    ${({ $bodyOverflow }) =>
+      $bodyOverflow &&
+      css`
+        overflow: ${$bodyOverflow};
+      `}
+  }
   #root{
     display: flex;
   }

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;
   }
 `;