Merge pull request #152 from bosonprotocol/add-close-callbacks

feat: add close callbacks

package.json

@@ -44,7 +44,7 @@
     ]
   },
   "dependencies": {
-    "@bosonprotocol/react-kit": "^0.30.1",
+    "@bosonprotocol/react-kit": "^0.31.0",
     "@krakenjs/zoid": "^10.3.3",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^5.16.5",

public/scripts/commit-button-example.html

@@ -64,6 +64,12 @@ <h3>Commit button example</h3>
       },
       onClickTagline: function () {
         console.log("you clicked on the tagline!");
+      },
+      onCloseCommitButton: function () {
+        console.log("commit button widget was closed!");
+      },
+      onCloseTagline: function () {
+        console.log("purchase overview widget was closed!");
       }
     });
 

src/components/widgets/commitButton/CommitButton.tsx

@@ -108,6 +108,14 @@ export function CommitButton() {
           CommitWidgetModal({
             bodyOverflow,
             ...commitWidgetProps,
+            onClose: () => {
+              if (
+                typeof props.onCloseCommitButton === "function" &&
+                props.onCloseCommitButton
+              ) {
+                props.onCloseCommitButton();
+              }
+            },
             modalMargin
           }).renderTo(window.parent, renderToValue, validatedContext);
           if (
@@ -120,6 +128,14 @@ export function CommitButton() {
         onTaglineClick={() => {
           PurchaseOverviewModal({
             bodyOverflow,
+            onClose: () => {
+              if (
+                typeof props.onCloseTagline === "function" &&
+                props.onCloseTagline
+              ) {
+                props.onCloseTagline();
+              }
+            },
             modalMargin
           }).renderTo(window.parent, renderToValue, validatedContext);
           if (

src/components/widgets/purchaseOverview/PurchaseOverview.tsx

@@ -19,31 +19,25 @@ export const PurchaseOverview = () => {
   const validatedProps = useMemo(() => {
     return yup
       .object({
-        close: yup.mixed<() => any>().test({
-          test: (value) => {
-            return value === undefined || typeof value === "function";
-          }
-        }),
-        modalMargin: yup.string().optional()
+        modalMargin: yup.string().optional(),
+        bodyOverflow: yup.string().optional().nullable(true)
       })
       .validateSync(props);
   }, [props]);
   return (
     <>
-      <GlobalStyle
-        $bodyOverflow={
-          typeof props.bodyOverflow === "string"
-            ? props.bodyOverflow
-            : undefined
-        }
-      />
+      <GlobalStyle $bodyOverflow={validatedProps.bodyOverflow} />
       <PurchaseOverviewReactKit
         lookAndFeel="modal"
         modalMargin={validatedProps.modalMargin}
-        hideModal={
-          validatedProps.close ||
-          (() => console.log("close purchase overview modal"))
-        }
+        hideModal={() => {
+          if (
+            "close" in window.xprops &&
+            typeof window.xprops.close === "function"
+          ) {
+            window.xprops.close();
+          }
+        }}
       />
     </>
   );

src/components/widgets/redeem/Redeem.tsx

@@ -110,7 +110,8 @@ export function Redeem() {
   const signatures = signaturesStr ? signaturesStr.split(",") : undefined;
 
   const eventTag = searchParams.get("eventTag") as string;
-
+  const lookAndFeel =
+    (searchParams.get("lookAndFeel") as "regular" | "modal") || "regular";
   // In case the deliveryInfo shall be transferred between frontend windows, the targetOrigin
   //  the deliveryInfo message shall be posted to
   //  (see https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#targetorigin)
@@ -127,6 +128,7 @@ export function Redeem() {
       signatures={signatures}
       configId={configId}
       forcedAccount={account}
+      lookAndFeel={lookAndFeel}
       envName={CONFIG.envName}
       metaTx={getMetaTxConfig(configId)}
       dateFormat="YYYY/MM/DD"