From c4ff7137b30b0ea3cfa02906a4a6099dd86578e0 Mon Sep 17 00:00:00 2001
From: Albert Folch <albertfolch@redeemeum.com>
Date: Thu, 9 May 2024 14:12:24 +0200
Subject: [PATCH] feat: add context prop to support popup version

---
 public/scripts/commit-button-example.html     |  1 +
 .../widgets/commitButton/CommitButton.tsx     | 23 ++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/public/scripts/commit-button-example.html b/public/scripts/commit-button-example.html
index 3b825a7..63f4f06 100644
--- 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
index a4dccd3..b77b21d 100644
--- 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
+          );
         }}
       />
     </>