From 4630380d427c55f453256afa00eda605c561d785 Mon Sep 17 00:00:00 2001
From: Albert Folch <albertfolch@redeemeum.com>
Date: Tue, 21 May 2024 13:22:41 +0200
Subject: [PATCH] feat: add callbacks after you click on commit/tagline and
 also make body overflow hidden when you click on them

---
 package-lock.json                             | 34 +++----
 package.json                                  |  2 +-
 public/scripts/commit-button-example.html     | 13 ++-
 src/components/widgets/commit/Commit.tsx      | 94 ++++++++++---------
 .../widgets/commitButton/CommitButton.tsx     | 33 +++++--
 .../purchaseOverview/PurchaseOverview.tsx     |  8 +-
 src/components/widgets/styles.tsx             | 17 +++-
 src/globalStyles.tsx                          |  2 -
 8 files changed, 123 insertions(+), 80 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6be215c..d2930bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "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",
@@ -2157,9 +2157,9 @@
       }
     },
     "node_modules/@bosonprotocol/common": {
-      "version": "1.27.2",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.27.2.tgz",
-      "integrity": "sha512-WmHJU4ORlHncgh/g3TkO1e+ErsR8vUVAIdGXCV9tX6ZlB3rodFVivDw4tZpZCKX556wRbrA4eRIRV1BMejga7w==",
+      "version": "1.27.3",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.27.3.tgz",
+      "integrity": "sha512-XXBpWLopa/pwODJPiXHbRGpffHtZ5/u3bYABPKM7QeoPf4WSdxH+skF4r722NwN0kvY5F18ykUt/52UcZsWk+g==",
       "dependencies": {
         "@bosonprotocol/metadata": "^1.16.1",
         "@ethersproject/abi": "^5.5.0",
@@ -2171,11 +2171,11 @@
       }
     },
     "node_modules/@bosonprotocol/core-sdk": {
-      "version": "1.40.2",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.2.tgz",
-      "integrity": "sha512-KtRU8lr7wV9d20SdLdnKJEC8zH8qplbV6a9ltWWibqjiEPaGxviTs2sq/iFnGIMDjGCyssfzfAN48d5WDzU1NQ==",
+      "version": "1.40.3",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.3.tgz",
+      "integrity": "sha512-wBlo9+WJfh55B3CgRA5GHpILLaCyfHkdSvYIei/7pE73QUSGwcln9/x2VH25cq2E+iI3Qr1sG8we2XTNlLx+rw==",
       "dependencies": {
-        "@bosonprotocol/common": "^1.27.2",
+        "@bosonprotocol/common": "^1.27.3",
         "@ethersproject/abi": "^5.5.0",
         "@ethersproject/address": "^5.5.0",
         "@ethersproject/bignumber": "^5.5.0",
@@ -2205,11 +2205,11 @@
       }
     },
     "node_modules/@bosonprotocol/ethers-sdk": {
-      "version": "1.14.2",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.2.tgz",
-      "integrity": "sha512-8l/QPSvxId7oylejWBCa7wwsVOQQCxo781gmejlhz1xPqWhoqj5lJ+yDcdrtuQkmT8gAjlRZEIv0iONnk9un0w==",
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.3.tgz",
+      "integrity": "sha512-GKq+pWSzlPSbh7L9lGcKgvW8yEspyEyp70wjmcwuYrKfi+IACFyxQQMtwd7a+yvhH8FXUYPIlL9jybl2PfICaw==",
       "dependencies": {
-        "@bosonprotocol/common": "^1.27.2"
+        "@bosonprotocol/common": "^1.27.3"
       },
       "peerDependencies": {
         "ethers": "^5.5.0"
@@ -2235,13 +2235,13 @@
       }
     },
     "node_modules/@bosonprotocol/react-kit": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.30.0.tgz",
-      "integrity": "sha512-Ywf8ggn9eZ5wTC84h1Rm6WxmmnsoTCPmQ15nvz5eJ6XUu6LHfUtE0NF1iKdUimb5feB8slfXALxvxQGCbTGcLg==",
+      "version": "0.30.1",
+      "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.30.1.tgz",
+      "integrity": "sha512-K5kKDnFFR920Fk2tJ+QwXOmekWE7Y7wOcNqpw9/QH7xm5GOxLnPrSRwe1HQFjjZthFMuEi2zp1pHcK6cI/8IvA==",
       "dependencies": {
         "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-        "@bosonprotocol/core-sdk": "^1.40.2",
-        "@bosonprotocol/ethers-sdk": "^1.14.2",
+        "@bosonprotocol/core-sdk": "^1.40.3",
+        "@bosonprotocol/ethers-sdk": "^1.14.3",
         "@bosonprotocol/ipfs-storage": "^1.11.3",
         "@davatar/react": "1.11.1",
         "@ethersproject/units": "5.6.0",
diff --git a/package.json b/package.json
index 9dd3c63..fe6c1a6 100644
--- 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
index 1cac29d..f6ec20a 100644
--- 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
index add4282..8a62aad 100644
--- 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
index b77b21d..1cea868 100644
--- 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
index 4eb608a..e6cdc46 100644
--- 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
index ae7d68b..45af48d 100644
--- 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
index ca87fc6..faa8327 100644
--- 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;
   }
 `;