feat(storybook): add support for overriding js sdk query params (#121)

src/stories/PayPalButtons.stories.js

@@ -1,9 +1,11 @@
 import React, { useState } from "react";
 import { FUNDING, PayPalScriptProvider, PayPalButtons } from "../index";
+import { getOptionsFromQueryString } from "./utils";
 
 const scriptProviderOptions = {
     "client-id": "test",
     components: "buttons",
+    ...getOptionsFromQueryString(),
 };
 
 export default {

src/stories/PayPalMarks.stories.js

@@ -5,10 +5,12 @@ import {
     PayPalButtons,
     FUNDING,
 } from "../index";
+import { getOptionsFromQueryString } from "./utils";
 
 const scriptProviderOptions = {
     "client-id": "test",
     components: "buttons,marks,funding-eligibility",
+    ...getOptionsFromQueryString(),
 };
 
 export default {

src/stories/PayPalMessages.stories.js

@@ -1,9 +1,11 @@
 import React from "react";
 import { PayPalScriptProvider, PayPalMessages } from "../index";
+import { getOptionsFromQueryString } from "./utils";
 
 const scriptProviderOptions = {
     "client-id": "test",
     components: "messages",
+    ...getOptionsFromQueryString(),
 };
 
 export default {

src/stories/Subscriptions.stories.js

@@ -4,12 +4,14 @@ import {
     PayPalButtons,
     usePayPalScriptReducer,
 } from "../index";
+import { getOptionsFromQueryString } from "./utils";
 
 const scriptProviderOptions = {
     "client-id": "test",
     components: "buttons",
     intent: "subscription",
     vault: true,
+    ...getOptionsFromQueryString(),
 };
 
 export default {

src/stories/VenmoButton.stories.js

@@ -1,11 +1,14 @@
 import React from "react";
 import { FUNDING, PayPalScriptProvider, PayPalButtons } from "../index";
+import { getOptionsFromQueryString } from "./utils";
 
 const scriptProviderOptions = {
     "client-id":
         "AdLzRW18VHoABXiBhpX2gf0qhXwiW4MmFVHL69V90vciCg_iBLGyJhlf7EuWtFcdNjGiDfrwe7rmhvMZ",
     components: "buttons,funding-eligibility",
     "enable-funding": "venmo",
+    debug: true,
+    ...getOptionsFromQueryString(),
 };
 
 export default {

src/stories/utils.js

@@ -0,0 +1,14 @@
+const StorybookQueryParametersToIgnore = ["path", "id", "args", "viewMode"];
+
+export function getOptionsFromQueryString() {
+    const searchParams = new URLSearchParams(window.location.search) || [];
+
+    return Array.from(searchParams)
+        .filter(([key]) => {
+            return !StorybookQueryParametersToIgnore.includes(key);
+        })
+        .reduce((acc, [key, value]) => {
+            acc[key] = value;
+            return acc;
+        }, {});
+}