Merge pull request #144 from bosonprotocol/allow-updating-props

feat: allow updating props
bosonprotocol · Apr 18, 2024 · 0850a0b · 0850a0b
2 parents 60e322f + 971f579
commit 0850a0b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/public/scripts/commit-button-example.html b/public/scripts/commit-button-example.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 
 <head>
-  <script src="./zoid/zoid.js"></script>
+  <script src="./zoid/zoid.min.js"></script>
   <script src="../../scripts/commit-button.js"></script>
   <style>
     html,
@@ -20,13 +20,14 @@ <h3>Commit button example</h3>
   <div id="container"></div>
 
   <script>
+    let disabled = false;
     const instance = CommitButton({
       configId: "testing-80002-0",
       productUuid: "086b32-3fcd-00d1-0624-67513e85415c",
       sellerId: "138",
       modalMargin: "2%",
       lookAndFeel: "modal",
-      disabled: false,
+      disabled,
       buttonStyle: {
         minWidth: "100px",
         minHeight: "200px",
@@ -36,15 +37,18 @@ <h3>Commit button example</h3>
       },
       onGetDimensions: function (dimensions) {
         const { offsetHeight, offsetWidth } = dimensions;
-        document.querySelector(
-          "#container"
-        ).style.height = `${offsetHeight}px`;
+        document.querySelector("#container").style.height = `${offsetHeight}px`;
         document.querySelector(
           "#container"
         ).style.minWidth = `${offsetWidth}px`;
       }
     });
 
     instance.render("#container");
+    function toggleDisableState() {
+      disabled = !disabled;
+      instance.updateProps({ disabled });
+    }
   </script>
+  <button onclick="toggleDisableState()" style="margin: 20px;">toggle disable state</button>
 </body>
diff --git a/src/components/widgets/commitButton/CommitButton.tsx b/src/components/widgets/commitButton/CommitButton.tsx
@@ -3,6 +3,7 @@
 
 import { CommitButtonView } from "@bosonprotocol/react-kit";
 import { ElementRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { useState } from "react";
 import * as yup from "yup";
 
 import { GlobalStyle } from "../styles";
@@ -11,7 +12,6 @@ export const commitButtonPath = "/commit-button";
 declare const CommitWidgetModal: (props: Record<string, unknown>) => any;
 declare const PurchaseOverviewModal: (props: Record<string, unknown>) => any;
 
-const emptyObject = {};
 const yupStringOrNumber = yup
   .mixed<string | number>()
   .test(
@@ -24,8 +24,15 @@ const yupStringOrNumber = yup
   );
 export function CommitButton() {
   const ref = useRef<ElementRef<"div">>(null);
-  const props = window.xprops ?? emptyObject;
+  const [props, setProps] = useState(window.xprops ?? {});
   const { renderToSelector, buttonStyle, ...commitWidgetProps } = props;
+  useEffect(() => {
+    if ("xprops" in window && typeof window.xprops.onProps === "function") {
+      window.xprops.onProps((newProps: typeof props) => {
+        setProps({ ...newProps });
+      });
+    }
+  }, []);
   const modalMargin = props.modalMargin || "2%";
   const sendDimensions = useCallback(() => {
     if (

diff --git a/src/components/widgets/purchaseOverview/PurchaseOverview.tsx b/src/components/widgets/purchaseOverview/PurchaseOverview.tsx
@@ -2,14 +2,20 @@
 /* eslint-disable no-var */
 
 import { PurchaseOverview as PurchaseOverviewReactKit } from "@bosonprotocol/react-kit";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import * as yup from "yup";
 
 import { GlobalStyle } from "../styles";
 export const purchaseOverviewPath = "/purchase-overview";
-const emptyObject = {};
 export const PurchaseOverview = () => {
-  const props = window.xprops ?? emptyObject;
+  const [props, setProps] = useState(window.xprops ?? {});
+  useEffect(() => {
+    if ("xprops" in window && typeof window.xprops.onProps === "function") {
+      window.xprops.onProps((newProps: typeof props) => {
+        setProps({ ...newProps });
+      });
+    }
+  }, []);
   const validatedProps = useMemo(() => {
     return yup
       .object({