Allows for staging as well when using DuffelCard form (#201)

* Allows for staging as well when using DuffelCard form

* lint-staged removed

package.json

@@ -44,12 +44,6 @@
     "test": "LANG='en_US' TZ=UTC yarn jest",
     "e2e": "bash e2e/start.sh"
   },
-  "lint-staged": {
-    "*.{ts,tsx,mjs,js}": [
-      "eslint --fix",
-      "prettier --write"
-    ]
-  },
   "resolutions": {
     "@babel/traverse": "7.23.2",
     "semver": "7.5.3"
@@ -104,7 +98,6 @@
     "http-server": "14.1.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "lint-staged": "13.2.0",
     "prettier": "2.8.7",
     "prettier-plugin-organize-imports": "3.2.2",
     "prompts": "2.4.2",
@@ -119,4 +112,4 @@
   "engines": {
     "node": ">=18.*"
   }
-}
+}

src/components/DuffelCardForm/DuffelCardForm.tsx

@@ -3,12 +3,10 @@ import { getTokenFromClientKey } from "./lib/getTokenFromClientKey";
 import { DuffelCardFormProps } from "./lib/types";
 import { getIFrameEventListener } from "./lib/getIFrameEventListener";
 
-const LOCAL_TOKEN_PROXY_IFRAME_BASE_URL = "https://localhost:8000/iframe.html";
-
 export const DuffelCardForm: React.FC<DuffelCardFormProps> = ({
   clientKey,
   styles,
-  shouldUseLocalTokenProxy,
+  tokenProxyEnvironment = "production",
 
   actions,
 
@@ -18,12 +16,11 @@ export const DuffelCardForm: React.FC<DuffelCardFormProps> = ({
   onCreateCardForTemporaryUseSuccess,
   onCreateCardForTemporaryUseFailure,
 }) => {
-  const baseUrlString = shouldUseLocalTokenProxy
-    ? LOCAL_TOKEN_PROXY_IFRAME_BASE_URL
-    : process.env.TOKEN_PROXY_IFRAME_BASE_URL;
-
-  if (typeof baseUrlString !== "string") {
-    throw new Error("TOKEN_PROXY_IFRAME_BASE_URL is not defined");
+  let baseUrlString = "https://api.duffel.cards/iframe.html";
+  if (tokenProxyEnvironment === "staging") {
+    baseUrlString = "https://api.staging.duffel.cards/iframe.html";
+  } else if (tokenProxyEnvironment === "development") {
+    baseUrlString = "https://localhost:8000/iframe.html";
   }
 
   const baseUrl = new URL(baseUrlString);

src/components/DuffelCardForm/lib/types.ts

@@ -49,9 +49,11 @@ export interface DuffelCardFormProps {
   styles?: DuffelCardFormStyles;
 
   /**
-   * If you want to develop with a local deployment of the token proxy on port 8000. Set this flag to true.
+   * If you want to develop with in a different environment of the token proxy, you can choose it here.
+   *
+   * @default: `production`
    */
-  shouldUseLocalTokenProxy?: boolean;
+  tokenProxyEnvironment?: "development" | "staging" | "production";
 
   /**
    * The actions you'd like the component to perform.

src/stories/DuffelCardForm.stories.tsx

@@ -12,7 +12,7 @@ type DuffelCardFormStory = StoryObj<typeof DuffelCardForm>;
 const defaultProps: DuffelCardFormProps = {
   clientKey:
     "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbiI6IkVOQ1JZUFRFRF9UT0tFTiJ9.qP-zHSkMn-O9VGSj4wkh_A4VDOIrzpgRxh1xgLZ51rk",
-  shouldUseLocalTokenProxy: true,
+  tokenProxyEnvironment: "development",
   actions: ["validate"],
   onValidateSuccess: console.log,
   onValidateFailure: console.error,