Merge pull request #71 from bosonprotocol/fix-widgets-example

fix: widgets example by adding config id dynamically depending on cur…

package.json

@@ -24,6 +24,7 @@
   },
   "scripts": {
     "start": "react-app-rewired start",
+    "dev": "npm run start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",

public/example.html

@@ -35,5 +35,12 @@
     <div>
       <button type="button" id="boson-redeem" class="bosonButton" data-redeem-callback-url="http%3A%2F%2Flocalhost%3A3666" data-redeem-callback-headers='%7B%0A%20%20"authorization"%3A%20"Bearer%20eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"%2C%0A%20%20"another-header"%3A%20"%2A%2F%2A"%0A%7D'>Show Redeem (3rd-party backend)</button>
     </div>
+    <script>
+      const searchParams = new URLSearchParams(window.location.search);
+      const configId = searchParams.get('configId');
+      document.querySelectorAll('button').forEach(($button)=>{
+        $button.setAttribute('data-config-id',configId);
+      })
+    </script>
   </body>
 </html>

src/components/Index.tsx

@@ -1,15 +1,22 @@
+import { getEnvConfigs } from "@bosonprotocol/react-kit";
+
+import { CONFIG } from "../config";
 import { FinanceDisplay } from "./widgets/finance/FinanceDisplay";
 import { RedeemDisplay } from "./widgets/redeem/RedeemDisplay";
 
 export const indexPath = "/";
 
+const envConfigs = getEnvConfigs(CONFIG.envName);
+
 export function Index() {
   return (
     <div>
       <h1>Boson widgets</h1>
       <FinanceDisplay />
       <RedeemDisplay />
-      <a href="./example.html">Widget Integration Example</a>
+      <a href={`./example.html?configId=${envConfigs[0].configId}`}>
+        Widget Integration Example
+      </a>
     </div>
   );
 }