Merge pull request #148 from bosonprotocol/add-context-prop-commit-bu…

…tton feat: add context prop to support popup version
bosonprotocol · May 9, 2024 · facf028 · facf028
2 parents 677a4ed + c4ff713
commit facf028
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/public/scripts/commit-button-example.html b/public/scripts/commit-button-example.html
@@ -25,6 +25,7 @@ <h3>Commit button example</h3>
       configId: "testing-80002-0",
       productUuid: "086b32-3fcd-00d1-0624-67513e85415c",
       sellerId: "138",
+      context: "iframe",
       modalMargin: "2%",
       lookAndFeel: "modal",
       disabled,

diff --git a/src/components/widgets/commitButton/CommitButton.tsx b/src/components/widgets/commitButton/CommitButton.tsx
@@ -25,7 +25,8 @@ const yupStringOrNumber = yup
 export function CommitButton() {
   const ref = useRef<ElementRef<"div">>(null);
   const [props, setProps] = useState(window.xprops ?? {});
-  const { renderToSelector, buttonStyle, ...commitWidgetProps } = props;
+  const { renderToSelector, buttonStyle, context, ...commitWidgetProps } =
+    props;
   useEffect(() => {
     if ("xprops" in window && typeof window.xprops.onProps === "function") {
       window.xprops.onProps((newProps: typeof props) => {
@@ -77,6 +78,18 @@ export function CommitButton() {
     }
     return {} as typeof buttonStyleValidated;
   }, [buttonStyle]);
+  const validatedContext = useMemo(() => {
+    if (!context) {
+      return "iframe";
+    }
+
+    if (yup.mixed().oneOf(["iframe", "popup"]).isValidSync(context)) {
+      return context;
+    }
+    throw new Error(
+      `"context" must be either "iframe" or "popup", "${context}" given`
+    );
+  }, [context]);
   return (
     <>
       <GlobalStyle />
@@ -91,13 +104,17 @@ export function CommitButton() {
           CommitWidgetModal({ ...commitWidgetProps, modalMargin }).renderTo(
             window.parent,
             renderToSelector || "body",
-            "iframe"
+            validatedContext
           );
         }}
         onTaglineClick={() => {
           PurchaseOverviewModal({
             modalMargin
-          }).renderTo(window.parent, renderToSelector || "body", "iframe");
+          }).renderTo(
+            window.parent,
+            renderToSelector || "body",
+            validatedContext
+          );
         }}
       />
     </>